Post on 24-Nov-2020
Profa. Reane Franco Goulart
� A linguagem HTML (Hypertext MarkupLanguage) tem o objetivo de formatar textosatravés de marcações especiais denominadastags, para que possam ser exibidos de formaconveniente pelos clientes Web, tambémdenominados navegadores ou browsers.◦ Além disso, esta linguagem possibilita a
interligação entre páginas da Web, criando assimdocumentos com o conceito de hipertexto.
� Documentos HTML são arquivos de textoescritos em ASCII.
� O HTML não faz diferença entre letrasmaiúsculas e minúsculas em suas marcações,ou seja, não é `case sensitive´.
� Nem to das as marcações e seuscorrespondentes recursos são suportados porqualquer navegador. Quando um cliente Webnão entende uma marcação, elesimplesmente a ignora.
� Arquivos HTML podem possuir as extensões`html' ou `htm'. A primeira é normalmenteutilizada em sistemas UNIX e a segunda emsistemas Windows. Os Browsers são capazesde exibir documentos com ambas asextensões
� Todo documento HTML apresenta elementosentre parênteses angulares (< e >). Esseselementos são as etiquetas (tags) de HTML,que são os comandos de formatação dalinguagem.
� A maioria das etiquetas tem suacorrespondente de fechamento, representadacom uma “barra” (/):
<etiqueta>...</etiqueta> <etiqueta>...</etiqueta> <etiqueta>...</etiqueta> <etiqueta>...</etiqueta>
� Isso é necessário porque as etiquetas servempara definir a formatação de uma porção detexto, e assim marcamos onde começa eonde termina o texto com a formataçãoespecificada por ela.
� Alguns elementos são chamados “vazios”,pois não marcam uma região de texto,apenas inserem alguma coisa no documento,não havendo a necessidade do fechamento:
<etiqueta> <etiqueta> <etiqueta> <etiqueta>
� HTML é um recurso muito simples e acessívelpara a produção de documentos.
� Não existem programas em HTML, pois HTMLnão é uma linguagem de programação, masde formatação (marcação). Portanto, a rigornão existem "programadores" de HTML.
� Existem Editores HTML chamados WYSIWYG(what you see is what you get - o que você vêé o que você tem). Eles oferecem ambiente deedição com um resultado final das marcações(pois o resultado final depende do browserusado para visitar a página).◦ Alguns bastante conhecidos são por exemplo:
FrontPage e Dreamweaver.
� Além dos editores específicos para HTML,Editores de Textos bastante utilizados, comoo Word, entre outros, permitem a exportaçãode seus documentos próprios para o formatoHTML (menu Arquivo, Salvar como,Salvar_como Tipo).
� Para que uma página estejapermanentemente disponível pela Web, elaprecisa ter um endereço fixo, alojada em umservidor.
� Existem vários provedores de espaço(hosting) gratuitos e também os provedoresde acesso geralmente oferecem espaço paraos sites de seus assinantes. Sites com finslucrativos geralmente são hospedados emprovedores de espaço pagos.
�
� Definida a hospedagem, basta enviar para oprovedor os arquivos de seu site (via FTP oupor uma página de envio no próprio provedorde espaço) e suas páginas já estarãodisponíveis para visitas no mundo todo.
<HTML> <HEAD> <TITLE> Titulo do Documento </TITLE> </HEAD>
<BODY> texto, imagem, links, etc...
</BODY> </HTML>
� As etiquetas (tags) HTML não são sensíveis àcaixa, ou seja, tanto faz escrever <HTML>,<Html>, <html>, <HtMl>, etc. Não temdiferença entre maiúsculas e minúsculas.
� <HEAD> contém informações sobre odocumento. O elemento <TITLE>, porexemplo, define um título, que é mostrado noalto da janela do browser. Exemplo:
<HEAD> <TITLE> Página do Fulano de Tal </TITLE> </HEAD>
� TodoTodoTodoTodo documentodocumentodocumentodocumento WWWWWWWWWWWW devedevedevedeve terterterter umumumum títulotítulotítulotítulo;;;;esse título é referenciado em buscas pelarede, dando uma identidade ao documento.◦ Ao adicionar uma página aos seus Favoritos
(Bookmarks), o título da página se torna a âncorade atalho para ela. Por isso é sugerido que ostítulos dos documentos sejam sugestivos,evitando-se títulos genéricos como "Introdução“,por exemplo.◦ O título também é bastante significativo para a
listagem de uma página nos resultados depesquisas nos sites de busca da Internet.
� 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>, podemosdefinir cores para os textos, links e para ofundo das páginas, bem como uma imagemde fundo (marca d’água):
� <BODYBGCOLORBGCOLORBGCOLORBGCOLOR= "#rrggbb“ TEXTTEXTTEXTTEXT= "#rrggbb“ LINKLINKLINKLINK= "#rrggbb“ ALINKALINKALINKALINK= "#rrggbb“ VLINKVLINKVLINKVLINK= "#rrggbb“ BACKGROUNDBACKGROUNDBACKGROUNDBACKGROUND= "URL“>
<BODY BGCOLOR=“RED” /BODY>
� BGCOLORBGCOLORBGCOLORBGCOLOR: Background Color, ou seja, cor defundo da página. Quando não é indicada acor de fundo, o browser irá mostrar uma corpadrão, geralmente cinza ou branco.
� TEXTTEXTTEXTTEXT: Cor dos textos da página (padrão: preto).
� LINKLINKLINKLINK: Cor dos links (padrão: azul). � ALINKALINKALINKALINK: Cor dos links quando acionados,
clicados (padrão: vermelho).� VLINKVLINKVLINKVLINK: Cor dos links depois de visitados
(padrão: azul escuro ou roxo).
� O nome das cores - os 16 nomes de coresaceitos desde a versão 3.2 da HTML sãoestes: aqua, black, blue, fuchsia, gray, green,lime, maroon, navy, olive, purple, red, silver,teal, white, yellow.
� Cores - As cores são introduzidas através doelemento <FONT>, usando o sistema RGB paracores (da mesma forma que vimos para cores dedocumentos), como mostrado no exemplo aseguir:
<FONT COLOR="red"> Texto </FONT>
� Produzirá na página: a palavra Texto escrita nacor vermelha.
� Assim, um trecho de texto pode ter uma cordiferente da definição geral de cores, feitaatravés dos atributos de <BODY>.
� Tamanho - Veja a formatação a seguir: <FONT SIZE=3> Texto </FONT>
Produzirá na página: a palavra Texto como o tamanho 3.
� Este comando permite que o autor do documento altere otamanho das letras em trechos específicos de texto. Otamanho básico dos textos é 3 (padrão). Podemos indicartamanhos relativos a esse, por exemplo:
<FONT SIZE=+2> Letra maior </FONT>
Letra normal <FONT SIZE=-2> Letra menor </FONT>
� Fontes - Uma evolução que permite a escolhada fonte para os textos, é o atributo FACE:
<FONT FACE="Arial"> Texto </FONT>
Produzirá: a palavra Texto com a fonte (tipo de letra) Arial.
<FONT FACE="Verdana“ COLOR="blue"> Fonte Verdana Azul </FONT>
<FONT FACE="Arial“ COLOR="green"> Fonte Arial Verde </FONT>
<FONT FACE="Courier New“ COLOR="red"> Fonte Courier New Vermelha </FONT>
� Há seis níveis de cabeçalhos em HTML, de<H1> a <H6>:
<H1> Este é um cabeçalho de nível 1 </H1><H2> Este é um cabeçalho de nível 2 </H2> <H3> Este é um cabeçalho de nível 3 </H3><H4> Este é um cabeçalho de nível 4 </H4> <H5> Este é um cabeçalho de nível 5 </H5><H6> Este é um cabeçalho de nível 6 </H6>
� Alinhamento de cabeçalhos - os cabeçalhostêm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabeçalho centralizado</H2>
<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3>
<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default=padrão)</H4>
� As quebras de linha do texto fonte não sãosignificativas na apresentação de documentos emHTML. Para organizar os textos, precisamos deseparadores, apresentados a seguir.
� Quebra de linha◦ Quando queremos mudar de linha, usamos o elemento
<BR>. Isso só é necessário quando queremos umaquebra de linha em determinado ponto, pois osbrowsers já quebram as linhas automaticamente paraapresentar os textos.◦ Com sucessivos <BR>, podemos inserir diversas linhas
em branco nos documentos. Esse elemento tem umatributo especial, que será apresentado no item sobreinserção de imagens.
� Parágrafos ◦ Para separar blocos de texto, usamos o elemento
<P>, por exemplo:
Parágrafo 1; <P> Parágrafo 2. que produz o seguinte:
Parágrafo1; Parágrafo2.
� Combinando parágrafos e quebras de linha, temos por exemplo:
Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2do parágrafo 1.<P>Parágrafo 2;<br> linha 1 doparágrafo 2, <br>linha 2 do parágrafo 2.
� O resultado da marcação acima é: Parágrafo 1; linha 1 do parágrafo 1, linha 2 do parágrafo 1.
Parágrafo 2; linha 1 do parágrafo 2, linha 2 do parágrafo 2.
� <P> tem atributo de alinhamento, semelhante aoscabeçalhos, como nos exemplos a seguir:
<P ALIGN=CENTER> Assim como os trens, as boas idéias às vezes chegam com atraso. <BR> (Giovani Guareschi) </P>
Assim como os trens, as boas idéias às vezes chegam com Assim como os trens, as boas idéias às vezes chegam com Assim como os trens, as boas idéias às vezes chegam com Assim como os trens, as boas idéias às vezes chegam com atraso. atraso. atraso. atraso.
((((GiovaniGiovaniGiovaniGiovani GuareschiGuareschiGuareschiGuareschi) ) ) )
<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhorpassar por ignorante uma vez do que permanecerignorante para sempre”.</P>
Como diz o provérbio chinês: “É melhor passar por ignorante Como diz o provérbio chinês: “É melhor passar por ignorante Como diz o provérbio chinês: “É melhor passar por ignorante Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”. uma vez do que permanecer ignorante para sempre”. uma vez do que permanecer ignorante para sempre”. uma vez do que permanecer ignorante para sempre”.
<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>
EsteEsteEsteEste éééé oooo alinhamentoalinhamentoalinhamentoalinhamento padrãopadrãopadrãopadrão (default),(default),(default),(default), eeee porporporporissoissoissoisso nãonãonãonão vouvouvouvou colocarcolocarcolocarcolocar nenhumanenhumanenhumanenhuma frasefrasefrasefrase especialespecialespecialespecial....
� <HRHRHRHR> insere uma linha horizontal, como aapresentada abaixo:
� Essa linha tem diversos atributos, oferecendoresultados diversos.
<HR SIZESIZESIZESIZE=7> insere uma linha de largura 7(pixels)
� <HR WIDTHWIDTHWIDTHWIDTH=50%> insere uma linha queocupa 50% do espaço horizontal disponível:
� <HR WIDTHWIDTHWIDTHWIDTH=30% ALIGNALIGNALIGNALIGN=RIGHT> insere umalinha de comprimento 30% (do espaçohorizontal disponível), alinhada à direita, semefeito tridimensional:
� <HR SIZESIZESIZESIZE=70 WIDTHWIDTHWIDTHWIDTH=2 ALIGNALIGNALIGNALIGN=LEFT> insereuma linha de largura 70 (pixels),comprimento 2 (pixels), alinhada à esquerda(o Netscape, aparentemente, não aceita estaformatação de <HR>):
� Há vários tipos de listas em HTML, sendoestas as mais usadas e corretamenteapresentadas pelos browsers:
� Listas de DefiniçãoListas de DefiniçãoListas de DefiniçãoListas de Definição◦ Estas listas são chamadas também “Listas de
Glossário”, uma vez que têm o seguinte formato:<DL><DT> termo a ser definido<DD> definição<DT> termo a ser definido<DD> definição</DL>
Que produz:termo a ser definido
definiçãotermo a ser definido
definição
� Este tipo de lista é muito utilizado para diversos efeitos deorganização de páginas, por permitir a tabulação do texto. Umexemplo é a lista composta abaixo:
<DL><DT> Imperadores do Brasil:<DD> D. Pedro I<DL><DD> Nome completo: Pedro de Alcântara Francisco Antônio JoãoCarlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga PascoalCipriano Serafim de Bragança e Bourbon</DL><DD> D. Pedro II<DL><DD> Nome completo: Pedro de Alcântara João Carlos LeopoldoSalvador Bibiano Francisco Xavier de Paula Leocádio Miguel GabrielRafael Gonzaga</DL></DL>
� Listas nãoListas nãoListas nãoListas não----numeradasnumeradasnumeradasnumeradas◦ São equivalentes às listas com marcadores do MS-
Word, por exemplo:
<UL><LI> item de uma lista<LI> item de uma lista, que pode ser tão grandequanto se queira, sem que seja necessário sepreocupar com a formatação das margens de texto<LI> item</UL>
Que produz· item de uma lista· item de uma lista, que pode ser tão grande quanto s e queira, sem que seja necessário sepreocupar com a formatação das margens de texto· item
� A diferença entre o resultado da marcação HTML e doWord está na mudança dos marcadores, assinalando osdiversos níveis de listas compostas:
<UL><LI> Documentos básicos<LI> Documentos avançados<UL><LI> formulários<UL><LI> CGI</UL><LI> contadores<LI> relógios</UL><LI> Detalhes sobre imagens</UL>
Que produz• Documentos básicos• Documentos avançados
o formulários§ CGI
o Contadoreso Relógios
• Detalhes sobre imagens
� Listas NumeradasListas NumeradasListas NumeradasListas Numeradas<OL><LI> item de uma lista numerada<LI> item de uma lista numerada, que pode ser tão grandequanto se queira, sem que seja necessário se preoupar com aformatação das margens de texto<LI> item de lista numerada</OL>
Que produz1. item de uma lista numerada2. item de uma lista numerada, que pode ser
tão grande quanto se queira, sem que sejanecessário se preocupar com a formatação dasmargens de texto3. item de lista numerada
� Porém, através do atributo TYPE, pode-se lidar coma numeração dos itens:
<OL TYPE=I><LI> Documentos básicos<LI> Documentos avançados<OL TYPE=a><LI > formulários<OL TYPE=i><LI>CGI</OL><LI> contadores<LI> relógios</OL><LI> Detalhes sobre imagens</OL>
Que produzI. Documentos básicosII. Documentos avançados
a. formuláriosi. CGI
b. contadoresc. relógios
III. Detalhes sobre imagens
� O atributo START pode indicar o início danumeração da lista:
<OL START=4 TYPE=A><LI> um item<LI> outro item<LI> mais um item</OL>
Que produz
D. um itemE. outro itemF. mais um item
� Listas e Listas e Listas e Listas e subsubsubsub----listaslistaslistaslistas◦ As listas podem ser aninhadas. Por exemplo:
<DL><DT> termo a ser definido<DD> definição<OL><LI> item de uma lista numerada<LI> item de uma lista numerada<UL><LI> item de uma lista</UL><LI> item de uma lista numerada</OL><DT> termo a ser definido<DD> definição</DL>
Que produz
termo a ser definidodefinição1. item de uma lista numerada2. item de uma lista numeradao item de uma lista3. item de uma lista numeradatermo a ser definidodefinição
� Blocos de textoBlocos de textoBlocos de textoBlocos de texto◦ HTML oferece as seguintes formatações de blocos
de texto: <<<<PRE>PRE>PRE>PRE>◦ Apresenta o texto na mesma maneira em que foi
digitado, mantendo quebras de linha e tabulações:
<prepreprepre> uma linha aqui,outra ali,etc. <////prepreprepre>
◦ Uma vez que <PREPREPREPRE> mantém o texto original, nãose deve forçar espaços com essa marcação dentrode outra marcação que já apresente tabulações eespaços específicos.
Resulta em:uma linha aqui,outra ali,etc.
� <BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>� É usado para citações longas:<blockquote> A massa do Sol arqueia o espaço-tempo de talmaneira que, ainda que a Terra siga uma trajetória reta noespaço-tempo quadridimensional, parece-nos que se deslocaem órbita circular no espaço tridimensional. </blockquote>(Stephen W. Hawking, “Uma Breve História do Tempo”)
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-tempoquadridimensional, parece-nos que se desloca em órbitacircular no espaço tridimensional.
(Stephen W. Hawking, “Uma Breve História do Tempo”)
� <ADDRESS><ADDRESS><ADDRESS><ADDRESS>◦ Usado para formatar endereços de E-Mail e
referências a autores de documentos, como porexemplo:◦ Envie críticas e sugestões para<address> fulano@xxx.com.br </address>
Envie críticas e sugestões parafulano@xxx.com.br
� Estilos FísicosEstilos FísicosEstilos FísicosEstilos Físicos<B><B><B><B> Quando disponível no browserbrowserbrowserbrowser, é mostrado emnegritonegritonegritonegrito (em alguns browsers, pode aparecersublinhado).<I><I><I><I> Itálico<U><U><U><U> Sublinhado. Deve ser usado com cuidado, poisconfunde-se com a apresentação de links.<STRIKE><STRIKE><STRIKE><STRIKE> ou <S><S><S><S> Frase riscada.<BIG> <BIG> <BIG> <BIG> Fonte um pouco maior.<SMALL><SMALL><SMALL><SMALL> Fonte um pouco menor.
<SUB><SUB><SUB><SUB> Frase em estilo índice, como em H2O, porexemplo.<SUP><SUP><SUP><SUP> Frase em estilo expoente, como em Km2, porexemplo.
� As imagens dentro de uma página devem estarpreferencialmente no formato ".gif". Este é o formatomais universalmente aceito pelos visualizadores deWWW (browsers). Os navegadores conseguedecodificar outros formatos como o ".jpg" e ".rgb",mas esta capacidade não é comum a todos osprogramas.
� Utiliza-se a seguinte notação para incluir umaimagem:
<img src="diretório/arquivo">
� Toda imagem incluída pode ser posicionada(align=...) na tela das seguintes formas: TOP,MIDDLE, BOTTOM, LEFT e RIGHT.
� Uma imagem pode ser ainda um botão sensível: Paraisso basta incluir uma imagem no interior de umaâncora.
<a href="./index.htm"><imgsrc="../images/stop.gif></a>
� As notações presentes em marcações, devem serrepresentadas com notações especiais para quepossam ser exibidas em tela. Estas notaçõesespeciais sempre se iniciam por & (e comercial) eencerram-se com ; (ponto e vírgula).
� Marcações essenciais para desenhar tabelas emHTML.
<TABLE></TABLE>Toda tabela deve ser iniciada com a marcação <table>e encerrada com </table>.
ATENÇÃO: Dessa forma a tabela vai aparecer sembordas, mas dividindo linhas e células.
Para que a tabela apareça com bordas simples, definadessa forma <table border></table>.
Antes e depois de uma tabela, acontece sempre umaquebra de linha.
<TR></TR>� Cada linha de uma tabela deve sempre aparecer entre
as marcações <tr> e </tr>. (TR = Table Row)
<TD></TD>� Esta é a marcação que define cada célula de uma
tabela. As células de uma tabela devem sempreaparecer entre as marcações de linhas (<tr> e</tr>). Como padrão, o texto nas células éalinhado a esquerda.
<TH></TH>� Desta forma são definidos os títulos de uma tabela.
Estes podem ser posicionados em qualquer célula.A diferença entre a marcação de célula e título decélula é que o título aparece em negrito.
<table border><tr><td>Itens/Mês</td><th>Janeiro</th><th>Fevereiro</th><th>Março</th></tr><tr><th>Usuarios</th><td>80</td><td>93</td><td>120</td></tr><tr><th>Linhas</th><td>3</td><td>3</td><td>5</td></tr></table>
<table border><tr><td> Teste para linhamento<br>com relação a bordas<br>inferior e superior<br></td><td valign=top> TOP </td><td valign=middle>MIDDLE</td><td valign=botton>BOTTOM</td></tr></table>
<table border><tr><td colspan=3>3colunas</td><td>normal</td><td>normal</td></tr><tr><td>col 1</td><td>col 2</td><td>col3</td><td>col 4</td><td>col 5</td></tr></table>
<COLSPAN>Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por padrãocada célula corresponde a uma coluna, ou seja COLSPAN=1.
<table border><tr><td rowspan=3>3 linhas</td><td>col 2</td><td>col 3</td><td>col4</td><td>col5</td> </tr><tr><td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td></tr><tr><td>col 2</td><td>col 3</td><td>col4</td><td>col 5</td></tr></table>
<ROWSPAN> - Este atributopode ser aplicado a células(TH e TD) e define quantaslinhas uma mesma célulapode abranger.
� O uso de áudio e vídeo na internet vemganhando muito destaque nos últimos anos,e é bom saber como usar bem estas mídias.
� Há duas maneiras de inserir som em umapágina:<EMBED SRC=“arquivo_de_som.extensão”> insere oarquivo de som como objeto.<BGSOUND SRC=“arquivo_de_som.extensão”> fazcom que o som seja inserido como som de fundo ou“trilha sonora” de uma página.
� A inserção de vídeo depende bastante do tipode arquivo de vídeo que tem para inserir emuma página.<EMBED SRC=“arquivo_de_video.extensão”> insere oarquivo de video como objeto.
� Os frames são divisões da tela do browser emdiversas telas (ou quadros). Com isso, torna-se possível apresentar mais de uma páginapor vez:◦ Por exemplo, um índice principal em uma parte
pequena da tela, e os textos relacionados ao índiceem outra parte (menus).
<HTML><HEAD> <Title> Assunto teste </title> </head><Frameset cols="20%, 80%">
<Frame src=“indice.html"><Frame src="apresenta.html" Name="principal"><noframe><body><h2> Bem vindo a página teste </h2><P>a casa amarelaa garrafa vermelha</body></noframe>
</frameset></html>
� Dentro da formatação de FRAMESET, tem-seos FRAME SRC, que são referências àspáginas que serão mostradas nos framesdefinidos.
� No código exibido a página indiceindiceindiceindice....htmlhtmlhtmlhtml serámostrada na primeira coluna (que ocupará20% da tela), e a página apresentaapresentaapresentaapresenta....htmlhtmlhtmlhtml serámostrada na segunda, onde ocupara 80% datela.
� A formatação de frames inclui também umaparte NOFRAME, que é mostradanormalmente pelos browsers que nãosuportam sua apresentação.
� Façam o exemplo exibido, anteriormente.� Vejam o arquivo de como construir um frame,
usando HTML. (apostilaHtml-frames.pdf )