Embed Size (px)
Citation preview
Curso de HTML
O curso proposto é resultado da experiência da O curso proposto é resultado da experiência da
Pró-Informática em ministrar treinamentos para Pró-Informática em ministrar treinamentos para
capacitação na área de TI ao longo dos seus 26 capacitação na área de TI ao longo dos seus 26
anos.anos.
O objetivo principal do curso é ensinar técnicas O objetivo principal do curso é ensinar técnicas
para construção de sites usando a linguagem para construção de sites usando a linguagem
HTML.HTML.
“a única coisa constante no mundo é a mudança”
HTML (HyperText Markup Language - HTML (HyperText Markup Language -
Linguagem de Marcação de Hipertexto) e a uma Linguagem de Marcação de Hipertexto) e a uma
linguagem considerada a base de todas as linguagem considerada a base de todas as
outras linguagens de desenvolvimento de outras linguagens de desenvolvimento de
projetos para WEB.projetos para WEB.
A linguagem HTML é baseada me tags, as tags A linguagem HTML é baseada me tags, as tags
constituem um conjunto comandos constituem um conjunto comandos
interpretados pelo navegador.interpretados pelo navegador.
As tags tem o seguinte formato: As tags tem o seguinte formato:
<html> </html><html> </html>
As tags tem na maioria das vezes o formato a As tags tem na maioria das vezes o formato a
seguir:seguir:
<comando> Sinal de menor o comando desejado e <comando> Sinal de menor o comando desejado e
sinal de maior para iniciar o bloco de comando.sinal de maior para iniciar o bloco de comando.
</comando> Sinal de menor, barra o comando </comando> Sinal de menor, barra o comando
para fechar o bloco.para fechar o bloco.
A tag inicial de uma Home Page é:A tag inicial de uma Home Page é:
<HTML> <HTML>
</HTML></HTML>
A tag HTML conta ao navegador que o bloco de A tag HTML conta ao navegador que o bloco de
comando a seguir é um código HTML e deve ser comando a seguir é um código HTML e deve ser
interpretado pelo navegador.interpretado pelo navegador.
A tag para definirmos o titulo do navegador é:A tag para definirmos o titulo do navegador é:
<TITLE>Minha primeira home page</TITLE><TITLE>Minha primeira home page</TITLE>
A tag para definirmos o titulo da página é:A tag para definirmos o titulo da página é:
<HEAD>Universidade Galáxia</HEAD><HEAD>Universidade Galáxia</HEAD>
A tag HEAD pode ter seu tamanho definido pelas tags:A tag HEAD pode ter seu tamanho definido pelas tags:
<H1></H1> <H1></H1> Maior título possívelMaior título possível
<H2></H2> <H2></H2> Segundo maior título possívelSegundo maior título possível
<H3></H3> <H3></H3> ......
<H4></H4><H4></H4>
<H5></H5><H5></H5>
Para que possamos melhorar a visualização de Para que possamos melhorar a visualização de
nossas páginas, podemos utilizar a tag nossas páginas, podemos utilizar a tag
<FONT></FONT>.<FONT></FONT>.
A tag font tem os seguintes parâmetros:A tag font tem os seguintes parâmetros:Color => Cor da fonte em inglês Ex. “Red”.Color => Cor da fonte em inglês Ex. “Red”.Face => Tipo da font Ex. “Comic Sans Ms”Face => Tipo da font Ex. “Comic Sans Ms”Size => Tamanho da fonte em pixels Ex. “14”Size => Tamanho da fonte em pixels Ex. “14”
Para a formatação de um texto podemos usar Para a formatação de um texto podemos usar várias combinações do comando font, como várias combinações do comando font, como mostrado.mostrado.
<HEAD><FONT COLOR = RED FACE = ARIAL><HEAD><FONT COLOR = RED FACE = ARIAL>Universidade GaláxiaUniversidade Galáxia</FONT></HEAD></FONT></HEAD>
Para o alinhamento de um texto podemos usar as Para o alinhamento de um texto podemos usar as tags <CENTER> Texto </CENTER>tags <CENTER> Texto </CENTER> <HEAD><H1><FONT COLOR = “RED” FACE = “ARIAL”> <CENTER><HEAD><H1><FONT COLOR = “RED” FACE = “ARIAL”> <CENTER>Universidade GaláxiaUniversidade Galáxia</CENTER></FONT></H1></HEAD></CENTER></FONT></H1></HEAD>
Determinados pelos marcadores Determinados pelos marcadores <BODY></BODY>, o corpo e a parte da página que <BODY></BODY>, o corpo e a parte da página que contem informações que serão visualizadas na tela.contem informações que serão visualizadas na tela.
Para mudarmos a cor de fundo de uma pagina Para mudarmos a cor de fundo de uma pagina utilizaremos a tag BODY com a seguinte sintaxe.utilizaremos a tag BODY com a seguinte sintaxe.
<BODY BGCOLOR = “COR”><BODY BGCOLOR = “COR”>O nome da cor deve estar em inglês, ex.: Gray, O nome da cor deve estar em inglês, ex.: Gray, red, yelow, blue, black.red, yelow, blue, black.Podemos utilizar ainda o número que identifica a Podemos utilizar ainda o número que identifica a cor em questão.cor em questão.
Escolhendo cores padrão para os texto e para os Escolhendo cores padrão para os texto e para os LinksLinks
<BODY TEXT="cor" LINK="cor" VLINK="cor" ALINK="cor“><BODY TEXT="cor" LINK="cor" VLINK="cor" ALINK="cor“>
Esses atributos determinam as cores para o texto geral da Esses atributos determinam as cores para o texto geral da página (TEXT), Links não visitados (LINK), Links já visitados página (TEXT), Links não visitados (LINK), Links já visitados (VLINK) e o Link no momento que ele e ativado (ALINK).(VLINK) e o Link no momento que ele e ativado (ALINK). As cores devem ser dadas preferencialmente em valores As cores devem ser dadas preferencialmente em valores hexadecimais.hexadecimais.
Podemos ainda colocar uma figura como plano Podemos ainda colocar uma figura como plano de fundo em nossas páginas, para isto usamos de fundo em nossas páginas, para isto usamos a seguinte tag:a seguinte tag:
<BODY BACKGROUND = “caminho\imagem”><BODY BACKGROUND = “caminho\imagem”>
Exemplo:Exemplo:<BODY BACKGROUND=“img\fundo.gif"><BODY BACKGROUND=“img\fundo.gif">
Para se colocar imagens em uma pagina HTML. Para se colocar imagens em uma pagina HTML. Usa-se o marcador <IMG> dentro das Usa-se o marcador <IMG> dentro das delimitações do <BODY>.delimitações do <BODY>.
<IMG SRC=“caminho\imagem”><IMG SRC=“caminho\imagem”>
Exemplo:Exemplo:< IMG SRC =“img\foto.gif">< IMG SRC =“img\foto.gif">
Este atributo especifica o tipo de alinhamento entre a Este atributo especifica o tipo de alinhamento entre a imagem e o texto da pagina. As imagem e o texto da pagina. As opções de alinhamento opções de alinhamento são: LEFT, RIGHT, TOP, MIDDLE, são: LEFT, RIGHT, TOP, MIDDLE, BOTTOM e CENTER.BOTTOM e CENTER.
<IMG SRC="IMAGEM" ALIGN="alinhamento"><IMG SRC="IMAGEM" ALIGN="alinhamento">
Exemplo:Exemplo:< IMG SRC =“img\foto.gif“ ALIGN = “CENTER”>< IMG SRC =“img\foto.gif“ ALIGN = “CENTER”>
Este atributo determina a espessura da borda da Este atributo determina a espessura da borda da imagem. No caso de uma imagem sem bordas, este imagem. No caso de uma imagem sem bordas, este atributo não precisa ser citado.atributo não precisa ser citado.
<IMG SRC="IMAGEM" BORDER="valor"><IMG SRC="IMAGEM" BORDER="valor">
Exemplo:Exemplo:< IMG SRC =“img\foto.gif “BORDER=“2”>< IMG SRC =“img\foto.gif “BORDER=“2”>
Estes atributos especificam a largura e a altura da imagem. Estes atributos especificam a largura e a altura da imagem. Podem ser dados os valores em pixels ou serem Podem ser dados os valores em pixels ou serem proporcionais ao tamanho que a figura ocupara na pagina. proporcionais ao tamanho que a figura ocupara na pagina. Uma figura com dimensões proporcionais as vezes sofre um Uma figura com dimensões proporcionais as vezes sofre um efeito "stretch", ou seja, aparece repuxada na pagina.efeito "stretch", ou seja, aparece repuxada na pagina.
<IMG SRC="IMAGEM" WIDTH="LARGURA" <IMG SRC="IMAGEM" WIDTH="LARGURA" HEIGHT="ALTURA">HEIGHT="ALTURA">
Exemplo:Exemplo:<< IMG SRC =“img\foto.gif IMG SRC =“img\foto.gif WIDTH="333" HEIGHT="200">WIDTH="333" HEIGHT="200">
O atributo ALT exibe uma descrição quando o cursor move-se O atributo ALT exibe uma descrição quando o cursor move-se sobre a imagem. Existem usuários que utilizam navegadores sobre a imagem. Existem usuários que utilizam navegadores incapazes de exibir imagens ou ajustam o navegador para incapazes de exibir imagens ou ajustam o navegador para não carregar imediatamente as imagens, devido a demora no não carregar imediatamente as imagens, devido a demora no carregamento das paginas.carregamento das paginas.
<IMG SRC="IMAGEM" ALT="TEXTO DESCRITIVO"><IMG SRC="IMAGEM" ALT="TEXTO DESCRITIVO">
Exemplo:Exemplo:
<< IMG SRC =“img\foto.gif IMG SRC =“img\foto.gif ALT="Foto de uma casa">ALT="Foto de uma casa">
<P> Texto </P> Delimita um parágrafo. E possível omitir o <P> Texto </P> Delimita um parágrafo. E possível omitir o elemento de fim </p> sem que isto cause problemas. elemento de fim </p> sem que isto cause problemas. Resultado da aplicação deste marcador e uma linha em Resultado da aplicação deste marcador e uma linha em branco antes do inicio do parágrafo.branco antes do inicio do parágrafo.
<P>Este é o meu parágrafo que eu acabei de fazer agora mas <P>Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que inventar este texto estou digitando coisas sem como tenho que inventar este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito difícil entender o que sentido e aleatoriamente por isso fica muito difícil entender o que estou digitando.</P>estou digitando.</P>
O marcador de parágrafo possui um atributo opcional o ALIGN que O marcador de parágrafo possui um atributo opcional o ALIGN que serve para configurar o alinhamento do parágrafo. O atributo serve para configurar o alinhamento do parágrafo. O atributo ALIGN pode conter valores como LEFT, CENTER, RIGHT e JUSTIFY ALIGN pode conter valores como LEFT, CENTER, RIGHT e JUSTIFY que significam respectivamente esquerda, centro, direita e que significam respectivamente esquerda, centro, direita e justificado.justificado.
<P ALIGN = JUSTIFY>Este é o meu parágrafo que eu acabei de <P ALIGN = JUSTIFY>Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que inventar este texto estou fazer agora mas como tenho que inventar este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito digitando coisas sem sentido e aleatoriamente por isso fica muito difícil entender o que estou digitando.</P>difícil entender o que estou digitando.</P>
Obs.: Não esquecer de explicar o redimensionamento do navegador.Obs.: Não esquecer de explicar o redimensionamento do navegador.
Existem alguns órgãos nacionais e internacionais que Existem alguns órgãos nacionais e internacionais que regulamentam algumas norma e práticas em diversas regulamentam algumas norma e práticas em diversas áreas da TI entre eles, podemos destacar: COBIT, ITIL, áreas da TI entre eles, podemos destacar: COBIT, ITIL, IEEE, ISO, W3C e outros.IEEE, ISO, W3C e outros.
Importância do <TITLE> </TITLE>Importância do <TITLE> </TITLE>
Alem mostrar o título na barra do navegador, a tag Alem mostrar o título na barra do navegador, a tag <TITLE> tem grande importância, pois a maioria dos <TITLE> tem grande importância, pois a maioria dos programas de busca iniciam coletagem de informações programas de busca iniciam coletagem de informações na tag <TITLE> do arquivo index dos sites.na tag <TITLE> do arquivo index dos sites.
Não devemos escrever textos longos na tag, pois a Não devemos escrever textos longos na tag, pois a mesma pode ficar cansativa se muito longa.mesma pode ficar cansativa se muito longa.
Algumas informações são pertinentes, nome da Algumas informações são pertinentes, nome da empresa e principal produto.empresa e principal produto.
O HEAD é ruim, mas é bom.O HEAD é ruim, mas é bom.
A tag <HEAD> é extremamente limitada acerca da A tag <HEAD> é extremamente limitada acerca da formatação do texto e alinhamento e pode ser formatação do texto e alinhamento e pode ser substituída pela tag <FONT> mas a mesma tem muita substituída pela tag <FONT> mas a mesma tem muita importância, pois mecanismos de busca lêem o seu importância, pois mecanismos de busca lêem o seu conteúdo para cache do siteconteúdo para cache do site11..
1 – Cache: técnica que armazena diversas informações 1 – Cache: técnica que armazena diversas informações do sites para tornar a busca mais rápida.do sites para tornar a busca mais rápida.
Para melhor utilização dos códigos HTML podemos utilizar alguns Para melhor utilização dos códigos HTML podemos utilizar alguns melhores métodos de formatação, neste caso aplica-se aos melhores métodos de formatação, neste caso aplica-se aos parágrafos. Parágrafos mau definidos tornam os códigos HTML parágrafos. Parágrafos mau definidos tornam os códigos HTML confusos e de difícil compreensão, por isso, a codificação da pagina confusos e de difícil compreensão, por isso, a codificação da pagina deve ser feita de forma clara e organizada.deve ser feita de forma clara e organizada.
<<PP alignalign="="justifyjustify"><"><fontfont colorcolor="="#003399#003399" " faceface="="Courier New, Courier, Courier New, Courier, monospacemonospace“ “ sizesize = = 44>>Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que Este é o meu parágrafo que eu acabei de fazer agora mas como tenho que inventar este texto estou digitando coisas sem sentido e aleatoriamente inventar este texto estou digitando coisas sem sentido e aleatoriamente por isso fica muito difícil entender o que estou digitandopor isso fica muito difícil entender o que estou digitando</</fontfont></></PP>>
<BR> <BR> - Marcador utilizado para separar duas linhas. E importante - Marcador utilizado para separar duas linhas. E importante observar que o marcador observar que o marcador <BR> <BR> deve vir no final da linha que se quer deve vir no final da linha que se quer separar.separar.
________________________________________________________________________________________________________________
<HR> <HR> -- Utilizadas para dar destaque a títulos ou para criar a sensação Utilizadas para dar destaque a títulos ou para criar a sensação de quebra entre um item de informação e outro. O marcador de quebra entre um item de informação e outro. O marcador <HR> <HR> (Horizontal Line) pode ser utilizado com ou sem parâmetros. O (Horizontal Line) pode ser utilizado com ou sem parâmetros. O comprimento da linha comprimento da linha WIDTHWIDTH pode ser a largura exata da linha ou pode ser a largura exata da linha ou uma porcentagem da largura da tela.uma porcentagem da largura da tela.<HR SIZE="espessura da linha em pixels" WIDTH="comprimento da linha“ <HR SIZE="espessura da linha em pixels" WIDTH="comprimento da linha“ ALIGN="alinhamento da linha">ALIGN="alinhamento da linha">
________________________________________________________________________________________________________________
    - (Mágico) Faz com que o navegador mostre um espaço em - (Mágico) Faz com que o navegador mostre um espaço em branco.branco.
