Roteiro Desenvolvimento de Aplicações Web Definição Usos Comuns Fundamentos HTML HyperText Markup Language Roberto Vedoato [email protected] HTML - HyperText Markup Language HTML 2 HTML 4 Arquivo html sem marcações A estrutura de documentos a serem apresentados por clientes Web Âncoras e elos para a ligação entre documentos Outros conteúdos a serem incluídos no documento Estrutura básica Elementos de Cabeçalho Elementos de Corpo Exemplo 1 Linguagem de marcação utilizada para implementar hiperdocumentos Define Tags Atributos Seqüências Escape Comentários Imagens, áudio, vídeo, Applets e outras tecnologias. Scripts a serem interpretados pelo navegador Meta-Informações de um documento O código de um documento HTML é texto simples com marcações (tags), mesmo que o navegador exiba outros recursos O texto com as tags só apresenta o efeito desejado quando interpretado e executado em navegadores, caso contrário são exibidas as marcações O navegador identifica um arquivo HTML através de sua extensão (ou tipo MIME enviado pelo servidor) HTML 3 Exemplo 2 Usos Comuns Arquivo html com marcações Estruturação (recomendado) Estruturação e apresentação <Elemento> Texto marcado </Elemento> <p> Parágrafo tal <br> A maioria dos elementos segue uma estrutura hierárquica Podem haver tags aninhadas, ou seja, alguns elementos podem conter outros elementos além do texto marcado, sempre fechando-os em ordem inversa da inserção 6 7 propriedade=valor (sem espaços entre o =) Atributos devem estar necessariamente no descritor inicial, separados por espaços, após o nome do elemento A ordem dos atributos é indiferente Valores que contenham caracteres de espaço devem estar entre aspas ou apostrofes Exemplos <h1> Texto <b>em negrito</b> </h1> HTML Alguns elementos podem ter um ou mais atributos, sendo opcionais ou obrigatórios Há também elementos que não contém texto Existem elementos que não necessitam tag final HTML Atributos A estrutura de um documento HTML é definida por elementos que são marcados exclusivamente por descritores (tags) Cada tag é escrita entre os sinais “<“e “>” A maioria dos elementos possui uma tag inicial (<>) e uma tag final (</>) entre o texto marcado, que passa a ter um comportamento específico, determinado pelo elemento Usa-se a HTML apenas como base para a inclusão de outras tecnologias 5 Tags Usa-se elementos avançados da HTML para determinar os aspectos estéticos Recipiente de conteúdos HTML Estrutura o documento: títulos, listas, parágrafos, etc. Os aspectos estéticos são determinados por Folhas de Estilo <h1 align=center> Título Centralizado </h1> <img src=“logo.jpg” alt=“Logotipo da Empresa”> HTML 8 Seqüências de Escape Alguns caracteres não podem ser exibidos diretamente nos navegadores, sendo necessária a utilização de seqüências de escape Comentários Os comentários em HTML são identificados entre <!-e --> &abreviação; Exemplo Para exibir a palavra Introdução num navegador pode-se escrevê-la assim Introdução Para forçar um espaço em branco no texto usa-se Não é preciso usar seqüências de escape se Os caracteres são do conjunto de caracteres ISO-Latin-1 (alfabeto padrão do HTML) O alfabeto padrão da página não foi alterado por um descritor <meta> ou de um cabeçalho HTTP HTML 9 Estrutura Básica 10 HTML 12 Exemplo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> Título do documento </title> </head> <body> Informações visíveis da página </body> </html> HTML A primeira linha é um descritor SGML que informa que é um documento HTML versão 4.01 O elemento <html> marca o início e fim do documento, contendo obrigatoriamente o cabeçalho (<head>) e o corpo (<body>) do documento HTML 11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE> Meu documento </TITLE> </HEAD> <BODY> <p>Ola Mundo! </BODY> </HTML> Cabeçalho <Head> O cabeçalho contém informações sobre o conteúdo do documento usadas para organização e indexação Nele são descritos Elementos do Cabeçalho <Title> Título do documento Informações sobre o documento (autor, língua) Elementos de Estilos <STYLE> Funções de Script <SCRIPT> Ligações com outros documents <LINK> Atributos que afetam todo o documento Único elemento obrigatório no cabeçalho Contém o título do documento, o qual deve ser curto e descrever o propósito do documento Aparece na barra superior do navegador, nos favoritos, nos menus de avançar e voltar, etc. <Base> Altera os vínculos de origem e destino da janela Através dela, pode-se alterar a URL base para que as imagens e links sejam buscados em outros lugares E fazer com que links abram em outra janela Exemplo Não há informações que serão exibidas na página HTML 13 Elementos de Cabeçalho HTML Usado para vincular uma página a outro recurso <Meta> Usado para incluir meta-informação como palavras-chave, descrições, etc. que podem ser usadas por mecanismos de busca e catalogação A informação adicional é expressa através dos atributos NAME: descreve o tipo de meta-informação CONTENT: descreve o conteúdo da meta-informação Exemplo 14 Corpo <Body> <Link> <BASE HREF="." TARGET="_self"> <!-BASE padrão --> <BASE HREF=" http://www.fcj.com/dados/"> <!-Os links relativos são procurados em http://www.fcj.com/dados/-> <META NAME="Keywords" CONTENT=“fcj, siw, html"> <META NAME="Description" CONTENT="Esta página explica fundamentos de html na disciplina SIW da FCJ”> Onde estão as informações que serão efetivamente apresentadas e formatadas pelo navegador Contém o conteúdo textual do documento Contém os elementos que estruturam o documento Contém os elementos que incluem conteúdos de imagens, sons, vídeo, etc Contém os elementos de formulário Também pode ser usado para adicionar ou redefinir cabeçalhos HTTP pelos atributos HTTP-EQUIV e CONTENT Exemplos <META HTTP-EQUIV="Refresh" CONTENT="10;url=home.html"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso8859-1"> HTML 15 HTML 16 Parágrafo <P> Marca o início de um parágrafo e salta uma linha O descritor de fim é opcional Cabeçalho de Texto <H1> a <H6> <H1> ... </H1> <H2> ... </H2> um novo parágrafo ou um outro elemento de estruturação indicam o fim do parágrafo ... <H6> ... </H6> Espaços e tabulações não alteram o parágrafo Pode ser alterado por atributos ou estilos Pode conter atributos <P align=left>Parágrafo padrão à esquerda </P> <P align=right>Parágrafo à direita </P> HTML Quebra uma linha sem iniciar um novo parágrafo Não existe tag de fechamento Exemplo 18 Bloco Genérico de Seção <DIV> <p> O Rato<br> roeu a roupa<br> do rei de Roma</p> Linha Horizontal <HR> HTML Outros elementos Quebras de linha <BR> Utilizados em títulos principais e seções de texto São apresentados num formato pré-definido (folha de estilo do navegador) Pode ser alterado por atributos ou folhas de estilo 17 Outros elementos Estruturado em 6 níveis Desenha uma linha horizontal proporcional a área de exibição Também não tem descritor final Não podem ser inseridas dentro de um parágrafo Pode ser modificada por atributos. Por exemplo, largura (WIDTH) e altura (SIZE) HTML Citação de Bloco <BLOCKQUOTE> Destaca uma citação num texto, geralmente endentando-a Exige tag de fechamento Texto pré-formatado <PRE> 19 Usado para criar novas seções (divisões lógicas) numa página Possui diversos atributos As seções podem ter aparência diferenciadas através folhas de estilo Faz com que o HTML não ignore espaços, tabulações e novas linhas to texto pré-formatado HTML 20 Listas Listas Não Ordenadas <UL> Toda lista é um elemento de bloco que possui um descritor inicial e final contendo texto, parágrafos ou ainda outras listas aninhadas HTML define três tipos de listas Listas não ordenadas <UL> Listas ordenadas <OL> Listas de definições <DL> Utiliza-se para listar tópicos Cada item da lista é especificado através da tag <LI> <LI> não é exige descritor final <LI> também é usado em Menus e Listas ordenadas <UL> <LI> <LI> ... </UL> HTML 21 Listas Ordenadas <OL> HTML 22 Listas de Definições <DL>, <DT>, <DD> Utiliza-se para listar tópicos numeradas Cada item da lista também é especificado através da tag <LI> As listas e itens podem ter características alteradas (como tipo de marcador, tipo de numeral e início de contagem) através de atributos ou folhas de estilo <UL> Usadas quando há vários tópicos curtos acompanhados de uma definição mais longa (por exemplo, um glossário) <DL> e </DL> que delimitam toda a lista <DT> </DT> que marca o termo <DD> </DD> marca a definição <LI> <LI> ... </UL> HTML 23 HTML 24 Imagens <IMG SRC=“nome_do_arquivo”> Uma âncora é qualquer um dos lados de um vínculo Âncoras e vínculos são definidos em documentos HTML através das Tags e da URI Âncora destino Texto que deve descrever sucintamente a imagem Redimensionamento horizontal e vertical da imagem Há ainda os atributos HSPACE e VSPACE para alterar as margens em pixels ao redor da figura Os atributos podem ser combinados HTML 25 <A NAME=“secao"></A> Âncora origem e vínculo Posição pode ser top, middle ou bottom <IMG SRC=“nome_do_arquivo” HSPACE=tam> <IMG SRC=“nome_do_arquivo” HEIGHT=tam WIDTH=tam> <IMG SRC=“nome_do_arquivo” ALIGN=posição> SRC é um atributo obrigatório contendo o nome do arquivo precedido da URL (absoluta ou relativa) do servidor onde se encontra <IMG SRC=“ nome_do_arquivo” ALT=“texto”> Âncoras e Vínculos Através da tag <A> marca-se o texto ou imagem de origem e indica-se o destino através do atributo HREF <A HREF=“#secao”> nome_do_ vínculo </A> Vínculo a um destino na mesma página <A HREF=“URL”> nome_do_ vínculo </A> Vínculo a um destino externo à página <A HREF=“URL#secao”> nome_do_ vínculo </A> Vínculo a uma seção de um destino externo HTML 26
Download
