Baixe o app para aproveitar ainda mais
Prévia do material em texto
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>Listanumerada:</h4> <ol> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> • <h4>Lista com letras:</h4> <ol type="A"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> Estrutura de documento HTML• Exemplos de listas ordenadas <h4>Lista com letras minúsculas:</h4> <ol type="a"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> • <h4>Lista com números romanos:</h4> <ol type="I"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> • <h4>Lista com números romanos minúsculos:</h4> <ol type="i"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> Estrutura de documento HTML • Exemplos de listas não ordenadas • <h4>Lista de bullets de disco:</h4> <ul type="disc"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> • <h4>Lista de bullets de círculo:</h4> <ul type="circle"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> • <h4>Lista de bullets de quadrado:</h4> <ul type="square"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> Estrutura de documento HTML • Formatação de textos • Blocos de texto são permitidas as seguintes tags: • <PRE> ▫ Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações. ▫ Ex: ▫ <pre>uma linha aqui, outra ali, etc.</pre> Estrutura de documento HTML • Formatação de textos • <BLOCKQUOTE> ▫ É usado para citações longas. ▫ Ex: ▫ <blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História do Tempo”) Estrutura de documento HTML • Formatação de textos • <ADDRESS> • Usado para formatar endereços e- mail e referências a autores de documentos. • Ex: Envie críticas e sugestões para <address>algumacoisa@aaa.bbb.br </address> Estrutura de documento HTML • CORES • As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos): • Ex.: • <FONT COLOR="#rrggbb">Texto</FON T> Estrutura de documento HTML • Tamanho • A formatação • <FONT SIZE=tamanho_da_letra>Texto</FON T> • O tamanho básico é 3. • Ex: <FONT SIZE=+2>Letra maior</FONT> <FONT SIZE=-2>Letra menor</FONT> • Fontes • <FONT FACE="fonte_da_letra">Texto</FONT > Estrutura de documento HTML • Fontes • <FONT FACE="fonte_da_letra">Texto</FONT > • Ex.: • <FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT> Fonte Verdana azul • <FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT> Fonte Arial verde • <FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT> Fonte Courier New vermelha Links • Possibilidade de fazer ligações de uma região de texto (ou imagem) a um outro documento. • O browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links. • Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: • <A HREF = "arq_destino">âncora</A> Links • Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: • <A HREF = "arq_destino">âncora</A> • Onde: ▫ arq_destino é o URL do documento de destino; ▫ âncora é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Links • Ex: Link para outra página html • <p> Junte-se a nós em qualquer noite dessas para beber <a href="beverages/elixir.html">elixires</a> refrescantes, ter um bom papo e talvez algumas partidas de Dance Dance Revolution. O acesso wireless está sempre disponível; TSPSW (Traga Seu Próprio Servidor Web).</p> Links • Ex: Link com uma imagem para outra página html • <a href="beverages/elixir.html" <img src="images/drinks.gif"> </a>
Compartilhar