2 - HTML

HTML
HTML
HTML (HyperText Markup Language) Adoptado como norma na WWW Derivada do SGML(Standard Generalized Markup Language) Utilizada para produzir documentos web
Desenvolvimento de pginas e criao de sites

HTML
Ficheiros de texto com tags e referncias para os vrios tipos de informao Podem ser criados num editor de texto bsico (notepad, vi, ...) Editores WYSIWYG (Frontpage, Dreamweaver, etc.) Saber utilizar as tags importante para adicionar facilidades que o editor no suporte ou para alterar documentos (tabelas, forms, frames, ...)
3
URLs
Uniform Resource Locators Cada recurso disponibilizado na Internet tem um endereo que pode ser codificado atravs de um URL
Documentos HTML, imagens, vdeo clips, programas, etc.
Constitudo por 3 partes:

Denominao do mecanismo utilizado para aceder ao recurso (esquema) Nome da mquina que contm o recurso Nome do recurso (caminho para o ficheiro)
Exemplos
http://www.w3.org/TR/REC-html40 mailto:joe@someplace.com
URLs relativos
No contm qualquer esquema de nomeao Caminho (path) refere-se a um recurso na mquina onde reside o documento corrente So resolvidos para URLs completos utilizando um URL base Base: http://www.acme.com/support/intro.html <A href=suppliers.html> Suppliers</A> Resultado: http://www.acme.com/support/suppliers.html Mesma base <IMG src=../icons/logo.gif alt=logo> Resultado: http://www.acme.com/ icons/logo.gif
5
Tags
Componente fundamental da estrutura Heads, tables, paragraphs e lists As tags so utilizadas para marcar os elementos de um documento HTML Start-tags:<H1>, End-tags:</H1> Alguns elementos podem incluir atributos ou seja informao adicional contida na start tag O HTML no case-sensitive: h algumas excepes quando se usam escape sequences Nem todas as tags so suportadas por todos os browsers: neste caso o browser ignora a tag
6
Documento Bsico
<html> <head> <title>A simple HTML Example</title> </head> <body> <h1> HTML is easy to learn</h1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>and this is the second paragraph.</P> </body> </html>
Tags obrigatrias Html Head Title Body
Resultado
Para ver o HTML de uma pgina seleccione view source no browser Podem-se criar ficheiros HTML com alguns tags e us-los depois como templates
8
Tags
HTML Informa o browser que o ficheiro contm informao codificada em HTML (obrigatrio) HEAD Identifica o cabealho do ficheiro Contm o ttulo TITLE Define o ttulo do documento Identifica o seu contedo num contexto global apresentado na barra de ttulo do browser tambm utilizado para identificar a pgina em motores de pesquisa (search engines) Identifica a pgina na lista de bookmarks.
9
Tags (cont.)
BODY
Segunda parte do documento (corpo) Define o contedo do documento, apresentado na rea de texto do browser
Headings
Seis nveis (H1, H2, H3, H4, H5, H6) So apresentados utilizando fontes maiores que o texto normal (ou em bold) O primeiro Heading a ser utilizado num documento deve ser <H1> Sintaxe: <Hn> Text of Heading </Hn> No se devem saltar nveis de Headings
10
Tags-Pargrafos <P>
Espaos em branco e enters (mesmo mais do que um) so comprimidos para um espao em branco na visualizao em browser (ver exemplo bsico) A largura das linhas depende do tamanho da janela que o browser tem disponvel no momento Uma nova linha imposta pelo uso do <P> Indentaes e linhas em branco so ignoradas Se no houver <P>, o ficheiro um nico pargrafo (com excepo de texto pr-formatado) </P> no obrigatria, Podem inserir-se atributos em <P> Pode ser alinhado ao centro e direita (por omisso alinhado esquerda)
E.g. <P ALIGN=CENTER>Welcome to the world of HTML.This is the first paragraph. While short it is still a paragraph!</P>
11
Pargrafos
<h1> HTML is easy to learn</h1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P><P>and this is the second paragraph.</P>
Tem o mesmo resultado que o primeiro exemplo
Para tornar o documento HTML mais legvel e facilitar a sua edio: Cada heading deve estar numa linha diferente Utilizar line breaks quando necessrio comear uma nova seco Usar linhas em branco para separar pargrafos
12
Listas no numeradas
Start-tag: <UL> Cada item start-tag: <LI> antes do item, no necessrio end-tag End-tag: </UL>
<ul> <li> apples <li> bananas <li> grapefruit </ul>
Cada elemento <LI> pode conter vrios pargrafos
13
Listas Numeradas (ordenadas)

