HTML5 & CSS3

21 de Agosto de 2015 HTML5 & CSS3 Criando interfaces
para navegadores web

HTML É uma linguagem de marcação utilizada para criar interfaces
gráficas pelo navegador. Define blocos de construção de elementos visuais, como imagens <img>, formularios <input> , títulos <h1> entre outros.

CSS É uma linguagem para aplicação de estilos em documentos
HTML, isto é, mudar sua aparência visual, através da mudança dos atributos como cor de fundo background, tipo de fonte font-style, cor color, bordas border e assim por diante.

Conteúdo / Informação Estilo / Apresentação Resumidamente

Criando uma página HTML Um HTML é um arquivo texto
como qualquer outro. Crie um novo arquivo index.html e abra-o no seu editor de texto favorito.

1 2 3 4 5 Linguagem de marcação <nome-tag atributo="valor">...</nome-tag>
<nome-tag atributo1="valor" atributo2="valor"> São instruções baseadas em tags, utilizada para simplificar e abstrair a construção de interfaces.

0 1 2 3 4 5 6 7 8 9
10 Estrutura básica <!doctype html> <html> <head> <meta charset="utf-8"> <title>Título da página</title> </head> <body>  </body> </html>

0 1 2 Doctype <!doctype html> Sempre iniciamos um documento
HTML com um doctype, sua função é informar ao navegador como ele deve desenhar a página. Nesse caso indicamos que é um documento HTML5.

0 1 2 HTML <html>  </html> Logo
após temos a tags html que é o nó inicial do documento, dentro dele definimos todas as propriedades do documento.

0 1 2 Head <head> <title>Título da página</title> </head> Dentro
do head está todas as configurações do documento que não são visíveis, mas definem como ele deve ser construido, como por exemplo incluir outros arquivos.

0 1 2 Body <body>  </body> Em contrapartida o body é o nó onde é inserido todos os elementos visíveis, isto é, que vão ser desenhados pelo navegador e exibido ao usuário.

Tags de marcação O HTML5 possui diversos tipos de tags,
algumas são usadas para definir sua estrutura: header Cabeçalhos nav Menus de navegação main Conteúdo principal section Sessões do conteúdo div Bloco estrutural footer Rodapé

1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Título da página</title> </head> <body> <header></header> <nav></nav> <main> <section></section <aside></aside> </main> <footer></footer> </body>

Semântica Buscadores como o Google se baseiam nos elementos HTML
para adivinhar qual texto da página é importante. Utilizar as tags corretas para cada situação é uma técnica conhecida como web semântica.

Especializadas em exibir elementos gráficos como texto, lista, tabelas, imagem,
formulários: Tags de conteúdo h1, h2, h3, h4, h5, h6 Títulos p, strong, em Elementos textuais ol, ul, li Listas img Image a Links com outras páginas

0 1 2 3 4 5 6 7 8 9
10 Títulos <h1>Título H1</h1> <h2>Título H2</h2> <h3>Título H3</h3> <h4>Título H4</h4> <h5>Título H5</h5> <h6>Título H</h6> Título H1 Título H2 Título H3 Título H4 Título H5 Título H6

0 1 2 3 4 5 6 7 8 9
10 Listas <h3>Ordenada</h3> <ol> <li>Item 1</li> <li>Item 2</li> </ol> <h3>Desordenada</h3> <ul> <li>Item 3</li> <li>Item 4</li> </ul> Ordenada 1. Item 1 2. Item 2 Desordenada • Item 3 • Item 4

0 1 2 3 4 5 6 7 8 9
10 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Minus, dolor que ducimus officia modi reprehenderit saepe. </p> Elementos textuais Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolor que dolor ducimus officia modi reprehenderit saepe.

0 1 2 3 4 5 6 7 8 9
10 <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> </p><p> <em>Minus, dolor que ducimus officia modi reprehenderit saepe. </em> </p> Elementos textuais Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolor que dolor ducimus officia modi reprehenderit saepe.

0 1 2 3 4 5 6 7 8 9
10 Links e imagens <a href="http://google.com">Google</a> <br> <img src="../imgs/imagem.jpg" alt="Texto"> Google

0 1 2 3 4 5 6 7 8 9
10 <table> <tr> <td>A1</td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> </table> Tabelas A1 A2 B1 B2

0 1 2 3 4 5 6 7 8 9
10 Formulários <form action="#"> <input type="text"> <input type="checkbox"> <input type="radio"> <select> <option>...</option> </select> <button>Enviar</button> </form>

Elementos block e inline Elementos block são aqueles que ocupam
uma linha inteira: <div></div> <p></p> <ul></ul> <h1></h1>

1 2 3 4 5 Elementos block e inline <p>Lorem
ipsum <a href="#">dolor</a> sit amet, consectetur <span>adipiscing</span> elit. Minus, dolorque ducimus <strong>officia</srong> modi <em>reprehender</em> saepe.</p> Elementos inline não forçam a quebra de linha mantendo a continuidade do texto, geralmente, são usados, para da realçe as palavras:

