Nesta aula iremos ensinar como criar uma estrutura básica em HTML, pois é a parte mais importante de todo o site. Nas próximas aulas, ensinaremos como estilizar seu site de uma maneira simples e com um Layout bem moderno e responsivo utilizando HTML e CSS puro.
Clique aqui para visualizar o site Completo.
Primeiro baixe um editor em HTML para criar sua pagina, segue alguns editores gratuitos:
›Notepad ++ Download
›Brackets Download
Neste tutorial iremos utilizar o Brackets, pois ele permite que você mexa simultaneamente em todo seu projeto . Após baixar e instalar o Brackets, abra e siga as instruções abaixo: 1º - vamos criar uma estrutura básica em HTML, começando pela tag html e head conforme o código 1:
<div id="tudo">: Para inserir o conteúdo do site
4º - Para finalizar, vamos criar o rodapé do site, onde será inserido as informações adicionais do site conforme o código 4 :
<footer>: Define o Rodapé do site.
OBS: Todas as tags devem ser fechadas ao finalizar o conteúdo da mesma.
Segue abaixo o Código completo:
Depois crie uma pasta e salve o arquivo com a extensão .html, exemplo: index.html. Clique aqui para ver o exemplo da pagina.
Como criar uma página em HTML - Parte 2 - Formatando com CSS
›Notepad ++ Download
›Brackets Download
Neste tutorial iremos utilizar o Brackets, pois ele permite que você mexa simultaneamente em todo seu projeto . Após baixar e instalar o Brackets, abra e siga as instruções abaixo: 1º - vamos criar uma estrutura básica em HTML, começando pela tag html e head conforme o código 1:
01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta charset="UTF-8"> 05 <title>Primeira Página em HTML</title> 06 </head>Código 1:
<html> - Tag para definir que é um documento html.
<head> - Tag onde será inserido todos os links externos, definir título , autor etc.
<meta charset="UTF-8"> - A tag meta deve estar sempre dentro da tag head e representa vários tipos de metadados. Metadados são informações que descrevem o conteúdo do seu arquivo. Ou seja: dados sobre seus dados.
<title> - Define o Título do seu site.
2º - Vamos criar o corpo do site inserindo a tag body, e dentro dela colocaremos o cabeçalho (header) conforme o código 2 :
07 <body> 08 <header> 09 <div class="container"> 10 <div class="box"> 11 <p>Olá HMTL<p> 12 </div> 13 </div> 14 </header>Código 2
<body> : Define o corpo do site.
<header>: Define o cabeçalho do site.
<div class="container">: Para inserir o conteúdo do cabeçalho;
<p> : Paragrafo.
3º - Criaremos uma div tudo, pois dentro dela iremos inserir todo o conteúdo do site, conforme o código 3 :
15 <div id="tudo"> 16 </div>Código 3
17 <footer> 18 </footer> 19 </body> 20 </html>Código 4
01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta charset="UTF-8"> 05 <title>Primeira Página em HTML</title> 06 </head> 07 <body> 08 <header> 09 <div class="container"> 10 <div class="box"> 11 <p>Olá HMTL<p> 12 </div> 13 </div> 14 </header> 15 <div id="tudo"> 16 </div> 17 <footer> 18 </footer> 19 </body> 20 </html>Código Completo
;){kind=link}
Sugestão de post
Muito Bom!
ResponderExcluir