Start-tag: <OL> Cada item start-tag: <LI> antes do item, no necessrio end-tag End-tag: </OL>
<ol> <li> apples <li> bananas <li> grapefruit </ol>
Cada elemento <LI> pode conter vrios pargrafos
14
Listas de definies
Start-tag: <DL> Start-tag Definition Term: <DT>, no necessrio endtag Start-tag Definition Definition: <DD>, no necessrio end-tag End-tag: </DL> <DT> e <DD> podem conter vrios pargrafos ou outras listas
15
Exemplo de lista de definies

<DL> <DT>NCSA <DD>NCSA, the National Center for SupercomputingApplication, is located on the campus of the University of Illinois at Urbana-Champaign. <DT>Cornell Theory Center <DD>CTC is located on the campus of Cornell University in Ithaca, New York </DL>
16
Listas encadeadas
<ul> <li> A few New England states: <ul> <li> Vermont <li> New Hampshire <li> Maine </ul> <li>Two MidWestern states: <ul> <li> Michigan <li> Indiana </ul> </ul>
17
Texto pr-formatado
<PRE> Os Espacos contidos no texto </PRE> so considerados assim como os enters
Resultado:
Os Espacos contidos no texto so considerados assim como os enters
18
Texto pr-formatado
<PRE> pode ser usada com o atributo width (opcional) que determina o nmero mximo de caracteres que cada linha dever ter dentro do <PRE> Podem usar-se hyperlinks dentro de seces <PRE>, mas deve evitar-se usar outros tags dentro das seces <PRE> Como <,> e & tm significados especiais no HTML, devem ser introduzidos atravs das suas sequncias de escape (< > &amp)
19
BLOCKQUOTE
<P>Omit Needless words </P> <BLOCKQUOTE> <P>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. </P> <P>..William Strunck, Jr., 1918</P> </BLOCKQUOTE >
20
Line breaks e linhas horizontais

<BR> Impe uma mudana de linha sem a incluso de uma linha em branco resultante de <P> <HR> (rgua) Produz uma linha horizontal do cuomprimento da janela do browser. Pode conter atributos size e width
<HR> National Center for SuperComputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois 6180-5518<BR> <HR>
21
Formatao de caracteres
Estilos lgicos
Origem nos conceitos SGML: Contedo e apresentao so coisas diferentes Texto considerado segundo o seu significado
E.g. <H1> o Heading mais relevante, no interessa se apresentado como 24 pt Bold Times centered Se decidirmos modificar a apresentao de <H1> no temos de nos preocupar com os documentos que usam <H1> mais fcil manter a consistncia de contedo em documentos
22
Estilos lgicos
<DFN> Definio de palavra (no reconhecido em alguns browsers) <EM> nfase <CITE> Ttulos de livros, filmes,etc <CODE> Cdigo de computador <KBD> Introduo pelo teclado <SAMP> Sequncia de caracteres <STRONG> nfase mais forte <VAR> Elemento que dever ser substitudo por informao
23
Estilos lgicos (Exemplos)

<P> <dfn>NCSA</dfn> is a www browser </P> <EM> Consultants cannot reset your password unless you call the help line</EM> <p> <CITE>A Beginners Guide to HTML </CITE> <P> The <Code> stdio.h </code> header file</P> <P> Enter <kbd> password </kbd> to change your password </P> <P> <SAMP> Segmentation fault: Core dumped </SAMP> <P> <strong>Note: </strong>Always check you links <P> <code> rm </code> <var> filename </var> deletes the files <P>
24
Estilos lgicos (Resultado)
25
Formatao de caracteres
Estilos fsicos
Aparncia especfica de uma seco Se se pretende apresentar algo em itlico e no queremos que o browser o apresente de outra forma Consistncia na visualizao ser sempre apresentado da mesma forma <B> bold <I> Itlico <TT> typewriter
26
Sequncias de escape
Funes Apresentar caracteres especiais que so utilizados no HTML (e.g. <) Apresentar caracteres que no esto disponveis no cdigo ASCII simples So case sensitive
< - sequncia de escape para < >- sequncia para > & - sequncia para & à - sequncia para É - sequncia para õ sequncia para
27
Hyperlinks
Ligar texto e/ou imagens a outro documento ou seco O texto ou imagem aparecem sublinhados e so apresentados com uma cor diferente quando contm um hypertext link ou hyperlink (hiperligao) Tag <A> - ncora
Comea com <A (com um espao depois do A) Especificar o documento a que se est a fazer ligao com o parmetro HREF=filename seguido por > Introduzir o texto que vai servir como link Introduzir a end-tag </A>
E.g.<A HREF=MainStats.html>Maine</A>
28
ncoras dentro de listas

<li> The <a href="reallybigindex.html">Really Big Index</a> lists all of the tutorials content pages. <li> <a href="information/announcelist.html">Get announcements</a> by signing up for our new mailing list. <li> <a href="information/resources.html">Online Resources</a> is a compilation of Java programming resources outside of the tutorial
29
Pgina resultado
30
Links relativos e absolutos

