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

http://www.mao.org.br

Sistema TagPlus

http://www.tagplus.com.br

Site Revista Unifemm - Sete Lagoas

http://www.unifemm.edu.br/revistareferencia

Site Revista Puc Minas

http://www.revista.pucminas.br

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

HTML

Introdução HTML

Hyper Text Markup Language

Linguagem de marcação de texto
Interpretada pelos Navegadores
Utiliza blocos de elementos chamados "tags"

1991

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
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

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
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
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

Ir para o {CSS}

Introdução A

<HTML> e {CSS}

Bruno Barbosa

Portfolio

Parte 1

Introdução HTML

Sumário

Referências

Editores de Código

HTML

Tags

Meu primeiro HTML ...

dicas importantes

Estrutura básica

Cabeçalho e Meta Informações

CORPO e conteúdo

Comentários

Textos

Atributos

Imagens

Tipos de imagem

Tamanho da imagem

Âncoras e Links

Listas

Elementos na Lista

Tipos de Lista

Desafio !

Tabelas

Elementos na tabela

Manipulando tabela

Manipulando Células

Desafio !

Incorporação de Documentos

Formulários

Elementos de formulários

Elementos Formulários

Desafio !

Elementos estruturais

Principais Elementos estruturais

</HTML>