Linguagem HTML

Linguagem

HTML

Ivanethe Carvalho Rocha.

Linguagem HTML

• Abreviação para Hyper TextMarkup Language, traduzindoLinguagem de Marcação deHiperTexto

• Desenvolvida com objetivos dedivulgação, depois ganhou statuspúblico

• Definida formalmente na década de1990

• Sua versão mais atual está centradano 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 obrigatoriamentecontém alguns comandos que identificamaquele texto como uma home page para onavegador. Assim, as páginas em HTMLpossuem uma anatomia fixa, devendoconter obrigatoriamente os seguintes tags:

▫ <html> e </html> - Determinam inícioe fim do documento HTML. <html> diz aobrowser para iniciar um novo documentoHTML cujo conteúdo se encontra definidoentre esse local e a etiqueta de fim dodocumento, que é </html>.

▫ <head> e </head> - Definem ocabeçalho. Esta informação não éapresentada graficamente mas dáindicações importantes a respeito daquiloque a página contém e sobre a forma comoela deve ser apresentada.

Linguagem HTML

• Estrutura de documento HTML

▫ <title> e </title> - Contém o título dapágina, ou seja, o nome da janela que iráaparecer na barra superior do navegador.

▫ <body> e </body> - Define tudo aquilo queo navegador deve apresentar graficamente.Todos os arquivos, textos, sons deverão estarentre 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 encontraroutras várias etiquetas que irão moldar apá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


HTML• A seção BODY

▫ Tudo que estiver contido em <BODY> serámostrado na janela principal do browser, sendoapresentado ao leitor. <BODY> pode contercabeçalhos, parágrafos, listas, tabelas, links paraoutros documentos, imagens, formulários,animações, vídeos, sons e scripts embutidos.

▫ Através de atributos de <BODY>, podemosdefinir cores para os textos, links e para o fundodas páginas, bem como uma imagem de fundo(marca d’água). Assim temos:


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.


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)


HTML• Separadores

▫ As quebras de linha do texto fonte não sãosignificativas na apresentação de documentosem HTML. Para organizar os textos, precisamosde separadores.

▫ Quebra de linha

Quando queremos mudar de linha, usamos oelemento <BR>. Isso só é necessário quandoqueremos uma quebra de linha em determinadoponto, pois os browsers já quebram as linhasautomaticamente para apresentar os textos.


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>


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:


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>



▫ Listas não ordenadas: semelhantesa 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



▫ Listas ordenadas: é também uma listade itens.

▫ Possuem a seguinte estrutura. <OL> <LI>Item1 <LI> Item2

</OL>

• Ex: <ul> <li>Banco de dados</li> <li>Redes</li> </ul>

Resultado1 Banco de dados2 Redes


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>


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>


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>


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>


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”)


HTML• Formatação de textos

• <ADDRESS>

• Usado para formatar endereços e-mail e referências a autores de documentos.

• Ex:

Envie críticas e sugestões para <address>[email protected]</address>


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</FONT>


HTML• Tamanho

• A formatação • <FONT

SIZE=tamanho_da_letra>Texto</FONT>

• 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>


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 deuma região de texto (ou imagem) aum outro documento.

• O browser destaca essas regiões eimagens do texto, indicando quesão ligações de hipertexto -também chamadas hypertext linksou hiperlinks ou simplesmentelinks.

• Para inserir um link em umdocumento, utilizamos a etiqueta<A>, da seguinte forma:

• <A HREF ="arq_destino">âncora</A>

Links

• Para inserir um link em umdocumento, 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 parabeber <ahref="beverages/elixir.html">elixires</a>refrescantes, ter um bom papo e talvez algumaspartidas de Dance Dance Revolution. O acessowireless 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>

Documents

Linguagem HTML