Tutorial basico de HTML 37
20 pág.

Tutorial basico de HTML 37


DisciplinaAnálise Textual9.254 materiais293.536 seguidores
Pré-visualização4 páginas
foi feito a seção. 
 
Colocando Links nas Âncoras 
Agora que a ancora foi feita, falta linká-la, desse jeito: 
<a href=&quot;#seção1&quot;>Se&ccedil;&atilde;o 1</a> 
 
<HTML> 
<HEAD> 
<TITLE> Minha Primeira Página</TITLE> 
<META NAME=&quot;author&quot; content=&quot;WebMaster&quot; 
<META NAME=&quot;description&quot; CONTENT=&quot;Minha Primeira Página de HTML&quot;> 
<META NAME=&quot;keywords&quot; content=&quot;Página HTML&quot;> 
<META HTTP-EQUIV=&quot;language&quot; content=&quot;pt-br&quot;> 
</HEAD> 
<BODY BGCOLOR=&quot;gray&quot; LINK=&quot;RED&quot; ALINK=&quot;YELLOW&quot; VLINK=&quot;DARKGREEN&quot;> 
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo 
</font></h1> 
<p align=center><font face=&quot;Arial&quot; color=&quot;navy&quot; size=&quot;2&quot;>Este é o meu primeiro 
par&aacute;grafo em HTML</font></p> 
<p align=&quot;justify&quot;><font face=Verdana size=2 color=orange>Este &eacute; o meu 
segundo par&aacute;grafo<Br>E esta &eacute; minha primeira quebra de 
linha.</font></p> 
<a href=&quot;http://www.google.com&quot;><font face=&quot;Tahoma&quot; size=2> 
Google</font></a> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Inserindo Imagens 
Para inserir imagens numa WebPage vamos utilizar a Tag IMG. 
Ex. <img src=&quot;http://www.univ-
ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg&quot;> 
Configurando a Imagem 
Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você 
pode utilizar para deixar a sua imagem ao seu gosto. 
Utilizamos as seguintes Tag\u2019s a partir de IMG SRC: 
<HTML> 
<HEAD> 
<TITLE> Minha Primeira Página</TITLE> 
<META NAME=&quot;author&quot; content=&quot;WebMaster&quot; 
<META NAME=&quot;description&quot; CONTENT=&quot;Minha Primeira Página de HTML&quot;> 
<META NAME=&quot;keywords&quot; content=&quot;Página HTML&quot;> 
<META HTTP-EQUIV=&quot;language&quot; content=&quot;pt-br&quot;> 
</HEAD> 
<BODY BGCOLOR=&quot;gray&quot; LINK=&quot;RED&quot; ALINK=&quot;YELLOW&quot; 
VLINK=&quot;DARKGREEN&quot;> 
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo 
</font></h1> 
<a name=&quot;1&quot;><p align=center><font face=&quot;Arial&quot; color=&quot;navy&quot; 
size=&quot;2&quot;>Este é o meu primeiro par&aacute;grafo em 
HTML</font></p></a> 
<p align=&quot;justify&quot;><font face=Verdana size=2 color=orange>Este &eacute; 
o meu segundo par&aacute;grafo<Br>E esta &eacute; minha primeira 
quebra de linha.</font></p> 
<a href=&quot;http://www.google.com&quot;><font face=&quot;Tahoma&quot; size=2> 
Google</font></a> 
<a href=&quot;#1&quot;>Voltar para o primeiro par&aacute;grafo</a> 
Width \u2013 A partir dela informamos a largura da imagem. Se não for 
configurada a imagem será inserida no seu tamanho original. 
Height \u2013 Com ela, informamos a altura. Quando não é informada mantém 
também sua altura original. 
Border \u2013 Cria e configura o tamanho da borda da figura. 
Align \u2013 Alinha a imagem em relação ao texto. Temos três tipos de 
alinhamento. 
Top \u2013 Alinha o texto paralelamente ao topo da Imagem. 
Middle \u2013 Alinha o texto no centro da Imagem. 
Bottom \u2013 Alinha o texto paralelamente à base da imagem. 
Alt \u2013 É uma tag em que você insere um texto alternativo, para que se no caso 
o browser não abrir a imagem o texto aparecerá no lugar. 
Exemplo: 
<img src=&quot;http://www.univ-
ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg&quot; width=120 height=160 align=&quot;top&quot; border=&quot;3&quot; alt=&quot;imagem principal&quot;> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<HTML> 
<HEAD> 
<TITLE> Minha Primeira Página</TITLE> 
<META NAME=&quot;author&quot; content=&quot;WebMaster&quot; 
<META NAME=&quot;description&quot; CONTENT=&quot;Minha Primeira Página de HTML&quot;> 
<META NAME=&quot;keywords&quot; content=&quot;Página HTML&quot;> 
<META HTTP-EQUIV=&quot;language&quot; content=&quot;pt-br&quot;> 
</HEAD> 
<BODY BGCOLOR=&quot;gray&quot; LINK=&quot;RED&quot; ALINK=&quot;YELLOW&quot; VLINK=&quot;DARKGREEN&quot;> 
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo 
</font></h1> 
<a name=&quot;1&quot;><p align=center><font face=&quot;Arial&quot; color=&quot;navy&quot; size=&quot;2&quot;>Este é o 
meu primeiro par&aacute;grafo em HTML</font></p></a> 
 
 
 
 
 
 
 
Inserindo Imagens aos Links 
Para inserir uma imagem num link basta colocar no lugar do texto do link a 
tag que insere imagem. 
Ex. <a href=&quot;teste.html><img src=&quot;http://www.univ-
ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg&quot; width=120 height=160 align=&quot;middle&quot; border=&quot;3&quot; alt=&quot;fundo&quot;></a> 
 
SOM 
Para inserir sons na sua pagina vamos utilizar as seguintes Tag\u2019s: 
EMBED SRC \u2013 Para colocar as músicas para reproduzir em uma espécie de 
mini-media player na pagina. 
Ex.<embed src=&quot;audio.mp3&quot; loop=&quot;1&quot;> 
BGSOUND SRC \u2013 Para colocar músicas em plano de fundo, para que apenas 
toque sem que ninguém consiga ver, apenas ouvi-la. 
Ex.<bgsound src=&quot;audio.mp3 loop=&quot;1&quot;> 
LOOP \u2013 Utilizamos o loop para colocarmos quantas vezes queremos que a 
música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas 
vezes... Para colocarmos para que se repita inúmeras vezes, colocamos 
loop=infinite. 
 
 
<p align=&quot;justify&quot;><font face=Verdana size=2 color=orange>Este &eacute; o meu 
segundo par&aacute;grafo<Br>E esta &eacute; minha primeira quebra de 
linha.</font></p> 
<img src=&quot;http://www.univ-
ab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg&quot; 
width=120 height=160 align=&quot;middle&quot; border=&quot;3&quot; alt=&quot;fundo&quot;> 
<a href=&quot;http://www.google.com&quot;><font face=&quot;Tahoma&quot; size=2> 
Google</font></a> 
<a href=&quot;#1&quot;>Voltar para o primeiro par&aacute;grafo</a> 
 
TABELAS 
As Tabelas servem para deixar mais organizados os dados disponíveis em sua 
pagina. 
 
Criando tabelas 
Para criar tabelas simples, vamos fazer da seguinte maneira: 
 
 
 
 
 
 
 
As tag\u2019s Table e /Table servem para indicar inicio e fim de tabela. 
TR define cada linha de cada tabela. 
TH Define o cabeçalho da Tabela. É uma célula da tabela. 
TD Define os dados da Tabela. 
Melhorando a Tabela 
Agora vamos melhorar a aparência da tabela inserindo Tag\u2019s 
BORDER: espessura da borda em pixels. 
BOREDERCOLOR: especifica a cor da borda da tabela 
WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou 
%; 
HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou 
%; 
CELLSPACING: especifica o espaço entre uma célula e outra, em pixels; 
CELLADDING: especifica o espaço entre os dados e a borda da tabela, em 
pixels; 
BGCOLOR: cor de fundo das células da tabela. 
<TABLE> 
<TR> 
<TH>Cabeçalho da Tabela</TH> 
<TD>Dados da Tabela</TD> 
</TR> 
</TABLE> 
 
 
Atributos Individuais 
Vamos agora configurar individualmente cada célula. 
ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right, 
left, center. 
BGCOLOR: define a cor de fundo das células da linha ou de uma célula 
individual; 
VALIGN: alinhamento vertical de uma célula ou de células de uma linha; 
Pode ser top, middle ou bottom. 
WIDTH: largura de uma célula em pixels ou %; 
NOWRAP: indica ao browser que o texto da célula não pode ser dividido em 
mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela 
célula; 
 
 
 
 
Células Mescladas 
Para mesclar as células vamos atribuir à Tag TD os seguintes atributos: 
COLSPAN: Será o numero de colunas que a célula ocupara. 
ROWSPAN: Será o numero de linhas que a célula ocupara. 
 
 
 
 
 
 
<table border=&quot;2&quot; bordercolor=&quot;#003300&quot; bgcolor=&quot;green&quot; width=&quot;60%&quot; 
height=&quot;40%&quot; cellspacing=&quot;3&quot; celladding=&quot;3&quot;> 
<table border=&quot;2&quot; bordercolor=&quot;#003300&quot; bgcolor=&quot;green&quot; width=&quot;60%&quot; 
height=&quot;40%&quot; cellspacing=&quot;3&quot; celladding=&quot;3&quot;> 
<tr align=&quot;left&quot; valign=&quot;top&quot; 
<Table Border=&quot;2&quot; width=&quot;50%&quot; cellpadintg=&quot;3&quot; celladding=&quot;3&quot;> 
<TR bgcolor=&quot;#FFFACD&quot;> 
<TD colspan=&quot;2&quot;>Célula 1</TD> 
</TR> 
</TABLE>