HTML Prof. Geyson Silva
HTML <tag> Conteúdo da tag </tag> O HTML trabalha com o sistema de tags (etiquetas). Esse sistema funciona da seguinte maneira. Ex: <tag> Conteúdo da tag </tag>
HTML Toda tag aberta, deve ser fechada, salvo raras exceções, nesses casos ela pode ser fechada da seguinte maneira: </tag>
HTML texto <tag> <outratag> </outratag> </tag> Uma tag HTML pode conter outra tag dentro dela, e quantas forem necessárias. <tag> <outratag> texto </outratag> </tag>
<img src=“caminhoImg.jpg”> HTML Algumas tag's possuem propriedades que podem possuir valores. Um exemplo claro é a tag de imagem que possui o caminho da imagem. <img src=“caminhoImg.jpg”>
Formas dos Comandos HTML Os 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 Dicas Fechar 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 Dicas Nã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>
Formatação básica da Fonte HTML Formatação básica da Fonte Dentro 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 SIZE O tamanho da fonte, em HTML, varia de 1(menor) a 7 (maior). <FONT SIZE=“n”>Onde n=tamanho da fonte desejado</FONT>
HTML Atributo FACE Para mudar o estilo da fonte é só usar o atributo FACE. Por exemplo, se eu quero que o meu texto 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 COLOR As 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 Exemplo: <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-mail@seuprovedor.com.br" >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 Up Exemplo: <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