Introdução ao HTML e CSS

Introdução ao HTML
e CSS
Prof. Sérgio Souza Costa

Obs: Alguns slides foram elaborados pela professora Vanesssa

O que o cliente (navegador web) faz ....

HTML Timeline

vs.

1990

1995

1996 1997

1998

1999

2000

2001

XHTML
2.0
Begins…

HTML
1.0

RFC
1866

2002

Logo
oficial do
Html5

201
0

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

HTML
● 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.

Tags, elementos e atributos
● 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.

● 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

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 >

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

Bad Tags
Tag

Explanation

b

Presentational. Use strong instead.

basefont

Deprecated.

big

Presentational. Use CSS instead.

center

Deprecated.

dir

Deprecated.

font

Deprecated.

hr


i

Presentational. Use em instead.

u

Deprecated.

Bad Tags
Tag

Explanation

isindex

Deprecated.

menu

Deprecated.

s

Deprecated.

small


strike

Deprecated. Use del instead.

tt


Good tags: tags que tem semântica
relacionada
<p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...

O que pode ter no HTML ?

Elementos estruturantes

HTML – Seção HEAD
● 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>

Elemento TITLE
● 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.

Elemento TITLE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page do Sérgio Costa</title>
</head>
<body>
</body>
</html>

Elemento BASE
● 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” />

Elemento LINK
● 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”/>

Elemento META
● 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 = “ ” />

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>

Elemento META
● Um dos elementos do meta é o HTTP-EQUIV.
● Uma das funcionalidades é dizer ao navegador o tipo de
dado que ele encontrará no documento.

Elemento META
● Um exemplo de uso comum do atributo HTTP-EQUIV é
promover a mudança automática de páginas, atribuindolhe o valor Refresh.
view-source:http://www.dpi.inpe.br/~scosta/
<meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">

Elemento SCRIPT
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>

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>

Elemento STYLE (CSS)
Incorpora ao documento HTML, a folha de estilos
<style type = “text/css>
grupo{nome_atributo: valor;}
</style>

CSS será visto
mais a frente

HTML – Seção BODY
● 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>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>



Elementos chaves

Parágrafos e Títulos

Prudência com as
tags de títulos.

Tags de Formatação

<i> x <em>
<b> x <strong>
<del> x <strike>

Tags de Formatação

NÃO usem tags de
formatação, apenas
"strong" e "em", que
tem uma semântica
associada.
<i> x <em>
<b> x <strong>
<del> x <strike>


Elementos chaves


Elementos chaves

Listas e dados

Listas
● 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
<ul>
<li> ... </li>
<li> ... </li>
</ul>

Listas
● 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

<ol>
<li> ... </li>
<li> ... </li>
</ol>

Listas
● As listas podem ser compostas

<ul>
<li> ... </li>
<ul>
<li> ... </li>
<li> ... </li>
</ul>
</ul>

● Nivel 1
● Nivel 2
● Nível 2
● Nível 1

Listas
● 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)

<ul type = square>
<li> ... </li>
<ul type = circle>
<li> ... </li>
<li> ... </li>
</ul>
</ul>

Com CSS podemos
criar outros estilos
para as listas.

Tabelas
● 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.

Tabelas
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

Tabelas
● Linhas de cabeçalho podem ser definidas utilizando a
tag <th>, de table header, o que definirá o texto como
negrito e centralizado
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

Tabelas
● Para inserir uma legenda à tabela, usa-se a tag
<caption>
<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>


Elementos chaves
Listas e dados

Links e imagens

Hiperlink (Anchor)
● 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
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

Imagens
● 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

Imagens
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley
face" width="42" height="42">
</body>
</html>


Elementos chaves
Listas e dados

Formulários

Links e imagens

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.

Formulários
● A tag <form> define uma área de formulário.
<form>
...
elementos de entrada
...

</form>

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

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>

Formulários - Tipos
Text

Radio

Checked
Submit

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>
É aceito no
HTML
Mistura 4.01
strict e no
apresentação
XHTML
com estrutura

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>

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;}

Chaves

Ponto e virgula

h1 {
color: red;
font-size: 12px;
}
Dois pontos

CSS Sintaxe

1.Seleção
2.Declaração
3.Cascata

Seleção
Tipos de seleção
a. element
b. class
c. id
d. posição no documento

1. Element

p{}
Seleciona todos elemento <p>, em todo o
documento HTML

2. Class

.menu { }
Seleciona todos os elementos da classe "menu"

. significa "esse é um nome de uma
classe"

3. id

#rodape { }
Seleciona o elemento com id "rodape"

# significa "esse é um nome de um id"

4. posição no documento
<div id ="rodape">
<p> aqui é aplicada </p>
<span>aqui nao se aplica</span>
</div>
<p>aqui nao se aplica</p>

#rodape p { color:red; }
Seleciona todos elementos "p" descendentes de
rodape.
aqui é aplicada
aqui nao se aplica
aqui nao se aplica

<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>

p.primeiro { color:red; }
Seleciona todos elementos "p" descendentes de
rodape.
aqui é aplicada
aqui nao se aplica
aqui nao se aplica

#header div.content form p em.required {}

O que estamos selecionando pelo
seletor acima ?

Pseudo classes

a:link {}
a:visited {}
a:hover {}
a:active {}

/* link não visitado */
/* link visitado */
/* mouseover */
/* link selecionado */

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" ...

granularidades
border
border-color
border-bottom
border-width
border-left
border-top
border-right
....

granularidades
border

font

border-color
border-bottom
border-width
border-left
border-top
border-right
....

font-family
font-size
font-style
font-weight

Existe uma alternativa mais
simples
shorthand

Existe uma alternativa mais
simples
shorthand
border: 1px solid #000
É equivalente a:

border-width: 1px
border-style: solid
border-color: #000

Podemos mudar especificas partes
no estilo de um elemento
p { border: 1px solid red; }
p.intro {border-color:blue;}

O que estamos fazendo aqui ?

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
tamanho da fonte.
width: 2em;
font-size: 2em;

HTML5
ao valor em
usaremos corrente
para fonts e
não mais px.

% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte

do

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
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”.

definição
ESPECIFICIDADE.

p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.

definição
p {color: red;}
p {color: blue;}
A ultima declaração é
elementos “p”.

ESPECIFICIDADE.

A última
a valida para
declaração
mais
específica.

todos

<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

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
Atenção,
nem
#blog, terá cor vermelha. 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

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
Movimento
do relógio

margin: 1em 2em 3em 4em ;

Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em

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)

Introdução ao HTML e CSS

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Introdução ao HTML e CSS

Mais de Sérgio Souza Costa

Introdução ao HTML e CSS