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 TAGs para definir a formatação dos documentos Cada uma das TAGs possuem propriedades que influenciam na formatação do HTML. e 3
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
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
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
Tags Básicas - Exemplos e 7
Tags Básicas - Exemplos 14/03/2016 Rômulo da Silva Lima Slid e 8
Explorando a Tag <a> Faz a ligação entre páginas web a href... hypertext reference slide_link.html e 9
Organização dos arquivos 14/03/2016 Rômulo da Silva Lima Slid e 10
Ajustes nos html s 14/03/2016 Rômulo da Silva Lima Slid e 11
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
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
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
Listas 14/03/2016 Rômulo da Silva Lima Slid e 15
<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
<div> 14/03/2016 Rômulo da Silva Lima Slid e 17
input É uma tag utilizada para entrada de dados Pode ter diversos tipos Text; Password; Submit; Button; Checkbox; File; Radio; Reset; hidden. e 18
input - exemplos e 19
input - exemplos e 20
select Cria um selecionador no HTML É o conjunto da tag select com a tag option Exemplo e 21
textarea Cria uma caixa onde o usuário poderá digitar textos longos Exemplo e 22
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
FrameSet Divide o documento html em partes Funciona em conjunto com a tag Frame Exemplo e 24
FrameSet e 25
FrameSet e 26
FrameSet Atributos (FRAMESET) COLS ROWS FRAMESPACING FRAMEBORDER (0 ou 1) Atributos (FRAME) FRAMESPACING FRAMEBORDER SCROLLING (yes ou no) NAME SRC e 27
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
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
IFrame e 30
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
14/03/2016 Rômulo da Silva Lima Slid e 32