Web Design > HTML (aula 1)

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


Versão 5.0 - HTML5<!DOCTYPE html>

Web Design


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

Let's code it!

Web Design

Web DesignMissão #1Website pessoal

Web Design: Website pessoal


"O" Wireframe


Deixando mais simples...


Uma pequena PAUSApara 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: idClasse ou classes do elemento: class Atributos de estilo Definição de estilo do elemento: style


Colocando em prática...

Web Design > HTML (aula 1)

Documents

Transcript of Web Design > HTML (aula 1)