HTML
DDW
TAGS
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da
seguinte maneira.
<tag>Conteúdo da tag</tag>
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode
ser fechada da seguinte maneira:
</tag>
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
<tag>
<outraTag>texto</outraTag>
</tag>
Algumas tag's possuem propriedades que podem possuir valores (atributos).
<tag atributo=“”></tag>
PRINCIPAIS TAGS
<html> <!-- define o início e fim do HTML -->
<head> <!-- define início e fim de cabeçalho-->
<title>Título da página</title>
<!-- conteúdo do head -->
</head>
<body> <!-- define início e fim do conteúdo -->
<!-- conteúdo do body -->
</body>
</html>
<!-- tag de comentários, não serão visíveis no site -->
<H1><H2><H3><H4><H5><H6>
Dentro da tag <body> é que vão entrar todos os
elementos que ficarão visíveis aos usuários. A partir
daqui agruparemos as principais tags e seus
funcionamentos!
<h1>Texto</h1> O H1 é utilizado para marcar um
título. Você pode utilizar diversos níveis de
relevância, para isso basta mudar o número na tag:
<h1></h1> <h2></h2> … <h6></h6>
<P> - <STRONG> - <EM>
<p>Texto</p>– O P é utilizado para definir um parágrafo.
<Strong>Texto</Strong>– O STRONG é utilizado para
deixar um texto em negrito. A tag <b></b> tem um
comportamento semelhante, porém a W3C recomenda
utilizar o <Strong>.
<em>Texto</em>– A tag EM é utilizada para deixar um
elemento em itálico. A tag <i></i> foi utilizada durante
muito tempo para isso, porém a W3C recomenda que
utilize o <em> mesmo.
<u>Texto</u>– A tag U é usada para sublinhar um termo.
<SPAN>
<span></span>– SPAN é uma tag inline usada para
marcar um trecho de texto. Ele é frequentemente
usado para personalizar um trecho de texto em um
paragráfo via css, já que naturalmente não altera
nada no HTML.
<p>Sou um<span>pequeno parágrafo</span></p>
<UL> - <OL> - <LI>
<ul></ul> – <ol></ol> – <li></li>– Os elementos UL e
OL são usados para iniciar uma lista, sendo o <ul>
para uma sem ordenação numérica e o <ol> para
uma com ordenação numérica. Os elementos
dentro dessa lista devem ser marcados com a tag LI.
<ul> <!-- ou <ol> para ordenação numérica -->
<li>Sou um elemento de uma lista</li>
<li>Sou outro elemento dentro da lista</li>
</ul> <!-- ou </ol> para ordenação numérica -->
<IMG>
<img /> – A tag IMG é usada para renderizar uma
imagem no site. É necessário que o atributo src seja
preenchido com o caminho para a imagem. Os atributos
width e height devem ser preenchidos com a largura e a
altura da imagem em pixels. O atributo alt, deve conter
uma pequena descrição da imagem para o caso do
navegador não conseguir reproduzir a imagem e por
questões de acessibilidade para leitores de tela usados
por cegos.
Exemplo:
<img src=“images/imagem.jpg" width="50" height="50"
alt="Descrição da imagem" />
<DIV>
<div></div>– O DIV é uma tag de bloco, usado para
agrupar elementos semelhantes. Um uso comum dele é
para categorizar o cabeçalho (Header) da página, o
conteúdo (content) e o rodapé (footer). É muito utilizado
para auxiliar na personalização do site através do CSS.
<div> <!-- cabeçalho -->
<h2>Título</h2>
<p>Texto do parágrafo</p>
<img src=“smile.jpg" width=“20" alt=“smile" />
</div> <!-- fim do cabeçalho -->
<A>
<a></a>– O A é um elemento responsável por "linkar"
páginas/arquivos na sua página ou de uma página
externa. Através do atributo href você pode especificar
aonde está a página/arquivo a ser linkado.
<a href="clientes.html">Página de clientes</a>
<a href="currículo.pdf“>Curriculo</a>
<a href=“http://link.br” target=“_blank”>LINK</a>
Também há como enviar e-mails por link:
<a href="mailto:
[email protected]?subject=Contato WEB!">
[email protected]</a>
<TABLE>
<table></table> – <td></td> – <tr></tr> – A tag TABLE é usada para
demarcar uma tabela. As linhas são marcadas com a tag TR
enquanto as colunas ficam com a tag TD. É possível agrupar
colunas com o atributo colspan e linhas com o atributo rowspan.
<table>
<tr>
<td>Primeira coluna da primeira linha</td>
<td>Segunda coluna da primeira linha</td>
</tr>
<tr>
<td colspan=2>2ª linha com a coluna ocupando espaço de
duas</td>
</tr>
</table>
<FORM>
<form></form>– A tag FORM serve para demarcar a
área de um formulário. A tag form tem o atributo
action, que determina qual ação vai ser executada
quando ele for submetido.
<form action="envioFormulario.php">
</form>
<INPUT>
<input />– A tag INPUT pode adquirir características especificas de acordo com o
atributo type que ela receber.
<input type="text" value="Digite aqui" />
<!--Campo onde o usuário pode digitar um pequeno texto. Caso queira deixar um
valor por padrão, basta adicionar um atributo value com o valor desejado.-->
<input type="submit" />
<!-- Cria um botão que vai submeter o formulário ao ser clicado.-->
<input type="file" />
<!-- Cria um campo para fazer uploads de arquivos.-->
<input type="radio" name="grupo" value=“op1”/>Opção 1
<input type="radio" name="grupo" value=“op2”/>Opção 2
<input type="radio" name="grupo" value=“op3”/>Opção 3
<!-- Cria um campo para seleção única.
As opções disponíveis são agrupadas pelo name, ou seja, se houverem 3 inputs radio
com o mesmo name, o usuário só poderá escolher um deles.-->
<input type="checkbox" name=“grupo” value=“op1”/>Opção 1
<input type="checkbox" name=“grupo” value=“op1”/>Opção 2
<!-- Bem semelhante ao radio, porém permite múltipla seleção.-->
<TEXTAREA> - <LABEL>
<textarea></textarea>– A tag TEXTAREA tem um
comportamento semelhante ao do input text, porém ele é
destinado a textos maiores.
<label></label>– A tag LABEL permite que você atribua uma
legenda a um campo do seu formulário. Existem duas formas
de usa-la:
<label>Sou uma legenda
<input type="text" />
</label>
<label for="campo">Sou uma legenda</label>
<input type="text" />
ALGUMAS TAGS HTML 5
Boa parte das tags HTML 5 ainda não estão totalmente compatíveis com todos os navegadores.
Principalmente quando falamos do Internet Explorer 8 ou inferior.
<header></header>– A tag HEADER serve para limitar o cabeçalho da sua página. Ele foi criado com a
intenção de simplificar o famoso <div id="cabecalho"> / <div id="header">. Cuidado para não confundi-lo
com a tag HEAD. O HEADER deve ser utilizado dentro do BODY como auxiliar semântico, enquanto o
HEAD fica dentro da tag HTML e trás informações somente visíveis para o navegador.
<footer></footer>– O FOOTER assim como o HEADER serve para auxiliar na formatação da página e veio
para substituir a famoso <div id="rodapé">/<div id="footer">.
<aside></aside>– A tag ASIDE é utilizada para demarcar as regiões laterais das páginas que geralmente
carregam elementos de navegação, ou informações auxiliares ao conteúdo principal.
<section></section> -A tag SECTION tem um funcionamento muito semelhante ao da DIV porém ela serve
para demarca que um bloco de conteúdo possui uma relação mais próxima. Enquanto o DIV não
carrega valor semântico algum.
<article></article>– A tag ARTICLE serve para definir o conteúdo principal de uma página.
<nav></nav>– A tag NAV é usada para indicar uma navegação. Ela deve ser usada para agrupar links
de navegação.
