SIW_Aula04

UFBA

Enviado por Gustavo Sampaio em 07/11/2013

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Sistemas Web 
Prof.: Cássio Prazeres 
(prazeres@dcc.ufba.br) 
HTML 
O que é HTML? 
• Linguagem para descrever páginas Web 
• Significa: HyperText Markup Language 
– Versão atual: 4.01 
• Linguagem de marcação 
– Não é uma linguagem de programação 
– Conjunto de marcas (tags) para descrever páginas 
Web 
Marcas HTML 
• Palavras-chave entre “<>” 
– <html> 
• Normalmente aparecem em pares 
– <b> e </b> 
– A primeira é chamada de marca inicial e a segunda 
de marca final 
• Ou marca de abertura e marca de fechamento 
• Todas as marcas HTML 
– http://www.w3schools.com/tags/default.asp 
Documentos HTML 
• Conjunto de marcas HTML e texto que 
descrevem uma página Web 
– Também chamados de página Web 
• Navegadores leem documentos HTML e os 
exibe como páginas Web 
<html> 
<body> 
 
<h1>My First Heading</h1> 
 
<p>My first paragraph.</p> 
 
</body> 
</html> 
Criando documentos HTML 
• O que você não precisa 
– Editor HTML, servidor Web e Web site 
• Pode-se usar um simples editor de texto 
– Notepad ou Gedit 
• Extensão: htm ou html? 
– Não tem diferença 
HTML básico (1) 
• Cabeçalhos 
– Definidos pelas marcas <h1> a <h6> 
– Extremamente importante 
• Máquinas de busca 
<html> 
<body> 
 
<h1>This is heading 1</h1> 
<h2>This is heading 2</h2> 
<h3>This is heading 3</h3> 
<h4>This is heading 4</h4> 
<h5>This is heading 5</h5> 
<h6>This is heading 6</h6> 
 
</body> 
</html> 
HTML básico (2) 
• Parágrafos 
– Definidos pela marca <p> 
<html> 
<body> 
 
<!-- This is a comment --> 
 
<p>This is a paragraph.</p> 
<p>This is a paragraph.</p> 
<p>This is a paragraph.</p> 
 
</body> 
</html> 
HTML básico (3) 
• Linhas 
– Definidos pela marca <hr /> 
<html> 
<body> 
<p>The hr tag defines a 
horizontal rule:</p> 
<hr /> 
<p>This is a paragraph</p> 
<hr /> 
<p>This is a paragraph</p> 
<hr /> 
<p>This is a paragraph</p> 
</body> 
</html> 
HTML básico (4) 
• Quebras de linha 
– Definidos pela marca <br /> 
<html> 
<body> 
 
<p>This is<br />a para<br />graph 
with line breaks</p> 
 
</body> 
</html> 
HTML básico (5) 
• Imagens 
– Definidos pela marca <img> 
<html> 
<body> 
 
<img src="w3schools.jpg" 
width="104" height="142" /> 
 
</body> 
</html> 
Elementos HTML 
• Tudo que está entre uma marca de início e uma 
marca de fim 
– Inclusive as próprias marcas 
– Podem conter atributos 
– Podém conter outros elementos (aninhados) 
– Importante: não esquecer a marca final (fechamento) 
– Use caixa baixa: <b> em vez de <B> 
• Alguns elementos HTML são vazios 
– <br> ou <br /> 
– <img src="w3schools.jpg” /> 
 
Atributos HTML 
• Elementos HTML podem conter atributos 
– Informação adicional sobre o elemento 
– Especificado na marca de início do elemento 
– Pares nome/valor: name=“value” 
– Sempre use as aspas 
– Use caixa baixa: width=“10” em vez de WIDTH=“10” 
ou Width=“10” 
• Atributos padrões 
– http://www.w3schools.com/tags/ref_standardattribut
es.asp 
Formatação de texto 
<html> 
<body> 
 
<p><b>This text is bold</b></p> 
<p><strong>This text is strong</strong></p> 
<p><big>This text is big</big></p> 
<p><i>This text is italic</i></p> 
<p><em>This text is emphasized</em></p> 
<p><code>This is computer output</code></p> 
<p>This is<sub> subscript</sub> and 
<sup>superscript</sup></p> 
<p>This is <del>deleted</del> and 
<ins>inserted</ins> texts</p> 
 
</body> 
</html> 
http://www.w3schools.com/html/html_formatting.asp 
Fontes (1) 
<html> 
<body> 
 
<p> 
<font size="5" face="arial" color="red"> 
This paragraph is in Arial, size 5, and in 
red text color. 
</font> 
</p> 
<p> 
<font size="3" face="verdana" color="blue"> 
This paragraph is in Verdana, size 3, and in 
blue text color. 
</font> 
</p> 
<p>The font element is deprecated in HTML 4. 
Use CSS instead!</p> 
</body> 
</html> 
Fontes (2) 
• A marca <font> foi depreciada (deprecated) no 
HTML 4 e removida do HTML 5 
 
