Post on 25-Jun-2015
description
Web DesignQuando sonhos se tornam realidade...
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
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: Versão 4.0 - HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Versão 5.0 - HTML5<!DOCTYPE html>
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">
Versão 5.0 - HTML5<!DOCTYPE html> É o que iremos utilizar ;)
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
Mas... Chega e papinho e vamos ao que interessa!
Web Design
Let's code it!
Web Design
Web DesignMissão #1Website pessoal
Web Design: Website pessoal
Web Design: Website pessoal
"O" Wireframe
Web Design: Website pessoal
Deixando mais simples...
Web Design: Website pessoal
Uma pequena PAUSApara algumas coisas importantes!
Web Design: Website pessoal
Mais nunca se esqueça!
● Indentação no código;
● Nomes dos arquivos e pastas: sempre minúsculos, sem espaços e/ou acentos;
Web Design: Website pessoal
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)
Web Design: Website pessoal
Mais algumas tags... Negritos: <strong>Itálicos: <i>Linha horizontal: <hr />
Web Design: Website pessoal
E mais algumas tags... Definição de blocos: <div>Definição de conteúdo: <span> Comentários: <!-- comentário -->
Web Design: Website pessoal
Atributos Essenciais Identificador único e exclusivo: idClasse ou classes do elemento: class Atributos de estilo Definição de estilo do elemento: style
Web Design: Website pessoal
Colocando em prática...