@wre2008 1

Programação webProf. Wladimir

HTML

@wre2008 2

Sumário

Histórico;Resumo XHTML;Tags;Edição de documentos HTML;Publicação de um documento;Estrutura básica de um documento HTML;Edição de documentos HTML;Páginas na Web;Comandos básicos de HTML;

@wre2008 3

HistóriaA página Web em nosso navegador parece uma só entidade.São compostos por:

Diferentes arquivos como imagens;Os vídeos;E o mais importante o código fonte.

O código das páginas são escritas em uma linguagem chamada HTML:

Indica onde colocar o texto, imagem ou vídeo;E a forma como são colocadas na página.

@wre2008 4

HistóriaO que significa HTML ?

Acrônimo para a expressão inglesa HyperTextMarkup Language, que significa Linguagem de Marcação de Hipertexto.

HTML é uma junção dos padrões HyTime e SGML.

HyTime: padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo.SGML: padrão para formatação de texto.

Hipertexto é um sistema para a visualização de informação cujos documentos contêm referências internas para outros documentos.

@wre2008 5

HistóriaTim Berners-Lee criou o HTML original para que suas pesquisas pudessem ser transmitidas para os seus colegas de uma forma rápida por meio de uma internet pública (atual internet).Antigamente, o código HTML apresentava um código flexível para facilitar o seu uso para quem não tinha familiaridade com a mesma.

@wre2008 6

HistóriaAtualmente, a sintaxe é mais rígida, permitindo códigos mais precisos.Em 93, foi publicado por Berners-Lee e DanConnolly na IETF uma aplicação formal para o SGML.IETF (sigla em inglês de Internet EngineeringTask Force) preocupa-se com o avanço da arquitetura da internet e seu perfeito funcionamento.

@wre2008 7

História

Em 95, foi publicado pela IETF o HTML 2.0.Desde 96, as especificações da internet vêm sendo mantidas pela World Wide Web Consortium (W3C).Atualmente, a W3C lançou o HTML 5.0.A partir do lançamento do HTML 4.0, no final de 97, o consórcio tem focado no desenvolvimento do XHTML.

@wre2008 8

HistóriaXHTML é uma especificação HTML baseado em XML, que é considerada um sucessor do HTML.O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e entendido.

HTML não é uma linguagem de programação, mas sim uma linguagem de formatação.

@wre2008 9

Resumo XHTMLXHTM (sigla do inglês eXtensible HypertextMarkup Language), combina as tags do HTML com as regras do XML.Esse processo de padronização tem como objetivo a visualização de páginas Web em diversos dispositivos (televisão, palm, celular, etc.). Ou seja, melhorar a acessibilidade.O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada.

@wre2008 10

TagsTodo comando em HTML é escrito entre os sinais de < e >, chamados de tags, ou etiquetas.A maioria das tags apresentam um sinal correspondente de fechamento:

</tag>Essa metodologia é feita para assinalar onde começa e onde termina um determinado texto especificado pela tag.

@wre2008 11

TagsAlgumas tags são chamadas de vazios, pois apenas inserem alguma coisa no documento:

<tag>Praticamente todas as tags apresentam a seguinte nomenclatura:

<comando atributo=“valores”> ... </comando>Exemplo:

<HR color=“red”>Onde: HR = comando que desenha uma linha;

color = atributo que define a cor da linha;“red” = valor do atributo color, será a cor da linha.

@wre2008 12

Edição de documentos HTMLOs documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, notepad, ou qualquer editor simples.Existem editores de texto fonte:

facilitam a inserção das etiquetas, orientando o uso de atributos e marcações. Ex.: W3e, HotDog, Crimson Editor.

Tela do Crimson Editor

@wre2008 13

Edição de documentos HTMLEditores WYSIWYG

Oferecem ambiente de edição com “um” resultado final das marcações (pois o resultado final depende do browser usado para visitar a página). Ex.: FrontPage, Namo Editor, Dreamweaver.

Tela do Namo Editor

@wre2008 14

Edição de documentos HTMLAlém dos editores específicos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML.

O documento HTML produzido, normalmente terá extensão .html ou .htm.

@wre2008 15

Publicação de um documento

Para que uma pagina seja publicada na internet é necessário que tenha um endereço fixo, alojada em um servidor.

@wre2008 16

Edição de documentos HTMLAs tags recomendadas em um documento HTML são:

