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 Estrutura de uma página Um primeiro exemplo: <HTML> <HEAD> <TITLE>Uma página em HTML</TITLE> </HEAD> <BODY> Uma primeira experiência em HTML. </BODY> </HTML>
HTML Estrutura de uma página 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 <P> e </P> – 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 Formatação de texto Observemos agora alguns exemplos de formatação de texto no editor:
HTML Formatação de texto Os exemplos no código:
HTML Formatação de texto Reparemos que as quatro frases se encontram no corpo (body) da página e que todas são parágrafos (delimitadas pelas tags <p> e </p>). As primeiras três frases encontram delimitadas por <b> e </b>, <em> e </em>, e <u> e </u>, respectivamente. <b>...</b> servem para colocar o texto a carregado (bold). Também poderiam ser utilizadas as tags <strong>...</strong>. <em>...</em> servem para dar ênfase ao texto. Também poderiam ser utilizadas as tags <i>...</i> (itálico).
HTML Formatação de texto <u>...</u> servem para sublinhar o texto (underlined). Já a última frase encontra-se delimitada por <font> e </font>. São as tags utilizadas para definir o tipo de letra. A tag <font> tem três atributos: color, size e face; que servem para definir a cor, o tamanho e fonte da letra, respectivamente. <font color="#FF0000" size="4" face="Arial">E, finalmente, esta está colorida e com outro tipo de letra.</font> indica que a frase tem a cor “#FF0000” (vermelho), o tamanho 4 e a fonte “Arial”.
HTML Formatação de texto 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, <b><u>Frase com formatação </u></b><b><i><u>mista.</u></i></b> 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 Estrutura de um site Esquema: páginas no site index.html páginas no site outras páginas na Internet
HTML Estrutura de um site 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 Um exemplo prático... 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 Um exemplo prático... É 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; ...