Links relativos especificam o caminho relativo desde o documento corrente.
<A HREF=AtlanticStates/NYStats.html>New York</A>
Mais eficientes no acesso ao servidor do que links absolutos Os documentos so mais facilmente reutilizveis
Todos armazenados nas mesmas directoria No h a necessidade de saber o nome da directoria onde vo ficar Manuteno local tambm mais fcil
Links absolutos devem ser utilizados quando se ligam documentos que no esto directamente relacionados
31
Links (cont.)
Links entre seces de documentos diferentes
Documento origem
In addition to the many state parks, Main is also home to <a href="target.html#ANP">Acadia National Park</a>
Documento destino
<a NAME="ANP"></a>Acadia National Park
Links entre seces do documento corrente

Tcnica a mesma, mas o nome do ficheiro destino omitido
32
Mailto
Facilita o enviou de e-mail para um dado endereo <A HREF=mailto:emailinfo@host> Name</A> Abre uma janela de e-mail configurada para enviar um e-mail para emailinfo@host
33
Incluso de imagens
Formatos comuns: GIF ou JPEG, PNG
<img SRC="helper.gif" height=134 width=481>
<img src=ImageName> onde ImageName o URL do ficheiro de Imagem A sintaxe do URL idntica usada no parmetro HREF da Tag <A> Tamanho da imagem
Parmetros height e width (altura e largura): o browser reserva o espao apropriado para as imagens
34
Alinhamento de imagens
<html> <head><title>imagens em HTML</title> </head> <body><img SRC="dukesign.GIF" height=104 width=130>Por omisso, texto a seguir a uma imagem aparece desta forma <p><img SRC="dukesign.GIF" height=104 width=130 align=Top>Se o valor do parametro align for top, ento o texto aparece da seguinte forma. de salientar que apenas a primeira linha de texto alinhada com a imagem, e o restante aparece por baixo da imagem. <p><img SRC="dukesign.GIF" height=104 width=130 align=center>Se o valor do parametro align for center, ento o texto aparece da seguinte forma. Mais uma vez apenas a primeira linha de texto alinhada com a imagem, e o restante aparece por baixo da imagem. <p align=center><img SRC="dukesign.GIF" height=104 width=130 ALT="Este o Duke"> </p> <p align=left>Se se pretender apresentar uma imagem sem texto, esta deve ser incluida dentro de um paragrafo vazio, onde se pode definir um alinhamento que servira nao para o texto mas para a imagem contida </p> </body> </html>
35
Alinhamento de imagens
36
Texto alternativo s imagens

Alguns terminais antigos no podiam mostrar imagens. possvel desactivar o carregamento de imagens, para tornar mais rpido o carregamento das pginas quando a ligao lenta. O HTML fornece um mecanismo para substituir as imagens por texto explicativo. O atributo ALT permite especificar o texto que ser mostrado em alternativa imagem
<img SRC="dukesign.GIF" height=104 width=130 ALT="Este o Duke">
37
Imagens que so hyperlinks

Combinao da tag <A> com <IMG>
<A HREF="target.html"><img SRC="dukesign.GIF" height=52 width=65 ALT="Este o Duke"> </A>
possvel retirar a border

<A HREF="target.html"><img SRC="dukesign.GIF" BORDER=0 height=52 width=65 ALT="Este o Duke"> </A>
Atributo pode ser usado para criar borders explcitos (mais largos)
<A HREF="target.html"><img SRC="dukesign.GIF" BORDER=6 height=52 width=65 ALT="Este o Duke"> </A>
38
Ligaes externas para imagens, sons e animaes

Pode ser til abrir uma imagem numa pgina separada quando o utilizador activa uma ligao <A HREF=MyImage.gif> link anchor</A> Exemplo: usar uma imagem pequena que serve de ligao para uma imagem maior <A HREF=LargerImage.gif><IMG SRC=Smallmage.gif></A> Usa-se a mesma sintaxe para estabelecer ligaes para sons e animaes externas.
39
Ligaes externas para imagens, sons e animaes

Alguns tipos de ficheiros comuns:
plain text HTML document GIF image JPEG image WAV sound file AIFF sounf file Quicktime movie MPEG movie .txt .html .gif .jpg .wav .aiff .mov .mpeg ou .mpg
40
Background
<Body Background=filename> O background (imagem de fundo) pode ser uma textura ou uma imagem normal importante que o texto seja visvel quando se usa uma imagem de background Imagem pequena Tiling
41
Cores
Definio das cores para fundo, texto e ligaes Atributos da Tag <Body>
BGCOLOR TEXT LINK
Exemplo:
<body BGColor="#000000" text="#FFFFFF LINK="#9690CC">
Cor definida por 3 sequncias de dois dgitos cada (RGB)

