HTML Intro

Desenvolvimento web I
(X)HTML

CURSO DE EXTENSÃO 2012
IST-PETRÓPOLIS
L U I Z PA U L O - L P PJ U N I O R @ G M A I L . C O M

“If not now, when?
If not you, who?”
BY WA S P T EA M
FONTE: LIVRO HTML5 E CSS3
COM FARINHA E PIMENTA

Índice
 Introdução ao HTML
 Sintaxe do HTML

 Diferença entre o HTML e o XHTML

 Qual ferramenta utilizar?

 Estrutura básica do HTML

 Doctype

 Primeiro código

 Tags, tags e mais tags

Ist-Petrópolis - RJ [ Desenvolvimento web ] Luiz Paulo [ lppjunior@gmail.com ]

Recapitulando...


Solução, lembra?


Server-side x Client-side?


O que é HTML?

HYPERTEXT MARKUP LANGUAGE IS THE MAIN MARKUP
L A N G U A G E F O R D I S P L AY I N G W E B PA G E S A N D O T H E R
I N F O R M AT I O N T H AT C A N B E D I S P L AY E D I N A W E B
BROWSER.

Introdução ao HTML
 Foi criado na década de 80 por Tim Berners Lee
 Incompatibilidade entre browsers
 Estrutura Conteúdo
 É uma linguagem de MARCAÇÃO


Diferença HTML e XHTML
 HTML
 Padrão SGML
 Fechamento das tags não é obrigatória

 XHTML
 Padrão XML
 Sintaxe controlada
 Minúsculo na escrita de tags e atributos
 Mais rápida na interpretação

Mais detalhes:
http://aindaapensar.blogspot.com.br/2007/01/diferenas-html-vs-xhtml.html


Nem tudo são flores...
 O problema do HTML
 Limitação de elementos
 Tags predefinidas
 Pouca semântica
 Falta de qualificação de indexação
 Compreensão da informação

 Muitas tags caíram em desuso
 markee, dir, s, etc

 Solução proposta
 Web semântica ou Web3.0 para o futuro

 E para agora temos...


Webstantard
N Ã O FA Ç A S E U P R O J E T O D E Q U A L Q U E R M A N E I R A

FA Ç A D I R E I T O !
U T I L I Z E PA D R Õ E S !

Qual ferramenta utilizar?

B L O C O D E N O TA S

Mais controle em seu código


E o Dreamweaver?

E D ITO R W YS IW YG

É para os fracos!


Estrutura básica do HTML

D O C T Y P E , C H A R S E T, TA G S B Á S I C A S

Client-side
 Os 3 pilares do client-side
 URI - Uniform Resource Identifier

 HTTP - Hyper Text Transfer Protocol

 HTML – Hyper Text Markup Language

 As 3 camadas do client-side
 Informação

 Formatação

 Comportamento


Sintaxe HTML
 Sintaxe
 Endentação
 Aninhamento


DOCTYPE
 The <!DOCTYPE> declaration is not an HTML tag;
 It is an instruction to the web browser about what
version of HTML the page is written in;


Hello world em HTML


Referencias para seguir...
 Referencias
 http://www.htmldog.com/reference/htmltags/

 http://www.w3schools.com/html/

 http://www.w3schools.com/tags/default.asp

 http://www.html.net/tutorials/html/

 http://www.w3.org/MarkUp/

 http://htmldog.com/guides/htmlbeginner/

 http://cassiaferreiraj.files.wordpress.com/2012/08/html5-e-css3-
com-farinha-e-pimenta-diego-eis-e-elcio-ferreira.pdf
 Validação
 http://validator.w3.org/

 http://www.dasilva.org.br/


Tags HTML


Escape de caracteres


Tags, tags e mais tags
 h1, h2, h3, h4, h5, h6
 div, span, p
 br, hr
 strong, b, i, u, s, tt, sub, sup, big, small, em
 blockquote, cite, address, acronym, abbr
 ul, ol, li
 dl, dd, dt
 table, tr, th, td, thead, tbody, tfoot
 a, img
 pre, code


 meta, script, noscript, style, link
 object, param, map , area


 form
 fieldset
 legend
 label
 input (button, submit, clear)
 Input (text, password, checkbox, radio)
 select, option, optiongroup
 Textarea


Estrutura de layout

O Q U E D E V E M O S ( O U N Ã O ) FA Z E R . . .

CSSZenGarden


Errado


Correto


Lindo!


Dúvidas?

L U I Z PA U L O
L P PJ U N I O R . C O M
L P PJ U N I O R @ G M A I L . C O M

HTML Intro

Recommended

Recommended

More Related Content

Similar to HTML Intro

Similar to HTML Intro (20)

HTML Intro