Download - Desenvolvimento para a web usando html e css
![Page 1: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/1.jpg)
Desenvolvimento para a webusando HTML e CSS
Eduardo Bonfandini
7 CCETEC Univates
![Page 2: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/2.jpg)
INTRODUÇÃOFor dummies
![Page 3: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/3.jpg)
TIPOS DE MAGIA NEGRA
1. Html2. Css3. Javascript4. Php5. Mysql
![Page 4: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/4.jpg)
HTML
HyperText Markup Language
Linguagem de marcaçãoNão é linguagem de programação
![Page 5: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/5.jpg)
HTTP? URL?
● Hypertext transfer protocol:
http://meusite.com.br
HTTPS (HyperText Transfer Protocol Secure)
● Uniform resource locator:
http:// https:// ftp:// mailto:// telnet:// tel://
![Page 6: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/6.jpg)
CSS
Cascade Style sheet
Definição visualDeixa a web maneira
![Page 7: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/7.jpg)
JAVASCRIPT
Javascript
Programação clienteDeixa a web dinâmica
![Page 8: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/8.jpg)
AJAX
Asynchronous Javascript and XML
![Page 10: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/10.jpg)
NÃO É JAVA
Alternativa do Netscape ao Vbscript (Morreu).Lembra BEEEEEEEEEEEM de longe o Java por isso o nome.
![Page 11: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/11.jpg)
LADO SERVIDOR
Papel Higiênico Perfumado
![Page 12: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/12.jpg)
ESSE NÃO É O NARUTO
IE come cola!
![Page 13: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/13.jpg)
DIVERTIDO SEMPRE
2007
![Page 14: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/14.jpg)
O MELHOR NAVEGADOR
![Page 15: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/15.jpg)
W3C
World Wide Web Consortium
PadronizaçãoMenos o IE (come cola)
![Page 17: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/17.jpg)
HTML 4, XHTML, HTML5
● Html 4, CSS 2Maneiro mas limitado
● XhtmlSimilar a html mas mais bem formatado (não pegou)
● Html 5, CSS 3Maneirão
http://www.w3schools.com/
![Page 18: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/18.jpg)
HTMLn?
HTML5 não é uma alternativa é uma
evolução do HTML 4.
![Page 19: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/19.jpg)
MÃO NA MASSASeções
![Page 20: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/20.jpg)
DOCTYPE
HTML 5 (Maneiro)<!DOCTYPE html>
HTML 4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
![Page 21: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/21.jpg)
ESTRUTURA
<!DOCTYPE html><html>
<head><title>Título</title>
</head><body>
Conteúdo</body>
</html>
![Page 22: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/22.jpg)
INDEX.HTML
● Nome do arquivo principal index.html● Servidores web reconhecem
automáticamente● Segredo do sucesso: Identação
![Page 23: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/23.jpg)
DIV
● Define uma divizão, seção ou bloco do documento.
● Normalmente usado como agrupador.● Trabalha relacionado com formatação CSS.● Por padrão é um quebrador de linha display:
block.
![Page 24: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/24.jpg)
<!DOCTYPE html><html><head><title>Título</title>
</head><body><div>Conteúdo</div>
</body></html>
![Page 25: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/25.jpg)
ESTILOS
<div style="color: white; background-color: red; font-size: 20px;">Conteúdo</div>
![Page 26: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/26.jpg)
QUE FEIO! ISSO NÃO SE FAZ!
Estilos inline são feios e bobos!
![Page 27: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/27.jpg)
MAIN.CSS
● Outra camada● Minusculas sempre.● Sem acentuação● Nomes curtos e com significado● qualquer_coisa.css● De preferência somente um arquivo de css.● Evitar requisições
![Page 28: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/28.jpg)
CONTEUDO CSS
.main{color: white;background-color: red;font-size:20px;
}
![Page 29: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/29.jpg)
CLASSES COM CLASSE
Não usar:● mainDiv● redDiv● right
Usar:● main● principal● secundaria
SIGNIFICADOOBJETIVO
SEMÂNTICA
![Page 30: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/30.jpg)
UNINDO HTML E CSS
.. <title>Título</title><link rel="stylesheet" href="
main.css" type="text/css" media="all"></head><body><div class="main">
Conteúdo</div>...
![Page 31: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/31.jpg)
SPAN
● Muito similar a div, mas não é um bloco.● Sem display:block;● Normalmente utilizado para diferenciar uma
parte do texto visualmente.
<span>Outro conteúdo</span>
Mais a frente discutiremos a parte do display.
![Page 32: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/32.jpg)
DIFERENÇA SPAN/DIV
![Page 33: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/33.jpg)
SEÇÕES HTML 5Principalmente utilizadas para SEO. Comportamanto semelhante a div.
header Cabeçalho
footer Rodapé
section Seção qualquer
article Um artigo.
aside Sidebar, menu lateral
details Detalhes que podem ser escondidos ou mostrados
dialog Diálogo/popup.
summary Cabeçalho para details.
nav Navegação, engloba links. Normalmente usado para o menu principal.
![Page 34: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/34.jpg)
SUPORTAR O COME COLACSS:
header, nav, article, footer, address { display: block; }Javascript (depois, depois...):document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
![Page 35: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/35.jpg)
![Page 36: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/36.jpg)
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
![Page 37: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/37.jpg)
NA PRÁTICA
● As diferentes seções não são tão diferentes assim.
● São mais usadas para organização e semantica.
● Uma página organizada é aumenta a “manutenibilidade”, ou seja capacitade de manutenção.
● Uma página com boa semântica permite que o motor dos buscadores façam uma melhor interpretação da página.
![Page 38: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/38.jpg)
Elementos básicosCabeçalhos, parágrafos e muito mais.
![Page 39: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/39.jpg)
HEADING
Cabeçalhos. Títulos.
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
H’s são legais.
![Page 40: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/40.jpg)
Nãooooooo!
![Page 41: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/41.jpg)
Nãoooooooooooooooooooooo!
12 px de diferença! Maldito seja User Agent Style sheet! Eu mal consigo ver seus movimentos!
![Page 42: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/42.jpg)
YES!
![Page 43: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/43.jpg)
CSS Reseth1 {
font-size: 32px;margin: 20px 0;line-height:34px;
}
h2 {font-size: 24px;margin: 20px 0;line-height:26px;
}
h3 {font-size: 20px;margin: 20px 0;line-height:22px;
}
h4 {font-size: 16px;margin: 20px 0;line-height:18px;
}
h5 {font-size: 12px;margin: 20px 0;line-height:14px;
}
h6 {font-size: 11px;margin: 20px 0;line-height:12px;
}
![Page 45: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/45.jpg)
Parágrafo (p)
<p>Conteúdo <span>dentro</span> do parágrado<p>
Usado normalmente para colocar conteúdo textual como notícias e posts de blogs.
Pode receber filhotes.
Tem o mesmo problema de alinhamento dos h’s
![Page 46: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/46.jpg)
Artigo ( article, hr, br)
Passível de uso em conjunto com article e h’s, formando uma boa estrutura para um post.
<article>
<h1>Título muito interessante</h1>
<p>Conteúdo cheio de showdebolise!</p>
<hr>
<p>Conteúdo de outro parágrado.<p>
</article>
![Page 47: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/47.jpg)
Comentário
<!-- Este é um comentário não serve para quase nada.-->
● Utilizado somente para código● Browser ignora● Utilizado para destacar autor● Pegadinhas (vaga de emprego)● Uso não recomendado pelo pagespeed.● Utilize comentários na linguagem do
servidor.
![Page 48: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/48.jpg)
Formatação<p><b>Bold text</b></p>
<p><code>Computer code</code></p>
<p><em>Emphasized text</em></p>
<p><i>Italic text</i></p>
<p><kbd>Keyboard input</kbd> </p>
<p><pre>Preformatted text</pre></p>
<p><small>Smaller text</small></p>
<p><strong>Important text</strong></p>
<p><abbr> (abbreviation)</abbr></p>
<p><address> (contact information)</address></p>
<p><bdo> (text direction)</bdo></p>
<p><blockquote> (a section quoted from another source)</blockquote></p>
<p><cite> (title of a work)</cite></p>
<p><del> (deleted text)</del></p>
<p><ins> (inserted text)</ins></p>
<p><sub> (subscripted text)</sub></p>
<p><sup> (superscripted text)</sup></p>
![Page 49: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/49.jpg)
Links
Crie um novo arquivo chamado listas.html<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
</head>
<body>
<h1>Listas</h1>
</body>
</html>
![Page 50: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/50.jpg)
Links
<nav>
<a href="">Home</a> |
<a href="listas.html">Listas</a> |
<a href="pasta/">Pasta</a> |
<a href="http://www.google.com.br">Google</a>
<a href="#article">Artigo</a>
</nav>
![Page 51: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/51.jpg)
Links attributos
rel:alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag
Target:
_blank_parent
_self_top
framename
Media:Type: mime
![Page 52: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/52.jpg)
ListasUl, Ol, li
![Page 53: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/53.jpg)
Não ordenada
<ul><li>Café</li><li>Xá</li><li>Leite</li>
</ul>
![Page 54: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/54.jpg)
Ordenada
<h2>Ordenada</h2><ol reversed="reversed" start="5"> <li>Café</li> <li>Xá</li> <li>Leite</li></ol>
![Page 55: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/55.jpg)
Ordenada com tipo
<h2>Ordenada com tipo</h2><ol type="I”><li>Café</li><li>Xá</li><li>Leite</li><li>Refrigerante</li><li>Cerveja</li>
</ol>
1) 1 - Número2) A - Alfabética3) a - Alfa. minus.4) I - Romano5) i - Romano minus.
![Page 56: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/56.jpg)
Lista descrição
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Dl: Lista descriçãoDt: define termo/nomeDd: descreve termo/nome
![Page 57: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/57.jpg)
Estilos em listas
Este slide ainda não está pronto.Volte semana que vem.
![Page 58: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/58.jpg)
Tabelastr, td, th, summary ...
![Page 59: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/59.jpg)
Tabelas<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
![Page 60: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/60.jpg)
Estilos em tabela
<table style="border: solid 1px black;">
<table border=1>
table{
border-collapse :collapse}
![Page 61: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/61.jpg)
Tag Descrição
table Tabela
th Cabeçalho (table header)
tr Linha (table row)
td Célula ( cell)
caption Título
colgroup Grupo de colunas
col Usado com colgroup
thead Cabeçalho da tabela
tbody Corpo da tabela
tfoot Rodapé da tabela
sumary Sumário (não é renderizado)
Tabelas : tags
![Page 62: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/62.jpg)
FormuláriosInput , select, data-list e muito mais!
![Page 63: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/63.jpg)
Input
<form><label for=nome><input id="nome" name="nome"
placeholder="Preencha o nome"></form>
![Page 64: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/64.jpg)
Tipostextcolordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek
![Page 65: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/65.jpg)
Select
<label for="comida">Bebidas </label><select id="comida" name="comida">
<option value="1">Arroz</option><option value="2">Feijão</option><option value="3">Massa</option><option value="4"
selected>Aipim</option><option value="5">Nabo</option>
</select>
![Page 66: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/66.jpg)
Datalist
<label for="browser">Navegadores </label> <input list="browsers" name="browser"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>
![Page 67: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/67.jpg)
Checkbox
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
![Page 68: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/68.jpg)
Radiobutton
<input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female
![Page 69: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/69.jpg)
Imagem
<img src="images/metalSlug.png" alt="Metalslug">
![Page 70: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/70.jpg)
SVG
<img src="images/rabisco.svg" alt="Rabisco">
<svg><rect width="90" height="60" x="
50" y="0" fill="#00FFCC" stroke="#FF0000" stroke-width="3"/></svg>
![Page 71: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/71.jpg)
Canvas
<p><canvas id="figura" width="300" height="300"></canvas></p><p><button onClick="desenhar()">Desenhar</button></p>
![Page 72: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/72.jpg)
Canvas
<script> function desenhar() { var desenho = document.getElementById('figura'); var context = desenho.getContext('2d'); context.fillStyle = '#00FFFF' context.fillRect(50,50,200, 200); }</script>
![Page 74: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/74.jpg)
Google maps
https://www.google.com.br/maps/
![Page 75: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/75.jpg)
Ferramentas para qualidade
● Page speedhttps://developers.google.com/speed/pagespeed/
● Yslowhttps://addons.mozilla.org/pt-br/firefox/addon/yslow/
● w3c validatorhttp://validator.w3.org/
● ...
![Page 76: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/76.jpg)
CSSSeletores e estilos
![Page 77: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/77.jpg)
CSS
:hover:active:before:afterfloat:leftdisplay:blockposition:absolute
![Page 78: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/78.jpg)
JAVASCRIPTMake cool things!
![Page 79: Desenvolvimento para a web usando html e css](https://reader034.vdocuments.net/reader034/viewer/2022051514/5495c10cac795925288b50e5/html5/thumbnails/79.jpg)
FIM?Obrigado!