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