Curso Design Gráfico HTML

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

4 HTML 5 – básico II

As quais também falamos, não com palavras de sabedoria humana, mas com as que o Espírito Santo
ensina, comparando as coisas espirituais com as espirituais. 1 Coríntios 2:13

1 Capítulo 4 - HTML 5 básico II Tuesday, 28 de February de 12

DWEB - Design para Web / Carlos José

Contato

Carlos José

carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n



Objetivo da Aula

Apresentar a linguagem
de marcação HTML 5 com
seus conceitos básicos,
bem como a construção
de documentos.



Agenda

n Listade tag’s e
atributos
n Exercícios



Introdução as linguagens de marcação

n  Introdução
î Lista de Tags e atributos
n  Astags apresentadas aqui formam uma compilação
das deﬁnições oﬁciais da linguagem.
î  http://www.w3schools.com
î  http://www.htmldog.com



HTML - <img>

n  Lista de Tags e atributos
î  HTML <img> tag
n  Deﬁnição e forma de uso: A tag <img> incorpora uma
imagem em uma página HTML.
î  Observe que as imagens não são tecnicamente inserido em
uma página HTML, apenas um forma de link para onde a
imagem esteja armazenada.
î  A tag <img> tem dois atributos obrigatórios: src e alt .
n  Diferenças entre HTML 4.01, XHTML e HTML 5
î  No HTML a tag <img> não tem nenhuma marca de ﬁm.
î  Em XHTML a tag <img> devem ser fechadas corretamente.
î  Os atributos "alinhamento", "border", "hspace", e "vspace"
estão em desuso em HTML 4.01, e não são suportados em
XHTML 1.0 Strict DTD.



HTML - <img>

î HTML <img> tag
n  Mozilla Firefox e o atributo alt
î  Dica: O atributo alt é o texto alternativo utilizado para ser
carregado caso a imagem não esteja disponível, não deve
ser utilizado como um texto que aparece quando
repousamos o mouse sobre uma imagem ou mapa de
imagem.
î  Para mostrar um texto quando repousamos o mouse sobre
uma imagem ou mapa de imagem, use o atributo title, como
este:
§  <img src=“img.gif" alt=“img" title="Angry face" />



HTML - <img>

n  Atributos obrigatórios
î  DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
alt text Especifica um texto alternativo para uma imagem STF

src URL Especifica a URL de uma imagem STF



HTML - <img>

n  Atributos opcionais

align top, bottom, middle, left, Em desuso. Use CSS em vez disso. TF
right Especifica o alinhamento de uma imagem de acordo com os elementos que o
cercam.
border pixel Em desuso. Use CSS em vez disso. TF
Especifica a largura da borda ao redor de uma imagem.

height pixel or % Em desuso. Use CSS em vez disso. STF
Especifica a altura da imagem.
width pixel or % Em desuso. Use CSS em vez disso. STF
Especifica a largura da imagem.
hspace pixel Em desuso. Use CSS em vez disso. TF
Especifica o espaço em branco no lado esquerdo e direito da imagem
vspace pixel Em desuso. Use CSS em vez disso. TF
Especifica o espaço em branco no topo e no fundo de uma imagem



HTML – exe04.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“utf-8”/>
<title>Inserindo imagem</title>
</head>
<body>
<h1>Inserindo imagem</h1>
<hr />
<h2>Nome da imagem: vela.jpg</h2>
<img src="imagens/vela.jpg" alt="vela.jpg" title="Vela, cuidado para
não se queimar!!!" />
<hr />
<p>Observe que em HTML/XHTML a imagem não será incorporada ao
documento, apenas fazemos referência para onde a imagem está
armazenada.</p><p>Neste caso o documento exe04.html tem que ser copiado junto
com a pasta imagens.</p><p>Os dois atributos obrigatórios para a tag
<img> são: src - URL onde a imagem está armazenada e alt -
texto alternativo que entra em ação quando a imagem não
é carregada.</p>
</body>
</html>



HTML – <ol> Lista ordenada

