Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
SIW_Aula04
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
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
Continue navegando
Materiais relacionados
2 pág.
461 pág.
Perguntas relacionadas
Compartilhar