4 dummies

Conteúdo

HTML

história
elementos básicos
alguns exemplos

CSS

classes, identificadores e encadeamentos
ordem e pesos na declaração
padding e margin
unidades de medida
displays e float
positions e z-index
prefixos de extensão

HTML - Datas

1989 - HTML
1995 - HTML 2.0
- Envio de dados por formulários
- Tabelas
1997 - HTML 3.2 (W3C)
- Especificações e recomendações do HTML pela W3C
- tchau marquee

HTML - Datas

1997 - HTML 4.0
- Strict / Transitional/Frameset (DTD)
- Informado via Doctype
1999 - HTML 4.01
- recomendação W3C
2008 - HTML5 (Working Draft)
2014 - HTML5
```
<!DOCTYPE html>
```

O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

HTML - O que é

HTML (HyperText Markup Language)

Utilizada para descrever semanticamente a estrutura de um website

Não é uma linguagem de programação mas sim uma linguagem de marcação

HTML - tags

As tags básicas do HTML são:

<html>
- tag base/origem
<head>
- inclui metatags, css, *js
- <meta> metadados como:
  - charset, description, keywords, robots, viewport etc
- <title> tag específica para o título
<body>
- tag para inclusão de todo o conteúdo do website

charset="UTF-8" viewport mobile devices only

HTML - Um exemplo básico

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de código HTML</title>
</head>
<body>
  <h1>Título principal</h1>
  <p>Algum texto aqui...</p>
  <!-- e esse é um comentário! -->
</body>
</html>

HTML - tags containers/sections

<div>, <p>

<!-- tags semânticas -->
<header>  <!-- cabeçalho, logo, navegação -->
<nav>     <!-- itens de navegação (links) -->
<aside>   <!-- sidebar, conteúdo relativo ao pai -->
<article> <!-- artigo, um post, etc -->
<section> <!-- uma seção, agrupamento do mesmo tema -->
<footer>  <!-- rodapé, informações de contato -->

Todos eles por são elementos do tipo block

Elementos do tipo block ocupam todo o espaço do seu elemento pai, criando um bloco onde sempre se iniciam em uma nova linha. (esta "caixa" é um exemplo de um elemento block)

HTML - tags heading

<h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

H1

h2

h3

h6

HTML - Exemplo

<div class="header">
  <div class="navbar">
    SECCOMP 2015
  </div>
</div>
<div>
  <div>
    <h2>Comentários</h2>
  </div>
  <div class="staff_comment">
    <p>A seccomp 2015 esta demais!</p>
  </div>
  <div class="user_comments">
    <div class="user_comment">
      <p>Muito bom!</p>
      <div>
        <p>
          Postado em <span>22/10</span> por David.
        </p>
      </div>
    </div>
  </div>
</div>

HTML - Exemplo

<header>
  <nav>
    SECCOMP 2015
  </nav>
</header>
<article>
  <header>
    <h2>Comentários</h2>
  </header>
  <section class="staff_comment">
    <p>A seccomp 2015 esta demais!</p>
  </section>
  <section class="user_comments">
    <article class="user_comment">
      <p>Muito bom!</p>
      <footer>
        <p>
          Postado em <time datetime="2015-10-22 14:00">22/10</time> por David.
        </p>
      </footer>
    </article>
  </section>
</article>

HTML - listas

<ul>    <!-- lista não ordenada -->
<ol>    <!-- lista ordenada (ou reversed), start -->
<dl>    <!-- lista com definições -->
  <dt>  <!-- item a ser definido -->
  <dd>  <!-- definição -->

<menu>  <!-- idem a ul, experimental -->

<li>    <!-- item de uma lista -->

HTML - listas

<dl>
  <dt>Pokemon</dt>
  <dd>Temos que pegar!</dd>
</dl>

<ul>
  <li>Pikachu</li>
  <li>Charmander</li>
</ul>

<ol>
  <li>Pikachu</li>
  <li value="10">Squirtle</li>
</ol>

Pokemon Temos que pegar!

Pikachu
Charmander

Pikachu Squirtle

HTML - formulários

<form>        <!-- container de um formulário, action, method, enctype... -->
<button>      <!-- botão, pode ser submit, reset, etc -->
<fieldset>    <!-- agrupamento de campos e labels -->
<input>       <!-- entrada de dado, texto, senha, hidden, arquivo, checkbox, etc -->
              <!-- HTML5 range, email, date, color, etc -->

<textarea>    <!-- campo de texto de várias linhas -->
<label>       <!-- título/subtítulo, nome do campo -->
<select>      <!-- entrada de dados com lista de seleção -->
<option>      <!-- item de uma lista -->
<optgroup>    <!-- utilizado para agrupar itens de uma lista -->

HTML - formulários

