Semântica na HTML5 é importante - @Curso em Vídeo HTML5 e CSS3

nós começamos aqui as discussões sobre o nosso Capítulo 8 do material em PDF que tá disponível lá no nosso repositório público do curso de HTML5 E aí E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de HTML e nesse vídeo a gente vai falar sobre uma coisa muito importante do HTML5 principalmente que é o significado de semântica e nesse momento você pode ter ouvido já palavra semântica mas você não ouviu você tá as caras na semântica Que negócio é esse de cerâmica bem

eu fui no dicionário foi no dicionário Michaelis online vamos vamos vão comigo nele nessa aula aqui o recado que eu vou te passar é da Ruth Net mais uma vez e não dos recados anteriores eu falei que a Rússia Net Pode criar o seu próprio site para você seja ele um site uma loja uma plataforma de Educação a Distância e nos comentários do vídeo aparecer uma coisa do tipo ah mas eu já tenho um site mas eu queria levar para Rosinete porque ela especializada em WordPress ou porque em um outro recado eu falei e quem

é assinante de certos planos ganha cursos venha também ferramentas depoimento de muita gente entra em contato falando Poxa mas eu já tenho hospedagem um outro lugar e que o carro Chevette Isso é muito difícil pois o recado que ele vieram daqui para você não não é nada difícil você consegue fazer sozinho com alguns tutoriais que a gente tem mas se você não se sente apto ou apto a realizar esse processo você pode contar com atendimento da hostnet também E aí que pediu suporte deles vai realizar essa migração toda adaptação de um outro local para o

local da hostnet E aí você passa a ter acesso a todos esses recursos para você na sua hospedagem Então se por acaso você está hospedado em um outro local e que é migrar para rosto net até nisso os caras te ajuda vamos voltar a nossa aula normal né Hoje eu tô aqui no navegador eu vou botar aqui ó significado de semântica aqui ó você pode pesquisar aqui ó no só Português o Deep ya Brasil Escola significado teu dicio você vai ver vários eu botei aqui o seguinte ó semântica é significado outra coisa não sistema linguístico

componentes o sentido das palavras e da interpretação das sentenças e dos enunciados também deve com sematologia vou procurar aqui Micaele funcionário conhecido né aqui ó Michaelis online tem essa definição aqui que eu gosto muito o significado dos vocábulos por Oposição a sua forma está dizendo basicamente o que tem muito mais valor o significado do que as formas Beleza então fica com isso na sua cabeça isso porque antigamente no HTML 4 existiram algumas tags que não se falava muito sobre significados se falava mais sobre forma vou dar alguns exemplos aqui para você o quê o que

você faça é vai lá no teu na tua pasta de estudos fechar aqui documentos estudos HTML exercícios e vamos criar o exercício 7 botar aqui novo pasta 007 botão direito Vamos abrir com Cold agora olha só o que eu vou fazer eu vou deixar aqui eu vou fazer o seguinte ó vou criar um arquivo que eu vou chamar de html 4.01 existiu um HTML antigo quero o seguinte primeiro não tinha que ela pega no início minha sorte HTML dentro da tag HTML eu tinha rede e eu tinha Bari tá é assim que muita gente ainda

estuda hoje em dia 2020 que eu tô gravando esse vídeo tem um monte de gente estudando assim ainda aqui no reto a gente botava solteiro meu site HTML 4 e aí eu podia fazer coisas do tipo ah o H1 que a gente viu na aula anterior já existia 9444 de todo ruim não tá muita das tags Neto acabaram migrando para atender i5h um tem um significado título de primeiro nível por aqui um exemplo de site em HTML 4 Vamos colocar aqui um parágrafo e um Lauren lá que a gente já viu como fazer também basicamente

se você clicar aqui duas vezes e abrir ele abre Sem problema nenhum Tá mas ele já abriu pedindo tradução tava lá quando eu abro tivesse ele vai pedir de novo traduzir Porque ele pediu para traduzir porque ele não sabe o idioma lá mas é só você botar online não em HTML 4 não tinha nada disso tá outra coisa se você colocar aqui por exemplo exercício de site HTML 4 se for exercício aqui até funcionou tem alguns navegadores ele nem mostrarei aqui acentuação outra coisa que existia era isso aqui ó BG color igual a Blue Você

tá vendo que o próprio visual Studio code colocou em vermelho tá vendo esse você ler esse texto que tá aí ó background-color um documento esse método não está mais em conformidade isso é esse esse parâmetro deixa eu desistir ele tá vermelho aqui por um motivo ó tá com problema e se usa mais Aí tu vai para o Guanabara mas eu aprendi assim na minha escola e acabou de ficar azul e aí como é que você faz cara olha só existem algumas coisas que são as tags ever HTML5 of psoriasis tags Absolut thanks as tags obsoletas

