Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Tamanho: px

Começar a partir da página:

Download "Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira"

Kléber Teves Ribas
8 Há anos
Visualizações:

1 Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam a formatação do texto. Estes documentos também podem conter imagens, sons, vídeo, código de programação e links para outros documentos. As páginas são codificadas na linguagem HTML, usando-se um editor de texto comum ou um programa específico para a produção de páginas. As páginas são interpretadas por um browser ou navegador, sendo o código HTML independente de plataforma de hardware ou software. Introdução à HTML 2 A Linguagem HTML Estrutura de uma Página HTML = Hypertext Markup Language A HTML não é uma linguagem de programação, mas sim uma linguagem especializada para a formatação de texto. O texto produzido fica entre símbolos especiais, denominados tags, que indicam sua aparência: Uma tag tem o seguinte formato: <nome da tag>texto de Exemplo</nome da tag> A grande maioria das tags ocorre aos pares, delimitando o texto a ser formatado, podendo ocorrer aninhamento de tags. Introdução à HTML 3 Uma página HTML tem a seguinte estrutura básica: <html> <head> <title>título da página</title> </head> <body> <p>este é o primeiro parágrafo do texto.</p> <p>este é o segundo parágrafo.</p> </body> </html> Introdução à HTML 4

Estes documentos também podem conter imagens, sons, vídeo, código de programação e links para outros documentos.

2 Cabeçalhos Parágrafos Os cabeçalhos servem para marcar visualmente o início de um tópico no texto. Podem apresentar seis tamanhos: H1, H2, H3,, H6 Exemplo: <h1>cabeçalho de nível 1</h1> <p>esta é a seção principal do documento. <h2>cabeçalho de nível 2</h2> <p>esta é uma sub-seção. Espaços e quebras de linha não tem significado em HTML. Ao serem interpretados, são substituídos por um espaço simples. Portanto, é preciso forçar um início de parágrafo, usando a tag: <P> Para quebras de linha, sem acrescentar uma linha em branco, usa-se: <BR> Para inserir uma linha horizontal: <HR> Introdução à HTML 5 Introdução à HTML 6 Formatação de Caracteres Formatação de Caracteres Os comandos de formatação de texto são todos do tipo liga/desliga. Os principais são (formatação física): Negrito <B>texto</B> (bold) Itálico <I>texto</I> Sublinhado <U>texto</U> (underline) Tamanho fixo <TT>texto</TT> (typewriter) Sobrescrito <SUP>texto</SUP> (superscript) Subscrito <SUB>texto</SUB> Piscante <BLINK>texto</BLINK> Também é possível usar formatação lógica para o texto: Ênfase <EM>...</EM> (itálico) Mais ênfase <STRONG>...</STRONG> (negrito) Tamanho grande <BIG>...</BIG> Tamanho pequeno <SMALL>...</SMALL> Código <CODE>...<CODE> (tamanho fixo) Introdução à HTML 7 Introdução à HTML 8

Espaços e quebras de linha não tem significado em HTML. Ao serem interpretados, são substituídos por um espaço simples.

3 Formatação de Caracteres Listas É possível fazer com que o texto apareça na tela exatamente como foi digitado (texto pré-formatado). A tag é: <PRE> </PRE> Também se pode alterar o tipo da fonte: <FONT SIZE=n FACE=nome COLOR=cor> </FONT> Listas Não-ordenadas Ordenadas de Definição Listas Não-ordenadas (Unnumbered lists) <H2>Exemplo de lista não-ordenada</h2> <UL> <LI>Primeiro item <LI>Segundo item </UL> Introdução à HTML 9 Introdução à HTML 10 Listas Listas Listas Ordenadas (Ordered lists) <H3>Exemplo de lista ordenada</h3> <OL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </OL> Listas Aninhadas <B>Listas aninhadas</b> <UL> <LI>Item 1 <LI>Item 2 <UL> <LI>Item 2.1 <LI>Item 2.2 </UL> <LI>Item 3 </UL> Introdução à HTML 11 Introdução à HTML 12

lists) <H2>Exemplo de lista não-ordenada</h2> <UL> <LI>Primeiro item <LI>Segundo item </UL> Introdução à HTML 9 Introdução à HTML 10 Listas Listas Listas Ordenadas (Ordered lists)

