HTML - Aula 1

HTML Noes e Conceitos
Prof. Peter Lucas Gomes Costa Branco, MSc
Objetivo do Curso

Estudar Html Estudar Noes de Css Estudar Noes de Java Script Estudar PHP Estudar Mysql Construo de um cadastro em PHP
HTML

Definies Conceituais O que HTML? Criando e Publicando uma Pagina Web Elemento da HTML Estrutura bsica de uma Pagina HTML Meta-Informaes de HTML Formatando Contedo Cores Listagens Imagens Tabelas Formulrios e componentes Frames
HTML
Word Wide Web(www) = uma rede pblica de computadores que suporta o Protocolo HTTP. HTTP =Hyper Text Tranfer Protocol - um protocolo de comunicao entre cliente www (navegador)e um servidor www. HTTPS = HTTP over Secure Socket Layer - o protocolo HTTP sobre uma camada segura para transferncia de dados. HTTP =Hyper Text Markup Language - uma linguagem de marcao utilizada para desenhar pginas web.
O que HTML

uma linguagem simples que mistura contedo Textual e marcaes (tags). As tags de marcao so utilizadas para descrever: -Aparencia -Posicionamento (Layout) -Contedo -elementos na pgina (Exemplos: Formulrios e Imagens) As tags so Formadas Assim: <nome tag[parametros]> Cada arquivo Web e representado por extenso. .htm ou .html
Exemplo

<html> <head> <title>Página de Exemplo</title> </head> <body bgcolor="white"> <center> <h1>Página HTML de Exemplo</h1> </center> <hr> <table align="center" border="1" cellpadding="3" cellspacing="1"> <tr> <td><img src="http://claws.tupia.net/photos/tyler-hello.jpg" width="171" height="144"></td> <td valign="top"> Este adorvel gatinho se chama <b>Kit Kat</b>.<br> O gato da espcia <i>Persa</i>, muito comum no Brasil.<br> <a href="http://www.google.com.br/search?q=gatos"> Clique aqui para saber mais sobre os gatos. </a><br> </td> </tr>
Continuao

<tr> <td colspan="2" bgcolor="yellow" align="center"> <font face="Arial"> Quer aprender mais <b><i>HTML</i></b>? Continue lendo... </font> </td> </tr> </table> <br> Os gatos so timos animais de estimao para apartamentos e locais pequenos, apesar
de adorarem seu prprio espao e sarem vagando por a durante a noite.

</body> </html>
Criando e Publicando uma Pgina
- A tarefa de criao de uma pgina web no requer nenhum programa em especial, pois se trata de um simples arquivo texto com a extenso .html ou .htm. - Porm existem bons programas grficos que facilitam a criao de pginas mais profissionais, e acabam dando maior produtividade criao.
Criando e Publicando uma Pgina Web
Uma pgina HTML pode ser aberta em qualquer navegador existente, diretamente do disco rgido, porm a sua publicao na web depende da disponibilizao da pgina por meio da um programa de servidor de pginas web, conhecido como webserver, que deve estar disponvel e visvel na WWW (internet), com IP pblico. Os servidores web geralmente trabalham na porta 80 do protocolo TCP/IP, e ficam escutando as requisies HTTP e atendem enviando a pgina solicitada ao cliente que fez a requisio. O navegador o responsvel por exibir as pginas.
Elementos da HTML
Estrutura

html, head, body, div, span Meta-Informao DOCTYPE, title, link, meta, style Formatao h1, h2, h3, h4, h5, h6, p, strong, em, abbr, acronym address, bdo, blockquote, cite, q, code, ins, del, dfn kbd, pre, samp, var, br, center, b, i, tt, sub, sup, big, small, hr Links a, base Imagens and Objetos img, area, map, object, param
Elementos da HTML

Listas ul, ol, li, dl, dt, dd Tabelas table, tr, td, th, tbody, thead, tfoot, col, colgroup, caption Formulrios form, input, textarea, select, option, optgroup, button, label, fieldset, legend Script script, noscript
Estrutura bsica de uma HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ttulo da pgina</title> </head> <body> O contedo da pgina vai aqui... </body> </html> Crie um arquivo chamado teste.htm, salve-o com o contedo acima e abra em um navegador web para ver o resultado. O cdigo acima define uma pgina HTML, na verso 4.01, contendo um ttulo e uma simples mensagem no corpo da pgina. A seguir descrevemos cada tag utilizada.

DOCTYPE Declara o tipo do documento e a verso do HTML. Deve ser o primeiro elemento da pgina. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML Elemento raz da pgina, que delimita todos os elementos da pgina. Deve
conter a marcao de incio e de fim (ltima tag do documento) e ser nico na pgina. Todos os outros elementos vo dentro dele.
<html> ...
</html>

HEAD Define o cabealho da pgina. Deve ser nico na pgina e vir logo aps HTML. TITLE - Define o ttulo da pgina, que aparece na barra do navegador. BASE - Define o local base para os links da pgina. META - Usado para descrever informaes sobre a pgina. BGSOUND - Define um fundo musical. SCRIPT - Usado para definir um bloco de linguagem script.
NOSCRIPT - Define contedo quando o navegador no aceita scripts.

STYLE - Usado para definir um estilo (CSS) na prpria pgina. LINK - Faz uma referncia (link) a um recurso externo (geralmente um CSS).

HEAD <head> <title>Ttulo da pgina</title> <base href="/"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="keywords" content="curso, html"> <bgsound src="musica.mid"> <script type="text/javascript" src="meu_script.js"></script> <script type="text/javascript"> function exibirMensagem() { alert("Ol Mundo!"); }
</script>
<noscript> <p>JavaScript desativado!</p> </noscript> <style type="text/css"> body { color: red; background-color: yellow; }
</style>
<link rel="stylesheet" type="text/css" href="estilos.css"> </head>

BODY Define o corpo da pgina. Tudo o que estiver dentro dele o que ser apresentado no navegador. Deve vir logo aps a tag HEAD. Esta tag aceita inmeros parmetros que definem caractersticas da pgina. BGCOLOR - define a cor de fundo da pgina. TEXT - define a cor padro do texto. LINK - define a cor padro dos links. ALINK - define a cor padro dos links ativos. VLINK - define a cor padro dos links visitados. BACKGROUND - define a imagem de fundo. LEFTMARGIN - define a margem esquerda. RIGHTMARGIN - define a margem direita. TOPMARGIN - define a margem superior. MARGINWIDTH - define a margem esquerda (netscape). MARGINHEIGHT - define a margem superior (netscape). ONLOAD nome do mtodo JavaScript a ser chamado quando a pgina for carregada.
BODY
<body bgcolor="white" text="black" link="red" alink="yellow" vlink="green" leftmargin="1" rightmargin="1" topmargin="1" marginwidth="1" marginheight="1" onLoad="exibirMensagens();">
O contedo da pgina vai aqui.
</body>
Meta Informaes de uma HTML

META
Existem tags que so destinadas a descrever informaes sobre o documento (pgina) teis para sistemas de busca e indexao alm de fazer redirecionamento de pginas, atualizaes automticas etc.
So as chamadas META TAG, ou tags de meta-informao. Estas tags devem ser posicionadas dentro da tag HEAD e no so obrigatrias. <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="author" content="Nome do autor"> <meta name="description" content="Pgina sobre tal assunto"> <meta name="keywords" content="isso, aquilo, fulano, ciclano"> <meta http-equiv="refresh" content="15"> </head>
Formatando Contedo

H1 ... H6
As tags H? formatam o texto como um cabealho ou tpico na pgina. A tag H1 tem um tamanho de fonte maior, indo at a H6, que tem um tamanho menor.
<body> <h1>Tpico 1</h1>
Algum texto aqui...

<h2>Tpico 2</h2> Outro texto aqui... <h4>Tpico 4</h4> Mais texto ali... <h6>Tpico 6</h6> E mais texto acol... </body>
Formatando Contedo

Um caracterstica da HTML que o texto no exibido no navegador exatamente da mesma maneira como foi escrito no seu fonte, ou seja, quebras de linhas e mltiplos espaos no so exibidos da mesma maneira em que foram escritos na pgina.
As tag P serve para demarcar pargrafos de texto. A tag P deve conter a marcao de incio e fim, apesar dos navegadores aceitarem apenas a marcao de incio.
<body> <p>Este um exemplo de pargrafo.</p> <p>Aqui j comea um novo pargrafo do texto.</p> </body>
Este um exemplo de pargrafo. Aqui j comea um novo pargrafo do texto.
Formatando Contedo

