O HTML é uma abreviação de HyperText Markup Language ou seja que em português significa, Linguagem de marcação de Hipertexto. Os arquivos HTML são interpretados pelos navegadores (browsers), portanto, caso você tenha algum arquivo HTML no computador, basta pedir que o seu navegador abra ele.
O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.
É importante seguir alguns padrões ao criar seu arquivo HTML.
- Primeiramente tente sempre que possível usar as letras em caixa baixa, ou seja, todas em minúsculo.
- O comentário em HTML é feito da seguinte maneira <!–Comentário a seguir –>
- Tente manter seu documento indentado para facilitar a manutenção. Uma tabulação com 2-4 espaços é o suficiente para ajudar na endentação do documento.
Ex:
- Evitem de colocar elementos redundantes no código. Um uso comum é o de <br /> para pular linhas e definir uma altura para um elemento, enquanto o correto seria definir a altura através do Css.
- Uma página HTML tem a extensão .html, porém elas podem ser geradas dinamicamente com alguma linguagem com o PHP, ASP, PYTHON… Então em alguns casos essa extensão é alterada para a extensão da linguagem utilizada para gerar a página HTML.
Quais editores HTML usar.
Para escrever código HTML basta um simples editor de texto como o bloco de notas (notepad). Porém eu recomendo editores mais robustos para facilitar um pouco sua vida. Os principais são es seguintes:
- Sublime Text 2: Considero o melhor editor atualmente. Experimente usar a extensão Zen Coding em conjunto com ele e experimente o máximo da performance ao criar seus arquivos HTML.
- Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também.
- Dreamweaver: Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele não gera um código muito semântico.
Vou abordar agora as principais tags HTML e explicar um pouco de seu funcionamento.
HTML – <html> </html>
Essa tag é responsável por definir o início de um documento HTML e seu fim. Logo deve ser aberta no início do documento e fechado no seu final.
HEAD – <head></head>
Tag que define o início e o fim do cabeçalho do documento. Abordaremos mais abaixo o que deve ser inserido no cabeçalho.
BODY – <body></body>
Tag onde devem ser inseridos os conteúdos do site que deverão ficar visíveis ao usuários quando a página for renderizada no navegador.
Somente com essas três tags já podemos ter uma estrutura HTML básica. Segue um exemplo.
O <!DOCTYPE html> inserido antes da tag <html> no exemplo anterior é para especificar para o navegador o tipo de página HTML que ele vai renderizar. Existem diferentes tipos de HTML usados atualmente porém os mais usados são o HTML 5, cujo doctype especificado é o que eu utilizei no exemplo, o HTML 4.1 e o XHTML. Nos últimos dois exemplos o doctype é um pouco mais complexo, trazendo informações sobre o tipo de documento (Strict, transitional e frameset). Porém recomendo que sempre utilizem o doctype do HTML 5, pois ele é mais enxuto e mesmo que não utilize HTML 5 em sua página não vai prejudicar em nada a renderização da página pelo browser.
Cabeçalho <head>
No cabeçalho trazemos informações que serão usadas pelo navegador como:
TITLE – <title>Sou o título da página</title>
Título da página a ser exibido (texto que fica na aba de seu navegador quando uma página esta aberta)
LINK – <link href="" type="" media="" rel="" />
Geralmente usado para selecionar arquivo externo no HTML. Um uso comum dele é para selecionar arquivos CSS (responsáveis por definir a aparência da sua página para o usuário final).
Ex:
Nessa linha, definimos que arquivo a ser utilizado na página é do tipo CSS, para ser renderizado em telas (Monitores, TV's, smartphones…)
METATAGS – code><meta name="" content="" />
Metatags tem uma infinidade de funções que não irei citar aqui, porém nesse link existem mais informações sobre todas elas, http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.
Atualmente só costumo utilizar duas. Uma para referenciar para os buscadores um breve resumo sobre a página, chamada DESCRIPTION. O seu uso é basicamente da seguinte forma:
<meta name="description" content="Aqui entra o resumo sobre a página. É recomendável que você não ultrapasse 160 caracteres nesse texto" />
E a metatag CHARSET. Com ela você define que tipo de codificação que o seu texto vai usar ao ser renderizado pelo navegador. Recomendo utilizar o utf-8 mesmo. Porém existem casos onde é preciso usar uma diferente. Existem duas formas de usar o charset. Uma para HTML 5 e uma para os demais. Seguem os exemplos:
HTML 5: <code><meta charset="utf-8" /></code>
Demais: <code><meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ /></code>
Novamente, recomendo utilizar a marcação do HTML 5 por ser mais enxuta.
Existe ainda a tag <script> que é chamada no cabeçalho por alguns desenvolvedores, porém, prefiro chama-la no final do <body> para não atrapalhar no carregamento dos demais componentes de suas página.
Segue uma exemplo de um cabeçalho:
Corpo da página – <body>
Dentro da tag <body> é que vão entrar todos os elementos que ficarão visíveis aos usuários. As tags usadas dentro do body podem ser divididas em inline e block. Tags inline são tags que mantem o fluxo comum do conteúdo e tags block quebram o fluxo e geram o elemento abaixo do último block. Você pode usar uma tag inline dentro de uma block, mas não pode usar uma block dentro de uma inline por questões de semântica.
Vou agrupa as principais tags e explicar o seu funcionamento:
<h1></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. As heading tags como são chamadas, vão de 1 á 6. Ou seja, você pode ter um<h1></h1> <h2></h2> … <h6></h6>. É recomendável por questões de otimização e semântica que você utilize apenas um <h1>, que seria o título da página como um todo, e que posicione ele o quanto antes no <body>. Porém as demais tags de título podem ser usadas conforme a necessidade.
Ex:
<p></p>– O P é utilizado para definir um parágrafo.
Ex:
<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.
Ex:
<Strong></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>.
Ex:
<em></em>– A tag EM é utilizada para deixar um elemento em itálico. A tag <i> foi utilizada durante muito tempo para isso porém a W3C recomenda que utilize o <em> mesmo.
Ex:
<u></u>– A tag U é usada para sublinhar um termo.
Ex:
<br />– A tag BR é utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde deveriam existir paragráfos.
Ex:
<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.
Ex:
<a></a>– O A é um elemento responsável por "linkar" páginas/arquivos na sua página. Através do atributo href você pode especificar aonde está a página/arquivo a ser linkado na página.
Ex:
Link externo:
<img /> – A tag IMG é usada para renderizar uma imagem no site. É necessário que o campo src seja preenchido com o caminho para a imagem. Os campos width e height devem ser preenchidos com a largura e a altura da imagem em pixels, é muito importante que esse campo esteja sempre preenchido para evitar que o navegador tenha que calcular sozinho o tamanho da imagem. O campo 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.
Ex:
<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.
Ex:
<table></table> – <td></td> – <tr></tr> – A tag TABLE é usada para dermacar 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. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espaço de duas colunas.
Ex: Tabela 2×2
<form></form>– A tag FORM serve para demarcar a área de um formulário. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois são muitos. A tag form tem o atributo action, que determina qual ação vai ser executada quando ele for submetido.
Ex:
<input />– A tag INPUT pode adquirir características especificas de acordo com o atributo type que ele receber.
Ex:
<textarea></textarea>– A tag TEXTAREA tem um comportamento semelhante ao do input text, porém ele é destinado a textos maiores.
Ex:
<label></label>– A tag LABEL permite que você atribua uma legenda a um campo do seu formulário. Existem duas formas de usa-la:
Ex:
1-
2 -
Postado por Cristian
Nenhum comentário:
Postar um comentário