Linguagem HTML
Ivanethe Carvalho Rocha.
Linguagem HTML • Abreviação para Hyper Text Markup Language, traduzindo Linguagem de Marcação de HiperTexto
• Desenvolvida com objetivos de divulgação, depois ganhou status público • Definida formalmente na década de 1990 • Sua versão mais atual está centrada no desenvolvimento do XHTML , uma junção com XML.
Linguagem HTML • HyperTexto • É o termo que remete a um texto em formato digital, ao qual agrega-se outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links.
Linguagem HTML • Tags (Etiquetas) ▫ Os documentos escritos em HTML são marcados por etiquetas, mais conhecidas com tags. ▫ São palavras ou caracteres entre os sinais de <>. ▫ Elas informam ao browser a estrutura e o significado do texto. ▫ São usadas para dizer qual texto é título, parágrafo e assim por diante. ▫ Ex: quebra de linha: é um exemplo de elemento solitário: <br> - localização centralizada do texto: é um exemplo de elemento que deve ser encerrado: <center> ... </center>
Linguagem HTML • Estrutura de documento HTML ▫ Todo arquivo HTML obrigatoriamente contém alguns comandos que identificam aquele texto como uma home page para o navegador. Assim, as páginas em HTML possuem uma anatomia fixa, devendo conter obrigatoriamente os seguintes tags:
▫ <html> e </html> - Determinam início e fim do documento HTML. <html> diz ao browser para iniciar um novo documento HTML cujo conteúdo se encontra definido entre esse local e a etiqueta de fim do documento, que é </html>. ▫ <head> e </head> - Definem o cabeçalho. Esta informação não é apresentada graficamente mas dá indicações importantes a respeito daquilo que a página contém e sobre a forma como ela deve ser apresentada.
Linguagem HTML • Estrutura de documento HTML ▫ <title> e </title> - Contém o título da página, ou seja, o nome da janela que irá aparecer na barra superior do navegador. ▫ <body> e </body> - Define tudo aquilo que o navegador deve apresentar graficamente. Todos os arquivos, textos, sons deverão estar entre estes elementos.
Linguagem HTML • Estrutura de documento HTML • Exemplo: Assim, a estrutura básica de uma página, em ordem de comandos obrigatórios é: ▫
<html> <head> <title> Entre <title> e </title> deve ser digitado o título da página. </title> </head> <body> Entre <body> e </body> devem ser colocados todos os textos, figuras e sons da página. </body> </html>
Linguagem HTML • Exemplo – Código Fonte ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫ ▫
<html> <head> <title>Bar Use a Cabeça</title> </head> <body> <h1>Bem-vindos ao Bar Use a Cabeça</h1> <img src="drinks.gif"> <p> Junte-se a nós qualquer noite dessas para beber <a ref=”bebidas/ elixir.html”>elixires</a> refrescantes, ter um bom papo e talvez algumas partidas de <em>Dance Dance Revolution</em>. O acesso wireless está sempre disponível; TSPSW (Traga Seu Próprio Servidor Web). </p> <h2>Como chegar</h2> <p> Você nos encontrará bem no centro da cidade de Weblândia. Junte-se a nós! </p> </body> </html>
Estrutura de documento HTML • Corpo: dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página. ▫ <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior sera o tamanho da letra) ▫ <p>: novo parágrafo. ▫ <br>: quebra de linha. ▫ <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.) ▫ <div>: determina uma divisão na página a qual pode possuir variadas formatações. ▫ <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto. ▫ <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente. ▫ <img>: imagem. ▫ <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço. ▫ <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos. ▫ <acronym>: acrônimo (sigla) ▫ <cite>: citação ▫ <address>: endereço
Estrutura de documento HTML • A seção BODY ▫ Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. ▫ Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água). Assim temos:
Estrutura de documento HTML • A seção BODY
• <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> • Onde: • BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) • TEXT: cor dos textos da página (padrão: preto) • LINK: cor dos links (padrão: azul) • ALINK: cor dos links, quando acionados (padrão: vermelho) • VLINK: cor dos links, depois de visitados (padrão: azul escuro ou roxo) • BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água.
Estrutura de documento HTML • Alinhamento de cabeçalhos
▫ Os cabeçalhos têm atributos de alinhamento: <H2 ALIGN=CENTER>Cabeçalho centralizado</H2> Cabeçalho centralizado
▫ <H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3> Cabeçalho alinhado à direita. ▫ <H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4> Cabeçalho alinhado à esquerda
(default)
Estrutura de documento HTML • Separadores
▫ As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores. ▫ Quebra de linha Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.
Estrutura de documento HTML • Separadores
▫ Parágrafos Para separar blocos de texto, usamos o elemento <P>. Os parágrafos também possuem alinhamentos, assim temos: ▫ <P ALIGN=CENTER> ▫ <P ALIGN=RIGHT> ▫ <P ALIGN=LEFT>
Estrutura de documento HTML • Separadores
▫ Linha Horizontal <HR> insere uma linha horizontal: Essa linha tem diversos atributos, oferecendo resultados diversos. <HR SIZE=7> insere uma linha de largura 7 (pixels); <HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível. <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:
Estrutura de documento HTML • Listas em HTML ▫ Listas de definição: também chamadas de listas de glossário. ▫ Possuem a seguinte estrutura. <DL> <DT>Termo a ser definido <DD> Definição
</DL>
• Ex: • <dl> <dt>Banco de dados</dt> <dd>Conjunto de resgistros dispostos de maneira regular </dd> <dt>Redes de computadores</dt> <dd>Dois ou mais dispositivos conectados entre si</dd> </dl>
Estrutura de documento HTML • Listas em HTML ▫ Listas não ordenadas: semelhantes a listas com marcadores. ▫ Possuem a seguinte estrutura. <UL> <LI>Termo a ser definido <LI> Definição
</UL>
• Ex: <ul> <li>Banco de dados</li> <li>Redes</li> </ul>
Resultado Banco de dados Redes
Estrutura de documento HTML • Listas em HTML
▫ Listas ordenadas: é também uma lista de itens. ▫ Possuem a seguinte estrutura. <OL>
<LI>Item1 <LI> Item2
</OL>
• Ex:
<ul> <li>Banco de dados</li> <li>Redes</li> </ul>
Resultado
1 Banco de dados 2 Redes
Estrutura de documento HTML • Exemplos de listas ordenadas • <h4>Lista numerada:</h4> <ol> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> • <h4>Lista com letras:</h4> <ol type="A"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
Estrutura de documento HTML • Exemplos de listas ordenadas <h4>Lista com letras minúsculas:</h4> <ol type="a"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
• <h4>Lista com números romanos:</h4> <ol type="I"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
• <h4>Lista com números romanos minúsculos:</h4> <ol type="i"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol>
Estrutura de documento HTML • Exemplos de listas não ordenadas • <h4>Lista de bullets de disco:</h4> <ul type="disc"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul>
• <h4>Lista de bullets de círculo:</h4> <ul type="circle"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul>
• <h4>Lista de bullets de quadrado:</h4> <ul type="square"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul>
Estrutura de documento HTML • Formatação de textos • Blocos de texto são permitidas as seguintes tags: • <PRE> ▫ Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações. ▫ Ex: ▫ <pre>uma linha aqui, outra ali, etc.</pre>
Estrutura de documento HTML • Formatação de textos • <BLOCKQUOTE>
▫ É usado para citações longas. ▫ Ex: ▫ <blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História do Tempo”)
Estrutura de documento HTML
• Formatação de textos • <ADDRESS> • Usado para formatar endereços email e referências a autores de documentos. • Ex: Envie críticas e sugestões para <address>algumacoisa@aaa.bbb.br </address>
Estrutura de documento HTML
• CORES • As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos): • Ex.: • <FONT COLOR="#rrggbb">Texto</FON T>
Estrutura de documento HTML • Tamanho • A formatação
• <FONT SIZE=tamanho_da_letra>Texto</FON T>
• O tamanho básico é 3. • Ex: <FONT SIZE=+2>Letra maior</FONT> <FONT SIZE=-2>Letra menor</FONT>
• Fontes • <FONT FACE="fonte_da_letra">Texto</FONT >
Estrutura de documento HTML • Fontes
• <FONT FACE="fonte_da_letra">Texto</FONT > • Ex.: • <FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT>
Fonte Verdana azul • <FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT>
Fonte Arial verde • <FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT>
Fonte Courier New vermelha
Links • Possibilidade de fazer ligações de uma região de texto (ou imagem) a um outro documento. • O browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto também chamadas hypertext links ou hiperlinks ou simplesmente links. • Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: • <A HREF "arq_destino">âncora</A>
=
Links • Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: • <A HREF = "arq_destino">âncora</A> • Onde: ▫ arq_destino é o URL do documento de destino; ▫ âncora é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino.
Links • Ex: Link para outra página html • <p> Junte-se a nós em qualquer noite dessas para beber <a href="beverages/elixir.html">elixires</a> refrescantes, ter um bom papo e talvez algumas partidas de Dance Dance Revolution. O acesso wireless está sempre disponível; TSPSW (Traga Seu Próprio Servidor Web).</p>
Links • Ex: Link com uma imagem para outra página html • <a href="beverages/elixir.html" <img src="images/drinks.gif"> </a>