000000 - preto FF0000 - vermelho vivo 00FF00 - verde FFFFFF - branco Existem algumas cores pr-definidas, mas os cdigos so entendidos por todos os browsers
http://www.w3schools.com/Html/html_colornames.asp
Graphic RGB Calculator http://www.colorpro.com/info/tools/rgbcalc.htm
42
Tabelas
Antes do aparecimento da tag <Table>, as tabelas eram formatas utilizando <PRE> A tag <Table> utilizada de duas formas:
Para apresentar dados na forma de tabela Para controlar o aspecto visual das pginas
<Table> inclui:
Cabealhos para explicar o contedo das colunas e linhas Linhas de informao Clulas que incluem cada item
43
Tabelas
<table>...</table> definio de tabela em HTML
Border, Cols, Rows, Width (percentagem ou nmero de pixels)
<caption>...</caption> apresentao do ttulo da tabela (opcional) <tr>...</tr> especificao de uma linha da tabela (poder conter clulas) <th>...</th> definio de clulas ttulo (para colunas ou linhas completas)
Texto em bold e centrado por omisso Cada clula poder conter atributos
<td>...</td> definio de clulas de informao

Texto alinhado esquerda e centrado verticalmente Cada clula poder conter atributos
44
Atributos
Definidos para utilizao dentro das tags <th> e <td> As definies dadas dentro de <th> e <td> modificam as <tr> Atributos
ALIGN(LEFT, CENTER, RIGHT): alinhamento horizontal de uma clula VALIGN(TOP, MIDDLE, BOTTOM): alinhamento vertical de uma clula COLSPAN=n: nmero de colunas que uma clula ocupa ROWSPAN=n: nmero de linhas que uma clula ocupa NOWRAP: Retirar o wrap de linha dentro de uma clula
45
Exemplo de tabela
<table BORDER COLS=5 WIDTH="100%" > <caption>Título da Tabela</caption> <tr><th>Coluna 1</th> <th>Coluna 2</th> <th>Coluna 3</th> <th>Coluna 4</th> <th>Coluna 5</th></tr> <tr><td>célula 1 coluna 1</td> <td>célula 1 coluna 2</td> <td>célula 1 coluna 3</td> <td>célula 1 coluna 4</td> <td>célula 1 coluna 5</td></tr> ... </table>
46
Exemplo de Tabela
A Tag <table> tem de conter a definio completa da tabela
Table
TH e TD em qualquer ordem Cada linha formatada independentemente das anteriores e das seguintes
47
Caption TR
Outro exemplo
<table BORDER COLS=3 WIDTH="100%" > <tr><th COLSPAN="3">Este texto vai ocupar toda a primeira linha da tabela.</th></tr> <tr><td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td></tr> <tr><td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td></tr> </table>
48
Frames
Permitem mostrar vrios documentos html de uma vez no browser prs e contras : http://www.criarweb.com/artigos/145.php A tag <frame> cria vrias zonas numa pgina web, em que
cada uma dessas zonas ocupada por um docuemnto html
Exemplo da utilizao de frames

<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
43
IFrames
IFrames significa Inline frames Resolve alguns dos problemas do frame normal A tag <iframe> inclui o conteudo de um documento html dentro
do documetno em que definido, da se chamar inline
Exemplo da utilizao de iframes

<iframe src ="html_intro.asp" width="100%" height="300"> <p>Your browser does not support iframes.</p> </iframe>
43

2 - HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2 - HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML

Desenvolvimento de pginas e criao de sites

Constitudo por 3 partes:

Tags obrigatrias Html Head Title Body

Tem o mesmo resultado que o primeiro exemplo

Cada elemento <LI> pode conter vrios pargrafos

Listas Numeradas (ordenadas)

Cada elemento <LI> pode conter vrios pargrafos

Exemplo de lista de definies

Line breaks e linhas horizontais

Estilos lgicos (Exemplos)

Estilos lgicos (Resultado)

ncoras dentro de listas

Links relativos e absolutos

Links entre seces do documento corrente

Texto alternativo s imagens

Imagens que so hyperlinks

possvel retirar a border

Ligaes externas para imagens, sons e animaes

Ligaes externas para imagens, sons e animaes

<body BGColor="#000000" text="#FFFFFF LINK="#9690CC">

Cor definida por 3 sequncias de dois dgitos cada (RGB)

Graphic RGB Calculator http://www.colorpro.com/info/tools/rgbcalc.htm

<td>...</td> definio de clulas de informao

A Tag <table> tem de conter a definio completa da tabela

Exemplo da utilizao de frames

Exemplo da utilizao de iframes

Vous aimerez peut-être aussi