• Segundo a W3C, deve-se usar CSS para definir 
a fonte e outras propriedades de exibição nos 
diversos elementos HTML 
Estilos (1) 
• CSS (Cascading Style Sheets) 
– Folha de estilo em cascata 
• Com HTML 
– Em um arquivo CSS separado 
– Em um elemento <style> na seção <head> do 
HTML 
– Em um atributo style diretamente no elemento 
HTML 
Estilos (2) 
<html> 
<body style="background-color:PowderBlue;"> 
 
<h1>Look! Styles and colors</h1> 
 
<p style="font-family:verdana;color:red;"> 
This text is in Verdana and red</p> 
 
<p style="font-family:times;color:green;"> 
This text is in Times and green</p> 
 
<p style="font-size:30px;">This text is 30 
pixels high</p> 
 
<h1 style="text-align:center;">Center-
aligned heading</h1> 
 
</body> 
</html> 
Elos e âncoras (1) 
• Em HTML um elo (link ou hyperlink) é uma 
palavra, um grupo de palavras ou uma imagem, 
que permite a navegação para outro documento 
HTML ou para uma nova seção dentro do 
documento atual 
• Definidos pela marca <a> 
– Criar um elo para outro documento usando o atributo 
href 
– Criar uma âncora dentro de um documento usando o 
atributo name 
Elos e âncoras (2) 
<html> 
<body> 
 
<p> 
<a href="http://www.w3schools.com"> 
This is a link</a> 
</p> 
 
<p> 
<a name="anchor"> 
This is an anchor</a> 
</p> 
 
</body> 
</html> 
Tabelas 
<html> 
<body> 
 
<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> 
</body> 
</html> 
Listas 
<html> 
<body> 
 
<h4>An Unordered List:</h4> 
<ul> 
 <li>Coffee</li> 
 <li>Tea</li> 
</ul> 
 
<h4>An Ordered List:</h4> 
<ol> 
 <li>Coffee</li> 
 <li>Tea</li> 
</ol> 
 
<h4>A Definition List:</h4> 
<dl> 
 <dt>Coffee</dt> 
 <dd>- black hot drink</dd> 
 <dt>Milk</dt> 
 <dd>- white cold drink</dd> 
</dl> 
 
</body> 
</html> 
Formulários (1) 
• Definidos pela marca <form> 
• Usados para passar dados para um servidor 
• Pode conter elementos de entrada de dados 
– text fields, checkboxes, radio-buttons, submit 
buttons, etc. 
 
Formulários (2) 
<html> 
<body> 
 
<form> 
 
<table border="0"> 
<tr> 
<td>Login:</td> 
<td><input type="text" name="name" /></td> 
</tr> 
 
<tr> 
<td>Password:</td> 
<td><input type="password" name="pwd" /> 
</td> 
</tr> 
</table> 
 
<input type="submit" value="Submit" /> 
 
</form> 
 
</body> 
</html> 
Formulários (3) 
<html> 
<body> 
 
<form> 
<p>Name: <input type="text" name="name" /> 
</p> 
<p> Sex: 
<input type="radio" name="sex" 
value="male" /> Male 
<input type="radio" name="sex" 
value="female" /> Female 
</p> 
<p> Preferences: </p> 
 
<input type="checkbox" name="vehicle" 
value="Bike" /> I have a bike <br /> 
<input type="checkbox" name="vehicle" 
value="Car" /> I have a car <br /> 
<input type="checkbox" name="vehicle" 
value="Car" /> I have a horse 
</form> 
 
</body> 
</html> 
Frames HTML 
• Permite exibir mais que um documento HTML em 
uma única janela do navegador 
– Cada documento é chamado de frame 
– Cada frame é independente dos outros 
• Desvantagens (porque não usar) 
– Não devem ser suportados nas próximas versões do 
HTML
– Difíceis de utilizar (Ex.: imprimir a página inteira) 
– O desenvolvedor Web deve controlar mais de um 
documento Web por vez 
http://www.icmc.usp.br/ensino/material/html/frames.html 
Frames internos (iframe) 
• Usado para exibir uma página Web dentro de 
outra página Web 
<html> 
<body> 
 
<iframe src="demo_iframe.htm" 
name="iframe_a"></iframe> 
 
<p><a href="http://www.w3schools.com" 
target="iframe_a">W3Schools.com</a></p> 
 
<p><b>Note:</b> Because the target of the 
link matches the name of the iframe, the 
link will open in the iframe.</p> 
 
</body> 
</html> 
Cores (1) 
• Combinação RGB: RED, GREEN e BLUE 
– Notação hexadecimal 
• Exemplo: #000000 (preto) 
– Notação RGB 
• Exemplo: rgb(0,0,0) (preto) 
• 16 milhões de cores 
– Combinação red, green e blue com valores de 0 a 255 
– (255,255,255): 255 em hexa é FF 
• Cor branca: #FFFFFF ou rgb(255,255,255) 
Cores (2) 
Cores (3) 
<html> 
<body> 
 
