TECNOLOGIAS WEB Unidade 2 – Introdução a Construção de Páginas Estáticas Luiz Leão [email protected] http://luizleao.com TECNOLOGIAS WEB CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG´S HTML Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB LINGUAGEM HTML Hypertext Markup Language • Interpretada pelo navegador • Não linearidade da informação • Formatação do texto podendo ser interpretável por todo e qualquer navegador ( padrão do W3C) Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Estrutura • Cada elemento é chamado de tag • <tag>Conteudo</tag> - Abertura, Conteúdo e fechamento • <tag /> - Sem conteúdo Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Estrutura <font color=“red”>Texto </font> Texto Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Estrutura <tag atributo=“valor”> XXXX</tag> Exemplo: <font size=“2” color=“red”> Texto que sofrerá alterações </font> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Documento HTML <html> <head></head> <body> </body> </html> <html> Define o início de um documento HTML ao navegador web. Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Documento HTML <html> <head></head> <body> </body> </html> <head> Define o cabeçalho do documento. Área onde são inseridas chamadas Javascript, CSS, tags META,... Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Documento HTML <html> <head></head> <body> </body> </html> <body> A partir desta tag até o fechamento da mesma, todos os elementos aqui descritos serão apresentados como conteúdos na página em seu navegador. Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Documento HTML <html> <head> <title>Aula de Tecnologias Web</title> </head> <body></body></html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Documento HTML <html><head> <title>Aula de Tecnologias Web</title> <STYLE type="text/css"> p {color:red}</STYLE> </head> <body> <p>Texto com o Estilo aplicado</p> </body></html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Documento HTML <html><head> <title>Aula de Tecnologias Web</title> <SCRIPT type="text/javascript"> document.write("Olá Alunos do Curso!") </SCRIPT> </head> <body> </body></html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem Web Meta Tags • Código HTML ("etiquetas“) utilizadas para dar aos robôs de busca informações a respeito de sua página e site. <html><head> <meta name="author" content=“Renato Guimarães"> <meta name="description" CONTENT="Meta Tags – Facilidade para robôs Web"> <meta name="keywords“ content="sites,web,desenvolvimento, eletrônico"> </head><body></body></html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Comentário (<!-- -->) • A tag de comentário é usada para inserir um comentário no código fonte HTML. Um comentário será ignorado pelo navegador. • Você pode usar comentários para explicar o seu código, o que pode ajuda-lo a relembrar o significado de trechos de códigos produzidos. <body> <!-- Inicio da montagem do Menu --> XXX <!-- Fim da montagem do Menu --> </body> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Meu Primeiro Exemplo <html> <head> <title>Aula de Tecnologias Web</title> </head> <body> <p align=“center”> Olá ! Minha primeira página</p> </body> </html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Dicas • Atribua nomes de arquivos funcionalidade do documento que descrevam a • Utilize comentários – Ajudam outros programadores a entenderem a marcação • Indentar elementos aninhados – Promove a legibilidade do documento Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Erros Comuns • Não incluir os valores de atributos entre aspas simples ou dupla (Erro de Sintaxe) • O XHTML não permite TAGS superpostas <html> <head> <title></head></title> <body> </body> </html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Tags Mais Usadas: • • • • • <h1>, <h2>, <h3>, ... <p> <br> <hr> <div> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Tag Título <h1>, <h2>,... • Títulos são definidos com as tags <h1> a <h6>. A <h1> define o título maior. A <h6> define o título menor. <h1>Este <h2>Este <h3>Este <h4>Este <h5>Este <h6>Este é é é é é é um um um um um um título</h1> título</h2> título</h3> título</h4> título</h5> título</h6> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Parágrafos (<p>) • Os parágrafos são definidos com a tag<p>. • A HTML adiciona automaticamente uma linha em branco extra antes e após um parágrafo. <p>Este é um parágrafo</p> <p>Este é outro parágrafo</p> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Quebra de Linha (<br>) • A tag <br> é usada quando você quer terminar uma linha, mas não quer começar um novo parágrafo. • Ela força a quebra de linha onde quer que você a coloque. <p>Este <br> é um pará<br>grafo com quebras de linha</p> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Lista Ordenada <html> <head><title></title></head> <body> <ol> <li>item número um.</li> <li>item número dois.</li> <li>item número três.</li> </ol> </body> </html> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Linguagem HTML Lista Ordenada <ol> <li type=“a”>item número um.</li> <li>item número dois.</li> <li>item número três.</li> </ol> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Link • Responsável pela transição de conteúdo em uma página web, seja na mesma página ou em outras páginas, internas e externas ao website Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Links • Sintaxe: <a href=“endereço de destino”> Texto </a> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Links • Página Interna <a href=“clientes.html”>Clientes</a> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Links • Página Externa <a href=“fap-pa.edu.br”> Site da Estácio</a> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Links • E-mail <a href=“mailto: nome@exemplo. br”>Fale comigo !</a> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Âncora (Link Interno) • Para o funcionamento de uma âncora deve-se estabelecer dois comandos: • Um que defina o lugar da página para onde se pretende "saltar” • Outro que identifique esse ponto de destino Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Âncora (Link Interno) • Sintaxe: <a name="Coloque o nome da ancora aqui"></A> <a href="#nome ancora">Texto</a> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Link • Links com âncoras para uma outra página <a href=“pagina#nomedaancora">Texto</a> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas • Um dos principais containers do HTML • Auxilia na diagramação dos elementos • Pode receber qualquer tag de conteudo internamente Celula 1.1 Celula 2.1 Celula 3.1 Celula 1.2 Celula 2.3 Celula 3.2 Celula 1.3 Celula 2.3 Celula 3.3 Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas Elementos da Tabela • • • • <table>: Tag de abertura da tabela <tr>: Tag que representa as linhas <th>: Tag de Coluna. Agrupa o cabeçalho <td>: Tag de Coluna. Agrupa o conteúdo da tabela (Texto, imagem, formulários, etc) Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table border="1" > <tr> <th>Cabeçalho <th>Cabeçalho <th>Cabeçalho 1 </th> 2 </th> 3 </th> </tr> <td>Celula 2.1 <tr> </td> <td>Celula 2.3 </td> <td>Celula 2.3 </td> </tr> <tr> <td>Celula 3.1 </td> <td>Celula 3.2 </td> <td>Celula 3.3 </td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table width="70%" border="1" > <tr> <td>Celula 1.1 </td><td>Celula 1.2 </td> <td>Celula 1.3</td> </tr> <tr> <td>Celula 2.1 </td><td>Celula 2.3</td> <td>Celula 2.3</td> </tr> <tr> <td>Celula 3.1 </td><td>Celula 3.2</td> <td>Celula 3.3</td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas Celula com colunas mescladas Celula 2.1 Celula 2.3 Celula 2.3 Celula 3.1 Celula 3.3 Celula 3.2 Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB TABELAS <table border="1" > <tr> <td colspan=“3” >Celula com colunas mescladas </td> </tr> <td>Celula 2.1 <tr> </td> <td>Celula 2.3 </td> <td>Celula 2.3 </td> </tr> <tr> <td>Celula 3.1 <td>Celula 3.2 </td> </td> <td>Celula 3.3 </td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table width="70%" border="1" > <tr> <td colspan="3"> Celula com colunas mescladas </td> </tr> <tr> <td>Celula 2.1 </td><td>Celula 2.3</td> <td>Celula 2.3</td> </tr> <tr> <td>Celula 3.1 </td> <td>Celula 3.2</td> <td>Celula 3.3</td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas Celula com linhas mescladas Celula 1.2 Celula 2.3 Celula 3.2 Celula 1.3 Celula 2.3 Celula 3.3 Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table border="1" > <tr> <td rowspan="3"> <td>Celula <td>Celula 1.3 Celula com linhas 1.2 </td> mescladas</td> <td>Celula <tr> 2.3 </td> </td> <td>Celula 2.3 </td> <td>Celula 3.2 </td> <td>Celula 3.3 </td> <tr> </tr> </tr> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table width="70%" border="1" > <tr> <td rowspan="3"> Celula com linhas mescladas</td> <td>Celula 1.2 </td><td>Celula 1.3</td> </tr> <tr> <td>Celula 2.3</td><td>Celula 2.3</td> </tr> <tr> <td>Celula 3.2</td><td>Celula 3.3</td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas Celula 1.1 Celula 2.1 Celula 1.2 Celula 2.3 Celula 1.3 Celula 2.3 Celula 3.1 Celula 3.2 Celula 3.3 Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table border="1" > <tr bgcolor="#FF0000" > <tr> <tr> <td>Celula 1.1 </td> <td>Celula 1.2 </td> <td>Celula 1.3 </td> </tr> <td>Celula 2.1 </td> <td>Celula 2.3 </td> <td>Celula 2.3 </td> </tr> <td>Celula 3.1 </td> <td>Celula 3.2 </td> <td>Celula 3.3 </td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Tabelas <table width="70%" border="1" > <tr bgcolor="#FF0000" > <td>Celula 1.1 </td><td>Celula 1.2 </td> <td>Celula 1.3</td> </tr> <tr> <td>Celula 2.1 </td><td>Celula 2.3</td> <td>Celula 2.3</td> </tr> <tr> <td>Celula 3.1 </td><td>Celula 3.2</td> <td>Celula 3.3</td> </tr> </table> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Imagens • Com a HTML você pode exibir imagens em um documento. <img src=“logo_remo.png” alt=“Clube do Remo” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Imagens Atributos • src: É a URL da imagem que você quer exibir na sua página. Pode ser um endereço relativo ou um endereço da web. Atributo obrigatório. • Endereço Relativo: <img src=“imagens/logo_remo.png” /> • Endereço da Web: <img src=“www.clubedoremo.com.br/logo_remo.png” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Imagens Atributos • alt: Título da imagem. Pode ser visto quando passamos o mouse em cima. <img src=“imagens/logo_remo.png” alt=“Clube do Remo” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Imagens Atributos Adicionais • Height: Altura • Width: Largura • Align: Alinhamento <img src=“imagens/logo_remo.png” height=“10” Width=“10” align=“top” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários São utilizados para aumentar a interação do usuário com as aplicações web Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários • Os dados do formulário devem ser submetidos para uma página web que irá tratar esses dados • Essa página web deve ser desenvolvida em uma linguagem de programação de servidor, para que possamos manipular esses dados • Ex: PHP, Java, C#, etc. Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Os componentes mais comuns são: Form Input Text Password Radio Checkbox Submit Button File Hidden Select Option Textarea Button Fieldset Legend Label Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Exclusivos do HTML 5 Input Datetime Color Range Url Tel Number Date Email ... Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Form • É a tag container de todos os formulários • As tags de formulário presentes nela são agrupadas e submetidas para o mesmo destino <form action=“salvar.php” method=“post”> ... </form> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Form – Atributos • Action: Destino dos dados a serem submetidos • Method: Método de envio dos dados do formulário. Pode ser POST ou GET – POST: • Dados ocultos na URL • Sem limite de caracteres para envio – GET: • Dados visíveis na URL • Limite de 255 caracteres para envio • Possibilidade de se enviar dados via link Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Text • Representa a caixa de texto • Atributos: – – – – Id: Identificação do objeto Name: Nome campo (recuperável pela submissão dos dados) Value: Valor inicial da caixa Maxlength: Quantidade máxima de caracteres da caixa <input type=“text” name=“nome” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Password • Usado para envio de senha. Informação obscurecida por caracteres • Atributos: – – – – Id: Identificação do objeto Name: Nome campo (recuperável pela submissão dos dados) Value: Valor inicial da caixa Maxlength: Quantidade máxima de caracteres da caixa <input type=“password” name=“nome” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Radio • Representa campo de multiplas opções, sendo que apenas uma pode ser selecionada. • Atributos: – Id: Identificação do objeto – Name: Nome campo (recuperável pela submissão dos dados) – Value: Valor do campo <label>Sexo:</label> Masculino: <input type=“radio” name=“sexo” value=“M” /> Feminino: <input type=“radio” name=“sexo” value=“F” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Checkbox • Representa campo de múltiplas opções, onde é possível selecionar mais de uma opção. • Atributos: – Id: Identificação do objeto – Name: Nome campo (recuperável pela submissão dos dados) – Value: Valor do campo <label>Categorias de Notícias:</label> Policial: <input type=“checkbox” name=“categoria” value=“Policial” /> Política: <input type=“checkbox” name=“categoria” value=“politica” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Submit • Botão usado para submeter os dados preenchidos por outros objetos de formulário. • Atributos: – Id: Identificação do objeto – Name: Nome campo (recuperável pela submissão dos dados) – Value: Rótulo do botão <input type=“submit” name=“btnCadastrar” value=“Cadastrar” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Reset • Botão usado para alterar os valores dos campos de formulário para seus valores originais. • Atributos: – Id: Identificação do objeto – Name: Nome campo (recuperável pela submissão dos dados) – Value: Rótulo do botão <input type=“reset” name=“btnCancelar” value=“Cancelar” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Input – Hidden • Campo que armazena valores ocultos. Usados para enviar dados de configuração que não devem ser alterados. • Atributos: – Id: Identificação do objeto – Name: Nome campo (recuperável pela submissão dos dados) – Value: Rótulo do campo <input type=“hidden” name=“status” value=“1” /> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Select • Representa uma caixa de seleção, com diversos itens, que possibilitam selecionarmos um item ou vários itens. • Agrupa a tag <option>, que representa cada item • Atributos <select>: – – – – Id: Identificação do objeto Name: Nome campo (recuperável pela submissão dos dados) Multiple: Opcional para se recuperar múltiplos itens Size: Quantidade de itens a serem exibidos • Atributos <option> – Value: Guarda o valor do Item Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Select <select name=“uf”> <option value=“AC”>Acre</option> <option value=“MA”>Maranhão</option> <option value=“PA”>Pará</option> </select> <select name=“uf” multiple="multiple" size="3"> <option value=“AC”>Acre</option> <option value=“MA”>Maranhão</option> <option value=“PA”>Pará</option> </select> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Textarea • Representa uma caixa de texto, com múltiplas linhas, usadas para textos longos • Atributos: – – – – Id: Identificação do objeto Name: Nome campo (recuperável pela submissão dos dados) Cols: Número de colunas (caracteres) Rows: Número de linhas Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB Formulários Tag Textarea <textarea name=“texto" cols="100“ rows="10"></textarea> Unidade 2 – Introdução a Construção de Páginas Estáticas TECNOLOGIAS WEB FONTES DE CONSULTA http://www.w3schools.com/tags/ http://www.htmlstaff.org/ Unidade 2 – Introdução a Construção de Páginas Estáticas
Download
