HTML O que é? HiperText Markup Language É uma linguagem para formatação de documentos Permite (entre outras coisas): –Formatar Texto; –Inserir Imagens;

HTML

O que é?

• HiperText Markup Language• É uma linguagem para formatação de documentos• Permite (entre outras coisas):

– Formatar Texto;– Inserir Imagens;– Inserir Ligações; e– Inserir Sons.

• É universal, funcionando independentemente da máquina onde é utilizada.

HTML

História

• O conceito de hipertexto surgiu na década de 50 do século XX.

• Hipertexto: texto com formatação acrescida (e.g., imagens) permitindo também a navegação entre vários textos (documentos) através de links).

• Mas, tal como o conhecemos, surgiu em finais da década de 80, pelas mãos de Tim Berners-Lee.

• Surgiu no CERN (Centro Europeu de Física de Partículas).

• Foi o HTML que esteve na base da “explosão” da Internet, sendo o principal suporte da World Wide Web (WWW).

HTML

Estrutura de uma página

• Uma página HTML é constituída por um cabeçalho e um corpo.

• No cabeçalho é definido, entre outras coisas, o título da página.

• É no corpo que surge a informação que nos é mostrada quando abrimos determinada página.

• O cabeçalho, o corpo e todos os outros elementos de uma página são definidos com base em tags (etiquetas).

• Todos os tags são delimitados por ‘<‘ e por ‘>’ e, salvo algumas excepções, têm uma abertura e um fecho (e.g., <HTML> ... </HTML>).

HTML


• Um primeiro exemplo:<HTML>

<HEAD>

<TITLE>Uma página em HTML</TITLE>

</HEAD>

<BODY>

Uma primeira experiência em HTML.

</BODY>

</HTML>

HTML


• Podemos observar, no exemplo anterior, 4 tags:• <HTML> e </HTML>, que indicam que se trata de um

documento em HTML;• <HEAD> e </HEAD>, que delimitam o cabeçalho da

página;• <TITLE> e </TITLE>, que definem o título da página;

e• <BODY> e </BODY>, que delimitam o conteúdo a

mostrar ao utilizador.• As tags afectam todo o texto contido entre a abertura e

o fecho.

HTML

Frontpage Express

• Observemos agora o nosso programa de edição de páginas HTML: o FrontPage Express.

HTML

Frontpage Express

• O FrontPage é similar aos mais comuns processadores de texto, como o WordPad, ou mesmo o Word.

• Só que, em vez de produzir ficheiros ‘.doc’, produz ficheiros de texto “normal”, utilizando as tags HTML para dar a formatação pretendida ao documento.

• No FrontPage, podemos ver o ficheiro (código) HTML fazendo clique em ‘Ver|HTML...’ (menu ‘Ver’, opção ‘HTML...’) – escrevemos previamente a frase “Uma primeira experiência em HTML.”.

HTML

Frontpage Express

• O código HTML do documento:

HTML

Frontpage Express

• O FrontPage, como qualquer editor de HTML, insere os tags “automaticamente” formatando assim o texto.

• A estrutura da página é gerada automaticamente.• A frase “Uma primeira experiência em HTML.” foi

inserida entre as tags e – indicativas de parágrafo – que por sua vez surgem dentro do corpo da página (body) – entre os tags <BODY> e </BODY>.

• Podemos também alterar a página directamente através do código.

HTML

Frontpage Express

• Alteração do nome da página “sem título” para “Uma página em HTML”.

HTML

Frontpage Express

• Agora, para vermos o resultado final, é necessário gravar o ficheiro. Chamemos “index.html” a este ficheiro.

• O ficheiro com o nome “index.html” será sempre o primeiro ficheiro a ser mostrado quando acedemos a um endereço.

• Por exemplo, ao acedermos ao endereço www.google.com é-nos mostrada a página www.google.com/index.html.

• Assim, a página inicial de um site web terá sempre (regra geral) o nome “index.html”.

HTML

Frontpage Express

• Para gravar um ficheiro, fazemos clique em “Ficheiro|Gravar”. Surge-nos depois uma caixa onde podemos indicar o título da página (que anteriormente alterámos no código), e onde devemos seleccionar o botão ‘Como ficheiro...’, que nos leva para a janela habitual para gravar ficheiros. Gravemos o ficheiro em ‘C:\’.

