Criação de Sites WEB

CEF Operador de Informática – 2018/19 Ana Patrício
O que é o HTML?
• HTML (HyperText Markup Language)
– é uma linguagem de marcação de
hipertexto utilizada para produzir páginas na Web.
• Esta linguagem foi criada para publicação de

conteúdos na web, pode conter texto, imagem,
vídeo, áudio entre outras formas de representação
de conteúdo.
CEF Operador de Informática – 2018/19

Onde está?
• Aquilo que vemos quando abrimos uma página
da Internet é a interpretação que browser faz
do HTML.
• Para visualizar o
código HTML de uma
página

O que é necessário?
• Para construirmos páginas
Web
– Um browser (Google Chorme
ou Internet Explorer)
– Um editor de texto (Bloco de

notas ou WordPad)

Resumindo …
• O HTML é
– Uma linguagem simples baseada em hipertexto.
– Que utiliza marcadores ou tags.
– Utilizada para criar documentos para a Web.

Estrutura básica de um documento em
HTML
<HTML>
<BODY>
Conteúdo da página: textos,

figuras, tabelas, …
</BODY>
</HTML>

Tags
 Tags são os códigos necessários para construção de páginas
eletrônicas.
 Tags Normais
 Devem envolver um texto, tendo início e fim;
 Característica de início de tag: “<“;
 Característica de fim de tag “>”, juntamente com “/”;
 <html> ... </html>
 Tags Simples
 Não devem envolver um texto;
 Característica de início de tag: “<“;
 Característica de fim de tag “>”, juntamente com “/”;
 <br />

Tags
• São marcas padrões utilizadas para dar todas
as indicações necessárias ao browser.
• São delimitadas pelos sinais de < e >:

<NomeDaTag>
• Na sua maioria, são do tipo início-fim, ou seja
trabalham em pares, delimitando um
determinado conteúdo.

Tags
• A tag final é idêntica à inicial sendo precedida

por uma “/”.
<NomeDaTag> …. </NomeDaTag>

HTML
<html>
<head>
<title>Título</title>
</head>
<body>
Conteúdo do documento
</body>
</html>

HTML
• <HTML></HTML> - Indica o início e o fim do
documento.
• <BODY></BODY> - Indica o corpo do documento.

Entre estas marcas estará contida a maior parte do
conteúdo a ser apresentado, como os textos, figuras,
tabelas, …
• <HEAD></HEAD> - Indica o cabeçalho do documento.

Exemplo 1
• Abre o bloco de notas e digita o seguinte código
<html>
<body>
Isto é um teste
</body>
</html>
• Guarda-o com o nome exemplo1.html ou htm

DOCTYPE
Quanto iniciamos um documento em HTML
devemos informar o navegador que deve interpretar
o código como HTML.
<!DOCTYPE HTML>
<html>
<body>
Isto é um teste
</body>
</html>

<HEAD>
<Head> - acrescenta um cabeçalho à tua página
<html>
<head> Exercício:</head>
<body>
Isto é um teste
</body>
</html>
• Guarda-o com o nome exemplo2.html

Tags utilizadas no cabeçalho
• As Tags utilizas no cabeçalho são: title, base, link, meta, style, script
• <Title> Permite acrescenta um cabeçalho à tua página
<html>
<head>
<title> Exercício: </title>
</head>
<body>
Isto é um teste
</body>
</html>
Guarda-o com o nome exemplo3.html

• <base> define o URL do documento atual.
<html>
<head>
<base href=
http://www.empx.pt>
</head>
¦

• <link> estabelece uma ligação hierárquica entre
documentos
<html>
<head>
<link rel=“index” ref=“index.html”>
<link rel=“previous”
ref=“anterior.html ”>
<link rel=“next”ref=“seguinte.html”>
</head>

Formatação de meta dados
• <Meta> serve para definir os atributos
identificadores do site como por exemplo o autor da
página, os direitos de autor e as palavras-chave.
• Atributos da tag <meta>

– Name – identifica o que se vai adicionar à página, podendo
ser:
• AUTHOR: autor da página
• COPYRIGHT: direitos de autor
• KEYWORDS: palavras chaves, utilizadas por ferramentas de
pesquisa para conhecer o conteúdo do site.

