Programação Web
Topicos da aula de Hoje
• Tags HTML
• Tags Normais
• Tags Vazias
• Tags HTML – Atributos
• Programação de Sites estáticos
• Tags da <head>
• <div>
• Tags Semanticas de Layout
• Centralização de imagens 2
Programação Web
Tags HTML
• Como visto na aula 4, Tags são a ferramenta
principal do HTML.
• Ela é um nome circulado por < e >
• <body>, <head>, <img>, <p>
3
Programação Web
Tags Normais
• As Tags normais geralmente consistem em:
<p> conteudo </p>
• Elas tem que ser abertas e subsquentemente
fechadas para encapsular o conteúdo.
• Pode ser nomeada e modificada com css.
4
Programação Web
Tags Vazias
• As Tags vazias são exceções a regra.
<img src=“minhaimagem”>
OU
<img src=“minhaimagem”/>
• Não podem receber conteúdo, por isso são
consideradas vazias.
5
Programação Web
Atributos
• Tags podem ter Atributos;
• Descrevem mais aprofundadamente o que a tag irá exibir;
<tag atributo=“valor”> conteudo </tag>
• Podem estar presentes em qualquer tipo de Tag;
• Diretamente relacionados a tag em questão:
• Href não funcionaria em uma tag <img>
6
Programação Web
Programação de páginas estáticas
Tags da Head
• Os tags da <head> são utilizados para descrever
metadados;
• <title>…</title> - É o titulo da página
• Aparece no topo do navegador;
• É o nome que aparece nos favoritos;
• Nome da página quando buscar no google;
7
Programação Web
Programação de páginas estáticas
Tags da Head
• <style> … </style> - é uma tag da Head que pode
conter estilos gerais de toda a página por meio de
atributos
• Exemplo:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
8
Programação Web
Programação de páginas estáticas
Tags da Head
• <link> é uma tag vazia – utilzado para determinar
relações externas com o documento em questão;
• Exemplo:
<link rel="icon" type="image/x-icon" href="/images/[Link]">
9
Programação Web
Programação de páginas estáticas
Tags da Head
• <meta> utilizado para definir dados como:
• Descrição da página;
• Palavras Chaves;
• Autor do Documento;
• Não aparece para o usuário, mas os
navegadores, serviços web e as ferramentas
de busca;
10
Programação Web
Programação de páginas estáticas
Tags da Head
Define a codificação de caracteres:
<meta charset="UTF-8">
Define as palavras-chave para ferramentas de busca:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a descrição da sua pagina web:
<meta name="description" content="Free Web tutorials">
Define o autor da página:
<meta name="author" content="John Doe">
Atualiza a página de 30 em 30 segundos:
<meta http-equiv="refresh" content="30">
Ajusta a porta de visão para deixar seu site legal em qualquer
dispositivos:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
11
Programação Web
Programação de páginas estáticas
Tags da Head
• <script> … </script> - essa tag é para scripts
em Javascript, iremos ver mais sobre isso nas
próximas aulas.
• <base> é uma tag vazia – Utilizada para definir
a URL base de uma página
<head>
<base href="[Link] target="_blank">
</head>
<body>
<img src="images/[Link]" width="24" height="39" al
t=”Homem">
<a href="tags/tag_base.asp">HTML base Tag</a>
12
</body>
Programação Web
Programação de páginas estáticas
Tag <div> </div>
• É uma divisão ou seção do documento HTML;
• É um container de outros elementos HTML;
• Pode ser estilizado usando CSS ou
manipulado com JS.
• Aributo id ou class para maniuplar;
• Qualquer conteúdo pode entrar numa <div>!
13
Programação Web
<html> Programação de páginas estáticas
<head>
<style> Tag <div> </div>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>Cabeçalho</h2>
<p>Texto.</p>
</div>
</body>
14
</html>
Programação Web
Programação de páginas estáticas
Tags Semanticas de Layout
• <header> … </header>- É um cabeçalho para
seu documento ou seção;
• <nav> </nav> - É um agrupamento de links.
• <section> … </section> - É uma seção.
• <footer> </footer> - É o rodapé do seu
documento ou seção
15
Programação Web
Programação de páginas estáticas
Centralizar Figuras
• Idealmente se utiliza CSS;
• Utilizando <div> você consegue
<div style="text-align: center">
<a href="link">
<img src="URL" align="center">
</a>
</div>
16
Programação Web
Programação de páginas estáticas
Exercicio
Desenvolver uma página web com um titulo e com,
pelo menos, os elementos discutidos em sala.
Implementar o uso de <div>, centralizar alguma
imagem, inserir metadados no seu cabeçalho, inserir
tags semânticas de Layout.
17
OBRIGADO!
Prof. Msc. David Caravana de C M Ricci