HTML - norton.net.br
Download
Report
Transcript HTML - norton.net.br
PROGRAMAÇÃO WEB
HTML
O que é
Hyper Text Markup Language (Linguagem de
formatação de Hiper-Texto)
Linguagem de formatação para disseminação de
conteúdo.
Padrão nos navegadores utiliza o protocolo HTTP
do TCP/IP.
Características
Não e uma linguagem de programação, por este
motivo não tem regras de sintaxe.
Ela é interpretada pelo navegador em tempo de
execução
Utiliza a tecnologia CSS para auxiliar a
formatação padronizada entre página.
Utiliza o javascript para auxiliar na validação de
formulários e melhor a navegabilidade.
TAGS
O html é composto por tags (etiquetas) que
identificam ao navegador como formatar um
determinado conteúdo, podemos dividir em 3
categorias:
Tags
de Estrutura – São responsáveis por delimitar
seções e espaços dentro da página.
Tags de formatação – fornecem a formatação direta
de cor, fonte e estilo de conteúdo.
Tags de Objeto – coletam dados de um formulário, e
permitem integração com o javascript.
Tags de Estrutura - html
<HTML> </HTML>
Identificam
o inicio e o fim de um página.
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<body>
Ola mundo !
</body>
</html>
Tags de Estrutura – head, title
<HEAD> </HEAD>
<TITLE></TITLE>
Área para publicação de informações sobre a página que
auxiliam a indexação por buscadores.
Define o titulo da página que aparece no topo dos navegadores.
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<body>
Ola mundo !
</body>
</html>
Tags de Estrutura - meta
<META NAME....
publicação de informações sobre a página que auxiliam a
indexação por buscadores.
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
<meta name=“Description” content=“pagina sobre”>
<meta name=“keywords” content=“html, css, web”>
<meta name=“author” content=“Norton”>
</head>
<body>
Ola mundo !
</body>
</html>
Tags de Estrutura - body
<BODY></BODY>
Define
o inicio e fim do corpo de uma página
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<body>
Ola mundo !
</body>
</html>
Tag de Estrutura - p
<P></P>
Define um paragrafo
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<body>
<P>
Ola mundo !
</p>
</body>
</html>
Tag de Estrutura - br
<br>
Quebra
de linha
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<P>
Ola mundo ! <BR>
Minha primeira página
</p>
</html>
Tags de Estrutura – h1...h6
<h1></h1>
Definição de títulos
Podem ir de 1 ate 6
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<h1>Titulo Tipo 1 </h1>
<P>
Ola mundo ! <BR>
Minha primeira página
</p>
</html>
Tags de Estrutura -div
<div></div>
Definem uma área isolada de formatação na página
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<P>
Ola mundo ! <BR>
Minha primeira página
</p>
<DIV> Menu
</DIV>
</html>
Tags de Estrutura - table
<table></table>
Tag
para criação de tabelas
<tr></tr>
Table
Row - Linha de tabla
<td></td>
Table
Detail – coluna de tabela
Tag de Estrutura - table
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<table border=1>
<tr>
<td> Azul </td>
<td> Verde </td>
<td> Amarelo </td>
</tr>
</table>
</html>
Tags de Estrutura - br
Comentários
Para colocar um comentário na página que não será
exibido pelo navegado
Exemplo:
<html>
<head>
<Tiltle> Minha Primeira Página </title>
</head>
<!– - Pagina principal - ->
<P>
Ola mundo ! <BR>
Minha primeira página
</p>
</html>
Tags de Formatação
São tags que alteram a formatação de um
conteúdo estático
Exe: Cor, estitlo de fonte, cor de letra etc.
Tags de Formatação – b, i, u, s
<B> Conteúdo </B> - Negrito / Bold
<i> Conteúdo </i> - Italico / Italic
<u>Conteúdo </u> - sublinhado / Underline
<s>Conteúdo </s> -riscado / Strike
Tags de Formatação - font
Tag Font – Altera a formatação de cor, fonte e
tamanho de um conteudo.
<font color=“red” face=“verdana”
size=“14px”>
CONTEUDO
</font>
Tags de Formatação - font
Atributos
Color
– Nome da cor ou valor em
hexadecimal Exe: #ff0000
Size – tamanho da fonte, geralmente
descrito em pixel: 14px
Face – nome da fonte exe: verdana
Tags de Formatação - ul
Lista de tópicos
<ul>
<li>azul</li>
<li>verde</li>
<li>amarelo</li>
<li>branco</li>
</ul>
Tags de formatação - ol
Lista ordenada
<ol>
<li>Maça</li>
<li>Laranja</li>
<li>Manga</li>
</ol>
Tags de Formatação - a
Link ou ancora, redireciona a navegação para
outra página ou documento
<a href="http://www.norton.net.br"
target="new">
Link externo</a>
Atributos
href
: caminho local ou virtual
Target : local de carga do destino
do link
Tags de Objetos
São tags para coletar dados de formulário da
navegação do cliente.
Geralmente estes dados são enviados para um
servidor de aplicação para serem processado.
Tags de Objetos - Text
Caixa de texto
<input type="text"
id="nome" size="60"
maxlength="50"
value="Texto carregado"
readonly>
Tags de Objetos - Text
Atributos da caixa de texto
Id
: define o nome do objeto
Size : tamanho em exibição e colunas
Maxlength: quantidade maxima de caracteres
digitados
Value : valor pre definido
Readonly : trava a digitação de um conteudo
Tags de Objetos - Password
Password – permite a digitação de um texto oculto
por símbolos.
<input type="password" id="senha" size="10“
maxlength="8" value="" >
Atributos
Id
: identifica o objeto na página
Size: tamanho em colunas da caixa de texto
Maxlength: quantidade máxima de caracteres
digitados.
Value: texto pré informado
Tags de Objetos - Hidden
Utilizada para armazenar dados que não serão
exibidos belo cliente
<input type="hidden"
id="escondido"
value="teste">
Atributos
Id : identificação do objeto
Value: dado associado ao objeto
Tags de Objetos - Checkbox
Utilizado para coletar uma informação afirmativa
ou negativa, não permite associação em grupos.
<input type="checkbox"
id="receber" checked>
Atributos
Id : identifica o objeto na página
Checked : quando informado vem pré selecionado
Tags de Objetos - Radio
Utilizado para coletar uma informação optativa
permitindo a associação em grupos de objetos.
<input type="radio" id="masculino”
name="genero“> M
<input type="radio" id="feminino“
name="genero“> F
Atributos
Id: identificação do objeto na página
Name: nome do grupo relacionado, sem este atributo os objetos
trabalham isolados.
Checked : quando informado a opção vem pré selecionada
Tags de Objetos - Button
Cria um botão, onde pode ser associado eventos
<input type="button" id="btn1"
value="Enviar"><br>
Atributos
Id : identifica o objeto na página
Value: texto exibido na tela
Tags de Objetos - Textarea
Caixa para textos extensos
<textarea id="msg“
rows="10" cols="50">
texto pré definido
</textarea>
Atributos
Id : identifica o objeto na página
Rows:
quantidade de linhas a serem exibidas
Cols: quantidade de colunas a serem exibidas
Tags de Objetos - Select
Caixa de seleção composta
<select id="unidade">
<option>Fatec Ipiranga</option>
<option>Fatec ZS</option>
<option>Fatec SC</option>
</select>
Atributos
Id : identifica o objeto na página
<option>conteudo</option> : item da seleção
<optio value=“IP”>Ipiranga</option>: o atributo value permite
associar um valor diferente ao texto exibido.
Tags de Objetos - Img
Objeto de imagem
<img src="koala.jpg" id="img1"
alt="Koala" width="200px“>
Atributos
Src: caminho onde esta localizada a imagem, local ou
virtual
Id:
identifica o objeto na página
Alt: texto alternativo da imagem
Width: largura ajustada da imagem
Height: altura ajustada da imagem