4 Links Links para outras páginas Links para a mesma página Para estabelecer um link para a mesma página, é preciso inicialmente criar uma âncora, ou seja, um ponto de referência que será apontado pelo link. A sintaxe é a seguinte: <A NAME= #Nome da âncora >Texto em destaque</a> Quando a página está na mesmo servidor, mas em outro arquivo: <A HREF= intro.htm >Introdução</A> <A HREF= conceitos.htm#parte2 >Conceitos Básicos</A> <A HREF= biblio/refer.htm >Referências</A> Para criar o link, usa-se a tag HREF para especificar o nome da âncora que se quer acessar. Assim: <A HREF= #Nome da âncora >Texto usado como hipertexto</a> Quando a página está em outro servidor (na Internet): <A HREF= >Curso de Especialização em Análise de Sistemas</A> <A HREF= > Professores</A> Introdução à HTML 13 Introdução à HTML 14 Imagens Cores e Padrões de Fundo Formato: geralmente GIF, JPEG ou PNG. A sintaxe básica para incluir uma imagem na página é: <IMG SRC= arquivo.gif > Pode-se também especificar o alinhamento: <IMG ALiGN= top/middle/bottom SRC= paisagem.jpg > É possível determinar a altura e largura da imagem: <IMG SRC= arquivo.gif HEIGHT=100 WIDTH=165> Uma imagem também pode funcionar como um link: <A HREF= livro-bd.htm > <IMG SRC= korth.gif > </A> É possível alterar a forma padrão com que os browsers mostram o texto e seus links, usando alguns atributos da tag <BODY>. As cores são representadas por um código RGB (red/green/ blue), de seis dígitos, em base hexadecimal. Exemplo: <BODY BGCOLOR=# TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000> Também é possível especificar uma imagem como fundo de tela: <BODY BACKGROUND= marmore.gif > Introdução à HTML 15 Introdução à HTML 16

htm#parte2 >Conceitos Básicos</A> <A HREF= biblio/refer.htm >Referências</A> Para criar o link, usa-se a tag HREF para especificar o nome da âncora que se quer acessar.

5 Endereços e Rodapé de página Tabelas Geralmente, o final de uma página é utilizado para identificar seu autor, informar a data de criação e para fornecer algum tipo de endereço de contato. As tabelas servem para a apresentação de informação de forma tabular, porém são também um poderoso recurso para a definição do layout de uma página HTML. Para este fim, existe a tag <ADDRESS> : <ADDRESS> Última atualização em 12-Maio-1999 Criada por <A HREF= mailto:webmaster@ufma.br >webmaster</a> </ADDRESS> Principais tags: <TABLE> <CAPTION> <TR> (table row) <TD> (table data) <TH> (table header) Inicia a definição de uma tabela Cria uma legenda para a tabela Cria uma linha da tabela (uma tag deste tipo para cada linha) Define o conteúdo de uma célula da tabela Como <TD>, só que o texto é exibido em negrito e centralizado Introdução à HTML 17 Introdução à HTML 18 Tabelas Frames Alguns atributos: ALIGN VALIGN COLSPAN ROWSPAN BORDER WIDTH Define o alinhamento horizontal da célula Define o alinhamento vertical da célula Indica quantas colunas da tabela a célula deve ocupar Indica quantas linhas a célula deve ocupar Usada em <TABLE>, define a largura da borda da tabela. O valor 0 indica ausência de borda. Define a largura da tabela (percentual ou absoluta) Introdução à HTML 19 Os frames (molduras) permitem apresentar mais de uma página HTML na tela, simultaneamente. É necessário, inicialmente, criar um documento especial que contém as definições de todas as janelas: <FRAMESET COLS=tamanho FRAMEBORDER=1/0 FRAMESPACING=espaçamento ROWS=tamanho> <FRAME NAME=nome SCROLLING=yes/no NORESIZE SRC=endereço> </FRAMESET> Introdução à HTML 20

Para este fim, existe a tag <ADDRESS> : <ADDRESS> Última atualização em 12-Maio-1999 Criada por <A HREF= mailto:webmaster@ufma.

6 Frames - Exemplo Frames - Exemplo Arquivo de definição: <HTML> <FRAMESET COLS=30%, * > <FRAME NAME= menu SRC= indice.htm > <FRAME NAME= texto > </FRAMESET> </HTML> Arquivo de índice: <HTML> <HEAD><TITLE>Menu Principal</TITLE> <BASE TARGET= texto > </HEAD> <BODY> </BODY> </HTML> Introdução à HTML 21 Introdução à HTML 22

htm > <FRAME NAME= texto > </FRAMESET> </HTML> Arquivo de índice: <HTML>

Documentos relacionados

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;