Construção HTML

Construção de páginas web
Sistemas de Informação

HTML
• Hiper Text Markup Language – é a linguagem de marcação
de hipertexto.
• O HTML (HyperText Markup Language) é um conjunto
estruturado de instruções, conhecidas por etiquetas ou tags
(em inglês), que dizem a um browser como publicar uma
página web, ou seja, o browser interpreta essas etiquetas e
desenha a página no ecrã. Estes conjuntos de instruções
estão agrupados em ficheiros de tipo texto, i.e., sem qualquer
tipo especial de formatação.
Prof.
Sérgio
Queirós
2

HTML - HyperText Markup Language
• Linguagem simples baseada em hipertexto.
• Utiliza marcadores ou tags.
• Linguagem em que são escritas as páginas web (interpretada
pelo navegador/browser)

O Código HTML
• Formata os documentos no sentido de definir onde e com
que aspecto é apresentada a informação.
• É feito em ficheiros de texto simples, como por exemplo o
Bloco de Notas.
• No Internet Explorer, podemos visualizar o código HTML, no
menu VER > Código fonte.
4

O Código HTML
• Entre os elementos mais comuns que aparecem no corpo de
uma página temos os seguintes:
• Parágrafos de texto (texto simples, texto formatado, texto
artístico (ex: wordart)
• Tabelas
• Links ou Hiperlinks (ligações no mesmo documento ou a outros
documentos ou sites)
• Imagens, animações gráficas, vídeo, som, etc.
5

Significados
• Hipertexto: texto com ligações a outro texto.
• Markup: Código baseado em marcas ou etiquetas (tags em
inglês)
• A maior parte das linguagens de programação utiliza expressões
em inglês.
6

Tipos de sites
• Hoje em dia, temos dois tipos distintos de Web sites:
• Web sites estáticos: compostos por páginas ou documentos
HTML.
• Web sites dinâmicos: são constituídos por páginas em HTML ou
DHTML (Dynamic HTML) ou outra linguagem como por exemplo
Java, Java script, ASP-Active Server Pages, PHP- Personal Home
Page ext.
7

Requisitos para desenvolvimento de
uma página WEB
• Conhecer a linguagem HTML para escrever o código fonte de
uma página;
• Possuir um Editor de texto para criar o código fonte (bloco de
notas, FrontPage, Dremweaver, NotePAd++entre outros);
• Um navegador de internet (browser) para visualizar as páginas
(IE, Mozila, etc.)
Prof.
Sérgio
Queirós
8

Tag´s
• Os comandos HTML são chamados de TAG´s, compreendem
marcas padrões que são utilizadas para fazer indicações a um
browser
• Os comandos tem uma sintaxe própria, e seguem algumas
regras:
• As TAG´s aparecem sempre entre sinais de “menor que” (<) e
“maior que” (>);
• Geralmente são utilizadas aos pares, sendo que a TAG de
finalização de um comando qualquer é finalizada sempre com
a precedência de uma barra (/).
Exemplo <NOMEDATAG></NOMEDATAG>
Prof.
Sérgio
Queirós
9

Estrutura Básica de um Documento em
HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
A minha Primeira Página Html
</body>
</html>
É uma instrução, que deve ser sempre a primeira a
aparecer numa página HTML, para indicar ao browser
qual a versão da linguagem em que a página esta
escrita.

Estrutura Básica de um Documento em
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head
<body>
Primeira Página
</body>
</html>
TAG O QUE FAZ
<html>
Marca o início e o fim do documento HTML. Com ele iniciamos e
finalizamos a construção da página Web.
<head>
Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos
cabeçalhos e o título da página
<title>
Marca o início e o fim do título do cabeçalho. O título da página aparecerá
na barra superior do browser.
<body> Marca o início e o fim do do corpo da página

Formatação de Texto
• <FONT> - Permite mudar os parâmetros dos textos escritos. Ex:
tamanho, cor e tipo de letra.
<HTML>
<BODY>
<FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste
</FONT>
</BODY>
</HTML>

Atributos do <BODY>
• Entre <body> e </body> fica tudo o que são
configurações e informações da página. Nesta
TAG podemos ainda acrescentar parâmetros
como:
• <body bgcolor=“…”> para definir uma cor de fundo
para a página. Entre as aspas coloca-se o código da cor.
• <body background=“…”> para definir uma imagem de
fundo para a página. Entre aspas coloca-se o nome
completo (nome e extensão, ex:fundo.jpg) ou o
caminho para o ficheiro. 13

Atributos do <BODY>
• <body text=“…”> para definir uma cor do texto para a
página. Entre as aspas coloca-se o código da cor ou o
nome em inglês.
• <body link=“…”> para definir a cor dos links na página.
Convém que os links sejam de cor diferente do resto
do texto para se diferenciar.
• <body vlink=“…”>para definir a cor dos links que já
foram visitados. Convém que os links sejam de cor
diferente do resto do texto para se diferenciar.
14

Atributos do <BODY>
• Quando definimos uma cor pelo nome por exemplo Azul.
• <body bgcolor=“blue”>
• Podemos escurecer a tonalidade.
• <body bgcolor=“darkblue”>
• Podemos iluminar (aclarar) a tonalidade.
• <body bgcolor=“lightblue”>
15

Exemplo
<html>
<head>
<title> A minha primeira página </title>
</head>
<body bgcolor=“blue”>
</body>
</html>
16

Tamanho da letra
Os títulos implicam também uma separação em parágrafos, portanto,
tudo o que for escrito dentro de <h1> e </h1> (ou qualquer outro
títulos ) será colocado em um parágrafo independente.
Podemos ver como se apresentam alguns títulos a seguir:
<html>
<head>
<title>Todos os cabeçalhos</title>
</head>
<body>
<h1> Isto é um título de 1º nível </h1>
<h4> Isto é um título de nível 4</h4>
</body>
</html> 17

Formatação dos títulos
Os títulos podem ser alinhados ao Centro, direita ou esquerda.
<h1 Align=Center>Isto é um título de 1ºnível e centrado </h1>
<h4> Align=Right> Isto é um título de 4ºnível e alinhado à direita </h4>
<h4> Align=left> Isto é um título de 4ºnível e alinhado à direita </h4>
18

Formatação de Texto
Alterar o estilo do texto escrito:
• <I> </I> - para colocar o texto em itálico.
• <B></B> - para colocar o texto em negrito.
• <U></U> - para sublinhar o texto.
• <S></S> - para riscar o texto.
<HTML>
<BODY>
<I> Texto em itálico </I>
<B>Texo em negrito </B>
<U>Texto sublinhado </U>
<S> Texto riscado </S>
</BODY>
</HTML>

FORMATAÇÃO DA COR
A cor do texto pode ser definida através do atributo
cor. Cada cor é por sua vez definida por um número
hexadecimal que está composto por três partes.
Cada uma destas partes representa a contribuição do
vermelho, verde e azul sistema RGB.
Por outro lado é possível definir de uma maneira
imediata algumas das cores mais utilizadas.
20

Cores
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
21

Parágrafos
• <P> - Inserir um parágrafo.
A tag final é opcional.
<HTML>
<BODY>
<P><FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”>
isto é um teste </FONT></P>
E isto já é outro teste
</BODY>
</HTML>

Mudança de Linha
• <BR> - Efectua a mudança de linha. Funciona como
um “Enter” no mesmo parágrafo.
Não possui tag final.
<HTML>
<BODY>
<P><FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”>
isto é um teste </FONT></P>
e isto <BR> já <BR> outro teste
</BODY>
</HTML>

Linha Horizontal
• <HR> - Cria uma linha horizontal.
Não possui tag final.

Listas
• <UL> </UL> - Cria listas não ordenadas;
• <OL></OL> - Cria listas ordenadas;
• <LI></LI> - Cria os tópicos das listas.
<HTML>
<BODY>
<UL> Disciplinas
<LI> Português </LI>
<LI> Matemática</LI>
<LI> Inglês</LI>
<LI> Filosofia</LI>
</UL>
</BODY>
</HTML>

Tabelas
• <TABLE></TABLE> - Cria uma tabela.
• <TR></TR> - Define as linhas.
• <TD></TD> - Define as colunas dessa mesma linha.
<HTML>
<BODY>
<TABLE BORDER=”1”>
<TR>
<TD> Esta é a primeira linha, primeira coluna </TD>
<TD> Esta é a primeira linha, segunda coluna </TD>
</TR>
<TR>
<TD> Esta é a segunda linha, primeira coluna </TD>
<TD> Esta é a segunda linha, segunda coluna </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Comentários
• <!— —> - Permite introduzir comentários no código.
É muito útil, quando o código HTML é muito
extenso uma vez que permite comentar o que
está criado em vários pontos do script.
<HTML>
<BODY>

isto sim, já aparece no browser
</BODY>
</HTML>

Hiperligações
• <A> </A> - Cria uma hiperligação para outra página.
<HTML>
<BODY>
<A HREF=”outrapagina.html”>Consultar outra página</A>
</BODY>
</HTML>

Inserção de Imagem
• <IMG> - Permite mostrar uma imagem no browser.
<HTML>
<BODY>
<IMG SRC=”nomedaimagem.gif”>
</BODY>
</HTML>
Caso a imagem esteja num directório diferente da do documento, é
necessário indicar o directório através de "../nome_do_diretório".
Ex:
<IMG SRC="../figuras/carta.gif">

Estrutura básica do HTML
<HTML></HTML> Inicializa/finaliza uma página.
<HEAD></HEAD> Inicializa/finaliza o cabeçalho.
<TITLE> </TITLE> Define o título da sua página na
barra de título do Browser.
<BODY></BODY> Inicializa/finaliza o corpo da
página.
<P> Define o início do parágrafo.
Pode ou não ter par com </P>
(é opcional).

Formatação de Textos
<Hn> Texto </Hn> Cria cabeçalhos com diferentes
formatações (onde n vai de 1 à 6).
<BR> Realiza a quebra de linha.
<HR> Cria uma linha horizontal.
<B> Texto </B> Texto em negrito.
<I> Texto </I> Texto em itálico.
<U> Texto </U> Texto sublinhado.
<S> Texto </S> Texto riscado.

Listas
<UL> </UL> Cria listas não ordenadas.
<OL> </OL> Cria listas ordenadas.
<LI> </LI> Cria os tópicos das listas.

Tabelas
<TABLE border=“1”>
</TABLE>
Cria uma tabela.
<TR> </TR> Define as linhas.
<TD> </TD> Define as colunas.

Outros
<IMG
src=“../figuras/carta.gif”>
Insere uma imagem. Não
possui tag final.
<A> </A> Insere uma hiperligação.
<!– Isto é um comentário--> Insere um comentário.

Construção HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Construção HTML

Semelhante a Construção HTML (20)

Construção HTML