Introdução A
<HTML> e {CSS}
Bruno Barbosa
- Bacharel em SI pela UFMG
- CTO da TagPlus
- Co-Founder Grupo Q4 Angels
- Entusiasta UX e Web desde 2003
brunovb
bruno@tagplus.com.br
bbarbosa85
b.barbosa85
html css javascript
php design de interação
fotografia arquitetura

Portfolio




Museu de Artes e Ofícios
Sistema TagPlus
Site Revista Unifemm - Sete Lagoas
Site Revista Puc Minas
Parte 1
Introdução HTML
Introdução HTML
slides.com/bbarbosa85/intro-html
Acompanhe em
Sumário
Introdução HTML
- Estrutura
- Textos
- Atributos
- Imagens
- Links
- Listas
- Tabelas
- Incorporação de documentos
- Formulários
- Elementos estruturais
Referências
Introdução HTML
Editores de Código
- Notepad++
- Atom
- VSCode
-
Sublime Text
- ... em último caso: Editor Online TryIt
HTML
Introdução HTML
Hyper Text Markup Language
- Linguagem de marcação de texto
- Interpretada pelos Navegadores
- Utiliza blocos de elementos chamados "tags"
1991
Tags
Introdução HTML
- Encapsuladas por < >
- Sempre minúsculas
- Sempre devem ser "fechadas" com </ >
- Mesmo nome abre e fecha
- Podem ser aninhadas (elemento dentro de elemento)
- Cada uma tem sua função
- Ex: título, parágrafo, link etc.
<nometag>Conteudo</nometag>
Meu primeiro HTML ...
Introdução HTML
- Abra o editor de código de sua preferência
- Notepad++
- VSCode
- Atom
- SublimeText etc.
- Crie um novo arquivo em branco chamado intro.html
-
Salve o arquivo em uma pasta em local de fácil acesso
-
Abra o arquivo utilizando o Google Chrome
- Clique direito sobre o arquivo
- Abrir com / "Google Chrome"
dicas importantes
Introdução HTML
Salvar Documento
Ctrl + S
Trocar Janela
Alt + Tab
Atualizar Página
Ctrl + R

