HTML

1
HTML
2

• DOCUMENTO BÁSICO
• lthtmlgt
• ltbodygt
• lth1gtMy First Weblt/h1gt
• ltpgtMy first paragraph.lt/pgt
• lt/bodygt
• lt/htmlgt

3

• TÍTULOS
• lth1gtThis is a headinglt/h1gt
• lth2gtThis is a headinglt/h2gt
• lth3gtThis is a headinglt/h3gt
• COMENTÁRIOS
• lt!-- This is a comment --gt

4

• PARÁGRAFO
• ltpgtThis is a paragraphlt/pgt
• ltpgtAnother paragraphlt/pgt
• LINK
• lta href "http//www.x.com"gt
• Este é um linklt/agt

5

• IMAGEM
• ltimg src"constr4.gif" width"144" height"50" /gt
  

6

• QUEBRA DE LINHA
• ltpgtThis isltbr /gta ltbr /gtgraph with line
  breakslt/pgt
• LINHA DIVISÓRIA
• lthr /gt

7

• FORMATO DE TEXTO
• ltbgt Negrito
• ltbiggt Aumenta
• ltemgt Ênfase 
• ltigt Itálico
• ltsmallgt Diminui
• ltstronggt Mais largo
• ltsubgt Subescrito
• ltsupgt Superescrito

8

• FORMATO DE TEXTO
• ltinsgt Defines inserted text
• ltdelgt Defines deleted text

9

• FORMATO DE TEXTO
• ltcodegtDefines computer code text
• ltkbdgt Defines keyboard text
• ltsampgtDefines sample computer code
• ltttgt Defines teletype text
• ltvargt Defines a variable
• ltpregt Defines preformatted text

10

• FORMATO DE TEXTO
• ltabbrgtDefines an abbreviation
• ltacronymgtDefines an acronym
• ltaddressgtDefines an address element
• ltbdogtDefines the text direction
• ltblockquotegtLong quotation
• ltqgtDefines a short quotation
• ltcitegtDefines a citation
• ltdfngtDefinition term

11

• ESTILOS
• style"background-coloryellow"
• style"font-size10px"
• style"font-familyTimes"
• style"text-aligncenter

12

• ESTILOS
• ltbody style"background-coloryellow"gt
• ltp style"font-familycourier new colorred
  font-size20px"gt
• lth1 style"text-aligncenter"gt

13

• LINKS
• lta href"http//plxisite.com/"target"_blank"gtVis
  it W3Schools!lt/agt
• lta name"label"gtcontentlt/agt
• lta href"label"gtcontentlt/agt
• lta href"http//www.w3schools.com/html_tutorial.ht
  mtips"gtSeção da páginalt/agt

14

• IMAGENS
• ltimg src"boat.gif" alt"Big Boat"gt
• ltimggtDefines an image
• ltmapgtDefines an image map
• ltareagtDefines a clickable area inside an image
  map

15

• TABELAS
• lttable border"1"gt
• lttrgt
• lttdgtrow 1, cell 1lt/tdgt
• lttdgtrow 1, cell 2lt/tdgt
• lt/trgt
• lttrgt
• lttdgtrow 2, cell 1lt/tdgt
• lttdgtrow 2, cell 2lt/tdgt
• lt/trgt
• lt/tablegt

16

• TABELAS
• lttablegtDefines a table
• ltthgtDefines a table header
• lttrgtDefines a table row
• lttdgtDefines a table cell

17

• TABELAS
• ltcaptiongtDefines a table caption
• ltcolgroupgtDefines groups of table columns
• ltcolgtDefines the attribute values for one or more
  columns in a table
• lttheadgtDefines a table head
• lttbodygtDefines a table body
• lttfootgtDefines a table footer

18

• MARCADORES
• ltulgt
• ltligtCoffeelt/ligt
• ltligtMilklt/ligt
• lt/ulgt
• ltolgt
• ltligtCoffeelt/ligt
• ltligtMilklt/ligt
• lt/olgt

19

• MARCADORES
• ltdlgt
• ltdtgtCoffeelt/dtgt
• ltddgtBlack hot drinklt/ddgt
• ltdtgtMilklt/dtgt
• ltddgtWhite cold drinklt/ddgt
• lt/dlgt

20

