• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

TheGlorious

[HTML/XHTML]Principais Tag's HTML

2 mensagens neste tópico

Fica aqui um " tutorial " que acabei de elaborar com base no w3schools

Agradeço críticas e sugestões  :)

TAGS BÁSICAS

<!-- Comentários -->

<html></html> <!-- Abrir e fechar HTML -->
<head></head> <!-- Cabeçalho -->
<title></title> <!-- Título -->
<body></body> <!-- Corpo da página -->
<h1></h1> <!-- Heading 1 -->
<h2></h2> <!-- Heading 2 -->
<h3></h3> <!-- Heading 3 -->
<h4></h4> <!-- Heading 4 -->
<h5></h5> <!-- Heading 5 -->
<h6></h6> <!-- Heading 6 -->
<p></p> <!-- Parágrafo -->
<br /> <!-- Quebra de linha -->
<hr /> <!-- Linha horizontal -->
<table></table> <!-- Tabela -->
<tr></tr> <!-- Linha de uma tabela -->
<td></td> <!-- Coluna de uma tabela -->
<a href="pagina.html" > <!-- Hiperligação -->
<form></form> <!-- Formulário -->
<input /> <!-- Input -->
<textarea></textarea> <!-- Área de texto -->
<label></label>  <!-- " Legenda " -->
<fieldset></fieldset> <!-- " Legenda " -->
<legend></legend> <!-- Legenda -->
<select></select> <!-- Conjunto de opções -->
<optgroup></optgroup> <!-- Grupos de opções -->
<option></option> <!-- Opção -->

EXEMPLOS DE ATRIBUTOS

<p align="center"> <!-- Alinhar parágrafo ao centro -->
<p align="justify"> <!-- Alinhar parágrafo justificado -->
<p align="left"> <!-- Alinhar parágrafo à esquerda -->
<p align="right"> <!-- Alinhar parágrafo à direita -->
<table style=""> <!-- Usar para colocar Tag's CSS -->
<table class=""> <!-- Classe de um CSS -->
<table background="url_da_imagem.extensão"> <!-- Definir uma imagem de fundo -->
<table bgcolor=""> <!-- Definir uma cor de fundo -->
<table border=""> <!-- Definir a borda -->
<table bordercolor=""> <!-- Definir a cor da borda -->
<table cellpadding=""> <!-- Definir o espaço entre o texto e as bordas das <td>'s -->
<table cellspacing=""> <!-- Definir o espaçamento entre células -->
<table width=""> <!-- Definir a largura -->
<table height=""> <!-- Definir a altura -->
<td colspan=""> <!-- Unir colunas -->
<td rowspan=""> <!-- Unir linhas -->
<form enctype="application/x-www-form-urlencoded"> <!-- Método padrão -->
<form enctype="multipart/form-data"> <!-- Usado para upload -->
<form enctype="text/plain"> <!--  -->
<form method="get"> <!-- Envia os valores dos inputs pelo url -->
<form method="post"> <!-- Envia os valores ao servidor em um bloco de dados -->
<form name=""> <!-- Nome do formulário -->
<input type="button" /> <!-- Botão -->
<input type="checkbox" /> <!-- Escolher várias opções -->
<input type="file" /> <!-- Procurar um arquivo (usado normalmente para uploads) -->
<input type="hidden" /> <!-- Input escondido -->
<input type="password" /> <!-- Mostrar símbolos ao escrever, ao invés das letras/números/outros -->
<input type="radio" /> <!-- Várias opções das quais só podemos escolher uma -->
<input type="reset" /> <!-- Limpar o formulário -->
<input type="submit" /> <!-- Enviar o formulário -->
<input type="text" /> <!-- Input de texto -->
<label for=""> <!-- " Legenda " para 'nome_do_input' -->
<option value=""> <!-- Valor da opção -->
<img /> <!-- Imagem -->

FORMATAÇÃO DE TEXTOS

<strong></strong> <!-- Negrito -->
<em></em> <!-- Itálico -->
<small></small> <!-- Pequeno -->
<big></big> <!-- Grande -->

ATRIBUTOS DAS HIPERLIGAÇÕES

<a href="pagina.html" target="_blank"> <!-- Abre a página.html num novo separador -->
<a href="pagina.html" target="_parent"> <!-- Abre a página.html na frame "Pai" -->
<a href="pagina.html" target="_self"> <!-- Abre a página na mesma frame onde está a Hiperligação -->
<a href="pagina.html" target="_top"> <!--  -->
<a href="pagina.html" target="nome"> <!-- Abrir a página.html na frame "nome" -->
<a name="nome"> <!--  -->
<a title=""> <!-- Com o rato em cima da Hiperligação, msotra o que estiver entre aspas -->
<a accesskey=""> <!-- Atalho para Hiperligação -->
<a href="mailto:mail@mail.com?subject=ASSUNTO%20DO%20MAIL"> <!-- Abrir Out -->