+ S
+ Tab
+ R
Copiar
Ctrl + C
+ C
Colar
Ctrl + V
+ V
Agilidade
Estrutura básica
Introdução HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Título</h1>
<p>Parágrafo</p>
</body>
</html>
Tipo do documento.
Não é HTML
- Copie o código
- Cole no arquivo intro.html em seu editor
- Salve o arquivo
- Vá para a janela do navegador
- Recarregue a página
Cabeçalho e Meta Informações
Introdução HTML
<head>
<title>Título da Página</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
- informações da própria página
- codificação do texto
- dados para indexação e pesquisa
- ícone no navegador
- tamanho da tela
- inclusão de recursos externos (css, javascript)
CORPO e conteúdo
Introdução HTML
<body>
<h1>Minha primeira página HTML</h1>
<p>Êba!!</p>
</body>
Comentários
Introdução HTML
<!-- Este é um comentário HTML e não será exibido -->
- Marcar o código
- Facilitar leitura e manutenção
Textos
Introdução HTML
-
Títulos e subtítulos
- h1, h2, h3, h4, h5
-
Parágrafos
- p
-
Estilos
- negrito ................................ b, strong
- itálico .................................. i, em
- sublinhado ........................ u
-
Quebra de Linha
- br
Atributos
Introdução HTML
<p title='título para o elemento'>Texto do parágrafo</p>
<p id='xulambs'>Texto do xulambs</p>
- São informações extras pré-determinadas das tags
- tags podem possuir atributos exclusivos
- Possibilitam:
- acessibilidade
- definição de estilo
- referência e incorporação de conteúdos
Imagens
Introdução HTML
<img src="html5.jpg" alt="HTML5 Icon">
<img src="/imagens/html5.jpg" alt="HTML5 Icon" width="128" height="128">
- arquivo local em pasta diferente
- arquivo local na mesma pasta
<img src="https://media.giphy.com/media/wnh38lkiZt1QY/giphy.gif"
alt="Fácil até aqui, certo ?">
- arquivo em outro servidor / nuvem
<img>
Tipos de imagem
Introdução HTML
-
Fotos
- .jpeg
- .jpg
- .bmp
-
Animações
- .gif
-
Figuras / fundo transparente
- .png
-
Formas e ícones
- .svg
Tamanho da imagem
Introdução HTML
-
Não indicar = Automático
- Obtém o tamanho original
- Obtém o tamanho original
-
Atributos
- width = largura
- height = altura
- CSS
- Medida em pixels
- Porcentagem
Âncoras e Links
Introdução HTML
<a href="#id-do-elemento">link text</a>
<a href="outro-arquivo.html">outra pagina interna</a>
- link p/ outra página ou documento no mesmo site
- âncora na mesma página
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
- link p/ outro site
<a>
Listas
Introdução HTML
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
- tópicos
- enumeração
- menus
Elemento Composto
<ul> <ol> <li>
Elementos na Lista
Introdução HTML
- ul
- ol
list item
unordered list
ordered list
Tipos de Lista
-
Itens
- li
5 minutos: Monte um menu em lista
Desafio !
Tabelas
Introdução HTML
<table>
<tr>
<td>texto A</td>
</tr>
</table>
- organização de dados
Elemento Composto
<table>
Elementos na tabela
Introdução HTML
-
Linhas
- tr
- tr
-
Células / Colunas
- td
- th
table row
table data
table header
Manipulando tabela
Introdução HTML
- Tamanho
- Bordas
- Preenchimento
- Espaçamento
width
border
cellpadding
cellspacing
Manipulando Células
- Agrupar linhas
Agrupar colunas
colspan
rowspan
<table>
<td>
Introdução HTML
10 minutos: Monte um relatório de compras
- Pelo menos 5 itens com:
- Nome do produto
- Categoria
- Quantidade
- Valor da compra
BÔNUS
- Título nas colunas
- Linha de totais
Desafio !
Incorporação de Documentos
Introdução HTML
- divisão estrutural
- conteúdo de terceiros / integrações
- gliphy, google maps, youtube etc.
<iframe>
<iframe src="https://alguma.url.com"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3749.9636544987084!2d-43.95417859999999!3d-19.9680307!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa697ee15f2c8e3%3A0x316158c31469df67!2sAv.+Raja+Gab%C3%A1glia%2C+4343+-+Cidade+Jardim%2C+Belo+Horizonte+-+MG!5e0!3m2!1spt-BR!2sbr!4v1503292469764" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/_j43I8MNQ_Y" frameborder="0" allowfullscreen></iframe>
Formulários
Introdução HTML
<form action='sucesso.html' method='post'>
<input type='text' name='apelido'/>
<button type='submit'>Enviar</button>
</form>
- entrada ou envio de dados
<form>
Elemento Composto
- action destino
- method envelope
Atributos principais
Elementos de formulários
Introdução HTML
-
Simples
- text
- password
- file
- textarea *
<input type='tipo' name='nome do campo' />
<select name='nome do campo'>
<option value='A'>aaaaaa</option>
<option value='B'>bbbbbb</option>
</select>
-
Compostos
- checkbox
- radio
- select
- single
- multiple
Elementos Formulários
Introdução HTML
-
Exibição
- label
- label
-
Ação
- button
- submit
- reset
<label for='nome'>Seu Nome</label>
<input type='text' name='nome' placeholder='digite seu nome'/>
<button type="button">Click Me!</button>
Introdução HTML
10 minutos: Monte um formulário de cadastro
- Pelo menos 3 campos
- Envie para
BÔNUS
- Envie uma lista de opções com 'select' ou 'checkbox'
Desafio !
http://batora.net/html/index.php
Elementos estruturais
Introdução HTML
<div>
<!-- um monte de elementos aqui -->
</div>
- Organizar conteúdo
- Diferenciar áreas do site
- Conter e ajustar elementos
Principais Elementos estruturais
Introdução HTML
<span>
<div>
<fieldset> + <legend>
Texto
Conjunto de elementos
Conjunto de elementos com identificação
</HTML>
brunovb
bruno@tagplus.com.br
bbarbosa85
b.barbosa85
Introdução HTML
Introdução HTML
By Bruno Barbosa
Introdução HTML
Material do curso de introdução ao HTML
- 282