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> Área para publicação de informações sobre a página que auxiliam a indexação por buscadores. <TITLE></TITLE> 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