Citações e Códigos - @Curso em Vídeo HTML5 e CSS3

362.67k views3518 WordsCopy TextShare
Curso em Vídeo
Você sabe como adicionar citações ao seu site? Sabe como representar um trecho de código dentro de u...
Video Transcript:
Já chegamos aqui a última vai parte do capítulo 8 onde a gente vai ver finalzinho da formatação de caracteres Ai aqui seu curso é a l com 61 E aí [Música] o Olá tudo bem não me deixa em paz aqui tudo bem seja bem-vindo seja bem-vinda a última parte aqui do seu Capítulo 8 ninguém tá falando de formatação de caracteres e agora a gente vai ver a última parte a gente vai falar sobre códigos né código fonte que a gente vai talvez publicar bastante vamos falar sobre abreviações vamos falar sobre potation que é situações e muito mais beleza então vamos diretamente do computador vamos fazer o exercício anterior pra gente poder criar o exercício novo vem comigo interromper sua aula só um minutinho para um recado especial da hostnet que é patrocinadora do nosso curso na verdade ela é patrocinadora de quase todos os cursos aqui do canal do consegui vídeo e ela está presente na nossa vida desde o início da história do canal e nesse vídeo aqui eu vou dar um apanhado Geral de todos os serviços e produtos que a Rosinete pode oferecer para você conforme o curso foi avançando eu vou falando um pouco detalhadamente sobre cada um caso você se interessa e outlet que historicamente é uma das maiores empresas de hospedagem do Brasil o curso você vai entender coisas como hospedagem como domínio você vai aprender a criar sites e você vai aprender até colocar seu site no ar de forma gratuita Só que essa forma gratuita que você vai aprender nesse curso é extremamente limitada mais para frente você vai se tornar um profissional uma profissional de desenvolvimento de sites e vai precisar de um local para hospedar o seu site de forma profissional a Rosinete oferece esse serviço mas de alguns anos para cá outlet aprimorou ainda mais o seu serviços e além da hospedagem e venda de domínios para quem é assinante de alguns dos planos além de hospedagem você também recebe treinamento que se por acaso você quer montar um site para o seu negócio e começou a aprender a criar sites para desenvolver o seu próprio site do seu próprio negócio mas está sem tempo de aprender que é o site mais rápido a rotina que também podem desenvolver-se site para você pode ser um site normal uma loja online uma plataforma de Educação a Distância e muitas outras possibilidades Olha a quantidade de coisas que a hostnet oferece para você se você quiser saber mais sobre e esse código que tá aparecendo aqui te leva para uma página especial Onde serão apresentados esses itens que eu falei e muitos outros Muito obrigado Rosinete pelo Patrocínio constante do consegui desde o início da história e agora você pode voltar sua aula então é só agora que o gato me deixou um pouquinho em paz esse aqui é o exercício da aula anterior nós vamos fechar isso vamos fechar isso e nós vamos voltar aqui ó pra documento de estudos HTML exercícios e quem exercício e vou clicar aqui ó para criar o exercício é x009 bem em ter botão direito do mouse abrir com Cold Beleza já abrir com Cold vou criar logo de cara o meu index. hr Lembrando que indexa índice é a página principal como nosso exercício só vai ter uma página ela ainda sempre poder exclamação aqui para criar o código padrão vou mudar aqui para português do Brasil e vou colocar aqui outras formatações meu H1 aqui vai ser outras foram as mães e vamos criar as formatações que a gente vai ver aqui durante essa aula primeira formatação que a gente vai criar são código-fonte código fonte Como você sabe que você deve saber é o código são comandos são na parte de código Como por exemplo o comando pela doc homens. Get elements by i latest é escrito em linguagem Java inscritos já escrito Beleza se eu abrir esse documento Abrir 1009 clicar duas vezes no index ele já está aqui arrumadinho lá o comando do que nesse ponto justamente parede teste é escrito em linguagem Java script é o grande problema desse tipo de exibição aqui fica confuso por quê Por exemplo a letra T visualmente Ela já ocupa muito menos espaço que a letra g Olha a letra g sublinhado olha olha a largura desse azul Olha o bem pequenininho traço a letra L Olha isso a letra é minha nora ainda e essa fonte ela não é monoespaçada ela não reserva o mesmo espaço lateral para cada letra Então como é que a gente faz isso uma das maneiras é a gente selecionar o comando nós vamos em vê-lo paz comando falar mal gravar como que envelope você pulou os vídeos anteriores meu querido nesse Capítulo 8 eu te expliquei como envelopar não vou te ensinar agora vamos envelopar no comando Cold perto do céu olha só a diferença vou dar um achar o botão aqui ó desde um e você vai ver a diferença disso O atualizar agora Agora ficou mais fácil de ler doc ou menos.
Get Element by ID até o ponto ele todas as letras vão ver aqui ó vou dar até um zoom maior Olha o que é uma largura Olha o ponto é a mesma largura ué também amei o Hélio que era Largo minha pequena é a mesma letra que a gente chama de fonte monoespaçada a fonte monoespaçada ela é ótima para lhe códigos tanto que minha pele é Cold tranquilo tão até que coisa para isso vou te botar um outro exemplo aqui é é complicado Vou botar aqui um código em linguagem Python por exemplo eu vou fazer o seguinte eu já vou criar um Cold aqui vejo um parágrafo e vou escrever aqui dentro um código e tá então por exemplo vou ler um número vai ser um número inteiro input digite um número aí vou depois de ler esse número vou fazer esse o número dividido por 2 da resto zero se você não sabe linguagem pai então recomendo tá a gente tem no curso em vídeo no estudonalta tudo liberado lá para você poder estudar para vamos escrever um print formatado e vamos colocar lá o número vão botar um placeholder no epa se não você não entendeu isso não tem problema que eu quero falar que você entenda é a ideia da pegue o número tiver curiosidade em aprender e eu recomendo vai lá no curso em vídeo que tem lá limpa então basicamente Esse é o meu código vou escrever o botão print aqui ó sim do programa Se eu colocar assim a gente pensa assim você é Cold vai aparecer tudo bom então e na hora de colocar a lei fica um comando do lado do outro então assim o Cold ele não organiza o seu código com indentação é aquela que essa arrumação aqui do código a nota código sem com hidratação e aquele perdeu totalmente ainda tá são aquele botão comando do lado outra Digite o número isso que ela tá na minha de baixo tá aqui do lado enfim bagunçou tudo existe uma outra maneira que a seguinte você pega essa tag code e envelope para ela não há tags preppy é quando você coloca um pré ele já é pré tudo que vai ser colocado aqui vai ser considerado inclusive esses espaços aqui na frente as quebras de linha as tabulações E aí o teu código Fica com cara de código PIN Então tá dando ficou exatamente nessa formatação certo então assim você pode mesclar o pré com o Cold outra coisa que eu vou te ensinar bem legal Aquele ficou com expansão né isso porque como a gente colocou dentro do Pré ele está considerando inclusive esse espaço aqui se você quiser tirar esse espaço dá para você selecionar e tirar selecionar e tirar só que eu vou te mostrar uma sétima e você vai selecionar tudo o que você quer tá só o código tá sem as tags e você vai segurar o shift e vai apertar a tecla Tab do teclado shift Tab ele vai voltar vou colocar de toda arrumadinha aqui já que ele tá no pré para ele ficar desse jeito lá no pro código ficar aqui se você quiser o código ligeiramente do lado é só você selecionar o código apertar a tecla Tab no lugar de chefe de estado você aperta tarde só eles eu disse a gente vai lá acrescenta uma tabulação tá tudo que tiver dentro do Pré vai ser considerado inclusive com espaços com um monte de em ti aquele negócio brbrbrbr você pode fazer assim ó não é a melhor maneira também mas você consegue criar quebra de linha porque dentro de uma tag pré que é a formatação de texto também tem uma outra tag que é o código-fonte e pré-formatado pré-formatado plantação que ele vai se guiar pelas quebras de linha e tudo mais certo então tá aqui ó já tá representada aqui do meu lado como a gente coloca uma das maneiras bem simples de fazer código-fonte entendeu a festa aí na sua casa você puder aprender essas teclas de atalho que eu tô te ensinando aí e aí tá gostando do curso tá achando legal a ideia desse curso Ele tá dando um trabalhão para gente desenvolver eu vim aqui te pedir um e-mail por favor para divulgar esse curso e eu creio jeito bem legal de também talvez divulgar o seu trabalho isso porque no repositório que eu vou falar várias vezes no curso além do nosso material de apoio todos os exercícios também vai ter uma pasta chamada ajude na divulgação se você quiser pode entrar lá baixar essa pasta inteira e aí você vai encontrar várias imagens em vários formatos para ajudar na divulgação Eu particularmente vou fazer uma versão mas você que artista Você que sabe desenhar que sabe ilustrar o que manja muito de Photoshop no Estreito pode criar uma arte baseada nos tamanhos né gente vai ter o tamanho deitado o tamanho pé e também quadradinho você pode criar essas Artes e mandar para gente Para esse e-mail aqui ó que é arte@curso em video ponto com não tem ponto br no final e a idade e vão ser divulgadas no meu Instagram pessoal e no Instagram do Conselho vídeo que estão aparecendo aqui embaixo então se você é artista pode ajudar a gente querendo Artes pode produzir o seu conteúdo que a gente ajuda a divulgar e se você não é bom com artes não tem problema é só se essa pasta ajude na divulgação do nosso repositório escolher um ou mais imagens e divulgar nas suas redes sociais grupos e tudo mais valeu mesmo já agradeço antecipadamente pela sua divulgação o que vai tornar Com certeza esse curso muito grande que vai ajudar muitas pessoas vamos finalizar aqui finalizar não né Vamos a próximo passo que a gente vai ver são as citações citação uma coisa muito importante Olha só por exemplo criar que olhar dois situações aí eu vou fazer o seguinte assim ó o que é um parágrafo eu voltar Como diria o pai de um amigo: o computador é um burro muito rápido Adoro essa frase é a frase do pai do Ricardo que é professor também não consegui de fez o curso dele não preciso mais como direi o computador é um burro muito rápido beleza tá escrito lá só que isso aqui é uma citação eu tô tentando outra pessoa eu posso colocar entre aspas manualmente ou eu posso usar uma tag vou envelopar isso daqui ó com a tag que que significa coaching que é citação e eu apertei do lado de fora de novo almoço envelopar com o que quando eu coloco o que ó ele já coloca as "para mim Como diria o pai de um amigo "o computador é um burro muito rápido fala para o Guanabara não é melhor botar as" cara vou te dizer que quando você coloca o que você está dando sentido às coisas não é uma forma simplesmente é um sentido o sentido de uma situação certo então assim vai por mim usa o que no lugar de usar" quando é uma situação né quando é alguma coisa do tipo alguma coisa preste atenção nisso e bota entre "ou uma coisa assim mais ou menos interessante aí não é uma cotation é assim que vende" mas quando eles foram uma situação coloca até emitir a nota isso daí citações simples as ações sem quebra tá ele não como digo para Jamile não quebra a linha para botar a frase do pai de um amigo tá e existem também as citações completas por exemplo vou abrir aqui o Google livros book. Google.
Related Videos
Listas OL e UL - @Curso em Vídeo HTML5 e CSS3
12:32
Listas OL e UL - @Curso em Vídeo HTML5 e CSS3
Curso em Vídeo
327,260 views
Formatações adicionais em HTML - @Curso em Vídeo HTML5 e CSS3
15:46
Formatações adicionais em HTML - @Curso em...
Curso em Vídeo
370,184 views
Links e Âncoras em HTML5 - @Curso em Vídeo HTML5 e CSS3
12:30
Links e Âncoras em HTML5 - @Curso em Vídeo...
Curso em Vídeo
342,991 views
Imagens Dinâmicas - @Curso em Vídeo HTML5 e CSS3
16:31
Imagens Dinâmicas - @Curso em Vídeo HTML5 ...
Curso em Vídeo
297,689 views
Negrito e Itálico do jeito certo - @Curso em Vídeo HTML5 e CSS3
12:19
Negrito e Itálico do jeito certo - @Curso ...
Curso em Vídeo
355,078 views
NÃO COMECE A ESTUDAR PARA CONCURSO PÚBLICO SEM ASSISTIR ESSE VÍDEO (Laura Amorim)
6:53
NÃO COMECE A ESTUDAR PARA CONCURSO PÚBLICO...
Podcast Podpassar
394,089 views
Nas Garras da Patrulha - Tatá e Teté planejam "parada" com uma coroa
5:53
Nas Garras da Patrulha - Tatá e Teté plane...
TV Diário
1,833,809 views
If __name__ == "__main__" for Python Developers
8:47
If __name__ == "__main__" for Python Devel...
Python Simplified
399,435 views
Why Democracy Is Mathematically Impossible
23:34
Why Democracy Is Mathematically Impossible
Veritasium
3,306,605 views
The Surgery That Proved There Is No Free Will
29:43
The Surgery That Proved There Is No Free Will
Joe Scott
1,480,894 views
Semântica na HTML5 é importante - @Curso em Vídeo HTML5 e CSS3
15:23
Semântica na HTML5 é importante - @Curso e...
Curso em Vídeo
372,525 views
How to learn to code FAST using ChatGPT (it's a game changer seriously)
22:00
How to learn to code FAST using ChatGPT (i...
Tina Huang
2,326,418 views
HTML + CSS NA PRÁTICA 🔥 Faça seu primeiro site
16:19
HTML + CSS NA PRÁTICA 🔥 Faça seu primeiro...
Adriana Saty
457,504 views
Estilos CSS inline - @Curso em Vídeo HTML5 e CSS3
16:13
Estilos CSS inline - @Curso em Vídeo HTML5...
Curso em Vídeo
227,449 views
TODAS AS TAGS HTML QUE VOCÊ PRECISA SABER
31:22
TODAS AS TAGS HTML QUE VOCÊ PRECISA SABER
Gimmi Codando
125,764 views
DESENVOLVENDO MEU PRIMEIRO SITE COM HTML | 4#
7:18
DESENVOLVENDO MEU PRIMEIRO SITE COM HTML | 4#
bremado
454,748 views
Como mudar o favicon de um site - @Curso em Vídeo HTML5 e CSS3
15:50
Como mudar o favicon de um site - @Curso e...
Curso em Vídeo
468,650 views
The Only Way Germany Could’ve Won WWII
20:57
The Only Way Germany Could’ve Won WWII
AlternateHistoryHub
744,213 views
Curso de HTML e CSS com projeto - HTML e CSS para iniciantes
2:59:27
Curso de HTML e CSS com projeto - HTML e C...
Matheus Battisti - Hora de Codar
156,858 views
Criação de Sites com HTML5 e CSS3 :: Aula 20 :: Responsividade e Projeto Final
1:25:19
Criação de Sites com HTML5 e CSS3 :: Aula ...
Ricardo Maroquio
6,545 views
Copyright © 2024. Made with ♥ in London by YTScribe.com