A linguagem Hyper Text Markup Language (HTML)

Transcrição

1 A linguagem Hyper Text Markup Language (HTML) Nota: Contém material utilizado no curso de HTML do Instituto Superior de Engenharia de Lisboa (ISEL) Ultima actualização: O que é? Linguagem para a descrição de documentos contendo texto, imagens, hyperlinks, etc Definida pelo Word Wide Web Consortium (W3C) Introdução ao HTML 3-2

2 Documento HTML Um documento HTML é constituído por elementos e texto Cada elemento é caracterizado por: - nome - conjunto de atributos Cada atributo é constituído por um nome e por um valor - conjunto de elementos internos, também designados de filhos - texto interno Um elemento é representado num ficheiro.html por: - Uma marca de início, contendo o nome do elemento e os seus atributos - O conjunto de elementos e texto internos - Uma marca de fim, contendo o nome do elemento Introdução ao HTML 3-3 Marcas (tags) Uma marca é delimitada pelos caracteres < e > Uma marca final possui o carácter / a seguir ao delimitador inicial Exemplo: consideremos um elemento de nome p (utilizado para representar parágrafos de texto) contendo o texto Hello Web. A sua representação é: Elemento p <p> Hello Web </p> O resultado no browser é: marca inicial Texto interno Nome do elemento marca final Introdução ao HTML 3-4

3 Elementos dentro de elementos Os elementos podem conter internamente outros elementos. Exemplo: <p> Hello <em>web Web</em></p> O resultado no browser é: Elemento p Conteúdo do elemento p Elemento em Conteúdo do elemento em O elemento em ( abreviatura de emphasis) é utilizado para dar ênfase a blocos de texto. A maior parte dos browsers coloca estes blocos em itálico. Introdução ao HTML 3-5 Representação gráfica A figura seguinte representa, de forma gráfica, a relação entre os vários elementos do exemplo anterior: Hello p em Web Relação de inclusão Os elementos são representados por rectângulos com os cantos arredondados Os blocos de texto são representados por rectângulos normais. O elemento p inclui (tem como filhos) o texto Hello e o elemento em.. Este último inclui o texto Web Esta forma de representação alternativa, designada por árvore de elementos, tem como propósito exclusivo salientar as relações entre os constituintes dum documento html. Introdução ao HTML 3-6

4 Indentação A linguagem html ignora os espaços e mudanças de linha, interpretando-os apenas como separadores de palavras Esta propriedade permite a reescrita do exemplo seguinte, sem alteração do resultado final <p> </p> Hello <em> </em em> Web interior de p interior de em A indentação (afastamento do texto em relação à margem) reflecte as relações de inclusão O texto Hello e o elemento em estão contidos dentro do elemento p, pelo que a sua indentação é superior à de p O texto Web está contido dentro do elemento em, pelo que a sua indentação é superior à de em A indentação não é significativa para o browser. Apenas é utilizada para facilitar a leitura por um humano. Introdução ao HTML 3-7 Estrutura básica dum documento HTML Um documento html é constituído pelo elemento html, designado por elemento raíz Este elemento deve conter dois elementos filhos: - head: cabeçalho do documento, contendo informação sobre este. Ex: título do documente (elemento title) - body: definição da componente visível do documento head title títulotulo html body Corpo do documento Introdução ao HTML 3-8

5 Exemplo <html> <head> </head> <body> </html> <title>o título t tulo </title> <p> </p> </body> Estrutura básica de um documento html head title O títulot tulo html body p Estrutura básica de um documento html Introdução ao HTML 3-9 Atributos Em todos os exemplos anteriores os elementos não possuem atributos. Vejamos de seguida como estes são representados <body> <img src = "isellogo1.gif" /> </body> Nome do atributo : src Valor do atributo : isellogo1.gif gif O elemento img não possui elementos ou texto internos, pelo que a sua representação é feita de forma especial: em vez da marca de fim, a marca de inicio é terminada por / O conjunto de atributos possíveis depende do elemento a que se aplicam O elemento img serve para apresentar imagens O ficheiro com a imagem é indicado através do atributosrc Introdução ao HTML 3-10

6 Imagens Como vimos anteriormente, a inserção de imagens é realizada através do elemento img. Os atributos mais usados neste elemento são: - src (obrigatório): localização do ficheiro com a imagem - alt (obrigatório): texto que deve ser apresentado no caso do browser não conseguir apresentar a imagem - height (opcional): altura da imagem - width (opcional): largura da imagem <img src="isellogo1.gif" alt="logotipo do ISEL width="30%" height="100%"/> 100 % 30 % Introdução ao HTML 3-11 Hyperlinks Designa-se por hyperlink a ligação entre uma zona de um documento html e outro documento. Exemplo: Zona de origem Destino do hyperlink Os hyperlinks são criados através de elementos a (de anchor): - O valor do atributo href define o destino do hyperlink - A zona de origem do hyperlink é definida pelo conteúdo do elemento a <p> Se premir a palavra <a href=" =" ISEL </a> o browser mostra a sua página principal </p> Introdução ao HTML 3-12

