Primeiras aulas do curso HTML5 e CSS3 parte 1: A primeira página da Web

HTML5 e CSS3 parte 1: A primeira página da Web

Marcação do primeiro texto - Introdução

Bem-vindo ao curso de HTML e CSS.

Meu nome é Pedro Marins e eu vou te guiar nessa jornada de aprendizado.

Neste curso, nós separamos a página da Barbearia Alura.

Nós vamos criar texto, imagem, blocos de conteúdo, listas de informações. Vamos aprender a mudar cor, posicionar elementos, mudar espaçamento. Enfim. Vamos mexer em tudo do HTML e CSS.

O curso foi separado em blocos incrementais, para que você possa fazer detalhe por detalhe, melhorando sua página.

No curso, vamos falar sobre HTML, CSS, tags, sobre cada uma das propriedades. Como usar cada uma dessas coisas.

Depois desse curso, você vai poder criar uma página igualzinha a essa ou qualquer outra página web.

Vem comigo que tenho certeza que você vai gostar.

Marcação do primeiro texto - Definindo texto

Vamos começar os nossos desafios, então.

Na aula anterior, apresentamos como seria a página desejada, o que vamos construir ao longo deste curso.

Nesta primeira aula, nós vamos trabalhar o texto, que é o miolo dessa página.

Vamos construir passo a passo esse conteúdo para que você consiga chegar na página desejada.

O primeiro passo vai ser trabalhar o parágrafo de texto e os títulos que existem na página.

Para isso, existe disponível um arquivo. Tem um link aí para você. É o arquivo “texto base”.

Se você abrir esse arquivo, temos o que seria um título e três parágrafos de texto. Usando o próprio Word, nós poderíamos aumentar o tamanho da fonte, deixar o texto em negrito, selecionar alguma coisa de destaque no nosso primeiro parágrafo, como por exemplo o nome “Barbearia Alura” e colocar em negrito. Poderíamos selecionar a missão da barbearia e deixar em itálico. Formatar esse texto de forma a dar destaque para algumas informações específicas.

Isso é a forma como trabalhamos essa apresentação do texto no Word.

Vamos pensar nisso agora para nossa página, no HTML.

A primeira coisa que precisamos fazer usando HTML é que não vamos usar o editor de texto do Word. Vamos usar um editor de código. Eu vou usar o Sublime Text 3. Vocês podem baixar ele na internet. É gratuito, disponível para todos os sistemas operacionais. Podem inclusive usar o Atom, que é outro editor de código, também gratuito e disponível para ser baixado. Ou o Visual Studio Code. Essas são as três recomendações para você usar durante este curso.

Eu vou usar o Sublime Text 3. Já tenho ele instalado. Assim que eu abrir o programa, ele me dá uma tela preta, onde vamos escrever todo o nosso código.

A primeira coisa que vou fazer é copiar aquele texto do Word e jogar no Sublime Text. Se vocês repararem, toda aquela formatação que nós criamos foi perdida. Este é um editor de código, e o negrito, tamanho de fonte, eles não vêm por padrão. Nós vamos chegar lá.

A primeira coisa que precisamos fazer no Sublime Text é salvar este arquivo, pode salvar em uma pasta sua ou na área de trabalho, com o nome index.html. O nome index é padrão para o arquivo principal da sua página. E como nesta página vamos criar somente um arquivo HTML, esse vai ser o nome do nosso arquivo durante todo o projeto. Vamos mexer nesse mesmo arquivo.

O .html, diferente do .doc para o Word, diz que este arquivo é uma página web. Salvando este arquivo index.html, se voltarmos na nossa área de trabalho, minimizar tudo, ele agora está com o ícone do Chrome para ser aberto. E se eu der dois cliques ele vai abrir direto no navegador. [04:00] Reparem o que ele fez com o nosso texto. Ele não botou quebra de linha, negrito, itálico, não aumentou a fonte.

Se voltarmos para o editor de código, vamos ver que o texto está simples, e não é isso exatamente o que temos, quando vemos uma página web. Uma página web tem o seu conteúdo com HTML. Nós usamos o HTML para fazer uma marcação desse texto. O HTML quer dizer “hyper text markup language”. Uma linguagem de marcação de texto.

Para marcarmos esse texto, precisamos usar o que são chamadas de “tags”. O formato de uma tag é um sinal de < um nome qualquer e um sinal de >. Isso é o que fecha uma tag. É o conteúdo que vamos ter para uma tag.

E que tags vamos usar neste texto? Por exemplo, na primeira linha temos um título. Vamos usar uma tag chamada “h”, de heading, que é o título do conteúdo.

