Desenvolvimento para a web usando HTML e CSS

7 CCETEC Univates

Desenvolvimento para a web
usando HTML e CSS

Eduardo Bonfandini

TIPOS DE MAGIA NEGRA

1.
2.
3.
4.
5.

Html
Css
Javascript
Php
Mysql

HTML
HyperText Markup Language

Linguagem de marcação
Não é linguagem de programação

HTTP? URL?
● Hypertext transfer protocol:
http://meusite.com.br
HTTPS (HyperText Transfer Protocol Secure)

● Uniform resource locator:
http:// https:// ftp:// mailto:// telnet:// tel://

CSS
Cascade Style sheet

Definição visual
Deixa a web maneira

JAVASCRIPT
Javascript

Programação cliente
Deixa a web dinâmica

AJAX
Asynchronous Javascript and XML

O MAIS MANEIRO DE TODOS

http://jquery.com/

NÃO É JAVA

Alternativa do Netscape ao Vbscript (Morreu).
Lembra BEEEEEEEEEEEM de longe o Java por isso o nome.

LADO SERVIDOR
Papel Higiênico Perfumado

ESSE NÃO É O NARUTO

IE come cola!

W3C
World Wide Web Consortium

Padronização
Menos o IE (come cola)

VALE A PENA VALIDAR?
http://validator.w3.org/

HTML 4, XHTML, HTML5
● Html 4, CSS 2
Maneiro mas limitado

● Xhtml
Similar a html mas mais bem formatado (não pegou)

● Html 5, CSS 3
Maneirão

http://www.w3schools.com/

HTMLn?

HTML5 não é uma
alternativa é uma
evolução do HTML 4.

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

ESTRUTURA
<!DOCTYPE html>
<html>
<head>
<title>Título</title>
</head>
<body>
Conteúdo
</body>
</html>

INDEX.HTML

● Nome do arquivo principal index.html
● Servidores web reconhecem
automáticamente
● Segredo do sucesso: Identação

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.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Conteúdo</div>
</body>
</html>

ESTILOS

<div style="color:
white; backgroundcolor: red; font-size:
20px;">Conteúdo</div>

QUE FEIO! ISSO NÃO SE FAZ!

Estilos inline são feios e bobos!

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

CONTEUDO CSS
.main
{
color: white;
background-color: red;
font-size:20px;
}

CLASSES COM CLASSE
Não usar:
● mainDiv
● redDiv
● right
Usar:
● main
● principal
● secundaria

SIGNIFICADO
OBJETIVO
SEMÂNTICA

UNINDO HTML E CSS
..

<link rel="stylesheet" href="
main.css" type="text/css" media="
all">
</head>
<body>
<div class="main">
Conteúdo</div>...

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.

SEÇÕES HTML 5
Principalmente 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.

SUPORTAR O COME COLA
CSS:

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");

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/

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.

Elementos básicos
Cabeçalhos, parágrafos e muito mais.

HEADING
Cabeçalhos. Títulos.
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This

is
is
is
is
is
is

heading
heading
heading
heading
heading
heading
H’s são legais.

1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>

Nãoooooooooooooooooooooo!

12 px de diferença! Maldito seja User Agent Style sheet! Eu mal consigo ver seus movimentos!

CSS Reset
h1 {

h4 {
font-size: 32px;

font-size: 16px;

margin: 20px 0;

margin: 20px 0;

line-height:34px;

line-height:18px;

}

}

h2 {

h5 {
font-size: 24px;

font-size: 12px;

margin: 20px 0;

margin: 20px 0;

line-height:26px;

line-height:14px;

}

}

h3 {

h6 {
font-size: 20px;
margin: 20px 0;

margin: 20px 0;

line-height:22px;
}

font-size: 11px;
line-height:12px;
}

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

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>

Comentário

●
●
●
●
●
●

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.

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>

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>

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>

Links attributos
rel:

Target:

alternate
author
bookmark
help
license
next
nofollow
noreferrer

_blank
_parent
_self
_top
framename

prefetch
prev
search
tag

Media:
Type: mime

Não ordenada

<ul>
<li>Café</li>
<li>Xá</li>
<li>Leite</li>
</ul>

Ordenada
<h2>Ordenada</h2>
<ol reversed="reversed" start="5">
<li>Café</li>
<li>Xá</li>
<li>Leite</li>
</ol>

Ordenada com tipo
<h2>Ordenada com tipo</h2>
<ol type="I”>
<li>Café</li>
1) 1 - Número
<li>Xá</li>
2) A - Alfabética
<li>Leite</li>
3) a - Alfa. minus.
<li>Refrigerante</li>
4) I - Romano
5) i - Romano minus.
<li>Cerveja</li>
</ol>

Lista descrição
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Dl: Lista descrição
Dt: define termo/nome
Dd: descreve termo/nome

Estilos em listas

Este slide ainda não está pronto.
Volte semana que vem.

Tabelas
tr, td, th, summary ...

Tabelas
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

Estilos em tabela
<table style="border: solid 1px black;">
<table border=1>
table
{
border-collapse :collapse
}

Tabelas : tags
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)

Formulários
Input , select, data-list e muito mais!

Input
<form>
<label for=nome>
<input id="nome" name="nome"
placeholder="Preencha o nome">
</form>

Tipos
text
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

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>

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>

Checkbox
<input type="checkbox" name="
vehicle" value="Bike">I have
a bike<br>
<input type="checkbox" name="
vehicle" value="Car">I have a
car

Radiobutton
<input type="radio" name="
sex" value="male">Male<br>
<input type="radio" name="
sex" value="female">Female

Imagem
<img src="images/metalSlug.png"
alt="Metalslug">

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>

Canvas
<p>
<canvas id="figura" width="300" height="
300"></canvas>
</p>
<p>
<button onClick="desenhar()"
>Desenhar</button>
</p>

Canvas
<script>
function desenhar() {
var desenho =
document.
getElementById('figura');
var context = desenho.getContext('2d');
context.fillStyle = '#00FFFF'
context.fillRect(50,50,200, 200);
}
</script>

SketchFab (Canvas3d)

http://sketchfab.com/

Google maps

https://www.google.com.br/maps/

Ferramentas para qualidade
● Page speed
https://developers.google.com/speed/pagespeed/

● Yslow
https://addons.mozilla.org/pt-br/firefox/addon/yslow/

● w3c validator
http://validator.w3.org/
● ...

CSS
:hover
:active
:before
:after
float:left
display:block
position:absolute

Desenvolvimento para a web usando HTML e CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Desenvolvimento para a web usando HTML e CSS

Semelhante a Desenvolvimento para a web usando HTML e CSS (20)

Desenvolvimento para a web usando HTML e CSS