PW_aula04.pptx

Prgramação WEB
 PÁGINAS WEB
ESTÁTICAS TAGS
HTML

Objetivos
• Conhecer as principais tags do HTML
– Estruturantes
– Marcadoras de texto

Estrutura de uma página
HTML
Somente a área do <body> é a
visualizada pelo navegador.

Dividindo o layout
• DIV <Div/>
O DIV tem a função de criar divisões.
Quando é criada uma pagina web, as áreas do layout
são divididas em seções.
DIV permite, além da organização do código, a aplicação
de estilos a trechos específicos da página
Divs não tem forma, cor ou tamanho pré-estabelecido.
Isso dependerá do conteúdo alocado nela.

Dividindo o layout
• DIV <Div/>
Aplicar cor a div
<div style="background-color:red">
<p>Conteúdo de uma div</p>
</div>
Definir tamanho da div
<div style="background-color:red; width:100px;
height:100px">
<p>Conteúdo de uma div</p>
</div>

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Divs por padrão são posicionadas abaixo de outras.
(Propriedade position)
Proprieade Position
Há três tipos de posicionamento de divs: fixed,
relative e absolute. Divs do tipo fixed são posicionadas
em um ponto fixo na tela. Divs do tipo relative são
posicionadas com base no seu canto superior esquerdo.
Divs do tipo absolute são posicionadas com base em
sua div pai. Por padrão, todas as divs são declaradas
como relative.

Dividindo o layout
• DIV <Div/>
Div Relative Div Absolute

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Uma div do tipo relative se posiciona por padrão abaixo
de outra div. A div do tipo absolute se posiciona com
base na div pai, ou seja, se há duas divs absolute filhas
da mesma div pai e com posicionamento não declarado,
as duas irão se sobrepor.

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Propriedades (left, right, top e bottom)
Left - regula a distância para a margem esquerda.
Right - para a direita,
Top - para o topo da página,
Bottom - a distância até o rodapé.

Dividindo o layout
• DIV <Div/>
height:100px; position:absolute">
<p> Div 1 </p>
</div>
<div style="background-color:blue; width:100px;
height:100px; position:absolute; top: 40px; left:50px">
<p> Div 2 </p>
</div>

Dividindo o layout
• DIV <Div/>
Propriedades

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Propriedades (float)
O relative são posiciona a DIV uma abaixo da outra. É
possível alterar sua posição nativa usando a
propriedade float.

Dividindo o layout
• DIV <Div/>
height:100px; float:left">
Div 1
</div>
height:100px; float:left;">
Div 2
</div>
<div style="clear:both"></div>

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Utilizando a propriedade “float:left”, a Div 2 passa a ser
alinhada ao lado esquerdo da Div 1.
Se usássemos a propriedade “float:right” nas duas divs
elas se alinhariam ao lado direito da tela.

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Utilizando a propriedade “float:left” na primeira div e
“float:right” na segunda div.
Isso faria com que a primeira div se alinhasse a
esquerda e a segunda a direita.

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Margens (externas (margin) e internas (padding))
As margens externas definem a distância de um
elemento para outros elementos. Enquanto isso,
margens internas definem a margem entre o conteúdo
do elemento e a borda (border).

Dividindo o layout
• DIV <Div/>
Posicionar DIV

Dividindo o layout
• DIV <Div/>
Posicionar DIV
height:100px; float:left">
<span style="border:1px solid black">Div 1</span>
</div>
height:100px; float:left; margin: 10px 20px 10px 20px;
padding:20px"> <span style="border:1px solid
black">Div 2</span>
</div>
<div style="clear:both"></div>

Dividindo o layout
• DIV <Div/>
Posicionar DIV
Elemento <span> é container para conteúdo linear

Dividindo o layout
• DIV <Div/>
Posicionar DIV
A Div 2 recebe as margens “10px 20px 10px 20px”.
Esses números indicam, respectivamente, as margens
para: topo, direita, rodapé e esquerda.
A Div 2 ainda recebe a propriedade “padding:20px”, que
insere uma margem interna de 20 pixels.
O que faz com que otexto da Div 2 se distancia da
borda.

Dividindo o layout
• DIV <Div/>
DIV Container
A div container permite que divs internas sejam contidas
em uma área delimitada.
Ex.:
1 - Uma div pai de largura de 960 pixels com uma
margem interna de 10 pixels em cada lado, altura
automática (auto), margem superior nula, lateral
automática e margem interna de 10pixels.
Altura automática, o conteúdo interno se regulará à altura final da
div.

Dividindo o layout
• DIV <Div/>
DIV Container
2 - Uma div filha de 100 pixels de altura que ocupará
toda a largura da div pai. Largura automática e margem
com altura zero.
3 - Duas divs filhas que estarão lado a lado.
A div pai deve centralizar o conteúdo das outras divs.

