Scribd
Carregar
9 visualizações

IntroProgWeb - Aula 02 - Formatação HTML

Enviado por

rennancr93
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
9 visualizações

IntroProgWeb - Aula 02 - Formatação HTML

Enviado por

rennancr93
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 1

O que é um arquivo HTML Tags Tente utilizar as Tags Básicas Lista de Exercícios 1: Tags Básicas

• HTML significa Hyper Text Markup Language (Linguagem


INTRODUÇÃO A PROGRAMAÇÃO WEB de Marcação de Hipertexto); <!DOCTYPE html>> : Especifica o tipo de documento, aqui é 1. Criação de uma Página Simples. Utilize as seguintes
• Um arquivo HTML é um arquivo de texto contendo um documento HTML5 Títulos:
pequenas etiquetas de marcação (markup tags); <h1> Hello World </h1> características:
Formatação HTML
• As marcações dizem para o navegador Web como <html>: elemento raiz de uma página HTML <h2> Hello World </h2>
mostrar a página; <h3> Hello World </h3> • Um título para a página ("<title>').
• um arquivo HTML deve ter uma extensão de arquivo htm <head>: Contém meta informações sobre a página HTML <h4> Hello World </h4> • Um cabeçalho principal ("<h1>").
PROF. DR. RENNAN RAFFAELE ou html; <h5> Hello World </h5>
<h6> Hello World </h6> • Um paragrafo com uma breve descrição sobre você
<title>: Especifica um título para a página HTML a ser
exibida. ("<p>").
Bora testar? • Um link para uma página extern, como o site da sua
Parágrafos:
<body>: corpo do documento html que contém cabeçalhos, <p> Este é um parágrafo </p> universidade ("<a>").
Se você está rodando Windows, inicie o Notepad [Bloco de parágrafos, imagens, hiperlinks, tabelas, listas, etc. <p> Este é um outro parágrafo </p>
notas] ou abra o SimpleText no Mac. • Um rodapé com seu nome e data (<footer>).
• <h1> a <h6>: define o cabeçalho grande
Obs: Caso queira algo mais refinado pode utilizar outras • <p>: define Parágrafo Meta Informação:(acentuação)
IDEs ou sites que suportam a linguagem como • </body>: representa o fim do corpo <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
(https://onecompiler.com/html/) • </html>: representa o fim do html 2. Lista de Tarefas (Desafio)
• <!-- comment -->: comentários
Insira o seguinte Texto:
Quebra de linha: (<br> não tem fechamento) • Crie uma lista não ordenada ("<ul>" e "<li>") de pelo
<p> Este <br> é um pará<br>grafo com quebras de linha</p>
menos 5 tarefas que você precisa completar esta semana.
<html>
<head> Comentários: (ignorado pelo navegador)
• Adicione uma segunda lista dentro de um dos itens da lista
<title>Hello World!</title> <!-- Este é um comentário --> principal, criando uma lista de itens relacionados a essa
</head>
<body>
tarefa.
<h1>First HTML page. <b>Este texto está em negrito</b> Atributos das Tags linha Horizontal: (ignorado pelo navegador)
<p> First Paragraph </p> <hr>
</body> 3. Lista de Hobbies (Desafio)
</html>
Os atributos podem prover informação adicional sobre os Cor dos textos:
elementos HTML na sua página. • Crie uma lista ordenada ("<ol>" e "<li>") dos seus hobbies
<h3 style="color:blue;">Titulo Azul</h3>
<p style="color:blue;">Parágrafo Azul</h3> favoritos.
O corpo da página HTML: <body> pode ter um atributo
Salve o arquivo como "helloworld.html". adicional que pode dizer que o plano de fundo da página é
• Para cada hobby, adicione uma breve descrição usando
vermelha, assim <body bgcolor="red"> Inserir Link:
parágrafos (<p>)
<a href="https://portal.unicap.br"> Isso é um link</a>
Esta tag define uma tabela HTML: <table>. Com um atributo
borda, você pode dizer ao navegador que a tabela não deve 4. Imagem com Link (Desafio)
ter bordas: <table border="10">
• Insira uma imagem em sua página usando a tag <img> e
<body> crie um link ao redor da imagem que leva para uma página
<table border="10"> relevante.
<tr>
<td>Huguinho</td>
<td>Luizinho</td>
<td>Zezinho</td>
</tr>
5. Tabela de preços (Desafio)
</table>
Crie uma tabela que mostre uma lista de produtos, seus
Os atributos sempre vem em pares nome/valor como este: preços e disponibilidade:
nome="valor".
Os atributos são sempre adicionados a tal de abertura de um
• A primeira linha deve conter os cabeçalhos das colunas:
elemento html. "produtos", "Preços", e "Disponibilidade".
• Adicione pelo menos 4 produtos.
• Use o atributo bgcolor para destacar produtos em promoção.

6. Tabela de comparação (Desafio)


Crie uma tabela comparando duas ou mais marcas de
produtos (como smartphone, notebooks, etc.)

• Inclua colunas para características como "Marca", "Modelo",


"Preço", "Especificações".

• Destaque a linha do produto que você considera o melhor


usando "bgcolor".

Você também pode gostar