HTML

Frontpage Express

• Para vermos o ficheiro, utilizamos um browser. Um exemplo é o Internet Explorer. No endereço devemos escrever ‘C:\index.html’.

HTML

Formatação de texto

• Em HTML é-nos permitido formatar texto, deixando-o a carregado, sublinhado, itálico, colorido, alterar o tipo de letra, etc.

• Estas formações são realizadas – como num comum processador de texto – seleccionando os pedaços (e.g. palavras) de em questão e fazendo clique posteriormente em nos botões .

• Também é possível efectuar as mesma operações através do menu “Formatar|Tipo de letra...”.

HTML


• Observemos agora alguns exemplos de formatação de texto no editor:

HTML


• Os exemplos no código:

HTML


• Reparemos que as quatro frases se encontram no corpo (body) da página e que todas são parágrafos (delimitadas pelas tags e ).

• As primeiras três frases encontram delimitadas por e , e , e e , respectivamente.

• ... servem para colocar o texto a carregado (bold). Também poderiam ser utilizadas as tags ....

• ... servem para dar ênfase ao texto. Também poderiam ser utilizadas as tags ... (itálico).

HTML


• ... servem para sublinhar o texto (underlined).• Já a última frase encontra-se delimitada por e . São as tags utilizadas para definir o tipo de letra.

• A tag tem três atributos: color, size e face; que servem para definir a cor, o tamanho e fonte da letra, respectivamente.

• E, finalmente, esta está colorida e com outro tipo de letra. indica que a frase tem a cor “#FF0000” (vermelho), o tamanho 4 e a fonte “Arial”.

HTML


• As cores, em HTML, têm o formato “#RRGGBB”. São cores compostas por vermelho (R), verde (V) e azul (B).

• Todas as tags usadas para formatação de texto podem ser combinadas, possibilitando formatação múltipla do texto.

• Por exemplo, Frase com formatação mista. mostraria a frase “Frase com formatação mista.”.

HTML

Hiperligações

• Vamos agora criar hiperligações (ou links).• Hiperligações são palavras (ou imagens) que, quando

efectuado um clique com o rato sobre essas palavras, mostram no browser uma outra página HTML qualquer definida por nós.

• As hiperligações costumam ser mostradas a azul e sublinhadas, para uma fácil identificação.

• Assim, no FrontPage, escrevemos a frase “Estamos num curso dado pela ESEC.”

HTML

Hiperligações

• Depois, para criarmos uma hiperligação, seleccionamos a palavra ESEC e fazemos clique em “Inserir|Hiperligação” (ou no botão ).

HTML

Hiperligações

• Definimos o URL “http://www.esec.pt”.

HTML

Hiperligações

• Observemos o código gerado para uma hiperligação:

HTML

Hiperligações

• Atentemos na linha “Estamos num curso dado pela <a href="http://www.esec.pt">ESEC</a>”.

• Observamos que a palavra “ESEC” se encontra entre duas novas tags: <a> e </a> (anchor).

• São essas tags que indicam que determinada palavra é uma hiperligação.

• Note-se, também, que a tag <a> contém um atributo, ‘href=“http://www.esec.pt”’. É este atributo que define o destino da hiperligação.

• Assim, ao fazermos clique em “ESEC”, somos enviados para a página ‘http://www.esec.pt’ – a página da ESEC.

HTML

Hiperligações

• O resultado final:

HTML

Inserir Imagens

• Para inserir imagens, usa-se o menu “Inserir|Imagem” (ou o botão ).

HTML

Inserir Imagens

• Vejamos agora o código:

HTML

Inserir Imagens

• A tag HTML para imagens é <img>. Não tem fecho.• Esta tag tem três atributos possíveis: src, width e height. Servem para indicar o nome do ficheiro de imagem, a largura da imagem e a altura da imagem, respectivamente.

• Extra: se a tag <img> se encontrasse entre <a> e </a>, a imagem funcionaria como uma hiperligação (tal como a palavra ‘ESEC’ no exemplo das hiperligações). Ou seja, também nos é permitido fazer hiperligações com imagens, no FrontPage, tal e qual como se faz para texto.

