HTML E CSS Fundamentos
HTML E CSS Fundamentos
HTML E CSS Fundamentos
Te c h n o E d i t i o n E d i t o r a L t d a
Posicionamento, dimenses
e outros elementos de
HTML5 e CSS3
Posicionamento, dimenses
e outros elementos de
HTML5 e CSS3
Sumrio
Resumo
04
Introduo
05
06
08
10
10
14
17
20
CAPTULO 6 TABINDEX
22
23
BIBLIOGRAFIA
CRDITOS
Resumo
HTML, do ingls HyperText Markup Language ou Linguagem de Marcao de
HyperTextos, a linguagem de marcao padro utilizada na criao de pginas para
web, permitindo a incorporao de imagens e objetos de formas interativas e
dinmicas.
O CSS, do ingls Cascading Style Sheets ou Folhas de Estilo em Cascata, tambm
usado na criao de identidade visual, layout de textos e demais funcionalidades em
um pgina da web. Ambas as linguagens so chanceladas pela W3C, que encoraja
seu uso alternado a fim de evitar a dependncia de somente uma linguagem.
O HTML5 a verso mais recente da linguagem e trouxe consigo mudanas
significativas para o universo de programao e desenvolvimento, entre as quais
podemos destacar semntica e acessibilidade a segunda sendo o ponto de
orientao de questes de dimenso e posicionamento de elementos, assunto em
destaque nesse e-book.
Esse livro digital, produzido pelo Grupo Impacta para alunos e aspirantes aos cursos
e treinamentos da Escola Art & Design e Escola Desenvolvimento, tem como
objetivo funcionar como um breve guia de posicionamento e dimenso de
elementos utilizando HTML5 e CSS para profissionais e estudantes de programao.
Palavras-chave: HTML; CSS; posicionamento; dimensionamento; camadas; mdia.
04
Introduo
A transformao de um layout criado por um designer, em formato de imagem, para
um formato HTML, que servir um site ou Web App, um processo que requer
alguns passos. Neste e-book, abordaremos como criar um layout e posicion-lo
corretamente em um navegador, de maneira que envolva as folhas de estilo em
cascata (CSS) e os demais elementos bsicos de programao.
Antigamente, era comum o uso de tabelas para a estruturao e criao do layout da
pgina, porm, desde o XHTML no h necessidade de utiliz-las. Um dos mtodos
utilizados para a criao de layout em HTML o chamado Tableless, nome atribudo
metodologia de construo de sites sem o uso de tables (tabelas). Para realizar essa
construo, utiliza-se o HTML para determinar a estrutura dos dados e as folhas de
estilo CSS para formatar sua exibio.
Devemos ter em mente que as tags, inclusive a <table>, continuam a ser utilizadas
de acordo com suas funes. A construo de sites por meio da metodologia
Tableless requer a formatao de elementos por meio de arquivos CSS, que
representam as folhas de estilo.
05
A dimenso real ocupada por um elemento dentro de uma pgina deve ser
conhecida para que seja possvel compreender os conceitos envolvidos no processo
de construo de um layout. A rea ocupada por cada um dos elementos de uma
pgina denominada continer e tem a forma de um retngulo.
O continer de um elemento possui todos os itens que dizem respeito a ele, como
seu contedo, seus espaos em branco, suas margens e suas linhas de contorno. O
desenho a seguir demonstra quais so as reas de um continer de um elemento.
Observe:
MARGIN
BORDER
TEXTO
CONTEDO
PADDING
06
MARGIN:
Espao que separa o continer de outros elementos que compem a pgina. Vale
destacar que a margem (margin) no est dentro dos limites de um elemento. As
margens so utilizadas com a finalidade de mover a caixa do elemento;
CONTEDO:
Todos os itens contidos em um elemento, os quais permanecem dentro do continer;
BORDER:
Limites de um elemento, isto , as linhas de contorno do continer;
PADDING:
Espaos em branco existentes entre o contedo e os limites de um elemento.
07
inferior do elemento;
margin-top: Permite determinar a espessura referente margem
superior do elemento;
margin-right: Permite determinar a espessura referente margem
direita do elemento;
margin-left: Permite determinar a espessura referente margem
esquerda do elemento.
Arquivo CSS
1
2
3
4
p{
margin-top: 70px;
margin-left: 50px;
}
08
Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<p>
Testando o atributo margin-top.
</p>
</main>
</body>
<html>
Top: 70px
Testando o atributo margin.
Left: 50px
09
Posicionamento Esttico
10
Posicionamento Fixo
Posicionamento Absoluto
Este tipo de posicionamento determina que o elemento seja posicionado levandose em considerao o local em que est o elemento mais prximo, cuja posio
pode ser definida como fixa, absoluta ou relativa.
Nas situaes em que no h um elemento mais prximo, considera-se o
posicionamento do elemento <body>. Para determinar o posicionamento de um
elemento como sendo absoluto, basta utilizar o valor absolute em conjunto
propriedade position.
Vale destacar que h quatro propriedades que se aplicam aos elementos cujo
posicionamento determinado como absoluto. So elas: bottom, top, left e right.
Observe o exemplo a seguir:
Arquivo CSS
#imagem {
position: absolute;
left: 30px;
top: 60px;
}
11
Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" id="imagem">
</main>
</body>
<html>
60px
30px
12
Arquivo CSS
.imagem {
position: relative;
left: 30px;
top: 60px;
}
Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" class="imagem">
<img src="images/css3.png" alt="Logo CSS3" class="imagem">
</main>
</body>
<html>
13
Veja o resultado:
60px
30px
14
Arquivo CSS
.img {
float: left;
width: 15%;
}
p{
font-size: 20px;
margin-top: 0px;
}
Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<img src="images/logotipo.png" alt="Logo HTML5" id="imagem">
<p>Texto principal</p>
</main>
</body>
<html>
15
Texto principal
Texto principal
16
Alguns elementos de bloco como section, div, article, entre outros, oferecem
atributos que permitem definir as camadas que sero utilizadas na construo
do layout da pgina.
Veja, a seguir, quais so esses atributos:
id: Permite determinar como a camada ser identificada;
class: Permite determinar qual classe j declarada no arquivo CSS deve ser
aplicada;
z-index: Permite determinar o nvel de empilhamento;
visibility: Permite determinar a visibilidade da camada. Os valores que
17
Arquivo CSS
.posicao {
position: absolute;
width: 170px; height: 100px;
font-family: arial;
font-size: 16px;
font-weight: bold;
}
#branca {
top: 140px; left: 100px;
background-color: #ffffff ; height: 100px;
border: solid ; 3px; #000 ;
z-index: 4;
}
#azul {
top: 100px; left: 60px;
background-color: #0066ff ;
border: solid ; 3px; #000 ;
z-index: 3;
}
#laranja {
top: 60px; left: 20px;
background-color: #ff0 ;
border: solid ; 3px; #000 ;
z-index: 2;
}
#fundo {
top: 20px; left: 5px;
width: 300px; height: 250px;
background-color: #eee;
border: solid ; 3px; #000 ;
z-index: 1;
}
18
Arquivo HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<div id="amarela">Div - laranja</div>
<div id="azul">Div - azul</div>
<div id="branca">Div - branca</div>
<div id="fundo">Div - fundo</div>
</main>
</body>
<html>
Div - fundo
Div - fundo
Div - laranja
Div - azul
Div - branco
19
Valores
Descrio
table
list-item
inline
block
none
20
Arquivo CSS
<!doctype HTML>
<html>
<head>
<meta charset="ufo-8">
<title>HTML5 Fundamentos - CSS</title>
<link type="text/css" href="css/style.css" rel="StyleSheet" />
</head>
<body>
<main role="main">
<p class="linha"> PARAGRAFO 1 * PARA TESTE DO ATRIBUTO DISPLAY</p>
<p class="linha"> PARAGRAFO 2 * PARA TESTE DO ATRIBUTO DISPLAY</p>
<p class="linha"> PARAGRAFO 3 * PARA TESTE DO ATRIBUTO DISPLAY</p>
</main>
</body>
<html>
21
Captulo 6 Tabindex
Por meio desse atributo, podemos definir uma ordem de navegao ao longo de
todos os elementos existentes em um documento HTML5, como links e elementos de
formulrio. Sem o uso de tabindex, o usurio seria obrigado a percorrer todos esses
elementos de acordo com a ordem em que eles aparecem no cdigo.
possvel determinar o ndice de tabulao em uma barra de navegao, em
elementos pertencentes a um formulrio ou outros itens que fazem parte do cdigo
XHTML. Para que o ndice de tabulao seja definido em um campo de formulrio e
um link, por exemplo, devemos utilizar a sintaxe a seguir:
22
Alguns estilos podem ser aplicados somente em algumas situaes especiais como,
por exemplo, a utilizao de um determinado tipo de fonte assim que algum usurio
requisitar a impresso da pgina. Por meio dos tipos de mdia (tambm chamados de
media types), um arquivo CSS poder ser criado apenas para um evento em
particular.
Veja quais so os principais tipos de mdia para aplicao em uma folha de estilo CSS:
screen: Permite que os estilos sejam utilizados para que a pgina seja exibida
na tela do computador;
23
@media print {
.midia {
font-family: arial;
font-size: 11px;
color: black;
text-align: left;
}
}
No exemplo anterior, temos um estilo com cor preta para impressora e outro estilo
para dispositivos que possuem no mximo 480px de largura.
24
25
26
27
Bibliografia
BRUSCAGIN, Henrique Thomaz; OLIVEIRA, Luiz Fernando; SOUZA, Roque Fernando Marcos.
HTML 5 Fundamentos (online). Techno Edition Editora Ltda. Setembro de 2014, So Paulo.
Obra derivada da obra original HTML 5 Fundamentos. SANTOS, Glaucio Daniel Souza.
Techno Edition Editora Ltda. Julho de 2013, So Paulo.
28
Crditos
Contedo
Adam Junqueira
Wilson Divino, Ednilson Gomes
Diagramao
Reviso Geral
Bruno Saes
Direo Geral
Miro Brito