Unb 2012.1 - dweb - 04 - html5 básico - parte ii

Curso Superior de Tecnologia em Design Gráfico

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

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

DWEB - Design para Web / Carlos José


Contato

Carlos José

[email protected] 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 Lista de tag’s e atributos

n Exercícios



Introdução as linguagens de marcação

n  Introdução î Lista de Tags e atributos

n  As tags apresentadas aqui formam uma compilação das definições oficiais da linguagem.

î  http://www.w3schools.com î  http://www.htmldog.com



HTML - <img>

n  Lista de Tags e atributos î HTML <img> tag

n  Definiçã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 fim. î  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>


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 î  DTD indica em que DTD o atributo é permitido. S=Strict,


align top, bottom, middle, left, right

Em desuso. Use CSS em vez disso. Especifica o alinhamento de uma imagem de acordo com os elementos que o cercam.

TF

border pixel Em desuso. Use CSS em vez disso. Especifica a largura da borda ao redor de uma imagem.

TF

height pixel or % Em desuso. Use CSS em vez disso. Especifica a altura da imagem.

STF

width pixel or % Em desuso. Use CSS em vez disso. Especifica a largura da imagem.

STF

hspace pixel Em desuso. Use CSS em vez disso. Especifica o espaço em branco no lado esquerdo e direito da imagem

TF

vspace pixel Em desuso. Use CSS em vez disso. Especifica o espaço em branco no topo e no fundo de uma imagem

TF



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

n  Lista de Tags e atributos î HTML <ol> tag

n  Definição e forma de uso: A tag <ol> define uma lista ordenada.

î  A lista pode ser numérica ou alfabética

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  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

n  Lista de Tags e atributos î HTML <ol> tag



start start_on_number Em desuso. Use CSS em vez disso. Especifica o ponto inicial de uma lista.

TF

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

TF



HTML – <ul> Lista não ordenada

n  Lista de Tags e atributos î HTML <ul> tag

n  Definição e forma de uso: A tag <ul>define uma lista não ordenada (tipo marcadores).

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  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

n  Lista de Tags e atributos î HTML <ul> tag



type disc, square, circle Em desuso. Use CSS em vez disso. Especifica o tipo da lista

TF



HTML – <li> Itens de uma Lista

n  Lista de Tags e atributos î 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>).

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  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

n  Lista de Tags e atributos î HTML <a> tag

n  Definição e forma de uso: A tag <a> define 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. n  Diferenças entre HTML 4.01, XHTML e HTML 5

î  Nenhuma. n  Dica

î  Use CSS para formatar a parência do link.



HTML - <a> criando hiperlinks

n  Lista de Tags e atributos î 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, _self, _top

Especifica onde e como o documento deve abrir. TF



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

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

Documents

Unb 2012.1 - dweb - 04 - html5 básico - parte ii