O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2

Tamanho: px

Começar a partir da página:

Download "O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2"

João Henrique de Almada Laranjeira
6 Há anos
Visualizações:

1 HTML

2 O que faz um servidor/navegador web? e 2

3 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza TAGs para definir a formatação dos documentos Cada uma das TAGs possuem propriedades que influenciam na formatação do HTML. e 3

4 Exemplo tag = <nome> tag + conteúdo + tag = elemento <html> <head> <title>título Olá Mundo</title> </head> <body> <h1>olá Mundo</h1> </body> </html> e 4

5 Tags Básicas <html> Define um documento HTML head> Define o cabeçalho do HTML <body> Define o corpo de um documento <form> Cria um formulário HTML <br> Quebra de Linha <p> Parágrafo <hr> Barra Horizontal <h1> Um padrão de formatação de texto e 5

6 Tags Básicas <a> Cria links para outras páginas <center> Centraliza um texto <b> Deixa um texto em negrito <i> Deixa um texto em itálico <img> Insere uma imagem no HTML <button> Insere um botão no HTML <u> Sublinhar um texto e 6

7 Tags Básicas - Exemplos e 7

8 Tags Básicas - Exemplos 14/03/2016 Rômulo da Silva Lima Slid e 8

9 Explorando a Tag <a> Faz a ligação entre páginas web a href... hypertext reference slide_link.html e 9

10 Organização dos arquivos 14/03/2016 Rômulo da Silva Lima Slid e 10

11 Ajustes nos html s 14/03/2016 Rômulo da Silva Lima Slid e 11

12 Cabeçalho <head> Informações que serão usadas pelo navegador TITLE LINK METATAGS DESCRIPTION CHARSET 14/03/2016 Rômulo da Silva Lima Slid e 12

13 Atividade 1 - HTML Download Sublime Download imagens.zip Criar um site para uma locadora de veículos. Nela deve conter: Pagina principal com textos explicativos de boas vindas Imagens de carros com suas respectivas descrições Fazer link com outra pagina que possua instruções das documentações necessárias para locação OBS: Fazer o uso de todas as tags já vista até aqui, além da estrutura de arquivos. 14/03/2016 Rômulo da Silva Lima Slid e 13

14 Listas Criam listas de informações Essas listas podem ser: Ordenadas Não-ordenadas 14/03/2016 Rômulo da Silva Lima Slid e 14

15 Listas 14/03/2016 Rômulo da Silva Lima Slid e 15

16 <div> tag de bloco, usado para agrupar elementos semelhantes Normalmente essa divisão é feita para que seja aplicado um estilo ao elementos agrupados na DIV Define uma divisão dentro do documento HTML 14/03/2016 Rômulo da Silva Lima Slid e 16

17 <div> 14/03/2016 Rômulo da Silva Lima Slid e 17

18 input É uma tag utilizada para entrada de dados Pode ter diversos tipos Text; Password; Submit; Button; Checkbox; File; Radio; Reset; hidden. e 18

19 input - exemplos e 19

20 input - exemplos e 20

21 select Cria um selecionador no HTML É o conjunto da tag select com a tag option Exemplo e 21

22 textarea Cria uma caixa onde o usuário poderá digitar textos longos Exemplo e 22

23 Atividade 2 Incrementar o site de locadoras adicionando um HTML de cadastro dos locatários chamado na pagina de documentação: Listas (ordenadas e não ordenadas) Alterar a pagina de documentação colocando a lista de documentações em uma tag de listagem div input (text, submit, file, radio, checkbox) select textarea e 23

24 FrameSet Divide o documento html em partes Funciona em conjunto com a tag Frame Exemplo e 24

25 FrameSet e 25

26 FrameSet e 26

27 FrameSet Atributos (FRAMESET) COLS ROWS FRAMESPACING FRAMEBORDER (0 ou 1) Atributos (FRAME) FRAMESPACING FRAMEBORDER SCROLLING (yes ou no) NAME SRC e 27

28 FrameSet Desvantagens Alguns dispositivos menores não podem lidar com quadros muitas vezes porque sua tela não é grande o suficiente para ser dividido Às vezes, sua página será exibida de forma diferente em diferentes computadores, devido à resolução de tela diferente e 28

29 IFrame Quadros que podem ser adicionados no conteúdo de uma página HTML Exibir o conteúdo de uma outra página e 29

30 IFrame e 30

31 Atividade 3 Incrementar o site da locadora Dividir o index usando frameset/frame Cabeçalho Menu Principal Na pagina de cadastro ao lado do campo endereço adicionar o Iframe para busca do cep no site dos correios O Iframe deve aparecer vazio e ao clicar no link Buscar por CEP carregar a pagina dos correios no Iframe e 31

32 14/03/2016 Rômulo da Silva Lima Slid e 32

Documentos relacionados

O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2

HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza