Web Design > HTML (aula 1)

Web Design
Quando sonhos se tornam
realidade...

Web Design
Após as etapas de briefing, wireframe e
layout, chegou a hora de transformar tudo
em elementos interativos e interpretados via
browser.

Para isso, usamos as linguagens de
marcação (HTML), de estilização (CSS) e
para recursos avançados de lógica
(Javascript, CGI e outras).

Web Design
Estrutura básica de arquivo HTML:
<!DOCTYPE html>
<html>
<head>...</head>

<body>...</body>
</html>

Web Design
DOCTYPE

É a definição de como o browser
(navegador) irá interpretar o documento
HTML. A definição de varia de acordo com a
versão do HTML.

Veja a seguir alguns exemplos...

Web Design
Exemplos:

Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">

Web Design
Exemplos:

dtd">

Versão 5.0 - HTML5
<!DOCTYPE html>

Web Design
Exemplos:

dtd">

Versão 5.0 - HTML5
<!DOCTYPE html>
É o que iremos utilizar ;)

Web Design
As tags: <html>, <head> e <body> são
conhecidas como tags estruturais.

Web Design
Onde,

<html> - define que o arquivo é um
documento HTML;

<head> - é responsável por descrições,
definições e pré-carregamentos (é invisível
ao usuário);

Web Design
e,

<body> - é a parte visível a usuário. Leva
consigo o conteúdo e todas as demais
estruturas do website, além dos recursos
interativos.

Web Design
Mas... Chega e papinho e
vamos ao que interessa!

Web Design
Missão #1
Website pessoal

Web Design: Website pessoal
"O" Wireframe

Deixando mais simples...

Uma pequena PAUSA
para algumas coisas importantes!

Mais nunca se esqueça!

● Indentação no código;

● Nomes dos arquivos e pastas:
sempre minúsculos, sem espaços
e/ou acentos;

E algumas tags...

Titulos: <h1> ... <h6>
Links: <a>
Parágrafos: <p>
Imagens: <img />
Quebra de linha: <br />
Listas: <ul>,<li>(não ordenada),
<ol>(ordenada)

Mais algumas tags...

Negritos: <strong>
Itálicos: <i>
Linha horizontal: <hr />

E mais algumas tags...

Definição de blocos: <div>
Definição de conteúdo: <span>

Comentários:

Atributos Essenciais

Identificador único e exclusivo: id
Classe ou classes do elemento: class

Atributos de estilo

Definição de estilo do elemento: style

Colocando em prática...

Web Design > HTML (aula 1)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Web Design > HTML (aula 1)

Similar to Web Design > HTML (aula 1) (20)

More from Felipe Fernandes

More from Felipe Fernandes (12)

Web Design > HTML (aula 1)