Académique Documents
Professionnel Documents
Culture Documents
ndice
1. Caractersticas Gerais do HTML ________________________________________________________ 2 2. Criando Documentos HTML ___________________________________________________________ 3 2.1 HTML "Mnimo" ___________________________________________________________________ 3 2.2 Marcaes Bsicas _________________________________________________________________ 4 2.2.1 Ttulos________________________________________________________________________ 4 2.2.2 Cabealhos ____________________________________________________________________ 5 2.2.3 Pargrafos _____________________________________________________________________ 5 2.2.4 Quebras de linha ________________________________________________________________ 6 2.3 Interligando Documentos ____________________________________________________________ 7 2.3.1 Para comear __________________________________________________________________ 7 2.3.2 Interligando Documentos em Outros Diretrios ________________________________________ 7 2.3.3 Ligando URLs _________________________________________________________________ 8 2.3.4 Ligando sesses especficas em outro documento ______________________________________ 8 2.4 Interligando sesses em uma pgina ____________________________________________________ 9 2.5 Listas ___________________________________________________________________________ 10 2.5.1 Listas No Numeradas __________________________________________________________ 10 2.5.2 Listas Numeradas ______________________________________________________________ 11 2.5.3 Listas de Definies ____________________________________________________________ 11 2.5.4 Listas Intercaladas _____________________________________________________________ 12 2.6 Texto Pr-formatado _______________________________________________________________ 14 2.7 Caracteres Especiais _______________________________________________________________ 15 2.8 Endereos _______________________________________________________________________ 16 2.9 Inserir imagens ___________________________________________________________________ 18 2.10 Controle de Cores e Grficos de Fundo _______________________________________________ 21 2.10.1 Cores e elementos grficos de fundo ______________________________________________ 21 2.10.2 Cores de letras e links __________________________________________________________ 22 2.11 Barras horizontais ________________________________________________________________ 23 3. Tabela de Comandos _________________________________________________________________ 25 4. Tabela de Acentuao/ Caracteres Especiais _____________________________________________ 29 5. Tabela de Cores _____________________________________________________________________ 30
H diferenas entre os diversos clientes Web, de forma que nem todas as marcaes e seus correspondentes recursos so suportadas por todos eles. Quando um cliente no entende uma determinada marcao, ele simplesmente a ignora. Ao criar um documento, importante test-lo com vrios clientes.
Voc pode visualizar um documento que esteja criando com NCSA Mosaic (ou qualquer outro cliente Web). Basta abr-lo com o comando Open Local File disponvel na opo File do menu. HTML utiliza marcaes especficas e distintas para dizer ao Web browser como exibir o documento. Importante: HTML no faz diferena entre maisculas e minsculas (no "case sensitive"). Ento a notao <title> equivalente a <TITLE> ou <TiTlE>. Como so as Marcaes HTML? As marcaes do HTML - tags - consistem do sinal (<), (o smbolo de "menor que"), seguida pelo nome da marcao e fechada por (>) ("maior que"). De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabealho</H1>. O smbolo que termina uma determinada marcao igual aquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatao do primeiro nvel de cabealho e </H1> avisa que o cabealho acabou. H excesses a esse funcionamento em pares das marcaes. Por exemplo, a que indica um final de pargrafo: <P> . No necessita de uma correspondente: </P>. A marcao que indica quebra de linha - <br> - tambm no precisa de uma correspondente, e outras tais como <hr> e <li>.. Exemplos de Marcaes A notao: <TITLE> (e a correspondente </TITLE>), especificam o ttulo de um documento. A notao: <H1> (e a correspondente </H1>), indica a aparncia de um cabealho. A notao: <P> a marcao para final de pargrafo.
2.1 HTML "Mnimo" Todo documento deve ser identificado como HTML (<html> </html>), ter uma rea de cabealho (<head></head>) com o nome para o documento (<title> </title>), um ttulo principal e uma rea definida como corpo(<body></body>) do contedo do documento. Como o exemplo a seguir: <HTML> <HEAD> <TITLE>Exemplo de HTML simples</TITLE> </HEAD> <BODY> <H1>Este o primeiro nvel de cabealho</H1> Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.<P> E este o segundo.<P> </BODY> </HTML> Esta pgina vai aparecer assim:
2.2.1 Ttulos
Todo documento em HTML deve possuir um ttulo. De um modo geral o ttulo aparece em lugar separado da pgina (por exemplo, alto da tela no Netscape), e utilizado para identificar o documento em outros contextos ( por exemplo, buscas Wais). interessante que o ttulo possa sugerir claramente o contedo do documento. Ateno porque o conceito de ttulo diferente de cabealho. O ttulo est mais para o nome do arquivo. No um elemento relevante na visualizao do documento como acontece com o cabealho. A marcao utilizada para ttulos <title> e seu par </title>. Escrito desta forma: <html> <title> Este o ttulo</title> <body> <h2>E este o cabealho de nvel 2</h2> Aqui entra o texto do documento ... </body> </html> Apresenta-se assim:
2.2.2 Cabealhos
"Cabealhos" normalmente so usados para ttulos e sub-ttulos de uma pgina. HTML possui seis nveis de cabealhos, numerados de 1 a 6, sendo o nmero 1 o de maior destaque. Cabealhos so exibidos em letras maiores e em negrito. O primeiro cabealho em cada documento deve estar marcado como <H1>. ATENO: ao definir o tamanho de um cabealho, voc no est definindo o tamanho da letra (fonte 10, fonte 14). Voc apenas define que ele aparecer com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele ser visualizado definido pelo programa visualizador de html (browser) de cada pessoa que acessar a informao. As notaes relativas a cabealhos so: <Hy>Texto do cabealho </Hy > onde y um nmero entre 1 e 6 especificando o nvel do cabealho. O conjunto de notaes possveis o que segue: <H1>Headings</H1> <H2>Headings</H2> <H3>Headings</H3> <H4>Headings</H4> <H5>Headings</H5> <H6>Headings</H6>
2.2.3 Pargrafos
A marcao <p> utilizada para definir o incio de um novo pargrafo, deixando uma linha em branco entre cada pargrafo.HTML no reconhece o caracter de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web s reconhecem o incio de um novo pargrafo mediante a marcao apropriada. Existem algumas excees. Por exemplo, inserindo uma marcao de pargrafo depois de <P>, <lLI>,<Hy> e outras, esta ser ignorada.
A marcao <br> faz uma quebra de linha sem acrescentar espao extra entre as linhas.Veja a diferena do uso de <p> e <br> ,nos exemplos a seguir: <html> <body> <h1>Utilizando p</h1> Vamos separar esta sentena com marcao de pargrafo.<p> Para verificar a diferena. </body> </html> <html> <body> <h1>Utilizando br</h1> Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de linha<br> Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de linha<br> Deu pra notar? </body> </html>
possvel interligar documentos em outro diretrio especificando-se o caminho relativo a partir do documento corrente, em relao ao que est sendo interligado. Por exemplo, um link para o arquivo Sergipe.html localizado no subdiretrio Estados seria assim: <A HREF="Estados/Sergipe.html">Sergipe</A> Estes so dos denominados links relativos. tambm possvel usar o caminho completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padro do sistema UNIX. Importante: se voc quiser referenciar um diretrio a partir do raiz do seu servidor www, inicie a notao com /. Isto , se voc tiver uma notao desta forma <A HREF=/imagens/incon1.gif>, significa que o arquivo incon1.gif dever ser buscado no diretrio imagens que est imediatamente acima do diretrio raiz do seu servidor WWW.
7
Por exemplo, para incluir um link para o HTML Beginners Guide, em um documento, deve ser usado: <A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A> O que torna a sentena NCSA's Beginner's Guide to HTML'' um link para tal documento. Para mais informaes sobre URLs, veja em WWW Names and Addresses, URIs, URLs, URNs, escrito por pessoas do CERN, disponvel em http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html. A Beginner's Guide to URLs, localizado no menu de Help do NCSA Mosaic, e disponvel em http://www.ncsa.uiuc.edu/demoweb/url-primer.html
2.5 Listas
1. 2. 3. 4. Listas No Numeradas Listas Numeradas Listas de Definies Listas Intercaladas
10
Uma lista de definies normalmente consiste em alternar um termo (abreviado como DT) e uma definio (abreviado como DD). Clientes Web browsers geralmente mostram a definio em nova linha com outro alinhamento. Exemplo de uma lista de definio: <DL> <DT> NCSA <DD> NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering. </DL>
11
As entradas <DT> e <DD> podem conter vrios pargrafos (separados por <P> ), listas, ou outras definies. A marcao <DD> pode tambm ser utilizada, fora de uma lista de definies como se fosse uma tabulao (insere um espao no incio da frase).
12
13
Podem ser definidos links dentro de textos pr-formatados. No entanto, deve-se evitar utilizar outros caracteres das marcaes em reas <PRE>. Isto porque caracteres como <, >, and & possuem um significado especfico no HTML. O ideal utilizar as sequncias especiais, (<, >, and &, respectivamente) sempre que precisar representar esses caracteres. Veremos mais sobre no prximo item.
14
Para representar os caracteres das tags, utilize a seguintes notaes: < para representar < > para representar > & para representar & "para representar " Uma lista completa dessas notaes especiais pode ser obtida no CERN, em: http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html Caso o editor que voc esteja utilizando no acentue, possvel tambm utilizar notaes especiais para acentuao. H uma lista delas ao final deste documento. Ateno: Ao contrrio do resto do HTML, as notaes especiais diferenciam letras maisculas de minsculas. No possvel usar < no lugar de <.
15
2.8 Endereos
A marcao <ADDRESS></ADDRESS> habitualmente utilizada para especificar o autor do documento e a forma de contato com ele (por exemplo, o endereo eletrnico). Geralmente o ltimo item de uma pgina. Por exemplo, a ltima linha do Beginer's Guide em que foi baseado este tutorial assim: <ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu </ADDRESS> E o resultado
Existe ainda um recurso para criar um item na pgina que, ao ser selecionado, abre uma janela, e permite que se envie uma mensagem eletrnica para um endereo especfico. Para isso utiliza-se a varivel "mailto:" Veja o exemplo abaixo, para enviar mensagens de dvidas para o endereo eletrnico apoio@cr-df.rnp.br Qualquer dvida ou comentrio, voc pode enviar um email ao <a href="mailto:apoio@cr-df.rnp.br">pessoal de apoio </a> a usurios do CR-DF. Fica assim:
16
E ao se clicar em pessoal de apoio, se abrir uma janela para envio de mensagem eletrnica, como abaixo:
17
18
Alinhamento das imagens Toda imagem includa pode ser posicionada (align=...) na tela das seguintes formas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. As trs primeiras opes definem a posio da imagem com relao ao texto. Veja os exemplos:
Ateno: De um modo geral no necessrio incluir essa anotao para alinhar a imagem a esquerda. Caso seja omitida a opo "align", a imagem aparecer a esquerda da pgina.
19
Uma imagem pode ser ainda um boto sensvel: Para isso basta incluir uma imagem no interior de uma ncora. <a href="./index.htm"><img src="../images/stop.gif></a>
20
21
22
A marcao <HR> produz uma linha horizontal no documento. possvel determinar uma largura maior para as barras, utilizando-se a extenso "size". Veja os exemplos:
23
ainda possvel determinar o quanto da largura da pgina a linha horizontal vai ocupar. Para isso utiliza-se a extenso width= . Observe
Ateno: a extenso width no determina o comprimento da linha (em cm ou mm), mas o quanto da largura da pgina ela deve ocupar.
24
3. Tabela de Comandos
Marcao
<HTML></HTML> <HEAD></HEAD>
Funo
Delimita o documento (incio e fim) Cabealho
Caractersticas
Esta marcao deve ser inserida imediatamente no incio e no final de todo arquivo HTML O cabealho de um arquivo html uma rea para insero de informaes que no sero visveis na pgina HTML, tais como title e comentrios Nome a ser atribudo ao documento HTML, mas que no ser visualizado na pgina. Deve sempre aparecer na rea definida como head do documento Indicao de quaisquer comentrios, tais como nome do autor, data de criao, software utilizado para autoria, etc. No visualizado na pgina HTML (s quando solicitadao o source file) Tambm deve aparecer na rea definida como head do documento. Delimita o corpo do documento. Vem imediatamente abaixo da rea definida como head. Esta marcao deve ser fechada somente ao final do documento, imediatamente seguida da marcao </html>
<TITLE></TITLE>
Ttulo do documento
<! >
Comentrio
<BODY></BODY>
Corpo do documento
Exemplo de como devem aparecer distribudas no arquivo as marcaes acima citadas: <html> <head> <title> Ttulo do documento</title> <! autor: Joo das Couves> <! ltima atualizao: 30/02/2001> </head> <body> Bl bl bl ... aqui entra o contedo da pgina ... bl.... </body> </html> Insere uma imagem como fundo da pgina <BODY Imagem de fundo
BACKGROUND=
>
</BODY>
<BODY
BGCOLOR=#rrggbb>
= arquivo imagem ou
url de arquivo imagem Cor padro de fundo #rrggbb = cdigo de cores rgb (ver tabela de cores neste documento) Cores do texto do documento #rrggbb = cdigo de cores rgb (ver tabela de cores neste documento)
(mais ou menos como uma marca dgua). O arquivo deve estar em formato .gif . Este arquivo pode estar na mesma mquina (anotar sua path/nome), ou em outra mquina (indicar por URL) Define uma cor de fundo padro para a pgina. Esta cor pode variar de monitor para monitor. Define a cor para: text = texto normal da pgina link = links da pgina vlink = links consultados na pgina alink = links ativados na pgina
</BODY>
25
<Hy></Hy>
Existem seis nveis de cabealho na pgina (no confudir com cabealho do documento = head): <h1></h1>, <h2></h2> , etc. Sendo H1 o maior e H6 o menor nvel. Ateno, marcaes Hy definem tamanho relativo do texto, e os colocam em destaque (normalmente negrito) Insere uma linha em branco entre dois pargrafos Faz uma quebra de linha. Define um link. O link vai aparecer em destaque na pgina (normalmente outra cor e sublinhado)
= URL ou nome de
<A HREF=# > texto</a>
Abre uma ncora para um outro trecho dentro de uma mesma pgina, ou para um trecho especfico em outro documento. 1. Trecho na mesma pgina Aps a ncora de hiperlink referencial, deve aparecer, entre aspas, o caracter # e uma palavra ou cdigo chave. Este mesmo cdigo ou palavra dever aparecer no ponto de chegada deste link interno, como uma ncora de nome (veja prximo item). 2. Link para trecho especfico em outro documento Deve ser efeito exatamente da mesma forma, sendo que , antes do caracter #, dever aparecer o nome do arquivo que ser pretende ligar, ou sua url completa. Este o ponto de chegada de uma ncora interna a um documento ou para trecho especfico em outro documento. O cdigo ou palavra chave deve ser idntico quele do ponto de partida. No altera a visualizao do texto. Permite que se crie um link que ao ser selecionado abrir uma tela de composio de mensagem eletrnica a ser enviada para o endereo digitado aps MAILTO:
# = cdigo ou palavra
chave
<A NAME=
>
ncora de nome
= cdigo ou palavra
chave <A HREF=MAILTO: xyz@algumlugar.br> Envio de email para endereo especificado
26
Delimita lista no numerada Delimita lista numerada Cada item de uma lista numerada ou no
Deve ser escrita ao incio e ao final da lista. Casa item da lista antecedido da marcao <LI> Deve ser escrita ao incio e ao final da lista. Casa item da lista antecedido da marcao <LI> --o00o--
<DL></DL> <DT>
<DD>
Uma lista numerada <OL> <LI> item 1 <LI> item 2 <LI> item 3 </OL> Deve ser escrita ao incio e ao final da lista. Delimita lista de definies Cada item da lista antecedido da marcao <DT> ou <DD>, conforme explicado a seguir. Entrada de ttulo em lista de Insere um ttulo em uma lista de definio. A entrada de ttulo vai aparecer alinhada definies esquerda da pgina. Normalmente vem seguido de um item do tipo <DD> Insere uma definio (antecedido ou no por Entrada de definio em <DT>). Este item vai aparecer numa margem lista de definies mais interna pgina (como se tivesse uma tabulao antes). Fora de listas de definio pode ser utilizado para produzir este mesmo efeito (Uma tabulao)
Uma lista de definies: <DL> <DT> Ttulo 1 <DD> definio a <DD> definio b <DT> Ttulo 2 <DD> definio a </DL>
Mantm a exata formatao do texto digitado. --o00o---o00o-Quanto a visualizao, normalmente, apenas coloca o trecho em itlico.
27
Insero de imagem
= nome ou URL de
arquivo imagem. <IMG ALING= SRC= > Alinhamento de imagem
Marcao para inserir uma imagem na pgina. Esta imagem deve estar preferencialmente em formato .gif. Pode estar na mesma mquina (apontar com o nome ou path completa) ou em outra mquina (apontar com URL) Opcional. Define o alinhamento de uma imagem na pgina. Aceita os seguintes valores: TOP = alinha o texto com o alto da figura MIDDLE = alinha o texto com o meio da figura BOTTOM = alinha o texto com o rodap da figura RIGHT = alinha a figura direita da tela LEFT = alinha a figura esquerda da tela. Faz ainda com que o texto que esteja ao lado contorne a figura. --o00o-Opcional Extenso opcional que define a largura da linha Opcional Define o quanto da tela uma linha vai ocupar.
insere linha horizontal Largura da linha horizontal n= nmero Ocupao da tela da linha horizontal n= nmero
<HR WIDTH=n%>
28
descrio Maior que Menor que E comercial aspas duplas marca registrada copyrights
possvel utilizar facilidades de acentuao (padro do Windows por exemplo) em documentos HTML. No entanto, desta forma, apenas poder visualizar a acentuao o computador que reconhecer este padro especfico. Segue abaixo o padro para acentuao- ISO Latin-1 alphabet -, semelhante ao utilizado para exibir caracteres das marcaes, e que poder ser visualizado pela grande maioria das mquinas.
Caracter Acento agudo Acento grave Acento circunflexo Letra com til Letra com trema Letras unidas Letra com argola Cedilha N com til O cortado THORN maisculo thorn minsculo eth minsculo eth maisculo Caracter alemo
Notao &xacute; onde x uma letra qualquer, maiscula ou minscula &xgrave; onde x uma letra qualquer, maiscula ou minscula ◯ onde x uma letra qualquer, maiscula ou minscula &xtilde; onde x uma letra qualquer, maiscula ou minscula &xuml; onde x uma letra qualquer, maiscula ou minscula &Aelig; = e æ = Å = e å = Ç = e ç= Ñ = e ñ = Ø = e ø = Þ = (Icelandic) þ= (Icelandic) ð (Icelandic) Ð= (Icelandic) ß =
29
5. Tabela de Cores
Tabela original em: http://www.infi.net/wwwimages/colorindex.html
White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93 Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32
30