<B> TEXTO EM NEGRITO </B><BR><B> TEXTO EM NEGRITO </B><BR><BIG> TEXTO EM FONTE MAIOR </BIG><BR><BIG> TEXTO EM FONTE MAIOR </BIG><BR>**********<BLINK> EXIBE TEXTO PISCANDO </BLINK> <BR><BLINK> EXIBE TEXTO PISCANDO </BLINK> <BR>**********<I>TEXTO EM ÍTALICO </I><BR><I>TEXTO EM ÍTALICO </I><BR><U>EXIBE O TEXTO SUBLINHADO </U><BR><U>EXIBE O TEXTO SUBLINHADO </U><BR><SMALL>TEXTO EM FONTE MENOR </SMALL><BR><SMALL>TEXTO EM FONTE MENOR </SMALL><BR><STRIKE>TEXTO RISCADO </STRIKE><BR><STRIKE>TEXTO RISCADO </STRIKE><BR><SUB>TEXTO EM SUBSCRITO </SUB><BR><SUB>TEXTO EM SUBSCRITO </SUB><BR><SUP>TEXTO SOBRESCRITO </SUP><BR><SUP>TEXTO SOBRESCRITO </SUP><BR><TT>EXIBE O TEXTO USANDO FONTE EM TAMANHO FIXO</TT><TT>EXIBE O TEXTO USANDO FONTE EM TAMANHO FIXO</TT>
<ADDRESS> TEXTO </ADDRESS> <ADDRESS> TEXTO </ADDRESS> - Exibe o texto em itálico é utilizado - Exibe o texto em itálico é utilizado para indicar o endereço (postal, e-mail ou ambos) do autor do para indicar o endereço (postal, e-mail ou ambos) do autor do documento HTML. Insere uma quebra de parágrafo <BR> antes e outra documento HTML. Insere uma quebra de parágrafo <BR> antes e outra depois do texto e geralmente e o ultimo item exibido no documento.depois do texto e geralmente e o ultimo item exibido no documento.
<BLOCKQUOTE> <BLOCKQUOTE> texto com margem texto com margem </BLOCKQUOTE></BLOCKQUOTE> - Destaca o - Destaca o texto deixando-o com uma margem maior.texto deixando-o com uma margem maior.
<<CITE> TEXTO </CITE> CITE> TEXTO </CITE> - Exibe o texto em itálico é utilizado para - Exibe o texto em itálico é utilizado para citações de livros, filmes, obras, etc.citações de livros, filmes, obras, etc.
<CODE> TEXTO </CODE> <CODE> TEXTO </CODE> - Exibe o texto em fonte tamanho fixo - Exibe o texto em fonte tamanho fixo (como Courier) e e utilizado para identificar trechos de códigos de (como Courier) e e utilizado para identificar trechos de códigos de programas.programas.
<EM> TEXTO </EM> <EM> TEXTO </EM> -- Exibe o texto em itálico é usado para enfatizar um Exibe o texto em itálico é usado para enfatizar um texto.texto.
<KBD> <KBD> texto em fonte mono espaçada </KBD> - Exibe o texto em fonte texto em fonte mono espaçada </KBD> - Exibe o texto em fonte tamanho fixo é utilizado para indicar dados introduzidos pelo teclado.tamanho fixo é utilizado para indicar dados introduzidos pelo teclado.
<SAMP> <SAMP> TEXTO </SAMP>TEXTO </SAMP>Exibe o texto em uma fonte tamanho fixo (como Courier) é utilizado para Exibe o texto em uma fonte tamanho fixo (como Courier) é utilizado para indicar textos representados seqüenciais de caracteres literais e mensagens indicar textos representados seqüenciais de caracteres literais e mensagens de computador.de computador.
<STRONG> TEXTO </STRONG><STRONG> TEXTO </STRONG>Exibe o texto em negrito é utilizado para destacar um texto.Exibe o texto em negrito é utilizado para destacar um texto.
<VAR> TEXTO </VAR> <VAR> TEXTO </VAR> Exibe o texto em itálico é utilizado para destacar um Exibe o texto em itálico é utilizado para destacar um nome de variável que o usuário deve substituir por um valor real.nome de variável que o usuário deve substituir por um valor real.
Utilizadas como um recurso essencial para o layout geral da pagina Utilizadas como um recurso essencial para o layout geral da pagina através do posicionamento de imagens e texto, as tabelas são compostas através do posicionamento de imagens e texto, as tabelas são compostas de linhas dentro das quais são colocadas células de conteúdo. O conteúdo de linhas dentro das quais são colocadas células de conteúdo. O conteúdo de cada célula pode ser texto, imagem ou ate mesmo outra tabela. Uma de cada célula pode ser texto, imagem ou ate mesmo outra tabela. Uma tabela e delimitada com os marcadores <TABLE></TABLE>, sendo que tabela e delimitada com os marcadores <TABLE></TABLE>, sendo que dentro destes marcadores são colocadas as linhas e as colunas da tabela.dentro destes marcadores são colocadas as linhas e as colunas da tabela.
<TR> Indica o início de uma nova linha na tabela<TR> Indica o início de uma nova linha na tabela
<TD> Indica uma coluna na tabela<TD> Indica uma coluna na tabela
</TD> Indica o final daquela coluna na tabela</TD> Indica o final daquela coluna na tabela
</TR> Indica o final da linha na tabela</TR> Indica o final da linha na tabela
Contar pra que serve realmente o <div align="center">Contar pra que serve realmente o <div align="center">
<table><table> <tr><tr> <td>1</td><td>1</td> <td>2</td><td>2</td> <td>3</td><td>3</td> </tr></tr> <tr><tr> <td>4</td><td>4</td> <td>5</td><td>5</td> <td>6</td><td>6</td> </tr></tr> <tr><tr> <td>7</td><td>7</td> <td>8</td><td>8</td> <td>9</td><td>9</td> </tr></tr></table></table>
1 2 3
4 5 6
7 8 9
Podemos ainda alinhar o texto da tabela usando os seguintes Podemos ainda alinhar o texto da tabela usando os seguintes parâmetros:parâmetros:
<TABLE ALIGN="LEFT"><TABLE ALIGN="LEFT">
<TABLE ALIGN="RIGHT"><TABLE ALIGN="RIGHT">
<TABLE ALIGN="CENTER"><TABLE ALIGN="CENTER">
Para definir o tamanho usaremos:Para definir o tamanho usaremos:
<TABLE WIDHT="largura da tabela" HEIGHT="altura da tabela"><TABLE WIDHT="largura da tabela" HEIGHT="altura da tabela">
Para largura da borda usaremos:Para largura da borda usaremos:
<TABLE BORDER="espessura da borda"><TABLE BORDER="espessura da borda">
Especificar o deslocamento do conteúdo da célula em relação as Especificar o deslocamento do conteúdo da célula em relação as bordas:bordas:
<TABLE CELLPADDING="valor"><TABLE CELLPADDING="valor">
Especifica o espaçamento entre as células da tabela.Especifica o espaçamento entre as células da tabela.
<TABLE CELLPACING="valor"><TABLE CELLPACING="valor">
BORDERCOLOR e BGCOLORBORDERCOLOR e BGCOLOR
<TABLE BORDERCOLOR="valor hexadecimal" BGCOLOR="valor hexadecimal"><TABLE BORDERCOLOR="valor hexadecimal" BGCOLOR="valor hexadecimal">
Especifica respectivamente a cor da borda e a cor da tabela. As cores devem Especifica respectivamente a cor da borda e a cor da tabela. As cores devem ser dadasser dadas
em valores hexadecimais.em valores hexadecimais.
BACKGROUNDBACKGROUND
<TABLE BACKGROUND="imagem"><TABLE BACKGROUND="imagem">
O mundo é maior do que pensamos.O mundo é maior do que pensamos.E a internet?E a internet?E os usuários?E os usuários?E os computadores?E os computadores?E os Navegadores, quantos são. (IE6, IE7, IE8, Firefox, E os Navegadores, quantos são. (IE6, IE7, IE8, Firefox, Slim Browser, Conqueror, Acoo Browser, Slim Browser, Conqueror, Acoo Browser, Google Google Chrome, Avant Browser, Opera Tor , Safari, e etc) são Chrome, Avant Browser, Opera Tor , Safari, e etc) são hoje mais de 450 publicados.hoje mais de 450 publicados.
A grande pergunta é: A grande pergunta é:
O meu site vai funcionar bem em todos?O meu site vai funcionar bem em todos?
R1: Crie um ambientes de teste, instale pelo menos os R1: Crie um ambientes de teste, instale pelo menos os mais utilizados em seu PC e navegue pelo seu site.mais utilizados em seu PC e navegue pelo seu site.
R2: Capture as telas dos que apresentarem diferenças R2: Capture as telas dos que apresentarem diferenças estéticas ou de resultado dos comandos.estéticas ou de resultado dos comandos.
R2: Contrate empresas especializadas em teste de R2: Contrate empresas especializadas em teste de software.software.
Os códigos dos sites, portais e intranets são Os códigos dos sites, portais e intranets são interpretados de duas formas:interpretados de duas formas:
Interpretados pelo cliente:Interpretados pelo cliente: O próprio navegador é O próprio navegador é responsável pela interpretação do código. Ex.: HTML, responsável pela interpretação do código. Ex.: HTML, DHTML, CSS, VBScript e JavaScript.DHTML, CSS, VBScript e JavaScript.
Interpretados pelo servidor:Interpretados pelo servidor: É obrigado que haja um servidor que interpreta o código e retorna para cliente em forma de HTML. Ex.: ASP, PHP e Ruby On Rails. Ex.: ASP, PHP e Ruby On Rails.
Hyperlinks são caminhos dinâmicos para outros site, Hyperlinks são caminhos dinâmicos para outros site, paginas, ou áreas do mesmo documento.paginas, ou áreas do mesmo documento.
1 - Para Sites:1 - Para Sites:<a href = “http://site”> Texto do site</a><a href = “http://site”> Texto do site</a>2 - Para páginas:2 - Para páginas:<a href = “pagina.htm”>Texto da pagina</a><a href = “pagina.htm”>Texto da pagina</a>3 - Para áreas do documento: 3 - Para áreas do documento: AncorasAncoras<a name=“área"></a> cria a área<a name=“área"></a> cria a área<a href="#área"> vai para a área<a href="#área"> vai para a área4 - para áreas em paginas.4 - para áreas em paginas.<a href = “pagina.htm#área>Texto da pagina / <a href = “pagina.htm#área>Texto da pagina / área</a>área</a>
Exemplo de link a partir de uma imagemExemplo de link a partir de uma imagem<a href="outrapagina.html"><img src=“Imagen" <a href="outrapagina.html"><img src=“Imagen"
border="0"></a>border="0"></a>
Exemplo de link de download de arquivoExemplo de link de download de arquivo<a href="arquivo.zip“>Clique para baixar</a> <a href="arquivo.zip“>Clique para baixar</a>
Exemplo de link para e-mailExemplo de link para e-mail<a href="mailto:[email protected]">Fale Conosco </a><a href="mailto:[email protected]">Fale Conosco </a>
E possível colocar vídeo em uma pagina HTML utilizando o marcador E possível colocar vídeo em uma pagina HTML utilizando o marcador <IMG>. A única diferença e que se acrescenta o atributo DYNSRC.<IMG>. A única diferença e que se acrescenta o atributo DYNSRC.
<IMG DYNSRC="origem do vídeo“ START="opção“ LOOP="número"> <IMG DYNSRC="origem do vídeo“ START="opção“ LOOP="número">
Para que o vídeo seja iniciado, automaticamente no carregamento da Para que o vídeo seja iniciado, automaticamente no carregamento da pagina e preciso utilizar START="FILEOPEN“pagina e preciso utilizar START="FILEOPEN“
Para que o vídeo seja iniciado quando o usuário passar o mouse sobre ele e Para que o vídeo seja iniciado quando o usuário passar o mouse sobre ele e preciso usar START="MOUSEOVER“ preciso usar START="MOUSEOVER“
LOOP: Especifica o numero de vezes que o vídeo vai ser exibido. Para que o LOOP: Especifica o numero de vezes que o vídeo vai ser exibido. Para que o vídeo seja exibidovídeo seja exibido
continuamente e preciso utilizar LOOP=INFINITEcontinuamente e preciso utilizar LOOP=INFINITE
Obs.: Não precisa especificar o atributo START; apenas se não quiser a função FILEOPEN, pois essa opção e Obs.: Não precisa especificar o atributo START; apenas se não quiser a função FILEOPEN, pois essa opção e padrão.padrão.
<EMBED SRC="vídeo" WIDTH="valor" HEIGHT="valor" AUTOSTART="opção“ <EMBED SRC="vídeo" WIDTH="valor" HEIGHT="valor" AUTOSTART="opção“ LOOP="opção">LOOP="opção">
O Mercado embed mostra os videos com um mini player com os O Mercado embed mostra os videos com um mini player com os botões botões de EXECUTAR, PARAR, PAUSAR, ETCde EXECUTAR, PARAR, PAUSAR, ETC
O mesmo comando pode ser usado para sons.O mesmo comando pode ser usado para sons.
Tipos: "DISC" , "CIRCLE" ou "SQUARE"Tipos: "DISC" , "CIRCLE" ou "SQUARE"
Sintaxe:Sintaxe:<UL Type = “Disc”><UL Type = “Disc”><LI> Lista cada um dos subitens da lista </LI><LI> Lista cada um dos subitens da lista </LI></UL></UL>Exemplo:Exemplo:<ul><ul><li> Curitiba </li><li> Curitiba </li><li> São Paulo </li><li> São Paulo </li><li> Rio de Janeiro </li><li> Rio de Janeiro </li></ul></ul>
<OL start=“Valor"> Onde start define o número inicial da lista<OL start=“Valor"> Onde start define o número inicial da lista
<LI> Lista cada um dos subitens da lista </LI><LI> Lista cada um dos subitens da lista </LI>
</OL></OL>
Exemplo:Exemplo:
<ol start = “3”><ol start = “3”>
<li> Curitiba </li><li> Curitiba </li>
<li> São Paulo </li><li> São Paulo </li>
</ol></ol>
TYPE:TYPE:
Define o tipo de numeração aplicada na lista. Define o tipo de numeração aplicada na lista.
<ol type="A"> Assim em vez de aparecer 1, 2, 3 ... ira aparecer A, B, C ...<ol type="A"> Assim em vez de aparecer 1, 2, 3 ... ira aparecer A, B, C ...
<li> Curitiba </li><li> Curitiba </li>
<li> São Paulo </li><li> São Paulo </li>
</ol></ol>
<DL><DL>
<DT> Termos a ser definidos </DT><DT> Termos a ser definidos </DT>
</DL></DL>
Exemplo:Exemplo:
<DL><DL>
<DT> Banana </DT><DT> Banana </DT>
<DD>Banana Maçã </DD><DD>Banana Maçã </DD>
<DD>Banana Nanica </DD><DD>Banana Nanica </DD>
<DT> Mamão </DT><DT> Mamão </DT>
<DD>Mamão Papaia </DD><DD>Mamão Papaia </DD>
</DL></DL>
É um utilitário HTML que possibilita cadastros, pesquisas, envio de É um utilitário HTML que possibilita cadastros, pesquisas, envio de comentários, e-mails desde que combinado com uma linguagem comentários, e-mails desde que combinado com uma linguagem estruturada aumentando (Java, ASP, PHP Rubi) um formulário HTML estruturada aumentando (Java, ASP, PHP Rubi) um formulário HTML é uma pagina Web que contem, alem de texto, elementos é uma pagina Web que contem, alem de texto, elementos especiais chamados controles, representados por caixas de especiais chamados controles, representados por caixas de checagem, botões, caixas de seleção, campos de textos, etc.checagem, botões, caixas de seleção, campos de textos, etc.
A TAG usado e A TAG usado e <FORM></FORM> <FORM></FORM> para marcar o inicio e o fim do para marcar o inicio e o fim do Formulário.Formulário.
A tag form pode receber alguns parâmetros como veremos a A tag form pode receber alguns parâmetros como veremos a seguir.seguir.
<FORM NAME=”nome” METHOD=”valor” ACTION=”Ação”><FORM NAME=”nome” METHOD=”valor” ACTION=”Ação”>elementos do formulárioselementos do formulários</FORM></FORM>
Para o parâmetro Para o parâmetro NAME NAME informamos o nome do formulário. informamos o nome do formulário.
Para o parâmetro Para o parâmetro METHODMETHOD informaremos GET OU POST onde: informaremos GET OU POST onde:GET é uma cadeia de pedido, por exemplo: ydoc.asp?var1. GET é uma cadeia de pedido, por exemplo: ydoc.asp?var1. POST é uma cadeia de envio de dados, por exemplo: respostas.php.POST é uma cadeia de envio de dados, por exemplo: respostas.php.
Para o parâmetro Para o parâmetro ACTIONACTION o nome da pagina, banco de dados que o nome da pagina, banco de dados que cedera ou recebera os dados.cedera ou recebera os dados.
Caixa de texto: Caixa de texto: São campos onde o usuário poderá entrar com dados São campos onde o usuário poderá entrar com dados do tipo texto como nome, fone, e-mail.do tipo texto como nome, fone, e-mail.
Exemplo:Exemplo:<p>Entre com seu nome:<INPUT TYPE=”TEXT” <p>Entre com seu nome:<INPUT TYPE=”TEXT” NAME=”Nome”></p>NAME=”Nome”></p>
Input: Input: Comando que indica uma entrada de dados.Comando que indica uma entrada de dados.Type = “text”: Type = “text”: Indica que a entrada é uma caixa de textoIndica que a entrada é uma caixa de textoName: Name: Indica o nome da caixa de texto, é usada para a interação Indica o nome da caixa de texto, é usada para a interação com outros programas.com outros programas.““Opcionalmente podemos utilizar o parâmetro VALUE = “valor” para Opcionalmente podemos utilizar o parâmetro VALUE = “valor” para mostrar a caixa de texto já preenchida.”mostrar a caixa de texto já preenchida.”Podemos ainda utilizar os parâmetros Size e MAXLENGTH para definir Podemos ainda utilizar os parâmetros Size e MAXLENGTH para definir o tamanho da caixa e o máximo de caracteres permitidos, me pixels.o tamanho da caixa e o máximo de caracteres permitidos, me pixels.
Caixa de texto como senha: Caixa de texto como senha: São campos onde o usuário poderá São campos onde o usuário poderá entrar com dados do tipo texto e utilizar * para ocultar o texto.entrar com dados do tipo texto e utilizar * para ocultar o texto.Exemplo:Exemplo:<p>Entre com sua senha<p>Entre com sua senha<INPUT TYPE = "password" <INPUT TYPE = "password" name=“Senha”>name=“Senha”>
Todos os parâmetros do tipo “TEXT” podem ser aplicados ao tipo Todos os parâmetros do tipo “TEXT” podem ser aplicados ao tipo Password.Password.
Caixa de texto com múltiplas linhas: Caixa de texto com múltiplas linhas: São campos onde o usuário São campos onde o usuário poderá entrar com dados do tipo texto em uma área maior e mais poderá entrar com dados do tipo texto em uma área maior e mais visível, pode conter ate 4000 caracteres.visível, pode conter ate 4000 caracteres.
Exemplo:Exemplo:Sugestões:<BR> <textarea name="sugestao" cols="25" Sugestões:<BR> <textarea name="sugestao" cols="25" rows="6"> </textarea>rows="6"> </textarea>
Todos os parâmetros do tipo “TEXT” podem ser aplicados ao tipo Todos os parâmetros do tipo “TEXT” podem ser aplicados ao tipo Password e os comandos cols (número de colunas, cada coluna é Password e os comandos cols (número de colunas, cada coluna é um caracter) rows (numero de linhas, cada linha mostra uma linha um caracter) rows (numero de linhas, cada linha mostra uma linha de texto).de texto).
Caixa de combinação: Caixa de combinação: O marcador SELECT permite a criação de O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo usuário.uma lista de opções a serem escolhidas pelo usuário.
Exemplo:Exemplo:
Sexo:<SELECT NAME=”sexo” SIZE=”2”>Sexo:<SELECT NAME=”sexo” SIZE=”2”><OPTION VALUE=”Masculino”> Masculino </OPTION><OPTION VALUE=”Masculino”> Masculino </OPTION><OPTION VALUE=”Feminino”> Feminino </OPTION><OPTION VALUE=”Feminino”> Feminino </OPTION></SELECT></SELECT>
Caixa de listagem: Caixa de listagem: Permite que na tela apareça uma lista com mais de uma Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma. A criação de caixas de opção, podendo o usuário escolher mais de uma. A criação de caixas de listagem com múltipla seleção é idêntica a criação de caixas de listagem sem listagem com múltipla seleção é idêntica a criação de caixas de listagem sem múltiplas seleções com exceção do atributo MULTIPLE que deve ser múltiplas seleções com exceção do atributo MULTIPLE que deve ser acrescentado.acrescentado.
Exemplo:Exemplo:<SELECT NAME=”interesses” SIZE=”5” MULTIPLE><SELECT NAME=”interesses” SIZE=”5” MULTIPLE>
<OPTION VALUE=”vazio”>Escolha a área de interesse</OPTION><OPTION VALUE=”vazio”>Escolha a área de interesse</OPTION>
<OPTION VALUE=”iniciant”>Curso de iniciantes</OPTION><OPTION VALUE=”iniciant”>Curso de iniciantes</OPTION>
<OPTION VALUE=”formprof”>Formação profissional</OPTION><OPTION VALUE=”formprof”>Formação profissional</OPTION>
<OPTION VALUE=”ctec”>Cursos Microsoft® CTEC</OPTION><OPTION VALUE=”ctec”>Cursos Microsoft® CTEC</OPTION>
<OPTION VALUE=”todos”>Todos</OPTION><OPTION VALUE=”todos”>Todos</OPTION>
</SELECT></SELECT>
Caixa de listagem: Caixa de listagem: Permite que na tela apareça uma lista com mais de uma Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma. A criação de caixas de opção, podendo o usuário escolher mais de uma. A criação de caixas de listagem com múltipla seleção é idêntica a criação de caixas de listagem sem listagem com múltipla seleção é idêntica a criação de caixas de listagem sem múltiplas seleções com exceção do atributo MULTIPLE que deve ser múltiplas seleções com exceção do atributo MULTIPLE que deve ser acrescentado.acrescentado.
Exemplo:Exemplo:<SELECT NAME=”interesses” SIZE=”5” MULTIPLE><SELECT NAME=”interesses” SIZE=”5” MULTIPLE>
<OPTION VALUE=”vazio”>Escolha a área de interesse</OPTION><OPTION VALUE=”vazio”>Escolha a área de interesse</OPTION>
<OPTION VALUE=”iniciant”>Curso de iniciantes</OPTION><OPTION VALUE=”iniciant”>Curso de iniciantes</OPTION>
<OPTION VALUE=”formprof”>Formação profissional</OPTION><OPTION VALUE=”formprof”>Formação profissional</OPTION>
<OPTION VALUE=”ctec”>Cursos Microsoft® CTEC</OPTION><OPTION VALUE=”ctec”>Cursos Microsoft® CTEC</OPTION>
<OPTION VALUE=”todos”>Todos</OPTION><OPTION VALUE=”todos”>Todos</OPTION>
</SELECT></SELECT>
Caixa de Checagem: Caixa de Checagem: O valor CHECKBOX no atributo TYPE define uma caixa O valor CHECKBOX no atributo TYPE define uma caixa de checagem. Na pratica, as caixas de checagem aparecem em grupos e os de checagem. Na pratica, as caixas de checagem aparecem em grupos e os usuários podem escolher uma ou mais opções..usuários podem escolher uma ou mais opções..
Exemplo:Exemplo:<p>Escolha a área de interesse</p><p>Escolha a área de interesse</p><INPUT TYPE=”CHECKBOX” NAME=”caixa1” VALUE=”iniciant”> Cursos <INPUT TYPE=”CHECKBOX” NAME=”caixa1” VALUE=”iniciant”> Cursos paraparainiciantes<Br>iniciantes<Br><INPUT TYPE=”CHECKBOX” NAME=”caixa2” VALUE=”formprof”> Cursos de <INPUT TYPE=”CHECKBOX” NAME=”caixa2” VALUE=”formprof”> Cursos de formaçãoformaçãoprofissional<Br>profissional<Br><INPUT TYPE=”CHECKBOX” NAME=”caixa3” VALUE=”ctec”> Cursos da <INPUT TYPE=”CHECKBOX” NAME=”caixa3” VALUE=”ctec”> Cursos da Microsoft®Microsoft®CTECCTEC
CHECKED: CHECKED: atributo opcional que pode ser utilizado quando se deseja que a atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na pagina.opção já apareça selecionada na pagina.
Botão de opção: Botão de opção: O valor RADIO no atributo TYPE define um botão de O valor RADIO no atributo TYPE define um botão de escolha. Na pratica os botões de escolha aparecem em grupos e podem escolha. Na pratica os botões de escolha aparecem em grupos e podem permitir que apenas uma opção seja escolhida dentre as existentes.permitir que apenas uma opção seja escolhida dentre as existentes.
Exemplo:Exemplo:<p>Escolha a área de interesse</p><p>Escolha a área de interesse</p><INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”iniciante”> Cursos para<INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”iniciante”> Cursos parainiciantes<Br>iniciantes<Br><INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”formprof”> Cursos <INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”formprof”> Cursos formaçãoformaçãoprofissional<Br>profissional<Br><INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”ctec”> Cursos <INPUT TYPE=”RADIO” NAME=”radio1” VALUE=”ctec”> Cursos Microsoft® CTEC<Br>Microsoft® CTEC<Br>
CHECKED: CHECKED: atributo opcional que pode ser utilizado quando se deseja que a atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na pagina.opção já apareça selecionada na pagina.
Botão LIMPA/CANCELABotão LIMPA/CANCELA
<INPUT TYPE=”RESET” VALUE=”texto que aparece no botão”> O valor <INPUT TYPE=”RESET” VALUE=”texto que aparece no botão”> O valor RESET no atributo TYPE define um botão que limpa todos os campos, RESET no atributo TYPE define um botão que limpa todos os campos, devolvendo os mesmos valores de quando a pagina foi carregada. No devolvendo os mesmos valores de quando a pagina foi carregada. No atributo VALUE, pode-se definir o que será escrito no botão. Caso atributo VALUE, pode-se definir o que será escrito no botão. Caso nenhum valor seja definido, aparecera somente RESET.nenhum valor seja definido, aparecera somente RESET.
Botão SUBMITBotão SUBMIT
<INPUT TYPE=”SUBMIT” VALUE=”texto que aparece no Botão”> O valor <INPUT TYPE=”SUBMIT” VALUE=”texto que aparece no Botão”> O valor SUBMIT no atributo TYPE define um botão que aciona o envio das SUBMIT no atributo TYPE define um botão que aciona o envio das informações preenchidas no formulário ao programa interpretador. O informações preenchidas no formulário ao programa interpretador. O atributo VALUE define o que será escrito no botão. Caso nenhum valor atributo VALUE define o que será escrito no botão. Caso nenhum valor seja definido, aparecera somente SUBMIT.seja definido, aparecera somente SUBMIT.
