12. 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
13. 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.
14. 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.
15. 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
17. 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 >
18. 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
19. Bad 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.
25. 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>
26. HTML – Seção HEAD
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.
27. 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>
28. HTML – Seção HEAD
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” />
29. HTML – Seção HEAD
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”/>
30. HTML – Seção HEAD
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 = “ ” />
31. 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>
32. HTML – Seção HEAD
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.
33. HTML – Seção HEAD
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/">
34. HTML – Seção HEAD
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>
35. 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>
36. HTML – Seção HEAD
Elemento STYLE (CSS)
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>
CSS será visto
mais a frente
37. 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>
38. O que pode ter no HTML ?
Elementos estruturantes
39. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
41. HTML – Seção BODY
Parágrafos e Títulos
Prudência com as
tags de títulos.
42. HTML – Seção BODY
Tags de Formatação
<i> x <em>
<b> x <strong>
<del> x <strike>
43. HTML – Seção BODY
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>
44. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
45. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
47. HTML – Seção BODY
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>
48. HTML – Seção BODY
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>
49. HTML – Seção BODY
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
50. HTML – Seção BODY
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.
51. HTML – Seção BODY
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.
53. HTML – Seção BODY
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>
<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>
54. HTML – Seção BODY
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>
55. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Links e imagens
56. HTML – Seção BODY
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>
57. HTML – Seção BODY
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
58. HTML – Seção BODY
Imagens
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley
face" width="42" height="42">
</body>
</html>
59. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Formulários
Links e imagens
60. 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.
61. HTML – Seção BODY
Formulários
● A tag <form> define uma área de formulário.
<form>
...
elementos de entrada
...
</form>
62. 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
63. 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>
64. HTML – Seção BODY
Formulários - Tipos
Text
Radio
Checked
Submit
74. Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>
Mistura
apresentação
com estrutura
75. 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
91. 2. Class
.menu { }
Seleciona todos os elementos da classe "menu"
. significa "esse é um nome de uma
classe"
92. 3. id
#rodape { }
Seleciona o elemento com id "rodape"
# significa "esse é um nome de um id"
93. 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
94. 4. posição no documento
<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
95. 4. posição no documento
#header div.content form p em.required {}
O que estamos selecionando pelo
seletor acima ?
96. Pseudo classes
a:link {}
a:visited {}
a:hover {}
a:active {}
/* link não visitado */
/* link visitado */
/* mouseover */
/* link selecionado */
100. CSS define diversas coisas que
podemos declarar. Exemplo
font
color
background-color
border
(essas são as propriedades)
101. 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);
104. Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
border
font
border-color
border-bottom
border-width
border-left
border-top
border-right
....
font-family
font-size
font-style
font-weight
109. Unidades absolutas
Pixels (px) are unidades absolutas.
Elas são sempre do mesmo “tamanho”.
Independentemente do dispositivo
110. 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
111. 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
113. Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200 % ;}
h1 a {font-size: 75%;}
114. 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)
115. Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
116. Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
Considerando o tamanho de 16 pixels
para o browser, temos 0.75 * 16 = 12
118. Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
119. Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
Especificidade
Herança
120. 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”.
121. Usualmente, as declarações
são aplicadas na ordem de
definição
ESPECIFICIDADE.
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
122. Usualmente, as declarações
são aplicadas na ordem de
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
123. <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 ?
124. Regras para determinar a
especificade
Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
●
125. Regras para determinar a
especificade
Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
●
126. 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
128. #blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
#blog, terá cor vermelha.
129. #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”.
135. 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
136. 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
137. 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>
