HTML - Parte1

•

UNIPAR

1

0

1

0

Ary Junior

13/12/2013

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

*
*
HTML – Parte 1
Prof. Jemerson Fernando Maia
Desenvolvimento de Interfaces
Curso Superior de Tecnologia em Análise e 
Desenvolvimento de Sistemas
UNIPAR – Universidade Paranaense 
Campus Toledo 
JULHO/2013
*
*
O que é o HTML?
HTML significa ‘HyperText Markup Language’, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto.
*
*
Tags
O HTML consiste em texto formatado por ‘tags’. 
Embora existam várias dezenas destes ‘tags’, apenas uma pequena parte destes é utilizada normalmente. 
Todos as ‘tags’ são inseridos entre o sinal de menor e maior:
				<tag>
*
*
Tags
Praticamente todos as ‘tags’ de formatação devem ser abertos e fechados (utilizando o caracter ‘/’):
			<tag> </tag>
Todos as ‘tags’ obedecem a uma hierarquia, como no seguinte exemplo: 	<a> <b> <c> </c> </b> </a>
O primeiro a abrir é o último a fechar, e vice-versa. <a> <b> <c> </a> </b> </c> (Errado)
*
*
Tags
Não é case sentitive:
		<tag> é igual a <TAG> e a <Tag>
Todas as páginas em HTML são identificadas pela ‘tag’ <HTML>, que terá obrigatoriamente que estar no início. Obviamente, qualquer página irá acabar com </HTML>.
 <HTML> . . . </HTML>
*
*
Tags
Todas as páginas em HTML contêm duas partes:
<HEAD>: que contém todas as informações do cabeçalho da página; 
<BODY>, contém quase tudo aquilo que iremos ver realmente na nossa página.
	<HTML> <HEAD> . . </HEAD> <BODY> . . </BODY> </HTML>
*
*
Uma primeira página
	<HTML> <HEAD> <TITLE>A minha primeira página</TITLE> </HEAD> <BODY> </BODY> </HTML>
*
*
Conhecendo alguns Tags
O texto que aparece como título da janela é definido pela ‘tag’ <TITLE>, que surge sempre na área correspondente ao cabeçalho da página (<HEAD>).
	
	<BODY> Olá mundo! </BODY>
<BODY> é a área onde reside quase todo o conteúdo visível de uma página. 
*
*
Conhecendo alguns Tags
A ‘tag’ <A> é aquele destinado à introdução de uma link, mas no entanto necessita de um parâmetro (o HREF) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar ‘linkado’, até a ‘tag’ ser fechado com </A>.
	<BODY> Olá mundo!<BR> Visitem a minha <A HREF="outrapagina.htm"> outra página</A>. </BODY>
*
*
Caracteres especiais
Os browsers não reconhecem mais que um único espaço entre caracteres. Para contornar isto, utiliza-se uma referência especial - &nbsp;
Os sinais de maior e menor são utilizados pelo próprio HTML para definir as ‘tags’, se quisermos utilizar estes sinais na nossa página utilizaremos &gt; e &lt;respectivamente.
Mais caracteres especiais em http://www.w3schools.com/tags/ref_symbols.asp.
*
*
Formatação e aspecto
Podemos também mudar a cor de uma página:
	<HTML>
	<HEAD><TITLE>Página com cor</TITLE>
	</HEAD> <BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#FF0000"> Texto normal<BR><A HREF="outra.htm">Texto com link</A> </BODY> </HTML>
*
*
Formatação e aspecto
Aqui foram acrescentados três parâmetros adicionais a ‘tag’ <BODY>. 
BGCOLOR define a cor de fundo da página, 
TEXT a cor por padrão de textos; 
LINK a cor de uma hiper-ligação. 
Existem ainda os parâmetros adicionais ALINK e VLINK que definem, respectivamente, a cor de uma ligação activa (quando se clica sobre ela) e a cor de uma ligação já visitada previamente.
*
*
Formatação e aspecto
Normalmente são definidos com valores hexadecimais;
Mais cores em:
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm e
http://www.w3schools.com/tags/ref_colorpicker.asp
*
*
Formatação e aspecto
Muitas vezes muito mais importante que as cores, é o alinhamento dos elementos da página. Por padrão tudo fica alinhado à esquerda, mas é possível mudar isso:
	<BODY> <DIV ALIGN="CENTER">TEXTO CENTRADO</DIV> <DIV ALIGN="RIGHT">TEXTO À DIREITA</DIV> Texto à esquerda </BODY>
A utilização da ‘tag’ <DIV> também provoca quebras de linha.
*
*
Formatação e aspecto
O ‘tag’ <P> é utilizado para a definição de parágrafos:
	<BODY> <P>Bloco de texto</P> <P>Outro bloco de texto<BR>com mudança de linha</P> </BODY>
Existe uma diferença entre o espaçamento introduzido por uma mudança de parágrafo e aquele que surge através do ‘tag’<BR>, de quebra de linha.
*
*
Formatação e aspecto
O ‘tag’ <P> é utilizado para a definição de parágrafos:
	<BODY> <P>Bloco de texto</P> <P>Outro bloco de texto<BR>com mudança de linha</P> </BODY>
Existe uma diferença entre o espaçamento introduzido por uma mudança de parágrafo e aquele que surge através do ‘tag’<BR>, de quebra de linha.
*
*
Formatação e aspecto
Além do aspecto global do texto, podemos também escolher o tipo de letra que utilizamos. 
Temos as ‘tags’ <B>,<I> e <U>, respectivamente para letra carregada, em itálico e sublinhada:
	<BODY> Normal<BR> <B>Negrito</B><BR> <I>Italico</I><BR> <U>Sublinhado</U><BR> <B><I>Negrito e Italico</I></B> </BODY>
*
*
Formatação e aspecto
Além disto, também podemos escolher a fonte, o seu tamanho e cor com <FONT>:
	<BODY> <P>Letra normal</P> <P><FONT FACE="Arial">Letra com a fonte Arial</FONT></P> <FONT FACE="Arial"> <P><FONT SIZE="5">Tamanho 5</FONT></P> <P><FONT SIZE="2">Tamanho 2</FONT></P> <FONT SIZE="5"> <P><FONT COLOR="#0000FF">Azul</FONT></P> <P><FONT COLOR="#FF0000">Vermelho</FONT></P> </FONT> </FONT> <P><FONT FACE="Times New Roman" SIZE="7" COLOR="#006633"> Podemos combinar varios parametros</FONT></P> </BODY>
*
*
Formatação e aspecto
O parâmetro COLOR contém a cor do texto no seu código hexadecimal. 
O parâmetro SIZE contém o tamanho do tipo de letra, que é um algarismo entre 1 (mais pequeno) e 7 (maior).
Finalmente, FACE contém o nome do tipo de letra a utilizar.
*
*
Imagem
Vamos começar inserindo um fundo em uma página:
	<HTML> <HEAD>
 <TITLE>Página com imagem</TITLE>
 </HEAD> <BODY BACKGROUND="imagem.extensao"> <FONT FACE="Arial" SIZE="4">Imagem de fundo</FONT> </BODY> </HTML>
*
*
Imagem
A ‘tag’ <IMG> insere uma imagem no ponto onde é colocado, e não é fechado, visto que não se trata de um ‘tag’ de formatação.
	<BODY BGCOLOR="#66CCFF"> <P>Olá</P> <P><IMG SRC=“imagem.jpg" ALT=“imagem exemplo"></P> </BODY>
*
*
Imagem
Analisando o tag <IMG>:
O parâmetro SRC (SouRCe) indica o ficheiro da imagem.
O parâmetro ALT indica o texto que irá aparecer enquanto a imagem não é descarregada da Internet, ou que aparece quando passamos com o mouse por cima da Imagem.
Podemos inserir uma imagem numa seção formatada pela ‘tag’ <A>, de modo a criar uma link nessa imagem:
	<P>Clique abaixo para continuar</P> <P> <A HREF=“pagina.html"><IMG SRC=“imagem.extensao" BORDER="4"></A> </P>
O parâmetro BORDER define a largura da borda da imagem.
*
*
Exercício
minhapagina.html – título da página deverá ser o nome completo
Nome completo – centralizado, título 1 e sublinhado
Endereco: endereço, numero
Idade: idade
Esportes que gosto: relação de um ou mais esportes que gosta
Sites preferidos: relação de um ou mais sites que costuma acessar, todos contendo links para seus respectivos endereços
Cor de fundo da página deverá ser #F2F2F2 (cinza claro)
Todos os títulos de seções deverão estar em negritos e dentro de uma seção <div>
Os valores para as seções deverão estar em itálico
Cor padrão do link deverá ser #5C5CAD (tom de azul) e cor do link visitado #FF8533 (tom de laranjado)
*
*
Conhecendo alguns Tags
O parâmetro HREF pode conter também o endereço de outro site, como em <A HREF="http://www.site.com">.
*
*
Referências
http://pt.wikipedia.org/wiki/HTML
http://www.w3schools.com/html/default.asp