Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Linguagem de Programação para WEB
Introdução ao HTML
2
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>
3
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.
4
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 </dl> Que ficará: Definição Termo a ser definido
5
Listas Listas não-numeradas
São equivalentes às listas com marcadores do MS Word: <ul> <li> Ítem de uma Lista </ul> Ítem de uma Lista
6
Listas Documentos Básicos Documentos avançados Formulários CGI
<li> Documentos Básicos <li> Documentos avançados <li> Formulários <li> CGI </ul> <li> Contadores <li> Relógios <li> Detalhes sobre imagens Documentos Básicos Documentos avançados Formulários CGI Contadores Relógios Detalhes sobre imagens
7
Listas Uma lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE E DISC (defaul):
8
Listas Listas numeradas
São equivalentes às listas com marcadores do MS Word: <ol> <li> Ítem de uma Lista </ol> Ítem de um lista Ítem de uma lista
9
Listas Listas numeradas Usando o atributo START você poderá definir o primeiro número de sua lista. <ol start=3> <li> artigo 1</li> <li> artigo 2</li> </ol> 3. artigo 1 4. artigo 2 5. artigo 1 6. artigo 2
10
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
11
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.
12
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=“ /> Imagens podem ser links também: <a href=“ > <img src=“logo.png” /> </a>
13
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” />
14
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.
15
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> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </table> Célula 1 Célula 2 Célula 3 Célula 4 Célula 5 Célula 6
16
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.
17
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
18
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> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </table>
19
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> </table>
20
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>
21
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>
22
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ário Method: 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.
23
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ÁRIO Text: Áre de texto Password: texto protegido por senha Radio: botão com uma opção Checkbox: Botão com mais opções Reset: Limpa os campos Submit: Envia os dados do formulário Button: Botão File: Abre uma janela para selecionar arquivo.
Apresentações semelhantes
