html prof. geyson silva. html o html trabalha com o sistema de tags (etiquetas). esse sistema...
TRANSCRIPT
HTMLProf. Geyson Silva
HTML O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira.
Ex:
<tag>Conteúdo da tag</tag>
Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira:
</tag>
HTML
Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias.
HTML
<tag><outratag> </outratag>texto
</tag>
Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem.
HTML
<img src=“caminhoImg.jpg”>
Formas dos Comandos HTMLOs tags podem ser:- Abertos (simples): <comando>- Fechados: <comando> . . . </comando>- Compostos: <comando>
<elemento 1> ... </elemento 1><elemento 2> ... </elemento 2>....<elemento n> ... </elemento n>
</comando>
HTML
Regras HTML e DicasFechar sempre os tags fechados e
compostos;NUNCA esquecer um sinal de “<” ou de
“>”, no início ou no fim do tag;
HTML
Regras HTML e DicasNão usar espaços no tag (no interior dos
sinais “<” e “>”). Ex:</ comando> - ERRADO!!!< com an do> - NUNCA!!!!Obs. Exceção a regra é quando é colocado
uma “característica” de comando na tag. Ex: <font face=“verdana” size=“4” color=“red”> TEXTO </font>
HTML
Documento Básico html<HTML>
<HEAD><TITLE>Titulo da Página</TITLE></HEAD><BODY><!-- Corpo da Página --></BODY>
</HTML>
HTML
Formatação básica da FonteDentro do tag BODY, você escreve todo o texto da sua página. E é neste texto que vamos nos concentrar agora. Os principais tags para a formatação de texto são:
HTML
<P>Cria um parágrafo</P><CENTER>Centraliza o texto</CENTER><B>Textos em negrito</B><I>Textos em itálico</I><U>Textos sublinhados</U><TT>Textos no estilo da máquina de escrever</TT><SUB>Texto subscrito</SUB><SUP>Texto sobrescrito</SUP>
HTML
<BR>Quebra de linha, não necessita ser fechado
<!--Este tag foi feito para comentários e é ignorado pelo browser -->
<DD>Este tag é usado para criar parágrafo (o espaço para a primeira linha). Se você quiser um parágrafo maior ou menor é necessário o uso de espaços através do caractere
HTML
Tag <FONT>....</FONT>
Atributo SIZEO tamanho da fonte, em HTML, varia de 1(menor) a 7 (maior).
HTML
<FONT SIZE=“n”>Onde n=tamanho da fonte desejado</FONT>
Atributo FACEPara mudar o estilo da fonte é só usar o atributo
FACE. Por exemplo, se eu quero que o meutexto use Arial tamanho 2, é só fazer assim:
<FONT SIZE=“2” FACE=“Arial”> Este é um exemplo da combinação de estilo e tamanho </FONT>
HTML
Atributo COLORAs cores das fontes são determinadas pelo atributo COLOR, no tag FONT.
<FONT COLOR="nome da cor em inglês"></FONT>Ex: <FONT COLOR=“RED”> TEXTO VERMELHO</FONT>
<FONT COLOR= #XXXXXX></FONT>Ex: <FONT COLOR= #f12020> TEXTO VERMELHO </FONT>
HTML
Tag <BODY> ... </BODY><BODY BGCOLOR=#xxxxxx TEXT=#xxxxxx LINK=#xxxxxx
VLINK= #xxxxxx>Atributo BGCOLOR - cor de fundo (padrão: cinza ou branco)Atributo TEXT - cor dos textos da página (padrão: preto)Atributo LINK - a cor dos links (padrão: azul)Atributo ALINK - cor dos links, quando acionados (padrão:
vermelho)Atributo VLINK - cor dos links, depois de visitados (padrão:
azul escuro ou roxo)
HTML
Atributo BACKGROUND – Imagem de fundo<BODY BACKGROUND=“PASTA/NOMEDAIMAGEM.EXTENSÃO”>
Exemplo:<BODY BACKGROUND=“img/fundo.jpg”>
HTML
Linhas Horizontais: Tag <HR>
<HR SIZE="espessura da linha em pixels" WIDTH="comprimento da linha” ALIGN="alinhamento da linha">
Exemplo:<HR WIDTH="200" SIZE="4"><HR WIDTH="50%" ALIGN="left"><HR SIZE="8" COLOR="#00FF00" ALIGN="right" NOSHADE>
HTML
Tag <IMG> e seus principais atributos:<IMG SRC="IMAGEM"><IMG SRC=“PASTA/IMAGEM">Exemplo:<IMG SRC="casa.jpg"><IMG SRC=“img/casa.jpg">
HTML
Alinhamento<IMG SRC="IMAGEM" ALIGN="alinhamento">
Este atributo especifica o tipo de alinhamento entre a imagem e o texto da pagina. As opções de alinhamento são: LEFT, RIGHT, TOP, TEXTOP, MIDDLE, ABSMIDDLE,BASELINE, BOTTOM, ABSBOTTOM e CENTER.
Exemplos:<IMG SRC="IMAGEM" ALIGN="center"><IMG SRC=“PASTA/IMAGEM" ALIGN="top">
HTML
Borda<IMG SRC="IMAGEM" BORDER="valor">Este atributo determina a espessura da borda da
imagem. No caso de uma imagem sem bordas, este atributo nao precisa ser citado.
Exemplos:<IMG SRC="casa.jpg" BORDER="10"><IMG SRC="casa.jpg" BORDER="0">
HTML
Largura e altura<IMG SRC="IMAGEM" WIDTH="LARGURA"
HEIGHT="ALTURA">Ester atributos especificam a largura e a altura da imagem.
Podem ser dados os valores em pixels ou serem proporcionais ao tamanho que a figura ocupara na pagina. Uma figura com dimensoes proporcionais as vezes sofre um efeito "stretch", ou seja, aparece repuxada na pagina.
Exemplos:<IMG SRC="casa.jpg" WIDTH="333" HEIGHT="200"><IMG SRC=“PASTA/casa.jpg" WIDTH="100%"
HEIGHT="20%">
HTML
Texto descritivo<IMG SRC="IMAGEM" ALT="TEXTO
DESCRITIVO">O atributo ALT exibe uma descricao quando o
cursor move-se sobre a imagem.Exemplos:<IMG SRC="casa.jpg" ALT="Foto de uma casa">
HTML
TAG <A> ... </A>Ao navegar pela internet, o usuário se depara com palavras geralmente escritas em azul e sublinhadas, sobre as quais o cursor assume formato de uma mãozinha. Clicando neste local levará as informações diferentes, podendo esta se encontrar:
Em outro local da mesma página; Em outra página no mesmo site; Em outro site, que pode estar em um lugar totalmente
diferente do globo;
HTML
Esta poderosa capacidade de conexão de idéias através de links é proporcionada pela linguagem HTML através do marcador Âncora de hipertexto, representado por <A>...</A> . Dentro deste marcador é preciso colocar a referência do arquivo destino, que se dá através do atributo HREF .
HTML
Exemplo: <A HREF ="referência ao arquivo destino" >
texto ou imagem origem </A>Exemplo de link para outra página no mesmo
site <a href= "outrapagina.html" >Clique aqui </a> Exemplo de link a partir de uma imagem<a href= "outrapagina.html" ><img
src="carro.jpg" border= "0" ></a>
HTML
Exemplo de link para outra página no mesmo site
<a href= “http://www.google.com" >Clique aqui para entrar no GOOGLE</a>
HTML
Exemplo de link de download de arquivo <a href= "arquivo.zip" >Clique para baixar </a>
Exemplo de link para e-mail <a href= "mailto:seue-
[email protected]" >Fale Conosco </a>
HTML
Atributos podem ainda ser usados em tags <A>. Por exemplo: TARGET=" ": Especifica o carregamento de um link em uma janela de destino. Ele pode assumir diversos valores: _top Carrega o link no corpo inteiro da janela _blank Carrega o link em uma janela em branco
HTML
Tag <marquee> ... </marquee>Exemplo:<marquee> TEXTO </marquee>
Atributo behavior<marquee behavior=“comportamento do
Texto”> TEXTO </marquee>
HTML
Comportamentos:- SCROLL: O texto passa continuamente- SLIDE: Desliza e Para em um dos cantos- ALTERNATE: Efeito “ping-pong”Exemplo:<marquee behavior=“alternate”> TEXTO
</marquee>
HTML
Atributo bgcolor (cor de fundo)Exemplos:<marquee bgcolor=“black”> TEXTO </marquee><marquee bgcolor=“#000000”> TEXTO
</marquee>
HTML
Atributo direction (direção)<marquee direction=“direção”> TEXTO </marquee>Direções:- Left- Right- Down- UpExemplo:<marquee direction=“up”> TEXTO </marquee>
HTML
Atributo Height e Width (altura e largura)
Atributo Javascript para parar o Marquee(letreiro)Onmouseover=“this.stop()”
onmouseout=“this.start()”Exemplo:<marquee direction=“down” bgcolor=“#ff4563”
behavior=“scroll” Onmouseover=“this.stop()” onmouseout=“this.start()”> TEXTO </marquee>
HTML
TÍTULOS Identifica títulos, usados para dividir seções do texto. Existem 6 níveis de títulos. Numerados de H1 a H6, que são exibidos em fonte maior que a fonte normal. Os marcadores de título podem ser alinhados.
HTML
Exemplo: <html> <head> <title> Títulos </title> </head> <body> <H1> Aqui vai o título 1 </H1> <H2> Aqui vai o título 2 </H2><H3> Aqui vai o título 3 </H3><H4> Aqui vai o título 4 </H4> <H5> Aqui vai o título 5 </H5><H6> Aqui vai o título 6 </H6></body> </html>
HTML
HTML