Hierarquia de Títulos - @Curso em Vídeo HTML5 e CSS3
380.45k views2913 WordsCopy TextShare
Curso em Vídeo
Você sabe como criar títulos em seu conteúdo HTML5? Sabe que os títulos possuem uma hierarquia dentr...
Video Transcript:
Já chegamos agora para discutir o assunto do Capítulo 7 do seu PDF que você encontra lá no nosso repositório de html vamos falar sobre hierarquias de títulos e E aí E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula no seu curso de html com CSS como ela não estava Guanabara como você vê todas as vezes aparecendo aqui em baixo e nós vamos falar agora sobre hierarquia de títulos que basicamente muita gente se enrola e nem é culpa das pessoas às vezes é culpa das pessoas que estão ensinando que tem gente que diz que H1 a letra grande A cada dois a letra menor H3 Calma já vou explicar o que ele está falando diretamente pelo computador e você vai entender efetivamente profissão os Hidden 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 tá 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 foi avançando você vai conhecendo algumas iniciativas e oportunidades que elas estão trazendo para você que a nossa Luna que não consegui e dessa vez eu vim aqui falar da Record que é uma organização social que tá fazendo 25 anos Oi Mônica eu tô 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 Record tá 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 Record Vai disponibilizar durante o andamento desse curso é só você apontar a câmera do seu celular para o código que tá aparecendo aqui na tela e Olimpo também vai estar disponível na descrição desse vídeo Obrigado recold pelo Patrocínio e pelo apoio constante em toda essa curso de HTML e CSS em muitos outros projetos do curso em vídeo que estão por vez só A vitória só antes de entrar em código antes de entrar em exercício vou te mostrar duas imagens olha só essa primeira imagem aqui ela é uma matéria de revista certo até utilizei ela no pdf essa outra imagem que eu vou abrir aqui ela é um índice de livro que também serve para exemplificar isso tudo é a índice de livro Você já viu né você provavelmente já leu algum livro A sua vida indica Qual é a página onde está determinado assunto né na revista a gente tem vários títulos Sem problema nenhum cetamina deve ter visto uma resume basicamente que acontece se você olhar esse daqui primeiro da revista você vai entender que a existem títulos né mas quando a gente tem aqui ó é o nosso título principal aqui é o título que chama logo a atenção quando você olha a matéria fala falta de sintonia é o assunto eu não tô nem ligando o que que tá falando sobre a matéria tudo mais dentro desse título principal dentro do assunto falta de sintonia nós temos alguns outros assuntos como por exemplo tem esse antes de agir também passa mais tempo com seu desafeto de pois saiba com quem está lidando e tem a objetividade e assim sucessivamente esses aqui são títulos que estão dentro são assuntos dentro de falta de sintonia Ficou claro outro exemplo que a gente tem aqui inclusive um exercício que a gente tem lá no repositório que o exercício sei se eu não me engano Qual o título principal desse livro se você analisou bem entendendo Portugal é o nosso título principal e eu tenho dois subtítulos eu vou marcar de azul aqui ó eu tenho introdução e eu tenho o ordenamento do território em Portugal lero lero tá então eu tenho dentro do meu título principal eu tenho dois subtítulos ou Continuar riscando aqui dentro de introdução Eu tenho quatro assuntos justificação da temática caráter excepcional do caso de estudo perguntas de partida objetivo de investigação metodologia de investigação dentro de metodologia de investigação eu tenho etapas de investigação e instrumentos de análise fonte sendo que tem níveis a mesma coisa aqui ó de o território nós tenhamos os instrumentos de gestão do território e dentro deles os instrumentos de planejamento territorial planeamento e os regimes territoriais especiais civil que existem níveis Pois é por isso é que é 1. 4 1. 4.
1. 4. 2 é subnível desse daqui Deu para entender né Eu acho que deu para a gente conseguir compreender aqui com esses riscos meio mal feitos a forma da hierarquia dos títulos É exatamente sobre isso que a gente vai conversar aqui durante as aulas de html os títulos eles têm ar Kia Eu Não Posso pular do nível 1 para o nível 3 ele é sempre assim ó vamos voltar ele para imagem esse aquele horrível um entendendo Portugal nível 2 a introdução e o ordenamento do território um nível 3 é dentro desse nível 2 eu tenho esses quatro dentro desse nível 2 Eu tenho esse cara esse é o nível 3 o verdinho Claro o verde escuro é um nível quatro porque ele tá dentro de metodologia da investigação deu para você entender quando eu falo sobre hierarquia de títulos a mesma coisa que na matéria eu tenho título principal e um dois três quatro bom então tem um nível 1 nível 2 não é porque você quer o título um depois de CO2 a posição o trem de fazer seu quadro Pois é o Sim nós não estamos falando de número do Título nós estamos falando do nível desse título e aqui ó Eu tenho quatro títulos do mesmo nível aquela de azulzinho Eu tenho dois do mesmo nível que a nível 2 esses quatro questão do nível 3 Esse aqui também do livro para isso aqui tá dentro de outro e eu longe Ficou claro aí para você se não ficou Claro Mas vamos fazer o seguinte Vamos abrir os nossos arquivos documentos e Estudos HTML e CSS exercícios nós paramos na aula anterior no Exercício quatro o exercício cinco criar um novo aqui não é o que a gente vai fazer porque os esse 005 a gente já deveria ter feito então esse só botar emoji então no capítulo anterior sem ter feito também o exercício cinco o que a gente vai fazer aqui é o exercício seis então hash 006 só para ficar com a mesma numeração lá do nosso repositório é o que a gente vai trabalhar botão direito Vamos abrir com o Cold e eu vou fazer o seguinte no Exercício 6 ou criar um novo arquivo o Whindersson.
HTML e nós vamos fazer o seguinte o primeiro criar o código padrão mudar aquela para português do Brasil mudar aqui para hierarquia ver títulos certo se você quiser dar uma praticada vem aqui no Exercício quatro vou copiar vou dar conta você nesse fase com aqui vou vir aqui no Exercício seis vou dar control V Já coloquei aqui bota renomear ele botão direito e renomear você pode colocar aqui ó fase com ponto Ico automaticamente ele já carregou aqui o Fábio com muito rico Você pode até visualizar aqui ó tá vendo mas o que eu tenho que fazer acima do Tarot o digitar link fabrico e já estou com o nome do arquivo faz com que já tá pronto aqui o que eu vou fazer o seguinte ó vou deixar aqui embaixo essa hierarquia e nós vamos exatamente montar essa hierarquia dentro desse meu documento HTML perto e esse é o nosso exercício Agora vamos começar o seguinte dentro do nosso título as temos entendendo Portugal é o título principal tomou usar o head em 1h um dia e já montou o Edinho tá lá entendendo Portugal certo dentro do interior de Portugal tendo introdução introdução é um subtítulo de internet em Portugal correto ele é um H2 introdução outra coisa que eu tenho também como H2 é esse cara aqui ó eu vou daqui H2 ordenamento do território em Portugal digitar tudo não tá acho que deu para entender é isso aqui instrumentos É Altos certo vamos ver isso aqui como é que tá funcionando vou vir aqui clica duas vezes e tá lá o meu meu arquivo tá vendo aqui ó deixa eu abrir aqui embaixo também entendendo Portugal meu tecido principal H1 tem gente que ensina isso aqui é não H1 é letra grande não carga um é título de nível 1 é o seu título principal da sua página coisa que tem uma discussão lá dentro do teu PDF sobre a coisa de ter somente um ao ter mais de uma dá um tem uma lenda e que conta muita gente fala muita gente República cara não toda a página só pode ser um H1 a verdade não eu botei lá no pdf um link para um engenheiro do Google dia não tem nada a ver com isso é isso aí é lenda não entra nessa não perto então você pode ser mais geral no nosso caso a gente também tem um dentro de introdução eu tenho esses quatro que a justificação caráter perguntas e metodologia então a dentro de introdução eu vou ter um H3 que é justificativa justificação na matemática tenho também outro H3 que é caráter excepcional de alguma coisa depois H3 perguntas de partida nota que eu não tô fazendo H1 H2 H3 H4 h5 não é o nível 1 nível 2 nível 3 tá aqui tá tudo separado nível e o último a gás 3 também método logia de investigação e quem tá fazendo aqui não é só atualizar tá vendo dentro de introdução vê se não fica mais falado para você agora tá vendo eu tenho aqui a exatamente aquilo que eu tenho anteriormente certo eu tenho aqui um H2 que é o os instrumentos aqui dentro da h2oh tem uma gata O que é um ordenamento do território vou digitar tudo não tá lá tá vendo Então eu tenho esse ordenamento do território eu ver se eu fiz certo aqui eu acho que é o mesmo texto né não é os instrumentos de gestão hoje a gestão beleza tá lá tá vendo agora sim eu tenho ele todo bonitinho exatamente como tá Tá faltando o que tá faltando esses dois títulos aqui E esse dois títulos aqui de baixo e geralmente sakineh para criar índice né na verdade isso aqui é para criar o seu texto mesmo eu tenho aqui introdução justificativa e vai ter um parágrafo caráter também uma mais parágrafo é perguntas e partido Deu para entender para você cresce parar de simulados até precisa fazer uma gracinha aqui ó é um parágrafo existe um parágrafo designer usa muito que é o y Lauren é só você digitar minúscula aqui ó Lauren para você ver só pedir a ele o r cliquem Lauren ele tem um parágrafo de y em lá para mim tá se eu atualizar aqui ó trabalho vai ter lá a justificação da temática tem um parágrafo caráter excepcional depois do caráter excepcional vai ter um parágrafo né é um gerador de blá-blá-blá pesquisa já era mais de um Sem problema nenhum perguntas de partida mas um parágrafo Loren metodologia da investigação aqui na imagem ele tem 12 subtítulos que o etapa de investigação Então tá aqui ó H quatro etapas de investigação e o H4 aqui também instrumentos de análise depois de ch4 vou criar um parágrafo também com Lauren verdade você vai botar o texto né o a pessoa para botar o texto mas enquanto está testando você pode fazer o Loren aqui que simplifica o negócio quando você abrir tá lá perto então você tá vendo aqui ó aqui dentro de introdução eu tenho justificação caráter perguntas e metodologia dentro e metodologias em etapas e Instrumentos a mesma coisa você pode fazer aqui para baixo que essa parte de baixo comeu né fora eu tenho aqui ó 22 subtítulos de jogar pra cá vamos fazer fazer tudo bonitinho depois dentro desse agave três ovos instrumentos eu tenho os instrumentos de planejamento territorial e os regimes territoriais campeonato A4 aqui os instrumentos de planeamento vou botar um parágrafo dentro com Lauren apresente ficar e outra H4 oi oi Gislene territoriais e um barato importante dizer ó esses H vão DH um até HC está no entrar numa de votar H7 h8 h9 é até 6 anos você pode botar num texto seis níveis tu vai falar agora na barra mas esse meu texto tiver mais do que seis níveis Provavelmente você tá contexto muito complexo e que ninguém vai ler né Então tá aqui a organização olha isso isso daqui ó seria um exemplo de índice de um livro perto do artigo e tá aqui o artigo escrito feito em HTML com semântica com significado relação de semântica mais para frente mas é a que faz um sentido esse aqui seu título principal esse aqui seu subtítulo esse aqui é o subtítulo desse subtítulo perto então a gente tem níveis exatamente como a gente exemplificou aqui beleza então treinar na sua casa dá uma olhada nesse código aqui uma ficar pausando nós pode pausar o vídeo para instalar pra falar nossa mas foi muita coisa cara gerei um monte de Loren Y já vi um monte de texto e sem sentido Aqui foram 30 linhas de código mas já se acostuma que nossa exemplos né os nossos exercícios podem ficar grande mais para frente que você tá aprendendo aquela site logo vai Criar documentos muito maiores do que esses daqui que eu fiz tranquilo mas o mais importante que eu quero que você tenha entendido esses níveis aqui ó o quê que é H1 o que que é h2oh que qh3 é muito mais do que só tamanho da letra tá não vai dar não quero ler um pouquinho mais larga um e se eu tiver maior do que há um ano vão bota h0 não existe já dá um até h-6 Combinado então nunca mais deixa ninguém falar e nunca mais falhar não h-6 é um texto bem pequenininho texto bem pequenininho a gente vai ver na próxima aula inclusive Como fazer um texto pequenininho mas h-6 é um nível 6 você nunca vai pular outro vai pagar um H2 H3 você nunca vai fazer com que a introdução seja H3 porque ela é subtítulo joga um ah não mas introdução ficou com o texto muito grande cara não é isso que você vai fazer você não vai mudar isso aqui pagar três para ele um texto desse tamanho aqui depois em CSS a gente vai configurar o tamanho no título não fique preocupado ou preocupada com isso a gente vai conseguir colocar o tamanho que você precisa inclusive maior do que esse ou um pouco menor do que esse é um pouco maior do que você vai conseguir configurar o tamanho o que importa agora é que você entenda A Hierarquia que é o assunto Desse nosso Capítulo muitos alunos sempre entrar em contato comigo dizendo assim armas Guanabara às vezes sai um vídeo novo Augusto novo não consegui vídeo eu não sou avisado pelo Youtube tem algum outro jeito de você me avisar pois agora tem é só você acessar t.