2

Mini sistema de cadastro de pets (acesso através do localStorage) parte2

#HTML #JavaScript #CSS
Fernanda Oliveira
Fernanda Oliveira

#meuPrimeiroProjeto

#parte2 - Estrutura básica do nosso HTML


Então vamos lá para o início desse nosso projetinho =)


Criei uma estrutura e um layout simples para trabalharmos <3.

Inicialmente ele tem 2 páginas: a página inicial e a de cadastro dos pets. Ficou assim:

https://postimg.cc/gallery/9r1hnV5


** A logo é fictícia criada somente para trabalhar nesse projeto e as imagens usadas apenas para ilustração.



Inicialmente trabalharemos com:

- HTML5

Ele não é uma linguagem de programação, mas sim de marcação e podemos compará-lo a fundação, tijolos e colunas de uma casa que está em construção.


- CSS3

Esse já tem o propósito de dar estilos as páginas HTML e para dar um exemplo, podemos dizer que é o visual que a casa vai ganhar como: cor das paredes, organização dos móveis, decoração, etc... 


Para criar essas duas páginas, estou utilizando o Visual Studio Code mas você pode usar um editor da sua preferência (Sublime, Atom, Notepad++, entre outros).


Nesse artigo vou utilizar para estruturação inicial do nosso HTML as tags principais/básicas para criação do nosso documento. Estarei colocando informações breves para o artigo não ficar muito longo, mas qualquer dúvida pode perguntar.


Fica assim:


<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Mini Sistema para Cadastro de Pets</title>
</head>

<body>

  O conteúdo do nosso site vai entrar aqui.

</body>
</html>


Doctype

Ele vai informar para o navegador qual é o tipo do nosso documento, nesse caso, um HTML.


HTML

Aqui delimitamos a abertura da tag HTML e especificamos em qual língua nosso documento se encontra. É também a última tag de fechamento do nosso documento.


Head

Este é o cabeçalho do documento, sendo que as informações que ficam dentro dessa tag não aparecem na nossa página de forma visível, pelo fato de serem instruções ou até mesmo seção para inclusão de links criando ponte para arquivos como CSS, javaScript, entre outros.


Meta

A tag meta pode ser utilizada para assuntos referentes a trabalhos com SEO – rankeamento de páginas – mas nesse caso estamos utilizando o UTF-8 onde sua função é manter corretamente a acentuação das palavras evitando certos problemas.


Title

Aqui criamos um título para a página que estamos trabalhando e ele vai aparecer na aba do navegador.


Body

Entre essas duas tags é que vai entrar todo conteúdo do site.



Bom, no próximo artigo continuaremos a desenvolver nossa estrutura, através da criação das seções de conteúdo da página index. Também já estarei começando a compartilhar lá no gitHub, mas coloco o link aqui pra vocês ;-)


Até+

2
38

Comentários (2)

0
Fernanda Oliveira

Fernanda Oliveira

26/12/2020 22:27

Que bom que gostou Vitor :-)

1
V

Vitor Silva

26/12/2020 21:55

Ficou muito legal as páginas.

Futura dev full stack <3

Brasil