PROGRAMAO WEB HTML O que Hyper Text Markup
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 � 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 – h 1. . . h 6 <h 1></h 1> � � Definição de títulos Podem ir de 1 ate 6 � Exemplo: <html> <head> <Tiltle> Minha Primeira Página </title> </head> <h 1>Titulo Tipo 1 </h 1> <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=“ 14 px”> CONTEUDO </font>
Tags de Formatação - font Atributos � Color – Nome da cor ou valor em hexadecimal Exe: #ff 0000 � Size – tamanho da fonte, geralmente descrito em pixel: 14 px � 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 – 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="btn 1" value="Enviar"> 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="img 1" alt="Koala" width="200 px“> 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
- Slides: 33