<form class="row" name="pkm_form" action="" method="get">
  <label for="pkms">Pokemon</label>
  <select name="pkms" id="pkms">
    <optgroup label="Starter">
      <option>Pikachu</option>
      <option>Bulbasauro</option>
      <option>Squirtle</option>
      <option selected>Charmander</option>
    </optgroup>
    <optgroup label="Tipo Pedra">
      <option>Onix</option>
      <option>Geodude</option>
    </optgroup>
    <optgroup label="Tipo Fogo (desabilitados)" disabled>
      <option>Vulpix</option>
      <option>Rapidash</option>
      <option>Magmar</option>
    </optgroup>
  </select>

  <fieldset>
    <legend>Tem certeza?</legend>
    <input name="sure" id="yes" type="radio"><label for="yes">SIM</label>
    <input name="sure" id="no" type="radio"><label for="no">NÃO</label>
  </fieldset>
</form>

Pokemon PikachuBulbasauroSquirtleCharmanderOnixGeodudeVulpixRapidashMagmar

Tem certeza? SIM NÃO

HTML - tags interativas

<img>      <!-- insere uma imagem -->
<audio>    <!-- insere um ou mais arquivos de audio, captions, etc -->
<video>    <!-- insere um vídeo, poster, subtitles -->
<object>   <!-- insere um swf, um arquivo via url, etc -->

HTML - tags interativas

<img src="resources/starters.png" alt="PKM Starters">

<audio controls="controls" volume="0.5" loop="true">
  Mensagem avisando usuário que elemento audio não é suportado
  <source src="pkm_sound.ogg" type="audio/ogg">
  <track kind="captions" src="lyrics.en.vtt" srclang="en" label="EN">
  <track kind="captions" src="lyrics.pt.vtt" srclang="en" label="PT-BR">
</audio>

<video width="400" controls poster="resources/poster.gif" >
  <!-- sources mp4, ogg, webm ...-->
</video>

Your browser doesn't support HTML5 video tag.

Mensagem avisando usuário que elemento audio não é suportado

HTML - outros elementos

<b> e <strong>      <!-- negrito e importância -->
<i> e <em>          <!-- italico e ênfase -->
<small> e <big>     <!-- 80% e 120% (obsoleto)-->

<span>              <!-- conteúdo inline (idem ao div) -->
<br>                <!-- quebra de linha -->

CSS - Identificadores

#pokemon {
  font-size: 90px;
  font-weight: bold;
  color: #ffcc00;
  border: solid 5px white;
  background-color: rgb(109, 156, 190);
  padding: 30px 20px;
}

Identificadores são utilizados quando o estilo é único e so deve ser utilizado em apenas um elemento.

CSS - Identificadores

Exemplo do identificador #pokemon sendo aplicado em uma div

POKEMON!

CSS - Classes

.pokemons {
  font-size: 36px;
  padding: 10px;
  border: solid 1px white;
  color: #fff;
}

.water-type {
  background-color: rgb(109, 156, 190);
}

.grass-type {
  background-color: rgba(109, 156, 54, 1);
}

.fire-type {
  background-color: hsl(25, 89%, 50%);
}

Classes não são únicas e por esse motívo podem (e devem) ser reutilizadas

CSS - Classes

  <div class="pokemons water-type">
    Squirtle
  </div>
  <div class="pokemons fire-type">
    Charmander
  </div>
  <div class="pokemons grass-type">
    Bulbasaur
  </div>
  <div class="pokemons">
    Pikachu
  </div>

Squirtle

Charmander

Bulbasaur

Pikachu

CSS - encadeamento

Classes podem ser encadeadas, para então formarem novas classes dinâmicas

.pokemons {
  color: white;
  font-size: 30px;
}

.shiny {
  color: gold;
}

Pikachu

Pikachu Shiny

CSS - ordem e pesos na declaração

A ordem que importa é a ordem no momento da definição e não quando o mesmo é utilizado, portanto:

.pokemons {
  color: gray;
}

.fire-type {
  color: red;
}

toda vez em que encadearmos as classes .pokemons e .fire-type, o texto será exibido com a cor vermelha.

CSS - ordem e pesos na declaração

Além da ordem, o CSS tem um sistema de pesos, camado de especificidade.

Atributo style > identificador > classes > elementos

CSS - ordem e pesos na declaração

Portanto, além da posição do seu CSS declarado, a especificidade em que o CSS foi declarado também importa.

ul li {
  color: #ccc;
}

li {
  margin: 10px;
  color: #fff;
}

li.favorite {
  color: green;
}

.favorite {
  color: gold;
}

Charmander
Squirtle
Bulbasaur

CSS - ordem e pesos na declaração

Charmander
Squirtle
Bulbasaur

Quando adicionamos !important em qualquer declaração, ela automaticamente recebe o peso máximo.

CSS - Propriedades padding e margin

