Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
html e boas praticas
Compartilhar
Prévia do material em texto
Introdução ao HTML
e CSS
Prof. Sérgio Souza Costa
Obs: Alguns slides foram elaborados pela professora Vanesssa
(UNIFEI)
O que o servidor faz ....
O que o cliente (navegador web) faz ....
O HTML, nada mais que texto
O navegador renderiza o HTML
6/3/2011
HTML Timeline
vs.
HTML
1.0
RFC
1866
1990 1995 1997 1999 200019981996 2001 2002
XHTML
2.0
Begins…
201
0
Logo
oficial do
Html5
HTML Timeline
vs.
HTML
1.0
RFC
1866
1990 1995 1997 1999 200019981996 2001 2002
XHTML
2.0
Begins…
201
0
Logo
oficial do
Html5
HTML - Template
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML 4.01 - Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:
//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title></title>
</head>
<body>
<p>Ola mundo</p>
</body>
</html>
HTML 5 - Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
XHTML - Template
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”EN” dir=”ltr” xmlns=”http://www.w3.
org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/xml;
charset=utf-8” />
<title></title>
</head>
<body>
</body>
</html>
HTML vs XHTML
HTML: dont worry !! escreva algo que o
navegador fará o seu melhor para renderizar.
XHTML: se não é para fazer direito, melhor
nem começar. Como vais querer que o
JavaScript, CSS, AJAX funcione ?
● rigidez do XML
● HyperText Markup Language (HTML) ou Linguagem de
Marcação de Hipertexto é a linguagem usada pelos
navegadores para mostrar as páginas web ao usuário.
● Ela permite combinar textos, imagens e áudios, além
introduzir referências a outras páginas por meio dos
links hipertextos.
HTML
● A sintaxe da HTML baseia-se em um elemento chamado
tag (etiqueta).
● Tags são rótulos usados para informar ao navegador
como o conteúdo deve ser apresentado.
Tags, elementos e atributos
● A tag tem a seguinte forma geral:
<tag> ..... </tag>
● Tudo que estiver contido entre uma tag de abertura <> e
uma tag de fechamento </> será processado segundo o
comando contido na tag.
● Algumas tags, chamadas tags de comandos isolados,
não necessitam de um conteúdo para serem
processados.
<BR>
● Tag para pular linha
Tags, elementos e atributos
E quanto aos atributos ?
E quanto aos atributos ?
Atributos modificam as tags, dizendo algo
sobre os elementos
< html >
< head >
< title > Popular Websites: Google < /title >
< /head >
< body >
< h1 > About Google < /h1 >
< p > Google is best known for its search engine, although Google now offers a
number of other services. < /p >
< p > Google’s mission is to organize the world’s information and make it
universally accessible and useful. < /p >
< p > Its founders Larry Page and Sergey Brin started Google at Stanford
University. < /p >
< p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p >
< /body >
< /html >
Tags, elementos e atributos
Com a evolução da web, novos padrões,
crescimento na complexidade dos grandes
sistemas ...
Algumas tags perderam o uso para outros
padrões. Então temos :
● Bad tags, conheça para não usar :)
● Good tags
Tag Explanation
b Presentational. Use strong instead.
basefont Deprecated.
big Presentational. Use CSS instead.
center Deprecated.
dir Deprecated.
font Deprecated.
hr Presentational. Use CSS instead.
i Presentational. Use em instead.
u Deprecated.
Bad Tags
Tag Explanation
isindex Deprecated.
menu Deprecated.
s Deprecated.
small Presentational. Use CSS instead.
strike Deprecated. Use del instead.
tt Presentational. Use CSS instead.
Bad Tags
Good tags: tags que tem semântica
relacionada
<p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...
O que pode ter no HTML ?
O que pode ter no HTML ?
Elementos estruturantes
Elementos estruturantes
● O elemento HEAD (Cabeçalho) define uma seção que
contém informações sobre o documento HTML.
● A seção pode incluir scripts, instruções para o browser
encontrar os estilos, metadados, entre outros.
● As tags que podem estar na seção HEAD são:
● <title>
● <base>
● <link>
● <meta>
● <script>
● <style>
HTML – Seção HEAD
● Define o título do documento
● O elemento título é obrigatório em todos os documentos
HTML/XHTML.
● Esse título é referenciado em buscas pela rede, dando
uma identidade ao documento.
● Ao adicionar uma página aos seus Favoritos
(Bookmarks), o título da página se torna a âncora de
atalho para ela.
HTML – Seção HEAD
Elemento TITLE
HTML – Seção HEAD
Elemento TITLE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page do Sérgio Costa</title>
</head>
<body>
</body>
</html>
● Define uma url padrão para os links do
documento.
● <base href =http://meusite.com.br />
● Define um target padrão para os links do
documento.
● <base target =“_blank” />
HTML – Seção HEAD
Elemento BASE
● Define ligações do documento HTML com outros
arquivos como CSS, scripts, etc.
● Tem como atributos as tags rel, type e href
● Onde rel define o tipo de relacionamento
● Type fornece informações aos navegadores sobre o
conteúdo do elemento que o contém (dado, estilo,
script...)
● HREF informa a URL que o link aponta
● A tag <link> é mais usada para ligar o documento HTML
com o style sheets:
<link rel = “stylesheet” type = “text/css” href=“estilo.css”/>
HTML – Seção HEAD
Elemento LINK
● O propósito do elemento meta é prover meta-informação
sobre o documento.
● Metadados – dados sobre dados
● Usado tipicamente para especificar descrição da página,
palavras-chave, autor do documento, última modificação e
outros metadados.
● Muito frequentemente esse elemento é usado para prover
informação que é relevante para os navegadores ou para as
ferramentas de busca como a descrição do conteúdo do seu
documento.
<meta name = “ ” content = “ ” />
HTML – Seção HEAD
Elemento META
HTML – Seção HEAD
Elemento META
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
● Um dos elementos do meta é o HTTP-EQUIV.
● Uma das funcionalidades é dizer ao navegador o tipo de
dado que ele encontrará no documento.
HTML – Seção HEAD
Elemento META
● Um exemplo de uso comum do atributo HTTP-EQUIV é
promover a mudança automática de páginas, atribuindo-
lhe o valor Refresh.
HTML – Seção HEAD
Elemento META
<meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">
view-source:http://www.dpi.inpe.br/~scosta/
Usado para definir um script do lado do cliente, como um
código do javascript.
Torna as páginas mais dinâmicas e iterativas.
Utiliza o atributo type para especificar a linguagem
utilizada.
<script type = “text/javascript>
// código javascript
</script>
HTML – Seção HEAD
Elemento SCRIPT
HTML – Seção HEAD
Elemento SCRIPT
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box.
</p>
<button onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
Incorpora ao documento HTML, a folha de estilos
<style type = “text/css>
grupo{nome_atributo: valor;}
grupo{nome_atributo:valor;}
grupo{nome_atributo: valor;}
</style>
HTML – Seção HEAD
Elemento STYLE (CSS)
CSS será visto
mais a frente
● Tudo que estiver contido em <BODY> será apresentado
ao leitor na janela principal do browser.
● <BODY> pode conter títulos, parágrafos, listas, tabelas,
links para outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.
HTML – Seção BODY
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
O que pode ter no HTML ?
Elementos estruturantes
O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Elementos chaves
HTML – Seção BODY
Parágrafos e Títulos
Prudência com as
tags de títulos.
HTML – Seção BODY
Tags de Formatação
<i> x <em>
<b> x <strong>
<del> x <strike>
HTML – Seção BODY
Tags de Formatação
<i> x <em>
<b> x <strong>
<del> x <strike>
NÃO usem tags de
formatação, apenas
"strong" e "em", que
tem uma semântica
associada.
O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Listas e dados
● Em HTML, as listas podem ser itens numerados ou não.
● As listas não numeradas usam a tag <ul> de Unordered
Lists para marcar o começo e fim da lista e a tag <li>
para cada item da lista.
● Os itens da lista são marcados com bullets
HTML – Seção BODY
Listas
<ul>
<li> ... </li>
<li> ... </li>
</ul>
● Em HTML, as listas podem ser itens numerados ou não.
● As listas numeradas usam a tag <ol> de Ordered Lists
para marcar o começo e fim da lista e a tag <li> para
cada item da lista.
● Os itens da lista são marcados com números
HTML – Seção BODY
Listas
<ol>
<li> ... </li>
<li> ... </li>
</ol>
● As listas podem ser compostas
HTML – Seção BODY
Listas
<ul>
<li> ... </li>
<ul>
<li> ... </li>
<li> ... </li>
</ul>
</ul>
● Nivel 1
● Nivel 2
● Nível 2
● Nível 1
● As listas podem usar o atributo type.
● Nas listas não ordenadas, o <type> altera o bullet usado
e pode ter os valores CIRCLE, SQUARE e DISC
(default)
HTML – Seção BODY
Listas
<ul type = square>
<li> ... </li>
<ul type = circle>
<li> ... </li>
<li> ... </li>
</ul>
</ul>
Com CSS podemos
criar outros estilos
para as listas.
● Tabelas são definidas pela tag <table>.
● Uma tabela tem linhas (rows) e colunas.
● Em HTML, define-se uma linha com a tag <tr>, de table
row.
● A linha é dividia em colunas, onde os dados são
inseridos através da tag <td>, de table data.
● Dentro de um table data, pode-se inserir texto, figura,
links, listas, formulários, outras tabelas, etc.
HTML – Seção BODY
Tabelas
HTML – Seção BODY
Tabelas
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
● Linhas de cabeçalho podem ser definidas utilizando a
tag <th>, de table header, o que definirá o texto como
negrito e centralizado
HTML – Seção BODY
Tabelas
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
● Para inserir uma legenda à tabela, usa-se a tag
<caption>
HTML – Seção BODY
Tabelas
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Links e imagens
● Em HTML, um link é criado utilizando a tag <a>, de duas
maneiras:
● Para criar um link para outro documento
● Atributo HREF
● Para criar um link para o próprio documento (âncora ou bookmark),
criando um apelido para determinada parte do documento.
● Atributo NAME
● O endereço indicado pelo link pode ser carregado na mesma
janela em que o usuário se encontra, ou em outra janela.
● Essa característica é determinada pelo atributo TARGET
● _self
● _blank
HTML – Seção BODY
Hiperlink (Anchor)
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
● Para inserir imagens em um documento HTML, utiliza-se
a tag <img>.
● Os seguintes atributos devem ser configurados:
● src
● Endereço da imagem (source)
● alt
● Texto mostrado no lugar da imagem, caso a mesma,
por algum motivo não puder ser carregada
● width
● Largura da imagem
● heigh
● Altura da imagem
HTML – Seção BODY
Imagens
HTML – Seção BODY
Imagens
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley
face" width="42" height="42">
</body>
</html>
O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Links e imagens
Formulários
HTML – Seção BODY
Formulários
● Formulários são usados para enviar dados para um
servidor web.
● Os elementos de um formulário permitem o usuário
entrar com informações, como campos de texto, campos
de área de texto, menus drop-down, botões radiais,
caixas de seleção, etc.
HTML – Seção BODY
Formulários
● A tag <form> define uma área de formulário.
<form>
...
elementos de entrada
...
</form>
HTML – Seção BODY
Formulários
● A tag <input> define um elemento de entrada.
● É a tag mais utilizada em formulários.
● Um elemento de entrada pode ser um campo de texto,
um checkbox, um campo de senha, um botão de radio,
um botão de envio (submit), entre outros.
● Definido pelo atributo type
HTML – Seção BODY
Formulários
● Campo de texto
● <input type = “text” name = “nome” />
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"
><br>
Last name: <input type="text" name="LastName" value="Mouse"
><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a
page on the server called "demo_form.asp".</p>
</body>
</html>
HTML – Seção BODY
Formulários - Tipos
Text
Radio
Checked
Submit
CSS
Cascading Style Sheets
O que podemos fazer com CSS ?
Texto
Texto
Tamanho
Posição
Como usamos o CSS nas nossas
paginas Web ?
Três maneiras
Inline
Embedded
External
(ordem: do mais fácil para o melhor)
Inline CSS (bad)
<body>
<h1 style = "color:red ;"> Ola Mundo </h1>
</body>
Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>
Mistura
apresentação
com estrutura
Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>
Mistura
apresentação
com estrutura
É aceito no
HTML 4.01
strict e no
XHTML
Embedded CSS (OK)
<head>
<style type="test/css">
p {color:red;}
</style>
</head>
Embedded CSS (OK)
<head>
<style type="test/css">
p {color:red;}
</style>
</head> Rápido e fácil.
Use em
pequenas
aplicações.
External CSS: link tag (GOOD)
<head>
<link rel="stylesheet" href="meuestilo.css">
<head>
Por dentro do CSS
Três partes
1.Seletor
Três partes
1.Seletor
2.Propriedades
Três partes
1.Seletor
2.Propriedades
3.Valores
1. Primeiro selecionamos o elemento
p { }
2. Então dizemos o que queremos
mudar
p { color: }
3. Então dizemos qual o valor para
essa mudança
p { color: blue;}
h1 {
color: red;
font-size: 12px;
}
Ponto e virgulaChaves
Dois pontos
CSS Sintaxe
1.Seleção
2.Declaração
3.Cascata
SELEÇÃO
SeleçãoTipos de seleção
a. element
b. class
c. id
d. posição no documento
1. Element
Seleciona todos elemento <p>, em todo o
documento HTML
p { }
2. Class
Seleciona todos os elementos da classe "menu"
.menu { }
. significa "esse é um nome de uma
classe"
3. id
Seleciona o elemento com id "rodape"
#rodape { }
# significa "esse é um nome de um id"
4. posição no documento
Seleciona todos elementos "p" descendentes de
rodape.
#rodape p { color:red; }
<div id ="rodape">
<p> aqui é aplicada </p>
<span>aqui nao se aplica</span>
</div>
<p>aqui nao se aplica</p>
aqui é aplicada
aqui nao se aplica
aqui nao se aplica
4. posição no documento
Seleciona todos elementos "p" descendentes de
rodape.
p.primeiro { color:red; }
<div id ="rodape">
<p class ="primeiro p" > aqui é aplicada </p>
<p class ="segundo p"> aqui nao se aplica </p>
</div>
<p>aqui nao se aplica</p>
aqui é aplicada
aqui nao se aplica
aqui nao se aplica
4. posição no documento
#header div.content form p em.required {}
O que estamos selecionando pelo
seletor acima ?
Pseudo classes
a:link {} /* link não visitado */
a:visited {} /* link visitado */
a:hover {} /* mouseover */
a:active {} /* link selecionado */
DECLARAÇÃO
Declaração
(o que está dentro das chaves)
selector {
property: value;
}
Declaração
É a combinação de propriedade e valor.
Nos declaramos o que queremos mudar
CSS define diversas coisas que
podemos declarar. Exemplo
font
color
background-color
border
(essas são as propriedades)
Cada propriedade possui um
conjunto de valores que pode de
ser aplicado.
font: 12px normal Verdana, sans-serif;
color: #123;
background-color: red;
border: 1px solid rgb(193,193,193);
Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
border
border-color
border-bottom
border-width
border-left
border-top
border-right
....
Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
border
border-color
border-bottom
border-width
border-left
border-top
border-right
....
font
font-family
font-size
font-style
font-weight
Existe uma alternativa mais
simples
shorthand
Existe uma alternativa mais
simples
shorthand
border: 1px solid #000
border-width: 1px
border-style: solid
border-color: #000
É equivalente a:
Podemos mudar especificas partes
no estilo de um elemento
O que estamos fazendo aqui ?
p { border: 1px solid red; }
p.intro {border-color:blue;}
Unidades
Absoulta vs
relativas
px em %
Unidades absolutas
Pixels (px) are unidades absolutas.
Elas são sempre do mesmo “tamanho”.
Independentemente do dispositivo
Unidades relativas
em é sempre relativa ao valor corrente do
tamanho da fonte.
width: 2em;
font-size: 2em;
% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte
Unidades relativas
em é sempre relativa ao valor corrente do
tamanho da fonte.
width: 2em;
font-size: 2em;
% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte
HTML5
usaremos em
para fonts e
não mais px.
Como é calculado ?
Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200 % ;}
h1 a {font-size: 75%;}
Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200% ;}
O texto de h1 é 24 pixels (12*2)
h1 a {font-size: 75%;}
Um link dentro de um h1 é 18 pixel
(12*2*.75)
Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
Considerando o tamanho de 16 pixels
para o browser, temos 0.75 * 16 = 12
CASCATA
Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
Especificidade
Herança
Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
ESPECIFICIDADE.
Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
A última
declaração
mais
específica.
ESPECIFICIDADE.
<div id =“a”>
<div id =“b”>
<h1> </h1>
</div>
</div>
#a #b h1 {color:red;}
#a h1 {color: blue;}
Qual seletor é mais específico ?
Qual será a cor de h1 dentro de #b ?
Regras para determinar a
especificade
●Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
Regras para determinar a
especificade
●Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
Regras para determinar a
especificade
○ Elemento é 1 ponto
○ Uma classe é 10 pontos
○ Um id é 100 pontos
p a {} = 2 pontos
p.intro a {} = 12 pontos
#about p.intro a {} = 112 pontos
Herança
Elemento podem herdar estilos dos
elementos ascendentes
#blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
#blog, terá cor vermelha.
#blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
#blog, terá cor vermelha.
Atenção,
nem todos os
estilos são
“herdáveis”.
Usualmente ...
Propriedades relativas a texto
são herdadas
Propriedades relativas a layout
não são herdáveis
.
Layout
1.Modelo caixa
2.Fluxo (“propriedade display”)
3.Posição
4.Flutuação
Modelo caixa
Content
Padding
Border
Margin
Modelo Caixa
Content
Declarando margin ou
padding
margin: 1em;
Todas as margens = 1em
margin: 1em 2em;
Superior e inferior = 1em e direita e esquerda =
2em
margin: 1em 2em 3em 4em ;
Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em
Declarando margin ou
padding
margin: 1em;
Todas as margens = 1em
margin: 1em 2em;
Superior e inferior = 1em e direita e esquerda =
2em
margin: 1em 2em 3em 4em ;
Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em
Movimento
do relógio
Fluxo (“propriedade display”)
Em linha (inline)
Mostra na mesma linha
Ex: <span>, <a>, <input>, <img> ..
Nível de bloco (block)
Mostra em uma linha posterior
Ex: <h1>,<p>, <ul>, <div>
Exemplo
<p> Click <a href=""> aqui </a> </p>
a { display: block; }
Click
aqui
Posição
static (padrão)
absolute
relative
fixed
Posição
static (padrão)
absolute
relative
fixed
Flutuação
(float)
Exercícios
css-walkthrough
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar