html esade - programação web i
Post on 08-Apr-2018
221 Views
Preview:
TRANSCRIPT
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
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 2/15
<html>
<head>
<title> New Page 1</title>
</head>
<body>
<p> Curso de HTML.</p>
</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 < / >´.
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 3/15
- <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>
<title> New Page 1</title>
</head>
<body>
<p> Curso de HTML.</p>
</body>
</html>
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 4/15
<b> </b>: negrito<i> </i>: itálico
<u> </u>: sublinhado
<font> </font>: formatação da fonte
face = ³nome da fonte´ (p.e. arial, ...)
size = tamanho (1, 2, 3, ...)color = "#000080´ (hexa)
<html>
<head>
<title> New Page 1</title>
</head>
<body>
<p align="center"><b><i><u><font face="Verdana" size="2" color="#000080"> Curso de
HTML.</font></b></i></u></p>
</body>
</html>
Observar as tags </> fechando cada formato.
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 5/15
<p> e </p>: quebra de páginaalign = alinhamento (center, left ou right)
<html>
<head>
<title>New Page 1</title>
</head>
<body>
<p align="center"> <font face="Verdana" size="2" color="#000080">Curso deHTML.</font></p>
<p align="left"> <font face="Verdana" size="2" color="#000080">Turma
2004/2</font></p>
<p align="right"> <font face="Verdana" size="2" color="#000080">Disciplina:
Didática<br>
Professor Paulo</font></p>
</body>
</html>
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 6/15
<html>
<head>
<title> Listas</title>
</head>
<body>
<p><b><font face="Verdana" size="2" color="#000080"> Tópicos</font></b></p>
<ul>
<li> <p align="left"><font face="Verdana" size="2" color="#000080"> Tópico 1</font></li>
<li>
<p align="left"><font face="Verdana" size="2" color="#000080"> Tópico 2</font></li>
</ul>
</body>
</html>
<ul> </ul>: listas não numeradas
<li> </li>: tópicos da lista Tópicos�Tópico 1�Tópico 2
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 7/15
<html>
<head>
<title> Listas</title>
</head>
<body>
<p><b><font face="Verdana" size="2" color="#000080"> Tópicos</font></b></p>
<ol>
<li> <p align="left"><font face="Verdana" size="2" color="#000080"> Tópico 1</font></li>
<li>
<p align="left"><font face="Verdana" size="2" color="#000080"> Tópico 2</font></li>
</ol>
</body>
</html>
<ol> </ol>: listas numeradas
<li> </li>: tópicos da lista Tópicos1. Tópico 12. Tópico 2
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 8/15
<html>
<head>
<title>Barras Horizontais</title>
</head>
<body>
<p><font face="Verdana" size="2" color="#000080"> Barras</font></p>
<hr size="4">
<p><font face="Verdana" size="2" color="#000080"> Texto da página</font></p>
</body>
</html>
<hr />: insere uma barra horizontal na página
* Esta TAG não possui par. Ela abre e fecha na mesma TAG
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 9/15
<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
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 10/15
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 11/15
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">
<p>Esta página contém uma figura de fundo</p>
</body>
</html>
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 12/15
TabelaLinhas
Colunas
<html>
<head>
<title>Tabelas</title>
</head>
<body >
<p>Esta página contém uma tabela</p>
<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>usuario@esade.edu.br</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)
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 13/15
COLSPAN: Mesclar colunas em uma única célula
<html>
<head>
<title>T
abelas</title></head>
<body >
<p>Esta página contém uma tabela</p>
<table>
<tr>
<td colspan = 2>Nome e e-mail</td>
</tr>
<tr>
<td>Programação WEB I</td>
<td>usuario@esade.edu.br</td>
</tr>
</table>
</body>
</html>
*Nowrap: evita quebra de linha<html>
<head>
<title>Tabelas</title>
</head>
<body >
<p>Esta página contém uma tabela</p>
<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
8/7/2019 HTML ESADE - Programação WEB I
http://slidepdf.com/reader/full/html-esade-programacao-web-i 14/15
Bordas Alinhamento Cores
Identificação Espaçamento
Tamanho Rowspan
Colspan
Interatividade
top related