Adicionando mais tags HTML

Transcrição

1 Instituto Federal de Minas Gerais Campus Ponte Nova Adicionando mais tags HTML Professor: Saulo Henrique Cabral Silva

2 Bookmark Bookmark ou demarcação de destinos para links (informações) dentro do próprio documento Qual o uso??? Para criar identificadores (nome do destinos) utilizamos a tag id. <p> Mais informações <a href= #info > aqui </a>.<p> <p> Alguma informação da página...</p> <h2 id= info > Mais informação sobre Seu José...</h2> <p> Mais especificações sobre um determinado assunto...</p> 2

3 Bookmark Vocês podem encontrar algo na seguinte linha <a href= > Entre em contato </a> O navegador redirecionará e posicionará a página no exato conteúdo especificado. 3

4 Listas HTML Listas estão em todos os lugares, para isso o HTML disponibiliza algumas tags para proporcionar esse recurso tão fundamental na exibição/estruturação das informações dispostas em um site. Listas não ordenadas <ul> <ul> <li> Primeiro item da lista </li> <li> Segundo item da Lista </li> <ul> <li> Primeiro item aninhado </li> <li> Segundo item aninhado </li> </ul> </ul> 4

5 Listas HTML Semelhante as listas não ordenadas (numeradas), o HTML oferece a lista ordenada através da tag: <ol> Para inserir itens elementos na lista ordenada, utilizamos a mesma solução da lista não ordenada (<li>) As listas ordenadas também podem ter sua estrutura composta por outras listas ordenadas. É possível compor listas ordenadas e não ordenadas. 5

6 Listas de definição Utilizada para demarcar um glossário, quando listamos termos e seus significados. <dl> <dt>html</dt> <dd> Seu José é filho da Dona Maria professora de português </dd> <dt> Loja de Seu José</dt> <dd> Tradicional mercadinho da cidade de Ponte Nova </dd> </dl> 6

7 Imagens O HTML5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <img> define uma imagem em uma página HTML. <img> Necessita de dois atributos preenchidos: src Aponta (referência) o local da imagem alt Texto alternativo para a imagem caso essa não possa ser carregada. <figcaption> permite adicionar uma legenda para a imagem. <figure> <img src= img/produto1.png alt= Foto do Produto > <figcaption> Arroz Codil </figcaption> </figure> 7

8 Elementos Estruturais Existem várias tags para casos específicos, dentre elas: títulos, parágrafos, imagens, listas Mas não existe uma tag diferente para cada coisa do universo; Eventualmente, as vezes não encontramos uma tag específica para AQUELE conteúdo. Nesse caso, pode se utilizar as tags <div> e <span> que funcionam como coringas. Não possuem nenhum significado especial; Servem para agrupar certo conteúdo; Bloco da página ou um pedaço de texto. 8

9 section Introduzida a partir do HTML5. Define as sessões de um documento, como apresentação, header, detalhes, contatos, informações em blocos. <section class= nomesessão > CONTEÚDO DA SESSÃO... </section> 9

10 header Introduzida a partir do HTML5. Representa um container (bloco) com informações que descrevem uma introdução sobre o serviço (página). <header > GERALMENTE POSSUI... elementos <h1>... <h2> logo ou ícone ícones / link s de navegação </header> 10

11 footer Introduzida a partir do HTML5. Descreve as informações do rodapé da página/serviço. Informações de contato, copyright, link s de conteúdo. <footer> CONTEÚDO AQUI... </footer> 11

12 nav A tag <nav> é utilizada para definir link s de navegação no site. Define um bloco de link s, menu ou barra de navegação para o usuário. 12

13 form O elemento form, define um escopo onde é possível definir vários tipos de entrada de dados do usuário. Text fields Checkbox Radio buttons Buttons Text Areas Outros <form> </form> Elementos form 13

14 input <input type=? > Button CheckBox Color Date FileUpload Image Number RadioButton Search Text Parâmetro name pode indicar agrupamentos Parâmetro required indica o elemento obrigatório 14

15 form <input type= submit >, define o envio das informações que foram definidas nos campos do form ativo para um scripthandler. <form action= ip:porta/aplicação/serviço method= post/get > O parâmetro action define a ação ou serviço que será executado quando o usuário clicar no botão definido para enviar (submit) as informações. method, define qual método de requisição será utilizado: Get requisição de informações Post envio de requisição para alterar/cadastrar/executar Informações sigilosas 15

16 Tabela Tag s para cosntrução de uma tabela: <caption> Título da tabela </caption> <table> Adicionamos as colunas e linhas aqui... </table> <tr> Criação de uma nova linha </tr> <th> Célula header (forte cabeçalho) </th> <td> Dado de uma célula </td> colspan, rowspan para truncar linhas ou colunas 16

17 Exercícios Criar uma tabela em HTML para representar os horários de aula das turmas do Técnico em Informática do Instituto Federal de Minas Gerais campus Ponte Nova. Páginas diferentes para turmas diferentes. 17

18