HTML (HyperText Markup Language) Todo documento HTML apresenta elementos entre os símbolos (< e >). Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <tag>...</tag> Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Exemplo: As tags <b> e </b> definem um texto em negrito. Se no documento HTML escrevemos uma frase com o seguinte código: <b>isto está em negrito</b> O resultado será: Isto está em negrito Alguns elementos são chamados vazios, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: Todos os elementos podem ter atributos: <tag> <tag atributo1=valor1 atributo2=valor2>...</tag> Documentos HTML são arquivos ASCII e, portanto, podem ser editados em qualquer editor simples, como por exemplo o Bloco de Notas. Extensão: Os arquivos HTML podem ter como extensão.htm ou.html.
Publicação Para que uma página esteja disponível na WEB, ela precisa ser armazenada em um servidor. Existe um padrão para o nome do arquivo principal de sua página: index.html. Estrutura Básica com Título <HTML> <HEAD><TITLE>Titulo do Documento</TITLE></HEAD> <BODY> texto, imagem, links,... </BODY> </HTML> Exemplo: <html> <head> <title>title of page</title> </head> <body> This is my first homepage. <b>this text is bold</b> </body> </html> TAG HTML A tag HTML indica o início e o fim de um documento HTML. TAG HEAD Contém informações sobre o documento, como por exemplo, o título da página (<title>). Todo documento deve ter um título!!!
Parágrafos: São definidos com a tag <p> <p> Isto é um parágrafo </p> Os parágrafos possuem atributos de alinhamento: <p align=center>isto é um teste</p> Centraliza o texto <p align = left> Isto é um teste </P Alinha o texto à esquerda <p align = right> Isto é um teste </p> Alinha o texto à direita Cabeçalhos: São definidos com as tags que vão de <h1> até <h6>. A tag <h1> define o maior tamanho para o título, enquanto que <h6> o menor. <h1>isto é um cabeçalho</h1> <h2> Isto é um cabeçalho </h2> <h3> Isto é um cabeçalho </h3> <h4> Isto é um cabeçalho </h4> <h5> Isto é um cabeçalho </h5> <h6> Isto é um cabeçalho </h6> Da mesma maneira que o elemento Parágrafo (<p>), os cabeçalhos também possuem atributos de alinhamento. Quebra de Linha A tag <BR> força uma quebra de linha. Ela é uma tag vazia, portanto, não tem uma tag de término como </BR>!
Comentários em HTML Os comentários podem ser inseridos em qualquer lugar do seu código e serão ignorados pelo browser. Os comentários em HTML possuem a seguinte forma: <!-- Isto é um comentário --> Linha Horizontal A tag <hr> insere uma linha horizontal no texto. Listas Não Numeradas <UL> <LI> item 1 <LI> item 2 <LI> item 3 </UL> A tag <UL> determina o início e o fim de um bloco não numerado. A tag <LI> especifica os itens da lista entre as tags <UL> e </UL> Podemos ter listas compostas: <UL> <LI> Alunos <UL> <LI> Alexandre <LI> Renato </UL>
<LI> Professores </UL> Listas Numeradas São utilizadas as tags <OL> e </OL> para determinar o início e o fim de uma lista ordenada. <OL> <LI> Item 1 <LI> Item 2 </OL> Formatação de Texto Formato TAG Comentário Exemplo Negrito <b> Texto em Negrito <b>teste</b> Itálico <i> Texto em itálico <i>teste</i> Sublinhado <u> Texto sublinhado <u>teste</u> Fonte Grande <big> Tamanho da fonte maior <big>teste</big> Fonte pequena <small> Tamanho menor da fonte <small> Teste</small) Subscrito <sub> Texto subscrito H<sub>2</sub>O Sobrescrito <sup> Texto sobrescrito Km<sup>2</s
Blocos de Texto <PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações: <pre>uma linha aqui, outra ali, etc.</pre> Resulta em: uma linha aqui, outra ali, etc. Links Para inserir um link em um documento utiliza-se a tag <a>, da seguinte forma: <A HREF = arq_destino >Ancora</a> Onde: Arq_destino é a URL do documento do destino Âncora é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento destino Inserção de Imagens Utiliza-se a tag <img> <IMG SRC= url_da_imagem > Atributos básicos: ALT = Indica um texto alternativo para a imagem. TITLE = texto que será apresentado na tela do navegador quando o usuário ficar com o mouse posicionado durante um certo tempo sobre a imagem
WIDTH e HEIGHT Atributos de dimensão da imagem, em pixels. <IMG SRC="imagem" ALT="texto" WIDTH="largura" HEIGHT="altura"> BORDER Borda da imagem. Se quisermos uma borda mais larga... <IMG SRC="imagem" ALT="descrição" BORDER=4> Se quisermos uma imagem sem borda... <IMG SRC="imagem" ALT="descrição" BORDER=0> Elementos básicos de tabelas <TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda. <TABLE BORDER="borda">... </TABLE> Títulos, linhas e elementos <CAPTION>...</CAPTION> define o título da tabela <TR>...</TR> delimita uma linha <TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>) <TD>...</TD> delimita um elemento ou célula (dentro de <TR>) Uma tabela simples: <TABLE BORDER=4> <CAPTION>Primeiro exemplo</caption> <TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> </TABLE>
Primeiro exemplo Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Mesclando colunas e linhas É possível mesclar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</th><td>uma linha</td></tr> <TR><TD>duas linhas</td></tr> <TR><TD>tres linhas</td></tr> </TABLE> Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas tres linhas Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). Tabelas sem borda <TABLE BORDER="0">... </TABLE>
Atributos de largura Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células. Essa largura pode ser definida em porcentagem (do espaço disponível): WIDTH=x% ou em pixels: WIDTH=x