Tutorial HTML

INSTITUTO FEDERAL DE CIÊNCIA E TECNOLOGIA DE PERNAMBUCO
— CAMPUS BELO JARDIM
TUTORIAL HTML
INSTITUTO FEDERAL DE CIÊNCIA E TECNOLOGIA DE PERNAMBUCO
— CAMPUS BELO JARDIM
TUTORIAL HTML
TRABALHO APRESENTADO AO PROFESSOR FÁBIO DENILSON, DA

DISCIPLINA DE PROGRAMAÇÃO II.
ALUNOS: EUDES BARBOSA
GREGORY LABORDE
JAILSON ANDERSON
1 INTRODUÇÃO
HTML (HyperText Markup Language) é uma linguagem de marcação de texto
para o desenvolvimento de páginas web. A HTML surgiu da junção de outras
linguagens, que vieram antes:
• SGML que é um padrão para formatar textos, por isso a HTML não preocupa-se
com uma estrutura Inflexível. Ela apenas define em uma página o que é texto,
imagem, título, entre outros;
• HyTime que é uma linguagem para marcação em que se pode utilizar
multimédia e hypertexto de uma forma padronizado.
Pela facilidade na manipulação da linguagem, já que a HTML trabalha com o

desenvolvimento e produção de texto, o desenvolvedor web não precisa ter noções
gerais sobre programação e etc.
Em HTML os comandos são nomeados de tags,ou seja etiquetas, já que serve

para a formatação do texto e especificações de onde fica a imagem, entre outros. As
tags são expressas da seguinte forma: < tag >O sinal que fica entre os sinais de maior
e menor que, são a tag. Elas ocorrem em pares e delimitam onde começa e termina o o
tipo de dado:< tag > o dado < / tag >Geralmente na tag de fechamento é usado uma
"/", mas algumas tags dispensam o uso dessa barra como é o caso da tag <br>, usada
para quebras de linhas. Todo documento HTML começa com a tag de abertura
<html> e termina coma de fechamento </html>. Ele não diferencia letras maiúsculas de
minusculas ou seja não e case sensitve facilitando o aprendizado e manipulação desta
linguagem de
marcação, então tanto faz você escrever <HTML>, <HtMl>, <hTmL> e assim pordiante.
É importante ressaltar que na hora de salvar o arquivo de texto salvar o nome
eponto a extensão(teste.htm) ou (teste.html), no primeiro caso é mais utilizado devido a
compatibilidade com os browsers existentes no mercado, mas o segundo exemplo
também funciona muito bem .
2 UM POUCO SOBRE O HTML 5
A grande promessa do desenvolvimento web, o HTML 5 está em sua versão
4.0.1, segundo o W3C em 2008, e promete trazer várias melhorias para o
desenvolvimento web, tais como:
• novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais,
• controle embutido de conteúdo multimídia,

• aprimoramento do uso off-line,
• melhoria na depuração de erros,
Entre outros aspectos, vários críticos afirmam que o HTML 5 será mais que uma
revolução e dizem até que é um forte concorrente com Flash, da Adobe, ao Silverlight ,
da Microsoft, e ao recente JavaFX, da Sun. Essa evolução do HTML dispensará o uso
de plug-ins para aplicações multimídia dos navegadores.
3 BROWSERS
Browsers ou navegadores são programas que servem para que o usuário
navegue por páginas web. O navegador tem o intuito de localizar páginas web e
interpretar os comandos HTML, para que o usuário possa interagir com o local web.
Mozilla Firefox é um navegador livre e

multi-plataforma desenvolvido pela
Mozilla Fundantion com ajuda de
centenas de colaboradores. A
intenção da fundação é desenvolver
um navegador leve, seguro, intuitivo
e altamente extensível.
Windows Internet Explorer,é um
navegador de internet de licença
prorpietária produzido pela Microsoft
em 23 de agosto de 1995. É o
navegador mais usado nos dias de
hoje.
O Google Chrome é um
navegadorgoogle e compilado com
base em componentes de código
aberto. O Google Chrome é o terceiro
navegador mais utilizado na Internet.
Foi desenvolvido em 2008 pelo
Google.
Opera é um navegador da web e uma
suíte de intrnet desenvolvida pela
companhia Opera Software. O
navegador permite tarefas comuns de
internet como exibir sites, mandar e
receber mensagens de e-mail, gerir
contatos,entre outros. Produzido pela
Opera Software em 1994
4 Requisitos
Para que você possa começar a praticar é necessário um editor de
texto pra quevocê possa digitar as tags(etiquetas) ,um navegador de
internet instalado mas não épreciso que você tenha internet, porque as tags
são executadas no browser de seuDesktop.
5. As tags e suas funcionalidades

Esta tag é responsável por mostrar ao browser, que o
documento e um arquivo no formato HTML. Sem esta
tag o browser vai ser incapaz de interpretar os
<HTML>
comandos que você escreveu, sendo assim ela de
...</HTML>
sempre ser a primeira e a ultima tag do seu
documento HTMl.
Cabeçalho, onde são colocadas partes importantes

como: título da página, algumas tags que facilitem o
<HEAD>....</HEAD busca do robô tornando sua página mais visível na
> web .
Observa-se que, depois de se escrever o título da

página, a palavra title é colocada de novo, porém
<TITLE>.....</TITL precedida de uma barra. A barra significa o
E> fechamento da tag título. Toda tag que abrimos
precisa ser fechada. E todas as tags são fechadas com
um barra desse tipo.
Corpo da página são declaradas todas as informações
que serão exibidas pra os usuários, como cor de
<BODY>....</BODY
fundo,imagem de papel de parede.
>
A tag META aparece no começo do cabeçalho para

mostrar o que está contido nele. O browser usa os
atributos de META como palavra chave para realizar
pesquisas. A tag META não precisa ser
< META > fechada.Existem apenas dois atributos, que são:
NAME - fornece meta informações sobre um nome
exclusivo.
CONTENT - texto ou outros valores a serem
associados com o NAME.
A declaração deve ser colocada antes no código antes
da tag, pois é ela que irá dizer ao browser qual a
< !DOCTYPE >
especificação do HTML ou XML.
<html>
<head>
<title>Minha pagina</title>
</head>
<body >
<i>Texto em itálico</i> <br>
<b>Texto em negrito;</b><br>
<u>Texto sublinhado</u> <br>
<s>Texto Riscado</s>
<P>Texto sobrescritos</p>
<sup>2</sup>4
<p> Texto subscritos</p>
<sub>2</sub>4
</body>
</html>
Escopo de uma pagina
<html>
<head>
<title>titulo da pagina</title>
</head>
<body>
</body>
</html>
colocando Titulo da pagina
<html>
<head>
<title>Minha primeira pagina</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Trabelhando com o cabeçalho</title>
<meta name="author" content="Eudes barbosa, Jailson Anderson,
Gregory Augusto">
</head>
<body >
</body>
</html>
Linhas na pagina
<html>
<head>
<title>Tutorial</title>
</head>
<body>
linha horizontal
<hr size="10" align="center">
Linha vertical
<hr width="3" size="50">
linha horizontal cor vermelha
<hr size="10" align="center" color="red">
</body>
</html>
Tipos de Titulo
<html>
<head>
</head>
<body>
<h1>Cabeçalho com h1</h1>
</body> </html>
6. Comentários
Os comentários são textos colocados entres os caracteres(<!-

comentário>)
que servem para documentar sua página e deixa la inteligível para futuras
atualizações e novas implementações. O browser não interpreta os
comentários
somente o programador pode vêlo.
Comentário
<html>
<head>
</head>
<body>
<h2>Usando comentário</h2>

</body>
</html>
7. Atributo da tag body
Modificando o corpo
Coloca uma imagem no fundo da
background = “imagem_de_fundo”
página
Coloca uma cor de fundo na
página, que pode ser em
bgcolor =
hexadecimal, ou utilizar o
“cor_do_plano_de_fundo”
nome
da cor em inglês.
Utilizando esta tag você podera
realizar modificações estéticas em
text = “cor_do_texto”
sua página, sendo esta a cor do
texto.
link = “cor_dos_links” Aplica-se o mesmo principio a esta
tag pois ao invez de colorir o texto
você está colorindo os link's que
darão acesso a outras páginas e
também a arquivos dispostos no
seu web site.
8.Tags de formatação de texto
Essa tag mostram a relevância do