<html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto. <title>: é o titulo do site que irá aparecer no topo do navegador Web.

@wre2008 17

Edição de documentos HTML<body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

Através de parâmetros da tag <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

@wre2008 18

Edição de documentos HTML<body background="imagem.gif"> - imagem que você deseja configurar como fundo de tela.<body bgcolor="cor"> - cor de fundo de tela.<body text="cor"> - cor padrão de todo o texto da página.<body link="cor"> - determina a cor de todos os links da página.<body vlink="cor"> - determina a cor de todos os links já visitados na página.<body alink="cor"> - determina a cor dos linksativos.

@wre2008 19

Edição de documentos HTMLO exemplo seguinte determina que a cor de fundo do site será amarela, o texto será preto, os links ainda não visitados serão azuis, os links já visitados serão roxos, e os links ativos serão verdes:

<body bgcolor="yellow" text="black" link="blue" vlink="purple“ alink="green">conteúdo</body>

É recomendado que as tags de comandos sejam escritas dentro dos limites das tags <body> e </body>.

@wre2008 20

Edição de documentos HTML

@wre2008 21

Páginas na WebDois tipos de páginas:

Sem movimentos e funcionalidades além de links;Com efeitos especiais e nas quais podemos interagir.

Páginas estáticas, são criadas em HTML:Fáceis de criar;Não permite criar grandes efeitos.

Páginas dinâmicas, são criadas em HTML com o auxilio de outras linguagens:

Mais complicadas de se criar;Permitem uma gama de efeitos bem maior.

@wre2008 22

Páginas DinâmicasUma página é dinâmica quando realiza efeitos especiais ou implementa alguma funcionalidade ou interatividade.Utilizam como código base o HTML e dentro deste código outra linguagem Web.

@wre2008 23

Páginas Dinâmicas de ClienteSão as páginas dinâmicas que se processamno cliente. Nestas páginas, toda a carga de processamento dos efeitos e funcionalidades é suportada pelo navegador.Vantagens:

Menor trabalho para o servidor;Oferecem respostas imediatas;Permitem a utilização de recursos locais;

Desvantagens:São dependentes do sistema do cliente (Pode funcionar em um navegador e no outro não).

@wre2008 24

Páginas Dinâmicas de ServidorSão páginas reconhecidas, interpretadas e executadas pelo próprio servidor.Vantagens:

Clientes não consegue ver os scripts;Independentes do navegador do usuário;

Desvantagens:Servidor mais potente e com mais capacidade.

@wre2008 25

Páginas Dinâmicas de Servidor

@wre2008 26

Comandos HTMLComentário: <!-- Comentário-->

Os links são classicamente agrupados da seguinte forma:Links internos: os que se dirigem a outras partes dentro da mesma página.Links locais: os que se dirigem a outras páginas do mesmo site web.Links remotos: os que se dirigem à páginas de outros sites web.Links com endereços de correio: para criar uma mensagem de correio dirigido a um endereço.Links com arquivos: Para que os usuários possam fazer download de arquivos.

@wre2008 27

Comandos HTMLExemplos de Links:

<a href=“http://www.google.com.br">google</a><a href=“mailto:wla@pucsp.com">Wladimir</a>

Âncoras: <a name=região> - este atributo permite que você crie links internos na mesma página. Por exemplo:<a href="#explicação">Saiba mais sobre o meu site</a><a name="explicação">O meu site</a>O caracter "#" indica que se trata de um link em uma mesma página.

@wre2008 28

Comandos HTMLAinda pode ser utilizado o atributo: target = Indica o frame em que será carregado o arq_destino.Os principais valores utilizado na target são:

_blank - faz com que o browser abra uma janela nova e sem título._self - apresenta o documento na mesma janela em que a sua URL foi chamada._parent - carrega o documento na janela que chamou a janela do link._top - carrega o link na janela principal do browser.

@wre2008 29

Comandos HTMLImagens: <img src=“computer.gif">

Formatação:<b> - Negrito<i> - Itálico<u> - Sublinhado<strike> ou <s> - Frase riscada<sub> - Frase subscrita<sup> - Frase sobrescrita<big> - Texto menor<small> - Texto menor

@wre2008 30

Comandos HTMLFormatação de fonte:<font face="tipologia" size="tamanho" color="cor"></font> determina o tipo da fonte, o tamanho e a cor do texto que será escrito entre essas tags.

