HTML ESADE - Programação WEB I

8/7/2019 HTML ESADE - Programação WEB I

http://slidepdf.com/reader/full/html-esade-programacao-web-i 1/15

HIPER TEXTMARKUP

LANGUAGELINGUAGEMDE MARCAÇÃO DEHIPERTEXTO

Programação WEB I

ESADE ± Laureate International Universities



<html>

<head>

<title> New Page 1</title>

</head>

<body>

 Curso de HTML.

</body>

</html>

As páginas html possuem

extensão htmhtm ou htmlhtml.

Os comandos são chamados

de TAGS, que são marcaspadrão usadas para indicar

ao Browser os comandos a

serem executados.

As tags são digitadas entre

³<³ e ³>´.

Geralmente são utilizadas

em pares ³< >´ e < / >´.



- <html> e </html>

representam o início e o

final da página e englobam

todos os comandos (head e

body).- <head> e </head> contém

os parâmetros de

configuração da página, o

título, keywords,

identificação, ...

- <body> e </body> é o

próprio conteúdo da

página.

<html>

<head>


</head>

<body>

 Curso de HTML.

</body>

</html>



 : negrito : itálico

 : sublinhado

 : formatação da fonte

face = ³nome da fonte´ (p.e. arial, ...)

size = tamanho (1, 2, 3, ...)color = "#000080´ (hexa)

<html>

<head>


</head>

<body>

 Curso de

HTML.

</body>

</html>

Observar as tags </> fechando cada formato.



 e : quebra de páginaalign = alinhamento (center, left ou right)

<html>

<head>

<title>New Page 1</title>

</head>

<body>

 Curso deHTML.

 Turma

2004/2

 Disciplina:

Didática 

Professor Paulo

</body>

</html>



<html>

<head>

<title> Listas</title>

</head>

<body>

 Tópicos

<ul>

<li> Tópico 1</li>

<li>

 Tópico 2</li>

</ul>

</body>

</html>

<ul> </ul>: listas não numeradas

<li> </li>: tópicos da lista Tópicos�Tópico 1�Tópico 2



<html>

<head>

<title> Listas</title>

</head>

<body>

 Tópicos

<ol>

<li> Tópico 1</li>

<li>

 Tópico 2</li>

</ol>

</body>

</html>

<ol> </ol>: listas numeradas

<li> </li>: tópicos da lista Tópicos1. Tópico 12. Tópico 2



<html>

<head>

<title>Barras Horizontais</title>

</head>

<body>

 Barras

<hr size="4">

 Texto da página

</body>

</html>

<hr />: insere uma barra horizontal na página

* Esta TAG não possui par. Ela abre e fecha na mesma TAG



<html>

<head>

<title>Imagens</title>

</head>

<body>

<img src = ³rv001.jpg´ align = ³left´ width = ³109´ height = ³122´>

</body>

</html>

<img src = ³imagem.jpg´:insere uma imagem com largura e alturadefinido. A largura, altura, por exemplo, sãoos parâmetros da imagem.

Os parâmetros mudam conforma o tipo de objeto





Background

Arquivo de som da página (com ou sem loop)Imagem de fundo

Cor do fundo

Cor do textoCores dos links

<html>

<head>

<title>Formato da Página</title>

<bgsound src=³musica.mid" loop="1">

</head>

<body background="snoopy.jpg" bgcolor="#FFFFFF" text="#00FF00³ link="#333333" vlink="#000000"

alink="#000000">

Esta página contém uma figura de fundo

</body>

</html>



TabelaLinhas

Colunas

<html>

<head>

<title>Tabelas</title>

</head>

<body >

Esta página contém uma tabela

<table border = ³2´ cellspacing = ³1´ cellpading = ³2´>

<tr>

<td align = center valign = top>Nome</td>

<td align = left>Endereço</td>

</tr>

<tr>

<td>Programação WEB I</td>

<td>[email protected]</td>

</tr>

</table>

</body>

</html>

Border: espessura da bordaCellspacing = espaço entre ascélulasCellpading = distância do texto atéa borda da célulaAlign = alinhamento horizontal dotexto na célula (center, left ou right)Valign = alinhamento vertical na

célula (top, middle ou botton)



COLSPAN: Mesclar colunas em uma única célula

<html>

<head>

<title>T

abelas</title></head>

<body >


<table>

<tr>

<td colspan = 2>Nome e e-mail</td>

</tr>

<tr>

<td>Programação WEB I</td>

<td>[email protected]</td>

</tr>

</table>

</body>

</html>

*Nowrap: evita quebra de linha<html>

<head>

<title>Tabelas</title>

</head>

<body >


<table border = ³2´>

<tr>

<td>Nome</td>

<td>Cidade</td>

</tr>

<tr>

<td>Luiz</td>

<td rowspan = 3>Porto Alegre</td>

</tr>

<tr>

<td>Mario Quintana</td>

</tr><tr>

<td>Elis Regina</td>

</tr>

</table>

</body>

</html>

ROWSPAN: Mesclar linhas em uma única célula



Bordas Alinhamento Cores

Identificação Espaçamento

Tamanho Rowspan

Colspan

Interatividade



� <div> e </div>

� Divisão do documento em blocos

� Identificação, posição, eventos e estilos

� Contém outros elementos de um documento

� * SPAN são usadas para criar blocos emuma linha

Documents

HTML ESADE - Programação WEB I