que bonitinho você vai acessar esse site aqui ó que é o w3.org não vai nesses outros não tá esse w3.org é o w3c world wide web consortium então ele tá dizendo aqui ó sempre aparece aqui obsoletos features features ele te mostra aqui que algumas coisas pararam de funcionar por exemplo é a tag Big a tag Blink a tag Center por exemplo quero estragar um Centralizado antigamente a fazer assim ó Center e viu que já ficou vermelho ali também significa que ele também uma pega obsoleta tá vendo aqui ó vou parar o mouse em cima aquilo

que ele vai fazer ele vai mostrar alguma coisa nem mostrou é mas se você vier aqui ó ele provavelmente vai centralizar falar então tá funcionando vou usar a vontade não é bem assim se você tá utilizando HTML5 certas coisas você não pode mais utilizar essas tags que estão vermelhas aqui você não pode mais utilizar beleza Porque estão como não conformidades e não conformidades não significa que ela não existe mais tá significa que ela existe porém o w3c o órgão oficial de galera não usa mais isso tá funcionando por enquanto mas a qualquer momento vai parar

de funcionar então não adianta você aprender dessa maneira inclusive muito as tags que eu posso tá te ensinando hoje aqui daqui a três quatro dez anos podem se tornar obsoleta também você ficar sempre de olho e impérios obsoletas do HTML 5 outra coisa que você podia fazer era isso aqui ó vou criar um parágrafo aqui ó testi di parágrafo e nesse teste de parágrafo eu quero a cor branca nessa nesse teste se você botar assim ó ontem hoje já ficou vermelha color White vou pegar isso tudo jogar aqui dentro tá o teste de parágrafos vai

ficar com a fonte branca mais uma vez funcionou funcionou significa que tá funcionando tá tudo certo não isso aqui não funciona mais tá vendo pegue vermelha se apega e fica vermelha significa o pega o parâmetro significa ó coisa para o baile existe mas o beija Cola não existe mais tá você pode botar aqui pela font-face Font size nada mais disso faz parte do HTML o HTML ele está focado na semântica na gente mesmo adicionar ele aí há pouco tempo semântica significa significado você colocar um texto no meio não é significado é forma você colocar uma

ponte branca não é significado é forma e para tudo que é forma agora se Reserva um as CSS as folhas de estilo então se você quer mudar a cor de uma letra mudar o tipo de letra o tamanho dela acordar a página isso não é mais com html html vai se focar no que a gente chama de tags semânticas pegas com significado mais do que forma significado quer ver uma coisa que eu até botei no capítulo vou apagar esse daqui antigamente funcionava assim ó você criava uma tag que era a pele sei lá a tag

sublinhada pegue a até mio nem ficou vermelho aqui mas ela já tá desconfiando diz considerada a tag uva botava assim ó Sei lá eu moro na Rua dos capixabas 229 nem sei da onde quer que rua é essa pela mole Botafogo Botafogo Rio de Janeiro quando eu atualizar aqui ó aí eu moro na Rua dos capixabas ficou sublinhado né ficou em destaque o a função aqui do a função do ué sublinhar para chamar atenção isso não é significado isso é forma significado seria no HTML 5 a vou querer aqui ó o meu index você queria

meu lado 15 ponta da time aqui hoje eu vou criar a tag pode dizer que ele tá em português vou fazer aqui exemplo de semântica e eu vou colocar a mesma frase aqui ó eu moro na rua tal tal tal eu moro na água que eu vou comprar esse mesmo inventei ele agora vou botar aqui ó eu moro na aí em vez de colocar o até o que é de sublinhado e que não tem significado só tem forma eu vou colocar pela Agir é eu moro na Rua dos capixabas eu tô dizendo que eu estou

colocando isso aqui como o endereço Olha só carregar o HTML 5 né esse daqui tá lá você tá eu moro na Rua dos capixabas 229 Botafogo ele continua em destaque continua sendo um destaque só que agora ele tá meio Itálico significa que o Éder é Itálico não você tá focado na forma eu tô focado no significado isso aqui tem um significado provavelmente se esse site aqui abrindo o celular para poder apertar nesse endereço vai abrir o Google Maps Deu para entender Qual é a ideia HTML5 não se foca mais em o HTML5 se foca em

semântica em significado claro que isso aqui tudo tem que estar dentro de um parágrafo né ou até o negócio aqui depois eu vou te ensinar a coloquei ele dentro de um parágrafo certo fica melhor Tranquilo então assim muito cuidado com o uso de significado dentro do HTML 5 muitas peles simplesmente pararam de funcionar um por exemplo html4 antigamente de uma tag que era horrorosa no meu ver que era Mark da Lama ele até deixe aqui tá eu vou botar aqui sei lá botar direção aqui drive teste de marquinha Oi ó e aqui ó vendo ele