Existem seis níveis de título. Para o primeiro título da página, vamos usar h1. Já na sequência, vamos ter o primeiro parágrafo de texto. O parágrafo de texto é marcado com a tag “p", de paragraph. Vamos fazer isso para o segundo e terceiro parágrafo também.

Mas... quando o HTML vai saber onde termina um h1 e começa um parágrafo? Por padrão, ele não vai saber. Nós precisamos informar isso para o nosso navegador. Como precisamos marcar o conteúdo, eu marco o início e o final. Marquei o início do título com h1 e para marcar o final, além do sinal de <, preciso colocar uma barra. Assim ele fecha o conteúdo.

Preciso também nos parágrafos botar p. Reparem que não estou digitando o p. Eu coloco a barra, e como estamos usando um editor de código, ele já faz o favor de complementar para mim o que está faltando.

Com isso aqui, nós já temos um título e três parágrafos.

Vamos salvar o arquivo. Ou, se você quiser ser mais rápido, ctrl+s. Vamos voltar no navegador e recarregar a página. Ou também com o atalho ctrl+r.

Reparem nas modificações que já foram feitas. Temos o conteúdo quebrando a linha, porque o marcamos com os parágrafos. Temos um título com uma fonte maior e em negrito, porque usamos a tag do h1, e já começamos a ter o nosso conteúdo estruturado.

Isso é o primeiro passo para modificar e estruturar nosso conteúdo.

Agora, vamos evoluir o conteúdo marcando todas as informações do meio do texto que colocamos em destaque.

Marcação do primeiro texto - Melhorando o texto

Na aula passada, configuramos basicamente o texto que vai ser o miolo da nossa página. Mas ele ainda não está perfeito. Já marcamos o conteúdo de um título, de parágrafos, já dividimos esses conteúdos, e hoje nossa página está assim. Um título com uma fonte grande e em negrito e parágrafos separados. Temos o título h1 e todos os parágrafos separados.

Só que na nossa página queremos dar destaque para algumas informações, por exemplo, o nome “Barbearia Alura”. Também queremos nossa missão em itálico. Vamos fazer esses detalhes passo a passo.

O primeiro deles é transformar Barbearia Alura em um texto de destaque. Geralmente, esse texto de destaque se apresenta em negrito, porque dá uma importância visual e semântica para o conteúdo.

Já falamos que as tags servem para marcar o início e o final do conteúdo. Logo, Barbearia Alura precisa estar com uma tag no início e uma no final. Essa tag que serve para marcar a importância de um conteúdo leva o nome “strong”. Em uma tradução, seria “forte”.

Quando usamos a palavra strong para marcar a tag e salvamos usando ctrl+s, voltamos para a página e recarregamos, imediatamente vemos que o conteúdo foi marcado com negrito. O negrito é só um detalhe visual sobre essa tag. Ela serve, novamente, para dar uma importância para aquela palavra, para aquele conteúdo.

Já que isso foi feito, vamos marcar a linha inteira com itálico. Queremos colocar ênfase no texto.

Para usar a tag da ênfase usamos em. Essa tag vai começar no início do texto, dentro do nosso parágrafo, e vai terminar no final do texto, também dentro do parágrafo. Essa é uma tag que vai marcar todo o conteúdo e transformar a linha inteira em itálico.

Se salvarmos, voltarmos para o navegador e recarregarmos a página, veremos que essa transformação já foi aplicada.

Para complementar, vamos marcar nossa missão com negrito, para dar ainda mais ênfase e marcar esse texto como muito importante.

Dentro, antes das aspas, vamos botar a tag strong. E depois das aspas, antes do ponto, vamos fechar a tag.

Voltando ao navegador essa aplicação já foi feita.

Resumindo, marcamos a Barbearia Alura como um conteúdo importante, transformamos a linha inteira para ter ênfase no nosso texto, e dentro da linha, ainda marcamos uma frase como importante. Vamos reparar que no HTML temos a tag parágrafo, dentro dela a tag de ênfase e dentro dela a tag de strong. Uma tag dentro da outra. Usamos o HTML dessa forma. Marcamos um conteúdo e se dentro tem um conteúdo menor que precisa de outra marcação, ele também é marcado, e dentro disso outro conteúdo ainda menor que precisa de mais uma marcação também recebe uma tag.

Usar uma tag dentro da outra não é problema. É como as coisas são feitas, e na leitura faz sentido quando você começa a entender todas essas tags.

Nosso próximo desafio é como expandir o texto, como ir além desses conteúdos. Mas para isso, vamos parar por aqui e se ver na próxima aula.

Sobre o curso HTML5 e CSS3 parte 1: A primeira página da Web

O curso HTML5 e CSS3 parte 1: A primeira página da Web possui 106 minutos de vídeos, em um total de 52 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!

  • 1184 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

  • 1184 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

  • 1184 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

  • 1184 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