Upload
ivanethe-carvalho-rocha
View
250
Download
1
Embed Size (px)
DESCRIPTION
linguagem,conceitos e exemplos html.
Citation preview
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
Estrutura de documento
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:
Estrutura de documento
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.
Estrutura de documento
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)
Estrutura de documento
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.
Estrutura de documento
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>
Estrutura de documento
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:
Estrutura de documento
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>
Estrutura de documento
HTML• Listas em HTML
▫ 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
Estrutura de documento
HTML• Listas em HTML
▫ 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
Estrutura de documento
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>
Estrutura de documento
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>
Estrutura de documento
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>
Estrutura de documento
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>
Estrutura de documento
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”)
Estrutura de documento
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>
Estrutura de documento
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>
Estrutura de documento
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>
Estrutura de documento
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>