seu texto para o buscador. H1
deve ser o nível principal, com o
<h1> ... </h1>
titulo do texto normalmente o
mesmo que a tag de título , H2
deve ser um complemento (sub
tópico) do H1 e e por ai vai até
H6.
A Tag <p> ela pode ser usada
para várias coisas, como digitar
um texto, cores, tamanho etc, e
<p> ... </p>
também, ela é reconhecida pois
ela depois de repetida corta duas
linhas
indica que os dispositivos de saída

<b> ... </b>
visual deve render "negrito"
Esta tag indica qu o texto deve

<i> ... </i>
estar em Itálico.
Esta tag define o texto subscrito.

Como por exemplo nesta formula
<sub> ... </sub> quimica H 2 O.
Esta tag faz o texto ficar

sobrescrito, aparecendo um
caracter acima da linha de texto
<sup> ... </sup> base, esta tag e ideal para ser
utilizada em roda pé, como
[1].
podemos ver: WWW
Esta tag insere uma quebra de

<br>
linha única.
Texto pré formatado, exibe
o texto do
mesmo jeito que ele foi escrito, e
a fonte
<pre>...</pre> é como aquela de maquina
datilográficas
antigas.
Usando a Tag <br>

sem br
<html>
<head>
</head>
<body>
ola pessoal estou aprendendo a criar página utilizando a lingugen de marcação HTML.
Tenho que praticar muito.
</body>
</html>
Com br
<html>
<head>
</head>
<body>
ola pessoal estou aprendendo<br> a criar página utilizando<br> a lingugen de marcação
HTML.<br>
</body>
</html>
Colocando cor no fundo
<html>
<head>
</head>
<body bgcolor="red">
HTML.<br>
</body>
</html>
Colocando imagem de fundo
<html>
<head>
</head>
<body background="avata.jpg">
HTML.<br>
</body>
</html>
Usando um bloco de texto
<html>
<head>
</head>
<body>
<blockquote>
Minha terra tem palmeiras,
Onde canta o Sabiá;
As aves, que aqui gorjeiam,
Não gorjeiam como lá.
<p>Gonçalves Dias</p>
</blockquote>
</body>
</html>
9.Cor, tanho e fonte
é FONTE, sendo assim, seria a

nomeação para usar uma tag com
<font>...</font>
relação a modificação de fonte ou
cor etamanho também.
Define a cor da fonte do texto. A
cor da fonte pode ser definida por
color=”nome da cor”
seu nome em inglês ou pelo seu
código em exadecimal.
esta tag define o tamanho da
fonte utilizando um tamanho
absoluto ou relativo. O valor
Size absoluto vai de I e 7 quanto maior
for o numero maior será sua
fonte. Já os valores relativos vão
de -4 e +4.
Esta tag é responsável por pela
definição do texto, vocẽ ainda
Face
pode acrescentar vários tipos de
fonte no mesmo texto.
Formatando o texto
<font>...</font>
<p>...</p>
<pre>...<pre>
<html>
<head>
</head>
<body >
<p >ola pessoal estou aprendendo<br> a criar página utilizando<br> a lingugen de marcação
HTML.<br>
Vamos aprender a colocar cor,tamnho e o estilo das letras.
<font color="red" size="5" face="arial">cor vermeha fonte Arial e tamanho 5</font>
<br><br>
<font color="green" size="8" face="arial">Cor verde fonte Georia e tamanho
8</font><br><br>
<pre>
Texto Pré formatado

HTML.<br>
Vamos aprender a colocar cor,tamnho e o estilo das letras.
</pre>
</body>
</html>
</tr>
</table>
</body>
</html>
10. Imagens na página
Atributos da imagem
Alinha a imagem respectivamente
em :
centralizado,esquerda e direita na
Align=”center,left,right ”
página
border
borda da margem
alt texto alternativo
Title título da imagem
Define a largura da imagem em pixel ou

Width=””
porcentagem
Define a altura da imagem em pixel ou
Height=””
porcentagem
Colocando imagem
<html>
<head>
</head>
<body alink="red" Link="black"