HTML

Imagens de fundo

• Numa página web é possível definir uma imagem de fundo, uma cor de fundo, ou mesmo a cor de letra para toda a página.

HTML

Imagens de fundo

• No FrontPage isto faz-se através do menu “Formatar|Fundo... [Fundo]”.

HTML

Imagens de fundo

• O código gerado:

HTML

Imagens de fundo

• Reparem que o há de novo são três atributos na tag <BODY>:• background, que contém o nome do ficheiro com a

imagem de fundo;• bgcolor, que contém a cor de fundo; e• text, que contém a cor de letra.

• As cores, mais uma vez, são representadas no formato “#RRGGBB”.

HTML

Tabelas

• Para inserir tabelas, usamos o menu “Tabela|Inserir tabela...” (ou o botão ).

HTML

Tabelas

• Uma tabela 2x2 no editor:

HTML

Tabelas

• E o código de uma tabela:

HTML

Tabelas

• O código de uma tabela já é mais complexo.• Começa-se pelas tags <table> e </table>, que

delimitam todo o conteúdo de uma tabela.• <table> tem os atributos border, cellpadding e cellspacing, e width, que indicam o tamanho da margem, o espaçamento das células e a largura da tabela, respectivamente.

• border="0" indica que a tabela não terá margem.• width="100%" indica que a tabela terá a largura total

da página.

HTML

Tabelas

• Dentro das tags <table> e <table>, encontram-se também as tags <tr> e </tr>.

• <tr>...</tr> (table row) servem para definir as linhas de uma tabela. Cada par destes corresponde a uma linha.

• E, por sua vez, cada linha tem células lá dentro. São as tags <td> e </td> (table data cell) que definem as células.

• A tag <td> tem um atributo width (largura), que é a largura dessa célula. A soma das larguras das células de uma linha deve perfazer a largura total da tabela.

HTML

Tabelas

• É entre as tags <td> e </td> que são inseridos os textos e/ou imagens que pretendamos.

HTML

Estrutura de um site

• Regra geral, todos os sites são constituídos por mais que uma página. (As imagens também fazem parte do site e são ficheiros independentes.)

• É assim facilitada a distribuição de conteúdos (tal como os capítulos de um livro).

• A página inicial de um site tem o nome de “index.html”. É a face do site e tem, tal como o índice de um livro, a referências para as outras páginas (através de hiperligações).

• As outras páginas podem ter um nome qualquer, não devendo, no entanto, conter espaços ou caracteres cedilhados, acentuados, aspas, ...

HTML


• Esquema:

index.html

páginas no site

outras páginas na Internet

HTML


• As páginas que se encontram no mesmo site (dentro do mesmo sub-endereço) devem ser apenas referenciadas pelo nome. Uma hiperligação será <a href="nome_da_página.html">...</a>. Tem uma referência relativa.

• Já referências a páginas que se encontrem fora do nosso site serão do género <a href=“http://www.outro_site.com/nome_da_página.html">...</a>. Têm uma referência absoluta.

• Um site é constituído por todos os ficheiros HTML, tal como por todos os ficheiros, com imagens e outros, utilizados.

HTML

Um exemplo prático...

• Vejamos a página seguinte:

HTML


• As imagens necessárias são fornecidas pelo docente (ou encontram-se na página da webn@seb1s).

• O que é podemos ver a uma primeira vista:• Existe uma imagem de fundo, com o mapa mundo;• O texto está a azul;• Existe uma tabela, no fundo da página, com fundo

azul e com várias imagens nas células;• E cada uma dessas imagens é uma hiperligação.

HTML


• É pedido aos formandos que, com a ajuda do formador, e com as noções e exemplos já mostrados de HTML e do FrontPage Express, tentem reproduzir a página mostrada.• Devem começar por criar um ficheiro novo, de nome index.html;

• Definir uma imagem de fundo para essa página;• Inserir a imagem com o planeta Terra;• Criar a tabela com as imagens;• Inserir as imagens na tabela;• ...

Documents

HTML O que é? HiperText Markup Language É uma linguagem para formatação de documentos Permite (entre outras coisas): –Formatar Texto; –Inserir Imagens;