CHAVES DE ACESSO

Mozilla Firefox 2.0 (e superior): Alt + Shift + Chave
Internet Explorer: Alt + Chave -> Enter
Opera: Shift + Esc + Chave
Amaya: Ctrl/Alt + Chave
Konqueror (Linux): Ctrl -> Chave
Outros browsers (PC): Alt + Chave
Outros browsers (Mac): Ctrl + Chave

LISTAS (Algumas usadas para menus)

<ol> <!-- Define uma lista ordenada -->
<ul> <!-- Define uma lista não ordenada -->
<li> <!-- Define um item da lista -->
<dl> <!-- Define uma lista -->
<dt> <!-- Define um termo -->
<dd> <!-- Define uma descrição -->

ATRIBUTOS E CARACTERÍSTICAS DOS INPUTS/BOTÕES

<input accesskey="" /> <!-- Atalho para input -->
<input class="" /> <!-- Classe de um CSS -->
<input maxlength="" /> <!-- Máximo número de caracteres -->
<input height="" /> <!-- Altura -->
<input id="" /> <!-- Id -->
<input name="" /> <!-- Nome -->
<input readonly="readonly" /> <!-- Apenas ler, isto é, o utilizador não pode mudar o seu valor -->
<input size="" /> <!-- Tamanho -->
<input value="" /> <!-- Valor por defeito -->
<input type="text" disabled="disabled" /> <!-- Desabilitado. Semelhante ao " readonly ", mas não dá para ler -->
<input type="radio" checked="checked" /> <!-- Valor selecionado pro defeito -->
<input type="checkbox" checked="checked" /> <!-- Valor selecionado pro defeito -->
<textarea cols=""> <!-- Largura -->
<textarea rows=""> <!-- Altura -->

ATRIBUTOS DAS IMAGENS

<img alt="" /> <!-- Descrição -->
<img height="" /> <!-- Altura -->
<img width="" /> <!-- Largura -->
<img title="" /> <!-- Título -->


EXEMPLOS


Documento Básico HTML

<html>
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>

Elementos Heading

<h1>A a a - Grande</h1>
<h2>A a a</h2>
<h3>A a a</h3>
<h4>A a a</h4>
<h5>A a a</h5>
<h6>A  a a - Pequeno</h6>

Elemento de Texto

<p>Parágrafo</p>
<br>Quebra de linha
<hr>Linha horizontal

Estilos Lógicos

<em>Ênfatiz</em>
<strong>Forte</strong>

Estilos Físicos

<b>Negrito</b>
<i>Itálico</i>

Hiperligações

<a href="http://www.exemplo.com/">Hiperligação</a>
<a href="http://www.exemplo.com/"><img src="URL_DA_IMAGEM" alt="Texto alternativo"></a>
<a href="mailto:mail@mail.com">Enviar e-mail</a>

Hiperligações na mesma página

<a name="nome">Clica</a>
<a href="#nome">Vieste para aqui por teres clicado em "Clica"</a>

Lista Não Ordenada

<ul>
<li>Um</li>
<li>Dois</li>
</ul>

Lista Ordenada

<ol>
<li>Um</li>
<li>Dois</li>
</ol>

Lista de Definições

<dl>
<dt>Termo um</dt>
<dd>Definição</dd>
<dt>Termo dois</dt>
<dd>Definiçãp</dd>
</dl>

Tabelas

<table border="1">
<tr>
<td colspan="2">Junção de duas colunas</td>
</tr>
<tr>
<td>Coluna um</td>
<td>Coluna dois</td>
</tr>
</table>

Forms

<form action="pagina.ext" method="post/get">

<input type="text" name="Nome" value="Luis" size="30" maxlength="50" />
<input type="password" name="Senha" />
<input type="checkbox" checked="checked" name="Checkbox" value="check1" />
<input type="checkbox" name="Checkbox" value="check2" />
<input type="radio" checked="checked" name="Radio" value="rad1" />
<input type="radio" checked="checked" name="Radio" value="rad2" />
<select name="Select">
<optgroup label="Sumos">
	<option>Coca-cola</option>
	<option>Sumol</option>
    </optgroup>
<optgroup label="Vinhos">
	<option selected>Casal Garcia</option>
	<option>Gazela</option>
    </optgroup>
</select>
<textarea name="Comentario" rows="60" cols="20"></textarea>
<input type="reset" />
<input type="submit" name="enviar" value="Enviar formulário" />
</form>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora