Hyper Text Markup Language
COMANDOS
<A> Insere uma âncora para uma ligação de hipertexto.
HREF Referência de hipertexto.
NAME Determina o ponto de destino do hipertexto.
TARGET Abre uma nova janela com o hipertexto indicado.
TITLE Cria um quadro com descrição do hipertexto.
<ACRONYM> Apresenta um quadro com o texto explicativo sobre o acrônimo.
TITLE Esplanação sobre o acrônimo.
<ADDRESS> Destaca em itálico o autor do documento HTML.
<APPLET> Inclui um programa executável em Java na página.
CODE Informa o nome do arquivo executável.
CODEBASE Informa o caminho para o arquivo executável.
NAME
ALIGN
ALT
HSPACE
VSPACE
HEIGHT
WIDTH
<AREA> Define coordenadas para imagens mapeadas.
SHAPE Define a geometria da área mapeada.
COORDS Estabelece as coordenadas.
HREF Informa a URL que deve ser carregada.
Permite que a área selecionada não acione nenhum
NOHREF
link.
<B> BOLD FACE - Texto em negrito.
<BASE> Indica a URL absoluta onde está armazenado o documento.
HREF Inclui uma URL absoluta.
TARGET Estabelece um quadro que será destino.
<BGSOUND> Executa um arquivo de som.
SRC Especifica o endereço do arquivo de som.
LOOP Determina quantas vezes o arquivo será executado.
<BIG> Formata o texto aumentando o tamanho da letra.
<BLINK> Texto pulsante.
<BLOCKQUOTE> Destaca um bloco de texto.
<BODY> Contém o corpo do documento HTML.
ALINK Configura a cor do texto do link já visitado.
Especifica um arquivo gif/jpg como papel de
BACKGROUND
parede.
BGCOLOR Define uma cor de fundo.
Mantém o papel de parede fixo no fundo da
BGPROPERTIES
tela.
Define um espaço entre a borda esquerda e o
LEFTMARGIN
texto.
LINK Configura a cor do texto do link.
Define se a página terá ou não as barras de
SCROLL
rolagens.
TEXT Configura a cor do texto.
Define um espaço entre a borda de topo e o
TOPMARGIN
texto.
VLINK Configura a cor do link ativo.
<BR> Break Line - Quebra de linha.
<CAPTION> Legenda da tabela.
ALIGN Controla a posição da legenda.
<CENTER> Alinha um objeto no centro horizontal da página.
<CITE> Citação (Geralmente em itálico).
<CODE> Formata o texto com largura fixa.
<COMMENT> Inclui um comentário no código fonte.
<DD> Marca a definição do termo numa lista ordenada.
<DEL> Texto riscado.
<DFN> Formata o texto em itálico.
<DL> cria um sub-item numa lista ordenada.
COMPACT Especifica uma formatação compacta.
<DT> Marca o texto como sendo de definição de um glossário.
<DIV> Aplica um efeito a um objeto.
<EM> Grifo (geralmente em itálico).
<EMBED> Executa um arquivo de vídeo ou de som.
ALIGN Alinha o texto à esquerda, direita, topo e base.
BORDER Insere e determina a espessura de uma borda.
FRAMEBORDER Configura uma moldura sem borda.
HEIGHT Determina a altura da janela.
HIDDEN Determina se o plug-in é visível na página.
HSPACE Especifica as bordas horizontais.
NAME Especifica o nome do applet.
PALLETE Formata a paleta do plug-in.
PLUINSPACE Especifica o endereço para instalação do plug-in.
VSPACE Especifica as bordas verticais.
TYPE Determina o tipo de MIME da tag Embed.
WIDTH Determina a largura da janela.
<FONT> Formata da fonte.
SIZE Altera o tamanho da fonte.
COLOR Altera a cor da fonte.
FACE Define a tipologia da fonte.
<FORM> Define um ambiente para processamento de formulário.
ACTION Define a URL do roteiro CGI.
METHOD Determina qual programa processará os dados.
ENCTYPE Define a forma de codificação do formulário.
<FIELDSET> Cria uma moldura em torno do formulário.
LEGEND Especifica uma legenda para a moltura.
ACCESSKEY Programa uma tecla para operar com ALT.
<FRAME> Define um quadro dentro de um FRAMESET.
ALIGN Ajusta o alinhamento do frame ou do texto.
FRAMEBORDER Ativa ou desativa a exibição de borda do frame.
SRC Informa a URL do documento que será exibido.
Define um nome para o quadro referenciado por
NAME
<A>.
MARGINHEIGHT Espaço vertical entre a borda e seu conteúdo.
MARGINWIDTH Espaço horizontal entre a borda e seu conteúdo.
NORESIZE Impede o redimensionamento do quadro.
Determina se haverá ou não uma barra de
SCROLLING
rolamento.
<FRAMESET> Define um conjunto de quadros.
COLS Define a largura ocupada por cada quadro.
ROWS Define a altura ocupada com cada quadro.
FRAMEBORDER Define a largura da borda dos quadros.
<H1> <H2> <H3> <H4> <H5> <H6> Seis níveis de cabeçalho.
ALIGN Alinhamento do cabeçalho.
STYLE Insere propriedades de estilo no cabeçalho.
<HEAD> Cabeçalho do arquivo HTML.
TITLE Título do arquivo HTML.
ISINDEX
BASE Especifica o endereço base do URL.
LINK Relaciona o documento com outro.
META Adiciona metainformações ao arquivo.
Adiciona formatação de folha de estilo ao
STYLE
documento.
<HR> Horizontal Rule Linha horizontal.
SIZE Define o tamanho da linha.
WIDTH Define a espessura da linha.
ALIGN Define a margem de alinhamento da linha.
NOSHADE Define uma textura sólida a linha.
COLOR Define a cor da linha.
<HTML> Comando de abertura e fechamento do arquivo HTML.
VERSION Informa a versão do HTML usado.
LAN Determina em qual idioma o arquivo está escrito.
DIR Determina a direção do fluxo do texto.
<I> Italit Font - Coloca o texto em itálico.
<IFRAME> Define um frame embutido na página.
SRC Endereço do documento que será exibido.
NAME Nome do frame.
WIDTH Define a largura do frame.
HEIGHT Define a altura do frame.
ALIGN Alinha o frame em relação a página.
FRAMEBORDER Insere uma borda no frame.
MARGINWIDTH Define uma largura para a margem.
MARGINHEIGHT Define uma altura para a margem.
SCROLLING Exibe ou não a barra de rolagem.
<IMG> Insere uma imagem no documento.
ALIGN Define o alinhamento da imagem.
ALT Cria um quadro com informações sobre a imagem.
BORDER Permite criar e formatar a borda da imagem.
HEIGHT Define a altura da imagem.
HSPACE Cria um espaço horizontal entre a imagem e o
texto.
ISMAP Mapeamento da imagem controlado pelo servidor.
ONMOUSEOVER
ONMOUSEOUT
SRC Determina a URL do arquivo de imagem.
USEMAP Mapeamento da imagem controlado pelo usuário.
VSPACE Cria um espaço vertical entre a imagem e o texto.
WIDTH Define a largura da imagem.
<KBD> Formata o texto com uma largura fixa.
<LI> List Item - Item de lista.
<LINK> Estabelece ligações da página com outros documentos.
HREF Indica o endereço para o qual o link aponta.
REL Explica a relação desse documento com o outro.
METHODS Indica o método usado para acessar o documento.
TITLE Título do documento ao qual o link faz referência.
<MARQUEE> Cria efeito de movimento ao objeto.
ALIGN Alinhamento do objeto.
O objeto desapare ou não em uma das
BEHAVIOR
margens.
BGCOLOR Cor de fundo.
DIRECTION Direção do movimento.
HEIGHT Altura do painel.
HSPACE Largura das margens esquerda/direita.
LOOP Quantas vezes o efeito irá se repetir.
SCROLLAMOUNT Quantidade de pixel utilizada no movimento.
SCROLLDELAY Tempo de deslocamento do objeto.
Determina a margem superior e inferior do
VSPACE
marquee.
WIDTH Especifica a altura do painel.
<MAP> Comando de chamada de área mapeada.
NAME Rotula o mapa com um nome.
<NOBR> Evita que o texto seja quebrado em mais de uma linha.
<NOFRAMES> Informa ao browser que ele não suporta recursos de frame.
<NOSCRIPT> Executa uma rotina quando o browser não reconhece script.
<OL> Ordered List - Lista ordenada.
TYPE Define o tipo de numeração.
START Indica o valor onde a contagem deve começar.
<OPTION> Cria os itens de uma lista de seleção criado pelo comando SELECT.
SELECTED Marca a opção selecionada.
VALUE Variável a ser enviada.
<P> Paragraph - Parágrafo.
ALIGN Alinhamento do parágrafo.
STYLE Formatação de CSS.
<PARAM> Fornece parâmetros para um applet.
NAME Informa o nome do parâmetro.
VALUE Informa o valor do parâmetro.
<PRE> Preformatted Text - Texto pré-formatado.
WIDTH Informa a largura em colunas.
<Q> Citações curtas.
CITE Informa a fonte da citação.
<S> Texto riscado.
<SAMP> Texto monoespaçado.
Habilita a entrada de dados através da seleção de itens de um menu
<SELECT>
de opções.
NAME Nome da variável.
SIZE Determina um tamanho fixo para a lista.
MULTIPLE Permite seleção de mais de uma opção.
<SMALL> Formata a fonte em tamanho reduzido.
<SPAN> Ênfase definida por folha de estilo.
STYLE Propriedades de Folha de Estilo.
<STRIKE> Texto riscado.
<SCRIPT>
LANGUAGE Define a linguagem utilizada.
SRC Carrega um arquivo externo ao documento
<STRONG> Texto em negrito.
<SUB> Texto sub-escrito.
<SUP> Texto sobre-escrito.
<TABLE> Declara a formatação de uma tabela.
BACKGROUND Imagem de fundo.
BGCOLOR Cor de fundo.
BORDER Borda da tabela.
BORDERCOLOR Cor das bordas.
BORDERCOLORDARK Cor de sombra das bordas.
BORDERCOLORLIGHT Cor da luz das bordas.
CELLSPACING Espaço entre as células.
CELLPADDING Espaço entre o texto e as bordas da célula.
FRAME Define tipos de borda da tabela.
HEIGHT Altura da tabela.
RULES Define tipos de bordas para as células.
Cria um comentário no código fonte da
SUMMARY
tabela.
WIDTH Largura da tabela.
<TBODY> Formata o corpo da tabela.
BGCOLOR Cor de fundo.
<TEXTAREA> Cria uma área editável.
NAME Nome da variável.
ROWS Número de linhas exibidas.
COLS Número de colunas exibidas.
<TFOOT> Formata o rodapé da tabela.
BGCOLOR Cor de fundo.
<TD> Célula da tabela.
Alinhamento horizontal do conteúdo da
ALIGN
célula.
BACKGROUND Textura de fundo.
BGCOLOR Cor de fundo.
BORDERCOLOR Cor das bordas.
BORDERCOLORDARK Cor de sombra das bordas.
BORDERCOLORLIGHT Cor da luz das bordas.
COLSPAN Avanço em colunas.
NOWRAP Célula de tamanho fixo.
ROWSPAN Avanço em linhas.
VALIGN Alinhamento vertical do conteúdo da célula.
WIDTH Largura da célula.
<TH> Título interno centralizado e em negrito.
<THEAD> Formata o cabeçalho da tabela.
<TITLE> Exibe o título do documento HTML.
<TR> Table Row - Linha da tabela.
ALIGN Alinhamento horizontal do conteúdo da célula.
BGCOLOR Cor de fundo.
BORDERCOLOR Cor das bordas.
BORDERCOLORDARK Cor de sombra das bordas.
BORDERCOLORLIGHT Cor da luz das bordas.
CHAR Caracter de alinhamento.
CHAROOF Deslocamento do caracter de alinhamento.
VALIGN Alinhamento vertical do conteúdo da célula.
<TT> Teletype Text - Texto teletipo.
<U> Underlined Type - Texto sublinhado.
<UL> Unordered List - Lista não ordenada.
TYPE Define o tipo de marcação da lista.
<WBR> Word Break - Quebra de texto.
<VAR> Variável.
<!DOCTYPE> Informa a versão do HTML usado.
<!-- ... --> Insere comentário no código fonte do arquivo HTML.
HTML Básico
Neste tutorial veremos uma introdução de como funciona a
linguagem HTML. Veremos as principais tag's da linguagem.
Este artigo trata de uma introdução ao HTML. 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:
1<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:
1</tag>
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
1<tag>
2 <outraTag>texto</outraTag>
3</tag>
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é
a tag de imagem que possui o caminho da imagem.
1<img src="caminhoImg.jpg" />
É 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.
- Nesse artigo irei abordar somente o HTML. Antigamente os desenvolvedores
personalizavam a aparência da página no próprio HTML, porém atualmente estamos
fazendo isso pelo arquivo CSS. Portanto, caso gostem desse artigo, posso escrever um
sobre CSS básico para personalizar uma página HTML
- 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:
1<tag>
2 <outraTag />
3</tag>
- 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.
1
2<!DOCTYPE html>
<html>
3 <head>
4 <!--conteudo do head-->
5 </head>
6 <body>
7 <!--conteudo do body-->
</body>
8</html>
9
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:
1<link href="estilo.css" type="text/css" media="screen" rel="stylesheet" />
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:
1
<!doctype html>
2<head>
3 <title>Título da página</title>
4 <meta charset="utf-8" />
5 <meta name="description" content="Breve resumo sobre o conteúdo desta página" />
6 <link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
7
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:
1<h1>Sou um título relevante</h1>
<p></p>– O P é utilizado para definir um parágrafo.
Ex:
1<p>Sou um elemento de parágrafo</p>
<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:
1<p>Sou um<span>pequeno parágrafo</span></p>
<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:
1<p>O trecho a seguir está em<b>negrito</b></p>
<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:
1<p>O trecho a seguir está em<em>itálico</em></p>
<u></u>– A tag U é usada para sublinhar um termo.
Ex:
1<p>Pequeno texto com trecho<u>sublinhado</u></p>
<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:
1<p>Primeira linha<br />
2 segunda linha</p>
<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:
1<ul>
2 <li>Sou um elemento de uma lista</li>
3 <li>Sou outro elemento dentro da lista</li>
4</ul>
<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:
1<a href="clientes.html">Página de clientes</a>
2<a href="currículo.pdf">Curriculo</a>
Link externo:
1<a href=http://www.siteexterno.com>Site externo sendo linkado</a>
<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:
1<img src="imagem.jpg" width="50" height="50" alt="Descrição da imagem" />
<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:
1<div>
2 <h2>Título relevante</h2>
3 <p>Texto do bloco</p>
4 <img src="alerta.jpg" width="10" height="7" alt="alerta" /></div>
<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
1 <table>
2 <tr>
<td>Primeira coluna da primeira linha</td>
3 <td>Segunda coluna da primeira linha</td>
4 </tr>
5 <tr>
6 <td>Primeira coluna da segunda linha</td>
7 <td>Segunda coluna da segunda linha</td>
8
9 </tr>
1 </table>
0
<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:
1<form action="envioFormulario.php">
2</form>
<input />– A tag INPUT pode adquirir características especificas de acordo com o
atributo type que ele receber.
Ex:
1
2
3
4
5 <input type="text" value="Digite aqui" />
6 <!--Campo onde o usuário pode digitar um pequeno texto.
7 Caso queira deixar um valor por padrão,
basta adicionar um atributo value com o valor desejado.-->
8
<input type="submit" />
9 <!-- Cria um botão que vai submeter o formulário ao ser clicado.-->
1 <input type="file" />
0 <!-- Cria um campo para fazer uploads de arquivos.-->
1 <input type="radio" type="grupo" />
<!-- Cria um campo para seleção única.
1
As opções disponíveis são agrupadas pelo type, ou seja,
1 se houverem 3 inputs radio com o mesmo type,
2 o usuário só poderá escolher um deles.-->
1 <input type="checkbox" />
3 <!-- Bem semelhante ao radio, porém permite múltipla seleção.-->
1
4
1
5
<textarea></textarea>– A tag TEXTAREA tem um comportamento semelhante ao do
input text, porém ele é destinado a textos maiores.
Ex:
1<textarea></textarea>
<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-
1<label>Sou uma legenda
2 <input type="text" />
3</label>
2-
1<label for="campo">Sou uma legenda</label>
2<input type="text" id="campo" />
ALGUMAS TAGS HTML 5
Não irei muito a fundo nesse tópico pois 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.
A principal diferença dessas tags novas das DIV's é que elas passam valor semântico
enquanto a DIV só serve como auxiliar para formatação, sem passar valor algum.
Caso queiram utilizar as tags citadas acima em qualquer navegador, mesmo que ele
não leia HTML 5, basta inserir o seguinte script no final de sua página:
1<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
2
<![endif]-->
3
ID's e CLASS
OsID'ssão atributos que podem ser atribuídos a qualquer tag presente no <body>. Com
ele é possível identificar um elemento facilmente. Isso ajuda muito no
desenvolvimento do Css e na programação do Javascript (falaremos adiante sobre
isso). É importante ressaltar que o ID deve ser único, ou seja, só pode existir um por
página.
Exemplos clássicos de ID's são para definir cabeçalhos, rodapés e blocos de conteúdo.
Ex:
1<div id="cabeçalho"></div>
2<img src="perfil.jpg" height="50" width="20" id="imagemPerfil" />
3<span id="horario">12:30</span>
Já oCLASSdeve ser utilizado para agrupar elementos com atribuições semelhantes. Se
você vai usar um botão com as mesmas características em vários locais do site, vale a
pena colocar um CLASS nele e personalizar somente uma vez no css.
Ex:
1<input type="submit" value="Enviar" class="botaoForm" />
CSS e JAVASCRIPT
OCssé um arquivo que visa personalizar o modo como seu HTML aparece para o
usuário. Ele deve ser chamado dentro da tag <head> no topo do site.
Ex: <code><link href="estilo.css" type="text/css" media="screen" rel="stylesheet"
/></code>
O Javascripté uma linguagem muito ponderosa que permite que o desenvolvedor
altere elementos na página HTML. O ideal é que ele seja chamado no fim da página
(antes do fechamento da tag body) para não atrasar o carregamento dos demais
componentes do seu HTML. Caso tenha interesse em estudar, recomendo olhar
também a biblioteca javascript jQuery.
Ex:
1<script type="text/javascript" src="script.js"></script>
2<script type="text/javascript">//Aqui vai o seu código javascript</script>
Vou me conter as esses comentários para não sair do foco do artigo. Em breve postarei
sobre Css e Javascript também.
Exemplo de uma página HTML completa:
1 <!DOCTYPE HTML>
2 <html lang="en-US">
<head>
3 <meta charset="UTF-8">
4 <title>Título da página</title>
5 <meta name="description" content="Sou o description da página. Uma breve descreição" />
6 <link href="css/estilo.css" type=text/css rel=stylesheet>
7 <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
8 <body>
9 <header> <a href="/"><img src="logo.jpg" alt="Logo site" width="200" height="50"></a>
1 <nav>
0 <ul>
1 <li><a href="/">Home</a></li>
<li><a href="clientes.html">Clientes</a></li>
1 <li><a href="empresa.html">Empresa</a></li>
1 <li><a href="contato.html">Contato</a></li>
2 </ul>
1 </nav>
3 </header>
<section>
1 <h1>Sou o título da página</h1>
4 <h2>Sou um subtitulo</h2>
1 <p>Sou um conteúdo comum.
5 <em>Estou em italico</em>.
1 <b>Estou em negrito</b>
<u>Estou sublinhado</u></p>
6 </section>
1 <footer>Sou o rodapé</footer>
7 <script src="js/javascript.js" type="text/javascript"> </script>
1 </body>
8 </html>
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
ORGANIZANDO E HOSPEDANDO SEU SITE
De aqui em diante falarei de coisas que saem um pouco do escopo do HTML mas que
são essenciais para o desenvolvimento de um site.
A principal dela é a organização. Seu site vai ter diversos arquivos HTML. Vamos supor
que seja um site empresarial. De cara teríamos uma página para a Home, uma para
Empresa, uma para Clientes e uma para Contatos. Então na pasta principal do site,
teríamos um arquivo home.html (ou index.html), empresa.html, clientes.html e
contato.html.
Porém o site teria diversos outros arquivos como por exemplo, arquivos Css, Imagens
usadas no site, Javascripts, documentos anexados nas páginas… Então acaba sendo
interessante, criar pastas para arquivos semelhantes. Geralmente trabalho com a
seguinte estrutura:
- Site (aqui ficam os arquivos html)
– Css (aqui ficam os arquivos css)
– JS (aqui ficam os arquivos javascript)
– Img (aqui ficam as imagens do site)
– Docs (aqui ficam os demais documentos, pdfs, txt…)
Após isso é necessário providenciar duas coisas para que seu site entre de vez no ar.
Uma hospedagem e um domínio.
O domínio .com.br pode ser adquirido no registro.br por apenas R$ 30,00 mensais.
Já a hospedagem deve ser paga a uma empresa terceirizada. Existem planos de R$
10,00 mensais até planos bem mais caros, porém é importante pesquisar o que melhor
se adequa ao seu caso. Existem hospedagens gratuitas, porém não recomendo
nenhuma delas.
Após o registro do domínio e o plano de hospedagem, vai ser necessário que você
envie seus arquivos para o servidor. Para isso é necessário uma programa de envio ftp.
Eu recomendo o filezilla (http://filezilla-project.org/). Basta preencher no programa os
dados de host, username e password que a hospedagem irá fornecer e subir o seu
diretório com os arquivos do site para o servidor. É importante que na raiz do site
tenha um arquivo chamado index.html que seria a página inicial do site. Geralmente a
pasta raiz do site no servidor se chama public_html.
Read more: http://www.linhadecodigo.com.br/artigo/81/html-
basico.aspx#ixzz42ndV2emC
