HTML

Curso de Análise e Desenvolvimento de Sistemas (ADS)

Unidade Curricular: Webdesign
Professora: Jéssica Zanelato Soares
Conteúdo
● Estrutura básica de diretórios
● TAG <font>
● Listas
● Links
● Listas com Links
● Tabelas
Estrutura básica de diretórios
Estrutura básica de diretórios
● Arquivo index.html: arquivo principal do projeto
● Pasta para os arquivos CSS (Folha de Estilo): css.
● Pasta para as imagens: img.
● Pasta para os arquivos JavaScripts: js.
TAG font
● Permite configurar tamanhos, cores e tipos de fontes.
● Usado até HTML 4. No HTML5 utilizamos CSS.
● Atributos
○ Size: Tamanho (varia de 1 a 7, e 3 é o padrão).
○ Face: Nome da fonte (Arial, Tahoma, Verdana, etc.).
○ Color: Cor da fonte, em hexadecimal ou por nome.
TAG font
Exercício de fixação
Crie uma página web com as TAGs apresentadas até agora.
A página tem por objetivo apresentar o aluno para a turma.
Considere as seguintes informações:

1. Crie um projeto no Visual Studio Code.

2. Barra de Título: “Blog da Maria”.
3. Títulos 1 e 2 com nome da página e descrição do que é a página.
4. Parágrafo: nome completo e idade com quebra de linha.
5. Parágrafo: seu objetivo no curso.
Listas Ordenadas
● Também denominadas de listas enumeradas.
● Navegador adiciona numeração a lista.
● TAG de uma lista ordenada: <ol>
● Cada item possui a TAG: <li>
Listas ordenadas
● Podemos adicionar o atributo type:
○ 1: lista numérica.
○ A: lista alfanumérica com letras maiúsculas.
○ a: lista alfanumérica com letras minúsculas.
○ I: lista numérica com números romanos em maiúsculos.
○ i: lista numérica com números romanos em minúsculos.
● Podemos adicionar o atributo start.
○ Indica o valor inicial de uma lista numerada.
Listas não ordenadas
● Listas não ordenadas.
● TAG de uma lista ordenada: <ul>
● Cada item possui a TAG: <li>
Listas não ordenadas
● Podemos adicionar o atributo type:
○ Disc: formato padrão, é um ponto.
○ Square: marcador que é um quadrado.
○ Circle: marcador que é um círculo sem
preenchimento.
Exercício de Fixação
Crie uma página Web que contenha duas listas ordenadas e uma lista não ordenada. No caso das listas
ordenadas, a segunda lista deve continuar a sequência enumerada da primeira lista.

Exemplo:

Frutas
1. Maçã
2. Laranja

Calçados
3. Tênis
4. Sapatos
Links
● Característica principal do HTML é integrar partes de um texto com imagens
e outros documentos.
● Esta integração não se restringe a páginas diferentes.
● Podemos integrar vários tópicos de uma página como se fossem índices. Ao
clicar no índice, o texto é exibido.
● TAG <a>
○ Atributo href. Deve-se inserir o nome do arquivo que será associado ou link para outro site.
Links
Links
● Parâmetro name serve para marcar um ponto de desvio no texto.
● E o href pode direcionar o usuário para esse ponto de desvio.
Exercício de Fixação
Criei 4 páginas: index.html, empresa.html, produtos.html e contato.html.
Insira em cada página o título de acordo (title e h1).

Na página principal (index.html) crie uma lista não ordenada com os links para
as outras páginas.

Após a lista, adicione um parágrafo de texto grande e no final do parágrafo

adicione um link para voltar para o começo do texto.
Tabelas
● Utilizada para representar dados tabulares.
● Conteúdo deve ficar dentro das TAGs <table> e </table>.
● Atributo “border” indica a espessura da borda das células (0, 1, 2, 3, etc.).
● TAG <caption> especifica o título da tabela.
● TAG <TH> específica as células de cabeçalho (headings).
● TAG <TD> específica os dados de célula.
● TAG <TR> indica o início de uma nova linha. Cada linha pode conter várias células.
Tabelas
Exercício de Fixação
Crie uma página que contenha uma tabela que mostre o nome de 3 alunos e suas 3 notas.

De acordo com o exemplo:

Tabelas
Tabelas
● Podemos ampliar a largura (width) da tabela.
● Vamos utilizar o atributo style para definir a largura.
Tabelas
● Podemos alinhar cada célula da tabela.
● Atributo align com os valores: center, left e right.
Tabelas
● Podemos alinhar cada célula da tabela de modo vertical.
● Atributo valign com os valores: top, middle e bottom.
Tabelas
● Atributo cellspacing.
● Especifica a distância entre células e linhas.
● Por padrão a distância é de 2 pixels (2px).
Tabelas
● Atributo cellpadding.
● Especifica a distância do conteúdo da célula e a borda.
Exercício de Fixação
● Crie uma tabela para mostrar aos usuários uma lista de 10 produtos (sem imagens) e
seus preços.
● Utilize os seguintes atributos:
○ Border (borda);
○ Width (largura);
○ Align (alinhamento);
○ VAlign (alinhamento vertical);
○ Cellspacing (espaço entre células);
○ Cellpadding (preenchimento da célula).
Tabelas
● Atributo rowspan.
● Define quantas linhas a mesma célula pode abranger.
Exercício de Fixação
Crie uma página que mostre 4 produtos em uma tabela.
Cada linha terá o nome do produto, preço e o valor em promoção.
Mostre os dois primeiros preços em promoção na mesma célula e os dois últimos, também na mesma
célula.
Tabelas
● Atributo colspan.
● Define quantas colunas a mesma célula pode abranger.
Exercício de Fixação
Adicione ao exercício anterior um cabeçalho que mescle todas as colunas da
primeira linha.