Curso de HTML5 e CSS3 Responsivo Aula 02 Criando página inicial com estrutura em HTML5

Vamos conhecer em nossa primeira aula pratica a estrutura inicial de um arquivo HTML5, vamos começar aqui do zero a construção do nosso site completo em HTML5 e CSS3 Responsivo sem uso de ferramentas, ou seja, sem precisar baixar e utilizar nenhum programa como Notepad++, NetBeans IDE entre muitas outras ferramentas. No entanto mais a frente você conhecera essas ferramentas para lhe ajudar a desenvolver sistemas, no entanto como meu objetivo é ensinar do zero, então daremos início sem uso de ferramentas.

  • Notepad++ é um editor de texto e códigos fonte completo que suporta as mais diversas linguagens de programação e, sendo assim, uma ótima alternativa ao bloco de notas.
  • O NetBeans IDE é um ambiente de desenvolvimento integrado () gratuito e de código aberto para desenvolvedores de software nas linguagens Java, C, C++, PHP, Groovy, Ruby, entre outras. O IDE é executado em muitas plataformas, como Windows, Linux, Solaris e MacOS.

Precisamos fazer o download dos arquivos que vamos utilizar em nosso projeto, porém nada impede que você use seus próprios arquivos.

Link para download
http://www.bobrinha.com/exemplos/html5css3/projeto1.zip

Os arquivos para download estão no formato zip e devem ser descompactados no seu computador onde desejar, por se tratar de um site em HTML5 e CSS3 não é necessário um local especifico para salvar o site, na pasta site do projeto ao descompactar, você encontrara a pasta imagens com todas as imagens do site e a pasta uploads contendo as pastas com vídeo e áudios e na raiz do site o nosso favicon.

  • Favicons são aqueles pequenos ícones que ficam ao lado da barra de endereços de um navegador e servem, entre outras funções, para identificar rapidamente um site.

O HTML é baseado em rótulos, ou como são mais conhecidas, as tags. Elas são palavras envoltas por símbolos < para abrir, e > para fechar. A maioria das tags abertas precisa ser fechada, o que é feito com o símbolo /

Estrutura completa desenvolvida na video aula

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Curso de HTML5 e CSS3 Responsivo grátis</title>
    </head>
    <body>
        <h1>Melhores amigos para adoção esperando por você</h1>
        <p>A presença de um animal de estimação em casa traz <strong>felicidade e bem estar</strong>. Bolinhas de pelo alegres, fofinhas e cheias de vida, grandes ou pequenas, brancas, pretas, marrons ou amarelas, pulam e brincam o dia todo como se fossem brinquedinhos com energia infinita.</p>
    </body>
</html>

doctype
Doctype não é uma tag HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita, ele indica ao navegador qual a especificação de código utilizar.

head
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado.

lang
O atributo LANG é necessário para que os buscadores saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

charset
Charset metatag é responsável por chavear qual tabela de caracteres a página está utilizando

Ao terminar de escrever o código no bloco de notas, salve na pasta raiz do nosso projeto, ou seja, dentro da pasta site com o nome de index.html tornando assim a nossa pagina inicial

A página inicial, também identificada como “index” é a primeira página que você deve criar para o seu site, e também é a página de abertura do seu site.

Não se esqueça de salvar o arquivo usando a codificação UTF-8



Hospedagem Profissional de Sites