Linguagem HTML

Linguagem HTML
Ivanethe Carvalho Rocha.
Linguagem HTML
Abreviao para Hyper Text Markup Language, traduzindo Linguagem de Marcao de HiperTexto
Desenvolvida com objetivos de divulgao, depois ganhou status pblico

Definida formalmente na dcada de 1990 Sua verso mais atual est centrada no desenvolvimento do XHTML , uma juno com XML.
Linguagem HTML
HyperTexto
o termo que remete a um texto em formato digital, ao qual agrega-se outros conjuntos de informao na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se d atravs de referncias especficas denominadas hiperlinks, ou simplesmente links.
Linguagem HTML
Tags (Etiquetas)
Os documentos escritos em HTML so marcados por etiquetas, mais conhecidas com tags. So palavras ou caracteres entre os sinais de <>. Elas informam ao browser a estrutura e o significado do texto. So usadas para dizer qual texto ttulo, pargrafo e assim por diante. Ex:
quebra de linha: um exemplo de elemento solitrio: <br> - localizao centralizada do texto: um exemplo de elemento que deve ser encerrado: <center> ... </center>
Linguagem HTML
Estrutura de documento HTML
Todo arquivo HTML obrigatoriamente contm alguns comandos que identificam aquele texto como uma home page para o navegador. Assim, as pginas em HTML possuem uma anatomia fixa, devendo conter obrigatoriamente os seguintes tags:
<html> e </html> - Determinam incio e fim do documento HTML. <html> diz ao browser para iniciar um novo documento HTML cujo contedo se encontra definido entre esse local e a etiqueta de fim do documento, que </html>.
<head> e </head> - Definem o cabealho. Esta informao no apresentada graficamente mas d indicaes importantes a respeito daquilo que a pgina contm e sobre a forma como ela deve ser apresentada.
Linguagem HTML
<title> e </title> - Contm o ttulo da pgina, 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 devero estar entre estes elementos.
Linguagem HTML
Estrutura de documento HTML Exemplo: Assim, a estrutura bsica de uma pgina, em ordem de comandos obrigatrios :
<html> <head> <title> Entre <title> e </title> deve ser digitado o ttulo da pgina. </title> </head> <body> Entre <body> e </body> devem ser colocados todos os textos, figuras e sons da pgina. </body> </html>
Linguagem HTML Exemplo Cdigo Fonte

<html> <head> <title>Bar Use a Cabea</title> </head> <body> <h1>Bem-vindos ao Bar Use a Cabea</h1> <img src="drinks.gif"> <p> Junte-se a ns 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 disponvel; TSPSW (Traga Seu Prprio Servidor Web). </p> <h2>Como chegar</h2> <p> Voc nos encontrar bem no centro da cidade de Weblndia. Junte-se a ns! </p> </body> </html>

Corpo: dentro do corpo podemos encontrar outras vrias etiquetas que iro moldar a pgina.
<h1>, <h2>,... <h6>: cabealhos e ttulos no documento em diversos tamanhos. (quanto menor for o nmero, maior sera o tamanho da letra) <p>: novo pargrafo. <br>: quebra de linha. <table>: cria uma tabela (linhas so criadas com <TR> e novas clulas com <TD>. J os cabealhos de coluna so criados com a etiqueta <TH>.) <div>: determina uma diviso na pgina a qual pode possuir variadas formataes. <font>: altera a formatao (fonte, cor e tamanho) de um trecho do texto. <b>, <i>, <u> e <s>: negrito, itlico, sublinhado e riscado, respectivamente. <img>: imagem. <a>: hiper-ligao para um outro local, seja uma pgina, um e-mail ou outro servio. <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto so muito usadas em blogs, elas podem ser auto selecionveis e conter outros cdigos a serem distribudos. <acronym>: acrnimo (sigla) <cite>: citao <address>: endereo

A seo BODY
Tudo que estiver contido em <BODY> ser mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (marca dgua). Assim temos:

A seo BODY
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> Onde: BGCOLOR cor de fundo (quando no indicada, o browser ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina) TEXT: cor dos textos da pgina (padro: preto) LINK: cor dos links (padro: azul) ALINK: cor dos links, quando acionados (padro: vermelho) VLINK: cor dos links, depois de visitados (padro: azul escuro ou roxo) BACKGROUND indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua.

Alinhamento de cabealhos
Os cabealhos tm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabealho centralizado</H2>
Cabealho centralizado
<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> Cabealho alinhado direita.

<H4 ALIGN=LEFT>Cabealho alinhado esquerda (default)</H4> Cabealho alinhado esquerda (default)

Separadores
As quebras de linha do texto fonte no so significativas na apresentao 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 necessrio quando queremos uma quebra de linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para apresentar os textos.

Separadores
Pargrafos
Para separar blocos de texto, usamos o elemento <P>.
Os pargrafos tambm possuem alinhamentos, assim temos: <P ALIGN=CENTER> <P ALIGN=RIGHT> <P ALIGN=LEFT>

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 espao horizontal disponvel. <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional:

Listas em HTML
Listas de definio: tambm chamadas de listas de glossrio. Possuem a seguinte estrutura.
<DL>
<DT>Termo a ser definido <DD> Definio
</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 em HTML
Listas no ordenadas: semelhantes a listas com marcadores. Possuem a seguinte estrutura.
<UL>
<LI>Termo a ser definido <LI> Definio
</UL>
Ex:
<ul> <li>Banco de dados</li> <li>Redes</li> </ul>
Resultado
Banco de dados Redes

Listas em HTML
Listas ordenadas: tambm uma lista de itens. Possuem a seguinte estrutura.
<OL>
<LI>Item1 <LI> Item2
Ex:
</OL>
Resultado
<ul> <li>Banco de dados</li> <li>Redes</li> </ul>

1 Banco de dados 2 Redes
Estrutura de documento HTML de listas ordenadas Exemplos

<h4>Lista numerada:</h4> <ol> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>
<h4>Lista com letras:</h4> <ol type="A"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>
Estrutura de documento HTML de listas ordenadas Exemplos

<h4>Lista com letras minsculas:</h4>
<ol type="a"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>
<h4>Lista com nmeros romanos:</h4>

<ol type="I"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>
<h4>Lista com nmeros romanos minsculos:</h4>

<ol type="i"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>

Exemplos de listas no ordenadas <h4>Lista de bullets de disco:</h4>
<ul type="disc"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul>
<h4>Lista de bullets de crculo:</h4>

<ul type="circle"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul>
<h4>Lista de bullets de quadrado:</h4>

<ul type="square"> <li>Mas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul>

Formatao de textos Blocos de texto so permitidas as seguintes tags: <PRE>
Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes. Ex: <pre>uma linha aqui, outra ali, etc.</pre>

Formatao de textos
<BLOCKQUOTE>
usado para citaes longas. Ex: <blockquote>A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita circular no espao tridimensional.</blockquote> (Stephen W. Hawking, Uma Breve Histria do Tempo)
Formatao de textos <ADDRESS> Usado para formatar endereos email e referncias a autores de documentos. Ex: Envie crticas e sugestes para <address>algumacoisa@aaa.bbb.br </address>
CORES As cores so introduzidas atravs 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>

Tamanho A formatao
<FONT SIZE=tamanho_da_letra>Texto</FON T>
O tamanho bsico 3. Ex:

<FONT SIZE=+2>Letra maior</FONT> <FONT SIZE=-2>Letra menor</FONT>
Fontes
<FONT FACE="fonte_da_letra">Texto</FONT >

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 ligaes de uma regio de texto (ou imagem) a um outro documento. O browser destaca essas regies e imagens do texto, indicando que so ligaes de hipertexto tambm 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 ligao hipertexto do documento sendo apresentado para o documento de destino.
Links
Ex: Link para outra pgina html
<p>
Junte-se a ns 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 disponvel; TSPSW (Traga Seu Prprio Servidor Web).</p>
Links
Ex: Link com uma imagem para outra pgina html
<a href="beverages/elixir.html" <img src="images/drinks.gif"> </a>

Linguagem HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Linguagem HTML

Uploaded by

Copyright:

Available Formats

Linguagem HTML

Ivanethe Carvalho Rocha.

Desenvolvida com objetivos de divulgao, depois ganhou status pblico

Linguagem HTML Exemplo Cdigo Fonte

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> Cabealho alinhado direita.

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

<ul> <li>Banco de dados</li> <li>Redes</li> </ul>

Estrutura de documento HTML de listas ordenadas Exemplos

Estrutura de documento HTML de listas ordenadas Exemplos

<h4>Lista com nmeros romanos:</h4>

<h4>Lista com nmeros romanos minsculos:</h4>

Estrutura de documento HTML

<h4>Lista de bullets de crculo:</h4>

<h4>Lista de bullets de quadrado:</h4>

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

Estrutura de documento HTML

O tamanho bsico 3. Ex:

Estrutura de documento HTML

Fonte Verdana azul

Fonte Arial verde

Fonte Courier New vermelha

You might also like