4- Comandos HTML - part2

•

ESTÁCIO

0

Railson

18/06/2015

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Comandos HTML
1
Titao Yamamoto – titaoyamamoto.com/estacio
1
Cabeçalhos
2
<body>
	<h1>Cabeçalho nivel 1</h1>
	<h2>Cabeçalho nivel 2</h2>
	<h3>Cabeçalho nivel 3</h3>
	<h4>Cabeçalho nivel 4</h4>
	<h5>Cabeçalho nivel 5</h5>
	<h6>Cabeçalho nivel 6</h6>
</body>
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Vínculos – Links
<body>
	<h1>Sites Favoritos</h1>
	<!-- Cria 3 hyperlinks de texto -->
	<p><a href=“http://www.deitel.com”>Deitel</a></p>
	<p><a href=“www.prehall.com”>Prentice Hall</a></p>
	<p><a href=“www.portal.estacio.br”></a></p>
	<p><a href=“mailto:titaoyamamoto@gmail.com”> </a></p>
</body>
3
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Tabelas
Tabelas são definidas com a tag <table>
Tabelas são divididas em linhas (table rows) com a tag <tr>
As linhas da tabela são divididas em dados da tabela (table data) com a tag <td>
A linha da tabela também pode ser dividido em títulos da tabela (table headings) com a tag <th> 
4
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Possuem três seções distintas – cabeçalho, corpo e rodapé
Cabeçalho:
<table>
	<thead>
		<tr>
			<th>Fruta </th>
			<th>Preço</th>
		</tr>
	</thead>
</table>
5
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Tabelas
Corpo:
<tbody>
	<tr>
		<td>Maça </td>
		<td>R$0,25</td>
	</tr>
</tbody>
Rodapé:
<tfoot>
	<tr>
		<th>Total </th>
		<th>R$ 3,75</th>
	</tr>
</tfoot>
6
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Mesclagem de células
Pode ser necessário fazer a mesclagem de células, para isto, use o comando:
Rowspan = “n”, onde n é o número de linhas que você quer mesclar
Colspan = “n”, onde n é o numero de colunas que você necessita mesclar.
Ambos podem ser usados em qualquer parte da tabela.
7
Titao Yamamoto – titaoyamamoto.com/estacio
<body>
<h2>Cell that spans two columns:</h2>
<table border="1”>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
8
Titao Yamamoto – titaoyamamoto.com/estacio
<body>
<h2>Cell that spans two rows:</h2>
<table>
 <tr>
 <th>First Name:</th>
 <td>Bill Gates</td>
 </tr>
 <tr>
 <th rowspan="2">Telephone:</th>
 <td>555 77 854</td>
 </tr>
 <tr>
 <td>555 77 855</td>
 </tr>
</table>
</body>
9
Titao Yamamoto – titaoyamamoto.com/estacio
Exercício
10
Titao Yamamoto – titaoyamamoto.com/estacio
<body>
<table border="1”>
 <tr>
 <th rowspan="2"><img src="http://i.imgur.com/rcFafBQ.png?1"/></th>
 <th colspan="4"> Comparação camelo </th>
 </tr>
 <tr>
 <td>Número de cocundas</td>
 <td>Região indígena</td>
 <td>Cospe?</td>
 <td>Produz Lã?</td>
 </tr>
11
Titao Yamamoto – titaoyamamoto.com/estacio
<tr>
 <td>Camelo</td>
 <td>02</td>
 <td>Africa/Asia</td>
 <td>Sim</td>
 <td>Sim</td>
</tr>
<tr>
 <td>Lhama</td>
 <td>01</td>
 <td>Montanhas dos Andes</td>
 <td>Sim</td>
 <td>Sim</td>
</tr>
</table>
</body>
12
Titao Yamamoto – titaoyamamoto.com/estacio