padding é a propriedade que define o gap entre o elemento e sua borda. não aceita valores negativos

margin é a propriedade que define a margem do elemento em relação ao todo. aceita valores negativos

.custom-class {
  padding: 10px 15px 5px;
  margin: -20px 30px;
}

CSS - unidades

px
- pixel
%
- porcentagem (em relação ao container)
vh e vw
- 1/100 da altura e/ou largura da viewport
em
- tamanho da fonte padrão do dispositivo
rem
- ("root em") é o tamanho de fonte do elemento-raiz (html) do documento.

em e rem são utilizadas para fontes

CSS - unidades

100 px
10%
10vw
2em
2rem

CSS - display

  display: inline;        /* inline, segue o fluxo dos elementos */
  display: inline-block;  /* características de block, mas se mantem "inline" */
  display: block;         /* ocupa todo o espaço livre, como um bloco */
  display: none;          /* oculta o elemento */

  display: table;         /* replica a estrutura de <table> */
  display: table-cell;
  display: table-column;

  display: flex;          /* magic happens! */

CSS - display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. conteudo inline . Donec at dolor vitae neque dignissim accumsan et non est. Proin egestas posuere nunc non fermentum. Suspendisse dapibus non. Nullam bibendum porttitor diam vitae vestibulum. conteúdo inline-block. Donec id pharetra ligula, ac interdum massa. Maecenas vestibulum id justo vitae euismod. In hac habitasse platea dictumst.

conteúdo block

Vivamus non tempus diam. Integer id neque volutpat, dapibus est ut, eleifend diam. Aenean facilisis bibendum sodales.

CSS - display

.parent {
  display: flex;
  height: 300px;
}

.child {
  width: 100px;
  height: 100px;
  margin: auto;
}

mais informações em https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS - float

float é uma propriedade do CSS usada para posicionar os elementos de um website

  left | right | none | inherit

Normalmente, quando queremos "quebrar" a linha entre elementos com float, utilizamos uma outra propriedade, chamada clear

  both | left | right | none

Quando a propriedade float é informada, o elemento por padrão assume o display block.

CSS - float

float left

float right

float left clear left

float left

float right

float right clear right

float left clear both

CSS - position

static    /* posicionamento padrão */
relative  /* posicionamento relativo ao container pai */
absolute  /* posicionamento absoluto ao container pai (caso o mesmo seja relative) ou então é relativo ao ponto zero da viewport */
fixed     /* posicionamento fixo ao ponto zero da viewport, sempre fixo */

/* aplicado para relative, absolute e fixed */
posicionamento: top, right, bottom e left

/* aplicado para absolute e fixed */
z-index

CSS - prefixos de extensão

Normalmente, alguns browsers não possuem a implementação de todas as propriedades do CSS e para que seja possível, é necessário utilizar os prefixos de cada browser.

-moz-, -ms-, -webkit-, -o- e -khtml-*

um exemplo seria a propriedade flex:

.my-flex-class {
  width: 20%;            /* For old syntax, otherwise collapses. */
  -webkit-box-flex: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
      -webkit-flex: 1;   /* Safari 6.1+. iOS 7.1+, BB10 */
          -ms-flex: 1;   /* IE 10 */
              flex: 1;   /* NEW, Spec - Firefox, Chrome, Opera */
}

CSS - box-sizing

A propriedade box-sizing é utilizada para calcular a largura e altura dos elementos. Por padrão, essa propriedade é content-box, a qual não leva em conta os valores de borda e padding do elemento.

* {
  webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Utilizando border-box, não é necessário ficar (re)calculando os valores de altura e largura quando a borda e/ou o padding do elemento se alterar.

VAMOS PARA A PRATICA!

Clique aqui

htmlcss4dummies

dpedoneze

htmlcss4dummies

1 1 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

htmlcss4dummies

4 dummies

Conteúdo

HTML - Datas

HTML - Datas

HTML - O que é

HTML - tags

HTML - Um exemplo básico

HTML - tags containers/sections

HTML - tags heading

H1

h2

h3

h6

HTML - Exemplo

HTML - Exemplo

HTML - listas

HTML - listas

HTML - formulários

HTML - formulários

HTML - tags interativas

HTML - tags interativas

HTML - outros elementos

CSS - Identificadores

CSS - Identificadores

CSS - Classes

CSS - Classes

CSS - encadeamento

CSS - ordem e pesos na declaração

CSS - ordem e pesos na declaração

CSS - ordem e pesos na declaração

CSS - ordem e pesos na declaração

CSS - Propriedades padding e margin

CSS - unidades

CSS - unidades

CSS - display

CSS - display

CSS - display

CSS - float

CSS - float

CSS - position

CSS - prefixos de extensão

CSS - box-sizing

VAMOS PARA A PRATICA!

Informações extras

1 1