Linguagem HTML 33
Pré-visualização2 páginas
Linguagem HTML Ivanethe Carvalho Rocha. Linguagem HTML \u2022 Abreviação para Hyper Text Markup Language, traduzindo Linguagem de Marcação de HiperTexto \u2022 Desenvolvida com objetivos de divulgação, depois ganhou status público \u2022 Definida formalmente na década de 1990 \u2022 Sua versão mais atual está centrada no desenvolvimento do XHTML , uma junção com XML. Linguagem HTML \u2022 HyperTexto \u2022 É 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 \u2022 Tags (Etiquetas) \u25ab Os documentos escritos em HTML são marcados por etiquetas, mais conhecidas com tags. \u25ab São palavras ou caracteres entre os sinais de <>. \u25ab Elas informam ao browser a estrutura e o significado do texto. \u25ab São usadas para dizer qual texto é título, parágrafo e assim por diante. \u25ab Ex: \uf096 quebra de linha: é um exemplo de elemento solitário: <br> \uf096 - localização centralizada do texto: é um exemplo de elemento que deve ser encerrado: <center> ... </center> Linguagem HTML \u2022 Estrutura de documento HTML \u25ab 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: \u25ab <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>. \u25ab <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 \u2022 Estrutura de documento HTML \u25ab <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. \u25ab <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 \u2022 Estrutura de documento HTML \u2022 Exemplo: Assim, a estrutura básica de uma página, em ordem de comandos obrigatórios é: \u25ab <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 \u2022Exemplo \u2013 Código Fonte \u25ab <html> \u25ab <head> \u25ab <title>Bar Use a Cabeça</title> \u25ab </head> \u25ab <body> \u25ab <h1>Bem-vindos ao Bar Use a Cabeça</h1> \u25ab <img src="drinks.gif"> \u25ab <p> \u25ab Junte-se a nós qualquer noite dessas para beber <a ref=\u201dbebidas/ \u25ab elixir.html\u201d>elixires</a> refrescantes, ter um bom papo \u25ab e talvez algumas partidas de <em>Dance Dance Revolution</em>. \u25ab O acesso wireless está sempre disponível; \u25ab TSPSW (Traga Seu Próprio Servidor Web). \u25ab </p> \u25ab <h2>Como chegar</h2> \u25ab <p> \u25ab Você nos encontrará bem no centro da cidade \u25ab de Weblândia. Junte-se a nós! \u25ab </p> \u25ab </body> \u25ab </html> Estrutura de documento HTML \u2022 Corpo: dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página. \u25ab <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) \u25ab <p>: novo parágrafo. \u25ab <br>: quebra de linha. \u25ab <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>.) \u25ab <div>: determina uma divisão na página a qual pode possuir variadas formatações. \u25ab <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto. \u25ab <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente. \u25ab <img>: imagem. \u25ab <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço. \u25ab <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. \u25ab <acronym>: acrônimo (sigla) \u25ab <cite>: citação \u25ab <address>: endereço Estrutura de documento HTML \u2022 A seção BODY \u25ab 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. \u25ab 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\u2019água). Assim temos: Estrutura de documento HTML \u2022 A seção BODY \u2022 <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> \u2022 Onde: \u2022 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) \u2022 TEXT: cor dos textos da página (padrão: preto) \u2022 LINK: cor dos links (padrão: azul) \u2022 ALINK: cor dos links, quando acionados (padrão: vermelho) \u2022 VLINK: cor dos links, depois de visitados (padrão: azul escuro ou roxo) \u2022 BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d\u2019água. Estrutura de documento HTML \u2022 Alinhamento de cabeçalhos \u25ab Os cabeçalhos têm atributos de alinhamento: \uf096 <H2 ALIGN=CENTER>Cabeçalho centralizado</H2> Cabeçalho centralizado \u25ab <H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3> Cabeçalho alinhado à direita. \u25ab <H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4> Cabeçalho alinhado à esquerda (default) Estrutura de documento HTML \u2022 Separadores \u25ab 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. \u25ab Quebra de linha \uf096 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 \u2022 Separadores \u25ab Parágrafos \uf096 Para separar blocos de texto, usamos o elemento <P>. \uf096 Os parágrafos também possuem alinhamentos, assim temos: \u25ab <P ALIGN=CENTER> \u25ab <P ALIGN=RIGHT> \u25ab <P ALIGN=LEFT> Estrutura de documento HTML \u2022 Separadores \u25ab Linha Horizontal \uf096 <HR> insere uma linha horizontal: \uf096 Essa linha tem diversos atributos, oferecendo resultados diversos. \uf096 <HR SIZE=7> insere uma linha de largura 7 (pixels); \uf096 <HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível. \uf096 <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 \u2022 Listas em HTML \u25ab Listas de definição: também chamadas de listas de glossário. \u25ab Possuem a seguinte estrutura. \uf096 <DL> \uf096 <DT>Termo a ser definido \uf096 <DD> Definição \uf096 </DL> \u2022 Ex: \u2022 <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 \u2022 Listas em HTML \u25ab Listas não ordenadas: semelhantes a listas com marcadores. \u25ab Possuem a seguinte estrutura. \uf096 <UL> \uf096 <LI>Termo a ser definido \uf096 <LI> Definição \uf096 </UL> \u2022 Ex: <ul> <li>Banco de dados</li> <li>Redes</li> </ul> \uf096 Resultado \uf096 Banco de dados \uf096 Redes Estrutura de documento HTML \u2022 Listas em HTML \u25ab Listas ordenadas: é também uma lista de itens. \u25ab Possuem a seguinte estrutura. \uf096 <OL> \uf096 <LI>Item1 \uf096 <LI> Item2 \uf096 </OL> \u2022 Ex: <ul> <li>Banco de dados</li> <li>Redes</li> </ul> \uf096 Resultado 1 Banco de dados 2 Redes Estrutura de documento HTML \u2022 Exemplos de listas ordenadas \u2022 <h4>Lista
- 1
- 2