tem aqui ó Isso aqui já está em desuso a gente veio aqui ó é uma coisa obsoleta para fazer animações para fazer com JavaScript vendo a marquinha Aqui também tá fora altos roleta então mesmo que não esteja ficando vermelho mesmo que esteja funcionando cuidado com o uso de algumas tags obsoletas porque mais cedo ou mais tarde vai parar de funcionar mecanismos de busca como o Google pode começar atingir de valorizar porque você tá usando HTML antigo Então pára com isso tava lá na Guanabara como é que o meu HTML eu faço para ficar azul exatamente

aqui aí você usa CSS depois a gente vai aprender mas eu vou te mostrar aqui ó é simples você vai ver aqui ó no Styles ali no estilo do da tua página e ele trabalha no bari no corpo eu vou ter um background-color exatamente aquele beijo e Collor que usava aqui ó falar mas agora tá escrevendo by paciência Você tá trabalhando com isso é assim que funciona hoje em dia eu levo para a escola posso botar Blue aqui ó inclusive o visual Studio code deixa eu passar o mouse em cima e o outro tom de

azul né ficar mais discreto enfim falar automaticamente também transparente com azul formatar roxo outra coisa mas enfim posso usar códigos hexadecimal também isso tudo facilitou depois a gente vai aprender a a utilizar mas a base hoje é o seguinte HTML significado semântica CSS estilo forma Então você tem que saber diferenciar Qual é a parte para fazer HTML5 Qual é a parte que vai fazer isso SS isso é extremamente importante é tão importante que eu fiz um vídeo só para falar sobre isso não material online não tem um material em PDF você tem alguns links para

o site da w3c para que você possa dar uma olhada lá efetivamente quer não fica procurando essas coisas nesse site de outros não vai no site oficial e dá uma olhada Quais são as tags obsoletas hoje clica lá e ver quais são as pernas obsoletas né hoje em dia já está mudando um pouco menos mas teve uma época em que mudava todas uma tem que funcionava depois não funcionava mais Surgiu uma tag nova HTML5 depois ela deixa eu dizer bom então fica de olho isso aqui eu tô sempre de olho na hora de preparar o

material e por acaso você tá vendo vídeo muito depois se por acaso alguma tecla ensinar nos vídeos ela se tornar obsoleta eu vou avisar você dentro de sala de aula Se eu fosse o professor se eu não for eu vou colocar no pdf lá uma visual ter o pdf enfim Fica de olho que nem tudo aquilo que te ensina funciona hoje em dia funcionou há muito tempo atrás não significa que vai funcionar hoje e nem vai funcionar amanhã cuidado com isso não usa mais veja Cola fonte Cola Font size Font Face não usa mais Center

não usa mais nenhuma das férias que eu estou apresentando aqui durante esse vídeo para você por favor faz esse grande favor para o seu aprendizado muita gente aparece por aqui perguntando sobre os nossos certificados são válidos e até mesmo se esse curso de html CSS e vai ter um certificado a primeira resposta é sim os nossos certificados são 100 porcento válidos em território nacional EA segunda resposta também assim mas não vai ser um ser e não esse curso vai ter cinco módulos então isso significa que serão cinco certificados Mas é óbvio que a gente só

vai conseguir emitir esse certificado a partir do momento em que os módulos estejam completos cada um vai ter aproximadamente quarenta aulas e a gente sempre encerra o módulo um vídeo fim do módulo Então já fica ligado fica ligada para você poder conseguir com os cinco módulos desse curso que tá bem legal combinado é isso a gente se vê no próximo vídeo a gente vai começar a falar sobre formatações semânticas sempre formatações semânticas para gente dar foco aí nos nossos estudos de html mais uma vez dizendo Esse é o iniciozinho né esse material todo esse primeiro

capítulo Essa é Paulo esse vídeo está assistindo agora ele é o início Zinho do nosso Capítulo 8 lá do nosso material em PDF sempre fique visitando o nosso repositório público cliente já foi divulgado extensivamente aqui é Gustavo Guanabara ponto de tirando e ponta acessa lá vai nos materiais em PDF e estuda por lá também não fica só Oi e você que é só caderninho escreve a importância da semântica por esse vídeo bota alguns exemplos de tags que não são mais válidas vai lá no site do lado da w3c escreve a lista de times inválidas coloca

no teu caderno para você nunca mais cair no erro de usar essas tags novamente mesmo que o seu professor tem ensinado dentro de sala de aula eu me despeço por aqui mas o Capítulo 8 ainda não terminou a gente ela tem mais algumas coisas para conversar sobre esse assunto um grande abraço e até já [Música] [Aplausos] E aí [Aplausos] [Música]