Primeiras aulas do curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação

HTML5 e CSS3 parte 2: Posicionamento, listas e navegação

Criando uma nova página - Introdução

Bem-vindo ao segundo módulo de HTML CSS. Eu sou o Pedro Marins e vou te guiar nessa jornada de aprendizado. No primeiro módulo, a gente viu o básico do HTML CSS, como a gente inicia uma página, como a gente inicia esse conteúdo.

A gente viu estruturas as primárias, por exemplo, de texto e de título, de como mexer com imagens, como formatar o título, botar negrito, botar itálico, mudar a cor. A gente viu ainda como criar uma lista, como dividir um conteúdo numa página, brincamos com o CSS, como apresentar esses elementos.

Nesse segundo curso, vamos evoluir o nosso conhecimento, criando uma segunda página, a página dos produtos. Nessa página, vamos ter um cabeçalho complexo com imagem e item de menu. Esse menu são links que vão te levar para outras páginas.

Vamos ter ainda uma lista de itens de produtos, cada um desses itens, extremante complexo, com título, imagem e texto de descrição. Por fim, um rodapé com uma imagem e um texto sobre Copyright.

Essa página, ela ainda é um pouco interativa, quando eu clico em algum dos itens de menu, eu navego pelo meu site ou quando passo o mouse por cima dos itens, eles se comportam de maneira diferente.

O objetivo desse curso é te levar para um novo nível de aprendizado, entendendo muito mais sobre HTML, muito mais sobre CSS e como todos esses elementos se juntam para montar uma página melhor. O curso foi pensado para que seja feito módulo a módulo, micro exercícios e microelementos.

A gente vai apresentar um problema, resolver esse problema e você vai poder fazer um exercício para saber se gravou aquilo ali corretamente. Ao fim desse curso, você vai ter essa página exatamente igual, completa do jeito que a nossa está e vai poder ter a capacidade de criar outras páginas maravilhosas.

Esse é o segundo módulo do curso de HTML e CSS e eu tenho certeza que você vai aprender muito nessa jornada e para começar, a gente vai criar uma nova página, revisar o que a gente já viu e cair dentro do conteúdo. Te espero no próximo vídeo.

Criando uma nova página - Revisão

Esse curso começa com a gente revisando a primeira parte, o primeiro módulo inteiro. No primeiro módulo, a gente construiu a página inicial da Barbearia Alura, a gente entendeu como é que funciona o HTML, como é que funciona o CSS, a gente começou a mexer nas tags, a gente criou conteúdo, criou imagem, mexeu em cores, mexeu em espaçamento.

E brevemente para revisarmos o que a gente já fez, a gente tem aqui a nossa página principal da Barbearia Alura com título, com essa imagem de fundo, com esse bloco inteiro de conteúdo, onde temos aqui mais um subtítulo, onde temos um pedaço de conteúdo em negrito, temos também um pedaço de conteúdo e negrito, temos uma lista de elementos complexa e temos ainda mais um subtítulo e mais uma imagem.

Sendo que, nesse caso, está um do lado do outro. Por fim, ainda temos cores diferentes, ainda temos cores de texto, cores de fundo e se a gente voltar no sublime text, a ferramenta que a gente usou para editar todo o código do primeiro módulo, a gente consegue revisar um pouco da nossa página.

A gente usou as tags para estruturar o nosso conteúdo, tag do doctype, a tag do HTML, tag do head, tag do body. A gente usou tags para passar informação para a nossa página, como por exemplo, o tipo de dicionário que a gente estava usando, o título que iria aparecer naquela página, a folha de estilo que a gente está referenciando.

No nosso conteúdo, a gente ainda dividiu ele em algumas partes, o cabeçalho com o título dentro, a grande imagem, que é a parte do banner do nosso site, a nossa parte de conteúdo, que é uma divisão no nosso site que tem um subtítulo, que tem parágrafos de texto.

Ainda temos mais uma segunda divisão, que é a parte dos benefícios, onde botamos lado a lado a nossa lista e aquela imagem. Isso é todo o HTML que a gente criou, todas as tags que a gente usou, as tags de título, tag de parágrafo, de divisão, de cabeçalho, as tags estruturais, a tag de imagem.

Já no CSS, a gente viu diversos itens, a gente viu, por exemplo, como a gente marca uma tag, como a gente marca o identificador, como a gente marca uma classe.

E a partir do elemento que a gente selecionou do HTML, a gente pode criar estilos para ele, a gente pode mexer no tamanho do elemento, como a largura, a gente pode mexer na cor de fundo, no espaçamento interno com o padding, no espaçamento externo com a margem, a gente mexeu no alinhamento de texto, no tamanho de fonte, na cor de texto, na cor de fundo.

