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

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

  1. Abra o editor de código de sua preferência
    • Notepad++
    • VSCode
    • Atom
    • SublimeText etc.
       
  2. Crie um novo arquivo em branco chamado intro.html
     
  3. Salve o arquivo em uma pasta em local de fácil acesso
     
  4. 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

  1. Copie o código
  2. Cole no arquivo intro.html em seu editor
  3. Salve o arquivo
  4. Vá para a janela do navegador
  5. 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

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

Introdução HTML

By Bruno Barbosa

Introdução HTML

Material do curso de introdução ao HTML

  • 282