Dividindo o layout
• DIV <Div/>
DIV Container

Dividindo o layout
• DIV <Div/>
DIV Container
<div style="background-color:gray; width:960px; height:auto; margin:0 auto;
padding:10px">
<div style="background-color:green; width:960px; float:left; margin-
bottom:10px">
<h1 style="height:100px">Div 1</h1>
</div>
<div style="background-color:red; width:600px; float:left">
</div>
<div style="background-color:blue; width:350px; float:right;">
</div>
<div style="clear:both"></div> </div>

Dividindo o layout
• DIV <Div/>

Dividindo o layout
• DIV <Div/>
DIV Container
A Div

Dividindo o layout
• DIV <Div/>
<!DOCTYPE html>
<html lang="pt-Br">
<head>
</head>
<body style="width: 100%; margin: 0 auto;">
<div style = "position: fixed; right: 0; left: 0;">
<div style="background-color: #6c5b50; padding-right: 15px; padding-left: 15px; margin-right: auto;
margin-left: auto;">
<div style="background: #6c5b50; height: 100px; padding-right: 15px; padding-left: 15px;
margin-right: auto; margin-left: auto;">
<div style="min-width: 768px">
<a style="float: left;padding: 15px 15px; font-size: 18px; line-height:
20px;" href="#" style="height: 59px; padding-top: 0px; padding-left: 15px;">
<img src="./img/LogoWeb2.png" title="UTEG" alt="UTEG"
height="80">
</a>
</div>
</div>
</div>
</div>
</body>

Dividindo o layout
• NAV <Nav/>
A tag <nav> indica uma região da página que contém
uma barra de navegação, ou seja, armazena uma lista de
links.
Normalmente contém aqueles links considerados
principais, por exemplo o menu principal.
Isso também pode ser aplicado para aqueles blocos de
links que geralmente são colocados no rodapé.

Dividindo o layout
• NAV <Nav/>
<!DOCTYPE html>
<html lang="pt-Br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="width: 100%; margin: 0 auto;">
<nav style = "position: fixed; right: 0; left: 0;">
<nav style="background-color: #6c5b50; padding-right: 15px; padding-left: 15px; margin-right:
auto; margin-left: auto;">
<nav style="background: #6c5b50; height: 100px; padding-right: 15px; padding-left: 15px;
margin-right: auto; margin-left: auto;">
<nav style="min-width: 768px">
<a style="float: left;padding: 15px 15px; font-size: 18px; line-height:
20px;" href="#" style="height: 59px; padding-top: 0px; padding-left: 15px;">
<img src="./img/LogoWeb2.png" title="UTEG" alt="UTEG"
height="80">
</a>
</nav>
</nav>
</nav>
</nav>
</body>

Dividindo o layout
• ASIDE <Aside/>
O <aside> deve ser usada para criar uma secção em um
website com conteúdo não necessariamente relacionado
com o principal.
Essas secções são, muitas vezes, representadas como
barras laterais/Sidebar.

Dividindo o layout
• UL <Ul/>
O elemento HTML <ul> (ou elemento HTML de Lista
desordenada) representa uma lista de itens sem ordem
rígida, isto é, uma coleção de itens que não trazem uma
ordenação numérica e as suas posições, nessa lista, são
irrelevantes. Caracteristicamente, os itens em uma lista
desordenada são exibidos com um marcador que pode
ter várias formas, como um ponto, um círculo, ou um
quadrado. O tipo de marcador não é definido na
descrição HTML da página, mas na CSS associada,
utilizando a propriedade list-style-type (en-US).

Dividindo o layout
• IL <Ul/>
O elemento HTML <li> (ou a Lista dos Itens de um
elemento HTML) é usado para representar um item que
faz parte de uma lista. Este item deve estar contido em
um elemento pai: uma lista ordenada (<ol>), uma lista
desordenada (<ul>), ou um menu (<menu> (en-US)) e
representa uma única entidade dessa lista. Em menus e
listas desordenadas a relação de itens é exibida,
normalmente, usando pontos de marcação (as bolinhas).
Em listas ordenadas eles são, comumente, mostrados
com algum contador ascendente - como um número, ou
letra - à sua esquerda.

Outros Blocos de Marcação
• Divisão (Bloco)
– Bloco genérico, usualmente para formatação visual
<div>
<p>Um texto na div</p>
</div>
<div>

Atividade
• Imagine uma página sobre algum assunto que
você goste.
• Crie um arquivo chamado index.html e
estruture esse arquivo com as seções que
você imagina que o texto deve possuir
• Preencha a página com algum conteúdo,
usando as tags que já estudamos.

PW_aula04.pptx

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a PW_aula04.pptx

Semelhante a PW_aula04.pptx (20)

PW_aula04.pptx