HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma linguagem utilizada para a construção de documentos/páginas para Web (Web Sites). HTML não é de propriedade de ninguém. É resultado de pessoas que trabalham em muitos países e muitas organizações para definir a linguagem. HTML é um documento que pode ser produzido nos editores de texto mais simples e executado pelo browser (navegador). 2
Sintaxe HTML é composta por tags. Tag é um comando que inicia com o caractere < e finaliza com o caractere >. Cada tag pode conter de nenhum a mais de um atributo. Existem dois tipos de tags Tag de Delimitação Tag de Presença 3 Tag de Delimitação Par de tags que cercam o conteúdo a ser marcado. Sintaxe: <tag>...</tag> O caractere / significa a finalização de uma determinada tag. Exemplos: <html>...</html> <title>...</title> 4
Tag de Presença Tag única que aplica a sua ação em sua posição atual. Sintaxe: <tag /> O caractere / tem a mesma função na tag de delimitação. Exemplos: <br /> <hr /> 5 Atributos Existem dois tipos de atributos: Atributo de Valor Atributo de Presença 6
Atributo de Valor Corresponde a uma característica que pode ser representada por vários valores, podendo ter várias opções de resultados. Sintaxe: <tag atrib= valor >...</tag> <tag atrib= valor /> Exemplos: <font size= 3 >...</font> <hr width= 50% /> 7 Atributo de Presença Corresponde a uma característica que é aplicada quando simplesmente aparece. Sintaxe: <tag atrib>...</tag> <tag atrib /> Exemplos: <hr noshade /> <option... selected>...</option> 8
Estrutura Básica do Documento Todo documento HTML começa com a tag <HTML> e termina com a tag </HTML>. Entre estas tags está o código fonte do documento web que é composto por duas seções: Cabeçalho Usa as tags <HEAD>...</HEAD>. Corpo Usa as tags <BODY>...</BODY>. <html> <head>... </head> <body...>... </body> </html> 9 Cabeçalho <head>...</head> Contém informações para o navegador ou servidor processar este documento. Estas informações são: Título Dados para mecanismo de busca O que for necessário para ser lido pelo navegador antes do documento ser mostrado na tela. As duas tags da seção HEAD são: TITLE e META. 10
Título <title>...</title> Consiste na marcação do texto que é o título que fica na barra do navegador. Ela não contém nenhum atributo e só aparece uma vez em cada documento. <HTML> <HEAD> <TITLE>..oOºº Nícolas Trigo ººOo..</TITLE>... </HEAD> <BODY...>... </BODY> </HTML> 11 12
Informação META <meta... /> Esta tag em combinação com os valores dos seus atributos poderá proporcionar de diversas ações, entre elas estão: Informações para Sites de Busca (descrevem o conteúdo de seu site para os buscadores), como Google, Yahoo!, etc. Atualização periódica de documentos de web sites. Redirecionamento entre documentos de web sites 13 META para Sites de Busca A tag acima informa palavras que serão utilizadas pelos mecanismos de busca para a identificação do documento. Parâmetros para sistema de busca do site da disciplina Programação Web dos cursos da Coordenação de Informática do IF Sertão-PE. <META HTTP-EQUIV= Keywords CONTENT= IF Sertão-PE, Coordenação de Informática, Programação Web, HTML, XHTML, CSS, Javascript, PHP, MySQL, Apache > 14
META para atualização periódica Esta tag informa ao navegador web para atualizar a página atual, após um período de tempo especificado. <meta http-equiv= refresh content= X />, onde X corresponde ao tempo em segundos. Para que a página seja recarregada automaticamente a cada 5 segundos, use a seguinte tag: <meta http-equiv= refresh content= 5 /> 15 META para Redirecionamento Esta tag informa ao navegador web para mover automaticamente para outra página web. <meta http-equiv= refresh content= X;url= Y >, onde X é o tempo em segundos e Y o nome do documento destino. Encaminhar para o documento abc.html após 10 segundos, faça assim: <meta http-equiv= refresh content= 10;url= abc.html > 16
Corpo <body...>...</body> corresponde à seção que é formada pelo corpo do documento. É nela que se encontra a parte visual e auditiva do documento como: texto, formulário, tabela, imagem, links, etc. Os principais atributos desta tag correspondem a: Plano de fundo; Margem; Âncora; e Texto. 17 Corpo Plano de Fundo Os atributos que se referem a plano de fundo são: background bgcolor No atributo background existem duas formas de atribuição do caminho do arquivo de imagem: Caminho Absoluto Caminho Relativo 18
Caminho Absoluto O caminho absoluto refere-se a partir da World Wide Web inserir o caminho completo até chegar ao arquivo de imagem. Por exemplo: <body background= http://www.nicolastrigo.com/ imagens/figura.gif >... </body> 19 Caminho Relativo O caminho relativo refere-se a partir do ponto onde o arquivo do código-fonte se encontra no servidor até o arquivo de imagem. Por exemplo: <body background=../imagens/figura.gif >... </body> 20
Corpo Plano de Fundo O atributo bgcolor contém a cor que será usada como plano de fundo do documento. A cor pode ser identificada pelas seguintes formas: Nome da cor em inglês; ou código RGB em hexadecimal. Exemplos: <body bgcolor= yellow >...</body> <body bgcolor= #FFFF00 >...</body> 21 Nome da Cor em inglês 22
Código RGB em hexadecimal Formado por sete caracteres: primeiro pelo caractere #, seguido de seis dígitos em hexadecimal: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Dos seis dígitos: os dois primeiros correspondem à cor vermelha; os dois do meio correspondem à cor verde; e os dois últimos correspondem à cor azul. 23 Corpo Margens Os atributos que tratam das margens são: topmargin e leftmargin, que atendem ao Internet Explorer; e marginwidth e marginheight, que atendem aos demais navegadores. Os atributos topmargin e marginwidth correspondem à margem superior. Os atributos leftmargin e marginheight correspondem à margem esquerda. O valor destes atributos são em pixel. O valor default é de 10 pixel. Exemplos: <body topmargin= 0 leftmargin= 0 marginwidth= 0 marginheight= 0 >... </body> 24
Corpo Âncoras e Texto Os atributos que tratam dos links e texto são: O atributo link, que afeta a cor de todos os links de um documento que ainda não foram acessados (default: azul); O atributo vlink, que afeta a cor dos links que já foram acessados (default: lilás); O atributo alink, que afeta a cor do link ativo, que está sendo acessado (default: vermelho); e O atributo text, que afeta a cor do texto (default: preto). Exemplo: <body link= red vlink= green alink= gray text= blue >...</body> 25 Estrutura básica do documento As tags que serão vistas são aplicadas entre as tags <body> e </body>. Estas tags geram conteúdo visual ou auditivo no navegador. Serão demonstrados atributos prioritários, mas não exclusivos. A maioria dos atributos são aplicáveis à todas as tags. 26
Parágrafo <p>...</p> <p align= center >...</p> Esta tag cerca um parágrafo do documento. O atributo ALIGN corresponde ao alinhamento deste parágrafo. As opções são: left right center justify O valor padrão é o valor left. 27 Títulos e Subtítulos Corresponde à identificação de um determinado texto como título. A tag é formada pela letra H e um número que varia entre 1 e 6. Deixa o texto em negrito e aumenta o espaço entre as outras informações. O h1 corresponde a maior fonte, diminuindo de tamanho até o h6, que é o menor. As tags são assim: <H1>...</H1> <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6> 28
Linha Horizontal Corresponde ao desenho de uma linha horizontal. Os seus atributos são: ALIGN que corresponde ao alinhamento; WIDTH que corresponde à largura, podendo ser em porcentagem ou pixels; SIZE que corresponde à espessura em pixels; e NOSHADE que retira a sombra da linha. Por default: a linha é centralizada, 100% de largura, 2px de espessura e com sombra. Sintaxe <HR ALIGN= CENTER WIDTH= 100% SIZE= 2 NOSHADE /> 29 Formatação de texto Define-se através das tags: <font...>...</font> A tag font não faz nada sozinho, ela precisa dos atributos: face Tipo (ex. Times New Roman, Arial, etc.) size Tamanho (de 1 [ ~8pt ] a 7 [ ~36pt ]) color Cor (nome em inglês ou cor RGB em hexadecimal) Exemplo: <font face= Arial size= 3 color= #800000 > Texto formatado </font> Visualização: Texto Formatado Tag em desuso após a adotar CSS! 30
Quebra de Linha Define com a tag <br /> a quebra de linha entre informações. Tag de presença que pode ser usada em qualquer lugar do códigofonte. Exemplo: Texto na parte Superior <br />Texto do meio<br />Texto na parte Inferior. Visualização: Texto na parte Superior Texto do meio Texto na parte Inferior. 31 Formatação Básica no texto <b>...</b> <i>...</i> <u>...</u> <s>...</s> Negrito (Bold) Itálico (Italic) Sublinhado (Underline) Riscado (Strike) Exemplo: <b>negrito</b><br /> <i>itálico</i><br /> <u>sublinhado</u><br /> <s>riscado</s><br /> 32
Acrônimo Palavra formada com as letras ou sílabas iniciais de uma sequência de palavras, pronunciada sem soletração. <acronym title= X >Y</acronym> A tagacronym mapeia a informação Y, mostrando o texto X em uma caixa flutuante descrito pelo atributo title quando sobrevoa o mouse por cima dela. Exemplo: <acronym title= Instituto Federal de Educação, Ciência e Tecnologia do Sertão Pernambucano >IF Sertão-PE</acronym> Visualização: 33 Centralização Tags que delimita as informações e/ou estruturas que serão centralizadas na visualização. Exemplo: <center>texto</center> <center>...<img src=... />...</center> 34
Aumento e Diminuição de tamanho Para aumentar o tamanho do texto, deve inserir o texto a ser aumentado entre as tags: <big>...</big> Quanto mais tags cercar o texto, maior ele ficará. <big><big><big>...</big></big></big> Já para diminuir, deve usar: <small>...</small> Quanto mais tags cercar o texto, menor ele ficará <small><small>...</small></small> 35 Margens laterais Proporciona uma margem lateral, tanto do lado esquerdo, quanto do lado direito. O par de tags consiste em: <blockquote>...</blockquote> Quanto mais tags cercar o texto, maior será a margem. <blockquote><blockquote>...</blockquote></blockquote> 36
Efeito pisca em texto Consiste em um par de tags que ao cercar um texto, faz com que este texto fique piscando. <blink>...</blink> Vale salientar que este par de tags não funciona nos navegadores Microsoft Internet Explorer e Google Chrome. 37 Letreiro Eletrônico Par de tags que demarcam textos e/ou imagens fazendoos deslocar de um ponto a outro da tela. <marquee...>...</marquee> Os principais atributos são: width largura da área de deslocamento. Os valores podem ser em pixels ou em porcentagem. height altura da área de deslocamento. Os valores podem ser em pixels ou em porcentagem. direction define a direção do deslocamento. Os valores podem ser: left (da esquerda para a direita); e right (da direita para esquerda. 38
Letreiro Eletrônico Outros atributos da tag marquee são: behavior indica como o conteúdo irá deslocar. Os valores são: scroll (após deslocar todo o percurso, reinicia do ponto de partida). slide (no final, o conteúdo paralisa após deslocar todo o percurso). alternate (o conteúdo fica indo e voltando dentro da área de deslocamento). 39 Comentários Tags que iniciam e finalizam um determinado texto apenas comentado no código-fonte, fazendo com que o interpretador despreze-o. Exemplo: Texto interpretado <!-- Texto comentado --> Texto interpretado 40
Tabela de Acentuações e Caracteres Especiais 1 de 2 Corresponde a um espaço. 41 Tabela de Acentuações e Caracteres Especiais 2 de 2 42
Listas São estruturas de informações unidimensionais. Serão trabalhados dois tipos de listas: Lista Desordenada (Unordened List UL) Lista Ordenada (Ordened List OL) Lista de Definição (Definition List DL) 43 Lista Desordenada (Unordened List) Não apresenta uma ordenação, simplesmente são relatadas os itens delas. Uma lista contém um conjunto de informações transcritas em itens, portanto precisa delimitála, por isso as tags são: <ul> e </ul>. O item da lista é representado pelo marcador da informação através da tag <li />. Existe o atributo type que consiste no formato do marcador do item. Para listas desordenadas, os valores deste atributo são: disc (círculo preenchido padrão) circle (círculo oco) square (quadrado preenchido) Exemplo: <ul type= square > <li />Primeiro Item <li />Segundo Item... <li />Enésimo Item </ul> 44
Lista Ordenada (Ordened List) Diferente da lista anterior, as Listas Ordenadas apresentam uma ordenação, através dos seus marcadores. A representação das tags são: <ol> e </ol>. O item da lista é representado pelo marcador da informação através da tag <li />, semelhante ao item da lista desordenada. O atributo type que consiste no formato do marcador do item. Para listas ordenadas, os valores deste atributo são: 1 (algarismo arábico padrão) A (alfabeto maiúsculo) a (alfabeto minúsculo) I (algarismo romano maiúsculo) i (algarismo romano minúsculo) Exemplo: <ol type= A > </ol> <li />Primeiro Item <li />Segundo Item... <li />Enésimo Item 45 Lista de Definição (Definition List) Consiste uma lista estruturada em termos e descrições. Pode ser aplicada, por exemplo, como uma estrutura de dicionário. As tags de delimitação da lista são <dl>...</dl>. Esta lista é composta por termos e descrições. As tags do termo são <dt>...</dt>, que vem de definition term; e as tags da descrição são <dd>...</dd>, que vem de definition data. Exemplo: <dl> <dt>termo 1</dt> <dd>descrição 1</dd> <dt>termo 2</dt> <dd>descrição 2</dd> <dt>termo 3</dt> <dd>descrição 3</dd> </dl> 46
Imagens Através de uma tag de presença, podemos apresentar uma imagem. A tag de imagem é<img... />, mas ela sozinha não representa nada. Ela deve estar sempre acompanhada do atributo src, que indica o caminho até o arquivo de imagem. Outros atributos também são apresentados: width largura da imagem (em pixels) height altura da imagem (em pixels) Exemplo: <img src= figura.jpg width= 400 height= 250 /> Se definir somente largura OU altura, a outra medida irá ser redimensionada de forma proporcional, mas se definir explicitamente as duas medidas, ou seja, largura E altura, então a imagem poderá ser esticada, distorcendo a imagem. 47 Navegação Os documentos em HTML somente com conteúdo não compõem a estrutura lógica da Internet. É necessário interligar os documentos. Existem três tipos de navegação: Para outro documento; Para uma âncora destino no mesmo documento; e Para uma âncora destino de outro documento. 48
Navegação Para outro documento Através das tags <a...>...</a> podemos marcar um conteúdo como um link (âncora). O atributo href torna-se obrigatório para identificar o destino, ou seja, qual documento HTML irá abrir. Exemplo: <a href= outrodoc.html >Outro documento</a> 49 Navegação Para uma âncora destino no mesmo documento Deve mapear uma área receptora através da tag e atributo: <a name= nome_destino ></a> No link, que está no mesmo documento da área receptora, deverá colocar a seguinte tag e atributo: <a href= #nome_destino >...</a> O símbolo # identifica uma área receptora mapeada. 50
Navegação Para uma âncora destino de outro documento Semelhante ao slide anterior, a diferença é que no link deve acrescentar o nome do arquivo antes da área receptora mapeada. <a href= arquivo.html#nome_destino >...</a> Mantém o mapeamento da área receptora idêntica ao slide anterior. 51 Atividade Criar os seguintes documentos HTML: index.html documento1.html documento2.html Nos três arquivos acrescente o Título (Site Teste) e três links (para cada documento acima) e uma linha horizontal. Depois da linha horizontal, acrescente um subtítulo, alguns parágrafos e/ou listas e, pelo menos, uma imagem. 52
Atividade 2 Faça um documento HTML contendo uma lista de palavras com links de navegação para o mesmo documento. Obs.: Se quiser, aproveite a idéia de fazer um índice ou dicionário. Link 1 Link 2 Link 1 Blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá. Topo Link 2 Nono nononon nono nono no non on o no no no n on o nononono nononon ononono nonono nonono. Topo 53