Author
Define o nome do autor da página.
<meta name="author" content=“Ana
Patricio" />
Copyright
Declara o direito de autor da página.
<meta name="copyright" content="© 2014
Empresa XYZ" />

Keywords
São frases ou palavras separadas por vírgulas, que definem
as palavras chaves associadas ao conteúdo da página.
<meta name="keywords" content="...palavras
chave do documento..." />
Obs: Normalmente, as keywords são usadas pelos motores de busca para indexar
os documentos juntamente com informações encontradas no título e corpo da
página.
Description
Tem uma descrição sobre o conteúdo da página.
<meta name="description" content="...descrição da
página..." />
Content-type
Define o tipo de conteúdo e tipo de codificação de
caracteres da página (deve ser sempre usada).
<meta http-equiv="content-type"
content="text/html; charset=UTF-8“/>
Content-language
Declara a uma ou mais linguagens do documento. Pode
ser usada pelos motores de busca para categorizar a página
por idioma.
<meta http-equiv="content-language"
content="pt-br, en-US, fr" />
Comentário <! .... >
<!Início do Documento HTML>
<html>
<head>
<!Aqui estamos no cabeçalho>
</head>
<body bgcolor=#AA24R>
<P>
<font FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> Isto é um
teste</font>
</P>
<!Aqui fechamos o parágrafo>
e isto <br> já é <br> outro teste
</body>
</html>

Tag <br> quebra de linha
<br> - Indica a quebra de linha. Funciona como um “Enter” no
mesmo parágrafo. Não possui tag final.
• Acrescenta ao corpo do teu código
<html>
<head>
</head>
<body>
<P>
<font FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”>
Isto é um teste</font>
</P>
e isto <br> já é <br/> outro teste
</body>
</html>

Tag <hr> linha horizontal
<hr > - insere uma linha horizontal no documento
<html>
<head> <title> Exercício: </title> </head>
<body>
<P>
</P>
<hr>
</body>
</html>

Atributos Valor Descrição
align Center Especifica o alinhamento da linha
Left horizontal
right
noshade True Se for true, a linha terá uma única cor.
false Se for false, terá duas cores.
size Pixels Especifica a espessura da linha
%
width Pixels Especifica a largura da linha
%
CEF Operador de Informática

<hr > - insere uma linha horizontal no documento
<html>
<body>
<h1> XXXXXXXXX </h1>
<P>
</P>
<hr align = center noshade =false size=35 width =45>
</body>
</html>
Atributos do BODY- Pano de fundo
• A cor de fundo ou papel de parede de uma página HTML pode ser
informada no comando <bgcolor> ou <background>.
<html>
<head>
</head>
<P>
<font FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> Isto é um
teste</font>
</P>
</body>
</html>
Obs: Também pode-se utilizar bgcolor=‘transparent’ allowtransparency=‘true ‘ para fundo transparente.

Atributos do BODY- Pano de fundo
• A cor de fundo ou papel de parede de uma página HTML pode ser
informada no comando <bgcolor> ou <background>.
<html>
<head>
</head>
<body background="C:\Users\Ana\Pictures\html.png">
<P>
<font FACE=ARIAL COLOR=GREEN SIZE=5> Isto é um
teste</font>
</P>
</body>
</html>

Atributos do BODY- Cor do texto
Text: define a cor do texto da página. O padrão é preto.
<html>
<head>
</head>
<body bgcolor=#AA24R text=yellow>
<P>
<font FACE=ARIAL COLOR=GREEN SIZE=5> Isto é
um teste</font>
</P>
</body>
</html>
Atributos do BODY- Cor do Link
Link: define a cor dos links do site. Por padrão a cor é azul.
<html>
<head>
</head>
<body bgcolor=#AA24R text=yellow link=#42ff2>
<P>
um teste</font>
</P>
</body>
</html>

Atributos do BODY- Cor do link visitado
Vlink: cor do link visitado do documento. Padrão roxo.
<html>
<head>
</head>
<body bgcolor=#AA24R text=yellow link=#42ff2
vlink= rgb(23,34,54)>
<P>
um teste</font>
</P>
</body>
</html>

Atributos do BODY- Cor do Link ativo
Alink: formata a cor do link ativo. Vermelho é a cor padrão.
<html>
<head>
</head>
<body bgcolor=#AA24R text=yellow link=#42ff2
vlink= rgb(23,34,54) alink=#121AA>
<P>
um teste</font>
</P>
</body>
</html>