<font face="Verdana" size="1">HTML</font>

Mudar o tamanho da fonte:<h1>A</h1><h2>A</h2><h3>A</h3><h4>A</h4><h5>A</h5>

@wre2008 31

Comandos HTMLFormatação: <center> - Centraliza os elementos na página.<br> - Nova linha.<p> - Início de um novo parágrafo:

<p align="center">Revisão de Html

</p><p align="left">Revisão de Html</p><p align="right">

Revisão de Html</p>

@wre2008 32

Comandos HTMLAlinhamento de bloco de texto <div align="…"></div>Configura o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center).

<HR> - parâmetro utilizado para colocar linhas horizontais em uma página. Você pode determinar a altura, a largura e o alinhamento da linha.Por exemplo: <hr size=8 align="center" width=75%>

Size - configura a espessura da linha;Width - configura a largura da linha (pode ser em porcentagem ou em pixels);Align - determina o posicionamento da linha.

@wre2008 33

Comandos HTMLFormatação: Exemplo:

A B AB

<pre>A B</pre> A B

Marquee:<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

Texto <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>

Texto <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>

Texto

@wre2008 34

Comandos HTMLImagens <img>

As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg (ou *.jpeg), *.png.

Parâmetros:

ALT = Texto alternativo que é apresentado no lugar da imagem no browsers texto.

Width e Height = largura e altura, respectivamente (em pixels).

Align = Alinhar a imagem na página.

Border = A imagem aparece com uma borda.

hspace - especifica um espaço em branco a ser deixado entre as bordas esquerda e direita da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.

@wre2008 35

Comandos HTMLParâmetros tabelas:

align Justifica o texto da célula da mesma forma que se fosse o de um parágrafo.valign Podemos escolher se queremos que o texto apareça acima (top), no centro (middle) ou abaixo (bottom) da célula.bgcolor Dá cor à célula ou escolha de linha.bordercolor Define a cor da borda.

@wre2008 36

Comandos HTMLOutros atributos que podem ser unicamente atribuídos a uma célula e não ao um conjunto de células de uma linha são:

background Permite-nos colocar um fundo para a célula a partir de um link a uma imagem.height Define a altura da célula em pixels ou porcentagem.width Define a largura da célula em pixels ou porcentagemcolspan Expande um célula horizontalmente.rowspan Expande um célula verticalmente.

@wre2008 37

Comandos HTMLTabelas:

<table border=1><tr>

<td>Agosto

</td><td>

Setembro</td>

</tr><tr>

<td>Outubro

</td></tr>

</table>

@wre2008 38

Comandos HTMLTabelas:

<table border=1><tr>

<td width="100" height="40">Agosto

</td><td>

Setembro</td>

</tr><tr>

<td>Outubro

</td></tr>

</table>

@wre2008 39

Comandos HTMLTabelas:

<table border=1 cellpadding="30" cellspacing="20"><tr>

<td>Agosto

</td><td>

Setembro</td>

</tr><tr>

<td>Outubro

</td></tr>

</table>

@wre2008 40

Comandos HTMLTabelas:

<table border=1><tr>

<td>Agosto

</td><td>

Setembro<br><br><br>

</td></tr>

</table>

Tabelas:<table border=1 >

<tr><td valign="top">

Agosto</td><td>

Setembro<br><br><br>

</td></tr>

</table>

@wre2008 41

Comandos HTMLTabelas:

<table border=1 bgcolor="#ffff00"><tr bgcolor="#ff0000">

<td bgcolor="#00ffff">Agosto

</td><td>

Setembro</td>

</tr></table>

@wre2008 42

Comandos HTMLTabelas:

@wre2008 43

Comandos HTMLTabelas aninhadas:<table cellspacing="10" cellpadding="10" border="3"> <tr>

<td align="center"> Célula da tabela principal </td> <td align="center">

<table cellspacing="2" cellpadding="2" border="1"> <tr>

<td>Tabela aninhada, célula 1</td> <td>Tabela aninhada, célula 2</td>

</tr> <tr>

<td>Tabela unida, célula 3</td> <td>Tabela aninhada, célula 4</td>

</tr> </table>

</td> </tr> </table>

@wre2008 44

Comandos HTMLMúsica de fundo:

Para por uma música de fundo adicione o seguinte comando:

<embed src="arquivo.ext" autostart="true" loop="numero_de_vezes_que_vai_tocar">