Академический Документы
Профессиональный Документы
Культура Документы
Introduo
O HTML uma linguagem de formatao de texto para a web, o significado da sigla HTML HiperText Markup Language. Um arquivo HTML um documento para web para ser lido por um Browser. O cdigo HTML composto de etiquestas (tags) e atributos destas etiquetas que visam alterar seu formato. Atravs dos navegadores podemos ento receber esse arquivo formatado. Neste caso ento os navegadores (Browser), Internet Explorer, Firefox, Opera, etc, recebem o documento html e apresentam como uma pgina web. HTML no uma linguagem de programao, uma linguagem de marcao de texto.
Tags
<html> <head> <title>Ttulo da Pgina</title> </head> <body> <h1>Meu Ttulo</h1> <p>Meu pargrafo</p> </body> </html> O exemplo acima demonstra a estrutura bsica de um arquivo HTML, assim como algumas de suas tags. Vejamos ento cada uma delas. A tag <html> a que faz a delimitao do arquivo HTML, a partir dela que o browser identifica que trata-se de um arquivo html e comea a interpret-lo. Todo o restante do arquivo fica entre a abertura <html> e o fechamento da tag </html>. A tag <head> delimita o cabealho da pgina. Entre sua abertura e fechamento podemos ter o ttulo da pgina e tambm outras informaes a respeito do arquivo, assim como links para arquivos e funes javascript e tambm css, como veremos posteriormente. A tag de ttulo <title> apresenta o texto contido entre sua abertura e fechamento da parte superior do navegador, como um ttulo da pgina.
<body> a tag que delimita o corpo da pgina e, portanto o contedo existente entre sua abertura e fechamento ser apresentando no browser. Dentro da tag body includo tudo que ser apresentado pelo navegador. <h1> uma tag de ttulo que possui 6 nveis, o nvel 1 utilizado no exemplo a que apresenta o ttulo em tamanho maior, que vai decrescendo a medida que o nvel aumenta, neste caso podemos ter <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. E por ltimo, por enquanto a tag <p> que representa um pargrafo. Obs. As tags <h1> e <p> aps o seu fechamento lanaro uma quebra de linha automaticamente.
Ambiente de criao
Para criar um arquivo HTML no necessrio um editor, servidor ou web site, podemos realizar esta tarefa em um simples editor de texto como o notepad do Windows ou o vi do Linux, lembrando sempre de salvar este arquivo com a extenso .html Inicialmente utilizaremos o notepad para criar nossas primeiras pginas HTML, assim teremos oportunidade de conhecer o cdigo mais profundamente sem o auxilio do autocomplete. Qual a diferena entre HTML e HTM?
HTML Bsico
Vamos iniciar ento apresentando algumas tags e suas respectivas formataes. Crie um arquivo .html e insira as tags abaixo no corpo do arquivo. <h1> Ttulo Um </h1> <h2> Ttulo Dois </h2> <h3> Ttulo Trs </h3> Perceba a diferena entre os tamanhos dos ttulos e ainda podemos para esta tag utilizar mais trs nveis, 4, 5 e 6 com tamanhos menores. Outra tag j demonstrada a de pargrafo que no altera o tamanho da fonte e serve para apresentar o texto em pargrafos, o contedo inserido entre a abertura e fechamento do pargrafo ser apresentado pelo navegador. Exemplo: <p>Primeiro Pargrafo.</p> <p>Segundo pargrafo.</p>
Perceba que de um pargrafo para o outro houve uma quebra de linha, sem que houvesse uma tag para tal. A propsito a tag para realizar a quebra de linha a <br>. Esta tag quando inserida realiza a quebra de uma linha. Ela no possui uma tag de fechamento, em alguns casos desenvolvedores e alguns editores html incluem esta tag com auto fechamento, <BR/> indicando que uma tag que abre e fecha com uma nica definio.
Links
Atravs do HTML podemos criar links com outras pginas (arquivos) e tambm para partes da pgina dentro de um mesmo arquivo (ncora). A criao do link realizada atravs da etiqueta <a> com alguns atributos como os que indicam o caminho absoluto ou relativo do link e tambm onde este link ser aberto. Exemplo: <a href=http://www.institutounipac.com.br>UNIPAC</a> Este link est apontando para a pgina da UNIPAC que ser aberta assim que o usurio clicar na palavra UNIPAC.
Imagens
Para incluir imagens em um arquivo html (pgina web), utilizamos a tag <img> e seus atributos para identificar a imagem e tambm definir padres de tamanho e alinhamento. Exemplo: <img src="imagem.jpg" width="104" height="142" /> A tag <img/> indica que a mesma no possui uma tag de fechamento e portanto fecha em uma nica expresso. O atributo src indica o caminho do arquivo de imagem que ser apresentado. Os atributos width e height determinam o tamanho da imagem. Exerccio Como podemos utilizar as tags de imagem <map> e <rea>? D exemplos
Elementos HTML
Um elemento html qualquer etiqueta (tag) que seja escrita entre os sinais <>. Por exemplo <body> ou <BODY>. Os elementos html so caracterizados por: Possurem tags de abertura e fechamento <p> e </p>. O contedo de uma tag vir sempre entre sua abertura e fechamento. Alguns elementos html no possuem contedo e portanto o fechamento na prpria tag de abertura como por exemplo. <BR/> ou apenas <br>, dependendo do browser que ir interpretar o cdigo HTML.
Atributos HTML
As tags podem possuir nenhum ou muitos atributos. Os atributos sempre seguem as seguintes regras: Provem informaes adicionais s etiquetas. Sempre esto contidos na tag de abertura. Os atributos vem em pares de nome e valor conforme exemplos abaixo
<a href=http://www.institutounipac.com.br>LINK</a> Vamos entender a tag acima: <a href http://www.insitutounipac.com.br> </a> - abertura da etiqueta. - nome do atributo. - valor do atributo e fechamento da abertura. - fechamento da etiqueta.
Nome abbr accept-charset accept tecla de acesso action align align align align align align align
Etiquetas TD, TH FORM FORM, INPUT A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA FORM CAPTION APPLET, IFRAME, IMG, INPUT, OBJECT LEGEND TABLE HR DIV, H1, H2, H3, H4, H5, H6, P COL, COLGROUP, TBODY, TD,
Tipo %Text; %Charsets; %ContentTypes; %Character; %URI; %CAlign; %IAlign; %LAlign; %TAlign; (left | center | right) (left | center | right | justify) (left | center |
Por default Implcito Implcito Implcito Implcito Requerido Implcito Implcito Implcito Implcito Implcito Implcito Implcito
Desuso
Comentrio abreviatura da clula do cabealho Lista de [charsets] suportados lista dos tipos MIME para o envio de ficheiros carcter da tecla de acesso processador de formulrios do lado do servidor
D D D D D D
relativo tabela alinhamento vertical ou horizontal relativo a um grupo de campos posio da tabela em relao janela
TFOOT, TH, THEAD, TR alink alt alt alt archive BODY APPLET AREA, IMG INPUT APPLET
right | justify | char) %Color; %Text; %Text; CDATA CDATA Implcito Implcito Requerido Implcito Implcito D D D cor das ligaes seleccionadas breve descrio breve descrio breve descrio lista de arquivos separados por uma vrgula lista de URIs separados por espaos lista de cabealhos relacionados separados por vrgulas D D D D D textura do plano de fundo do documento cor de fundo das clulas cor de fundo das filas cor de fundo das clulas cor de fundo do documento controla a largura da moldura que rodeia a tabela D largura da margem da ligao espaamento dentro das clulas espaamento entre as clulas carcter de alinhamento, por exemplo char=':' offset do carcter de alinhamento codificao dos caracteres do recurso linkado para botes de rdio e caixas de seleco URI do documento origem ou da mensagem informao ou motivo da alterao lista de classes separadas por espaos identifica uma implementao D controlo do fluxo de texto
archive
OBJECT
CDATA
Implcito
axis
TD, TH
CDATA
Implcito
background bgcolor bgcolor bgcolor bgcolor margem margem cellpadding cellspacing char charoff charset
BODY TABLE TR TD, TH BODY TABLE IMG, OBJECT TABLE TABLE COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR A, LINK, SCRIPT
%URI; %Color; %Color; %Color; %Color; %Pixels; %Pixels; %Length; %Length; %Character; %Length; %Charset;
Implcito Implcito Implcito Implcito Implcito Implcito Implcito Implcito Implcito Implcito Implcito Implcito
checked
INPUT
(seleccionado)
Implcito
cite
BLOCKQUOTE, Q
%URI;
Implcito
cite
DEL, INS All elements but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE OBJECT BR
%URI;
Implcito
class
CDATA
Implcito
classid clear
Implcito nenhum
code codebase
APPLET OBJECT
CDATA %URI;
Implcito Implcito
ficheiro de uma classe applet URI bsico para "classid", "data" e "archive"
cor do texto lista de comprimentos, valor por defeito: 100% (1 col) nmero de colunas abrangidas por uma clula
compact content
(compacto) CDATA
Implcito Requerido
o espao entre elementos reduzido informao associada lista de comprimentos separados por vrgulas para usar com os mapas de imagens no lado do cliente referncia ao dados do objecto data e hora da alterao declara mas no cria indicadores O agente usado pelo utente pode adiar a execuo do script direco para texto neutral direccionalidade no disponvel para este contexto
coords
AREA
%Coords;
Implcito
defer
SCRIPT Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT BDO BUTTON, INPUT, OPTGROUP, OPTION, SELECT, TEXTAREA FORM
(adiar)
Implcito
face
BASEFONT, FONT
CDATA
lista com o nome de fontes separados por vrgulas hierarquiza o valor do campo ID quais as partes da moldura a exibir requerir margens para as molduras? lista de ids das clulas de
cabealho height height height height href IFRAME TD, TH IMG, OBJECT APPLET A, AREA, LINK %Length; %Length; %Length; %Length; %URI; Implcito Implcito Implcito Requerido Implcito D D altura da moldura altura da clula impe uma determinada altura altura inicial URI dos recursos linkados URI que desempenha o papel de um URI bsico cdigo da linguagem D preenchimento horizontal nome do cabealho de resposta HTTP identificao nica ao nvel do documento usa o mapa de imagem do lado do servidor para uso nos menus hierrquicos para uso nos menus hierrquicos cdigo da linguagem nome pr-definido da linguagem do script cor das ligaes ligao a uma descrio mais aprofundada (complementa o atributo alt) ligao a uma descrio mais extensa (complementa o atributo title) altura da margem em pxeis largura da margem em pxeis nmero mximo de caracteres contidos nos campos de texto concebido para um uso associado a estes meios para exibio nos meios descritos mtodo HTTP
href
BASE
%URI;
Implcito
A, LINK APPLET, IMG, OBJECT META All elements but BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE IMG, INPUT
id
ID
Implcito
ismap
(ismap)
Implcito
label
OPTION
%Text;
Implcito
label
OPTGROUP
%Text;
Requerido
lang
All elements but APPLET, BASE, BASEFONT, BR, FRAME, %LanguageCode; FRAMESET, IFRAME, PARAM, SCRIPT SCRIPT BODY CDATA %Color;
Implcito
linguagem link
Implcito Implcito
D D
longdesc
IMG
%URI;
Implcito
longdesc
FRAME, IFRAME
%URI;
Implcito
marginheight marginwidth
%Pixels; %Pixels;
Implcito Implcito
maxlength
INPUT
NUMBER
Implcito
usado para enviar os formulrios multiple name name name name SELECT BUTTON, TEXTAREA APPLET SELECT FORM (multiple) CDATA CDATA CDATA CDATA Implcito Implcito Implcito Implcito Implcito D permite que os applets se encontrem nome do campo nome do formulrio para o script nome da moldura a ser usada como moldura de destino nome da imagem do script terminao do nome da ligao submete como parte de um formulrio para referncia de usemap nome da propriedade nome da METAinformao indica que esta regio est inactiva permitir aos utentes redimensionar as molduras? D D eliminar o enquadramento automtico das palavras ficheiro applet serializado o elemento perde o foco principal o valor do elemento foi alterado clicou-se no boto com o ponteiro do rato o valor por defeito a nica seleco
FRAME HR TD, TH
APPLET A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA INPUT, SELECT, TEXTAREA All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML,
onclick
%Script;
Implcito
ondblclick
%Script;
Implcito
clicou-se duas vezes no boto com o ponteiro do rato o elemento recebe o foco principal uma das teclas foi pressionada
onfocus
%Script;
Implcito
onkeydown
%Script;
Implcito
IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE FRAMESET BODY uma das teclas foi pressionada e solta novamente
onkeypress
%Script;
Implcito
onkeyup
%Script;
Implcito
onload onload
%Script; %Script;
Implcito Implcito
Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, onmousedown FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, onmousemove FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE Todos os elementos excepo de APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE FORM INPUT, TEXTAREA FORM FRAMESET BODY
%Script;
Implcito
clicou-se o boto
%Script;
Implcito
onmouseout
%Script;
Implcito
onmouseover
%Script;
Implcito
onmouseup
%Script;
Implcito
a zona pressionada do boto foi solta o formulrio foi apagado uma parte do texto foi seleccionada o formulrio foi submetido todas as molduras foram removidas o documento foi removido diccionrio nomeado contendo a METAinformao D mensagem imediata para o texto e para
profile
HEAD
%URI;
Implcito
a senha rel rev A, LINK A, LINK %LinkTypes; %LinkTypes; Implcito Implcito tipos de ligaes directas tipos de ligaes reversas lista de comprimentos, valor por defeito: 100% (1 fila) nmero de filas abrangidas por uma clula as linhas de diviso entre as filas e as colunas selecciona a forma do contedo campo de domnio das clulas de cabealho barra de rolagem/paginao ou nenhuma controla a interpretao das coordenadas para usar com os mapas de imagens no lado do cliente D D [+|-]nn por exemplo size="+1", size="4" especfico a cada tipo de campo D tamanho da fonte bsico para os elementos FONT filas visveis os atributos COL afectam N colunas nmero de colunas agrupadas por defeito URI de um script externo para os campos contendo imagens fonte do contedo da moldura URI da imagem a encaixar mensagem que aparece ao carregar-se um ficheiro D nmero que inicia a sequncia informao referente ao estilo
Implcito Requerido 1
shape size size size size size span span src src src src
A HR FONT INPUT BASEFONT SELECT COL COLGROUP SCRIPT INPUT FRAME, IFRAME IMG
%Shape; %Pixels; CDATA CDATA CDATA NUMBER NUMBER NUMBER %URI; %URI; %URI; %URI;
rect Implcito Implcito Implcito Requerido Implcito 1 1 Implcito Implcito Implcito Requerido
standby
OBJECT
%Text;
Implcito
start style
NUMBER %StyleSheet;
Implcito Implcito
HTML, META, PARAM, SCRIPT, STYLE, TITLE summary tabindex target text TABLE A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA A, AREA, BASE, FORM, LINK BODY Todos os elementos excepo de BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, TITLE A, LINK OBJECT PARAM %Text; NUMBER %FrameTarget; %Color; Implcito Implcito Implcito Implcito D
associado propsito/estrutura da sada de voz posio na ordem de tabulao exibir nesta moldura cor do texto do documento ttulo consultivo tipo de contedo consultivo tipo de contedo dos dados tipo de contedo quando valuetype=ref tipo de contedo da linguagem do script tipo de contedo da linguagem do estilo que tipo de controlo faz aqui falta D D estilo do item da lista estilo da numerao estilo do circuito destinado identificao dos elementos da lista para usar como boto do formulrio usa o mapa de imagem do lado do cliente alinhamento vertical nas clulas especificar para botes de rdio e caixas ou campos de seleco valores por defeito para o contudo dos elementos valor da propriedade enviar ao servidor aquando submetido D apagar nmero da sequncia como interpretar os valores D constante
title
%Text;
Implcito
type
SCRIPT
%ContentType;
Requerido
type
STYLE
%ContentType;
Requerido
INPUT LI OL
type
UL
%ULStyle;
Implcito
type
BUTTON
submit
usemap valign
IMG, INPUT, OBJECT COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR INPUT
Implcito Implcito
value
Implcito
BODY APPLET, IMG, OBJECT HR IFRAME IMG, OBJECT TABLE TD, TH APPLET COL
D D D
cor das ligaes (links) visitadas preenchimento vertical largura da moldura sobrepe-se actual largura largura da tabela
D D
largura da clula largura inicial especificao da largura da coluna largura por defeito para os atributos COLs nela contidos
width width
COLGROUP PRE
%MultiLength; NUMBER
Implcito Implcito D
Linhas
Para criar uma linha em HTML usamos a tag <hr />. Esta etiqueta criar uma linha horizontal no corpo da pgina.
Comentrios
Os comentrios so importantes para que o criador da pgina possa deixar informaes pertinentes s formataes criadas, com intuito de tornar a manuteno do site mais fcil de ser executada. Os comentrios so inseridos entre <!-- Aqui seu comentrio -->. Vale ressaltar que os comentrios pode sem inseridos em qualquer parte da pgina e tambm no aparecem como contedo da mesma.
DICA: Nunca se esquea de fechar uma TAG que possui contedo. Alguns navegadores no aceitam tags sem fechamento.
Formatao de textos
Como fazer um texto de acordo com o exemplo abaixo utilizando HTML? Texto em negrito
Texto em itlico Formatao com sada cdigo computacional Aqui ndice e aqui expoente. Tudo isso pode ser feito atravs das etiquetas abaixo: <p><b>Negrito</b></p> <p><big>Fonte maior</big></p> <p><small>Fonte menor</small></p> <p><i>itlico</i></p> <p><code>sada computador</code></p> <p> <sub> ndice</sub><sup>expoente</sup></p>
Tabela de auxlio
Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins>
Descrio Negrito Texto maior Texto enfatizado Itlico Texto menor Defines strong text ndice expoente Texto inserido
<del> <u>
ncoras
A ncora nada mais do que um link que busca uma referncia dentro do prprio arquivo HTML. <a name="info">Informaes ao aluno</a> O cdigo acima define uma referncia para o texto informaes ao aluno. O cdigo abaixo cria um link que ir redirecionar o usurio para a referncia criada. <a href="#info">Info Aluno</a>
Tabelas
As tabelas so definidas no HTML atravs da tag <HTML></HTML>. Uma tabela dividida em linhas (<TR>), que por sua vez so divididas em clulas (<TD> table data). So nas clulas onde o contedo da tabela inserido de forma organizada. Uma clula pode conter textos, imagens, listas, pargrafos. Formulrios, linhas, outras tabelas e etc. Para uma tabela abaixo:
O cdigo : <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
Exerccios
1. Qual tag correta para a maior fonte de Ttulo a. <h6> b. <heading> c. <h1> d. <head> 2. Qual a tag correta para inserir cor de fundo em uma pgina. a. <background>yellow</background> b. <body style="background-color:yellow"> c. <body background="yellow"> 3. Qual a tag correta para insero de um hiperlink a. <a>http://www.globo.com</a> b. <a href=" http://www.globo.com "> GLOBO </a> c. <a url=" http://www.globo.com ">GLOBO</a> d. <a name=" http://www.globo.com ">GLOBO</a> 4. Como abrir um link emu ma nova pgina. a. <a href="url" target="_blank"> b. <a href="url" target="new"> c. <a href="url" new> 5. Quais tags esto includas em uma <table> a. <thead><body><tr> b. <table><tr><tt> c. <table><tr><td> d. <table><head><tfoot> 6. Escreva o cdigo da tabela abaixo: Clula UM Clula TRES-UM Clula TRES-TRES Clula TRES-DOIS Clula TRESQUATRO Clula DOIS Clula QUATRO