Os elementos inline, do exemplo anterior, se ajustam automaticamente ao
texto: Elementos block e inline <p> a bcd efgh ijklmnopqrs tuvwxyz .</p> <span></span> <a></a> <strong></strong> <em></em>

0 1 2 3 4 5 6 7 8 9
10 Elementos inline span  a  img   strong, em, cite, sub, sup  button, input, label, select, textarea

Exercício Criar um arquivo HTML, como os items abaixo, cada
qual em um section com uma classe: • Header com um título; • Paragrafos (como negrito, itálico e um link) • Listas ordenadas e desordenadas • Tabelas • Formulário (Para inserir um texto e botão)

Folhas de estilo

Criando um CSS Um CSS também é um arquivo texto,
crie um novo arquivo estilo.css e abra-o no seu editor de texto favorito.

1 2 3 4 5 Para usar o CSS para
estilizar o HTML, nós precisamos inclui-lo neste último. Para tal inserimos a tag link no head, tal qual: Vinculando o HTML com o CSS <head> <meta charset="utf-8"> <title>Título da página</title> <link rel="stylesheet" href="estilo.css"> </head>

1 2 3 4 5 Adicionar um estilo à um
elemento p { color: red; } Para tal precisamos selecionar o elemento e aplicar um estilo, no exemplo abaixo aplicamos a cor de fonte vermelha no elemento p:

1 2 3 4 5 Classes É uma forma de
selecionar elementos pelo atributo class, ao invés da tag, além de permitir o seu multiplo encadeamento. <div class="verde">Planta</div> <p class="verde grande">Hulk</p>

0 1 2 3 4 5 6 7 8 9
10 Estilizando classes /* Classes sempre se iniciam com um ponto */ .verde { color: green; } .grande { font-size: 50px; width: 1000px; } Atenção com o ponto e vírgulo no final de cada diretriz!

1 2 3 4 5 Permite selecionar o elemento pelo
attributo id, porém, apenas um elemento. IDs <div id="elemento1">Hello</div> <span id="elemento2">World</span>

0 1 2 3 4 5 6 7 8 9
10 Estilizando com IDs /* IDs sempre se iniciam com uma cerquilha */ #elemento1 { background-color: #000000; color: white; border: 1px solid red; } #elemento2 { text-align: center; padding: 15px; width: 90%; }

0 1 2 3 4 5 6 7 8 9
10 Estilos comuns .classe { background-image: url(imagem.jpg); /* Imagem */ background-color: #ffffff; /* Cor de fundo */ border: 2px solid #000000; /* Borda */ float: left; /* Flutuação do block */ color: #000000; /* Cor da fonte */ font-size: 16px; /* Tamanho da fonte */ text-align: left; /* Alinhamento do texto */ height: 200px; /* Altura do bloco */ width: 500px; /* Largura do bloco */ }

Flutuação de blocks <main> </main> <section></section> <aside> </aside>

0 1 2 3 4 5 6 7 8 9
10 Flutuação de blocks /* A largura total NÃO pode exceder 100%! */ section { width: 85%; } aside { float: right; width: 15%; }

Detalha as opções de ajuste da caixa de um elemento.
A soma de todos esses elementos é representa sua largura total. Box-model margin border padding width

0 1 2 3 4 5 6 7 8 9
10 .classe { /* Cores */ color: #000000; /* Hexadecimal #RRGGBB */ color: rgb(0, 128, 255); /* RGB */ color: rgba(0, 128, 255, 0.5); /* Transparencia */ /* Dimensões */ width: 100px; width: 100%; font-size: 1em; /* Relativo a resolução */ } Unidades

0 1 2 3 4 5 6 7 8 9
10 Hierarquia body { font-family: Arial; } .classe { color: red; } .classe .classe-filha { color: green; } .classe-filha, .classe-prima { text-align: center; }

0 1 2 3 4 5 6 7 8 9
10 <div class="classe"> <p>Planta</p> <p class="classe-filha"> Planta </div> </div> <div class="classe-prima"> Planta </div> Hierarquia

Cada navegador implementa seu próprio motor de renderização de HTML,
isso, faz com que possam acontecer inconsistencias. Problemática dos navegadores

Biblioteca de estilos comuns, que pode ser utilizada como base
para a construção de interfaces web. Bootstrap

http://getbootstrap.com

JavaScript É uma linguagem de programação interpretada, projetada para se
executada pelo navegadores e capaz de manipular e interagir com os elementos HTMLs.

Criar um arquivo CSS e vincula-lo, com o HTML (<link
rel="stylesheet" href="estilo.css">): • Alterar a fonte do geral para Arial 12px; • Crie classes com bordas e margens e aplique nos elementos; • Deixa o "designer" em você fluir! Exercício

HTML5 & CSS3

HTML5 & CSS3

More Decks by Edson Hilios

Other Decks in Programming

Featured

Transcript