HTML - Parte I

Programao Internet Prof.
Marcio Momberger
O QUE HTML?
HTML a abreviatura de HyperText Markup Language, ou seja Linguagem de Marcao (Formata0) de Hipertexto. uma linguagem simples composta de marcaes de formatao e diagramao de hipertexto/hipermdia (informaes em texto, imagens, sons e aes ligadas umas s outras de uma forma complexa e no-sequencial atravs de chaves relacionadas).
HTML
a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatao e diagramao de hipertexto/hipermdia. O HTML, que interpretada por todos os navegadores (browsers) disponveis (Internet Explorer, Chrome, FireFox, etc...). Isto garante a portabilidade independente do sistema operacional: Windows, Mac, Linux, Unix, Android, etc...
Criando um pgina HTML

Uma pgina HTML pode ser criada em qualquer editor de texto (Bloco de Notas, WordPad, etc), desde que seja salvo no formato ASCII (American Standard Code for Information Interchange - cdigo utilizado para representar textos quando h computadores envolvidos), isto , como texto puro, sem formatao ou caracteres de controle.
Criando um pgina HTML

Por exemplo: Se voc criar um documento
usando Bloco de Notas, deve salv-lo no formato.txt. Ao salv-lo modifique a extenso.txtpara.htmou.html. Se seu documento, no formato.txtse chama Index.txtaltere-o paraIndex.htmouIndex.html. Porm, lembre-se que o documento somente pode ser considerado HTML se nele houver a estrutura bsicada linguagem HTML.
TAGS HTML
TAGs so os "comandos" do HTML. Um documento HTML composto de TAGs que faro com que o browser monte a pgina de acordo com a formatao definida pelos comando HTML. Um TAG sempre precedido de um caracter "<" (menor que) e seguido por um caracter ">" (maior que). Exemplo de TAG: <HTML>
TAGS HTML
Na maioria dos casos, um TAG deve ter um
correspondente, chamado de TAG de fechamento. Ou seja, um TAG indica onde comea sua rea de influncia, enquanto o seu correspondente TAG de fechamento indica onde termina a rea de influncia.
Um TAG de fechamento tem o mesmo nome do TAG de
abertura, precedido do caracter "/". Exemplo de TAG de fechamento: </HTML>
TAGs podem ser escritas em minsculas ou maiscula,
mas nunca podem haver espaos em branco dentro de TAGs, exceto entre atributos e entre aspas.| Exemplo : <HTML>, <html>, <HtMl>, <Html>, ...
Estrutura Bsica HTML

A pgina HTML inicia e termina com a tag <html> e dividida em 2 partes cabealho <head> e corpo <body >
<html> <head> <title> Aqui entra o Ttulo do documento </title> </head> <body> Aqui entra todo o contedo que ser exposto pelo Browser... </body> </html>
Cabealho <HEAD>
O cabealho do documento deve conter as informaes mais essenciais da pgina. Coloca-se no cabealho o Ttulo do documento, scripts a serem utilizados, a descrio, palavras chaves e comentrios
Elementos Cabealho <HEAD>

TITLE <title>...</title> Contm o ttulo do documento. Muitos browsers utilizam o ttulo como forma de referenciar a pgina em uma lista de Favoritos. Alm disso, exibem o ttulo como nome da janela em que a pgina visualizada. O Ttulo obrigatrio. Exemplo: <title> XYZ Informtica </title>

SCRIPT <script>...</script> utilizado para insero de cdigo script (ex.: java Script, VB Script, etc.) dentro do documento HTML. Exemplo: <script> ...cdigo em alguma linguagem script reconhecida pelo browser... </script>

META <meta>
Define valores especiais. os valores so definidos como pares "name/content" (nome/valor).

DESCRIO
O cabealho do documento deve conter uma descrio da pgina. Sobre o que ela trata e o que tem a oferecer. Por exemplo: minha pgina trata de HTML. A notao para minha pgina a seguinte: <meta name="description" content=Primeira Pgina HTML">
PALAVRAS CHAVES
As palavras chaves tambm serviro para a busca de sua home page. <meta name="keywords"content="palavras chaves"> A notao acima para minha pgina : <meta name="keywords"content="HTML, tutorial, gif, homepage">
obrigatrio a presena do atributo "NAME" ou do atributo "HTTP-EQUIV".

COMENTRIOS
Voc pode inserir comentrios adicionais na cabea do seu documento usando a marcao<! -- ... -->
Portanto o cabealho de um documento HTML ficaria assim:
<head>(incio da cabea) <title>Como Fazer uma Home Page</title> <meta name="description" content="dicas de linguagem HTML, endereos de imagens gifs, download de editores HTML."> <meta name="keywords"content="home page, html, barras, gifs,programao">  </head>(final de cabea)
Corpo <BODY>
O corpo do documento a parte que aparece na Home Page. O texto de algumas tags colocadas nesta sesso do documento no so visualizados na tela, mas sim os seus efeitos. o caso, por exemplo, das tags de padro de fundo, cor de texto e cores de link, vlink e alink.
Atributos <Body>
BACKGROUND Define uma imagem que ser utilizada como "fundo" da pgina. Caso a imagem tenha um tamanho inferior ao da pgina ela ser repetida diversas vezes de forma a cobrir o fundo do documento. Pode ser utilizadas imagens .gif e .jpg. Exemplo: <body background="images/fundo.gif"> ...diversos TAGs, textos etc... </body> Esta notao indica fundos com textura. Se o arquivo gif estiver no mesmo servidor, mas em outro diretrio, deve ser indicado o seu caminho path/name. Se estiver em outro servidor, sua URL deve ser indicada
Atributos <Body>
BGCOLOR Define a cor de fundo da pgina. Os nomes padronizados de cores so: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow Exemplo: <body bgcolor="white"> ou <body bgcolor="#rrggbb"> Esta notao indica fundos no padro RGB. Usa-se um cdigo no formato hexadecimal precedido por #. Consulte uma tabela de cores em http://www.ufpa.br/dicas/htm/htm-cor2.htm TEXT Define a cor do texto da pgina Exemplo:
Atributos <Body>
LINK Define a cor dos links ainda no visitados Exemplo: <body link="blue"> VLINK Define a cor dos links j visitados nos ltimos x dias onde x um valor definido pelo usurio em seu browser. Exemplo: <body vlink="purple"> ALINK Define a cor dos links no instante em que so clicados pelo usurio. Exemplo: <body alink="red>
Atributos <Body>
BGPROPERTIES (Microsoft Internet Explorer) Deve ter o valor "fixed". Indica que o fundo da pgina fixo, isto , no "rola" junto com o contedo da pgina. Exemplo: <body background="images/fundo.gif" bgproperties="fixed"> LEFTMARGIN (Microsoft Internet Explorer) Especifica uma quantidade de espao (em pixels) a ser deixada como margem esquerda do documento. Exemplo: <body leftmargin="20"> TOPMARGIN (Microsoft Internet Explorer) Especifica uma quantidade de espao (em pixels) a ser deixada como margem superior do documento. Exemplo: <body toptmargin="20">
Exemplo de Body
<html> <head> <title>XYZ Informtica</title> </head> <body background="images/fundo.gif" link="blue" vlink="purple" alink="red" bgproperties="fixed" bgcolor="white " text="black" topmargin="20" leftmargin="20"> <p><a href="http://www.xyz.com.br">Oi! Eu sou um link!</a></p> </body> </html>
Ttulos/Subttulos <hn>...</hn>
Hn <hn>...</hn> Indica que o texto influenciado uma "HEADER" (cabealho). Os cabealhos tm seis nveis de importncia, sendo o nvel "1" o mais importante e o nvel "6" o menos. Exemplo: <h1>Este o cabealho <h2>Este o cabealho <h3>Este o cabealho <h4>Este o cabealho <h5>Este o cabealho <h6>Este o cabealho
Nota: Veja os nveis de cabealho e o equivalente aos tamanhos da fonte. (h1 - 24 pt / h2 - 18 pt / h3 - 14 pt / h4 - 12 pt / h5 - 10 pt / h6 - 8 pt).
de nvel de nvel de nvel de nvel de nvel de nvel
1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
Ttulos/Subttulos <hn>...</hn>
Atributos de Hn ALIGN Indica se o cabealho ser alinhado a esquerda (padro), centralizado ou a direita, usando-se, respectivamente, as palavras "LEFT", "CENTER" e "RIGHT". Exemplo: <h1 align="left">Texto Um</h1> <h2 align="center">Texto Dois</h2> <h3 align="right">Texto Trs</h3>
Controles de Formatao de Texto

