Formatações adicionais em HTML - @Curso em Vídeo HTML5 e CSS3

e continuamos aqui no nosso Capítulo 8 do PDF abre seu material vamos acompanhando esse vídeo junto com PDF [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui no seu curso de html com CSS por enquanto a gente falou muito mais HTML um pouquinho sobre CSS até vou falar um pouco mais durante essa aula mas relaxa você é se tá vindo aí tudo é uma sequência tudo é uma evolução você tem que ter paciência poder chegar lá na frente então vamos continuar coisas quem tá falando

anteriormente de algumas tags que a gente pode utilizar no nosso dia a dia para formatar nossos três mas antes de dar continuidade a sua aula tu vim aqui dar um recado especial da Record que é patrocinadora do nosso curso e Como disse aqui anteriormente em outros vídeos esse curso a Record é uma organização com o objetivo de ensinar tecnologias e ela tá trazendo para você que é aluno do curso em vídeo uma série de cursos que vão te preparar para entrar no mercado de trabalho e eles oferecem cursos desde o mais básico que é conhecendo

o ambiente Windows e o pacote Office até alguns outros que com certeza vão te interessar um pouquinho mais como aí eu te internet das coisas realidade virtual realidade aumentada o desenvolvimento de aplicativos móveis um curso de tecnologias pro futuro e muito mais e para fazer parte da plataforma da Record é muito simples a inscrição é grátis e você vai ter todas as instruções pelo código que tá aparecendo aqui na sua tela é só você abrir o aplicativo da sua câmera apontar para o código que tá aparecendo e ver todas as oportunidades que a Record tá

trazendo para você voltamos agora a sua aula história só Já estou aqui com o exercício encaminhado você não viu a criação desse daqui não perca a parte anterior não adianta pular para poder vir só nesse se você não conseguiu aprender os anteriores e um continuar aqui vou criar mais um H2 que um subtítulo de principais formatações e não vão chegar agora no momento do texto marcado aquele marcador de texto que a gente tem lá no né eu te falar aquela aquela caneta colorida que você marca aqui se eu disse tem uma assim mas com certeza

você já viu inclusive do seu PDF tem aí um a desenhadinha desejam uma foto de uma na verdade e nós vamos marcar esse texto vai Oi gente vai fazer vou colocar um texto aqui qualquer vou botar poderíamos criar também um texto marcado usando a tag morte a basicamente até de marca ela não é reconhecida pelo visual Studio code no momento que eu tô gravando esse vídeo Pode ser que mais para frente seja tão botar aqui ó um texto marcado vou colocar ele como a tag mar né que eu não fazer nada ele simplesmente não marcou

Mas vamos voltar aqui tem esse marcado o seguinte ó selecionei aqui selecionei o texto que eu quero control shift p a gente aprender o sinal a passada né Você vai clicar envelopar Com abreviatura nós vamos colocar até mar mark-1 Ele criou aqui como uma quebra você pode tirando aqui né pode clicar nesse da linha apertar that space que ele vai tirando essa tag marque ela vai querer esse daqui ó tipo um marca texto isso é legal né interessante e aí você pode botar o marca texto da tamanho que você quiser você vai marcar o texto

uma maneira que você achar melhor que você é pouco usual mas às vezes numa situação se você quer uma palavra em destaque você pode utilizar a tag Marques e muita gente me pergunta até coloquei no material não expliquei no material mas Muita gente me pergunta durante a aula as armas Guanabara como é que eu mudo a cor do marcador e normalmente marcador Amarelo né Mas puxa o fundo da minha tela não tá a branco e tá ficando ruim dessa cor aqui você não tem em HTML uma forma é uma maneira de mudar uma corpo que

cor é forma cor não é significado simplesmente colou do Norte eu tô no significado eu quero ele marcado só que acordar marcação não é HTML seria CSS uma das maneiras de colocar CSS depois a gente vai ver com mais detalhes é dentro da própria tag então apertei espaço aqui e vou colocar um parâmetro quase todas as peças têm que a tag para o metrô Style no parâmetro Style a gente não tá fazendo mais HTML a gente tá fazendo CSS quando eu vou fazer uma formatação pontual de uma coisa específica O legal é utilizar essa maneira

que a que é mar Thai ou aí eu vou usar um parâmetro da espécie aqui é tudo para mim descer o que tá aparecendo aqui coisa para caramba vou até rolar para baixo a quantidade de coisa dissesse que a gente tem que aprender então eu vou colocar aqui ó o background-color e eu vou colocar uma cor que a ficou online que é uma cor amarela né verde na verdade só digitar LM Pressão Online essa cor lá ele tá vendo ó melmark vai ter um estilo tem uma mais significado a estilo e ele vai ficar verde

pode colocar da cor que você quiser pode botar transparências e depois a gente vai aprender em CSS inclusive uma dica legal você pode parar o mouse em cima da palavra alarme e você pode escolher em vez de palavras e pode escolher a cor que você quiser Sei lá eu quero essa cura e bem fluorescente Eu quero um se ano bem forte você viu que ele já mudou o código depois a gente vai ver se pode ver como funciona e vem aqui ele coloca tá mas se não Colocar uma outra marcação a ter e no Temos

aí vou tirar um uma seu digitação marca aqui ó ele não a fita então vou ter que fazer abre pegue Marques e fecha quando fecha ele queria até aqui para você temos outro texto marcado no final tá vendo ele não herda a característica daqui de cima aí ele é da característica daqui de cima eu não posso fazer essa configuração de background-color aqui dentro desse Marco porque na verdade quando eu coloco Style background e essa cor aqui eu só estou mudando a cor desse Marte eu tenho que fazer isso no outro mar que se eu tiver

200 Marques aí meu filho se eu acho que não dá para fazer nessa Nesse estilo eu consigo fazer o seguinte eu consigo apagar aqui Martin tá eu eu deixo todo mundo mate ele vai ficar todo mundo amarelo que a cor padrão e eu venho aqui em cima no meu cabeçalho e eu crie uma tag Style E aí eu faço um seletor a gente viu isso nas aulas né mas logo no início Sim eu creio o seletor para mar e esse eleitor para Marcos vai ser background-color eu posso botar a cor que eu quiser ela voltar

lá e quando eu atualizar ele serve para todo mundo beleza então assim são as duas maneiras eu disse colocar um estilo Eu recomendo fortemente que você faça essa aqui de cima que ela vai servir para todos os Marques dessa página ele não vai servir para marcas de outras páginas mas existe uma maneira mais avançada a gente serviço para gente começar a vcss nem falta tanto assim a gente vai aprender uma terceira maneira a primeira maneira colocando Style aqui dentro da pele a segunda botando Style dentro do meu documento existe uma terceira que usando um link

externo a gente vai aprender também quando a gente tiver e volume Beleza então aprendemos aqui a tag Marques vamos a outra tag H2 nós vamos falar sobre texto grande e pequeno na verdade existe uma pega antigamente era o seguinte estamos criando um texto grande e um texto pequeno nesse parágrafo Olha só olha que curioso eu tenho uma teoria né mas a gente vai discutir aqui ó Estamos esperando um texto grande um desde pequena ela então não ficou nem texto grande eu deixo aqui o texto grande eu vou envelopar ele ó de novo contra o chip

de ter envelopa é muito e nós vamos colocar a tag big beeg.ckm big ela já está obsoleta clássico assim vermelho mas ainda funciona tá vendo texto grande nem é tão grande assim ele ficou um pouco maior do que o normal o texto pequeno selecionei aqui também vou envelopar com a Mall a tag Mall o pato aqui do lado de fora tá vendo Então é só um erro comum mal em ter até Mall não ficou obsoleta e ele realmente fez um texto pequeno texto pequeno realmente está um pouquinho menor o texto grande ficou um pouco maior

e o texto pequeno ficou um pouco menor isso vai falar para o Guanabara por quê que o Big foi obsoleto e os moldes não ficou obsoleto bem vamos lá na verdade se você quiser aumentar uma letra não significa que você deu o significado para ela significava só você criar um pouco maior se você quiser um pouco maior isso é forma e aí você aumenta o CSS agora molten por exemplo nos contratos em letras pequenas as letras pequenas elas lá embaixo elas são observações importantes importância da sua importantes estarão maior é muito mais você consegue dar

sentido para letras pequenas por isso que os mal ainda não caiu New Big já caiu eu nem tinha raciocinado sobre isso durante o material escrito mas agora eu tenho uma opinião sobre isso o Big Caiu porque ele é uma tag que não tem sentido para que atleta tá grande você quer a letra grande sem formata ela sempre uma classe de um parágrafo em classe aumentar letra agora letras pequenas faz sentido letras pequenas está vendo tá não contrato tem letras pequenas tem um sentido para estar ali então por isso eu acredito sua opinião minha meramente baseada

no raciocínio que eu tive durante a gravação desse vídeo poucos minutos antes e talvez seja por isso que dá três e ainda está considerando a tag moto tá para dar sentido de que é um texto meio que secundário mas que também deve ser lido enfim você pode fazer volta dizer big como funciona você viu que ele funcionou mas ele está vermelho aqui ele está obsoleto vai lá naquela lista que eu dei lá no início deste Capítulo no início Capítulo Hoje eu dei dois links Lá No Materno PDF visita lá para você confirmar que dele está

realmente obsoleto tranquilidade vamos a mais um aqui ó mais dois na verdade eu vou te ensinar dois aqui na tacada H2 vou te ensinar texto excluído ou texto deletado outra delitado texto deletado vou criar um parágrafo para ele e também vou criar um a dois aqui para texto inserido também vou pegar um parágrafo Poderíamos marcar um texto O cara tá me chamando aqui atrás como excluído para indicar que ele deve ser lido mas não considerado tá e aquilo parágrafo vou botar Podemos marcar um texto como incluído inserido na verdade para dar uma ênfase e indicar

que ele foi a e depois cartão ver como é que eu marco aqui não não fiz formatação nenhuma como é que eu marco um texto como excluído esse texto como excluído eu vou envelopar ele numa a tag chamada del BL lá texto excluído esse aqui ó é aquele texto que você risca que você vai fazer na hora ele tá ali você vai ler mas não vai considerar o texto inserido eu também posso envelopar ele aqui ó texto inserido é INSS esse texto inserido ele fica sublinhado na verdade mais uma vez deixa eu botar aqui ó

existe a tag aqui ó existe também os sublinhado com a tag O que é não semântica a tag eu acho que ela também está prestes a morrer nem sei se ela tá na lista de obsoleto eu posso criar aqui a técnico e na verdade volta dizer forma e sentido esse texto tá exatamente a mesma formatação desse texto nesse texto usei INSS nesse texto eu usei um mais uma vez essa aqui tem sentido e essa daqui não tem sentido tranquilo esse aqui ó o INSS é como se fosse assim preenche uma lacuna né frente aqui um

texto e já vai aparecer preenchido Esse é o sentido que existe no INSS do INSS uma tag semântica uma carga e não semântica exatamente como a gente falou no vídeo anterior e para encerrar esse vídeo que já tá ficando bem longo também vou te ensinar dois numa tacada só H2 texto sobre a escrito ou criar um parágrafo que para ele nossa nave besteira aqui e também com H2 texto subscrito o tem um parágrafo também texto sobrescrito é quando por exemplo você quer escrever coisas do tipo para inserir coisas do tipo x ao quadrado + 3

não eu quero esse 2 ao quadrado né o cara X elevado a 20 mais três quer quadrado você tem aquele Caracterize Então as pessoas podem achar que eu ficar mais fácil e no subscrito e bora botar para inserir coisas do tipo h2oh é que a fórmula da água também da se eu fizer assim ó não ficou X elevado a 20 mais três ficou x20 mais três aqui também não ficou h2oh do jeito que é porque esse dois é menorzinho né tô aqui ó sobre a escrito tudo que é sobrescrito eu quero esse vídeo sobre escrito

Então vou envelopar ele com a tag sup que é sobrescrito ó que ele tem fora de novo contra o chip é IP super então eu sempre esqueço e o dois aqui que eu quero embaixo eu vou selecionar ele envelopar com a tag subir tá sup é em cima subir em baixo dá uma olhada aqui visualmente como ficou a nossa página olha 2 elevado a 20 mais três foi isso aqui ó se isso 20 mais 3 oh2 O que tava aqui ó o dois está mais embaixo CO2 sob ó Tranquilo então deu para colocar aqui na

mesmo quadro as duas formatações tranquilidade se por acaso você fez esse capítulo né e o exercício antes com certeza você entendeu A grande maioria das coisas Talvez uma explicação Zinho outra tenha sido diferente essa coisa do estilo o mar mas a ideia é essa a ideia é que o vídeo complemente o texto e o texto complemente o vídeo esse curso ele é feito pela primeira vez que eu tô fazendo a minha vida concurso juntando a partir impressa né não vamos estragar o ambiente Você pode ler o PDF no seu celular no seu tablet enfim mas

se você quiser imprimir você pode imprimir né Bota um papel reciclável e imprimir Nem todas as páginas são as mais importantes em os centros seu caderno tá esse curso Ele tá um frio é o seu caderno com anotações o pdf que você pode ler e os vídeos e pode assistir Eu acredito que a gente conseguiu chegar numa fórmula bem legal aí de estudo para você aprender efetivamente HTML e java script em outros cursos que vão ver aí nesse mesmo formato cobrado Você tá gostando desse curso tá achando que ele é útil para você e também

para uma comunidade inteira então não pensa duas vezes antes de compartilhar esse curso com as pessoas se você em qualquer comunidade qualquer grupo no Facebook você tem aquele grupo Pão de estudo do seu colégio ou faculdade no WhatsApp ou no telegram Não esquece de divulgar os nossos links você ajuda muito divulgando o link da playlist completa e como esse curso vai ter cinco módulos vão ser cinco playlists eu te agradeço bastante se você ajudar com esse o compartilhamento foi pelo Instagram não esquece de marcar a gente nas redes sociais Então é isso meu querido é

isso minha querida finalizamos aqui a parte inicial de formatações Mas ainda tem mais para aprender cara formatação é um mundo de possibilidades eu nem tô te explicando todas identificando acho que eu julguei mais importantes mais interessantes no próximo vídeo A gente vai ver mais algumas formatações vamos finalizar esse exercício 08 aqui que a gente fez vamos começar o exercício 09 você também pode acessar diretamente no nosso repositório público e ficarem Gustavo Guanabara conjuntivite Rami. Aí combinado que a gente tem Encontro Marcado próximo vídeo a gente vai continuar falando de for se continuar falando eu acho

Capítulo 8 ter é um grande abraço e bons estudos prática aí tem muita coisa ela praticar gente aprender um monte de coisa aqui nessa aula e a gente se vê no próximo vídeo tchau tchau E aí [Aplausos] [Música] E aí E aí [Aplausos] [Música]