Vlink="green">
<h1 align="center">Copa do Mundo</h1>
<p> Os animais da copa
<img src="casa.jpg">
</body>
</html>
Usando os atributo da imagem, altura, largura
<html>
<head>
</head>
<body alink="red" Link="black" Vlink="green">
<h1 align="center">Copa do Mundo</h1>
<p> Os animais da copa <br><br>
<img src="casa.jpg" width="60" height="60" > <br><br>
<img src="taca.png" width="60" height="60" > <br><br>
<img src="cartao.jpg" width="60" height="60" >
</body>
</html>
11. Link
Nos não podemos criar uma página HTML sem colocar um link. O link é uma
ligação entre duas paginas que permite abrir uma na outra, de forma a
proporcionar
uma melhor agilidade na sua página. A tag de link é:
<a href=”URL”>nome</a>
onde:
URL= é endereço da pagina
nome= é o nome do link que será exibido na tela para o usuario.
<HTML>
<HEAD>
<TITLE>Curso de HTML Links</TITLE>
</HEAD>
<BODY>
<H3>Link Para Página Local</H3>
<A HREF="Links.htm">Clique aqui</A> voltar à página Links.htm
</BODY>
</HTML>
os que se dirigem a outras partes

links internos
dentro da mesma página.
os que se dirigem a outras
links locais
páginas do mesmo site web.
os que se dirigem à páginas de
links remotos
outros sites web.
Para que os usuários possam fazer
links com arquivos
download de arquivos.
Indica a cor do links ativados na
Alink
página.
Indica a cor dos links já
Vlink
consultados.
Colocando Link
Colocando cor no lik que não foi visitado, depois de visitado e acor do link
ativo
Tabelas
As tabelas são perfeitas para organizar e apresentar dados de forma
funcional e
prática .É possível inserir texto,figuras ou links em tabelas, realizando uma
melhor
distribuição das informações dentro de uma página.
O número de TR define o número de linhas na tabela e o número de TD
(dentro da
TAG TR) define o
número de colunas da tabela.
<table>...</table> Tag de declaração da tabela
define cada linha da tabela;
<tr>...</tr>
define os dados da tabela. É uma

célula na tabela;
Dados da Tabela: podem ser
<td>...</td>
texto, imagens e links;
define o cabeçalho da tabela. É

<th> uma célula da tabela;
espessura da borda em pixels.

BORDER=”n”:
argura da tabela em relação ao

browser, em pixels ou
WIDTH=”n%”: %;
altura da tabela em relação ao

browser, em pixels ou
HEIGHT=”n%”: %;
espaço entre uma célula e outra,

CELLSPACING=”n”:
em pixels;
espaço entre os dados e a borda

CELLADDING=”n
da tabela
Introduz cor de fundo na tabela
BGCOLOR=”cor”
tabela, em pixels;
Mescla as linhas da tabela, onde
“n” é quantidade de
COLSPAN=”n”
linhas pra serem
mescladas
Mescla as colunas da tabela, onde
“n” é quantidade de
ROWSPAN=”n” linhas pra serem mescladas
Tabelas
<html>
<head>
</head>
<body>
<table border="1" align="center" width="50%" height="50%">
<tr>
<td >celula1
</td>
<td>celula2
</td>
</tr>
<tr>
<td>vamooos
</td>
<td>
informática
</td>
Tabelas com colspan, titulo
<html>
<head>
</head>
<body>
<table border="1" align="center" width="50%" height="50%">
<th colspan="2">Tabela</th>
<tr>
<td>celula1
</td>
<td ">celula2
</td>
</tr>
<tr>
<td>vamooos
</td>
<td>
informática
</td>
</tr>
</table>
</body>
</html>
Colocando cor de fundo, centralizando o texto, definindo a largura

entre as celulas e bordas
<html>
<head>
</head>
<body>
<table border="1" align="center" bordercolor="red" width="50%"
height="50%"
cellpadding="10" cellspacing="20">
<th colspan="2">Tabela</th>
<tr>
<td align="center" bgcolor="green">celula1
</td>
<td >celula2
</td>
</tr>
<tr>
<td>vamooos
</td>
<td>
informática
</td>
</tr>
</table>
</body>
</html>
Listas
<html>
<head>
</head>
<body>
<p>Listas não ordenadas</p>
<ul>
<li>Informática</li>
<li>Agropecuária</li>
<li>Enfermagem</li>
<li>Agroindutria</li>
</ul>
<p>Listas ordenadas</p>
<ol>
<li>Informática</li>
<li>Agropecuária</li>
<li>Enfermagem</li>
<li>Agroindutria</li>
</ol>
<p>Listas de definição</p>
<dl>
<dt>Informática</dt>
<dd>ProgramçãoII</dd>
<dt>Agropecuária</dt>
<dd>Vaca</dd>
</dl>
</body>
</html>
12.FRAMES
Os frames são divisões da tela do browser em diversas telas (ou “quadros”).

Com a
utilização disto, tornase possível apresentar mais de uma página por vez:
por
exemplo, um índice principal em uma parte pequena da tela, e os textos
relacionados ao índice em outra parte. Processados no servidor e devolvidos
ao
usuário.
O corpo de uma página Frame é diferente de uma página comum, e nesse
arquivo
só tem as dimensões das divisões e as páginas que iram aparecer em cada
divisão.
A estrutura básica do corpo de uma página com frame:
<HTML>
<HEAD>
<TITLE>Titulo da página</TITLE>
</HEAD>
<FRAMESET COLS="15%,85%">
<FRAME SRC="pagina1.html">
<FRAME SRC="pagina2.html">
</FRAMESET>
</HTML>
<FRAMESET> é utilizada para criar um conjunto de frames e seus

elementos. É a
tag principal para a criação de frames e precisa ser encerrada com
</FRAMESET>;
<FRAME> é utilizada para definir um frame (quadro) dentro de um conjunto
de
frames. Não necessita de tag de encerramento;
Onde:
FRAMESET: tag de abertura de um conjunto de frames;
COLS=”colunas,largura”: define o número de colunas, o valor pode ser
em pixels
ou percentagem. É utilizado para definir o número de quadros (frames) que
terá o
conjunto de frames;
ROWS=”linhas,altura”: define o número de linhas, o valor pode ser em
pixels o em
percentagem. É utilizado para definir o número de quadros (frames) que
terá o
conjunto de frames;
FRAMEBORDER=”1/0”: o valor 1 exibe uma borda 3D no frame, o valor 0
não
exibe a borda;
<HTML>
<HEAD>
<TITLE>Formulários</TITLE>
</HEAD>
BODY>
<FORM NAME=”Form1” ACTION=”outra.php”>
Nome: <INPUT TYPE=TEXT NAME=”txnome”><BR>
Senha: <INPUT TYPE=PASSWORD NAME=”senha”><BR>
Sexo: <INPUT TYPE=RADIO NAME=”sex” VALUE=”M”>Masc<BR>
<INPUT TYPE=RADIO NAME=”sex” VALUE=”F”>Fem<BR>
Escolaridade:<SELECT NAME=”esc”>
Curso: Módulo I – HTML
17#
<OPTION VALUE=”1”>Ensino Fundamental
<OPTION VALUE=”2”>Ensino Médio
<OPTION VALUE=”3”>Ensino Superior
</SELECT><BR>
Línguas:
<INPUT TYPE=CHECKBOX NAME=”lin” VALUE=”I”>Inglês<BR>
<INPUT TYPE=CHECKBOX NAME=”lin” VALUE=”E”>Espanhol<br>
<INPUT TYPE=CHECKBOX NAME=”lin” VALUE=”O”>Outras<BR>
Digite abaixo seu comentário:<BR>
<TEXTAREA NAME=”coment” ROWS=”5” COLS=”80”>
Aqui
</TEXTAREA><br>
<INPUT TYPE=SUBMIT VALUE=”OK”>
<INPUT TYPE=RESET VALUE=”Apagar”>
</FORM>
</BODY>
</HTML>
Cabeçalho, uma para o menu, outra para a página inicial e uma quarta que
contém a
indicação para montar as anteriores, sendo esta, justamente, a página de
frames. Vamos ver como é isso na prática:
Frame
<html>
<head>
<title>frame</title>
</head>
<FRAMESET cols="40%,*" >
<FRAME SRC="http://www.google.com" NAME="superior" >
<FRAME SRC="http://www.santabrigida.ba.gov.br/">
</FRAMESET>
</html>
Tirando as barras de rolagens
<html>
<head>
</head>
<FRAMESET cols="40%,*" >
<FRAME SRC="http://www.google.com" NAME="superior"
SCROLLING="NO" >
<FRAME SRC="http://www.santabrigida.ba.gov.br/" SCROLLING="NO">
</FRAMESET>
</html>
Tirando as bordas
<html>
<head>
</head>
<FRAMESET cols="40%,*" border="0" >
<FRAME SRC="http://www.google.com" NAME="superior"
SCROLLING="NO" >
<FRAME SRC="http://www.santabrigida.ba.gov.br/" SCROLLING="NO">
</FRAMESET>
</html>
Frames em linhas
<html>
<head>
</head>
<FRAMESET rows="40%,*" >
<FRAME SRC="http://www.google.com" >
<FRAME SRC="http://www.santabrigida.ba.gov.br/" >
</FRAMESET>
</html>
13. Formulário
Através de um formulário o usuário irá com seguir uma nível de interação

com o
servidor, enviando dados que serão processados no servidor e devolvidos ao
usuário simultaneamente .
Os formulários enviam os dados para um servidor http onde um programa
CGI,
geralmente em “PERL” ou
“C”, processa os dados. O script CGI pode retornar, por exemplo, uma
página ao
usuário agradecendo o
uso do formulário e/ou enviar um email para o criador da página.
Um script CGI (Common Gateway Interface), é uma interface que executa
programas
externos suportados
por servidores de informações. No caso da internet, são os servidores http
que dão
suporte aos CGI.
Alguns exemplos de uso de scripts CGI:
tratar as requisições e dados enviados pelo usuário através de formulários;
servir de interface entre HTML e banco de dados SQL, fazendo a conversão
da
transação HTML
para SQL e viceversa;
converter dados do sistema em HTML gerando respostas para o cliente;
Os scripts são escritos em linguagens compatíveis com a plataforma sob a
qual o
servidor está rodando e
devem produzir arquivos executáveis. As linguagens mais utilizadas são:
PER
TCL
C Shell
Bourne Shell
C/C++
Um formulário também pode ser processado por Servidores de Páginas

Ativas como ASP, JSP e PHP que estão muito difundidos na internet.
POST: método mais utilizado, transmite toda a informação do formulário
imediatamente após a URL;
GET: anexa o conteúdo do formulário ao endereço da URL, por isso tem
limitação de tamanho das informações;
ACTION: especifica o programa ou página do servidor que processará os
dados do
formulário;
NAME: define o nome do formulário.
TAG <INPUT>
Define um campo de entrada de dados. Cada campo de um formulário
atribui o seu
conteúdo a uma
variável que possui nome e tipo específico.
Sintaxe:
<INPUT TYPE=”tipo” SRC=”imagem” NAME=”nome” VALUE=”valor”
SIZE=”tamanho”
MAXLENGTH=”comprimento” CHECKED>
Onde:
TYPE:=”tipo” Define o tipo de variável que pode ser:
o TEXT: Área de texto (usa os atributos: type, name, value, size,
maxlength);
o PASSWORD: Texto protegido por senha (usa os atributos: type,
name,
value, size e maxlength);
o HIDDEN: Entrada oculta (atributos: type, name, value);
o RADIO: Botão com uma opção (atributos: type; name, value,
checked);
o CHECKBOX: Botão com mais opções (type, name, value,
checked);
o RESET: Limpa os campos (type, name, value);
o SUBMIT: Envia os dados do formulário (type, name, value);
o IMAGE: Envia os dados do formulário (type, name, value, src);
o BUTTON: Botão (atributos: type, name, value);
o FILE: Abre uma janela para selecionar arquivo (type, name,
value);
NAME=”nome": nome do campo ou variável;
SRC=”imagem”: define a imagem que será usada no input do tipo image;
VALUE=”valor”: define o valor do campo;
CHECKED: indica que o campo deve estar marcado (é o padrão);
SIZE=”tamanho”: define o tamanho do campo, ou seja, a quantidade de
caracteres
que será exibido em campos do tipo Text e Password;
MAXLENGTH=”comprimento”: define a quantidade de caracteres que o
campo pode
receber em campos do tipo Text e Password.
Exemplo: Formulario.htm
Formulário
<form>
Primeiro nome:
<input type="text" name="firstname">
<br><br>
Último nome:
<input type="text" name="lastname">
</form>
Caixa de seleção(checkboxes)
<html>
<body>
<form>
Nome:
<br><br>
Sobrenome:
<br><br>
<form>
Santa Brigida
<input type="checkbox" name="Bike">
<br> <br>
Belo Jardim
<input type="checkbox" name="Car">
</form>
</body>
</html>
Frame com Radiobuttons
<html>
<body>
<form>
Masculino:
<input type="radio" checked
name="Sex" value="male">
<br>
Feminino:
<input type="radio"
name="Sex" value="female">
</form>
</body>
</html>
Colocando botões
<html>
<body>
<form>
Nome:
<br><br>
Sobrenome:
<br><br>
<form>
Santa Brigida
<br> <br>
Belo Jardim
<br><br>
<input type="button" value="Enviar">
</form>
</body>
</html>
Caixa de texto
<html>
<body>
<form>
Nome:
<br><br>
Sobrenome:
<br><br>
<form>
Santa Brigida
<br> <br>
Belo Jardim
<br><br>
<textarea name="comentário" rows="10" cols="40"></textarea>
<br><br>
<input type="button" value="Enviar">
</form>
</body>
</html>
Entendendo como funciona o Refresh
São páginas normalmente sem links, que chamam outras depois de um determinado
tempo dentro dela, sem nenhuma interferência do internauta. Para fazer uma página
desta basta colocar no documento as seguintes linhas de comando:
Ex:
Usando refresh
<html>
<head>
<meta http-equiv="refresh" coment="2; URL=pagina2.html" >
<title> Usando Refresh</title>

</head>
<body>
Em alguns segundo vai aparecer a segunda página.
</body>
</html>

Tutorial HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial HTML

Enviado por

Direitos autorais:

Formatos disponíveis

INSTITUTO FEDERAL DE CIÊNCIA E TECNOLOGIA DE PERNAMBUCO

— CAMPUS BELO JARDIM

TRABALHO APRESENTADO AO PROFESSOR FÁBIO DENILSON, DA

Pela facilidade na manipulação da linguagem, já que a HTML trabalha com o

Em HTML os comandos são nomeados de tags,ou seja etiquetas, já que serve

• novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais,

• controle embutido de conteúdo multimídia,

Mozilla Firefox é um navegador livre e

5. As tags e suas funcionalidades

Cabeçalho, onde são colocadas partes importantes

Observa-se que, depois de se escrever o título da

A tag META aparece no começo do cabeçalho para

<u>Texto sublinhado</u> <br>

<p> Texto subscritos</p>

Escopo de uma pagina

colocando Titulo da pagina

<title>Minha primeira pagina</title>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Os comentários são textos colocados entres os caracteres(<!-

8.Tags de formatação de texto

Essa tag mostram a relevância do

indica que os dispositivos de saída

Esta tag indica qu o texto deve

Esta tag define o texto subscrito.

Esta tag faz o texto ficar

Esta tag insere uma quebra de

Usando a Tag <br>

é FONTE, sendo assim, seria a

Texto Pré formatado

ola pessoal estou aprendendo<br> a criar página utilizando<br> a lingugen de marcação

alt texto alternativo

Title título da imagem

Define a largura da imagem em pixel ou

<body alink="red" Link="black"

<h1 align="center">Copa do Mundo</h1>

<p> Os animais da copa

Usando os atributo da imagem, altura, largura

<body alink="red" Link="black" Vlink="green">

<h1 align="center">Copa do Mundo</h1>

<p> Os animais da copa <br><br>

<img src="casa.jpg" width="60" height="60" > <br><br>

<img src="taca.png" width="60" height="60" > <br><br>

<img src="cartao.jpg" width="60" height="60" >

os que se dirigem a outras partes

define os dados da tabela. É uma

define o cabeçalho da tabela. É

espessura da borda em pixels.

argura da tabela em relação ao

altura da tabela em relação ao

espaço entre uma célula e outra,

espaço entre os dados e a borda

Tabelas com colspan, titulo

Colocando cor de fundo, centralizando o texto, definindo a largura

<td align="center" bgcolor="green">celula1

<p>Listas não ordenadas</p>

Os frames são divisões da tela do browser em diversas telas (ou “quadros”).

<FRAMESET> é utilizada para criar um conjunto de frames e seus

Tirando as barras de rolagens

Através de um formulário o usuário irá com seguir uma nível de interação

Um formulário também pode ser processado por Servidores de Páginas

Frame com Radiobuttons

<title> Usando Refresh</title>

Você também pode gostar