• FORMULÁRIO
• ltformgt
• ltinputgt
• ltinputgt
• lt/formgt

21

• CAMPO TEXTO
• ltformgt
• First name
• ltinput type"text" name"firstname"gt ltbrgt
• Last name
• ltinput type"text" name"lastname"gt
• lt/formgt

22

• RADIO
• ltformgt
• ltinput type"radio" name"sex" value"male"gt Male
  ltbrgt
• ltinput type"radio" name"sex" value"female"gt
  Female
• lt/formgt

23

• CHECKBOX
• ltformgt
• bike ltinput type"checkbox" name"vehicle"value"
  Bike"gt
• car ltinput type"checkbox" name"vehicle"
  value"Car"gt
• airplane ltinput type"checkbox" name"vehicle"
  value"Airplane"gt
• lt/formgt

24

• ENVIO DO FORMULÁRIO
• ltform
• name"input
• action"html_form_submit.asp
• method"get"gt
• Username ltinput type"text" name"user"gt
• ltinput type"submit" value"Submit"gt
• lt/formgt

25

• TAGS DOS FORMULÁRIOS
• ltformgtDefines a form for user input
• ltinputgtDefines an input field
• lttextareagtDefines a text-area (a multi-line text
  input control)
• ltlabelgtDefines a label to a control
• ltfieldsetgtDefines a fieldset

26

• TAGS DOS FORMULÁRIOS
• ltlegendgtDefines a caption for a fieldset
• ltselectgtDefines a selectable list (a drop-down
  box)
• ltoptgroupgtDefines an option group
• ltoptiongtDefines an option in the drop-down box
• ltbuttongtDefines a push buttonltisindexgtDeprecated.
  Use ltinputgt instead

27

• CORES
• http//www.w3schools.com/html/html_colors.asp
• http//www.w3schools.com/html/html_colornames.asp

28

• TAGS DE FRAMES
• ltframesetgtDefines a set of frames
• ltframegtDefines a sub window (a frame)
• ltnoframesgtDefines a noframe section for browsers
  that do not handle frames
• ltiframegtDefines an inline sub window (frame)

29

• FONTES
• ltpgt
• ltfont size"2"face"Verdana"gt
• This is a paragraph.
• lt/fontgt
• lt/pgt
• ltpgt
• ltfont size"3 face"Times"gt
• Another paragraph.lt/fontgt
• lt/pgt

30

• ATRIBUTOS DAS FONTES
• size"2
• face"Times"
• color"eeff00

31

• http//www.w3schools.com/html/html_whyusehtml4.asp
  

32

• VALIDAÇÃO HTML 4.01
• Strict
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt

33

• VALIDAÇÃO HTML 4.01
• Transitional
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"gt

34

• VALIDAÇÃO HTML 4.01
• Frameset
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Frameset//EN" "http//www.w3.org/TR/html4/frameset
  .dtd"gt

35

• ESTILO
• EXTERNA
• ltheadgt ltlink rel"stylesheet" type"text/css"
  href"mystyle.css"gt lt/headgt

36

• ESTILO
• INTERNA
• ltheadgt ltstyle type"text/css"gt body
  background-color red p margin-left 20px
  lt/stylegt lt/headgt

37

• ESTILO
• DE LINHA
• ltp style"color red margin-left 20px"gt This is
  a paragraph lt/pgt

38

• TAGS DE ESTILO
• ltstylegtDefines a style definition
• ltlinkgtDefines a resource reference
• ltdivgtDefines a section in a document
• ltspangtDefines a section in a document

39

• TAGS DE CABEÇÃLHOS
• ltheadgtDefines information about the document
• lttitlegtDefines the document title
• ltbasegtDefines a base URL for all the links on a
  page
• ltlinkgtDefines a resource reference
• ltmetagtDefines meta information
• lt!DOCTYPEgtDefines the document type. This tag
  goes before the lthtmlgt start tag.

40

• TAG META
• http//www.w3schools.com/html/html_meta.asp
• URL
• http//www.w3schools.com/html/html_url.asp

41

• SCRIPT
• ltscript type"text/javascript"gt
• document.write("Oi!")
• lt/scriptgt
• EVENTOS
• http//www.w3schools.com/html/html_eventattributes
  .asp

42

• FIM