Académique Documents
Professionnel Documents
Culture Documents
HTML
HTML (HyperText Markup Language) Adoptado como norma na WWW Derivada do SGML(Standard Generalized Markup Language) Utilizada para produzir documentos web
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.
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>
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>
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>
13
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
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 (< > &)
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
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
24
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
29
Pgina resultado
30
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
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
37
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
39
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:
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
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
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
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
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
43