230213_PW1-HTML5

Html 5

•

UNINTER

0

Gilberto Neves

31/10/2023

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Importante!
A primeira página de um site HTML deve ter como nome de arquivo index.html, só assim os
navegadores abrem a primeira página de seu site sem a necessidade de digitar o nome do
arquivo.
As outras páginas podem possuir qualquer nome a sua escolha, porém evitem utilizar espaços
e caracteres especiais nos nomes dos arquivos das páginas web.

Imagens para páginas em HTML
A tag <img> exibe uma imagem na página. Indicamos apenas o nome da imagem se ela estiver
na mesma pasta em que está a página web, caso a imagem esteja em outra pasta, o nome da(s)
pasta(s) também deve ser indicado.
pag05.html

Formatando elementos em HTML
Veja a seguir diversas tags que permitem formatar o texto da página web:
 - texto em negrito
 - texto em negrito semântico
 - texto em itálico
 - texto em itálico semântico
 - texto marcado
 <del> - texto rasurado
 - texto subscrito
 - texto sobrescrito
Monte a página abaixo e observe a utilização das diversas tags de formatação.
pag03.html

Cores de fundo na página
Podemos adicionar uma cor de fundo na página utilizando o parâmetro bgcolor na tag <body>
e indicando o nome de uma cor em inglês (o HTML reconhece 140 nomes de cores diferentes).
Monte a página abaixo e observe o resultado.
pag04.html

Podemos utilizar ao invés do nome em inglês o código RGB Hexadecimal da cor desejada, desta
forma temos à disposição milhões de combinações possíveis. Para utilizar o código não esqueça
de colocar o # antes do código RGB. Altere a página como indicado abaixo e observe o resultado:

Imagem de fundo na página
Podemos adicionar uma imagem de fundo na página utilizando o parâmetro background na tag
<body> e indicando o nome do arquivo de imagem.
Veja um exemplo:
pag05.html

Imagem responsiva
Uma maneira fácil de deixar uma imagem na página web responsiva é definir sua largura ou
altura em porcentagem ao invés de valores absolutos.
Veja modificação no código da imagem da página anterior e seu resultado.

Criando Links
Para interligar uma página a outra utilizamos os links, veja a seguir sua sintaxe:

A tag de link é <a>.
O parâmetro href você indica a página ou site onde deseja ir.
O parâmetro target indica se a página deve abrir na mesma aba (_self) ou em uma nova
aba (_blank). O recomenda aqui é utilizar _self quando navegamos entre as páginas de
nosso próprio site e _blank quando desejamos colocar um link que vá para outro site.

Monte a página abaixo e observe o funcionamento de links:
index.html

Criando Listas não-ordenadas
Podemos criar listas não-ordenadas em HTML, veja a seguir sua sintaxe:

A tag de lista não-ordenada é <ul>.
A tag para definir cada item da lista é <li>.
O parâmetro type permite mudar o tipo de marcador da lista.

Monte a página abaixo e verifique as diversas listas não-ordenadas:
pag01.html

Criando Listas Ordenadas
Podemos criar listas ordenadas em HTML, veja a seguir sua sintaxe:

A tag de lista não-ordenada é <ol>.
A tag para definir cada item da lista é <li>.
O parâmetro type permite mudar o tipo de marcador de numeração da lista.
Monte a página abaixo e verifique as diversas listas ordenadas:
pag02.html

Criando Links dentro de Lista e Imagens como links
Podemos colocar links dentro de lista (criando uma espécie de menu) e podemos ainda definir
uma imagem como um link (basta ao invés do texto utilizar o comando de imagem).
Altere a página index.html como mostrado abaixo e observe seu funcionamento (necessário
fazer download do logo da Etec Irmã Agostina no formato jpg e salvá-lo na mesma pasta da
página para funcionar):
index.html