Baixe Aprendendo HTML: Iniciando um documento, TAGs, Formatação de textos, Exemplos e Tabelas e outras Notas de estudo em PDF para Informática, somente na Docsity!
www.businessmail.kit.net
1. 1. HHTTMMLL BBáássiiccoo II
HTML significa Hypertext Markup Language e é a linguagem de descrição de
- HTML Básico I Ín Índdiiccee
- 1.1 - Iniciando um documento
- 1.2 - TAGs usados no início do documento
- 1.3 - Títulos e subtítulos
- 1.4 - Formatação de textos
- HTML Básico II
- 2.1 - Imagens
- 2.2 - Links
- Listas
- 3.1 - Criando listas ordenadas
- 3.2 - Criando listas não ordenadas
- 3.3 - Atributos adicionais do elemento UL
- Refresh Page
- Tabelas
- 5.1 - Construindo tabelas com o elemento TABLE
- 5.1.1 - O título da tabela (Elemento CAPTION)
- 5.1.2 - Table Headings (Elemento TH)
- 5.1.3 - Table Data (Elemento TD)
- 5.1.4 End of Table Row (Elemento TR)
- 5.2 - Atributos para a Tabela
- 5.2.1 - BORDER
- 5.2.2 - ALIGN
- 5.2.3 - VALIGN
- Formulários
- 6.1 - Construindo formulários com o FORM
- 6.2 - Atributos para FORM
- 6.2.1 - GET
- 6.2.2 - POST
- 6.2.3 - INPUT
- 6.2.3.1 - Tipos de elementos TYPE
- 6.2.3.1.1 - TYPE=”RADIO”
- 6.2.3.1.2 - TYPE=”PASSWORD”
- 6.2.3.1.3 - TYPE=”CHECKBOX”
- 6.2.3.1.4 - TYPE=”SUBMIT”
- 6.2.3.1.5 - TYPE=”RESET”
- 6.2.4 - TEXTAREA
- 6.2.5 - SELECT
- 6.3 - Exemplo Completo
- Frames
- 7.1 - Estrutura
- 7.2 - Sintaxe
- 7.3 - FRAMESET
- 7.3.1 - ROWS
- 7.3.2 - COLS
- 7.4 - FRAME
- 7.4.1 - SRC
- 7.4.2 - NAME
- 7.4.3 - SCROLLING www.businessmail.kit.net
- 7.4.4 - NORESIZE
- 7.4.5 - TARGET
- 7.5 - BORDER
- Música
- Caracteres Especiais
- Imagens Clicáveis
- 10.1 - Métodos que tornam sua imagem sensível
- 10.2 - Sensibilizando as imagens
- GIFs Animados
- Ferramentas
- 12.1 - Utilitários gráfico
- 12.2 - Editores HTML
- Hospedagem
- Glossário
Texto inserido entre e : Observações: As TAGs CENTER e BLINK têm a função de deixar o cabeçalho ou texto centralizado e pulsante (piscando), respectivamente.
- 1 .44 -- FFOORRMMAATTAAÇÇÃÃOO DDEE TTEEXXTTOOSS Além das TAGs ... e ... existem as seguintes TAGs que podem ser utilizadas para a formatação de um texto. ... - Aplica o estilo negrito. ... - Aplica o estilo itálico. ... - Aplica o estilo sublinhado (nem todos os browser o reconhecem). ... - Faz com que o texto fique sobrescrito. ... - Faz com que o texto fique (^) subscrito. ... - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.
2. 2. HHTTMMLL BBáássiiccoo IIII
2. 2 .11 -- IIMMAAGGEENNSS
Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de cuidado, para não onerara transmissão para o usuário. Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels. Para inserir uma imagem, uso o TAG: , que é único, não exigindo um TAG finalizado. Exemplo:
Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso, juntamente com o documento HTML. www.businessmail.kit.net
www.businessmail.kit.net
2. 2 .22 -- LLIINNKKSS
Os Links servem para criar Palavras Quentes , que permitem a interligação entre documentos HTML e outros documentos ou até arquivos FTP. Veja o seguinte exemplo:
Para o próprio documento Para outro documento Para minha Home Page Âncora para imagem externa Us Usee:: Texto ou imagem... O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#". Por exemplo: Aqui é um ponto para desvios...Desvia para o ponto "AQUI"
3. 3. LLiissttaass
3. 3 .11 -- CCRRIIAANNDDOO LLIISSTTAASS OORRDDEENNAADDAASS
Listas ordenadas, são também denominadas listas numeradas, pois, quando um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente. Listas ordenadas são iniciadas pela TAG . Cada item utiliza a TAG . Finalmente, . Exemplo:
É facil fazer uma Home Page Tem que ter paciência Bons recursos E não exagerar em imagens
Resultado:
www.businessmail.kit.net
4. 4. RReeffrreesshh PPaaggee
São páginas normalmente sem links, que chamam outras depois de um determinado tempo dentro dela, sem nenhuma interferência do internauta. Para fazer uma página desta basta colocar no documento a seguinte linha de comando: Ex.:
Título
Corpo do Documento
www.businessmail.kit.net
5. 5. TTaabbeellaass
Tabelas correspondem a um ótimo formato para originar informações, e é por essa razão que eles foram acrescentados à linguagem HTML
- 5 .11 -- CCOONNSSTTRRUUIINNDDOO TTAABBEELLAASS CCOOMM OO EELLEEMMEENNTTOO TTAABBLLEE A TAG é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs
- 5 .11..11 -- OO TTÍÍTTUULLOO DDAA TTAABBEELLAA ((EELLEEMMEENNTTOO CCAAPPTTIIOONN)) A TAG especifica o título de uma tabela. Por exemplo: Notas da primeira avaliação
- 5 .11..22 -- TTAABBLLEE HHEEAADDIINNGGSS ((EELLEEMMEENNTTOO TTHH)) A TAG é usada para especificar as células de cabeçalho da tabela. Essas células são diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento TH pode ser apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas podem ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum elemento TH, isto é, não conter em nenhuma célula em destaque. O TAG dela é: texto em destaque Observações: Elas devem ficar, assim como todas, dentro da TAG .
- 5 .11..33 -- TTAABBLLEE DDAATTAA ((EELLEEMMEENNTTOO TTDD)) A TAG especifica a células de dados de uma tabela. Por se tratar de dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o TH, pode-se construir células em branco, usando o elemento TD, como no exemplo a seguir: Células de dados Observações: A TAG de terminação, , também é opcional.
- 5 .11..44 -- EENNDD OOFF TTAABBLLEE RROOWW (^) ((EELLEEMMEENNTTOO TTRR))
TESTE TESTE2 TESTE3
TESTE4 TESTE5 TESTE6
Veja o resultado:
5 .22..22 -- AALLIIGGNN Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro de uma célula, com ralação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda uma linha da tabela O exemplo abaixo, mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente.
Primeira célula Segunda célula Terceira célula
Centro Esquerda Direita
Veja o resultado:
5 .22..33 -- VVAALLIIGGNN Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas superior e inferior. Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na parte de baixo, respectivamente. Veja o exemplo:
Teste de alinhamento TOP MIDDLE BOTTOM www.businessmail.kit.net
Veja o resultado:
6. 6. FFoorrmmuulláárriiooss
A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um Guest Book (formulário) em meu site onde eu peço a todos os visitantes que dêem suas opiniões. Essas informações, devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente. O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc. É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que entendem os dados, como mencionado. É aí que entra a necessidade da interface CGI. Tal interface, permite que o servidor se comunique com o script que vai atuar sobre essas informações, retornando os resultados para o navegador. A confecção de scripts exige que se aprenda uma linguagem de programação chamada PERL. Abaixo temos alguns endereços que processará os dados para você, e os retornará via e-mail. Aqui estão as referências:
- The Perl Language Home Page - http://www.perl.com/perl/
- SCG Software Archive - http://iamwww.unibe.ch:80/~scg/Src/
- Perl reference materials - http://www.geek-girl.com/perl/perl.html
- Server Side Scripts - http://www.cosy.sbg.ac.at/www-doku/tools/bjscripts.html
- Perl FAQ - http://www.cis.ohio-state.edu:80/text/faq/usenet/perl-faq/top.html
- 6 .11 -- CCOONNSSTTRRUUIINNDDOO FFOORRMMUULLÁÁRRIIOOSS CCOOMM OO FFOORRMM Para fazer formulário, você tem que colocar as TAGs . Todos os outros comandos, devem ficar dentro dessas TAGs. Ok?!
- 6 .22 -- AATTRRIIBBUUTTOOSS PPAARRAA FFOORRMM O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada do FORM. Vejam como eles são:
- 6 .22..11 -- GGEETT Esse atributo indica totalmente como o dado é passado para o script ou programa definido no atributo ACTION. www.businessmail.kit.net
6. 6 .22..22 -- PPOOSSTT
- 6 .22..33..11..33 -- TTYYPPEE==""CCHHEECCKKBBOOXX"" Esse comando é válido quando apenas uma resposta, é esperada. Mas nem sempre está é a situação...O tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa, pode ser escolhida. Definição dos checkboxs: Netscape
Internet Explorer
Mosaic
Hot Java
Veja o resultado:
- 6 .22..33..11..44 -- TTYYPPEE==""SSUUBBMMIITT"" Esse é o botão que submete os dados do formulário quando pressionados, ou seja, possibilitam, o envio, dos dados para o script que vai tratá-los. Veja como se adiciona o botão:
Veja como ficará:
- 6 .22..33..11..55 -- TTYYPPEE==""RREESSEETT"" No caso dos botões RESET, quando o botão é clicado, ele automaticamente limpa todos os campos já preenchidos no formulário, voltando à situação inicial.
Veja como ficará:
6 .22..44 -- TTEEXXTTAARREEAA Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar para o usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será associadaa à entrada do cliente (navegador)O atributo value não é aceito nesse elemento, mas você pode colocar já um texto da seguinte maneira. Veja como ele é colocado:
www.businessmail.kit.net
### 6. 6 .22..55 -- SSEELLEECCTT
Embora os usuários não precisem digitar sempre suas respostas, mostrar cada opção através de botões consegue um bom espaço, e facilidade. Veja como ele funciona:
Veja o resultado:
- 6 .33 -- EEXXEEMMPPLLOO CCOOMMPPLLEETTOO Abaixo, temos um exemplo completo de uma página com um formulário.
Qual o seu nome?<br /> Qual o seu E-mail?<p>
Você gostou da minha Home Page?sim Mais ou Menos Nem um pouco!
Qual a página que você mais gostou??
www.businessmail.kit.net
www.businessmail.kit.net Frame 1
Frame n1
- 7 .33 -- FFRRAAMMEESSEETT A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.
- 7 .33..11 -- RROOWWSS Especifica o numero de FRAMES e a altura de cada um. Exemplo:
Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o
3º com 50% da tela (ambos em altura).
- 7 .33..22 -- CCOOLLSS Especifica o numero de FRAMES e a largura de cada um. Exemplo:
Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o
3º com 50% da tela (ambos em largura).
- 7 .44 -- FFRRAAMMEE A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET. 7 7..44..1 1 - S-SRRCC Especifica o documento de formato HTML chamado para o FRAME. Indispensável, por que sem ele só o documento aparecerá vazio, só com as divisões. Exemplo:
www.businessmail.kit.net
7 7..44..2 2 - N-NAAMMEE Especifica o nome do documento de formato HTML chamado para o FRAME. É extremamente necessário para o uso do TARGET, que será visto a seguir. Exemplo:
7 7..44..3 3 - S-SCCRROOLLLLIINNGG Define se o Frame terá barr de rolagem, o default é Auto. Fornece as opções: Yes, No, Auto. Yes - Exibe a barra de rolagem independente do tamanho do documento. No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado. Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada. Exemplo:
- 7 .44..44 -- NNOORREESSIIZZEE Impossibilita o usuário de mudar o tamanho da área especificada do FRAME. Por default o usuário pode mudar esta área. Exemplo:
- 7 .44..55 -- TTAARRGGEETT Define qual a área (FRAME) que aparecerá o documento especificado pelo link. Mais útil na utilização de Menus e índices.
www.businessmail.kit.net
8. 8. MMúússiiccaa
Existem 2 maneiras de colocar músicas em sua home page. A primeira é com o TAG que só é reconhecido pelo Internet Explorer. Para utilizar este TAG siga o exemplo :
Onde arquivo.mid é o arquivo de música. Caso você queira que a música repita-se, adicione o atributo loop="infinite". A segunda maneira é com o TAG que, por ser reconhecido pelo Internet Explorer e Netscape, é recomendado. Para utiliza-lo, siga o exemplo :
É recomendado usar arquivos midi por serem bem menores que os wavs.
www.businessmail.kit.net
9. 9. CCaarraacctteerreess EEssppeecciiaaiiss
Á Á á á Â Â â â À À à à Å Å å å Ã Ã ã ã Ä Ä ä ä Æ Æ æ æ É É é é^ Ê Ê^ ê ê È È^ è è^ Ë Ë ë ë^ Ð Ð^ ð ð Í Í í í Î Î î î Ì Ì ì ì Ï Ï ï ï Ó Ó ó ó Ô Ô ô ô Ò Ò ò ò Ø Ø ø ø^ Õ Õ^ õ õ Ö Ö^ ö ö^ Ú Ú ú ú^ Û Û^ û û Ù Ù ù ù Ü Ü ü ü Ç Ç ç ç Ñ Ñ ñ ñ < < > > & & " " ® ® © © Ý Ý ý ý^ Þ Þ^ þ þ ß ß^ º º^ ª &170; ¹ ¹^ ² ²^ ³ ³ ƒ ƒ † † ‡ ‡ ‰ ‰ ¢ ¢ £ £ « « ± ± » » · · ¼ ¼ ½ ½ ¾ ¾ ¿ ¿ × × ÷ ÷ ¡ ¡ ¤ ¤
