Embed Size (px)
Citation preview
Linguagem de Programação para WEB
Introdução ao HTML
Estrutura Básica
• Estrutura básica do HTML
<html> <head> <title>Nome da Página em HTML</title> </head> <body> Aqui ficará o que será visível para todos. </body></html>
Tags ou Etiquetas em HTML
• As etiquetas ou Tags em HTML não são sensíveis à caixa, portanto você poderá escrever tanto <HTML>, <Html>,<html>, <HtMl>.
As etiquetas básicas do HTML, cuja presença é altamente recomendada nas páginas são:
• <html>: define o início de um documento HTML e indicada ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML;
• <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto;
• <title>: define o nome da página em HTML• <body>: define o conteúdo principal, o corpo do documento. Esta é
a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.
Listas
• Há vários tipos de listas de HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:
Estas listas são chamadas também “listas de Glossário”, uma vez que têm o formato:
<dl> <dt>Definição <dd>Termo a ser definido <dt>Definição <dd>Termo a ser definido</dl>
Que ficará:
DefiniçãoTermo a ser definido
DefiniçãoTermo a ser definido
Listas
Listas não-numeradas
São equivalentes às listas com marcadores do MS Word:<ul> <li> Ítem de uma Lista <li> Ítem de uma Lista <li> Ítem de uma Lista</ul>
• Ítem de uma Lista• Ítem de uma Lista• Ítem de uma Lista
Listas
<ul> <li> Documentos Básicos <li> Documentos avançados <ul> <li> Formulários <ul> <li> CGI </ul> <li> Contadores <li> Relógios </ul> <li> Detalhes sobre imagens </ul>
• Documentos Básicos• Documentos avançados
▫ Formulários CGI
▫ Contadores▫ Relógios
• Detalhes sobre imagens
Listas
Uma lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE E DISC (defaul):
Listas
Listas numeradas
São equivalentes às listas com marcadores do MS Word:<ol> <li> Ítem de uma Lista <li> Ítem de uma Lista <li> Ítem de uma Lista</ol>
1. Ítem de um lista2. Ítem de uma lista3. Ítem de uma lista
Listas
Listas numeradasUsando o atributo START você poderá definir o primeiro número de
sua lista.
<ol start=3> <li> artigo 1</li> <li> artigo 2</li> <li> artigo 1</li> <li> artigo 2</li> </ol>
3. artigo 14. artigo 25. artigo 16. artigo 2
Imagens
Para adicionar uma imagem em sua página HTML utiliza-se a tag img.
<img src=“w3c.jpg” alt “Word Wide Web” />
O atributo alt empregado nesta imagem indica a discrição da imagem. Caso o navegador por algum motivo não consiga carregar a imagem, por exemplo, por algum problema no servidor onde ela está hospedada, o texto desse atributo alt aparece. É sempre uma boa prática descrever imagens importantes em significado para o site.
São três tipos de imagens que você pode inserir em sua página:- JPG/JPEG- GIF- PNG
Imagens
Em geral, imagens GIF são ideais para gráficos e desenhos, e imagens JPEG, para fotografia.
Existem duas razões para isso: 1º porque imagens GIF são constituídas por 265 cores e imagens JPG por milhões de cores.
2º porque imagnes GIF são mais bem otimizadas para imagens simples, ao passo que imagens JPEG são mais bem otimizadas para imagens complexas. Quanto melhor a compressão, menor o arquivo e mais rápido a página é carregada ao navegador.
Tradicionalmente, os formatos GIF e JPEG têm sido mais empregados, mas ultimamente o formato PNG tem se tornado mais popular (notadamente, em detrimento do formato GIF). O formato PNG é melhor que JPEG e GIF devido aos milhões de cores e à efetiva compressão.
Imagens
Você pode imprimir imagens que estão localizadas em outros diretórios, ou até mesmo em outros websites:
<img src=“imagens/w3c.jpg”/>Localizada em outro servidor<img src=“http://www.nomedosite.com.br/img/w3c.jpg” />
Imagens podem ser links também:<a href=“http://www.terra.com.br” > <img src=“logo.png” /> </a>
Imagens
O atributo alt é utilizado para mostram uma caixa pop-up, com o conteúdo do atributo alt, quando o usuário passa o mouse sobre a imagem.
O atributo title pode ser usado para fornecer uma curta descrição da imagem
<img src=“logo_curso_html.png” title=“Curso de HTML” />
Imagens
LARGURA E ALTURA DE UMA IMAGEM Os atributos width (Largura) e height (Altura) podem ser usados
para definir, respectivamente, a largura e a altura da imagem. O valor adotado para medida é o pixel.
<img src="logo.png" height=10 width=300>
Píxel é a unidade de medida usada para medir a resolução da tela (as resoluções de telas mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma unidade de medida relativa que depende da resolução da tela. Tela com grande resolução terão 25 pixels por 1 centímetro, enquanto que as de baixa resolução terão os mesmos 25 pixels, mas por, 1,5 cm de tela.
Tabelas
• As tabelas são usadas para apresentar “dados tabulares”, isto é: informações que deva ser apresentada em linhas e colunas, de forma lógica.
• Criar tabelas em HTML pode parecer complicado, mas se você acompanhar a explicação, passo a passo, verá que é bem simples.
<table> <tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr> <tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr></table>
Célula 1 Célula 2 Célula 3
Célula 4 Célula 5 Célula 6
Tabelas
• <table> começa uma tabela;• </table> termina uma tabela;• <tr> significa “table row” – linha de tabela – começa e termina em
uma linha horizontal da tabela.• <td> significa “table data” – dados da tabela – começa e termina
em cada célula contida nas linhas da tabela.
Tabelas
• Atributos de tabela• <table border>: O elemento delimita uma tabela e a espessura de
sua borda. Ex: <table border=valor da espessura>• Width(largura) e Height (altura): Com estes atributos, você pode
definir o tamanho que a tabela vai ocupar na tela. Eles podem ser em pixels ou em porcentagem.
Um exemplo de tabela com valor de largura que ocupe 70% da tela (width=“75%”)
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2
Tabelas
• É possível dividir colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):
<table border=2> <tr> <td colspan=3 align="center">Título</td> </tr> <tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr></table>
Tabelas
• ROWSPAN (para linhas):
<table border=2> <tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr> <tr > <td rowspan=2>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr> <tr > <td>Célula 1</td> <td>Célula 2</td> </tr></table>
Tag <div>
A tag div é amplamente utilizada. Essa tag não causa nenhuma diferença visual no código. Ela é considerada uma esécie de “caixa” imaginária em que você pode, através de scritp, aterar o conteúdo, ou o estilo, através de CSS (folha de estilo).
<div>Texto .... </div>
Formulários• <html>• <head>• <title>Formulário em HTML</title>• </head>• <body>• <div>• <form name="cadastro_alunos" method="post">• <H2>CADASTRO IF</h2>• Nome: <input type="text" name="Nome" size="50" maxlength="100"><br>• Endereço:<input type="text" name="Endereco" size="4" maxlength="100"><br>• Telefone:<input type="text" name="Telefone" size="14" maxlength="14"><br>• </form>• </div>• </body>• </html>
Formulários
Através de um formulário o usuário poderá interagir com o servidor, enviando dados que são processados e devolvidos.
Por exemplo: O envio de dados como parâmetro para uma página PHP, que fica responsável em gravar os dados em um banco da dados.
<form name=“nome” method=“´método” action=“URL”></form>Elementos de FormulárioMethod: Define o método utilizado pelo servidor para receber os
dados do formulário. O método pode ser: - POST: Método mais utilizado, transmite a informação do formulário
imediatamente após a URL;- GET: anexa o conteúdo do formulário ao endereço da URL, por isso
tem limitação de tamanho das informações.
Formulários
ACTION: especifica o programa ou página do servidor que processará os dados do servidor.
NAME: Define o nome do formulário.
ALGUNS ELEMENTOS DE UM FORMULÁRIOText: Áre de textoPassword: texto protegido por senhaRadio: botão com uma opçãoCheckbox: Botão com mais opçõesReset: Limpa os campos Submit: Envia os dados do formulárioButton: BotãoFile: Abre uma janela para selecionar arquivo.