Atributos do BODY- Texto
Text: define a cor do texto da página. O padão é preto.
Link: define a cor dos links do site. Por padrão a cor é
azul.
Vlink: cor do link visitado do documento. Padrão roxo.
Alink: formata a cor do link ativo. Vemelho é a cor
padrão.
Bgcolor: Muda a cor do Plano de Fundo. A cor padrão é
branco.
Background Coloca uma imagem.

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.

Formatação de texto - estilo
Permite alterar o estilo da letra Negrito, Itálico, Sublinhado ou Riscado
<html>
<head>
</head>
<body>
<I> Texto em itálico </I>
<B> Texto em negrito </B>
<U> Texto sublinhado </U>
<S> Texto riscado </S>
</body>
</html>
Curso de Técnico Multimédia

Formatação de texto - <Font>
<Font> Permite alterar o tipo de letra FACE, a cor da letra
COLOR e o tamanho SIZE
<html>
<head>
</head>
<body>
<font FACE=ARIAL COLOR=GREEN
SIZE=35> Isto é um teste</font>
</body>
</html>
Tag <p> parágrafo
<P> - Inserir um parágrafo. A tag final é opcional.
• Acrescenta ao corpo da teu código
<html>
<head>
</head>
<body>
<P>
um teste</font>
</P>
E isto é outro teste
</body>
</html>

Tag <Hn> Cabeçalho
<h1> … <h6> - No corpo do texto podem ser
colocados até 6 niveis de cabeçalhos. A
hierarquia começa em <h1>, como a maior, e
termina em <h6> diferentes.
<h1> Título Principal </h1>
<h2> Subtítulo </h2>
<h3> outro subtítulo </h3>
⁞

Alinhamento
Align este atributo pode ser com as tag <h1> … <h6>,

<p>, e pode tomar os seguintes valores: center, right,
justify
<center><h1> A minha 1º pagina </h1>

</center>
<p align=“right”> Olá Mundo </p>

Tag <marquee>
<marquee> Faz o texto deslizar na página. Por
defeito desliza para a esquerda.
– Atributos do efeito: direction= right, up, down
<html>
<head> <title> »» A Minha Pagina «« </title>
</head>
<P> <font FACE=CourierNew COLOR=rgb(211,11,0) SIZE=35>
Quem sou eu? </font> </P>
<hr> Sou Ana Patrício <br> e estou a aprender <br>
<marquee> H T M L H T M L H T M L </marquee>
</body>
</html>

Tag <marquee>
• Atributo behavior - trata o comportamento do
texto. O comportamento padrão é o de deslizar.
– behavior=‘alternate’ -> efeito bate e volta
– behavior=‘slide’ -> desliza só uma vez
• Atributo scrollamount – permite alterar a

velocidade de deslizamento.
– scrollamount=”1”
– A velocidade 1 é a mais baixa
Tag <marquee>
• Atributo Loop - determina quantas vezes o texto
vai deslizar no monitor.
• Atributo Height e With – define a altura e a
largura
• Atributo Bgcolor – cor de fundo do texto em
movimento
• Atributo Hspace e Vspace (Horizontal e Vertical) –
determina o espaço em pixeis que deve ficar livre
em torno do texto em movimento.
Tag <marquee>
• Atributo scrollamount e scrolldelay – controlam a
velocidade do texto em movimento.
• scrollamount – define a quantidade de pixeis
que vai percorrer em cada quadro;
• scrolladelay – define o tempo em
milisegundos, que o texto vai demorar em
cada um dos quadrados.

Listas Ordenadas
As listas ordenadas são delimitadas pelas tags <ol> e
</ol> (a numeração é 1,2,3,…) e cada um dos seus itens é
delimitado pelas tag <li> e </li>
<html>
<body>
<ol> <li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li> </ol>
</body>
</html>
Listas ordenadas
Atributos da tag <li>: Type – modifica o tipo de marca que
será colocada antes de cada item da lista.
• com a tag <ul>, utiliza circle, square
<html>
<body>
<ul> <li type= circle > item 1 </li>
<li type= circle > item 2 </li>
<li type= square> item 3 </li>
<li type= square > item 4 </li> </ul>
</body>
</html> Guarda-o com o nome exemplo19.html

