Curso de HTML Curso de HTML 15 - criando um template
Mais uma vídeo aula do curso de HTML. Neste tutorial vamos estar praticando tudo o que aprendemos até agora com es te curso gratuito. Hoje vamos estar aprendendo a criar a estrutura de um template somente utilizando o HTML, com imagens, tabelas links e etc. Veja o tutorial e confira.
Criando um template (em tabelas - tables) com o HTML:
Como já expliquei acima, iremos criar a estrutura de um site (template) utilizando somente o HTML nesta aula. Esta é uma aula pratica por isso não vamos aprender novas tags e sim como criar um template utilizando técnicas basílicas do HMTL e desvendando algumas curiosidades da tag <table>. Veja o vídeo abaixo e tire todas as suas duvidas. Recomendo também que você leia as informações adicionais abaixo do vídeo pois só assim não terá duvidas sobre nada do que ensinamos nesta vídeo aula do curso de HTML. Veja a aula:
Tags utilizadas nesta aula:
Abaixo vão as listas de todas as tags do HTML que utilizamos nesta vídeo aula com os sub parâmetros utilizados também. Qualquer duvida sobre as tags clique no link da aula e veja o vídeo tutorial de cada aula para melhor conhecimento das tags:
- Table - esta tag é nossa principal estrutura do template em HTML. Com ela podemos adicionar linhas (tag <tr>) e colunas (tag <td>) no template. Para a vídeo aula desta tag completa, veja a aula de HTML - tag Table.
- Img - Com esta tag adicionamos imagens em nosso template. Com esta tag é possível adicionar imagens de diversos formatos em uma pagina HTML. Se você não conhece esta tag, veja a nossa aula de imagens no HTML.
- A (ancor) - Utilizamos a tag acor <a> no template para adicionar links em imagens e no menu. Veja a nossa aula de links no HTML.
- Tags de formatação de texto - utilizamos diversas tags para formatar os textos em nosso template, para aprender veja a nossa aula de formatação de texto no HTML.
Template em HTML feito na aula de hoje:
Estarei disponibilizando o código fonte do template abaixo, porem recomendo que você baixe os arquivos do curso no link mais abaixo e compare com o seu código. Código fonte gerado nesta aula:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ultradicas - Template em HTML</title>
</head>
<body>
<table border="3px" width="1000px">
<th colspan="3"><a href="http://www.ultradicas.com" ><img src="/imagens/novo-endereo.png" alt="logo do ultra dicas" title="Logo" /></a></th>
<tr valign="top">
<td height="500px" width="20%">
<a href="http://www.ultradicas.com.br/">Tutoriais Blogger</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais Windows</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais SEO</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais Joomla</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais Photoshop</a><br />
<a href="http://www.ultradicas.com.br/">Curso de HTML</a><br />
<a href="http://www.ultradicas.com.br/">Dicas da internet</a><br />
</td>
<td height="500px">
<h1>Postagem do template HTML</h1>
<p>Aqui fica o texto...</p>
</td>
<td height="500px" width="20%">
<a href="http://www.ultradicas.com.br/">Tutoriais Blogger</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais Windows</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais SEO</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais Joomla</a><br />
<a href="http://www.ultradicas.com.br/">Tutoriais Photoshop</a><br />
<a href="http://www.ultradicas.com.br/">Curso de HTML</a><br />
<a href="http://www.ultradicas.com.br/">Dicas da internet</a><br />
</td>
</tr>
<tr>
<td colspan="3"><a href="http://www.ultradicas.com" ><img src="/imagens/logo1.png" align="left" /></a></td>
</tr>
</table>
</body>
</html>
Download dos arquivos do curso de HTML:
Esta postagem fica por aqui, espero ter ensinado e ajudado muitas pessoas. Até a próxima aula do curso de HTML!
- Não coloque links nos comentários ao menos que ajude a explicar alguma coisa.
-Não peça para adicionar no MSN.
Se seu comentário conter algum assunto impróprio não aceitarei também.