î HTML <ol> tag
n  Definiçãoe forma de uso: A tag <ol> define uma lista
ordenada.
î  A lista pode ser numérica ou alfabética
î  Os atributos da tag <ol> estão em desuso em HTML 4.01, e
não são suportados em XHTML 1.0 Strict DTD.
n  Dica
î  Use CSS para definir o tipo da lista



HTML – <ol> Lista não ordenada

î HTML <ol> tag
start start_on_number Em desuso. Use CSS em vez disso. TF
Especifica o ponto inicial de uma lista.

type A, a, I, i, 1 Em desuso. Use CSS em vez disso. TF
Especifica o tipo de pontos que serão utilizados.



HTML – <ul> Lista não ordenada

î HTML <ul> tag
n  Definição e forma de uso: A tag <ul>define uma lista
não ordenada (tipo marcadores).
î  Os tipos disc, square, circle, estão em desuso em HTML
4.01, e não são suportados em XHTML 1.0 Strict DTD.
n  Dica
î  Use CSS para definir o tipo de lista.



HTML – <ul> Lista não ordenada

î HTML <ul> tag
type disc, square, circle Em desuso. Use CSS em vez disso. TF
Especifica o tipo da lista



HTML – <li> Itens de uma Lista

î HTML <li> tag
n  Definição e forma de uso: A tag <li> define um item
da lista.
î  A tag <li> é utilizada tanto a lista ordenada (<ol>) e não
ordenada (<ul>).
î  Os atributos da tag <li> estão em desuso em HTML 4.01, e
não são suportados em XHTML 1.0 Strict DTD.
n  Dica
î  Use CSS para definir o item da lista.


HTML – exe05.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“utf-8” />
<title>Listas</title>
</head>
<body>
<h1>Lista Ordenada e Não Ordenada</h1>
<hr />
<ol>
<li>exe01.html <a href="exe01.html">Clique aqui.</a></li>
<li>exe02.html <a href="exe02.html">Clique aqui.</a></li>
</ol>
<ul>
<li>exe03.html <a href="exe03.html" target="_blank">Clique aqui.</a></
li>
<li>exe04.html <a href="exe04.html" target="_blank">Clique aqui.</a></
li>
</ul>
<hr />
</body>
</html>


HTML - <a> criando hiperlinks

î HTML <a> tag
n  Deﬁnição e forma de uso: A tag <a> deﬁne uma
âncora. Uma âncora pode ser usado de duas
maneiras:
î  1. Para criar um link para outro documento, usando o
atributo href.
§  O atributo mais importante da tag <a> é o atributo href,
o que indica o destino do link.
î  2. Para criar um marcador em um documento, usando o
atributo nome.
î  Nenhuma.

n  Dica
î  Use CSS para formatar a parência do link.



HTML - <a> criando hiperlinks

î HTML <a> tag
href URL Especifica o destino de um link. STF
name section_name Especifica o nome de uma âncora. STF

target _blank, _parent, Especifica onde e como o documento deve abrir. TF
_self, _top



HTML – exe06.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset=“utf-8” />
<title>Link âncora</title>
</head>
<body>
<a name="topo"></a>
<h1>Link âncora</h1>
<hr />
<p>Para visualizar informações do capítulo 8, <a
href="#c8">clique aqui.</a></p>
<h2>Capítulo 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
...
<a name="c8"></a><h2>Capítulo 8</h2>
...
</body>
</html>
Texto utilizado do site gerador de parágrafos: http://www.lipsum.com



HTML – Listas: Exercício de fixação - exe07.html



Perguntas

?


Considerações Finais

n  Atenção
î Revisar os conceitos e fundamentos do HTML
î Tentar refazer os documentos HTML pelo o que
você vê no navegador, ou seja, o resultado ﬁnal.

Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,
julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;
http://www.htmldog.com/; http://www.w3schools.com


Curso Design Gráfico HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Curso Design Gráfico HTML

Similaire à Curso Design Gráfico HTML (20)

Plus de Claudenio Alberto

Plus de Claudenio Alberto (19)

Curso Design Gráfico HTML