HTML002

(1)

HTML

ALBERTO WILLIAN MASCARENNHAS http://sites.google.com/site/awmascarenhas/ [email protected]

(2)

(3)

HTML A LB ER TO WIL LIA N M AS CARE NHAS DOCUMENTO BÁSICO

Página básica

<html> <head> <title> Curso de HTML </title> </head> <body>

<h1>Minha Primeira página</h1> <p>Meu primeiro parágrafo.</p> </body>

(4)

DOCUMENTO BÁSICO

QUEBRA DE LINHA

<p>This is<br>a <br/>

graph with line breaks

</p>

HTML A LB ER TO WIL LIA N M AS CARE NHAS

(5)

PARÁGRAFO

<p>This is a paragraph</p> <p>Another paragraph</p>

LINK

<a href= "http://www.x.com"> Este é um link</a> HTML A LB ER TO WIL LIA N M AS CARE NHAS

(6)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS LINKS <a href="http://plxisite.com/" target="_blank">Visit W3Schools!</a> <a name="label">content</a> <a href="#label">content</a> <a href="http://www.w3schools.com/ html_tutorial.htm#tips">Seção da página</a>

(7)

(8)

LINHA DIVISÓRIA

<hr/>

(9)

IMAGEM

<img src="constr4.gif"

width="144" height="50" />

(10)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS

IMAGENS

<img src="boat.gif" alt="Big Boat">

<img>

Defines an image

<map>

Defines an image map

<area>

Defines a clickable area

(11)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS TABELAS <table border="1"> <tr> <td>linha 1, coluna 1</td> <td>linha 1, coluna 2</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> </tr> </table>

(12)

TABELAS

<table>

Defines a table

<th>

Defines a table header

<tr>

Defines a table row

(13)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS TABELAS

<caption> Defines a table caption

<colgroup> Defines groups of table

columns

<col> Defines the attribute

values for one or more columns in a table

<thead> Defines a table head

<tbody> Defines a table body

(14)

FONTES

<p> <font size="2"face="Verdana"> This is a paragraph. </font> </p> <p>

<font size="3“ face="Times"> Another paragraph.

</font> </p>

(15)

ATRIBUTOS DAS FONTES

size="2“

face="Times"

(16)

TÍTULOS

<h1>Estuda é importante</h1> <h2>Estuda é importante</h2> <h3>Estuda é importante</h3>

COMENTÁRIOS

 HTML A LB ER TO WIL LIA N M AS CARE NHAS

(17)

FORMATO DE TEXTO

<b>

Negrito

<big>

Aumenta

<em>

Ênfase

<i>

Itálico

<small>

Diminui

<strong>

Mais largo

<sub>

Subescrito

(18)

FORMATO DE TEXTO

<b>

Negrito

<big>

Aumenta

<em>

Ênfase

<i>

Itálico

<small>

Diminui

<strong>

Mais largo

<sub>

Subescrito

(19)

FORMATO DE TEXTO

<ins>

Defines inserted text

(20)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS FORMATO DE TEXTO

<code> Defines computer code text

<kbd> Defines keyboard text

<samp> Defines sample computer code

<tt> Defines teletype text

<var> Defines a variable

(21)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS FORMATO DE TEXTO

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines an address element

<bdo> Defines the text direction

<blockquote> Long quotation

<q> Defines a short quotation

<cite> Defines a citation

(22)

ESTILOS

style="background-color:yellow"

style="font-size:10px"

style="font-family:Times"

style="text-align:center“

(23)

ESTILOS

<body

style="background-color:yellow">

<p style="font-family:courier new;

color:red; font-size:20px">

<h1 style="text-align:center">

(24)

MARCADORES

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

(25)

MARCADORES

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

(26)

(27)

FORMULÁRIO

<form>

<input>

</form>

(28)

CAMPO TEXTO

<form>

First name:

<input type="text"

name="firstname"> <br>

Last name:

<input type="text"

name="lastname">

</form>

(29)

RADIO

<form>

<input type="radio"

name="sex" value="male"> Male

<br>

<input type="radio" name="sex"

value="female"> Female

(30)

CHECKBOX

<form>

bike: <input type="checkbox" name="vehicle"value="Bike"> car: <input type="checkbox" name="vehicle" value="Car">

airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>

(31)

ENVIO DO FORMULÁRIO

<form

name="input“

action="html_form_submit.asp“

method="get">

Username: <input type="text"

name="user">

<input type="submit"

value="Submit">

(32)

TAGS DOS FORMULÁRIOS

<form> Defines a form for user

input

<input> Defines an input field

<textarea> Defines a text-area (

a multi-line text input control)

<label> Defines a label to a

control

(33)

TAGS DOS FORMULÁRIOS

<legend> Defines a caption for a fieldset

<select> Defines a selectable list (a drop-down box)

<optgroup> Defines an option group

<option> Defines an option in the drop-down box

<button> Defines a push button <isindex>

Deprecated. Use <input>

(34)

CORES

http://www.w3schools.com/html

/html_colors.asp

http://www.w3schools.com/html

/html_colornames.asp

(35)

TAGS DE FRAMES

<frameset> Defines a set of frames

<frame> Defines a sub window

(a frame)

<noframes> Defines a noframe

section for browsers that do not handle

frames

<iframe> Defines an inline sub

(36)

DOCUMENTO BÁSICO HTML A LB ER TO WIL LIA N M AS CARE NHAS http://www.w3schools.com/ html/html_whyusehtml4.asp

(37)

VALIDAÇÃO HTML 4.01

Strict

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

(38)

VALIDAÇÃO HTML 4.01

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(39)

VALIDAÇÃO HTML 4.01

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset. dtd">

(40)

FIM

ALBERTO WILLIAN MASCARENNHAS http://sites.google.com/site/awmascarenhas/ [email protected]