Chegamos aqui ao último vídeo do capítulo 14, onde a gente está falando sobre fontes. Olá, tudo bem com você? Seja bem-vindo, seja bem-vinda a mais um vídeo aqui do seu curso de HTML e CSS.
E como eu acabei de falar ali na abertura, esse é o último vídeo do capítulo 14, capítulo esse, que falou sobre fontes, sobre famílias tipográficas. sobre tipografia, eu te ensinei como você entender uma fonte, como classificar uma fonte e como usar uma fonte no seu site, espero sinceramente que você tenha gostado, também ensinei a ir a um site e olhar as fontes dele, inclusive com uma extensão para poder descobrir que fontes são essas, enfim, está bem caprichado esse capítulo, a gente teve bastante vídeo aí para complementar o material em PDF. Então, espero que você esteja anotando tudo direitinho, porque ainda tem mais uma coisa para você anotar, que é...
O uso de alinhamentos. Vem comigo para o computador, que eu vou te mostrar sobre o que eu estou falando. Antes de dar continuidade a esse vídeo, eu tenho um recado bem rápido para te dar.
Como você já deve saber, esse curso de desenvolvimento web, que está caprichado por sinal, só está sendo possível graças ao apoio de algumas empresas queridas do meu coração. E aos poucos, conforme o curso for avançando, você vai conhecendo algumas iniciativas e oportunidades que elas estão trazendo para você, que é nosso aluno aqui no Curso em Vídeo. E dessa vez...
eu vim aqui falar da Recode, que é uma organização social que está fazendo 25 anos de vida no ano que eu estou gravando esse vídeo. E o seu objetivo principal é promover o que eles chamam de empoderamento digital. Eu ainda vou mostrar umas histórias bem emocionantes por aqui. Você não perde por esperar. E para você, que é nosso aluno do Curso em Vídeo, a Recode está trazendo uma série de cursos grátis de tecnologia que vão deixar você mais preparado ou preparada para entrar no mercado de trabalho.
E para ter acesso a esses cursos e outras oportunidades que a Recode vai disponibilizar durante o andamento desse curso, é só você apontar a câmera do seu celular para o código que está aparecendo aqui na tela. O link também vai estar disponível na descrição desse vídeo. Obrigado, Recode, pelo patrocínio e pelo apoio constante em todo esse curso de HTML e CSS e em muitos outros projetos do Curso em Vídeo que estão por vir. Então, já estou aqui e vamos fazer o seguinte, olha só, esse exercício.
estudos, HTML, exercícios, eu vou colocar dentro da 17, porque ficou meio fora de ordem aqui no material provavelmente você deve ter percebido isso, então vou aqui no exercício 17, cliquei com o botão direito mandei abrir com Chrome, também vou abrir aqui a pasta, eu vou criar o fonte02 aqui para a gente poder trabalhar então, criei um documento novo, vou chamar de fonte02.html, nós vamos fazer um teste aqui documento base está sendo criado, ptbr, vamos falar sobre alinhamentos Muito simples, olha só. Começar com um h1, tipos de alinhamento. Aí eu vou botar aqui um h2, subtítulo e um parágrafo que eu vou criar um loren 3 vezes. Loren, Loren, Loren. Só para ficar um...
Nossa, mas eu fiz Loren. Ele não deixa? Tá, deixou. Então, criei o Loren 3 vezes aqui.
Vou abrir esse fonte 02 no meu navegador. Vou arrumar aqui bonitinho a nossa tela, também já aprendemos como fazer isso. Beleza, está aqui o meu texto. Basicamente, eu vou botar o seguinte, três tipos de alinhamento que a gente tem. Alinhamento à esquerda, à direita e centralizado.
Antigamente, a gente tinha aqui uma tag que se chamava center e tudo que você botava aqui no meio, teste, ele ficava centralizado. O teste ficou no meio. Pronto, Guanabara, já ensinou a centralizar.
Só que olha só, ficou vermelho aqui. Isso aqui é uma tag que está obsoleta, então não se usa mais tag obsoleta, assim como nós vimos lá nas cores, a gente não usa mais, por exemplo, bgcolor aqui, black, e não significa que porque ficou black, vou botar blue aqui, não é porque ficou azul aqui que está funcionando, que está certo, ficou vermelhinho, está obsoleto, não se usa mais, a gente faz por CSS. E como é que eu faço o alinhamento?
Por exemplo, o parágrafo geralmente tem um alinhamento justificado, eu vou fazer o seguinte aqui. vamos criar um estilo local e nesse estilo vou criar o body, já que a gente está trabalhando com fonte vamos criar aqui um short hand, lembrando a ordem, primeiro o estilo, se a gente não vai botar nada eu não vou botar nem estilo, nem peso, vou botar o peso normal, vou botar o tamanho 16 pixels e vou botar a fonte, vou botar aqui arial, verdana e serif, a gente já aprendeu a fazer isso, já está lá essa coisa se você perceber, tá tudo bem tudo alinhado à esquerda. Aqui está alinhado à esquerda, aqui está alinhado à esquerda, aqui está alinhado à esquerda também.
Então, basicamente, se você não fizer nada, já está alinhado à esquerda. Você pode forçar, dizer assim, o padrão de text-align, que é a minha propriedade, vai ser left, que é a esquerda. Não vai mudar nada. Eu simplesmente disse que vai se manter. Agora, você pode fazer com que, por exemplo, o seu h1 tenha um text-align center.
Ele vai ficar centralizado. Lembra? Ah, mas o h1 faz parte do body.
O que vale é o último a ser considerado, a ser configurado, que foi o center. Posso fazer com que meu h2 tenha um text align, que é right, por exemplo, para ficar alinhado à direita. Está vendo? Está centralizado, está alinhado à direita aqui. E o texto normalmente tem o alinhamento dos dois lados, à esquerda e à direita, que é o que a gente chama de justificado.
Então o p vai ter um text align. que é justify. Uma outra coisa, eu vou adicionar aqui coisa que eu não ensinei, justifi ficou alinhado à esquerda e alinhado à direita, como eu fiquei aqui, como eu mexi na lateral, eu tenho aqui Tudo bonitinho. Independente do tamanho do texto, você tem os alinhamentos funcionando sem problema nenhum. Uma coisa que eu não coloquei no material é isso aqui.
Existe uma propriedade chamada Text Indent. Esse Text Indent a gente usa muito na hora que a gente vai escrever redação, a gente aprende. Quando você começa um parágrafo, você pega e afasta um pouquinho o início do texto. Esse primeiro lórem deveria estar um pouquinho para dentro.
Isso se chama Text Indent. Se você quiser, você pode fazer um Text Indent por exemplo, de 20 pixels. Se você quiser pode até ser um pouco maior, 30 pixels. Então, o início do parágrafo tem uma indentação. Eu posso fazer isso, por exemplo, se eu criar outros parágrafos.
Vou criar outro parágrafo aqui com loren e vou criar um outro parágrafo aqui com dois loren. Os parágrafos vão estar justificados e vão estar alinhados para dentro graças a essa propriedade, essa declaração aqui foi o text-indent. Mas essa aula serviu para quê? TextAlign, Left, Center, Right e Justify.
Você viu isso no capítulo 14 também, está lá no meio do capítulo 14, por isso que a gente fez no exercício 17, não no 18, porque eu tinha pulado esse conceito aqui. E alinhamento de texto é muito importante. Por exemplo, o texto aqui está sem usar Center.
Eu não precisei dizer que o meu H1 é centralizado. Centralizar não significa que você dê um significado ao título. Então, Center não existe mais. Porque HTML agora é tudo semântico, tem que ter um significado.
Estar centralizado ou não é uma coisa de estética, é uma coisa de design. Se é uma coisa estética e de design, o que vai tratar é a folha de estilo, não o HTML. Então, por isso que eu coloquei essa declaração aqui em CSS.
Fechou? Nunca alinhe utilizando HTML, só alinhe utilizando CSS. Beleza? Tranquilo?
Combinado? E eu trouxe aqui mais um recado muito rápido, bem tranquilo e um pedido para você. Não sei se você sabe, mas além daqui do YouTube, eu também estou bem ativo lá nas minhas redes sociais, no meu Instagram e no Instagram do Curso em Vídeo.
Então, o que eu vim te pedir aqui nesse vídeo é bem simples. Gostou da aula? Está gostando do curso?
Segue a gente no Instagram. Vamos tornar essa comunidade muito maior e ajudar a divulgar o trabalho de quem produz conteúdo com tanto carinho e tanta dedicação. Então é isso meu querido, é isso minha querida, e a gente vai continuar estudando CSS no próximo capítulo porque é o seguinte, eu botei o H1 centralizado, o H2 à direita, e se eu quiser criar um terceiro H2, um outro H2, só que esse eu não quero à direita, eu quero à esquerda, dá para a gente fazer? Dá, mas para isso a gente tem que falar sobre identificadores e classes, e esse é o assunto do nosso próximo capítulo, beleza? Faça seus exercícios, faça seus testes, treina aí na sua casa e já já!
a gente volta com muito mais aulas, muito mais informações e muito mais comandos para você. Um grande abraço, boas práticas e a gente se vê já já.