Itlico
I <i>...</i> ou EM <em>...</em> Indica que o texto deve ser apresentado em itlico. Exemplo: <i>Este texto est em itlico</i> Exemplo: <em>Este texto tambm est em itlico</em>
Negrito
B <b>...</b> ou STRONG <strong>...</strong> Indica que o texto deve ser apresentado em negrito. Exemplo: <b>Este texto est em negrito</b> Exemplo: <strong>Este texto tambm est em negrito</strong>

Sublinhado
U <u>...</u> Indica que o texto deve ser apresentado sublinhado. Exemplo: <u>Este texto est sublinhado</u>
Taxado
STRIKE <strike>...</strike> Indica que o texto deve ser apresentado com um trao cortando-o. Exemplo: <strike>Este texto est strike !</strike>

Subscrito
SUB <sub>...</sub> Indica que o texto deve ser apresentado em subscrito. Exemplo: <sub>Este texto est subscrito</sub>
Sobrescrito
SUP <sup>...</sup> Indica que o texto deve ser apresentado em sobrescrito. Exemplo: <sup> Este texto est sobrescrito </sup>
Controles de Fontes
FONT <font>...</font> Existem 7 tamanhos de fonte em HTML, numeradas de 1 a 7. O tamanho padro 3. As cores so definidas atravs de um valor hexadecimal de 6 algarismos, ou atravs de seus nomes. Caso o usurio no possua nenhuma das fontes listadas, ser usada uma fonte padro. Usualmente a fonte padro a Times New Roman. Exemplo:
<font face="Times New Roman" size="5" color="#000000"> Texto</font>
Controles de Fontes
Atributos de FONT
SIZE Indica qual o tamanho de fonte que deve ser usado dentro de sua rea de influncia. Exemplo: <font size="5">Texto</font>
COLOR Indica qual a cor da fonte dentro de sua rea de influncia Exemplo: <font color="#000000">Texto</font> ou <font color="black">Texto</font>
FACE
Determina a fonte (tipo de letra) a ser utilizada. Exemplo: <font face="Times New Roman">Texto</font>
Controles de Fontes
BASEFONT <basefont> Determina o tamanho base de fonte para uma pgina. O TAG deve ser usado no incio do documento, logo aps <body>. Exemplo: <body> <basefont size="3"> <p>Texto</p> <p><font face="Arial" color="#FF0000">Texto</font></p> </body>
Formatao de Pargrafos
P <p>...</p> Indica que o texto influenciado um pargrafo, e possui um alinhamento prprio. Os browsers, habitualmente, deixam um espao vertical em branco de cerca de "uma linha" antes de cada pargrafo. Exemplo: <p>Esta a minha Home Page. E este um exemplo de pargrafo.</p> Atributos de P ALIGN Indica se o pargrafo ser alinhado a esquerda (padro), centralizado, a direita ou justificado usando-se, respectivamente, as palavras "LEFT", "CENTER", "RIGHT" e "JUSTIFY". Exemplo:
Formatao Texto
QUEBRA DE LINHA (Break) BR <br> Passa para a prxima linha. Exemplo: <p>Este texto ficar na mesma linha.<br> E este em outra linha.</p> Blockquote <blockquote>...</blockquote> Faz a margem comear mais dentro da pgina. O efeito deste TAG pode ser acumulado, obtendo assim margens maiores. Exemplo: <blockquote>Esta a minha Home Page. E este um exemplo de margem visualizada pelo Browser.</blockquote>
Formatao Texto
DIVISO DIV <div>...</div> Indica que o texto influenciado uma diviso, e possui portanto um alinhamento prprio. Atributos de DIV ALIGN Indica se a diviso ser alinhado a esquerda (padro), centralizado, a direita ou justificado usando-se, respectivamente, as palavras "LEFT", "CENTER", "RIGHT" e "JUSTIFY". utilizado no lugar do TAG <p>, quando se deseja modificar o alinhamento sem, no entanto, inserir-se espao vertical em branco. Exemplo: <div align="right">Esta a minha Home Page . E esta a minha diviso.</div>
Formatao Texto
TEXTO PR-FORMATADO PRE <pre>...</pre> Usualmente o browser ignora os espaos em branco e as quebras de linha existentes no documento fonte, formatando o texto de acordo com o tamanho de sua janela. Com a utilizao deste TAG os espaos e as quebras de linha so honrados. O browser exibe o contedo de <pre> usando uma fonte diferente da usual. Exemplo: <pre> Esta a Home Page da XYZ Informtica. Aqui nos veremos:Treinamento Consultoria Representaes Solues Web </pre>
Formatao Texto
CENTRO <center>...</center> Centraliza o texto influenciado. o TAG <center> foi criado quando no havia outras formas de se centralizar os elementos na tela. Hoje faz parte da definio do HTML para que seja mantida a compatibilidade com pginas escritas no passado. Exemplo: <center> Esta a minha Home Page. Este texto ser centralizado. </center> SEM QUEBRA <nobr>...</nobr> Impede que o texto em sua rea de influncia seja "quebrado", isto , dividido em mais de uma linha. Deve-se usar este TAG de forma cuidadosa. Normalmente o usurio no deseja ser obrigado a empregar a "scroll bar" para ler o contedo de uma pgina. Exemplo: <nobr>Este texto ficar na mesma linha ao visualiza-lo no browser.<nobr>
Listas
istas Ordenadas OL <ol>...</ol>
ndica o incio e o final de uma lista ordenada (numerada).
xemplo: ol> <li> Treinamento </li> <li> Consultoria </li>
Listas
Atributos de OL (Lista Ordenada)
START Especifica o nmero do primeiro elemento da lista. Exemplo: <ol start="10"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol> TYPE Define o tipo de numerao empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4, etc) ", "I" (I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), "A" (A,B, ..., Z) ou "a" (a, b, ..., z). Exemplo: <ol type="A"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol>
Listas
Elementos LI <li>. . . </li> Demarca os elementos de listas ordenadas e no ordenadas. Atributos de LI
TYPE
Deve ser usado somente em listas no numeradas. Indica qual o smbolo a ser usado para demarcar o elemento.
Exemplo: <ul type="square"> <li> Treinamento </li> <li type="disc"> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ul>
Listas
VALUE Deve ser usado somente em listas numeradas. Altera a seqncia da numerao. Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li value="15"> Desenvolvimento </li> <li> Manuteno </li> </ol>
Nota: Este TAG deve estar presente somente na rea de influncia dos TAGs <OL> (Listas Ordenadas) ou <UL> (Listas No Ordenadas). O texto presente em cada item da lista pode ser formatado normalmente. No entanto, no so permitidos "headers" (H1, H2, H3 etc.).
Listas
VALUE Deve ser usado somente em listas numeradas. Altera a seqncia da numerao. Exemplo: <ol> <li> Treinamento </li> <li> Consultoria </li> <li value="15"> Desenvolvimento </li> <li> Manuteno </li> </ol>
Nota: Este TAG deve estar presente somente na rea de influncia dos TAGs <OL> (Listas Ordenadas) ou <UL> (Listas No Ordenadas). O texto presente em cada item da lista pode ser formatado normalmente. No entanto, no so permitidos "headers" (H1, H2, H3 etc.).
Listas
Listas No Ordenadas UL <ul>...</ul> Indica o incio e o final de uma lista no numerada Exemplo: <ul> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ul>
Listas
Atributo de UL (Listas No Ordenadas) TYPE Indica qual o smbolo deve ser usado para demarcar cada elemento da lista. Pode ser os valores "disc" (), "circle" () ou "square"(s). Exemplo: <ul type="circle"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ul>
Listas
Listas de Definio <dl>...</dl> Demarca os elementos de listas ordenadas e no ordenadas. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl>
Listas
Listas de Definio <dl>...</dl> Demarca os elementos de listas ordenadas e no ordenadas. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Nota:
So muito teis para estruturas do tipo "dicionrio", onde um termo citado e ento explicado. Na Web muito utilizada para listas de URLs e seus respectivos comentrios.
Listas
DT <dt> Representa o termo definido, a ser explicado em <DD>. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl> Nota:
No devem conter TAGs referentes a: HEADER, Pargrafo, Listas, Texto PrFormatado, Diviso, CENTER, BLOCKQUOTE, Formulrio, ISINDEX, Linha Horizontal ou Tabela.
Listas
DD <dd> Representa a definio do termo presente em <DT>. No deve conter HEADERs. Exemplo: <dl> <dt> Treinamento </dt> <dd> um departamento da XYZ Informtica. </dd> <dt> Consultoria </dt> <dd> um outro departamento! </dd> </dl>
Links
Os pontos que ligam os hipertextos so chamados de hyperlinks, links ou ncoras de hipertexto. O TAG que indica a regio a ser tratada como um hyperlink o par <A> e </A> - "A" (anchor). Dentro desse TAG, na forma de atributo, colocada a referncia ao arquivo ligado. A referncia indica a URL do documento. Quando o usurio clicar sobre o trecho realado pela ncora de hipertexto, o arquivo ligado ser requisitado ao servidor e mostrado na janela do navegador. Geralmente o Browser apresenta os links em azul e sublinhados, mas como j vimos possvel alterar isso atravs dos parmetros opcionais do elemento <BODY>.
Links
A <a>...</a> Indica a regio a ser tratada como hyperlink Exemplo: <a href="http://www.xyz.com.br">XYZ Informtica</a> Atributos de A HREF Define que sua rea de influncia um link. Exemplo: <p> Clique em <a href="http://www.xyz.com.br/cursos.htm">Cursos</a> para acessar a pgina dos Descritivos dos Cursos.</p>
Links
Existem quatro formas de se especificar um link:
1. Links para dentro da prpria pgina O local precisa ter um "nome". Este "nome" definido da seguinte forma: Exemplo: <a href="#nome">Link para o Nome</a> . . . <a name="nome"><a>
Links
2. Para outras pginas de um mesmo Site
Exemplo: <a href="nome.htm">Link para o Nome</a> Nesse caso, assumiu-se que o arquivo nome.htm estava localizado no mesmo diretrio da pgina que referncia. Caso o arquivo nome.htm esteja em outro diretrio, pode-se utilizar a "URL relativa" pgina de destino. Exemplo: <a href="/treinamento/cursos/pgina.htm">Link para a
Links
Pode-se, ainda, referenciar uma pgina utilizando-se a navegao em diretrios, semelhante ao que se faz no DOS, lanando mo do operador "..". Se na pgina http://www.xyz.com.br/treinamento/cursos.htm existir um link que aponta para o endereo: http://www.xyz.com.br/consultoria/desenvolvimento. htm, este pode ser representado da seguinte maneira: Exemplo: <a href="../consultoria/desenvolvimento.htm">Link para o Desenvolvimento</a>
Links
3. Links para outros Sites
Deve-se usar a URL completa da pgina destino. Exemplo:

<a href="http://www.xyz.com.br/treinamento/cursos.ht m">Link para outro Site</a>
Links
4. Link especial: "mailto"
Existe um tipo de link chamado de "mailto:". Se, quando o link for definido, o protocolo utilizado for "mailto:" ao invs de "http://", o link abrir uma janela especial para que se possa enviar um e-mail (correio eletrnico) para o endereo especfico. Exemplo: Mande um<a href="mailto:XYZ@XYZ.com.br">email</a>para a XYZ.

HTML - Parte I

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML - Parte I

Enviado por

Direitos autorais:

Formatos disponíveis

Programao Internet Prof.

Criando um pgina HTML

Criando um pgina HTML

Um TAG de fechamento tem o mesmo nome do TAG de

abertura, precedido do caracter "/". Exemplo de TAG de fechamento: </HTML>

TAGs podem ser escritas em minsculas ou maiscula,

Estrutura Bsica HTML

Elementos Cabealho <HEAD>

Elementos Cabealho <HEAD>

Elementos Cabealho <HEAD>

Define valores especiais. os valores so definidos como pares "name/content" (nome/valor).

Elementos Cabealho <HEAD>

de nvel de nvel de nvel de nvel de nvel de nvel

1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>

Controles de Formatao de Texto

Controles de Formatao de Texto

Controles de Formatao de Texto

ndica o incio e o final de uma lista ordenada (numerada).

xemplo: ol> <li> Treinamento </li> <li> Consultoria </li>

Deve-se usar a URL completa da pgina destino. Exemplo:

Você também pode gostar