<p style="background-color:#FFFF00"> 
Color set by using hex value 
</p> 
 
<p style="background-
color:rgb(255,255,0)"> 
Color set by using rgb value 
</p> 
 
<p style="background-color:yellow"> 
Color set by using color name 
</p> 
 
</body> 
</html> 
 
http://www.w3schools.com/html/html_colornames.asp 
HTML head (1) 
• Contêiner para todos os elementos de cabeçalho 
– <title>: define um título para o documento 
– <base>: especifica um endereço padrão ou um 
destino padrão para todos os elos em uma página 
– <link>: define a relação entre um documento e um 
recurso externo 
– <meta>: fornece metadados sobre o documento 
HTML 
– <script>: usado para definir um script do lado do 
cliente, como um JavaScript 
– <style>: usado para definir informações de estilo para 
um documento HTML 
 
HTML head (2) 
<html> 
<head> 
 <title>Title of the document</title> 
 <base href="http://www.w3schools.com/images/" /> 
 <base target="_blank" /> 
 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 
 <style type="text/css"> 
 body {background-color:yellow} 
 p {color:blue} 
 </style> 
 <script type="text/javascript"> 
 document.write("Hello World!") 
 </script> 
</head> 
 
<body> 
The content of the document...... 
</body> 
 
</html> 
HTML meta (1) 
• Sempre vai dentro do elemento head 
– Pode ter mais de um elemento meta em head 
• Fornece metadados sobre o documento HTML 
– Metadados não serão exibidos na página, poderá ser 
processado por máquina 
• São normalmente usados para especificar descrição da 
página, palavras-chave, autor do documento e outros 
metadados 
• Pode ser usado por navegadores, motores de busca 
(palavras-chave), ou outros Serviços Web 
– Uso indevido da marca meta, para uma classificação mais 
elevada nas buscas 
• como repetir palavras-chave ou usar palavras-chave errada 
• a maioria dos motores de busca têm parado de usar meta para 
indexar classificar as páginas 
HTML meta (2) 
<html> 
<head> 
 
 <title>Title of the document</title> 
 
 <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> 
 
 <meta name="keywords" content="HTML, CSS, XML" /> 
 
</head> 
 
<body> 
The content of the document...... 
</body> 
 
</html> 
XHTML (1) 
• Extensible HyperText Markup Language é uma 
reformulação da linguagem de marcação 
HTML, baseada em XML 
• XHTML vs. HTML 
– Quase idêntico ao HTML 4.01 
– Versão mais rigorosa e limpa do HTML 
– HTML definido como uma aplicação XML 
– Suortado pela maioria dos navegadores 
XHTML (2) 
• Porque XHTML? 
– Muitas páginas na Web contêm “bad” HTML 
• Os navegadores precisam corrigir os erros 
<html> 
<head> 
<title>This is bad HTML</title> 
<body> 
<h1>Bad HTML 
<p>This is a paragraph 
</body> 
• XHTML é HTML 4.01 em forma de XML 
– Deve ser bem escrito e bem formado 
Diferenças mais importantes entre 
XHTML e HTML (1) 
• Os elementos html, head, title e body são obrigatórios 
• Elementos XHTML devem estar corretamente 
aninhados 
– Errado: <b><i>This text is bold and italic</b></i> 
– Correto: <b><i>This text is bold and italic</i></b> 
• Elementos XHTML devem estar sempre fechados 
– Errado: <p>This is a paragraph 
– Correto: <p>This is a paragraph</p> 
• Elementos vazios também devem ser fechados 
– Errado: <br> 
– Correto: <br /> 
• Elementos XHTML devem estar em letras minúsculas 
Diferenças mais importantes entre 
XHTML e HTML (2) 
• Documentos XHTML devem ter um elemento raiz 
– <html> ... </html> é o elemento raiz 
• Nomes de atributos devem estar em minúsculas 
• Valores de atributos devem estar entre aspas 
• Minimização atributo é proibida 
– Errado: <input type="checkbox" checked> 
– Correto: <input type="checkbox" checked="checked" /> 
• Um documento XHTML deve ter uma declaração 
DOCTYPE 
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Referências dessa aula 
• Todos os exemplos dessa aula são do W3Schools 
– HTML Basic Tutorial (4.01) 
• http://www.w3schools.com/html/default.asp 
– XHTML 
• http://www.w3schools.com/html/html_xhtml.asp 
• Sugestões de leitura 
– Deitel, P. J., Deitel, H. M. Ajax, rich internet 
applications e desenvolvimento web para 
programadores. Pearson, 1ª. Edição, 2008. 
• Capítulo 2: Introdução à XHTML 
– HTML5 Tutorial 
• http://www.w3schools.com/html5/default.asp