31 pág.
Denunciar
Pré-visualização | Página 1 de 2
Linguagem HTML Ivanethe Carvalho Rocha. Linguagem HTML • Abreviação para Hyper Text Markup Language, traduzindo Linguagem de Marcação de HiperTexto • Desenvolvida com objetivos de divulgação, depois ganhou status público • Definida formalmente na década de 1990 • Sua versão mais atual está centrada no desenvolvimento do XHTML , uma junção com XML. Linguagem HTML • HyperTexto • É o termo que remete a um texto em formato digital, ao qual agrega-se outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links. Linguagem HTML • Tags (Etiquetas) ▫ Os documentos escritos em HTML são marcados por etiquetas, mais conhecidas com tags. ▫ São palavras ou caracteres entre os sinais de <>. ▫ Elas informam ao browser a estrutura e o significado do texto. ▫ São usadas para dizer qual texto é título, parágrafo e assim por diante. ▫ Ex: quebra de linha: é um exemplo de elemento solitário: <br> - localização centralizada do texto: é um exemplo de elemento que deve ser encerrado: <center> ... </center> Linguagem HTML • Estrutura de documento HTML ▫ Todo arquivo HTML obrigatoriamente contém alguns comandos que identificam aquele texto como uma home page para o navegador. Assim, as páginas em HTML possuem uma anatomia fixa, devendo conter obrigatoriamente os seguintes tags: ▫ <html> e </html> - Determinam início e fim do documento HTML. <html> diz ao browser para iniciar um novo documento HTML cujo conteúdo se encontra definido entre esse local e a etiqueta de fim do documento, que é </html>. ▫ <head> e </head> - Definem o cabeçalho. Esta informação não é apresentada graficamente mas dá indicações importantes a respeito daquilo que a página contém e sobre a forma como ela deve ser apresentada. Linguagem HTML • Estrutura de documento HTML ▫ <title> e </title> - Contém o título da página, ou seja, o nome da janela que irá aparecer na barra superior do navegador. ▫ <body> e </body> - Define tudo aquilo que o navegador deve apresentar graficamente. Todos os arquivos, textos, sons deverão estar entre estes elementos. Linguagem HTML • Estrutura de documento HTML • Exemplo: Assim, a estrutura básica de uma página, em ordem de comandos obrigatórios é: ▫ <html> <head> <title> Entre <title> e </title> deve ser digitado o título da página. </title> </head> <body> Entre <body> e </body> devem ser colocados todos os textos, figuras e sons da página. </body> </html> Linguagem HTML •Exemplo – Código Fonte ▫ <html> ▫ <head> ▫ <title>Bar Use a Cabeça</title> ▫ </head> ▫ <body> ▫ <h1>Bem-vindos ao Bar Use a Cabeça</h1> ▫ <img src="drinks.gif"> ▫ <p> ▫ Junte-se a nós qualquer noite dessas para beber <a ref=”bebidas/ ▫ elixir.html”>elixires</a> refrescantes, ter um bom papo ▫ e talvez algumas partidas de <em>Dance Dance Revolution</em>. ▫ O acesso wireless está sempre disponível; ▫ TSPSW (Traga Seu Próprio Servidor Web). ▫ </p> ▫ <h2>Como chegar</h2> ▫ <p> ▫ Você nos encontrará bem no centro da cidade ▫ de Weblândia. Junte-se a nós! ▫ </p> ▫ </body> ▫ </html> Estrutura de documento HTML • Corpo: dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página. ▫ <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior sera o tamanho da letra) ▫ <p>: novo parágrafo. ▫ <br>: quebra de linha. ▫ <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.) ▫ <div>: determina uma divisão na página a qual pode possuir variadas formatações. ▫ <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto. ▫ <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente. ▫ <img>: imagem. ▫ <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço. ▫ <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos. ▫ <acronym>: acrônimo (sigla) ▫ <cite>: citação ▫ <address>: endereço Estrutura de documento HTML • A seção BODY ▫ Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. ▫ Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água). Assim temos: Estrutura de documento HTML • A seção BODY • <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> • Onde: • BGCOLOR cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) • TEXT: cor dos textos da página (padrão: preto) • LINK: cor dos links (padrão: azul) • ALINK: cor dos links, quando acionados (padrão: vermelho) • VLINK: cor dos links, depois de visitados (padrão: azul escuro ou roxo) • BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d’água. Estrutura de documento HTML • Alinhamento de cabeçalhos ▫ Os cabeçalhos têm atributos de alinhamento: <H2 ALIGN=CENTER>Cabeçalho centralizado</H2> Cabeçalho centralizado ▫ <H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3> Cabeçalho alinhado à direita. ▫ <H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4> Cabeçalho alinhado à esquerda (default) Estrutura de documento HTML • Separadores ▫ As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores. ▫ Quebra de linha Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. Estrutura de documento HTML • Separadores ▫ Parágrafos Para separar blocos de texto, usamos o elemento <P>. Os parágrafos também possuem alinhamentos, assim temos: ▫ <P ALIGN=CENTER> ▫ <P ALIGN=RIGHT> ▫ <P ALIGN=LEFT> Estrutura de documento HTML • Separadores ▫ Linha Horizontal <HR> insere uma linha horizontal: Essa linha tem diversos atributos, oferecendo resultados diversos. <HR SIZE=7> insere uma linha de largura 7 (pixels); <HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível. <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional: Estrutura de documento HTML • Listas em HTML ▫ Listas de definição: também chamadas de listas de glossário. ▫ Possuem a seguinte estrutura. <DL> <DT>Termo a ser definido <DD> Definição </DL> • Ex: • <dl> <dt>Banco de dados</dt> <dd>Conjunto de resgistros dispostos de maneira regular </dd> <dt>Redes de computadores</dt> <dd>Dois ou mais dispositivos conectados entre si</dd> </dl> Estrutura de documento HTML • Listas em HTML ▫ Listas não ordenadas: semelhantes a listas com marcadores. ▫ Possuem a seguinte estrutura. <UL> <LI>Termo a ser definido <LI> Definição </UL> • Ex: <ul> <li>Banco de dados</li> <li>Redes</li> </ul> Resultado Banco de dados Redes Estrutura de documento HTML • Listas em HTML ▫ Listas ordenadas: é também uma lista de itens. ▫ Possuem a seguinte estrutura. <OL> <LI>Item1 <LI> Item2 </OL> • Ex: <ul> <li>Banco de dados</li> <li>Redes</li> </ul> Resultado 1 Banco de dados 2 Redes Estrutura de documento HTML • Exemplos de listas ordenadas • <h4>Lista