BR
A tag BR serve para marcar quebra de linha, j que a quebra de linha no fonte do HTML no representado no navegador.
Esta tag no tem marcao de fim.
<body> Linha 1 do texto.<br> Esta a linha 2 do nosso texto.<br> Terceira linha e assim por diante. </body>
Linha 1 do texto. Esta a linha 2 do nosso texto. Terceira linha e assim por diante.
Formatando Contedo

PRE A tag PRE exibe o contedo marcado exatamente da maneira como foi gravado no fonte da pgina, respeitando espaos em branco, tabulaes e quebras de linhas. muito til para, por exemplo, exibir trechos de cdigo de programao. <body> <pre> public class MinhaClasse { public MinhaClasse() { } } public class MinhaClasse { public MinhaClasse() {
public int calcular(int i, int j) {

if( i < j ) { return i * i * j; } else { return i * j; } } } </pre> </body> } } }
public int calcular(int i, int j) {

if( i < j ) { return i * i *j ; } else { return i *j ;
Formatando Contedo

CODE
A tag CODE apresenta o texto marcado como diferenciado, denotando como um trecho de cdigo, por exemplo.
<body> O programa executado com o comando: <br>
<code>java cp . teste.Main</code>
</body>
O programa executado com o comando: java cp . teste.Main
Formatando Contedo

BLOCKQUOTE
A tag BLOCKQUOTE usada para fazer uma cotao de texto, ou seja, o texto fica recuado direita, em relao ao texto que o precede e/ou sucede.
Outras tags podem ser aninhadas dentro desta tag.
<body> Texto sem cotao. <blockquote>Este texto pode ser uma citao.</blockquote> E aqui continua o resto do texto. </body> Texto sem cotao. Este texto pode ser uma citao.
E aqui continua o resto do texto.
Formatando Contedo

B A tag B marca um texto em negrito. I A tag I marca um texto em itlico.
U A tag U marca um texto sublinhado. <body> Este o curso de <b>HTML</b>.<br> Este o curso de <i>HTML</i>.<br> Este o curso de <i><b>HTML</b></i>.<br> Este o curso de <u>HTML</u>. </body> Este o curso de HTML. Este o curso de HTML. Este o curso de HTML. Este o curso de HTML.
Formatando Contedo

SMALL A tag SMALL marca um texto menor.
BIG A tag BIG marca um texto maior.
A tag S marca um texto riscado.
<body> Texto <small>menor</small>. <br> Texto <big>maior</big>. <br> Texto <s>riscado</s>. Texto menor. Texto maior. Texto riscado.
</body>

SUP A tag SUP marca um texto sobrescrito.
SUB A tag SUB marca um texto subscrito.
TT
A tag TT marca um texto de tele tipo.
<body> Texto <sup>sobrescrito</sup>. <br> Texto <sub>subscrito</sub>. <br> subscrito Texto <tt>tele tipo</tt>. </body> Texto tele tipo. Texto sobrescrito. Texto .
Formatando Contedo

FONT
A tag FONT define o tipo, tamanho e cor de fonte do texto marcado.
Esta tag aceita os seguintes parmetros:
SIZE define o tamanha da fonte, de 1 a 7. COLOR define a cor da fonte. FACE define o tipo da fonte. <body> Este texto <font size="2" face="Arial" color="red">tem <font size="4" color="green">uma fonte</font> diferente</font>. </body> Este texto tem uma fonte diferente.
Formatando Contedo

HR
A tag HR desenha uma linha horizontal na tela.
Os seguintes parmetros podem ser usados:
width largura da linha (expressa em pixels ou porcentagem).

size altura da linha. color cor da linha.
<body> Este o texto superior. <hr> Este o texto inferior. </body>
Cores

As cores, em HTML, so expressas nas formas de nome pr-existente e, principalmente como representaes hexadecimais dos nveis de cores RGB.
So 16 os nomes existentes de cores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.
Para todas as outras cores use o padro hexadecimal, que est na forma
#RRGGBB.
O primeiro caracter um #, os dois seguintes so a representao hexa do tom de vermelho, os dois do meio o hexa do verde e os dois ltimos o hexa do tom de azul.

A mistura das trs cores gera outras muitas cores possveis. Exemplos:
#FF0000
#00FF00
#0000FF
#000000
#FF00FF
#00FFFF
#FFFF00
#CCCCCC
#FFFFFF
#00CCFF
#FF9900
#99FF00
#CC0099
#A52A2A
#C0C0C0
Listagens

Em HTML possvel usar dois tipos de listagens: ordenadas e no-ordenadas.
OL Declara uma listagem ordenada (enumerada). Dever marcar o incio e o fim da listagem e contar os itens listados dentro da sua marcao.
Aceita os atributos: TYPE (A, a, 1, I), START, COMPACT.
LI Declara um item de uma listagem. Deve marcar o incio e o fim do item, apesar dos navegadores aceitarem apenas a marcao inicial.
Aceita os atributos: TYPE, VALUE.
Listagens

OL / LI <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol type="I"> <li>Introduo ao HTML</li> <li>Formatao</li> <ol type="A"> <li>Textos <ol type="a"> I. Introduo ao HTML II. Formatao A. Textos a. B b. FONT III. Listagens A. OL B. UL 1. Item 1 2. Item 2 3. Item 3
<li>B</li>
<li>FONT</li> </ol> </ol> <li>Listagens</li> <ol type="A"> <li>OL <li>UL </ol> </ol>
Listagens

UL
Declara uma listagem no-ordenada (com figuras) . Dever marcar o incio e o fim da listagem e contar os itens listados dentro da sua marcao.
Aceita os atributos: TYPE (SQUARE, CIRCLE, DISC), COMPACT.
LI
Declara um item de uma listagem. Deve marcar o incio e o fim do item, apesar dos navegadores aceitarem apenas a marcao inicial.
Aceita o atributo: TYPE.
Listagens

UL / LI <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul type="disc"> <li>Introduo ao HTML</li> <li>Formatao</li> <ul type="square"> <li>Textos <ul type="circle"> Item 1 Item 2 Item 3
<li>B</li>
<li>FONT</li> </ul> </ul> <li>Listagens</li> <ul type="square"> <li>OL <li>UL </ul> </ul>
Imagens

A apresentao de imagens totalmente suportada pela HTML.
As imagens no so gravadas (bytes) diretamente na pgina, mas possuem uma referncia na pgina, que o navegador se encarrega de abrir uma nova thread de processamento para baixar a imagem e exibi-la.
Os formatos de imagens suportados so: GIF e JPG, e em alguns navegadores o

formato PNG tambm aceito.
No abuse de muitas imagens, principalmente grandes e de alta qualidade, pois pode causar lentido no trfego da rede, principalmente por causa do seu tamanho (em bytes).
Imagens
Alinhamento Imagens
Tabelas
Tabelas
Tabelas
Tabelas
Tabelas
Formulrios

Os formulrios e seus componentes do ao usurio a capacidade de inserir dados e envi-los ao servidor, como uma forma de interao.
A HTML fornece suporte a um nmero limitado de componentes, comuns aos componentes existentes em outras plataformas (VB, Delphi, Java etc).
Os componentes disponveis so:
Campos de texto e senha. Lista de seleo (combo e lista) Botes Botes de radio Caixas de seleo (checkbox) Seleo de arquivos
Elementos como rvores (trees) e Tabela (estilo Excel) no existem na HTML.
Formulrios

FORM
A tag FORM define o incio e o fim de um formulrio. O formulrio pode estar dentro de uma tabela ou outros elementos, alm de poder conter outros elementos da HTML dentro de s.
ACTION Define a URL do recurso para onde sero enviados os dados. METHOD Define o mtodo de envio (POST, GET). NAME Nome do formulrio. Para identificar, caso haja mais de um na pgina. ENCTYPE Especifica o MIME Type usado para codificar os dados do formulrio. Quando se deseja enviar arquivos, deve ser multipart/form-data. O
padro application/x-www-form-urlencoded.
Formulrios

TEXTFIELD
O textfield um campo usado para a digitao de um texto.
formado pela tag INPUT, com o atributo TYPE=TEXT.
Aceita os seguintes parmetros: NAME Nome do campo de texto.
VALUE Valor a ser exibido no campo.

SIZE Define o tamanho do campo (em nmero de caracteres). MAXLENGTH Define o nmero mximo de caracteres. DISABLED Indica se o campo est desabilitado (TRUE, FALSE). READONLY Indice se o campo apenas de leitura (TRUE, FALSE).
<form name="f1" action="/Cadastro" method="post"> Nome: <input type="text" name="nome" value="Daniel" size="20"> </form>
Formulrios

PASSWORD
O password um campo usado para a digitao de um texto para senhas.
formado pela tag INPUT, com o atributo TYPE=PASSWORD.
Aceita os seguintes parmetros:
NAME Nome do campo de senha.

VALUE Valor do campo o valor exibido ser sempre asterscos (*). SIZE Define o tamanho do campo (em nmero de caracteres). MAXLENGTH Define o nmero mximo de caracteres. DISABLED Indica se o campo est desabilitado (TRUE, FALSE). READONLY Indice se o campo apenas de leitura (TRUE, FALSE).
<form name="f1" action="/Login" method="post"> Senha: <input type="password" name="senha" size="15"> </form>
Formulrios

TEXT AREA O text area um campo usado para a digitao de textos grandes.
formado pela tag TEXTAREA. O texto de contedo deve ir entre a tag inicial e final. Aceita os seguintes parmetros: NAME Nome do campo de senha. ROWS Nmero de linhas do campo (visualmente). COLS Nmero de colunas caracteres - do campo (visualmente).
DISABLED Indica se o campo est desabilitado (TRUE, FALSE).

READONLY Indice se o campo apenas de leitura (TRUE, FALSE).
<form name="f1" action="/Login" method="post"> Memo:<br> <textarea name="memo" rows="5" cols="30"> </textarea> </form>
Formulrios

BOTES
Os botes so componentes que podem ser pressionados ou clicados, para a execuo de uma ao.
Existem trs tipos de botes: SUBMIT, RESET e BUTTON.
SUBMIT Este boto, ao ser clicado, submete as informaes do formulrio. RESET Ao ser clicado, limpa as informaes do formulrio, voltando ao estado inicial. BUTTON Um boto comum, sem funo padro. Sua funcionalidade determinada pela execuo de um mtodo JavaScript definido no atributo onClick.
Formulrios

BOTES
formado pela tag INPUT, com o atributo TYPE informando o tipo desejado.
NAME Nome do boto.
VALUE Texto a ser exibido no boto. DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
<form name="f1" action="/Login" method="post"> <input type="submit" name="enviar" value="Enviar"> <input type="reset" name="limpar" value="Limpar">
<input type="button" name="nada" value="Nada Faz"> </form>
Formulrios

CHECKBOX
O checkbox um caixinha usada para selecionar itens de um grupo. formado pela tag INPUT, com o atributo TYPE=CHECKBOX. Aceita os seguintes parmetros: NAME Nome do campo (grupo de itens). VALUE Valor do item. Apenas os valores dos selecionados so enviados. DISABLED Indica se o item est desabilitado (TRUE, FALSE). CHECKED Indica se o item est selecionado (TRUE, FALSE).
<form name="f1" action="/Login" method="post"> <input type="checkbox" name="forma" value="email"> E-mail<br> <input type="checkbox" name="forma" value="telefone"> Telefone<br> <input type="checkbox" name="forma"
value="carta" disabled="true"> Carta </form>
Formulrios

RADIO BUTTON
O radio button uma espcie de boto usado para seleo nica de grupos de itens.
formado pela tag INPUT, com o atributo TYPE=RADIO. Aceita os seguintes parmetros: NAME Nome do campo (grupo de itens). VALUE Valor do item. Apenas o item selecionado ser enviado. DISABLED Indica se o item est desabilitado (TRUE, FALSE). CHECKED Indica se o item est selecionado (TRUE, FALSE).
<form name="f1" action="/Login" method="post"> <input type="radio" name="forma" value="email"> E-mail<br> <input type="radio" name="forma" value="telefone"> Telefone<br> <input type="radio" name="forma" value="carta" disabled="true"> Carta </form>
Formulrios

COMBOBOX O combobox um caixa usada para selecionar um item de uma lista (pop-up). formado pelas tags SELECT e OPTION.
Aceita os seguintes parmetros: NAME Nome do componente, usado na tag SELECT. DISABLED Indica se o combo est desabilitado (TRUE, FALSE). CHECKED Indica se o combo est selecionado (TRUE, FALSE). VALUE Valor do item, usado na tag OPTION. SELECTED Indica qual o item que est selecionado.
<form name="f1" action="/Login" method="post"> <select name="cartao"> <option value="VISA" SELECTED>Visa</option> <option value="MASTERCARD">Mastercard</option> <option value="AMEX">American Express</option> </select>
</form>
Formulrios

LIST O list um caixa usada para selecionar um item de uma lista (aberta).
formado pelas tags SELECT e OPTION. Aceita os seguintes parmetros: NAME Nome do componente, usado na tag SELECT. SIZE Define o tamanho (visual) da lista (nmero de itens). MULTIPLE Indica se a lista de seleo mltipla (TRUE, FALSE). DISABLED Indica se o combo est desabilitado (TRUE, FALSE).
CHECKED Indica se o combo est selecionado (TRUE, FALSE).

VALUE Valor do item, usado na tag OPTION. SELECTED Indica qual o item que est selecionado.
<select name="cartao" size=3> <option value="VISA" SELECTED>Visa</option> <option value="MASTERCARD">Mastercard</option>
<option value="AMEX">American Express</option>

</select>
Formulrios

FILE CHOOSER
O file chooser um caixa usada para selecionar um arquivo do sistema operacional.
formado pela tag INPUT, com o atributo TYPE=FILE.
NAME Nome do campo. DISABLED Indica se o campo est desabilitado (TRUE, FALSE).
<form name="f3" action="/Album" method="post" enctype="multipart/form-data"> Foto: <input type="file" name="foto">
<input type="submit" name="enviar" value="Enviar">

</form>
Formulrios

CAMPO OCULTO (HIDDEN)
O campo oculto (hidden) um campo no-visual, utilizado para enviar informaes

pertinentes ao formulrio, mas que no precisam ser exibidas na pgina.
formado pela tag INPUT, com o atributo TYPE=HIDDEN.
NAME Nome do campo. VALUE Valor do campo.
<form name="f3" action="/Cadastro" method="post">
<input type="hidden" name="codigo" value="123">

</form>
Frames

Os frames so uma forma de dividir uma janela do navegador em vrias.
Imagine um site que tenha um menu fixo e um contedo que muda quando cada item (link) do menu selecionado. Esta pgina pode ser dividida em frames, por exemplo.
Os frame so criados com o auxlio das tags FRAMESET e FRAME.
FRAMESET

FRAMESET
A tag FRAMESET define um conjunto de frames, definindo a diviso da tela.
ROWS Define a diviso em linhas. O parmetro recebe o tamanho de

cada frame em: pixels, porcentagem ou astersco (ocupar espao restante). COLS Define a diviso em colunas. O parmetro recebe o tamanho de cada frame em: pixels, porcentagem ou astersco (ocupar espao restante). FRAMEBORDER Indica a presena de bordas (YES, NO). BORDER Define a largura, em pixels, da borda. BORDERCOLOR Define a cor da borda.
FRAME

FRAME
A tag FRAME define um frame, que faz parte de um frameset.
SRC Define a URL da pgina ou recurso a ser exibido no frame. NAME Define um nome para o frame. Usado pelo target da tag A. FRAMEBORDER Indica a presena de bordas (YES, NO). SCROLLING Indica se o frame deve ter barra de rolagem (YES, NO). NORESIZE Indica se o frame no pode ser redimensionado (no leva um valor).
FRAME

Exemplo:
<html> <head> <title>Teste com Frames</title> </head> <frameset rows="50,*">
<frame src="menu.htm" name="menu">

<frame src="principal.htm" name="principal" scrolling="yes"> </frameset> </html>
FRAME

Exemplo (sem borda):
<html> <head> <title>Teste com Frames</title> </head> <frameset rows="50,*" border="0">

<frame src="principal.htm" name="principal" noresize> </frameset> </html>
FRAME

Exemplo (sem borda):
<html> <head> <title>Teste com Frames</title> </head> <frameset cols="70,*" border="1">

<frame src="principal.htm" name="principal" scrolling="yes"> </frameset> </html>
Referncias

World Wide Web Consortium W3C http://www.w3c.org Especificao HTML oficial W3C http://www.w3c.org/MarkUp/ HTML Dog Site de guia de referncia para HTML http://www.htmldog.com/reference/htmltags/

HTML - Aula 1

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML - Aula 1

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Noes e Conceitos

Prof. Peter Lucas Gomes Costa Branco, MSc

de adorarem seu prprio espao e sarem vagando por a durante a noite.

Criando e Publicando uma Pgina

Criando e Publicando uma Pgina Web

Estrutura bsica de uma HTML

Estrutura bsica de uma HTML

Estrutura bsica de uma HTML

NOSCRIPT - Define contedo quando o navegador no aceita scripts.

Estrutura bsica de uma HTML

Estrutura bsica de uma HTML

Estrutura bsica de uma HTML

O contedo da pgina vai aqui.

Meta Informaes de uma HTML

<body> <h1>Tpico 1</h1>

Algum texto aqui...

Este um exemplo de pargrafo. Aqui j comea um novo pargrafo do texto.

Esta tag no tem marcao de fim.

public int calcular(int i, int j) {

public int calcular(int i, int j) {

<body> O programa executado com o comando: <br>

O programa executado com o comando: java cp . teste.Main

Outras tags podem ser aninhadas dentro desta tag.

B A tag B marca um texto em negrito. I A tag I marca um texto em itlico.

SMALL A tag SMALL marca um texto menor.

BIG A tag BIG marca um texto maior.

A tag S marca um texto riscado.

Estrutura bsica de uma HTML

SUP A tag SUP marca um texto sobrescrito.

SUB A tag SUB marca um texto subscrito.

A tag FONT define o tipo, tamanho e cor de fonte do texto marcado.

Esta tag aceita os seguintes parmetros:

A tag HR desenha uma linha horizontal na tela.

Os seguintes parmetros podem ser usados:

width largura da linha (expressa em pixels ou porcentagem).

<body> Este o texto superior. <hr> Este o texto inferior. </body>

Estrutura bsica de uma HTML

Em HTML possvel usar dois tipos de listagens: ordenadas e no-ordenadas.

Aceita os atributos: TYPE (A, a, 1, I), START, COMPACT.

Aceita os atributos: TYPE, VALUE.

Aceita os atributos: TYPE (SQUARE, CIRCLE, DISC), COMPACT.

Aceita o atributo: TYPE.

A apresentao de imagens totalmente suportada pela HTML.

Os formatos de imagens suportados so: GIF e JPG, e em alguns navegadores o

Os componentes disponveis so:

Elementos como rvores (trees) e Tabela (estilo Excel) no existem na HTML.

Esta tag aceita os seguintes parmetros:

O textfield um campo usado para a digitao de um texto.

formado pela tag INPUT, com o atributo TYPE=TEXT.

Aceita os seguintes parmetros: NAME Nome do campo de texto.

VALUE Valor a ser exibido no campo.

O password um campo usado para a digitao de um texto para senhas.

formado pela tag INPUT, com o atributo TYPE=PASSWORD.

Aceita os seguintes parmetros:

NAME Nome do campo de senha.

DISABLED Indica se o campo est desabilitado (TRUE, FALSE).

Existem trs tipos de botes: SUBMIT, RESET e BUTTON.

Aceita os seguintes parmetros:

NAME Nome do boto.

<input type="button" name="nada" value="Nada Faz"> </form>

value="carta" disabled="true"> Carta </form>

CHECKED Indica se o combo est selecionado (TRUE, FALSE).

<select name="cartao" size=3> <option value="VISA" SELECTED>Visa</option> <option value="MASTERCARD">Mastercard</option>