7 Imagens como hyperlinks Não é obrigatório que a zona de origem dum hyperlink seja texto Zonas de origem <a href=" =" <img src=" ="logoipl.jpg" alt= IPL IPL /> </a> <p> Instituto Politécnico de Lisboa </p> <a href=" =" <img src="isellogo1.gif" alt= ISEL ISEL /> </a> <p> Instituto Superior de Engenharia de Lisboa </p> Introdução ao HTML 3-13 Âncoras Por omissão, o destino dum hyperlink é o início da página referida no atributo href. O elemento a permite definir zonas de destino diferentes, designadas por âncoras, através do atributo name. O exemplo seguinte coloca um hyperlink, situado no início da página, para uma âncora localizada no fim da página. <body> <a href=" ="#page_end"> Ir para o fim da página </a> <p> Linha 1 </p> <p> Linha 2 </p> <p> Linha 15 </p> <a name="page_end"> Fim da página </a> </body> O carácter # figura antes do nome para indicar que o destino é uma âncora e não uma outra página Introdução ao HTML 3-14

8 Âncoras O destino dum link também pode ser uma âncora localizada noutro documento. Neste caso o valor do atributo href deve ser constituído por:localização do documento; caracter#e nome da âncora. Consideremos o seguinte exemplo: href= Localização do documento Âncora dentro do documento Introdução ao HTML 3-15 Tabelas Uma tabela é constituída por: um elemento table vários elementos tr (table row) internos ao elemento table vários elementos th (table heading) ou td (table data), internos aos elementos tr table tr tr tr tr th th th td td td td td td table tr (table row) td (table data) th (table heading) Nome Sala P. Félix 6 P. Pereira 8 pfelix@cc cc.isel.ipl.ptpt palex@cc cc.isel.ipl.ptpt Introdução ao HTML 3-16

9 Tabelas th: células de cabeçalho td: células de dados A única diferença entre os elementos th e td é a forma de representação (normalmente os elementos th aparecem a negrito) O atributo border especifica o tipo de moldura da tabela Além de texto, os elementos th e td admitem internamente outros elementos, tais como: imagens (img) links e âncoras (a) <body> <h1>tabela de contactos:</h1> <table border="1" cellpadding="10%"> <tr> <th>nome</th> <th>sala</th> <th> </th> </tr> <tr> <td>p. Felix</td> <td>6</td> <td>pfelix@cc.isel.ipl.pt</td> </tr> <tr> <tr> <td>p. Pereira</td> <td>8</td> <td>palex@cc.isel.ipl.pt</td> </tr> </table> </body> Introdução ao HTML 3-17 Headings Os elementos hn, com n entre 1 e 6 (inclusive), definem níveis de secção (headings) <body> <h1> Heading de níveln 1 </h1> <h2> Heading de níveln 2 </h2> <h3> Heading de níveln 3 </h3> <h4> Heading de níveln 4 </h4> <h5> Heading de níveln 5 </51> <h6> Heading de níveln 6 </h6> </body> Introdução ao HTML 3-18

10 Listas As listas são definidas através dos elementos: - ul - unordered list - ol - ordered list Os itens das listas são definidos através do elemento li (list item) Os elementos li podem possuir internamente outras listas <body> <ol> <li>item A</li> <li>item B <ol> <li>sub-item C</li> <li>sub-item C</li> </ol> </li> <li>item D <ul> <li>sub-item E</li> <li>sub-item E</li> <li>sub-item E</li> </ul> </li> </ol> </body> Introdução ao HTML 3-19 Elementos estruturais html head title body p img a table tr th td hn ul ol li hr Documentohtml Cabeçalho do documento Título do documento Corpo do documento Parágrafo Imagem Hyperlink ou âncora tabela Linha da tabela Célula da tabela (cabeçalho) Célula da tabela (dados) Headings Lista não ordenada Lista ordenada Item duma lista Linha horizontal (horizontal rule) Introdução ao HTML 3-20

11 Elementos estruturais (troços de texto) em strong cite dfn code samp kbd var abbr acronym Ênfase Ênfase forte Citação Definição Troço de código Amostra Texto a ser inserido pelo utilizador Variável ou argumento dum programa Forma abreviada Acrónimo Introdução ao HTML 3-21 Caracteres especiais A inclusão de caracteres especiais em blocos de texto é realizado através de entidades (entities). Uma entidade é representada por: - caracter& - nome da entidade ou caracter#seguido do código unicode do caracter especial - caracter; Exemplos: nome da entidade código unicode Entidade Caracter Introdução ao HTML 3-22

12 Mais caracteres Sugestão: realize o ficheiro HTML que produza como resultado a página p apresentada Consulte :// para obter mais informações sobre o código c unicode Utilize a página p unicode.html html,, presente em anexo a estes slides,, para observar os caracteres correspondentes a códigos c unicode Introdução ao HTML 3-23