HTML básico: uma introdução ao desenvolvimento de web para iniciantes

1. HTML 101: introdução ao desenvolvimento web para iniciantes: Olá e bem-vindo ao HTML um-para-um, um guia para iniciantes para codificação. Vamos dar uma olhada no que vai ser abordado neste curso. Primeiro, vamos ter um programa de codificação instalado. Então vamos dar uma olhada no que HTML é e como escrevê-lo. Vamos ter muita experiência prática. E por último, vamos ter um pequeno projeto onde criamos uma página HTML. Mas por que você deve aprender HTML? Honestamente, é a estrutura óssea subjacente por trás de cada site. Não é possível visualizar um site sem HTML. Você precisa saber HTML e para entrar em outro desenvolvimento web. Se você quer se tornar um desenvolvedor web, se você quer apenas fazer sites para hobby, você precisa saber HTML. É muito fácil de aprender, só deve levar alguns dias para realmente entender. Mas, o mais importante, aprender HTML é o primeiro passo para aprender a codificar. Olá, o meu nome é Caleb a contar e hoje vou ser o teu instrutor. Eu sou um desenvolvedor web sênior e instrutor de codificação premium. Ensinei mais de 300 mil alunos a programar com sucesso. E mais uma vez, bem-vindo ao HTML 101, um guia para iniciantes de codificação. Quando você estiver pronto, vamos em frente e começar com a primeira lição. 2. O que é HTML?: Tudo bem, vamos dar uma olhada no que HTML é. Então, o que é HTML? Html significa linguagem de marcação de hipertexto. Na verdade, não é uma linguagem de programação. Ele é chamado de linguagem de script, mas ainda é absolutamente vital para o desenvolvimento web. E 100% de todos os sites usam HTML. Html é a estrutura por trás de cada site na internet é a espinha dorsal por trás de cada site. E então nós camada camada camada em cima de HTML. Mas sem HTML, honestamente, não há site e isso não é uma opinião, isso é apenas um fato. É assim que os sites e a Internet funcionam. Então a primeira coisa que você deve aprender no desenvolvimento web é HTML. Vamos dar uma olhada em HTML versus HTML5. Muitas vezes você verá as pessoas dizer, aprender HTML5 ou HTML5, isso ou HTML5 aquilo. Mas HTML5 é na verdade a última versão do HTML e ele será sempre chamado HTML5 e, eventualmente, ele só será chamado HTML. Então não há HTML seis na estrada, não há sexta iteração de HTML. Então, sempre que você vê HTML5, você pode realmente pensar em HTML5 e HTML como exatamente a mesma coisa. E isso é porque eles são exatamente a mesma coisa. 3. Como começar: Ok, vamos dar uma olhada em obter a configuração. Primeiro. Você vai precisar de um editor de texto. Sugiro vivamente VS Code. É gratuito e funciona em todos os sistemas operacionais. Então, antes de fazermos qualquer coisa, vamos nos certificar de que temos VS Code instalado. E eu estou indo para Google este VS Code download e é codificado ponto Visual Studio.com. E este é o programa de edição de texto que vamos usar neste curso. Agora, se você já escreveu código e você tem um editor de texto diferente que você prefere, tudo bem. Mas se você nunca escreveu código antes, vamos em frente e baixar este programa. Então, para mim, neste curso, estou usando um Mac. Mas não importa se você está usando Mac, Linux ou Windows, ele vai ser o mesmo programa, em todos os três sistemas operacionais. Windows 78 ou 10. Certifique-se de baixar este. Se você estiver no Mac, baixe este. E se você estiver no Linux, baixe um desses dois. Uma vez que você tenha o código VS baixado e instalado, certifique-se de que você pode abrir seu editor de texto assim. Então o seu vai parecer um pouco diferente. Uma vez que você abri-lo, o seu vai ser uma cor diferente, mas no final é exatamente o mesmo programa mente, apenas uma cor diferente porque eu gosto da acessibilidade por trás dele. Eu gosto de ser capaz de digitar coisas aqui. E é uma cor bastante fácil para você ler em sua tela. Então você só vai parecer um pouco diferente em cores, mas o layout geral vai ser exatamente o mesmo. Portanto, certifique-se de que você tenha o código VS baixado e instalado. E uma vez que você tem isso, vamos para a próxima lição. 4. Sintaxe HTML: Okey-dokey. Vamos dar uma olhada na sintaxe HTML. Agora a palavra que estou dizendo aqui é sintaxe. E tudo o que isso significa é o estilo que você escreve algo. Então, o inglês tem uma sintaxe particular com apóstrofos, pontos de interrogação, vírgulas, coisas assim. É como uma marcação de como escrevemos uma linguagem. E escrever código não é diferente. Há certas regras que temos em vigor. Então, primeiro as coisas, vamos em frente e vamos olhar para alguma sintaxe HTML. Então, tipicamente, parece assim. Temos algum tipo de elementos. E abre assim e fecha assim. Então, cada uma delas é chamada de tag, esta como uma tag de abertura. E esta é uma etiqueta final. E sempre, sempre, sempre, sempre tem um sinal de menos que. Então a palavra do elemento , qualquer que seja, e há muitos deles. E, em seguida, um sinal maior do que. E então, para terminar um elemento, fazemos a mesma coisa. Nós abrimos. E então dizemos que na verdade este não é um elemento de abertura, este é um elemento de fechamento e dizemos isso com uma barra e, em seguida, a palavra. E depois fechamo-lo novamente com um sinal ou símbolo maior do que. Agora você deve ter notado que eu coloquei isso em uma linha diferente, e isso é realmente OK. Html realmente não se importa com espaço em branco extra, então isso realmente não importa. Tudo isso, todas essas linhas extras entre a linha quatro e a linha 11, realmente não importa para ser honesto. Falaremos sobre isso mais detalhadamente um pouco mais tarde. Então essa coisa toda aqui, isso é chamado de elemento. Agora, dentro desses elementos, podemos ter texto. Então nós recebemos, digamos, alguma mensagem aqui. E o que um navegador vai fazer é então dizer, Ei, há um elemento em particular aqui e ele está se fechando aqui, e o que quer que esteja no interior, aplique essas regras a ele. Então, qualquer que seja a regra do elemento, talvez tão negrito, tornar este texto negrito é o que vai fazer. E falaremos de ousadia no futuro também. Mas agora, você também precisa saber que o elemento não é realmente um elemento real. Estamos apenas revendo a sintaxe aqui. Só para que isso faça sentido. Nas próximas lições. A outra coisa que podemos ter são essas coisas chamadas atributos. E isso realmente vai dentro de um elemento. Então o que eu vou fazer é dividir isso em sua própria linha, e tudo bem. Vai ser basicamente a mesma coisa para o seu navegador porque novamente, ele não se importa com este espaço extra lá dentro. Então temos essas coisas chamadas atributos e, em seguida, ele vai nome atributo é igual a. E então você pode ter dois apóstrofos como este ou duas aspas como este. E então podemos colocar algum valor aqui, algum tipo de texto. Então podemos dizer alguma mensagem aqui. Agora podemos ter vários atributos. Podemos ter, digamos, um atributo de título. E novamente, você não precisa saber o que é isso, vai cobrir tudo isso em futuras lições. Novamente, estamos apenas repassando a sintaxe aqui, e este é um exemplo de um segundo atributo. Segundo atributo. Aqui, podemos ter mais e mais e mais, podemos realmente ter um número ilimitado de atributos. Atributos são como elementos. Um elemento tem uma regra que seu navegador vai ler. Então, se isso for negrito, seu navegador, é um texto mais negrito. E só porque eu escrevo atributo aqui não significa realmente que ele vai fazer qualquer coisa. Agora, um bom exemplo disso, porque isso não é realmente valioso, atributo não é um atributo válido em HTML. Nós poderíamos apenas escrever título é igual a, e então qualquer que seja o título, e título é realmente um atributo apropriado. E você pode ter isso, uh, a maioria dos seus elementos HTML. Mais uma vez, falaremos sobre isso no futuro. Você não precisa memorizar tudo isso também. Porque à medida que você escreve isso, à medida que seus dedos começam a digitar cada vez mais, você vai se familiarizar com como HTML funciona e como ele parece. Então a grande vantagem aqui é, este é o seu elemento e você tem uma etiqueta de abertura, e tudo isso é uma etiqueta. Você tem uma etiqueta de fechamento e tudo o que ela engloba é seu elemento. Em seguida, temos atributos, como o atributo title. E assim vai, o nome do atributo é igual a ele precisa desse sinal de igual. Não adicione espaços antes ou depois dele. Certifique-se de que é completamente. Então você tem seu atributo é igual a. E então ou citações, apóstrofos. Agora aqui está o catch é se ele abre com aspas, ele precisa terminar com aspas. Caso contrário, se abrir com um apóstrofo, ele precisa fechar dentro de um apóstrofo. E você pode realmente ver o código VS destacado isso para mim. Ele diz que tudo aqui em baixo é igual. E isso é chamado de realce de sintaxe. Mas assim que eu substituí essa citação por um apóstrofo, porque esse atributo precisa abrir e fechar exatamente com o mesmo caractere. Este realce de sintaxe funcionou. Agora, se o realce de sintaxe não funcionar imediatamente e você estiver seguindo como vídeo e estiver tentando fazer o que eu estou fazendo. Vá até aqui e isso provavelmente vai dizer texto simples. Você pode clicar nisso e você pode digitar HTML e apenas clicar neste e ele vai mudar o realce de sintaxe para você. Então isso é tudo o que há para esta lição em particular. Você não precisa fazer nada neste momento. É muito importante saber que tudo isso é um elemento. Esta é uma etiqueta de abertura. Esta é uma etiqueta de encerramento. Este é o seu conteúdo interior. E esse cara aqui é um atributo. Deixe isso afundar por um momento. Quando estiver pronto, vamos para a próxima lição, onde falamos sobre a estrutura HTML base de cada página. 5. A estrutura base: Ok, vamos dar uma olhada na estrutura base de cada página web. Então eu tenho VS Code aberto aqui e eu só vou para Arquivo Novo, que é na verdade fora da minha área de gravação. Então é apenas Command ou Control N ou File, New File. E você vai ver este novo arquivo. Você vai continuar e mudar isso de texto sem formatação para HTML. E o que podemos fazer aqui é preencher automaticamente. Então nós temos um bom atalho aqui, então nós não temos que lembrar que este é HTML dois pontos cinco. E, em seguida, se você pressionar tab, ele deve preencher automaticamente para você usando a abreviação Emmett. Você pode ver isso no lado direito da minha tela aqui. Então vamos em frente e bater Tab. E faz tudo isso por mim. Agora, vou apagar algumas coisas só porque não precisamos agora e pode ser um pouco confuso. E eu só vou mudar este recuo só para que possamos olhar para um ninho e eu vou falar sobre isso, eu vou falar sobre isso em apenas um segundo. Mas vamos passar por esta linha por linha. Então, linha número um, este é o tipo mais estranho de elementos que você vai ver. Você não vê elementos muitas vezes começando com um ponto de exclamação tipo doc é o único. Então nós estamos dizendo, hey navegador quando você ler este arquivo não, que é um arquivo HTML5. É um arquivo HTML. Não é um PDF, não é texto simples, não é JavaScript, não é CSS, não é uma imagem, não é uma fonte, não é algum tipo de outro documento. É uma página HTML, então por favor, renderize-a como uma página HTML. Em seguida, na linha dois, temos uma tag de abertura chamada HTML, e é aqui que todo o nosso HTML realmente vai. E então na linha nove, estamos fechando que as tags estavam dizendo que tudo aqui vai viver dentro desta tag HTML e código invejoso, você pode realmente clicar nesta pequena seta e você pode colapsá-la, o que é muito legal. Então, se você tiver muito código, você está ficando um pouco sobrecarregado. Você sempre pode recolher seu código. Em seguida, temos duas partes principais para cada página. Temos a nossa cabeça. Novamente, isso é uma abertura elementos cabeça, tudo bem, tag sim. E esta é uma etiqueta de fecho. E essa coisa toda é o elemento principal. E você pode realmente ver isso assim como HTML. E temos um outro elemento aqui chamado título. Mas este é aninhado dentro de cabeça e cabeça é aninhado dentro de HTML. E, em seguida, temos um elemento de título aqui que apenas altera o título da página. Então, quando você vai para uma página da web, como esta, quando baixamos código VS algumas lições atrás. Isso muda esse título aqui para você. Isso é o que o elemento título faz. Agora você pode ter todo tipo de coisas em sua cabeça, mas você pode pensar no elemento cabeça como literalmente a cabeça em seu corpo. É o seu cérebro. Ele contém toda essa informação extra. Então não é completamente visual, mas contém informação extra. Seu corpo é como o corpo em que você vive. É o que as pessoas vão ver. Então, se eu voltar para esta página apenas como um exemplo, tudo aqui é parte do corpo. Então tudo o que é visual, a parte interativa da sua página web, que é o corpo. E vamos colocar a maior parte do nosso código lá. Então vamos em frente e fazer um exemplo aqui. E vamos apenas escrever “Olá mundo”. E o que eu vou fazer é salvar isso. Portanto, Arquivo Salvar Como. E onde devo jogar isso? Jogue isso na minha área de trabalho. Vou chamar isso de “Olá Mundo Ponto HTML”. Eu já tenho um, então vamos substituir isso. Agora o que eu posso fazer no meu navegador, como eu tenho, novamente, eu posso ir para o arquivo, mas desta vez eu vou para Abrir arquivo. Então é comando o ou o se você está no Windows, Eu acredito que ele tem que desktop. E vamos abrir o “Olá Mundo”. E esta é uma página web. Agora, se você está seguindo este vídeo, definitivamente sinta-se livre para pausar neste ponto e tentar escrever o código que eu escrevi neste vídeo. Não é muito código e é realmente fácil escrever com VS Code. Lembre-se HTML dois-pontos cinco e, em seguida, pressione tabulação. E isso completará tudo isso automaticamente para você. E então apenas escreva algo dentro do seu elemento corporal. Então eu só escrevi “Olá mundo “, e isso apareceu como texto na minha página. Se você fizer isso, salve seu arquivo e, em seguida, abra-o em seu navegador. E você vê “Olá mundo”. Então hey, parabéns, você literalmente acabou de fazer sua primeira página web. Então minha sugestão é dar uma chance, porque isso é sempre muito, muito boa prática e isso é muito direto neste momento. Então, sim, minha sugestão é dar uma chance a isso. Uma vez que você está feliz com seus resultados ou talvez você não queira dar uma chance a isso e você quer passar para a próxima lição. De qualquer forma, vamos para a próxima lição juntos e começaremos a falar sobre o elemento título. 6. Title da página: Ok. Olá e bem-vindo de volta. Nesta lição, vamos em frente e falar sobre este sujeito aqui, o elemento título. Então, na última lição, criamos esta página chamada Olá Mundo. E eu vou deletar isso. E esta é a página que originalmente tínhamos e dizia documento lá em cima, bem naquela aba. Então vamos em frente e atualizar isso e vamos vê-lo exatamente como o nome do arquivo e que corresponde ao nome do arquivo aqui. Então Olá sublinhado mundo ponto HTML. Olá sublinhado mundo ponto HTML. Mesma coisa. Não é muito elegante, não é o que seus usuários estão procurando, não é um motor de busca amigável. Mas podemos mudar isso com um elemento de título. E então eu vou escrever título barra título. Vamos em frente e mentes definidas para um template Django. Mas eu quero mudar isso de um Django templates para um arquivo HTML. Então vamos em frente aqui e mudar este título. Vamos dizer olá do Caleb. E refresque-se. E você sempre pode atualizar com o comando R ou eu acredito que o controle é. Estou apenas usando o Google Chrome, a propósito, não importa qual navegador você está usando. Mas você pode apenas recarregar a página e ela diz olá do Caleb e você pode mudar isso a qualquer momento. Poderíamos dizer olá da Terra. E você poderia fazer File Save ou você pode apertar o controle S ou comando S, eu acredito que é. Sim, Comando S em um Mac, acredito que seja Controle S no Windows. Vá em frente e salve esse arquivo. Vamos voltar aqui, atualizar esta página. Olá da Terra. E então essa é a etiqueta do título. Agora, você só deve ter uma etiqueta de título porque ela só é realmente usada uma vez. Tendo que tags de título, seu navegador não vai saber qual deles usar. Então, certifique-se de que você só tem uma etiqueta de título. Agora a coisa sobre isso, este elemento em particular, este elemento título, ele tem que viver dentro do elemento head, e isso tem que viver dentro de seus elementos HTML. Então agora estamos entrando em nidificação. Temos este elemento HTML, e dentro dele temos título de cabeça, elemento de fechamento, e temos conteúdo corpo elemento de fechamento. E isso é tudo o que há para criar um título em uma aba aqui usando HTML nascent easy. Quando você se sentir desconfortável com isso, vamos continuar a próxima lição e começaremos com a adição de algum conteúdo real a uma página. Então ele não diz apenas olá mundo, ele vai dizer olá mundo e talvez um título que poderíamos escrever um parágrafo, podemos ter vários títulos, coisas assim. 7. Parágrafos e títulos: Ok, vamos dar uma olhada nos parágrafos e cabeçalhos. E é aqui que uma página vai realmente começar a tomar um pouco mais de forma aqui. Então não vai só dizer “olá mundo”. Agora um parágrafo, e como muitos elementos em HTML é apenas uma tag p. Mas porque é um elemento e é um elemento bastante padrão, podemos fazer p e então fazemos barra p. E isso é novamente, esta é apenas a nossa sintaxe. Esta é a nossa etiqueta de abertura ou etiqueta de fechamento. E a coisa toda juntos é um elemento. Então p significa parágrafo, mas nós não escrevemos parágrafo, nós apenas escrevemos p para parágrafo. Aqui. Podemos escrever algum texto aqui ou se você quiser manter seu código limpo, podemos ir em frente e colocá-lo em linhas separadas. Então vou manter isto em linhas separadas. Acho que parece um pouco mais limpo assim. E o que eu vou fazer é digitar Lorem, hit tab. E preenche minha área de texto com um monte de Lorem Ipsum, palavras latinas. Eu não tenho idéia do que isso significa, mas é uma coisa comum que você vai ver em desenvolvimento web. Então vamos em frente e salvar. Então você pode ir até Arquivo, Salvar ou comandar S ou Control S em uma janela. Vamos voltar para a página que estamos criando e atualizar. E agora temos este texto lorem ipsum. Agora vamos em frente e criar um título para esta página, um cabeçalho. Então, apenas dentro do corpo, acima do elemento P, não dentro dele, mas acima dele. Vamos escrever H1. E a coisa boa sobre VS Code é quando você escreve um elemento, sempre que ele diz Emmett abreviação, você pode apenas pressionar tab. Então eu apertei Tab e ele escreve meu código para mim e então eu posso escrever algo no interior. Você pode dizer, Bem-vindo ao HTML 101. Vamos em frente, salve essa página. Volte para o nosso navegador e clique em Atualizar. Temos este grande texto aqui, HTML, Bem-vindo ao HTML 101 e, em seguida, lorem ipsum aqui. Agora, se isso parece menor em sua tela é porque eu estou realmente ampliado para um 175%. O seu deve ser um pouco mais parecido com isto. Eu só fiz isso maior para que seja mais fácil ver na sua tela. Esse não é o único título de tamanho que podemos ter. Podemos ter elementos H2, H3, H4, H5, H6. Então vamos em frente e criar uma tag H2. E isso pode ser como um subtítulo, um guia para iniciantes de codificação. E assim você pode ver que estou ficando um pouco mais rápido aqui, mas a sintaxe permanece a mesma. Esta é uma tag HTML de abertura, uma tag H2, e esta é uma de fechamento. Novamente, você tem essa barra e, em seguida, o nome do elemento, e isso só diz que tudo dentro daqui precisa ser um tamanho de fonte H2. E tudo no um entre as duas tags H1 precisa ser super grande. E tudo entre as duas tags de parágrafo é o seu parágrafo apenas textos gerais para a maior parte. Então guarde isso. Vamos voltar aqui e ver como é um H2. Deve estar bem entre estas duas seções do texto. E você pode ver que é um pouco menor. O que eu gostaria que você fizesse para alguma experiência prática agora é criar um H1, H2, mas então também criar um H3, criar um H4, H5, H6. E novamente, tudo o que estou fazendo aqui é digitar um nome de elemento. Assim que a abreviação Emmett aparece, eu posso apertar tab e ele cria o elemento H6 para mim. Então vá em frente e dê uma olhada em como H1 até H6 se parece. Adicione algum texto extra aqui. Lol churrasco. Vá em frente e guarde isso. E quando você virar a página e clicar em atualizar, confira os diferentes tamanhos de cabeçalho. E você pode ser um pouco surpresa quando H6 parece. 8. Whitespace não importa: Espaço em branco não importa. Agora eu mencionei isso muito cedo, mas o espaço em branco não importa. Você pode ver que eu realmente tenho um elemento bem aqui, um H2. Na verdade, tudo isso é um elemento. E eu não tenho nenhum espaçamento ou novas linhas ou qualquer coisa. É apenas uma etiqueta de abertura H2O, um monte de impostos e, em seguida, uma etiqueta de fechamento H2. Mas com um parágrafo, eu tenho o elemento p aqui, e então eu realmente dividi isso em uma nova linha. Adicionamos um monte de espaços extras aqui. E então, no final de novo, eu a quebrei em uma nova linha, um monte de espaços extras. Agora seu navegador não se importa com quantos espaços existem. Ele vai tentar condensar tudo em um só espaço de qualquer maneira. Então, como um exemplo, Vamos em frente e adicionar um espaço logo após a palavra ipsum. Só vou adicionar um monte de espaços. Agora, se estivéssemos escrevendo um artigo de jornal, isso ficaria terrível. Seria duas palavras, uma vírgula, e então todos esses espaços diferentes. E aqueles pequenos pontos que você vê. Depois que eu destacar essa base que só me diz que é um espaço que é, que não é realmente eles estão apenas me dizendo que há um espaço. Então vamos em frente e salvar isso. Vá para o seu navegador e vamos atualizar. E vamos ver assim que eu apertar a atualização, absolutamente nada vai mudar. Então vamos recarregar esta página. Posso recarregar isto umas 100 vezes. Nada parece que muda. No entanto, se formos se clicarmos em algum lugar da página, podemos ir com o botão direito do mouse exibir fonte da página. E nós podemos ver todo o nosso código-fonte e isso é exatamente o que eu escrevi no código VS. E você pode ver que todos os espaços estão lá. Mas seu navegador diz: “ Não, você não precisa de todos esses espaços.” Vamos comprimir isso em apenas um espaço visual, então o espaço em branco não importa. Outro exemplo aqui é que eu poderia adicionar todas essas novas linhas e há um monte de novas linhas. Você pode realmente ver que há tantas linhas novas que, como se eu realmente não pudesse ler o código mais. E vamos em frente e adicionar um pouco mais de lorem aqui. Então Lorem Tab e eu devemos ter dois parágrafos, certo? Eu deveria ter este primeiro parágrafo. E eu posso me livrar desse espaço em branco porque não importa. Tenho três linhas novas e depois tenho outro parágrafo. Agora, intuitivamente, você pensaria que criaria dois parágrafos para nós. Não vai fazer isso. Então, se eu salvar isso, virar para o navegador, o que você vai ver é que estes são combinados juntos. E novamente, ele pegou todas essas novas linhas e esmagou-a em um único espaço para você. Agora, se você quiser vários parágrafos, mas você tem que fazer é você tem que fechar este elemento parágrafo. Isso é perto do elemento parágrafo e isso cria que ganhou seu primeiro parágrafo. Vamos derrubar isso e vamos subir aqui. E nós só temos que reabrir isso. E vou te mostrar o que estou fazendo aqui em um segundo. E então tudo o que fiz foi fechar o primeiro elemento aqui em cima e reabrir um novo aqui. Então, se olharmos para isso juntos, temos o parágrafo um, parágrafo dois. Eles não estão aninhados. Não é um parágrafo dentro de um parágrafo. É um parágrafo. E então fechamos e depois um segundo parágrafo e fechamos isso. Então, vamos em frente e clique em Salvar. E agora, quando atualizarmos nossa página, veremos que isso é, na verdade, dois parágrafos separados, da maneira que provavelmente queríamos que fosse em primeiro lugar. Então a lição aqui é espaço em branco não importa. Se você quiser usar espaço em branco extra. Há maneiras de fazer isso, como envolver seus textos em parágrafos diferentes ou H1 diferentes ou h twos diferentes. E é só mais um exemplo. Vamos, vamos em frente e vamos ver o que acontece quando eu coloco isso em uma nova linha, bem no meu H1 apenas para demonstrar que, que isso não é específico apenas para parágrafos também. Então, vou guardar isso. Vá até aqui, aperte a atualização, e não está em uma nova linha. E, novamente, isso é porque nosso navegador não carrega, mesmo que tenhamos escrito o código dessa forma, nosso navegador não se importa que ele tenha esse espaço extra em branco. Então eu vou apenas ir em frente e limpar isso. Apague esse espaço extra em branco porque gosto que meu código seja legal e arrumado. E isto é o que nos resta. Em seguida, vamos dar uma olhada nos elementos de aninhamento um pouco mais. Na verdade, já estamos fazendo isso com HTML, título da cabeça, corpo H1, H2 e parágrafo. Estes estão aninhando, mas vamos entrar em alguma terminologia. 9. Nesting de elementos HTML: Certo, vamos dar uma olhada no aninhamento de algum código. Então, na verdade, já estamos aninhando nosso HTML. E o que isso significa é que temos um elemento HTML. E então dentro disso, em vez de apenas textos regulares como vemos com um parágrafo ou um título um, título dois, temos outro elemento e então podemos ter outro elemento. E isso pode continuar essencialmente para sempre. Agora o que eu vou fazer é rolar para baixo minha página logo abaixo dos meus dois parágrafos que eu tenho. E eu vou criar um novo elemento chamado div. Ou se você quiser usar a abreviação de Emmett DIV. E assim que os vir na abreviatura aqui, vá em frente e aperte a letra do teclado e ela preenche para você. Agora um div honestamente não significa nada. Vamos falar mais sobre divs na estrada, mas isso não faz nada como um parágrafo vai separar seu texto com. Por exemplo, um parágrafo vai separar seu texto aqui. Tem um bom espaçamento lá dentro e cria outro para você. Um div realmente não faz isso. Então vamos em frente e dizer que este é um elemento div. Vá em frente e salve isso, atualize sua página. Vai dizer que este é um elemento div. E agora dentro deste elemento, e isso vai parecer um pouco estranho no início, mas nós temos um elemento div. E então podemos ter algum texto lá dentro. Podemos ter outro div aqui também. Podemos dizer div. Este é um elemento aninhado. E vamos fechar esse também. Vamos em frente e atualizar esta página. E nós vamos vê-lo aparecer na linha logo após ele. Mas esta coisa toda está embrulhada em uma div. Agora, uma boa maneira de ver isso é clicar com o botão direito do mouse em sua página. Vá para Inspecionar. E eu vou fazer isso um pouco maior aqui. Opa, isso foi muito grande. E vamos rolar para baixo e podemos passar o mouse sobre os elementos aqui. Então esta é a nossa ferramenta de inspeção. É incrivelmente útil. Você vai querer usar isso para praticamente tudo relacionado ao front-end. Então HTML, CSS e JavaScript na estrada. Mas, por enquanto, vamos ficar com HTML. E o que temos aqui é um div. E nós podemos abrir essa div e podemos ver que há alguns textos e você pode ver que enquanto eu passar o mouse sobre ela, ele está realmente mudando o que é selecionado na minha página. E então nós temos um elemento filho e isso é o que ele é chamado quando ele é aninhado, é um elemento filho. E isso está na segunda linha. Poderíamos ir uma camada mais profunda também. Então eu coloquei isso em uma nova linha só para manter o código agradável e arrumado. E eu poderia fazer mais um DIV, ou vamos experimentar. E vamos fazer um parágrafo dentro de uma div. Este é um parágrafo. Vá em frente e guarde isso. Passe para o meu navegador e clique em Atualizar aqui. E você pode ver como eu pairar sobre as coisas, vai me mostrar o que exatamente um selecionado. Então eu tenho um elemento div aqui, e ele está selecionando tanto o div aninhado e o parágrafo. Considerando que aqui em cima, está apenas selecionando um parágrafo de cada vez. Você pode ver isso enquanto eu viro entre eles. Então aqui eu tenho o over-arching, o elemento recipiente é chamado div. E então eu tenho algum texto e então eu tenho outra div, e então eu tenho dentro dessa div, um parágrafo lá, eu tenho texto aqui e então eu tenho um parágrafo aqui. E você pode realmente ver que esse parágrafo tem um monte de espaçamento em torno dele, então ele meio que empurra seu texto um pouco para baixo. Agora vamos dar uma olhada em alguma terminologia aqui. Este aqui. Este vai ser o seu elemento pai e este vai ser um elemento filho. Então, o que isso normalmente parece é que você tem algum tipo de elemento pai barra pai e, em seguida, uma tag de fechamento como essa. E então você tem algum tipo de elementos filho e o fechamento dessa tag lá novamente, não importa se você tem espaço extra em branco. Você pode colocar isso em várias linhas, se quiser, o que eu vou realmente fazer. E então podemos ir uma camada mais profunda. Poderíamos chamar isso de neta, neta, elemento neto. E isso pode continuar e continuar para sempre. Então podemos dizer criar neta. E ele continua e continua. Agora a terminologia vai mudar com base no que você está falando. Então, se eu me livrar do neto e do bisneto, quando estivermos trabalhando aqui. Este é o nosso elemento principal. Isso se chamava criança. E se estamos falando sobre o elemento em torno dele, aquele que o envolve assim, é chamado de elemento pai. Agora, se estamos trabalhando no elemento pai e queremos falar sobre um elemento dentro dele. Nós chamaríamos de criança. Agora estamos, as mudanças de terminologia é se temos elemento neto e este é o que estamos trabalhando, e este é o nosso elemento principal. Digamos que estamos falando com um colega de trabalho sobre esse elemento em particular. Nós chamaríamos isso de elemento , qualquer que seja, talvez seja um DIV. A criança, então, se tornaria o pai. pai tornar-se-ia então o avô. E assim é relativo como em uma hierarquia familiar. Agora, nenhum destes são realmente elementos reais. Então vamos em frente e excluí-los. E só por fundos, Iz vamos em frente e vamos adicionar um elemento h3 aqui, apenas um pequeno título. E diz, este é um exemplo de aninhamento de elementos. Então eu salvei esse arquivo e vou atualizar isso. E vamos fechar nossa inspeção com este x aqui. Este é um exemplo de aninhamento de elementos, e isso é tudo em um elemento. Agora, na próxima lição, vamos ver por que nidificação é realmente muito, muito importante porque agora isso não era muito importante. Não tínhamos que aninhar isso, mas precisávamos saber como isso funciona para chegar à próxima lição. Então, na próxima lição, vamos dar uma olhada em negrito, itálico e sublinhar seu texto. E então vamos misturar e combinar todos os três. 10. Ousado, italics e salienta: Muito bem, bem-vindos de volta do vídeo de nidificação. Vamos em frente e realmente criar algo aplicável aqui. Então eu vou apenas fazer algum espaço para trabalhar só porque eu gosto de um monte de espaço extra. E novamente, espaço em branco não importa, nós sabemos isso certo? Então vamos criar um novo parágrafo aqui, e vamos fechar automaticamente essa tag de parágrafo. E aqui vamos escrever mais baixo. Aperte Tab e obtemos algum Lorem ipsum, assim como fizemos antes. Agora, se quisermos ousar alguns textos, você acha que seria a palavra negrito. Não é muito intuitivo, mas é muito perto. Só usamos a etiqueta B. Então poderíamos fazer B e vamos ousar as primeiras quatro letras ou palavras ou outras. E então eu tenho uma tag p, um parágrafo, e aninhado como um elemento filho é o elemento negrito. E assim guardo isso. E se eu passar pelo Google Chrome e clicar em Atualizar, você pode realmente ver que meu texto aqui é negrito e o resto não é negrito. Ok? Então isso é aninhamento e isso está realmente entrando em algo um pouco mais interessante, um pouco mais útil, um pouco mais aplicável para realmente aprender HTML. Em seguida, vamos em frente e vamos itálico. Então itálico para fazer algo tipo de realmente este é um bom exemplo. O que quer que eu tenha feito fez este itálico. Então é uma espécie de caligrafia ish, I. Vamos em frente e adicionar um elemento i a estas três palavras. Então, se eu atualizar a página, quais temos aqui? Copa USD. Eu nem tento dizer isso, mas é o que ele tem 30 palavras aqui. E se eu apertar atualizar, podemos ver que isso mudou automaticamente. Por último, temos Sublinhado e realmente é exatamente a mesma coisa. Então você acha que seria sublinhado, mas não é. Usamos uma espécie de abreviação quando se trata de HTML. E dizemos que é o novo elemento. E mais uma vez, isso tem uma etiqueta de abertura e fechamento. Todos os três têm tags de abertura e fechamento. Vou guardar isso, voltar aqui, apertar a atualização. E podemos ver que isso está agora sublinhado. Agora, onde isso fica realmente, muito interessante é que podemos criar outro parágrafo. E Laura, e você vê o quão rápido está ficando porque eu tenho que completar a conta. Se eu quisesse fazer isso ousado, itálico e sublinhado. E vamos nos livrar disso. Faça apenas uma linha em vez de duas ou três frases lá. Vamos apenas fazer uma frase. Eu posso dizer que ser atingido Tab é ousado para mim. E então ele quer que eu coloque minha mensagem aqui. Bem, isso é bom. Mas o que vou fazer aqui é pegar tudo isso. Vou acertar o Controle X ou comando exon MAC. Isso apenas corta na minha área de transferência e então controle V ou Command V como em violeta para colar. Então, quando eu salvar, atualizar, vamos ver que agora temos uma frase ousada. Agora, se quisermos fazer este itálico também, não é BI para negrito, itálico, é apenas b. E então, dentro dele, dizemos I. Então podemos ir até aqui, apertar Tab para recuar mais um pouco. E barra I. Uma coisa a notar também é que o seu texto pode realmente rolar para fora da tela aqui. Você pode ir para suas configurações e você pode alterar sua quebra de palavra ou suas configurações de quebra de texto para que ele Briggs automaticamente em duas novas linhas. Então você pode ver que essa coisa toda para mim é a linha 27, mesmo que ela esteja abrangendo várias linhas, isso é apenas para que não seja uma longa linha direita em toda a página e eu tenho que rolar para a esquerda e para a direita. Ok, então eu adicionei um parágrafo, negrito, itálico. Vamos em frente e salvar e atualizar. E agora isso é ousado e itálico. Então isso está funcionando muito bem. Por fim, vamos adicionar um novo elemento, e eu apenas mover esse texto para cima rapidinho. Vá em frente e salve esse arquivo, atualize. E agora podemos ver que é ousado, itálico e sublinhado, mas há uma regra aqui. Sua tag interna, sua tag mais interna, tem que ter uma tag interna mais fechamento. Então, se o último que você tem é um u, a primeira tag de fechamento é um u. Se o segundo elemento que você tem aqui é um i, o segundo último é uma barra I, a mesma coisa com negrito. Então começamos com negrito aqui e nós fechamos e você pode realmente ver, e é por isso que eu recuei assim, para que você possa ver que estes combinam dessa maneira. Você sempre quer que seus elementos combinem dessa maneira. Coisas engraçadas podem acontecer se você não combinar suas tags de abertura e fechamento, isso é muito importante. Então, neste ponto, se você quiser ir em frente e dar uma chance, vamos tentar aninhar um parágrafo. Então crie um elemento de parágrafo. Em seguida, negrito seu texto, itálico seu texto, sublinhe seu texto. E não importa se é negrito, itálico ou sublinhado ou qualquer outra ordem, pode ser itálico, sublinhado negrito, pode ser sublinhado negrito, itálico. Não importa, desde que estes correspondam. E, em seguida, adicione algum texto lá. E eu quero que você tenha certeza de que seu texto é ambos. Eles não são os dois, mas todos. Deve ser negrito, itálico e sublinhado, e deve estar em um elemento de parágrafo. Vá em frente e dê uma chance assim que estiver pronto para seguir em frente e te vejo na próxima lição. 11. O elemento divisor: Ok. Olá e bem-vindo de volta. Nesta lição, vamos estar falando sobre um elemento div. Então o que eu quero fazer aqui é que eu já tenho um monte de código e eu só quero recolhê-lo para que seja um pouco mais legível para mim, porque isso está ficando bastante longo. E livre-se desse espaço extra em branco só porque gosto que meu código seja arrumado. E se quiséssemos, poderíamos desmoronar apenas o olho, apenas o talão, apenas um parágrafo. Mas nesta lição, vamos em frente e falar sobre div. Div é um elemento fictício. E, na verdade, não significa nada. Então, como dissemos, P significa parágrafo B significa negrito, I significa itálico. Div é só uma divisória. E você pode realmente ver que a referência MDM aqui do VS Code diz que o elemento div não tem nenhum significado especial em tudo. Representa seus filhos. Ele pode ser usado com classe Lang e atributos de título para marcar semântica, comentário, blá, blá, blá. Isso está ficando um pouco avançado demais para nós no momento. Mas basicamente a primeira linha que diz que o elemento div não tem nenhum significado especial. Isso é importante. Não tem significado especial. Agora o que vamos falar aqui é que uma div não tem significado especial, isso não tem significado especial. Mas vamos também dar uma olhada em como ele funciona lado a lado. Porque nesta última lição, que fizemos ousado, itálico e sublinhado, poderíamos usar todos os três. E, na verdade, um exemplo melhor é este em que tínhamos um parágrafo, mas então tínhamos negrito e esse texto em negrito estava ao lado do texto normal. E então tivemos itálico. E esse texto em itálico estava bem ao lado do texto normal e do texto subjacente. A mesma coisa, uma e outra e outra vez. E isso entra neste conceito de elementos de bloco versus elementos inline. Então, uma div é um elemento de bloco. E o que quero dizer com isso é que se eu apertar o Comando C ou o Controle C, e então o Comando V ou o Controle V, eu copiei toda a linha. E esta é uma segunda linha. Então vamos em frente e salve isso, atualize nossa página aqui. E você pode ver aqui embaixo, ele só diz, isso não tem significado especial. Esta é uma segunda linha. E se eu fizer isso, clique com o botão direito do mouse e inspecionar, quando eu passar o mouse sobre o elemento, você pode realmente ver que essa linha azul que vai direto através de toda a página, que é um elemento de bloco. Então, mesmo que ele esteja realmente apenas precisando do, o espaço de, isso não tem nenhum significado especial. Você pode realmente ver que isso está ocupando toda a linha. Isso é chamado de elementos de bloco. E você vai ver isso o tempo todo porque é, é muito bom saber. A razão para isso é porque, por exemplo, se este parágrafo aqui em cima não era um elemento de bloco desses dois parágrafos iria se fundir e eles não seriam realmente parágrafos. Seria um parágrafo mesclado com o segundo parágrafo para fazer um grande. Não é o que queremos o tempo todo. E então a coisa boa sobre este parágrafo é também um elemento de bloco é que ele vai ocupar toda a largura da sua tela. Vai ocupar o máximo de imóveis possível. Então vamos voltar ao nosso código e vamos até tentar colocar isso lado a lado em nosso código. Então está abrindo uma div e fechando-a, abrindo outra div e fechando-a. Vamos salvar essa atualização e veremos que nada mudou. Nada mudou, literalmente nada mudou. E isso é novamente porque estes são elementos de bloco. Então nosso navegador definido, ok, você tem um elemento está fechando outro elemento ele está fechando. Na ferramenta de inspeção. Isso é exatamente o que nosso navegador vê. Isto foi corrigido para nós, por isso está em duas linhas diferentes. E novamente, ambos são elementos de bloco, então eles vão ocupar o máximo de espaços que podem ser separados pelo próprio elemento. Agora este é um conceito estranho, mas na próxima lição vamos falar sobre elementos de bloco versus elementos em linha, e como você pode usá-los em conjunto e qual é a diferença. 12. Elementos de bloco vs. elementos inline: Ok, vamos dar uma olhada em elementos de bloco versus elementos em linha. Até agora temos trabalhado principalmente com elementos de bloco. Agora, um elemento de bloco é se eu clicar com o botão direito do mouse e inspecionar, você pode ver que ele ocupa toda a largura da minha página, mesmo que ele esteja usando apenas o que 30% do texto está realmente dizendo. Alocar toda a largura da página para este elemento H2 específico, parágrafos ou elementos de bloco também. H 3s, H 4-5-6, até mesmo o que está no topo da página. Mas o que não é é se descermos aqui, temos este parágrafo em particular com elementos aninhados. Agora a próxima coisa não tem nada a ver com isso. O que é importante notar é que este elemento B para negrito, ele não está ocupando toda a largura de toda a página. Na verdade, está sentado lado a lado com o seu texto normal. E então temos itálico, sublinhado de texto regular e, em seguida, algum texto mais regular agora sublinhado, itálico e negrito. Estes são chamados elementos inline e tudo o que significa é que eles podem existir lado a lado com outros elementos. Considerando parágrafo, você pode ver que eu só tenho texto até cerca de aqui. Se eu passar o mouse sobre isso à direita de onde selecionei o texto, ele ainda está ocupando esse espaço extra. Isso é um bloco de elementos. Agora você não precisa ter elementos inline dentro de um elemento de bloco. Embora normalmente seja isso que você vai acabar fazendo, mas não há regra para isso. É que, este é um elemento inline. E poderíamos colocar itálico bem ao lado de negrito, bem ao lado de subjacente. Realmente não importa porque é, é um elemento inline. Então ele vai ocupar a menor quantidade de espaço possível versus elementos de bloco, como aqui embaixo. Esta div é um elemento de bloco. Esta div é um elemento de bloco. E vai ocupar toda a largura. Agora, alguns casos de uso são negrito, itálico e sublinhado. Mas também se você quisesse um elemento de bloco, você poderia usar um título I pode H1 a H6, e isso vai colocar seu texto maior em sua própria linha. E o que é bom nisso é que já temos um título aqui. Bem-vindo ao HTML 101. Temos um subtítulo aqui usando um elemento h2. E então temos alguns parágrafos. Estes são todos elementos de bloco e isso é o que está fazendo nossa página olhar agradável. Agora, se por alguma razão esta ousada, somos um elemento de bloqueio, e vou mostrar-vos como isto vai ser. Mas não tente isso. Eu não quero que você tente isso porque isso está saindo do escopo do HTML, mas eu vou mostrar a vocês como isso parece. Bloco de exibição. Então, o que acabei de escrever, não precisa tentar. Mas eu mudei. Eu sequestrei seu comportamento padrão para ser bloco em vez de inline. E você pode ver que o ousado está agora em sua própria linha. E é por isso que os elementos inline são muito importantes. Porque se você tiver negrito em sua própria linha, você nunca terá a capacidade de selecionar um determinado pedaço de texto em um parágrafo e torná-lo negrito, sublinhado ou metálico. Agora há muitos elementos diferentes lá fora que estão inline e há muitos deles que estão bloqueados. E então você vai ter que tipo de descobrir isso como você move através do aprendizado de HTML. Há muitos elementos para que possivelmente cobrir, provavelmente há centenas deles. Mas na maior parte, você vai usar um punhado deles praticamente todos os dias. E você precisa saber a diferença entre um elemento de bloco como este que eu sequestrei, ou um elemento inline. Para que você possa realmente tornar seu texto apresentável de uma maneira legível por humanos. Então essa é a diferença entre elementos de bloco e elementos de linha. 13. Links para outras páginas: Ok, então a web é feita de links para outras páginas. Isso é realmente tudo o que é. Y tem uma página aqui, mas e se eu quisesse vincular ao Google ou se eu quisesse vincular a outra página das minhas primeiras coisas? Primeiro, vamos começar usando o formulário mais simples. Vamos ligar para o Google ou Facebook ou Instagram ou algo assim. Então, nesta lição, vamos criar dois tipos diferentes de links. O primeiro, e acabei de virar para o VS Code aqui. Como o primeiro vai ser um link apenas para o Google. E este é um elo absoluto. O segundo vai ser um elo relativo. Então, um link começa com o elemento a, e isso significa âncora. É uma âncora de hipertexto. Podemos ver isso aqui. Obrigado VS Code para preencher que me informou. Então nós temos uma tag âncora e isso realmente usa nosso primeiro atributo. Ainda não usamos um atributo. E isso vai ser HREF. E isso significa uma referência de hipertexto. E basicamente é assim que vamos apontar para outra página web. Agora, já faz um pouco de tempo. Mas um atributo é sempre o nome do atributo igual. E então ou citações ou apóstrofos, eles têm que começar e terminar com o mesmo. Não importa qual você usa, mas tem que começar e terminar com o mesmo. E vamos em frente e fechar isto uma etiqueta. E digamos que este é um link. E vamos ver o que acontece. Quando eu voltar aqui e atualizar minha página. Parece uma ligação. Mas quando eu clico, ele realmente não vai a lugar nenhum. Então o que eu quero fazer aqui é HREF é igual a, e eu quero o link completo para qualquer site incluindo a parte HTTP que é vital. Você precisa do HTTP toda vez que quiser um link absoluto. Então vamos em frente e ir para Instagram.com. Então tudo o que eu fiz lá foi HTTP ou HTTPS. A maioria dos sites têm que s Estes dias, dois pontos barra barra e, em seguida, o site, assim Instagram.com. E, na verdade, este corte nem é necessário. Vamos salvar isso e atualizar. E quando eu vou até aqui, você pode ver que o link realmente mudou para um azul porque eu ainda não cliquei nele. E vamos clicar no link e olhar para isso. Trouxe-me ao Instagram. Então eu vou voltar. E talvez eu não queira o Instagram, talvez eu quisesse algo um pouco menos pessoal. Vamos ao Google. Então vá em frente, salve, atualize. E você pode ver no canto inferior esquerdo diz HTTPS, Google.com. Clique nisso. E boom, isso nos leva ao Google. E isso é tudo o que há para realmente adicionar um link para qualquer página que você tem. Então, novamente, é o elemento de âncora. O atributo HREF é igual à cotação e, em seguida, o URL do site, esse link e, em seguida, algum texto. Então podemos dizer que isso vai para o Google. E porque isso está passando para duas linhas no meu editor, eu estou colocando isso em duas linhas diferentes. E novamente, o espaço em branco não importa. Então, não importa que eu tenha todos esses espaços diferentes aqui, e eu ainda posso voltar ao meu navegador e clicar em Atualizar. E a única coisa que muda o texto, não o espaçamento extra. E assim mudou o texto. Isto vai para o Google. E ele faz. Isso é bom, mas e se você quiser vincular a sua própria página? Bem, isso é um pouco diferente porque você pode ver aqui em cima, não há HTTPS, este é um arquivo e você pode teoricamente vincular a ele, mas você não quer, porque enquanto eu estiver em um Mac, então começa com um arquivo, mas Se você está no Windows, ele começa com C. E se você está no Linux, é apenas uma barra. Então, não vai funcionar para todos. E precisamos ter certeza que isso funciona em todos os sistemas operacionais. E a maneira como contornamos isso é usando um link relativo. Assim, um link relativo parece quase idêntico a um link absoluto ou uma âncora absoluta. E podemos fazer um HREF é igual a, temos nossas citações aqui. E vamos dizer segunda página ponto HTML. Feche a etiqueta de abertura e diga que isto vai para a segunda página. E nós sempre fechamos. Sempre que temos texto dentro de um elemento, nós sempre fechá-lo com uma tag de fechamento. E vamos dar uma olhada nisso. E podemos ver que esses links estão lado a lado. Então sabemos da última lição que estes são elementos em linha porque eles funcionam lado a lado, que significa que podemos colocá-los dentro de um parágrafo muito bem. E quando eu clico isso vai para uma segunda página no canto inferior esquerdo, você pode realmente ver que ele está indo para usuários Caleb, desktop italiano, segunda página ponto HTML, e isso realmente não existe. Então, quando eu clico neste link, ele vai para uma página 404. 404 significa que sua página não existe, pois seu arquivo não foi encontrado, pode ter sido movido ou excluído. Ênfase nisso, se você estiver movendo arquivos de uma pasta para outra pasta, ele pode ser movido ou excluído. E basicamente está dizendo que o arquivo não existe. Então vamos em frente e fazer esse arquivo existir. Vou fechar esta conta porque isso não é necessário. E vamos fazer isso. Vou copiar esta página inteira. E eu vou “File, Save As”. E onde quer que você tenha helloworld dot HTML, e vamos chamar isso de 1 segunda página ponto HTML. Salvar. E então agora temos uma segunda página HTML ponto. E eu posso abrir ou Comando ou Controle O e abrir o “Olá Mundo”. E agora temos dois arquivos lado a lado. Então, na segunda página um, o que vou fazer é apagar praticamente tudo dentro do corpo. Então vamos apagar todas essas coisas. Vamos mudar o título para a segunda página. E digamos um H. Esta é a segunda página. É tudo o que vamos fazer. Então eu guardei isso. E quando eu voltar aqui, isso agora existe neste local de arquivo no meu computador. E se eu apertar atualizar, ele realmente funciona. Então, se eu voltar, refresque isso só para uma boa limpeza. Se eu atualizar isso e eu digo que isso vai para a segunda página, era 414. Dizia que faltava um ficheiro ou página em falta. Agora não é agora ele vai realmente carregar a página para mim. Finalmente, em nossa segunda página, vamos em frente e adicionar mais um link âncora de volta à nossa página Hello World. E vamos dizer Olá Mundo ponto HTML. Agora, a coisa a ter em mente aqui é que este não é um elo absoluto. Ele não começa com HTTP, não é um link absoluto. Isso só diz ir para este arquivo particular que acontece de estar na mesma pasta que a segunda página. Então estes estão lado a lado na mesma pasta. E ele vai dizer, oh, olhar para este arquivo em particular. Então ele está realmente vinculando a outro arquivo, não necessariamente uma página da Web. E ele fica um pouco em como as páginas são realmente servidas em um servidor. Basicamente porque o servidor é apenas o computador de outra pessoa. Mas este poderia dizer: “ Volte para casa, economize, atualize. Vamos voltar para casa. Vou fazer isso só um pouco maior aqui. Então esta é a nossa segunda página. Volte para casa. E agora temos duas páginas que se ligam umas às outras. E se você nos der uma chance e fizer isso funcionar, isso significa que você criou com sucesso uma rede de páginas. Você não tem apenas uma página da Web agora, você tem um site. 14. Opening links em novas janelas: Ok, vamos dar uma olhada em abrir um link em uma nova janela. Então nós provavelmente todos sabemos que você pode controlar ou comandar clicar em um link e isso vai abrir em uma nova guia. E talvez não queiramos isso. Talvez queiramos forçar as pessoas a, sempre que clicarem em um link, abrirem em uma nova guia, que pode ser o mesmo que clicar com o botão direito do mouse e abrir o link em uma nova guia. Mas se quisermos forçar isso a alguém, temos esse poder. Então eu vou para Helloworld dot HTML, e para o Google toda vez que eles vão para uma página externa, porque esta é uma página interna ou uma página relativa, e este é um site externo ou um link absoluto. Podemos dizer que o alvo é igual a, e este parece um pouco estranho. Há um sublinhado lá, mas Target é igual a branco. E então este é o nosso atributo, é igual ao apóstrofo sublinhado em branco é o valor tem que ser esse sublinhado em branco. E então nosso atributo de fechamento, aspas. Vamos em frente e salvar isso. E vamos apenas atualizar esta página. E agora não parece que nada mudou. Mas quando eu clicar nisso, eu não vou comandar clique ou clique de controle. Não vou clicar com o botão direito do mouse e clicar em abrir link na nova guia. Eu só vou clicar neste link e ele vai abrir em uma nova guia para mim automaticamente. Assim, agora temos duas guias. E é assim que você abre um link em uma nova guia. 15. Adicionando imagens: Tudo bem, vamos dar uma olhada em adicionar uma imagem à nossa página. Então, para uma imagem, nós realmente precisamos de um arquivo de imagem e eu gosto de ir a um lugar chamado Splash.com. E podemos usar imagens livres, royalties, livres. E eu só quero qualquer imagem. Realmente não importa o que a imagem é, embora este seja um laptop muito perfeito. Isso é praticamente o que eu quero. Clique e eu vou baixar isso e eu vou baixar o maior que eu quero, só para que eu possa realmente fazer. Obtém um bom exemplo disso em apenas um segundo, talvez não muito grande, essa é uma imagem muito grande. Vamos baixar o grande. E agora isso vai para a minha pasta Downloads. E eu realmente quero que isso viva ao lado do meu Hello World e segunda página, e isso está na minha área de trabalho. Então eu preciso abrir essa pasta e movê-la para minha área de trabalho. Caso contrário, isso não vai funcionar. Então, se eu apenas copiar este arquivo aqui, vá para a minha área de trabalho, colá-lo. E onde você está? Bem ali. Vamos chamar isso de imagem do Caleb. Na verdade, não é a minha imagem. Eu não tirei essa imagem. Os Xps tiraram esta imagem, mas vou chamá-la de imagem do Caleb só para manter a imagem simples. Então vamos voltar para aqui e depois vamos, vamos fechar. Não precisamos mais disso aberto. E vamos para o código VS. E agora vamos adicionar uma imagem. Agora isso é interessante porque as imagens não têm texto, então não precisa de uma tag de fechamento e a resposta na verdade é não. Então vamos em frente e criar um H3 e H4, H3, vamos chamar isso de imagens. E para criar uma nova imagem é a tag IMG. Não é imagem, é IMG. Agora, se eu fechar isso, há duas maneiras de fechar isso. Portanto, esta é uma tag de fechamento automático, o que significa que não tem imagem de barra. Não é assim que funciona porque não há texto, há mais nada para exibir. Em vez disso, vamos usar um atributo. E então podemos dizer que há uma imagem aqui. E você pode realmente ver um perto como este. Isso é chamado XHTML é, é uma maneira mais antiga de fazer as coisas e totalmente válida ainda, eu escrevo um monte de código desta forma porque eu sou um pouco mais velha escola, mas ainda é completamente válida. Ou você pode apenas escrever IMG e você quer a fonte da imagem. O SRC para fonte é igual ao ponto da imagem de Caleb. Agora isto é importante. Você precisa saber essa extensão de arquivo. E essa extensão de arquivo aqui era dot JPEG. Jpeg. Agora, se o seu é maiúsculo ponto-ponto, GAAP, G como este ou assim, certifique-se de que corresponde. Tem que ser perfeito. Então o meu não era que o meu era dot JPEG. Eu posso ir em frente e salvar isso e vamos rolar para baixo para onde ele deveria aparecer. E vamos ver essa imagem gigante. E é por isso que eu queria essa imagem enorme aqui. Porque esta era uma imagem muito grande. Legal, a imagem apareceu, mas é muito grande. Agora o que podemos fazer é adicionar um segundo atributo. Podemos dizer que a largura é suposto ser, e isto vai ser em pixels, digamos 500. Vamos em frente e salvar isso. E o que isso vai fazer é tornar essa imagem uma largura de 500. E automaticamente escalar a altura para mim. Então, se eu clicar com o botão direito do mouse e inspecionar o que é legal sobre isso, ele diz largura 500. Mas você pode realmente ver quando eu passar o mouse sobre a imagem, ele diz que a imagem é 500 por 281 por 0,25. Agora, se quisermos que ele distorça isso e eu não sei por que você iria querer, mas se você alguma vez quis distorcer uma imagem, você pode adicionar uma largura e uma altura. E você pode dizer que a altura vai ser, digamos 200. Então isso vai parecer um pouco estranho agora. Você pode ver que é um pouco mais espremido. Vamos fazer isso bem extremo e mudar a altura para 100. Então agora temos 500 por 100. Se eu passar o mouse sobre ele, você pode realmente ver no meu visor, ele diz IMG 500 por 100. Agora, talvez não queiramos dimensionar uma imagem pela sua largura. Talvez um de nós queira escalá-lo pela sua altura. Nós sempre, e haverá momentos em que você quer escalar uma imagem por sua altura ou justiça com um ou outro, não necessariamente ambos. Então, digamos que por qualquer motivo estamos trabalhando com um designer e o designer diz não, a imagem tem que ter uma altura máxima de 100 pixels. E dizemos, OK, altura é igual a 100. Salvar. E vamos em frente e atualizar. Esta é agora uma altura de 100 e uma largura. Seja o que for que foi automaticamente, é 177.77. E nosso navegador funciona isso para nós. Então, apenas como uma recapitulação, poderíamos dizer que temos um elemento de imagem. Não há etiqueta de fechamento porque, bem, o que vamos fechar? Não há conteúdo para colocar entre duas tags. Estamos usando atributos aqui. A fonte, o SRC é igual a imagem de Caleb. All JPEG. E isso também pode ser um link para uma imagem específica na web. Web, como HTTP website.com barra image.All JPEG. Pode ser algo assim. Ele pode usar URLs absolutos ou relativos. E então estamos usando uma URL relativa. Temos um segundo atributo, largura é igual a 503. A altura do atributo é igual a 100. E essas marcas são realmente esquisitas imagem. E essa coisa toda é o elemento da imagem. Agora há muito mais que poderíamos adicionar, e na verdade eu vou adicionar isso aqui de qualquer maneira, duas coisas. Vamos em frente, porque isso está ficando grande. Vamos jogar isso em linhas separadas só porque podemos, porque o espaço em branco não importa. E vamos adicionar um alt. E alt vai ser o texto que aparece quando um leitor de tela está tentando ler sua imagem, tentando descrever o que é a imagem ou se o texto ou não o texto, mas se a imagem quebra o texto a mostrar, então mostre-me e vamos em frente e mudar isso para imagem de ponto ausente. Então este não é um arquivo no meu computador. Isto não vai funcionar. Esta imagem vai quebrar para mim. E você pode ver uma imagem quebrada e ela diz, Mostre-me, esse é o texto alternativo. E se eu desfizer isso, vou mudar de volta para você. Minha imagem normal aqui. O texto inteiro não aparece como perfeito. Não queremos que ele apareça. Queremos que a imagem apareça, mas caso a imagem não apareça, temos um recuo. Então é assim que adicionamos uma imagem. O que eu gostaria que você fizesse agora é adicionar uma imagem à sua página, à sua página Hello World. Lembre-se que você pode obter qualquer tipo de imagens que você quiser em um Splash.com e apenas usar qualquer imagem que você gosta. Não importa qual é a imagem. 16. Linking de uma imagem para outra página web: Ok, bem-vindo de volta. Olá, olá, olá. No último vídeo, criamos uma imagem. Usamos o SRC, largura, altura e os atributos alt neste vídeo. Nesta lição, o que vamos fazer é fazer disso um link. Porque se eu voltar para a minha página, não posso clicar nisso. Não vai a lugar nenhum. E precisamos que isso vá a algum lugar. Bem, não precisamos, mas talvez queiramos isso, talvez queiramos que isso vá para nossa segunda página, ponto HTML. Então vamos em frente e embrulhe nossa imagem em uma âncora. Então dizemos que um RH REF é igual a, e eu posso preencher isso em apenas um segundo. Vou selecionar isso. E tudo o que estou a fazer é guardar isto. Só porque estou muito interessado em uma boa tabulação. Então nós temos uma tag de abertura e uma tag de fechamento, e isso significa que ele vai girar em torno de nossa imagem. E, em seguida, para o nosso HREF, vamos fazer segunda página dot HTML. E isso vai para a nossa segunda página ponto HTML. Então, se eu atualizar isso, parece que nada mudou, mas agora eu posso realmente clicar nele. E você pode ver no canto inferior esquerdo lá ele diz segunda página ponto HTML. Se eu clicar nisso, ele vai para a minha página. Volte para casa, role para baixo. E agora temos uma imagem, e isso vai para outra página. Agora tudo o que realmente fizemos aqui é aninhado na imagem dentro de uma tag âncora. E é por isso que o nidificação era muito importante para aprender. Para começar. Aprendemos sobre imagens, aprendemos sobre etiquetas âncora, e agora estamos apenas misturando as duas. Então o que eu gostaria que você fizesse é exatamente a mesma coisa. Pegue uma imagem, qualquer que seja a imagem de um Splash.com. Certifique-se de que ele aparece em sua página e, em seguida, vincule a outra página. Você pode até criar um link para google.com, se quiser, ou alguma outra página da Web lá fora. Se você não tem uma segunda página já construída, você pode vincular a qualquer lugar na internet, seu perfil do Facebook, seu perfil do LinkedIn, qualquer coisa assim. 17. Regras horizontais e quebra: Já olá. Vamos dar uma olhada nas regras horizontais e quebras de linha. Primeiro, vou trabalhar em um dos parágrafos que temos no início, criamos esses dois parágrafos aqui. E então eu tenho um parágrafo e um veterinário, um segundo parágrafo. E digamos que eu queira algum tipo de linha entre eles. Tenho uma coisa chamada RH, uma regra horizontal. E porque ele não leva nenhum texto dentro dele, ele não precisa de uma tag de fechamento. Novamente, esta é uma etiqueta de fecho automático, tal como a imagem. Vamos em frente e salvar isso. E deve aparecer bem aqui. E então quando eu ir e atualizar, bam, lá está. Ele aparece bem ali. E uma regra horizontal é um elemento de bloco. Vai ocupar toda a largura. Como você pode ver. Ele ocupa toda a largura. É, é uma linha entre o seu texto. Portanto, é muito bom para separar cabeçalhos ou conteúdo ou coisas assim. A outra coisa que queria mostrar era uma etiqueta BR. Então temos uma regra horizontal, mas também temos uma tag BR. Digamos que queríamos separar isso em sua própria linha, mas não em seu próprio parágrafo, mas queríamos que fosse assim. Então temos uma primeira linha de lorem aqui e depois Odeo Sun Tzu, o que quer que seja, o que quer que esteja em sua própria linha também. Ok, então eu só guardo isso e o código VS é automaticamente corrigi-lo para mim. Então, se eu voltar para a página, nada mudou. E, novamente, isso é porque em HTML, espaços em branco não é importante. Seu navegador não se importa com isso. O que importa é que se você quiser uma nova linha, você pode apenas digitar BR. E esta é simplesmente uma linha, quebrar BER para quebrar. E se eu salvar e atualizar minha página, vamos ver que bem aqui vai ser uma nova linha assim. Então isso começou uma nova linha aqui. E agora temos uma regra horizontal e uma quebra de linha lado a lado, ou eu acho que não lado a lado, mas, você sabe, na mesma lição, o que eu gostaria que você fizesse é dar a ambos uma chance e é um super fácil não deveria levar mais você que cerca de 30 segundos, talvez 60 segundos. Crie uma regra horizontal e, em seguida, crie uma quebra de linha dentro de um parágrafo. 18. Comentários de HTML: Vamos dar uma olhada nos comentários HTML. Então um comentário é basicamente um pedaço de código que você pode escrever e que não vai ser executado pelo seu navegador. E se parece com isso. Então é menos do que sinal. Você pode ver que todos os nossos elementos HTML se parecem com isso. Um daqueles momentos estranhos em que vemos um ponto de exclamação e depois um traço e um traço. E então podemos colocar nosso texto aqui. E, em seguida, termina com um traço, traço e, em seguida, um sinal maior que. Então, se eu salvar isso, e normalmente até agora, ele apareceria acima do meu bem-vindo ao texto HTML 101. Mas se eu voltar aqui, aperte a atualização. Ele não aparece de todo. No entanto, se eu clicar com o botão direito do mouse em Exibir origem da página, existe. Então nunca coloque senhas, segredos, cartões de crédito, respostas, qualquer coisa. Não coloque nada secreto aí, porque não é realmente secreto. É 100% acessível a todos os seus usuários. Então este não é um bom lugar para escrever segredos. O que é bom é explicar o que estamos fazendo. Então podemos dizer que este é um tutorial. E vamos talvez quebrar isso em duas linhas separadas. Este é um ato ilícito, então curso tutorial em HTML. Estamos aprendendo HTML a partir do zero. E, de novo, posso guardar isso. Volte aqui, atualize meu código-fonte. Você pode ver que o código-fonte foi realmente alterado. Volte aqui, atualize a página real, e ela não será renderizada. E isso é chamado de comentário HTML. Se você diz que este é um comentário HTML. Agora, o que é realmente legal sobre isso é que você pode realmente comentar código existente também. Então vamos em frente e comentar isso. Então vamos fazer o sinal de abertura e você pode ver que todo o meu texto Gray todo o caminho até a minha página, até o final da minha página. E vamos até aqui e fechar isso e você pode ver o realce da sintaxe chuta novamente, me deixa saber que as coisas estão funcionando da maneira que eu quero que elas funcionem . Guarde isso. E porque eu comentei isso, ele ainda vai aparecer no código-fonte. Nós vemos isso aqui. Está no código-fonte. Mas como está entre uma sintaxe de comentário de abertura e fechamento, vamos atualizar e podemos ver que ele não aparece mais. O navegador diz que é um comentário e não executado, não renderizá-lo. É realmente apenas um pedaço de texto inútil para o navegador. É mais útil para os humanos do que para os computadores. E isso é um comentário HTML. Agora você vai ver algumas dessas de vez em quando. Não é muitas vezes que você vê estes, mas quando você vê-lo, apenas saiba que este é o material que não vai aparecer quando você carregar sua página. 19. Listas: Certo, vamos dar uma olhada nas listas. Existem dois tipos de listas. Há uma lista ordenada e uma lista não ordenada, e nós vamos demonstrar os dois. Agora isso é interessante porque este é um desses elementos que requer aninhamento. E, novamente, é importante saber sobre nidificação aqui. Então eu vou jogar um título aqui chamado Listas. Agora, o primeiro que eu quero abordar é uma lista ordenada e o L. Agora podemos dizer algo aqui e vamos ver isso. Desça na minha página e diz algo aqui, mas na verdade não sabe o que fazer. E é uma espécie de lista. Mas se eu quisesse fazer, fazer um segundo ponto de bala, isso simplesmente não funciona. O que podemos fazer é dizer, porque esta é uma lista, ele precisa de um item de lista. E tudo o que estou fazendo aqui é dizer list-item, tag de abertura, list-item de fechamento tag. E agora temos dois elementos que estão aninhados dentro de nossa lista ordenada. Então salve e atualize. E agora ele lista para nós 123, assim por diante e assim por diante. Então, em contas para nós. Eu não escrevi um, eu não escrevi dois. É uma lista ordenada. Agora, uma lista desordenada, muito, muito parecida, mas não vai ter a contagem, só vai ter pontos de bala. Então eu poderia fazer UL e então eu poderia fazer Ally. E este é um item da lista. Aperte a aba porque eu tenho a abreviatura do Emmett. Ponto número um. Copie essa linha inteira para a que está abaixo dela. Aponte para copiar toda a linha para a que está abaixo dela. E estou usando o controle C e o controle V, ou o Comando C e o Comando V. E isso copia toda minha linha para mim. Apenas vá em frente e salve isso e atualize. E temos pontos de bala. E assim, à medida que avançamos através do HTML, você está ficando um pouco mais familiarizado com o aninhamento abertura e fechamento de tags e atributos e coisas assim, isso vai ficar muito mais fácil. E você provavelmente já percebeu que se você passou por todos os, todos os vídeos até este ponto que uma lista ordenada, você já sabe a sintaxe. Você sabe que este é um elemento aninhado e que há algum texto lá e, em seguida, ele tem um fechamento e uma tag de abertura. E então, se quisermos outro, só temos outro elemento filho. Então você tem uma criança LI aqui, criança LA aqui, e o pai OL. E neste ponto está ficando muito, muito fácil para você aprender. Um exemplo disso é a lista não ordenada. Então, uma lista ordenada tem a numeração, obviamente porque é chamada de lista ordenada, mas uma lista não ordenada não a tem. Só tem pontos de bala. Mas a sintaxe é quase idêntica. A única coisa que mudamos aqui é de OL para UL. E assim você pode ver daqui em diante que aprender HTML vai ficar cada vez mais rápido e rápido. Você já está aprendendo tudo o básico muito, muito rapidamente. Então é assim que fazemos uma lista. Se você quiser pausar o vídeo aqui, vá em frente. Clique em pausa e experimente isso por conta própria. Certifique-se de que ele apareça no seu navegador quando estiver pronto. Vamos para a próxima lição. 20. Tag CSS: Vamos falar sobre tags CSS. Então este é realmente interessante. Nós só lidamos com um elemento dentro da nossa cabeça. Mas com CSS podemos, na verdade, colocá-lo em qualquer lugar, mas tipicamente colocamos isso em nossa cabeça. E este é um estilo. Este é um elemento de estilo. E o que eu estou dizendo aqui é CSS nas arquibancadas para uma cascata e folhas de estilo em cascata. Lá vamos nós. de estilo em cascata. E eu posso comentar isso para que ele realmente não apareça no navegador. Agora o que é interessante aqui é, isso não aceita HTML. Isso não é estranho? Estamos escrevendo HTML, mas isso não aceita HTML. E neste ponto estamos entrando nessa coisa chamada CSS em cascata folhas de estilo, que é uma maneira de estilizarmos nossa página. O que isso leva é CSS markdown, markup, css linguagem. E isso é muito, muito diferente. Isso não se parece com HTML, e você não precisa saber isso para este curso em particular, mas esta é uma boa transição para o que você estaria aprendendo a seguir. Então, digamos que quiséssemos mudar toda a cor de fundo para preto, e queremos mudar toda a cor, a cor do texto para branco. Podemos fazer isso. Podemos dizer “corpo”. E você pode ver que isso corresponde ao elemento. E tudo o que vamos fazer é uma chave de abertura, fundo, cor. E você pode ver VS Code é muito útil. Está me ajudando a entender o que eu deveria estar escrevendo. Mude isso para preto. E então eu posso mudar a cor da fonte. E você pode realmente ver que a referência MDM aparece, define a cor da cor do texto de um elemento branco. E então isso vai selecionar este elemento, o corpo, e tudo nele. E ele vai tentar aplicar essas regras a ele. Então, se eu voltar aqui, aperte a atualização. Confira isso. Nossa página agora tem texto branco com fundo preto. Agora, novamente, isso não é algo que você precisa saber e honestamente eu diria para não aprender, mas eu precisava mostrar o que é isso porque você vai ver esses elementos de estilo por todo o lado. Agora o que eu vou fazer é eu vou comentar isso também. Atualize minha página e volte ao normal. Agora, se você quiser, por todos os meios, dar uma chance e sinta-se livre para experimentar com ele. Mas saiba que você ainda tem muito mais HTML para aprender. Você precisa aprender a adicionar vídeos e áudio e coisas assim. E você precisa aprender essas coisas antes de aprendermos CSS, ou pelo menos você mostrou que é muito mais fácil aprender uma coisa de cada vez em vez de aprender coisas de cada vez. Mas se você queria experimentar e se divertir um pouco com ele e por todos os meios, vá em frente. Mas esta é a tag de estilo, este é o seu CSS. E mais uma vez, não, você não precisa saber disso. Eu só queria te mostrar isso. Assim como um aviso, você vai ver esta tag selvagem em outro código-fonte que você vê como no Google.com, por exemplo, vai haver algum em seu facebook.com provavelmente tem algum instagram.com e provavelmente tem, tem alguns elementos de estilo dentro de seu HTML. Então é uma coisa comum. E eu só queria ter certeza que você estaria familiarizado com isso. Tudo bem, terminamos com CSS. Vamos para o próximo, onde aprendemos basicamente o mesmo conceito, mas para JavaScript. 21. Tag Marcas de Script: Olá e bem-vindo ao mundo do JavaScript. Ok, então há duas coisas que eu quero falar. Uma é como adicionamos as duas páginas do JavaScript, algumas maneiras de fazer isso. E a segunda maneira, ou A segunda coisa que eu queria falar é não aprender JavaScript agora. Vai ser muito tentador. Você vai ouvir pessoas em grupos do Facebook e grupos aprendizagem e grupos do LinkedIn em outros cursos. E você precisa aprender JavaScript. Mas isso não é verdade. Você precisa aprender HTML antes que ele aprenda JavaScript. Javascript é usado para modificar e trabalhar com HTML. E se você não conhece HTML muito bem, você não vai ser capaz de aprender JavaScript, então você precisa HTML primeiro. Dito isto, vou mostrar-lhe como adicionar algum JavaScript aqui. Então começa com a tag de script. E aqui, novamente, porque é HTML, ele realmente não se importa com espaços em branco. No entanto, não escrevemos HTML aqui. Nós não, nós escrevemos JavaScript. Nós escrevemos JavaScript ou JS para abreviar. Aqui dentro. Isso é o que importa. Então lembre-se sempre que vejo muitas pessoas tentando escrever como uma div dentro de seu script e isso não funciona nisso porque qualquer coisa entre as duas tags de script aqui, a tag de abertura e fechamento que seu navegador acha que é JavaScript e não HTML. E isso é importante saber porque se você fez meu outro curso sobre fundamentos da Web, existem mecanismos diferentes em seu navegador. Você tem um mecanismo para renderização HTML e motor para renderização, renderização CSS, e um mecanismo para renderização JavaScript. E está dizendo, Ei, use o mecanismo JavaScript para isso, não o HTML1. Então vamos em frente e criar um exemplo aqui, Olá mundo. E você não precisa saber disso agora. Mas isso é JavaScript e tudo isso vai fazer é quando eu carregar a página, ele vai me dar um pequeno pop-up. Então, quando eu voltar para minha página, clique em Atualizar. Diz “Olá mundo”. E depois mostra a minha página. Então ele está executando o JavaScript e, em seguida, o HTML. Então essa é uma maneira. A outra maneira que você verá essa tag sendo usada é o script. E o que acontece se eu clicar neste botão? Isso é perfeito. É em vez de ter todo o seu código em sua página, você pode ter este código em outro arquivo, como teste JavaScript ab.js. E você não precisa disso aqui. Podemos nos livrar disso. E esse código pode viver em outro arquivo. E então tudo o que estamos dizendo aqui é usar a tag script. Então hey, Chrome, Firefox, Safari edge, Há um JavaScript que eu quero que você renderize aqui, a fonte apenas como uma imagem e role de volta para cima como uma imagem. Fonte src é igual a e, em seguida, qualquer que seja o nome do arquivo. Agora este é um arquivo relativo, muito parecido com este link relativo. Então deve estar na mesma pasta. Agora, se isso não existir, nada vai acontecer. Se isso existe, mas não há nada lá, nada vai acontecer. Você realmente precisa de algum JavaScript para executar. E novamente, isso não é algo que precisamos saber agora. Mas o que eu vou fazer é boom, comentar isso. E isso é apenas um comentário HTML. E isso garante que meu navegador diga, ei, qualquer coisa entre essa tag de abertura e a tag de fechamento ou a sintaxe não a renderize. É permitido viver lá e o código-fonte, mas na verdade não executá-lo. E se eu voltar ao Chrome e atualizar a página, esse alerta desaparece. Tão perfeito. Agora, novamente, você não precisa saber disso. A razão pela qual eu queria mostrar-lhe isso é porque você vai ver scripts muito na web moderna de hoje, há muito JavaScript. E novamente, você precisa saber HTML para conhecer o JavaScript muito bem. Mas você vai ver muitos roteiros por todo o lado. Então, quando você vê isso, saiba que tudo entre a tag de script de abertura e fechamento será realmente JavaScript e não HTML ou CSS. 22. Compartilhando código com CodePen: Okey-dokey, vamos dar uma olhada em uma coisa legal aqui. Então, enquanto você está aprendendo a escrever código, você vai querer ser capaz de compartilhar seu código com as pessoas. E é muito, muito difícil compartilhar com segurança esse tipo de código com as pessoas. As pessoas colocam seus arquivos em zips e , em seguida , dirigem grupos do Facebook e parece realmente spam e ninguém sabe se é realmente seguro baixar. E então, se você tiver uma pergunta, sua pergunta será respondida. É que essa coisa toda que você quer evitar. Há uma maneira melhor. Então o que você pode fazer é ir para Codepen.io. E eu queria criar uma nova caneta. Oh, olha para isso todo o tipo de coisa. Mas eu só quero criar uma nova caneta normal aqui. O que isso vai fazer é me dar HTML, CSS e JavaScript trabalhar com. Agora, neste momento específico, se você está fazendo este curso, você provavelmente não precisa saber JavaScript, e você provavelmente não precisa saber CSS, você provavelmente só precisa saber HTML. Agora aqui, você pode escrever qualquer coisa Olá mundo. E só leva um segundo, mas acaba por pagar, ele rende para você. Agora, a coisa é, você não precisa do seu Doctype. Você não precisa de HTML, você não precisa de corpo. Você não precisa dessas etiquetas. O que você precisa é de tudo entre a etiqueta do corpo até a etiqueta do corpo de fechamento bem ali. Então, agora podemos clicar com o botão direito do mouse E isso não vai necessariamente mostrar minhas imagens porque enquanto eu estou dizendo hey, CodePen, procure não segunda página, mas imagem de Caleb. All JPEG. E é aqui que o texto alternativo entra em ação. E então ele não pode encontrar isso porque ele não sabe. É um site, não está no meu computador, então está procurando a imagem do Caleb. Tudo JPEG no servidor do computador de outra pessoa. Eles ainda não o têm, então isso não vai funcionar. Então, só uma cabeça lá em cima. Mas, você sabe, como você está escrevendo cada vez mais HTML e CSS e JavaScript no caminho. Você pode fazer tudo isso em uma caneta de código. Agora a coisa boa é, você pode nomear isso. Então, olá mundo. Vamos em frente e salvar isso. E acabei de criar uma conta gratuita da CodePen. A propósito, é completamente grátis. Você não precisa pagar pela CodePen. Então, por favor, enquanto estiver aprendendo, não pague pela CodePen. Você nunca precisa pagar por isso. E você tem esse lindo link. Então, se eu abrir isso em outra guia, eu simplesmente copiei e colei esse link. Ele aparece. E se eu tiver outra conta, cole-a lá, ela aparece. E o que é realmente bom é que ele está salvando todo o seu código. E assim, se você precisa compartilhar seu código no grupo de aprendizagem para código Facebook ou em uma seção de projeto nesta plataforma. Ou realmente você precisa compartilhar seu código com um amigo um desenvolvedor, um mentor ou qualquer pessoa. Mesmo que você só queira mostrar isso para você e seu cônjuge, seus amigos, sua família. Você pode simplesmente enviar-lhes este link com todo o código nele. Esta é uma maneira muito, muito boa de compartilhar seu código e é uma maneira segura de compartilhar seu código para que as pessoas não tenham que se preocupar em baixar arquivos zip estranhos ou Google Drive ou Dropbox ou algo assim. É simplesmente CodePen e dezenas de milhões, se não centenas de milhões de pessoas estão usando CodePen. É completamente seguro. Está por aí há muito tempo. Não vai a lugar nenhum. Este é um bom serviço para usar quando você precisa compartilhar seu código. Então, quando você estiver compartilhando um código, compartilhe sua CodePen, link. 23. Encontrar suporte extra: Ok, se você precisar de algum apoio extra, eu tenho um grupo de apoio enorme para você. Então, obviamente, você pode fazer perguntas abaixo, por favor, faça se isso é sua coisa, faça perguntas abaixo. Mas se você quiser respostas imediatamente, como em minutos, às vezes até segundos, você vai querer se juntar a algum tipo de grupo de apoio. Agora, aprender HTML é realmente muito fácil. É considerada uma das coisas mais fáceis de aprender no desenvolvimento web. Mas isso não significa que seja fácil para todos. Então, se você precisar de um pouco de suporte extra, você pode ir para facebook.com e vamos procurar aqui para aprender a codificar. E este grupo tem atualmente 56.905 membros. Este é um grupo que criei há muito tempo. E mais uma vez, há 56 mil membros lá dentro. Há perguntas sendo feitas o tempo todo, pessoas respondendo coisas o tempo todo. Por exemplo, auto-codificadores, meu nome é Dragos. Ele tem uma boa pergunta e aqui um 132 comentários. Se eu continuar rolando para baixo, quero dizer, eu participo disso. Quero dizer, é o meu grupo que aqui está interessado em aprender como solicitações web e respostas web onde poderia 59 comentários. Posso postar isso há 11 horas? Então, há muita discussão aqui, mas você pode fazer perguntas como, como faço algo ousado? Como faço algo metálico? Por que meu código não está funcionando? Em seguida, compartilhe seu link CodePen Por favor, não mostre uma captura de tela. Eu recomendo vivamente não mostrar uma captura de tela. Eu recomendo não copiar e colar seu código no grupo do Facebook. Compartilhe em CodePen ou largura CodePen em vez. Então, se você precisar de qualquer suporte adicional, Definitivamente, definitivamente, junte-se ao aprendizado para código do grupo Facebook. É completamente grátis. Você não tem que se inscrever para nada. É completamente grátis. É apenas um bom valor acrescentado que eu gosto de dar aos meus alunos. Mas de novo, você sabe, mesmo que seja opcional, você não precisa. Mas se você quiser um pouco de apoio extra com respostas oportunas, esse é um ótimo lugar para se estar. 24. Seu projeto final: Certo, vamos dar uma olhada no seu projeto. Seu projeto vai ser relativamente fácil. Você não tem que fazer tudo aqui e lembre-se, você não tem que memorizar tudo o que escrevemos neste curso. Você sempre pode apenas Google também. Então, se você é tipo, oh, eu sei o que é um H1, mas eu não me lembro exatamente como fazer um link. Isso é bom. Você pode Google e você digita no Google HTML link tutorial. E você vai encontrar centenas, milhares, talvez até milhões de páginas que vão mostrar exatamente como adicionar um link. Então lembre-se, você não precisa se lembrar de tudo isso. Tudo o que precisa saber é como encontrar a resposta. E isso é honestamente cerca de 50% de qualquer trabalho como desenvolvedor web hoje em dia é apenas saber como encontrar as respostas, não memorizá-las, mas ser capaz de encontrar as respostas. Então, passando para o projeto aqui, o que eu gostaria que você fizesse é que eu gostaria que você criasse um novo arquivo HTML. Então eu gostaria que você criasse um cabeçalho. Então, como um barco sub-cabeçalho H1, como o que você faz, o que você quer entrar em algo assim, uma imagem. E então, e por último, adicione um link ao seu Twitter. Twitter, Instagram, Facebook. Isso realmente não importa, apenas certifique-se de que você tem pelo menos um link. Então vamos fazer isso. Criar um 2.1, e este seria um bom momento para uma lista ordenada aninhada, a propósito, 2.2. tudo bem, então eu apenas formatei isso um pouco mais agradável apenas para que pudéssemos ler todos juntos. Então crie um novo arquivo HTML. Ter certeza que você tem um cabeçalho lá, colocar seu nome lá, um sub-cabeçalho, S sub cabeçalho, Lake, seu título, sua descrição de trabalho, hobby favorito ou algo assim? Se tivesse uma imagem de qualquer coisa, diria que adicionasse uma imagem de si mesmo. É totalmente seguro porque vai estar no seu computador. Mas se você preferir compartilhar seu projeto com uma imagem de outra coisa, tudo bem também. Você sempre pode ir a um Splash.com e obter uma imagem gratuita. Por fim, adicione um link para seu Twitter, seu Instagram ou seu Facebook, ou apenas adicione um link para o Google ou algo assim. A parte importante aqui é que você vai adicionar um link. Então vá em frente e dê uma chance. Se você ficar preso, não se esqueça, você pode referenciar os outros vídeos ou você pode continuar assistindo este vídeo e eu vou te mostrar exatamente como eu faço isso. Mas eu gostaria que você parasse este vídeo aqui e desse esse projeto que eu filmei. Não se esqueça de compartilhar seu projeto e abaixo nesta plataforma, se esta plataforma oferece esse tipo de recurso, caso contrário você sempre pode compartilhar seu progresso com o grupo de aprendizagem para código Facebook. Então pausar seu vídeo aqui. Vou dar-nos cerca de cinco segundos e depois vou continuar a tocar e vou mostrar-te exactamente como faço isto. Ok, então eu vou criar este projeto. Vou mostrar-te exactamente como o faço. Então, primeiro as coisas Novo Arquivo, e eu fiz o Comando N, ou você poderia ir. Arquivo, Novo Arquivo, Salvar, que vai salvar isso na minha área de trabalho. E eu vou chamar este Caleb layout.html porque esta é a minha página do portfólio. Isto é o que eu quero fazer. Preciso do HTML5 aqui. Então eu não preciso do meta. Nós não conversamos sobre isso. Isso é um pouco mais avançado e eu não preciso Lang é igual ao Inglês novamente, isso é um pouco mais avançado. Não precisamos nos preocupar com isso. Vamos mudar o título para a página do Caleb. E o que eu precisava adicionar aqui? Eu precisava adicionar um cabeçalho que é 2.1 nesta lista. Então, um cabeçalho H1, vou colocar meu nome aqui, Caleb Pauline, H2. Eu precisava de um sub-cabeçalho, então vamos colocar algo menor e você é como um desenvolvedor sênior da H3. E eu sou um instrutor de codificação premium. Esse é o meu papel na vida. O papel que me dei. 2.3, adicione uma imagem, ok? Então eu já sei que tenho uma imagem aqui. Não é uma imagem minha, mas é uma imagem e isso é de uma lição anterior, então eu posso fazê-lo. Imagem SRC é igual a image.All JPEG de Caleb, e isso é apenas na mesma pasta que este arquivo. Tudo isso vive na minha área de trabalho. Está na mesma pasta. Alt. Caleb, Colleen. E eu quero dar a isso uma largura para que não seja grande, eu não sei, tipo 400. Por último, preciso de um parágrafo agora e de um link. Mas também vou adicionar um parágrafo de qualquer maneira. Eu realmente não quero escrever um parágrafo inteiro. Vou jogar um pouco de lorem aqui. E então eu precisava de um link para, digamos, Twitter. Então este link pode ser apenas uma tag âncora. Um HREF é igual a HTTPS, barra Twitter.com. Caleb, alto, magro, e você também pode me encontrar no Instagram se essa é sua geléia e é colocada na Pauline. E isso é tudo o que há para ele. Então eu posso voltar para o meu navegador e eu posso ir Arquivo, Abrir Arquivo e abrir Caleb dot HTML. Espero que eu não tenha nenhum erro de digitação lá porque isso vai ser um pouco embaraçoso. E boom, lá está a minha página HTML. Eu tenho um H1, eu tenho um H3 para o meu subtítulo. Eu tenho uma imagem e eu tenho um texto Lorem lá dentro. Eu meio que joguei isso no último minuto. E um link para o meu Twitter, o que me leva direto ao Twitter. E isso é tudo o que há para ele. Então eu fui muito rápido lá e fiz isso de propósito para que você tivesse que fazer uma pausa e, e você poderia ter que pensar um pouco mais. Eu quero que você realmente trabalhe em algo assim. Mas quando terminar, compartilhe seu progresso abaixo. Por último, muito obrigado por dedicar o tempo para fazer este curso. Espero que tenha aprendido algo ótimo, divertido e novo. E se você quiser conferir qualquer um dos meus outros cursos, basta clicar no link para o meu perfil nesta plataforma, você pode ver todos os meus cursos também estão disponíveis aqui, incluindo o que aprender a seguir, como mais HTML avançado, CSS e JavaScript, Python, PHP, um monte de projetos no meio, todo tipo de coisas. Por último, se você gosta do que estou fazendo aqui, se você gosta do meu modo de ensinar, não se esqueça de me seguir na partilha de habilidades. Obrigado novamente por fazer este curso e espero vê-lo em outro.