Listas ordenadas
Atributos da tag <li>: Type – modifica o tipo de marca que será
colocada antes de cada item da lista.
•Com a tag <ol>, modifica a numeração utilizando a ou A, I ou i
•Start – indica o nº a partir do qual os itens da lista começam a
ser contados
<html>
<body>
<ol start=3> <li type= a> item 1 </li>
<li type= a> item 2 </li>
<li type= a> item 3 </li>
<li type=a> item 4 </li> </ol>
</body>

Tag <img> inserir imagens
<Img> Insere uma imagem no local pretendido
– Atributos da imagem:
•WIDTH - Define a largura da imagem.

•HEIGHT - Define a altura da imagem.
•ALT - Texto que aparece quando é passado o mouse
sobre a imagem
•BORDER - É um valor atribuído à largura da borda da
imagem (Contorno).

Digite o seguinte código
<html>
</head>
<body bgcolor=#AA111>
<P> <font FACE=CourierNew COLOR=rgb(211,11,0)
SIZE=35> Quem sou eu? </font> </P>
<!agora vou inserir uma imagem com contorno>
<img src=“xxx.gif" alt=“texto que deve aparecer"
border="0">
<img src=“xxx.gif" alt=“Texto" border="1">
<img src=“xxx.gif" alt=“Texto" border="2"
width="20" height="20">
</body>
<html>
</head>
<!agora vou inserir uma imagem com alinhamento
relativamente ao parágrafo>
<img src=“xxx.gif" align="top"> <br>
<img src=“xxx.gif" align="middle">
<img src=“xxx.gif" align="left">
<img src=“xxx.gif" align="right">
</body> Guarda-o com o nome exemplo22.html
</html>
<html>
</head>
<!agora vou inserir uma imagem>
<img src=“xxx.gif" align="top">
<img src=“xxx.gif" align="middle">
<img src=“xxx.gif" align="left">
<img src=“xxx.gif" align="right">
<img src="xxx.gif" vspace=espaço vertical>
<img src="xxx.gif" hspace=espaço horizontal>
</body>

Criação de Sites WEB

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Criação de Sites WEB

Transféré par

Droits d'auteur :

Formats disponibles

CEF Operador de Informática – 2018/19 Ana Patrício

• Esta linguagem foi criada para publicação de

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

– Um editor de texto (Bloco de

CEF Operador de Informática – 2018/19

– Uma linguagem simples baseada em hipertexto.

– Que utiliza marcadores ou tags.

– Utilizada para criar documentos para a Web.

CEF Operador de Informática – 2018/19

Conteúdo da página: textos,

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

• São delimitadas pelos sinais de < e >:

CEF Operador de Informática – 2018/19

• A tag final é idêntica à inicial sendo precedida

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

• <BODY></BODY> - Indica o corpo do documento.

• <HEAD></HEAD> - Indica o cabeçalho do documento.

CEF Operador de Informática – 2018/19

• Guarda-o com o nome exemplo1.html ou htm

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

• <Title> Permite acrescenta um cabeçalho à tua página

Guarda-o com o nome exemplo3.html

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

• Atributos da tag <meta>

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

• Guarda-o com o nome exemplo4.html

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

CEF Operador de Informática – 2018/19

CEF Operador de Informática

CEF Operador de Informática

• Guarda-o com o nome exemplo9.html

CEF Operador de Informática

CEF Operador de Informática

CEF Operador de Informática

CEF Operador de Informática

CEF Operador de Informática

• <I> </I> - para colocar o texto em

CEF Operador de Informática

• Guarda-o com o nome exemplo14.html

Curso de Técnico Multimédia

• Guarda-o com o nome exemplo16.html

Curso de Técnico Multimédia

Curso de Técnico Multimédia

Align este atributo pode ser com as tag <h1> … <h6>,

<center><h1> A minha 1º pagina </h1>

<p align=“right”> Olá Mundo </p>

Curso de Técnico Multimédia

Curso de Técnico Multimédia

• Atributo scrollamount – permite alterar a

Curso de Técnico Multimédia

Curso de Técnico Multimédia

Curso de Técnico Multimédia

•WIDTH - Define a largura da imagem.

Curso de Técnico Multimédia

Vous aimerez peut-être aussi