A gente mexeu, inclusive, em como esse elemento aparecia visualmente. Por fim, resumindo tudo, a gente criou uma primeira página bem completa, agora a gente quer evoluir o nosso site e para evoluir o nosso site, a gente vai começar uma segunda página, mas isso é assunto para o próximo vídeo. Te vejo lá.

Criando uma nova página - Nova página

Vamos começar a página nova, esse curso inteiro vai ser para montarmos a página dos produtos, se formos no exemplo aqui, a página dos produtos tem um grande cabeçalho, tem o logo da Barbearia Alura, tem uma lista de links aqui, onde eu vou para a página inicial, para a página de contato.

Eu tenho uma outra lista que são os produtos aqui, corte de cabelo, corte de barba e corte de cabelo mais barba e eu tenho o rodapé aqui, com um outro logo diferente e um texto sobre os Copyrights da barbearia. Para fazermos essa página, nós vamos começar um documento do zero, começar um novo arquivo HTML.

Na estrutura do nosso site, cada página é um arquivo HTML, na estrutura de qualquer projeto, cada página diferente é um novo arquivo HTML, portanto, se vocês veem um site que tem mil páginas diferentes, eles tem mil arquivos HTML diferentes, lógico que quando o site é muito grande, existem formas de se lhe dar com isso.

Por enquanto, a gente vai mexer com uma página só, a página dos produtos, nós não vamos mexer mais na página inicial, no nosso index, a gente vai voltar nela no final do módulo.

E aí, para a gente começar uma nova página, a gente precisa criar um novo arquivo, para criar um novo arquivo, no Sublime Text, a gente pode ir “Ctrl + N” ou “Command + M”, se você está no Mac. Esse novo arquivo, a gente vai salvar ele com o nome de produtos.html.

Essa vai ser a nossa nova página, no Sublime Text, a gente não precisa mais ter nenhum índice, nem o Style CSS aberto, só a página do produto e para começar uma nova página HTML, a gente vai reforçar tudo o que a gente viu no primeiro módulo. Como que a gente cria então a estrutura para o HTML?

Não sei se vocês já esqueceram, mas vamos relembrar. A primeira coisa que a gente tem na nossa página é a tag doctype. A tag doctype serve para dizermos para o navegador qual a versão do HTML que a gente está usando e aqui, a gente vai a propriedade HTML (pure), que é sempre a última versão disponível do HTML.

Aqui dentro, a gente vai abrir a tag HTML e vai fechar a tag HTML, essa é a tag que vai envolver tudo da nossa página e aí, aqui dentro, a gente tem duas divisões, a primeira é a cabeça do arquivo e a segunda é o corpo do arquivo. A cabeça do arquivo a gente chama de head, que também vai ser fechada aqui.

E o corpo do arquivo, a gente chama de body e só para reforçar a divisão dos dois, no head são as informações que eu vou passar para o meu navegador e no body são as informações que eu quero exibir na página. Com essa divisão, a gente já consegue botar alguns detalhes a mais nessa página.

[03:2[] Dentro do head, a gente tem algumas coisas específicas que a gente tem que declarar, a primeira delas é o dicionário que a gente está usando. Então, para isso, a gente vai botar a tag meta, com a definição charset UTF 8, que é o dicionário que a gente usa para a nossa língua e a maioria das línguas ocidentais.

Além disso, a gente vai botar a tag title, que é o título da página que aparece na aba do navegador e a gente vai botar aqui: Produtos – Barbearia Alura, fechando aqui a tag title. Com isso, a gente já tem tudo o que a gente precisa para começar a nossa página.

Aproveitando que a gente já está aqui, vamos criar também o arquivo da folha de estilo e para criar o arquivo da folha de estilo, a gente vai abrir um arquivo diferente, “Ctrl + n” e vai salvar esse arquivo como produtos.css.

Já que a gente já tem o arquivo CSS criado, a gente pode fazer o link entre o nosso HTML, com uma relação chamada stylesheet, que é a folha de estilo e o endereço: produtos.css. Essa é a nossa tag de chamada do arquivo CSS. Com isso, a gente completa o início da nossa página.

A partir de agora, já que a gente já definiu essa estrutura, é só começar o conteúdo e a gente vai fazer isso no próximo vídeo.

Sobre o curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação

O curso HTML5 e CSS3 parte 2: Posicionamento, listas e navegação possui 110 minutos de vídeos, em um total de 61 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana