Curso completo de HTML para iniciantes ao guia completo avançado com projetos do mundo real

1. Apresentação: Você está pronto para começar sua jornada no empolgante mundo do desenvolvimento web? Se você é um iniciante completo ou está procurando definir suas habilidades, este curso, um curso completo de CML para iniciantes e avançados, um guia completo com projetos do mundo real é sua plataforma de lançamento perfeita Neste curso, você deixará de saber absolutamente nada sobre desenvolvimento web para criar projetos do mundo real que podem impressionar qualquer pessoa. Você aprenderá os fundamentos do HTML, como estruturar e estilizar páginas da Web como um P, conceitos essenciais como consolidação de HTML, formatação de texto, vazamento, hiperlinks, imagens e atributos e, claro, técnicas avançadas para levar suas habilidades de desenvolvimento web para levar suas habilidades de desenvolvimento web Mas não paramos apenas na teoria. Neste curso, você trabalhará em desafios empolgantes e projetos do mundo real para aplicar o que aprendeu. No final, você terá um portfólio sólido e a confiança necessária para criar um site incrível. Aqui está o que você ganhará. Aulas passo a passo fáceis de seguir, projetos práticos para aprimorar suas habilidades, dicas e ferramentas para aumentar a produtividade, incluindo extensões de código do VS e acesso vitalício a todos os materiais do curso Meu objetivo é simples: capacitar você a se tornar um desenvolvedor web habilidoso Imagine criar seus próprios sites ou até mesmo começar uma nova carreira. Tudo começa aqui. Então, o que você está esperando? Participe do curso completo de HTML para que Bigner avance hoje e dê o primeiro passo para dominar o desenvolvimento web. Nos vemos na aula. 2. Visão geral de alto nível do desenvolvimento web: Tudo bem, e bem-vindo à primeira palestra deste curso Agora, há uma boa chance de que este curso seja seu primeiro contato com qualquer desenvolvedor web. Antes de começarmos a escrever código STML e CSS, acho que seria uma boa ideia começar este curso com uma visão geral de alto nível desse campo do desenvolvimento web Vamos falar sobre coisas como clientes e servidores, desenvolvimento de front-end e back-end, Tati e sites dinâmicos e, claro, sobre as principais linguagens e tecnologias de código do desenvolvimento web Vou explicar tudo isso em torno do processo que acontece quando abrimos uma página da web em um navegador. Lembre-se novamente de que essa é apenas uma visão geral de alto nível e vou omitir muitos detalhes aqui. Na verdade, isso é apenas para que você possa se familiarizar com alguns desses conceitos e termos que todos os desenvolvedores da web conhecem antes de iniciar sua própria jornada. Agora, o que acontece quando tentamos acessar o site da W three schools é que nosso navegador enviará uma solicitação ao servidor em que esta página está hospedada na Internet. Todo e qualquer site é rebocado em algo chamado servidor, que é basicamente um computador conectado à Internet e capaz receber solicitações como essa Novamente, quando navegamos em um determinado site, nosso navegador envia uma solicitação ao servidor em que o site está rebocado, onde está Então, quando o servidor receber a solicitação, ele pegará todos os arquivos que compõem o site e os enviará de volta ao navegador. Dizemos que o servidor envia a resposta ao navegador, que contém essencialmente todos esses arquivos dos quais o site é feito. Agora como você pode ver nessas extensões de arquivo, temos alguns códigos HTML , CSS e JavaScript aqui. Esses são exatamente os três idiomas que os navegadores podem entender. O que isso significa é que todo o código que compõe um site precisa sempre ser escrito em HTML, CSS e JavaScript porque, novamente, essas são essencialmente as três linguagens de código que qualquer navegador pode entender. Tudo bem. Agora, quando o navegador receber esses arquivos HTML, CSS e JavaScript da resposta do servidor, ele pegará o código e renderizará o site que estamos tentando acessar com base no código. Com isso, você já tem uma boa compreensão do que realmente acontece quando navegamos em um site e também sobre as tecnologias que usamos para criar qualquer site Esse processo de escrever código HTML, CSS e JavaScript que o navegador pode entender é um processo que chamamos de desenvolvimento web front-end. Então, sempre que você ouve alguém falando sobre desenvolvimento de front-end, o que eles querem dizer é que desenvolvedores escrevem o código que é exibido no navegador, que é basicamente o front-end de um site. Na verdade, isso é essencialmente o que vamos aprender neste curso, ou pelo menos os fundamentos do desenvolvimento de front-end, que é aprender HTML e CSS Agora, apenas como uma observação lateral aqui, sempre que os arquivos que compõem o site são simplesmente armazenados no servidor da web e enviados para o navegador como estão , dizemos que temos um site estático, e isso fará um pouco mais de sentido em um minuto quando falarmos sobre o que é um site dinâmico. Mas, por enquanto, lembre-se de que um site estático é basicamente um site em que os arquivos são simplesmente enviados do servidor para o navegador sem nenhuma transformação Tudo bem. Então, espero que com isso você aprenda o que é desenvolvimento front-end e também sobre as três tecnologias de código que compõem qualquer site. Agora vamos dar um passo adiante e falar sobre algo chamado desenvolvimento de back-end. Vamos tentar outro exemplo aqui e, desta vez, vamos tentar entender o que aconteceria quando tentássemos acessar um site como netflix.com Então, mais uma vez, o primeiro passo é enviar uma solicitação para o servidor web onde o netflix.com Agora, por que um site como o Netflix é tão diferente de algo como o site Static W three Schools que eu mostrei anteriormente? Bem, um site complexo como netflix.com é realmente completamente diferente de um site estático porque há muito conteúdo que está sempre mudando o tempo todo Como na Netflix, sempre há novos filmes e novas resenhas sendo adicionadas ao site. Novas avaliações e novas durações de filmes são calculadas, por exemplo, e muitas outras coisas assim estão sempre acontecendo. Para fazer um sistema como esse funcionar, netflix.com precisa de um aplicativo inteiro em execução no servidor e também de um banco de dados de porcos, que basicamente contém todos os cursos e todas as avaliações e Todos os usuários e verdade, todo o conteúdo que está sendo exibido em seu site. Agora, para fazer tudo isso, tecnologias de front-end como HTML e CSS simplesmente não são suficientes. Basicamente, com o que você aprenderá neste curso, você não conseguirá criar algo como netflix.com. Tudo bem. Então, para escrever aplicativos que são realmente executados em servidores web, os desenvolvedores usam algum tipo de linguagem de back-end como NodeJS, PHP ou Python O que essas linguagens fazem é retirar os dados do banco de dados e, basicamente reunir esses dados nos arquivos finais. Isso será então enviado ao navegador como resposta, e todo esse processo é chamado desenvolvimento de back-end porque essa é basicamente a parte invisível de um site, então é o Ben de um site. Agora, nessa situação, dizemos que temos um site dinâmico porque o site é montado dinamicamente partir de diferentes partes no servidor e isso acontece a cada vez. que alguém visite o site. Voltando ao exemplo do netflix.com. Na verdade, cada vez que você visita a Netflix, uma nova versão do site é gerada a partir do banco de dados e enviada ao navegador. Por outro lado, se o Netflix fosse um site estático , os arquivos do site já estariam no servidor esperando que alguém os acessasse. Essa é a grande diferença entre estático e dinâmico. Em estático, os arquivos já estão prontos e, em dinâmico, eles precisam primeiro ser gerados por um aplicativo que está sendo executado no servidor. Tudo bem. Mas agora o resto do processo é na verdade o mesmo de antes. Esses arquivos agora estão prontos para serem enviados ao navegador como resposta, que será então convertida no site final. Como este que vemos aqui no netflix.com. Ótimo. Agora, é claro, não há necessidade de você memorizar todos esses nomes que mencionei aqui e também não precisa entender profundamente esse processo Tudo o que eu quero aqui é dar uma visão geral do que realmente são front-end e back-end, o que são o navegador e o servidor e também o que são os sites estáticos e dinâmicos porque eu realmente acho que isso será extremamente útil quando você iniciar sua jornada de desenvolvedor. Mas agora, só para finalizar, vamos examinar mais de perto os três idiomas do front-end. HTML, CSS e JavaScript. E começando pelo HTML, HTML é responsável pelo conteúdo da página. O texto, as imagens, os botões e, na verdade, todo o conteúdo que você vê em uma página da web são sempre escritos em um arquivo HTML. Então, o CSS é responsável pela apresentação desse conteúdo. Basicamente, para estilizar e organizar os elementos na página da web Agora, finalmente, o JavaScript é a verdadeira linguagem de programação da frente. Portanto, isso nos permite adicionar efeitos dinâmicos e interativos às páginas da web. Também podemos usá-lo para manipular o conteúdo ou o CSS para carregar dados de servidores web e até mesmo para criar aplicativos front-end inteiros, que então chamamos de aplicativos web Agora também podemos usar a analogia do carro para tornar a separação de HTML, CSS e JavaScript aqui um pouco mais fácil de entender Nessa analogia, o HTML representa a estrutura de um site, como a moldura e a estrutura de um carro Por exemplo, ele fornece a forma básica, como carroceria, assentos e motor. Sem ele, o carro não existiria, mas, por si só, não parece especial nem faz muita coisa. O CSS, então, é a pintura e o design de interiores , pois torna o carro visualmente atraente ao definir a cor e o estilo geral O CSS aprimora a aparência. Tornando o carro mais atraente e confortável de usar. Finalmente, o JavaScript é, obviamente, o motor e a eletrônica. Isso torna o carro mais funcional, permitindo que ele se mova, ajuste o rádio, JavaScript e os recursos dinâmicos e de interatividade, tornando o carro ou o site responsivo à Isso faz sentido, certo? Com isso, concluímos nossa introdução ao desenvolvimento web e, portanto, agora estamos prontos para começar a trabalhar com código HTML e CSS neste curso. 3. Configurando nosso editor de código: Oi, todo mundo. Bem-vindo de volta. Antes de começarmos a escrever uma única linha de código, precisamos configurar duas ferramentas importantes. Essas ferramentas nos ajudarão a escrever código de programação como HTML de uma maneira muito fácil. Agora, quais são essas ferramentas? O primeiro é um editor de código, o segundo é um navegador da web. Agora, o que o editor de código significa aqui é que ele é uma ferramenta especial que ajuda os desenvolvedores a escrever, editar e depurar código com recursos como destaque de sintaxe e preenchimento automático, e é exatamente por isso que estamos usando Isso torna a codificação mais rápida, eficiente e fácil E agora, o que um navegador faz aqui é pegar o código. Escrevemos em um editor de código como o HTML e o colocamos em funcionamento ao renderizá-lo na tela Transformando código bruto em sites incríveis com os quais interagimos todos os dias. Vamos baixar e instalar rapidamente os dois. Agora, pessoal, vocês podem abrir qualquer tipo de navegador da web. Agora eu abri o Google Chrome. Você pode abrir qualquer tipo de navegador da web e aqui você pode pesquisar o download do código VS. E aqui você vê aqui, você poderá ver esse primeiro resultado, e este é o site oficial do visualstudo.com Então isso é co dotvisualstudio.com. Basta clicar aqui. Gente, agora vocês podem ver que essa é a interface do visualtudo.com para baixar o código VS. OK. Então, aqui você vê que temos várias opções para baixá-lo. Agora, pessoal, dependendo do seu sistema operacional, você precisa baixar o software. Então, por exemplo, agora estou usando o sistema operacional Windows, então vou selecionar o Windows. Mas se você estiver usando o sistema operacional Linux ou Mac, abaixo deste ícone, você poderá ver este botão de download, então você pode simplesmente clicar nele. Mas se você estiver usando Linux, poderá escolher essas duas opções para instalá-lo em seu PC. Agora estou usando o sistema operacional Windows. Então, para baixar o código VS, basta clicar neste botão de download, e aqui você vê que ele está me pedindo para fazer o download. Então eu seleciono os downloads e clico no Cap. Agora, aqui você vê que minha instalação do código VS está em andamento. Pessoal, no futuro, a interface deste site pode ser alterada. Mas para baixar este software, você pode visitar este code.visualstudio.com, conferir este site e simplesmente baixar e Está bem? Agora, pessoal, baixamos com sucesso o software para o Visual Studio. Agora, basta clicar nessa opção de download e clicar neste Visual Studio. Então aqui você vê que um Popo será exibido na sua frente. Agora, pessoal, instalem esse software. Então, estou instalando o software no Windows. Agora, você só precisa clicar em Eu aceito o contrato e, em seguida, clicar no próximo botão. Aqui, o código VS está perguntando onde instalar esse código VS. Então, eu apenas o mantenho no padrão e clico no botão Avançar. E você só precisa clicar em Avançar. Gente, aqui você vê que temos várias caixas de seleção. Então, por enquanto, você só precisa marcar toda essa caixa de seleção. Pessoal, depois vou mostrar por que estou marcando todas essas caixas de seleção, e então você só precisa clicar no próximo botão e clicar no botão Instalar Agora nosso código VS está sendo instalado em nosso PC. Gente, é assim que você pode instalar o código VS no seu PC. Agora você pode iniciar esse código do Visual Studio a partir de agora. Por enquanto, basta desmarcar isso e clicar no botão Concluir Pessoal, parabéns por baixar com sucesso o código do Visual Studio em seu PC. Agora, mais uma coisa que precisamos configurar. Agora, só precisamos criar uma nova guia aqui e instalar o navegador Chrome também. Agora estou mostrando esse processo. Portanto, se você não tinha o navegador Chrome em seu PC, pode seguir esse processo. Agora você só precisa pesquisar aqui no navegador Chrome. Ou você pode pesquisar o download do Chrome. E depois de fazer isso, você só precisa clicar nesse primeiro link. Gente, aqui você vê neste site, você pode baixar o Chrome para seu próprio sistema operacional. Pessoal, este site detectará automaticamente qual sistema operacional você está usando. Agora estou com o navegador Chrome no meu PC, por enquanto, não preciso do navegador Chrome para instalá-lo. Mas se você não tiver o navegador Chrome, basta clicar neste botão de download. Assim, você pode instalar o software em seu PC. Está bem? Portanto, a instalação é bem fácil. Como mostrei no código VS, basta clicar no próximo próximo e seu navegador Chrome também estará configurado. Está bem? Então, vou deixar isso para você. Agora, vamos simplesmente abrir o código VS por enquanto. Agora vou minimizar todas essas coisas, então vou para o meu desktop. Gente, aqui, aqui estamos com o ícone do código VS. Depois de instalar com sucesso o código VS em seu PC, você poderá ver esse ícone do código VS. Você pode simplesmente dobrar aqui para abrir este Visual Studio. Pessoal, depois de abrir o código VS pela primeira vez, vocês poderão ver essa interface. Então, aqui você vê que estamos tendo esse código do Visual Studio, e aqui você vê, podemos criar um novo arquivo a partir daqui, para que possamos abrir uma pasta a partir daqui. Então, podemos fazer um monte de coisas daqui, mas eu não prefiro fazer todas essas coisas daqui. Então, vou simplesmente encerrar essas boas-vindas aqui. Agora, pessoal, a primeira coisa que vamos fazer aqui é instalar uma extensão. Então, aqui, aqui temos uma guia de extensão, então você precisa simplesmente clicar nela. Então, aqui você vê que temos muitas extensões aqui. Agora, a extensão de água aqui é que uma extensão para o código VS é basicamente uma pequena funcionalidade que tornará nosso editor de código um pouco melhor. Por exemplo, como usamos extensões no Google Chrome, então adicionaremos extensões ao nosso Google Chrome para facilitar o uso do Google Chrome. Então esse é o mesmo conceito aqui. Agora, a primeira extensão que vamos instalar aqui, então é mais bonita Pesquise aqui desta forma e certifique-se de que sua Internet esteja ligada. OK. E aqui você vê, acho que pode ser o primeiro resultado. Clique nele. Agora, pessoal, instalem essa extensão mais bonita. Então você só precisa clicar neste botão Instalar e seu preter será instalado com sucesso Gente, o que quer que você escreva no editor de código, mais bonito significa o que ele fará, então ele formatará nosso código bem. Está bem? Agora, pessoal, estamos fazendo essa atualização automática aqui, então você pode marcar esta caixa de seleção Então, o que ele fará significa que atualizará automaticamente o software se houver alguma atualização ou preferir OK. Então, quando começarmos a escrever nosso código, mostrarei como essa preter funciona Então, agora você pode simplesmente fechar. Agora vamos colidir essa barra lateral para que essa extensão agora, pessoal, só precisamos fazer algumas configurações Agora, aqui no canto inferior, você poderá ver esse ícone de engrenagem, basta clicar nele e aqui você vê aqui que temos a opção de configurações, clique nela e aqui podemos pesquisar qualquer configuração. Pesquisar a configuração é a maneira mais fácil de encontrá-la. Agora, a primeira configuração que vamos pesquisar aqui é o formatador padrão Agora, aqui você vê o formatador padrão, no seu caso, pode ser diferente Então, agora eu já defini isso como mais bonito. Então você só precisa clicar nessas opções e procurar por mais bonitas Agora, aqui você vê aqui que estamos tendo essa opção mais bonita Então esse é um formatador de código mais bonito, ES B e P. Você só precisa clicar nele Agora, por que estamos mantendo esse formatador padrão. Então, agora estamos vendo código VS que sempre que salvamos nossos arquivos, precisamos desse formatador de código mais bonito para formatar nosso Está bem? Agora, quando formatar nosso código, agora só precisamos definir outra configuração que seja salvamento automático Você só precisa pesquisar por salvamento automático. Então, no seu caso, pode ser que esteja errado. Você só precisa clicar aqui na mudança de foco. Essa mudança de foco significa que sempre que você fechar essa guia ou sempre que mudar essa guia para outra guia , ela salvará automaticamente seus arquivos sem que precisemos fazer as coisas por nós. Está bem? Isso também é muito útil porque não precisamos perder nenhuma edição se dessalvarmos os arquivos Está bem? Agora, pessoal, terminamos as configurações aqui. Agora você pode simplesmente fechar as configurações aqui a partir daqui. Então você só precisa clicar nessa guia de extensão. Pessoal, mais uma última extensão que vamos instalar aqui, esse nome de extensão é Monophy Então, pessoal, você só precisa pesquisar por Monocy aqui, e aqui você vê que estamos tendo esse tema monoci Você só precisa clicar nele, e aqui você vê que estamos tendo um tema para o nosso código VS. Por enquanto, pessoal, eu instalei esse tema, mas no seu caso, você pode instalar esse tema monoci OK. Agora, aqui você pode ver a prévia desse tema. Então, o que esse tema fará significa que ele mudará as cores do seu código. Por exemplo, aqui vemos diferentes partes do código destacadas em cores diferentes. Ok, então isso tornará nosso código mais legível. Pessoal, por padrão, o código VS sugere algum tema básico, mas eu sugiro que você instale um tema especial como um tema Monochi, para que você possa instalar o tema assim. Está bem? Agora, mais uma última configuração que precisamos fazer aqui. Você só precisa clicar nessas configurações. Aqui estamos tendo temas e, no tema, temos esse tema de ícone de arquivo. Você só precisa clicar nele, e eu mantenho meu tema de arquivo como Sety, mas isso não importa para você Você também pode simplesmente definir isso como Sety. OK. Com isso, agora terminamos de configurar o código VS por enquanto. Agora você está pronto para escrever sua primeira linha de código, e é exatamente isso que faremos em nossa próxima palestra. Nos vemos lá em breve. 4. Sua primeira página da web!: Bem vindo de volta. Vamos agora escrever nossa primeira linha de código e criar nossa primeira e muito pequena página da web. Aqui estamos de volta no código VS. Agora vamos fechar esta aqui, e eu vou fechar essa guia de extensão, então vou fechá-la e vamos aqui para esta primeira guia. Aqui você vê a guia Explorer, clica nela, e aqui você vê dentro dessa guia Explorer, pessoal no código VS, sempre precisamos estar dentro de alguma pasta, e essa pasta é chamada de pasta do projeto. No momento, ainda não iniciamos nenhuma pasta, então vamos começar fazendo isso. E agora eu vou para a minha área de trabalho e vou criar uma pasta aqui na minha área de trabalho. Vou clicar na minha área clicar em Novo e criar uma pasta. Agora estou dando o nome dessa pasta como 01 testando assim. Você pode manter qualquer nome da pasta do seu projeto. Então, eu estou mantendo isso aqui. Então, aqui no meu caso, estou fazendo isso agora no meu desktop. Então, se eu criar uma pasta em qualquer outro local, isso pode causar alguma confusão para mim. É por isso que estou fazendo isso no meu desktop. Então, agora vamos voltar ao código VS. Agora vamos clicar nessa pasta aberta e eu selecionarei essa área de trabalho E aqui você vê aqui nossa pasta está lá 01 testing, que criamos aqui agora mesmo. Basta selecionar isso e clicar nessa pasta selecionada. Então você vê aqui, temos uma nova página de boas-vindas aqui. Agora, aqui você vê abaixo do início, podemos criar um novo arquivo a partir daqui. Mas a outra forma é que podemos criar um novo arquivo a partir daqui. Então, ao passar o mouse sobre esse ícone de arquivo, essas são as duas maneiras diferentes de criar novos arquivos na pasta do projeto, e eu realmente prefiro essa aqui Então, vamos clicar nele. Então, estamos prestes a criar nossa primeira página da web, e uma página da web é basicamente apenas um arquivo DML, e vamos chamá-la Coloque pontos em HTML e pressione Enter. Basicamente, é apenas o arquivo com a extensão de arquivo HTML, e o chamamos de index porque esse é o nome padrão da primeira página da web de qualquer site. índice é basicamente sempre o ponto de entrada para qualquer site e, portanto, todas as páginas da Web sempre precisam ter um arquivo HTML com pontos de índice. Certo, tenha isso em mente sempre. Chame sua primeira página de ponto de índice de HTML. Agora, meu objetivo nesta palestra não é realmente ensinar HTML a você Agora, tudo que eu quero fazer é criar um novo arquivo HTML aqui e adicionar um pouco de código aqui dentro desse arquivo HTML e depois ver o resultado no navegador. Só assim você pode escrever sua primeira linha de código e ver o resultado de escrever esse código em um navegador real. Novamente, ainda não estou começando a ensinar HTML, então, em vez de escrever uma estrutura web inteira, como geralmente precisamos, vamos usar uma pequena planilha principal que podemos usar no código VS. Então, vou escrever um ponto de exclamação e clicar em “Met Amribson” desse jeito Aqui você vê, criamos nossa estrutura de documentos HTML. Basicamente, aqui você vê, nós temos uma cabeça aqui e temos um corpo. Todas essas coisas um pouco mais tarde. Agora estou interessado aqui neste título, minha primeira página da web. Então, eu apenas amplio um pouco para que você possa ver melhor. Agora, vou escrever aqui menos de H um, você só precisa escrever em minúsculas e fechar esse símbolo maior que. Aqui você vê o código VS, coloque essa outra parte para nós. Basicamente, essa outra parte do H, agora isso realmente não importa por enquanto. Agora é só escrever hello world. Então, é basicamente uma longa tradição que seguimos. Então, sempre que você escreve nossa primeira linha de código, geralmente escrevemos hello world em qualquer programação. Está bem? Então essa é a melhor maneira de escrever nossa primeira linha de código. OK. Agora, na próxima linha, vou escrever aqui. Então você só tem que escrever novamente menos do que o símbolo, e então você tem que escrever P. Então aqui P significa parágrafo. E aqui Hach one significa título primário. É basicamente um título. Só temos que fechar esse símbolo maior do que esse e, dentro dele, vou escrever aqui. Estou escrevendo aqui meu nome. Claro, você pode escrever seu nome neste caso, e eu estou escrevendo e esta é minha primeira página na web. OK. Agora, aqui neste arquivo HTML, acabamos de escrever nossas duas primeiras linhas de código. Está bem? Agora só precisamos salvar esse arquivo para ver o resultado desse código. Está bem? Agora, para salvar isso, basta pressionar o teclado como Controles ou comandos. Ou a outra maneira de salvar o arquivo é acessar esse arquivo e aqui está a opção de salvar. Você pode simplesmente clicar nele ou usar um atalho de teclado como controle Mas atualmente estamos usando o AutoSave, então não precisamos salvar nossos arquivos manualmente Então, um código fazendo o trabalho por nós, ok? Ou você pode simplesmente salvar os arquivos, você pode clicar aqui. Agora o arquivo foi salvo, e talvez você também perceba que a formatação mudou um pouco, e isso aconteceu por causa da extensão mais bonita que instalamos no último vídeo Portanto, lembre-se de que PreaTension deve formatar nosso código automaticamente sempre que o salvarmos E foi exatamente isso que acabamos de acontecer. Então, vamos adicionar alguns espaços aqui. E se eu salvar nossos arquivos , Preter formatará automaticamente esse código para nós Então eu clico aqui fora, e aqui está. Preter está formatando nosso código, sem que precisemos fazer Agora, aqui vemos que temos muitas indentações. Portanto, o recuo significa que ele adicionará alguns espaços. Pessoal, por que precisamos formatar nosso código para torná-lo mais legível Está bem? E esse é o poder de ser mais bonito, e isso garantirá que seu código sempre tenha a mesma aparência do código do vídeo Grade e agora temos esse arquivo HTML de pontos de índice e podemos abri-lo no navegador. Então, agora vou voltar para o meu desktop. Então, onde esse arquivo está localizado. Então, dentro dessa pasta de testes, aqui está o nosso arquivo. Agora, para abrir isso, você pode simplesmente clicar duas vezes nele ou simplesmente escrever, clicar nele e clicar em Abrir e selecioná-lo como Google Chrome Aqui está nossa primeira página da web que acabamos de criar manualmente no código VS. Ótimo. E isso é realmente incrível se você me perguntar. Então, parabéns e parabéns em sua primeira página da web aqui. Então, vamos colocar esse Google Chrome no lado direito e o código VS no lado esquerdo. Agora vou simplesmente fechar esta aba do Explorer , então aqui você vê aqui que temos esse título H. Então, esse olá mundo, aqui você vê no navegador da web, esse olá mundo no texto grande e em negrito. E então escrevemos um parágrafo. Então, está no texto normal, como você pode ver. E mais uma coisa que está lá em nossa página da web, que é o título desta página da web. Então, aqui você vê exatamente a mesma linha que escrevemos no título do nosso código VS. Então, isso é exatamente impresso no navegador da web. Então, mais uma vez, o código que escrevemos aqui em nosso documento HTML agora está refletido no navegador real. Por falar em navegador da web, estou usando o Google Chrome para testar todo o curso que escreveremos ao longo deste curso. Por isso, eu realmente recomendo que você também use Google Chrome para sempre testar o código que está escrevendo, para garantir novamente que você tenha exatamente os mesmos resultados está vendo no vídeo do curso. OK. E isso é realmente suficiente para este primeiro vídeo de codificação, e espero que você realmente tenha as ideias que eu queria mostrar nesta palestra Então, basicamente, começando pela criação de uma pasta de projeto e, em seguida, abrindo essa pasta de projeto no código VS. Então, nesta pasta, aqui está a pasta de testes. Em seguida, criando um arquivo ML e adicionando algum código ao arquivo e, finalmente, abrindo o documento HTML em um navegador real, como o Google Chrome, onde vemos o resultado. Então, basicamente, a tradução do nosso código em um resultado visual. Espero que você tenha se divertido fazendo isso e nos vemos no próximo vídeo. Obrigada. 5. Baixando material do curso: Agora, uma das coisas que você precisa para fazer este curso é ter acesso a alguns arquivos iniciais Neste vídeo, deixe-me mostrar rapidamente como você pode acessar esses arquivos. Todos os arquivos iniciais, bem como os arquivos finais do curso, estão hospedados neste chamado repositório no Github e o Github é basicamente uma plataforma de código maioria dos desenvolvedores carrega em que a maioria dos desenvolvedores carrega seu código para compartilhá-lo ou colaborar com outros desenvolvedores ou simplesmente para colaborar com outros desenvolvedores Portanto, nosso repositório é basicamente uma pasta que contém vários códigos ou outros arquivos E cada repositório pode ser acessado por uma URL, e esse repositório está disponível nessa URL, mas não se preocupe, você não precisa digitar isso Pessoal, na seção acima deste curso, forneci o link para esta página do Gu para que, a partir daí, você possa simplesmente clicar no link e ir diretamente para a página de recursos. Certo. Tenho certeza de que você pode encontrar esse link. Mas, infelizmente, você não consegue encontrar os meios do link, então você pode simplesmente digitar esse URL do Github Então, neste repositório, como eu estava dizendo, temos alguns arquivos iniciais e também temos os arquivos finais Então, vamos primeiro entrar nos arquivos iniciais. E aqui você vê aqui, você poderá ver alguma pasta. Então, dentro dos arquivos iniciais, eu tenho esses fundamentos do DML e dentro dessa pasta, estou tendo Nisso, forneci a você uma imagem e temos um arquivo de conteúdo. Se eu fechar isso e aqui você vê aqui, temos uma pasta de palavras que é IMG Então, aqui estamos tendo todas as imagens. Então, quando vamos usar essas imagens significa quando estamos construindo nosso projeto, certo? Ok. Também incluí o código final para que você possa sempre comparar seu próprio código com o código que estou escrevendo nos vídeos, e isso será muito importante para que você possa comparar seu código com o meu caso tenha algum erro em seu código. Então, comparar seu código com o meu dessa forma sempre será a maneira mais fácil de encontrar erros, encontrar erros, talvez você esteja digitando seu código, e isso acontecerá com certeza Isso acontece com todos os iniciantes. Nessa situação, você pode simplesmente ter acesso ao código final. Finalmente, aqui embaixo, há também esse documento de devolução que contém as perguntas mais frequentes. Antes de realmente começar o curso, pode ser uma boa ideia ler rapidamente essas perguntas, que devem levar apenas de dois a 3 minutos, mas tenho certeza de que isso o ajudará a esclarecer algumas dúvidas que você possa ter ao longo do curso. Mas de qualquer forma, o que realmente viemos aqui foi para realmente ter acesso ao código certo. Então, para baixar esse código, você pode simplesmente clicar neste botão verde que é o código e, em seguida, escolher este zip de download. Acabei de salvar esses arquivos em meus downloads e clicarei nesse botão. Agora meu download terminou, então eu acabei de cortar isso. Eu simplesmente volto para minha área de trabalho e colo aqui. E esses são nossos arquivos. Agora, para extrair isso no Mac, basta clicar duas vezes nele e, no Windows, clicar com o botão direito do mouse e depois clicar em extrair tudo e clicar nesse extra. Agora temos todos esses arquivos, que extraímos agora Então, agora não precisamos mais desse arquivo zip. Então, vamos deletar isso. Então, agora temos basicamente esses nossos arquivos. Então, agora podemos simplesmente abrir essa pasta. E aqui você vê pessoal, aqui temos uma pasta inicial e uma final Então, vamos aos arquivos iniciais, e aqui estou eu tendo uma pasta de fundamentos de HTML Então, aqui temos todas essas imagens e, claro, temos mais uma pasta que é desafios. Portanto, temos os arquivos iniciais e também fornecemos um arquivo de conteúdo Então, basicamente, o texto do projeto, temos os arquivos iniciais e aqui estão os arquivos para as próximas palestras Então, agora com os arquivos iniciais prontos, estamos realmente prontos para começar a aprender HTML 6. introdução a HTML: Bem vindo de volta. Agora vamos aprender rapidamente o que o HTML realmente é e o que podemos fazer com ele. Então, basicamente, HTML significa linguagem de marcação de hipertexto. E lembre-se de como aprendemos anteriormente que HTML é uma das principais tecnologias da web, junto com CSS e JavaScript. No momento, o HTML é uma linguagem de marcação que nós, desenvolvedores web, podemos usar para estruturar e descrever todo o conteúdo de qualquer página da web Então, observe como eu disse linguagem de marcação porque o HTML não é realmente uma linguagem de programação É uma linguagem de marcação porque a usamos para descrever algo E no caso do HTML, descrevemos o conteúdo usando elementos. Portanto, temos elementos diferentes que podemos usar para descrever diferentes tipos de conteúdo. Então, por exemplo, temos o elemento P que já usamos na palestra em que criamos nossa primeira página da web E então usamos o elemento P para criar o parágrafo. Mas, na verdade, temos todos os tipos de elementos diferentes, ou seja, elementos para criar links, criar cabeçalhos de páginas, imagens , vídeos e muito mais à medida que aprendemos durante todo o curso Então, como também aprendemos nessa palestra, em que construímos nossa primeira página da web, navegadores da Web como o Google Chroms entendem essencialmente o código HTML e podem renderizá-lo como um site final Então, site que podemos ver no navegador da web. Está bem? Então, isso é essencialmente o que o HTML é e o que podemos fazer com ele. Mas agora vamos ampliar um pouco e dar uma olhada na anatomia do elemento HTML Então, basicamente, dê uma olhada nos blocos de construção do elemento HTML. E vamos dar um exemplo do elemento de cabeçalho aqui, como você pode ver. Então, tudo isso é, na verdade, o elemento em si. Agora, um elemento TMR geralmente é composto por três partes. primeira é a tag de abertura, que é o nome do elemento. Então, neste caso, é o H envolto nos símbolos menor que e maior que. Gente, eles têm outros nomes, mas é assim que eu gosto de chamar esses símbolos. Portanto, é menor que H um e depois maior que. Então, temos basicamente o conteúdo do elemento. Então, neste exemplo, isso é apenas texto, mas pode haver outros tipos de conteúdo. Por exemplo, um elemento pode conter em seu outro elemento, que então chamamos de elemento filho. Além disso, alguns elementos, como imagens, não têm conteúdo algum e têm apenas uma tag de abertura, e tudo isso, é claro, se tornará muito intuitivo quando começarmos a escrever HTML. Isso é só para que você saiba do que estou falando. Quando falo de tag de abertura, tag de fechamento ou conteúdo, e falo da tag de fechamento, é basicamente o mesmo que a tag de abertura, mas com uma barra Então, abrimos esse elemento de cabeçalho simplesmente com essa tag H one e, em seguida, o fechamos com uma barra Está bem? Agora, como os elementos não têm conteúdo, como o elemento de imagem que mencionei anteriormente, na verdade omitimos a tag de fechamento Então, nesse caso, temos apenas a etiqueta de abertura e pronto. E veremos isso em ação, é claro, quando começarmos a integrar imagens em nossas páginas da web Ok, e isso é realmente tudo que você precisa para começar a aprender HTML na prática, que é exatamente o que faremos na próxima palestra. Obrigada. 7. Estrutura do documento HTML: Bem vindo de volta. Então, a primeira coisa que precisamos aprender sobre HTML é a estrutura comum de documentos HTML. Portanto, uma estrutura que todo e qualquer documento HTML precisa ter. Mas vamos começar dando uma olhada rápida no projeto que vamos construir ao longo desta seção. Então, estamos construindo este site do Coding Ninja. Então, dentro deste site de codificação Ninja , temos alguns links, alguns títulos e algumas imagens. Aqui você vê que temos um texto em negrito, e aqui temos uma lista . Portanto, há um monte de coisas que aprenderemos nesta seção para que, no final, você tenha aprendido os fundamentos do HTML e terminaremos com este projeto OK. Mas de qualquer forma, agora vamos finalmente começar a trabalhar. E a primeira coisa que precisamos fazer novamente aqui é criar nossa pasta de projeto. Então, vamos voltar ao nosso desktop. E aqui você vê que temos uma pasta, que baixamos do Github na última seção Então, vamos abrir isso, e eu vou em frente com o arquivo inicial E aqui você vê que temos uma pasta, os fundamentos do DML Eu apenas pego uma cópia dessa pasta e a colo na minha área de trabalho. Aqui, nossa pasta está lá. Agora, em vez de fazer isso, você também pode simplesmente usar essa pasta aqui como a pasta do seu projeto. Mas isso pode levar a algumas confusões. Por isso, eu sempre prefiro simplesmente copiar essa pasta aqui para outro lugar. Está bem? Agora vamos voltar ao nosso código VS. Agora, simplesmente para criar uma nova janela no código VS , basta clicar nessas barras e clicar nesse arquivo. E aqui você vê aqui que podemos criar uma nova janela clicando aqui ou você pode usar um atalho de teclado como Control Shift E. Então, vou clicar nela, e aqui está nossa nova janela de código VS Então eu acabei de fechar isso. Então eu acabei de fechar essa janela. Então, vamos colocá-lo no lado esquerdo. E o navegador no lado direito. Agora vamos encerrar essa boas-vindas. Então, aqui você precisa clicar nessa guia Explorer para expandir isso. E aqui temos que clicar nesta pasta Abrir. Portanto, no código VS, sempre é necessário ter algo chamado pasta de projeto , como eu já disse antes. Então, vamos clicar nessa pasta Abrir. E aqui eu apenas clico na minha área de trabalho. Acabei de selecionar esses fundamentos de ML, que acabei de copiar e colar Vou selecionar isso e clicar nessa pasta selecionada. Agora, pessoal, estamos com sucesso na pasta do projeto, que criamos. Então aqui você vê aqui que temos algumas imagens. Então, basicamente, um arquivo de texto. Então, aqui temos muito conteúdo. Então, depois, podemos copiar isso. Então, veremos isso um pouco mais tarde. Então, vou fechar isso. Então aqui você vê, pessoal, primeiro, precisamos criar um arquivo. Então, eu só quero criar um novo arquivo aqui. Então, eu apenas dou um nome como HTML de ponto de índice. Então, aqui você vê que temos um arquivo HTML com extensão HTML de pontos e precisamos sempre fornecer nosso nome de arquivo como índice ao criarmos nosso primeiro documento HTML. Então, pessoal, como vocês lembraram na palestra anterior, usamos o achieve Set para criar nossa estrutura de documentos HTML Usamos esse ponto de exclamação. Em seguida, clicamos aqui e aqui você vê que nossa estrutura de documentos HTML é criada simplesmente usando uma folha Mas a primeira coisa que precisamos aprender em HTML é a estrutura comum de documentos HTML Em primeiro lugar, quero aumentar o zoom. Então, pessoal, para ampliar para ver nosso texto com mais clareza, você precisa pressionar o teclado como controle e rolar o mouse na direção superior. Como você pode ver aqui. Então, pessoal, vamos deletar tudo isso e agora vamos escrever a primeira coisa em DMs Vamos escrever Menos do que símbolo e ponto de exclamação, e então temos que escrever em maiúsculas as palavras que o cachorro E aqui você vê que o código VS está tentando preencher isso automaticamente para nós Então, vamos escrevê-lo à mão para que esse código fique na sua mente de forma permanente. Então, vamos escrever depois desse HTML, e temos que fechar isso. Então escreva esse símbolo maior que. Então, o que esse tipo de documento está dizendo ao nosso navegador, estamos usando a versão cinco do HTML para criar nossa página da web. Depois disso, pessoal, como vocês sabem, para criar um elemento, precisamos sempre escrever menos do que o símbolo, fornecer o nome do elemento e fechar o elemento. Então, agora, o elemento que estamos usando significa estamos criando um elemento HTML diretamente no HTML minúsculo fechamos o elemento com um símbolo maior que Portanto, o código VS fecha automaticamente essa tag de fechamento. Gente, se você não quiser que esse código do VS feche automaticamente essa tag, pessoal, você pode ir até as configurações e clicar nas configurações. E aqui você tem que pesquisar a tag de fechamento automático. Aqui você vê que nossa tag de fechamento automático está ativada, basta desmarcá-la e nós a habilitaremos um pouco mais tarde Então, por enquanto, vamos escrever à mão. Então, vamos praticar escrevendo código HTML. Então pessoal, vamos fechar essa barra lateral para que seja a guia explorer para dar um pouco mais de espaço para nós Aqui você vê caras na tag HTML, precisamos criar dois elementos. A primeira é a etiqueta de cabeça, crie-a menos que símbolo e cabeça. Então, imediatamente, temos que fechar essa cabeça também. E aqui temos que criar o elemento corporal. Gente, qualquer elemento que você esteja abrindo, você tem que fechá-lo também assim Ao fechar, você deve fornecer uma barra aqui. Agora, pessoal, como vocês podem ver aqui, temos um tipo de médico. Depois disso, temos um elemento HTML e, nesse elemento HTML, temos um elemento principal e também um elemento corpo Esse elemento HTML é o pai dessa cabeça e corpo. Portanto, todo e qualquer documento HTML sempre precisa começar com um elemento HTML como esse. Agora, o elemento principal é basicamente para coisas que não estão visíveis na janela do navegador. Agora, esse cabeçalho conterá o título da página, algumas informações adicionais sobre a página, um link para arquivos CSS ou outras coisas. À medida que avançamos no curso, preencheremos essa cabeça com todos os tipos de elementos diferentes. Mas, por enquanto, tudo o que eu quero fazer é especificar o título. Vamos usar o elemento título aqui. E esse título, temos que fechá-lo também. Então, dentro desse título, eu só quero chamar esse título como a linguagem básica da web. Ok, então o corpo é, na verdade, para todos os elementos que estarão visíveis na página. Então, todos os elementos que vemos aqui no navegador sempre estarão dentro do elemento do corpo. E só para mostrar para você, em vez de deixá-lo vazio, deixe-me colocar um código aqui. Vou usar novamente o elemento de cabeçalho, então vamos fechar isso. Então, eu simplesmente pego esse título e colo aqui. Agora vamos fechar esse H. No momento, ainda não salvamos esse arquivo, mas, à medida que o fazemos, Preter formatará novamente esse arquivo para nós Vamos salvar e você verá que agora temos o recuo correto E por indentação, o que quero dizer é que veja que esse elemento principal está dentro desse elemento HTML Então, temos uma aba aqui, então alguns espaços aqui. Depois disso, você vê dentro desse elemento principal, temos um título aqui. Aqui temos um pouco mais de recuo, então temos mais alguns espaços Então, basicamente, isso é apenas uma guia aqui. Então, se eu pressionar Tab K, ele adicionará outro nível de recuo Então, basicamente, isso é apenas um tamanho de guia. Então, se eu clicar em uma guia no meu teclado, aqui você vê. Então, agora, está no mesmo nível do título, que não faz sentido porque o título também está dentro da cabeça, certo. Então, temos a cabeça dentro da DML e, dentro da cabeça, temos esse elemento de título Portanto, ele tem outro nível de indentação. Está bem? Agora, isso é apenas por razões estéticas para tornar nosso código mais legível Portanto, o navegador realmente não se importa com esse recuo, mas ainda é importante possamos ler o código, e acho que agora estamos prontos para realmente abri-lo no navegador Então, vamos voltar ao nosso desktop. Vamos abrir a pasta do nosso projeto, os fundamentos do HTML, e simplesmente clicar duas vezes nesse arquivo HTML com pontos de índice E aqui está um bom, ótimo trabalho. Vamos colocá-lo no lado direito e como código no lado esquerdo. Então, vamos fechar este. Então eu apenas o trago para a frente. Vou manter isso aberto apenas para que possamos ver o que queremos alcançar no final. OK. E com isso, aprendemos a estrutura básica do HTML. Então, vamos revisar rapidamente. Portanto, todo documento HTML sempre precisa começar com o chamado tipo de documento. E isso permitirá que o navegador saiba o que estamos realmente usando HTML nesse arquivo. E todos os navegadores saberão que devem usar a especificação do arquivo HTML para renderizar esse HTML. Em seguida, temos o elemento HTML, que é sempre o pai do elemento principal e do corpo. Portanto, essa estrutura é sempre a mesma em todas as páginas da web. Sempre precisamos ter um elemento HTML com cabeça e corpo. Agora, o que colocamos na cabeça e no corpo é opcional, mas ter esses dois não é opcional, então sempre precisamos de uma cabeça e um corpo. Agora, nessa situação, tudo o que colocamos na cabeça é apenas um elemento de título. Mas aqui podemos colocar todos os tipos de outras coisas que não são visíveis e que não são renderizadas nesta parte principal do navegador Por outro lado, o conteúdo que realmente queremos renderizar aqui deve ir para o elemento body. É por isso que esse elemento H one aparece em nossa página da web. Está bem? Essa é a estrutura básica de estimativa para cada documento de estimativa que você realmente precisa conhecer. E com isso, vamos continuar com a próxima palestra, onde aprenderemos alguns novos elementos para trabalhar com texto Então, espero ver você lá em breve. Obrigada 8. Elementos de texto Títulos, parágrafos, negrito e itálico: Ei, pessoal, bem-vindos de volta. Nesta palestra, continuaremos aprendendo como marcar texto Portanto, continuaremos usando alguns títulos, alguns parágrafos e também aprenderemos como colocar texto em negrito e E vamos começar com cabeçalhos. Então, normalmente, o objetivo dos títulos é dividir grandes blocos de texto em seções mais lógicas e basicamente, adicionar um título para cada uma dessas seções Agora você já aprendeu sobre um título chamado de título H um, mas na verdade existem seis títulos diferentes Portanto, há uma hierarquia de títulos para que possamos estabelecer uma hierarquia em nosso texto, para que possamos ir de H um a H seis Então, vamos pegar esse texto e criar todos esses seis títulos, só para que você possa ver como eles parecem diferentes visualmente no navegador Então esse H um é o título principal, e agora vamos usar esse H dois, então vamos escrever menos do que o símbolo. H dois. Pessoal, H dois representa o título secundário. Vamos fechar isso. apenas colar o texto que copiei Vou apenas fechar esse título secundário. Agora, para o título do território, temos que escrever H três e colar o texto. Agora, é claro, temos que fechar essa tag também. Agora, caras como esse, só temos seis títulos diferentes. Então, vamos simplesmente escrever tudo isso e eu vou colar tudo isso. Então, temos pi. O último título é “caras seis”. É o último título. Vamos salvá-lo neste arquivo HTML, tudo bem. Conforme você digita esses caracteres, esse código, tudo isso começará a entrar em seu cérebro e você começará a praticar a escrita em HTML Oi seis e vamos salvá-lo. Como você pode ver aqui, isso realmente criou uma hierarquia visual basicamente entre esses seis títulos O primeiro é o maior e o maior cabeçalho e o último título é esse seis. Esse é o cabeçalho mais pequeno. Agora, pessoal, acho que vocês têm uma pergunta em mente por que existem apenas seis cabeçalhos em HTML Por que não temos sete? Então, vamos experimentar. Então, estamos escrevendo esses sete, e o que copiamos neste texto, estamos colando novamente Então, vamos fechar essa tag. Então, como vocês podem ver aqui, pessoal, escrevemos esses sete títulos. Então, basicamente, não é um título válido para mostrar a você, acabei de escrever isso. Então, aqui você vê, como um parágrafo simples, esse título entrou em nossa página da web. Então, eu acabei de excluir isso, então, basicamente, temos apenas seis cabeçalhos. Então, o último título é esse seis, então é o menor título. E entre esse H e Hessix, temos todos esses tipos diferentes de títulos Agora sabemos como esses diferentes títulos funcionam. Mas vamos dar uma olhada em nosso site Coding Ninja só para ver de que tipo de cabeçalhos realmente precisamos. Então aqui você vê caras neste site de codificação Ninja, estamos tendo esse título Portanto, esse é o maior título em nossa página da web. Então eu acho que pode ser o título Huan. Portanto, é o título principal. E aqui você vê os caras abaixo desse título, estamos tendo outro título. Então, olhe com cuidado. Portanto, esse não é mais o título principal. Então esse é o título secundário e, depois disso, temos algumas imagens. Aqui você vê, então esse título é menor do que isso. Portanto, esse título é basicamente o título do nosso território. Então esse é o título dos três. Lembra como eu disse que um título serve basicamente para dividir o texto em seções lógicas, certo? Então, aqui entre eles, temos outra seção. Então, vamos agora criar a marcação para esse tipo de estrutura Então, temos todo o texto que realmente precisamos aqui. Então, pessoal, aqui você tem que clicar nessa guia Explorer. Então, pessoal, aqui você vê, temos um arquivo de conteúdo, esse arquivo de texto. Se você quiser abrir isso, basta clicar duas vezes nele e aqui nosso arquivo de texto ou se quiser abrir na barra lateral e soltá-lo aqui Então, pessoal, aqui, veja, nós temos esse conteúdo. Então, a partir desse conteúdo, criamos este site. Então, vamos colidir essa barra lateral. Só precisamos copiar e colar esse código aqui ou esse texto em nosso arquivo HTML de ponto de índice. Então, vamos fazer isso. Então, estou deixando isso aqui para sua referência. Portanto, lembre-se de que vamos começar com o título principal. Então, vamos adicionar alguns espaços aqui. E vamos para esse arquivo de conteúdo. Então, pessoal, eu adicionei esses hashes para vocês entenderem qual é o título e qual é o parágrafo Então, aqui você vê que eu adicionei este porque é o título principal. Então, como você pode ver aqui, isso é um hash duplo, então é um título secundário E foi assim que eu criei esse arquivo de conteúdo. Então, agora vamos criar esse título principal. Então, simplesmente copiarei essa primeira coisa e irei para o meu arquivo HTML de ponto de índice e adicionarei alguns espaços aqui e criarei um cabeçalho hash one Basicamente, é um título principal. Vamos colar aqui. E vamos fechar esse H também. Então, aqui você vê aqui que temos um segundo título. Então, vamos pegar uma cópia disso. Então, vamos criar um título secundário. E ao digitar esses caracteres, você poderá começar a praticar a escrita em HTM Então, ele ficará em seu cérebro permanentemente. Então, vamos adicionar mais alguns títulos medida que você navega pela nossa página da web. Então, aqui você vê, aqui temos nosso título de tartária, então H três, e vamos escrevê-lo à mão E não vamos fechar isso imediatamente. Agora basta salvá-lo e abrir nossa página da web. E agora vamos recarregar nossa página da web. E aqui vamos nós. Bom. Então esse é o tipo de estrutura do nosso texto agora. E agora só precisamos preenchê-lo com os parágrafos intermediários Então, basicamente, como esses parágrafos estão no meio, então temos alguns parágrafos Então, como você pode ver, vamos adicioná-lo aqui. Então, eu simplesmente entro no meu arquivo de conteúdo e vou pegar isso. Então, pessoal, enquanto copiamos e colamos esse texto, eu aprendi um truque de atalho muito interessante nesse truque No entanto, se eu copiar esse texto, eu só quero arrastá-lo da parte superior, e eu só tenho que soltá-lo aqui. O que eu aprendi significa que, se eu quiser selecionar diretamente este parágrafo, posso simplesmente clicar três vezes aqui desta forma e selecionarei qualquer parágrafo para copiá-lo. Aqui você vê. Então, se eu quiser apenas copiar este parágrafo, basta clicar três vezes aqui. Então, o parágrafo é selecionado. Então, esse é um curta-metragem muito interessante. Então, se você quiser selecionar esta linha completa, basta clicar três vezes aqui e copiá-la. Então, eu vou para o meu arquivo HTML de pontos de índice. Portanto, este parágrafo está abaixo do título secundário. Então, essa linguagem básica da web. Então eu apenas colo aqui. Vamos fechar esse. Gente, depois dessa imagem, temos mais texto. Vamos copiar isso. Então, vamos criar mais alguns parágrafos. Vamos criar mais um parágrafo, e eu só quero fechá-lo imediatamente. Entre esse elemento de parágrafo, eu só quero colar esse texto. Então eu pego isso e vou colar aqui. Vamos salvá-lo, e vamos lá. Aqui você vê no arquivo HTML. Então, aqui temos mais texto. Então, esses dois parágrafos. Vamos adicionar isso também. Vou selecionar isso e dar um pouco de espaço e temos que colar essa balas E temos que criar mais um parágrafo e fechar esse parágrafo também. Agora, vamos colar isso. Aqui. Vamos dar um cofre e aqui está. Pessoal, só no começo instalamos a extensão mais bonita, e isso está fazendo com que nosso código pareça muito bom Ele adicionou um recuo correto para nós. Agora vamos dar uma olhada na página da web. Agora vamos recarregar esta página da web e vamos lá. Bom, ótimo. Vamos agora realmente nos livrar de todos esses seis títulos aqui. Então agora você já sabe como eles funcionam e existem. E, na verdade, em vez de nos livrarmos deles, podemos usar algo chamado comandos em HTML. Portanto, um comentário em HTML é uma forma de escrever algum código que não estará visível no navegador. E isso é muito útil porque nos permite escrever comentários sobre nosso código ou simplesmente ocultar algum código que não queremos renderizar no navegador. Agora, para escrever um comando, é uma sintaxe um pouco estranha Então, eu apenas adiciono alguns espaços aqui. Novamente, escrevemos um símbolo menor que, e aqui temos que escrever exclamação e depois um traço E, como você pode ver, código VS fecha automaticamente essa outra parte para nós Basicamente, essa flecha. Acabei de remover isso. Agora, como você pode ver, a cor completa do nosso código ficou cinza. Como tudo isso agora é um comentário, esse código não será renderizado no navegador da web Então, eu só quero mostrar a você enquanto ilude a página da web. Então, agora esta página da web está completamente vazia. Então, porque todo esse código agora é um comando. Gente, eu só quero comentar apenas os seis títulos. Então, eu só quero encerrar isso fechando o comando. Para fechar o comando, precisamos adicionar um traço duplo e adicionar um símbolo maior que E aqui você vê que esse texto ficou totalmente colorido. Qualquer que seja a parte que comentamos no DML, esse código ficou cinza Então, agora vamos recarregar a página da web. Gente, só uma coisa que eu não mencionei anteriormente sobre os títulos é que cada página da web deve ter apenas um título H um Portanto, apenas um título principal é muito importante ter em mente. Isso não é realmente obrigatório. Não viola nenhuma regra de HTML se tivermos várias letras H, mas é uma prática muito boa ter sempre apenas uma delas. Agora, sobre todos os outros, podemos usar, é claro, vários deles. Então, por exemplo, acho que em nossa página da web, na verdade, temos outro desses títulos Aqui vemos no meio. Então, aqui está o que é um cabeçalho HTML. Este é um título semelhante ao título acima. Então isso também é um acréscimo, e isso também é um acréscimo. Agora, só para finalizar, deixe-me mostrar rapidamente como podemos criar texto em negrito e itálico Então, aqui no nosso lado de demonstração, aqui você vê, temos o nome da autora que é Maria, que está em negrito. Então, como podemos fazer isso em HTML? Bem, há um elemento especial para esse ou, na verdade, dois elementos. E deixe-me começar com um mais simples chamado B. Então, aqui você vê os caras no parágrafo Neste parágrafo, temos essa Maria. Então, vamos colocar essa Maria na etiqueta B. Então B significa negrito. Então, vamos escrever B e fechar essa tag como qualquer outra tag. Então, vamos fechar essa tag B. Agora vamos ver nossa página da web. Aqui você vê caras nessa Maria. Então, se eu recarregar esta página da web, agora, veja o que acontece Então você vê que ficou em negrito. Ótimo. Agora, no entanto, o uso de B na verdade não é uma boa prática. Então B é na verdade um elemento mais antigo. E começando em DML Pi, devemos sempre usar o elemento forte em vez de B. A razão para isso é que B não tem o chamado significado semântico e mais adiante Mas, essencialmente, o que isso significa é que B é simplesmente um elemento sem ter um significado específico. Por outro lado, o elemento forte significa que esse é realmente um elemento importante que queremos destacar do parágrafo. Então, vamos mudar isso muito forte. Então, vamos confirmar isso recarregando nossa página da web. Sim, ainda está em negrito, mas agora significa que é um texto mais importante, e essa é essencialmente a ideia de cimentar o E, novamente, falaremos mais sobre HTML semântico até o final disso Então, por enquanto, saiba que não use B, mas use forte para deixar o texto em negrito. Agora vamos também fazer um texto em itálico. Vamos escolher essa palavra. Então, essas tecnologias fundamentais. E, assim como B, existem duas maneiras de fazer isso. O mais antigo é o elemento I. Então, envolvendo essas tecnologias nesse elemento I, vamos encerrar isso Então, agora, se recarregarmos nossa página da web, aqui você verá este texto. As tecnologias fundamentais ficaram em itálico Então, como usamos esse elemento I, mas pessoal, mais uma vez, para fazer esse HTML semântico, não devemos mais usar esse elemento I, mas em vez de escrever esse I, podemos usar EM Então EM significa ênfase. Vamos salvá-lo. Agora, pessoal, se eu recarregar a página da web, vocês poderão ver os resultados Então, agora nosso texto está em itálico, mas agora, basicamente, atribuímos a ele o significado de um texto de ênfase, mas ele tem um significado semântico Ok, ótimo. Isso é um grande progresso. Você está indo muito bem até este ponto. Agora, só para terminar esta palestra, na verdade eu já quero te dar seu primeiro pequeno desafio de codificação Então eu vou até este Stab , então o que eu quero que você faça é aqui você veja aqui que estamos tendo essa linguagem de marcação de hipertexto Então, aqui você vê a letra inicial disso. Então, esse HTML, isso está em negrito. Então, basicamente aqui, aqui estamos tendo essa linguagem de marcação de hipertexto Então esses H T M e L. Então eu quero isso em negrito. Então você acha que pode fazer isso e escrever algum código HTML sozinho pela primeira vez? Bem, eu realmente espero que você tente porque, como eu disse antes, esses desafios de codificação são muito, muito importantes para você começar a praticar suas habilidades, mesmo que seja algo muito simples como Então, por favor, pause o vídeo agora mesmo e coloque cada uma dessas quatro letras em negrito E eu estarei de volta aqui em um segundo com você para mostrar como isso é feito. Então você conseguiu fazer isso bem? Agora vou mostrar como você pode tornar isso ousado. Então, vamos envolvê-lo no elemento forte, e aqui e aqui temos que fechar isso e aqui no texto, então temos que adicionar outro elemento forte. Aqui temos que ousar isso. Vamos adicionar mais um elemento forte. O último é esse L. Vamos ousar este também. Espero ter feito todas as coisas corretamente. Agora vou recarregar a página da web. E aqui vamos nós. O HTML agora está marcado em negrito, ótimo. Então, novamente, espero que você tenha conseguido fazer isso sozinho, pois isso é muito importante para o seu processo de aprendizado. Então, pessoal, na próxima palestra, adicionaremos mais texto à nossa página da web e tentaremos fazer muitas coisas diferentes Caros alunos, espero que estejam gostando do curso e achando-o valioso. Eu me esforcei muito para criar este curso para você e seu feedback significa muito para mim. Se este curso ajudou você de alguma forma, seja aprimorando suas habilidades, aumentando sua confiança ou inspirando você a criar algo por conta própria, reserve um momento para escrever uma Seu feedback me motiva a continuar. Obrigado por fazer parte dessa jornada. Mal posso esperar para ler seus pensamentos. 9. Mais elementos de texto Lista ordenada e lista não ordenada: Vamos continuar trabalhando com texto. E nesta palestra, aprenderemos como criar listas com marcadores e também com números E o que quero dizer com uma lista é basicamente uma lista de marcadores, como aqui você vê Então, aqui estamos tendo todos esses pontos principais. E também como uma lista de pedidos como esses números. Então, aqui vemos aqui um, dois, três, e também temos uma lista com os marcadores Vamos ver como podemos criar isso em nosso HTML. Isso é muito fácil de fazer em HTML. Então, começando com essa lista de pedidos, onde essa lista de pedidos está presente significa ela está na seção O que é HTML. Eu apenas rolo para baixo. Aqui está o que é o título HTML e depois disso, temos mais três parágrafos e temos essa lista de pedidos Portanto, temos dois parágrafos e falta mais um parágrafo Então, vamos adicionar isso também. Então, vou até este arquivo de conteúdo, que mostrei na palestra anterior Então, aqui vemos o que é HTML. Então, depois desse título, aqui temos este parágrafo, e também temos essa lista. Vamos pegar tudo isso. E cole aqui e o que eu quero bagunçar, então eu encerro este parágrafo e fecho isso Então, pessoal, para criar esse tipo de lista de pedidos, precisamos adicionar um elemento para que o nome do elemento seja OL. Então, pessoal, OL significa lista de pedidos. Claro, temos que fechar isso também. Agora vamos nos dar um pouco de espaço aqui porque, na verdade, para cada um dos elementos da lista, precisamos criar um elemento dentro da lista de pedidos. Então, para isso, usamos o elemento Ay, que significa elemento de lista. Aqui vamos adicionar esse aliado e temos que fechar este também. Então, vamos cortar isso e eu coloco aqui. Vamos pegar esses dois. E eu acabei de colar aqui. Eu acabei de colocar esse texto individual entre o fechamento de Ay desta vez. Vamos salvá-lo neste arquivo e Preter fará sua mágica Vamos salvá-lo. Como eu acabo de voltar para minha página da web que eu criei antes. Se eu recarregar isso, você verá o resultado. Aqui estamos. Agora adicionamos um elemento de parágrafo e depois criamos essa lista de pedidos. Bom. O navegador Google Chrome entende nosso código e sabe que ele deve renderizá-lo como uma lista de números de pedidos como este um, dois, três, é claro, e depois aplica automaticamente esses números sem que precisemos fazer nada. E se adicionássemos outro elemento, digamos que adicionaríamos algum outro elemento. Então, eu apenas crio o elemento e escrevo o primeiro item. E como eu acabei de dizer a vocês mais cedo, esse Ai significa item da lista. O elemento individual, temos que dar um elemento completo. Então, uma vez que criamos esse elemento OL, ele fica bem vazio e dentro dele, temos que criar alguns elementos de lista como este. Portanto, sempre que criarmos Ailements em nossa página HTML , elas serão apresentadas em marcadores como Vamos salvá-lo e recarregar a página da web, e aqui está Aqui estão, pessoal, agora que adicionei esse item anterior, é o primeiro elemento dessa lista de pedidos. Eu não quero isso, então eu me livre disso. Vamos recarregar a página da web novamente, Nie. Gente, vamos voltar ao nosso site final, nossa página final desta seção. Aqui você vê, pessoal, agora o que queremos fazer nessa página da web significa que temos que adicionar esse título aqui, por que você deveria aprender HTML Então, aqui temos que adicionar um parágrafo e, em seguida, temos que criar essa lista desordenada. Vamos voltar ao trabalho. Agora, primeiro, precisamos criar esse título. Acabei de voltar a este arquivo de conteúdo e simplesmente copiá-lo e adicionar alguns espaços aqui. Vamos criar um título Hori. Agora cole o texto aqui e feche a tag. Agora vamos voltar a esse conteúdo, pegar tudo isso e colar o texto que acabei de e colar o texto que acabei encapsular neste parágrafo. Agora temos esse conteúdo aqui, que você deseja neste tipo de lista, como marcadores aqui, e o elemento que usamos para isso é UL Talvez você possa adivinhar que UL significa lista não ordenada. Vamos fechar esse. Essa é uma sem números, que dizemos ser uma lista não ordenada porque a ordem do elemento não importa Mas, dentro da própria lista, ainda precisamos usar o elemento para os itens individuais. Assim como antes, precisamos agrupar todos esses conteúdos diferentes em um elemento aliado. Na verdade, fizemos isso antes daqui. Tenho certeza de que você sabe como fazer isso, e talvez tenha visto que esse é outro desafio de codificação muito pequeno para você Pause o vídeo e faça exatamente a mesma coisa que fizemos aqui Envolva cada um desses itens em um elemento aliado real e, assim, você pode continuar praticando a escrita de HTML sozinho Espero que tenha sido um desafio simples e vamos fazer isso rapidamente aqui. Vamos adicionar os elementos aliados aqui. Vamos fechar essa cabeça. Este é o texto grande, vamos resumi-lo aqui. Então, vamos agrupar tudo isso nos elementos aliados neste último. Vamos cortar todos esses elementos e colá-los dentro do elemento UL. E até agora, aqui estão, pessoal, nossa formatação ficou muito confusa Esse é um elemento pai dentro desse elemento pai, portanto, esse é um elemento filho, portanto, não está na ordem correta. Eu só quero dar algumas abas aqui, e aqui estamos agora com o recuo correto Para que estejam visualmente todos alinhados como elementos secundários. Então, talvez você perceba como estou usando os termos elementos filhos e elementos pais. Então, sempre que temos um elemento em vez de outro, basicamente o contêiner de outro elemento é o pai. Esse é o contêiner desse elemento. Então, isso é chamado de elemento pai. Então, nesse caso, essa é uma lista desordenada. Então, os elementos que estão dentro desse elemento pai, isso é chamado de elemento filho. Tudo bem. E você vê que o formato aqui está completamente errado. Mas não estou me preocupando com isso porque, para isso, temos a ferramenta auxiliar de Prettier cuida de toda a nossa formatação, mas espero que você veja que, sem essa formatação, isso parece É muito difícil de entender. Por exemplo, esse elemento não é um elemento filho dessa UL. Esse elemento é filho dessa UL, mas está mostrando por indentação que é o elemento pai, que não está aqui, que não está aqui, ele deve estar alinhado aqui, por exemplo, por exemplo, Mas também podemos deixá-lo mais bonito depois de salvar o arquivo E agora, como eu estava dizendo, salvar esse arquivo , Peter faz sua mágica e formatou bem esse código aqui Vamos voltar ao que estamos criando. Então aqui você vê. Vamos simplesmente recarregar esta página da web, e aqui está Criar uma lista é outra parte importante da redação de DM. Usamos isso o tempo todo Então, espero que você tenha se divertido com esta palestra, porque foi muito importante Portanto, antes de prosseguir, certifique-se de revisar o que acabamos de fazer aqui e também pensar um pouco sobre algumas das coisas que eu disse anteriormente, como o fato de que cada elemento tem um significado diferente e também que precisamos usar esses elementos para estruturar nosso conteúdo. Portanto, não podemos simplesmente colocar todo o nosso texto aqui no corpo do texto Então, se fizéssemos isso, não haveria estrutura nem lógica alguma. Mas eu só queria te mostrar o que acontece se eu selecionar. Basicamente, todo esse texto. Vamos ao nosso arquivo de conteúdo e vamos selecionar todo o texto. Vamos copiar isso. E vamos simplesmente colá-lo aqui. Vamos salvá-lo, e aqui está. Vamos voltar à nossa página da web. Vamos recarregar esta página da web, e aqui está. Embora você veja que agora tudo é um grande bloco de texto, o HTML realmente não se importa com espaços em branco. O HTML remove todas as quebras de linha aqui. Ele entrará em uma única linha. Para esses espaços em branco e quebras de linha, eles são todos irrelevantes para o HTML É isso mesmo. Não há estrutura, não há significado. Basicamente, não há nada. Vamos deletar esse texto, vamos recarregá-lo. Espero que esse pequeno exemplo tenha mostrado a importância de basicamente agrupar todas as partes do conteúdo dentro de um elemento Na verdade, isso dá algum significado ao conteúdo. Mas com isso, estou te deixando e te vejo em breve no próximo vídeo. Nos próximos vídeos, abordaremos coisas mais interessantes, então prepare-se para isso. Obrigado. 10. Imagens e atributos: Agora, uma coisa que ainda falta em nossa postagem no blog são algumas imagens. Então, vamos agora aprender como usar o elemento de imagem STML. Então, se dermos uma olhada em nossa página de demonstração, perceberemos aqui que temos essas duas imagens importantes. Então, temos essa grande imagem aqui, que meio que ilustra a postagem do blog, e também temos essa foto desse autor, então vamos começar incorporar essas imagens em nossa postagem no blog Portanto, as imagens estão, obviamente, na pasta do nosso projeto. Então, aqui nos arquivos iniciais. Então eles vieram com aquele TatterFles e a única imagem, queremos adicioná-la à nossa página da web, esta imagem de postagem Então aqui você vê aqui que temos essa imagem do post. Então, basta clicar em e você poderá ver a prévia no código VS sem problemas. Queremos adicionar essa imagem a esse arquivo ML abaixo dos elementos do corpo. Então, aqui temos os títulos. Em primeiro lugar, adicionaremos esta imagem do post. Então aqui você vê que esta imagem está abaixo deste parágrafo que foi postado por Maria. Então, estamos tendo esse parágrafo aqui. Então, abaixo disso, temos que adicionar isso. Então, aqui temos que incluir essa imagem. Assim como qualquer outro elemento, começamos por escrevê-lo desta forma. Então, menos do que um símbolo, aqui temos que escrever IMG Mas agora lembre-se de como eu realmente disse na primeira palestra desta seção que o elemento imagem é um elemento especial, porque ele não tem nenhum conteúdo e, portanto, também não tem uma etiqueta de cruzeiro Em vez disso, o que fazemos é simplesmente adicionar uma barra aqui no final desse elemento, assim Agora você pode se perguntar se não especificarmos nenhum conteúdo aqui para o elemento de imagem , como o HTML saberá qual elemento ele deve exibir? E essa é uma excelente pergunta, que nos leva a algo novo em HTML, que são atributos. Então, atributos são basicamente pedaços de dados que podemos usar para descrever elementos. Portanto, há muitos atributos diferentes em HTML, e um deles é o atributo source. E é nesse que estamos interessados agora. Portanto, o elemento de origem fica dentro desse elemento de imagem. Então, aqui temos que escrever SRC e equals, e temos que escrever códigos duplos, como você pode Então, vamos colaborar com essa barra lateral e agora adicionaremos a imagem da postagem Se não estiver se lembrando da imagem, você pode expandir a barra lateral Você pode escrever o nome da imagem. Então, escrevemos a imagem da postagem. Ou você pode obter a ajuda do código VS. É uma sugestão automática. Você pode simplesmente clicar aqui. Então, vamos voltar à nossa página da web em que estamos trabalhando. Então, vamos recarregar esta página da web aqui. E, de fato, aqui está ótimo. Então, novamente, vamos recapitular rapidamente. Não especificamos a imagem usando algum conteúdo nesse elemento. Em vez disso, o que precisávamos fazer era especificar um atributo e, nesse caso, é o atributo de origem. E lembre-se de que um atributo é basicamente como um dado. Então, uma informação que descreve esse elemento. Então, aqui estamos descrevendo a fonte a partir da qual o navegador deve basicamente ler a imagem. Certo. Agora, além dos atributos de origem, há outros atributos que podemos especificar para imagens, e um que nunca devemos ignorar é o atributo alt Então, temos que escrevê-lo assim como Alt ALT, e temos que escrever iguais, e temos que fornecer códigos duplos Então, pessoal, dentro disso, temos que descrever a imagem. Então aqui você vê, pessoal, Alt significa texto alternativo. Então, basicamente, o que precisamos especificar aqui é algum texto que descreva o que é a imagem. E isso é muito importante por vários motivos. Uma delas é permitir que mecanismos de pesquisa como o Google Chrome realmente saibam o que está na imagem, porque sem a descrição, os mecanismos de pesquisa não sabem realmente do que se trata a imagem e, provavelmente, ainda mais importante é que, ao especificar a descrição da imagem, também podemos permitir que pessoas cegas usem nosso site Assim, os usuários que usam um leitor de tela não verão a imagem, mas, em vez disso, terão um leitor de tela, lerão o texto alternativo e, portanto, a descrição para eles. Portanto, nunca pule esse atributo. É muito importante sempre escrever uma boa descrição. Então, aqui esta imagem é um código HTML na tela. Agora, isso não mudará visualmente o que vemos aqui, a menos que a imagem por algum motivo, não possa ser encontrada. Digamos que esquecemos de escrever esse JPEG. Então, esquecemos esse PG. Agora, se recarregarmos a página da web , aqui você verá o que escrevemos no texto Alter É assim que está impresso em nossa página da web, como você pode ver Então, não queremos isso, então vamos escrever. E agora vamos recarregar a página da web. E aqui está. Você está fazendo um grande progresso até este ponto. Agora, pessoal, eu só quero reduzir essa imagem. Então, eu apenas adiciono mais um atributo aqui. Portanto, podemos usar muitos atributos. Então, o que vamos usar aqui, esse é o atributo de largura. E aqui temos que escrever códigos duplos e de largura igual. Então, agora vamos reduzir essa imagem em pixels. Então, agora eu estou dando essa imagem como 640 pixels. Então você pode escrever 640 assim. E agora, se recarregarmos a página da web , veremos os resultados Então, agora a largura da imagem foi alterada com sucesso porque incorporamos essa largura aqui. Então, mais tarde, veremos isso na seção CSS. Pessoal, também podemos fornecer um atributo de altura, por exemplo, igual a esse. Agora podemos mudar isso para 600 pixels, e agora podemos dar a altura como 280 pixels. Então pessoal, agora vocês estão pensando em como eu sou capaz de fornecer esses pixels. Então, aqui eu sei as dimensões da imagem. Então, aqui você vê na imagem do post, estamos tendo esse 1280 em 720 Então 1280 aqui é a largura e 720 é a altura. Então, eu já experimentei toda a largura e altura O que eu fiz significa que tenho essa largura de 1280. Então, na calculadora, metade disso é 640 pixels Então eu adicionei esses 640 pixels. Então, depois disso, mudei de ideia e dei 600 pixels. Portanto, é muito bom e, da mesma forma, dei a esses 40 pixels. Agora, se eu recarregar a página da web e aqui estão as imagens, mas é claro que, se eu quisesse, eu poderia torná-la um quadrado Por exemplo, o que distorceria completamente a imagem como vemos aqui Então essa largura é 600. Então, se eu der apenas 600 pixels, uma vez que eu recarrego a página da web, aqui você vê Nossa imagem está completamente distorcida porque alteramos a proporção da imagem E pessoal, mais uma coisa que eu queria mostrar para vocês se vocês não tivessem dado esse atributo de altura, um deles podemos dar. E se simplesmente removermos essa altura, a proporção completa será mantida. Então, vamos recarregá-lo. E aqui vamos nós. Então, vamos fechar essa barra lateral. Sem fornecer o atributo de altura, a proporção é mantida. Mas é claro que você pode dar uma altura de acordo com você. Então, vamos recarregá-lo. Então é assim que incluímos imagens em um documento HTML, então vamos voltar à nossa página final desta postagem do blog. E aqui você vê, então mais uma imagem que queremos incluir aqui. Então, essa imagem do autor de Maria. Então, depois desse título t, temos essa imagem do autor. Então, vamos voltar aqui. Abaixo disso, temos que adicionar essa imagem do autor. Então, queremos incluir essa imagem de Maria. Então, aqui você pode ir para esta barra lateral e ver que temos essa imagem do autor, então esse autor pontuou PNG. Então você pode incluir essa imagem. Então, eu simplesmente fecho a barra lateral e adiciono alguns espaços aqui E queremos essa imagem com altura e largura de 75 pixels. Então, eu tenho outro desafio para você, e o que eu quero que você faça é desta vez incluir essa imagem que eu mostrei sozinho aqui neste lugar. Ok, então pare um minuto e pause o vídeo e inclua essa imagem com 75 por 75 pixels, e então eu voltarei aqui em um minuto com a solução Tudo bem Então, espero que você tenha um pouco mais de prática aqui. Então, vamos adicionar esse elemento de imagem aqui, e eu só quero dar o SRC, então essa fonte O dobro é igual a, e eu conheço o autor. Então, aqui, o código VS está nos ajudando, então vamos clicar nele. Nem sempre ignoramos esse atributo alt. Então, agora, para recapitular rapidamente, eu só quero dizer que esse alter significa texto alternativo Vamos escrever uma descrição dessa imagem. Eu só escrevo como foto de rosto de Maria. E então o que queremos fazer significa que temos que fornecer a propriedade de largura. Escreva-o à mão, para que o código fique na sua mente. Eu apenas atribuo 75 pixels, e agora vamos dar uma altura de 75 pixels, e não se esqueça de fechar esse elemento da imagem com uma barra como essa Então, salve e vamos voltar para nossa página da web, na qual estamos trabalhando no momento. Então, agora, se eu recarregar a página da web, tudo bem. Bom progresso. Agora sabemos como as imagens funcionam e como os atributos também funcionam. E, na verdade, podemos especificar atributos também em alguns outros elementos em HTML. E uma das maneiras pelas quais isso é muito importante é, na verdade, o próprio elemento HTML. Então, vamos subir e aqui você vê neste elemento HTML, sempre precisamos especificar um elemento, então essa é a linguagem. Então, para linguagem, usamos essa palavra-chave ang e escrevemos códigos iguais e duplos Então, o que isso significa significa, qual idioma você está usando no seu navegador. Então, atualmente, estamos usando o idioma inglês. Então, para o idioma inglês, usamos a palavra-chave Ian, assim. Mas para outros idiomas, existem outros códigos. Por exemplo, para o alemão, provavelmente é o DE e para o português, usamos PT assim. E se você tiver qualquer outro idioma, basta descobrir o código pesquisando no Google Então, vamos adicionar esse Ian. Outra coisa que podemos e realmente devemos fazer é especificar o conjunto de caracteres usado neste documento. Então, isso é algo que entra na cabeça porque é uma informação que descreve o documento. Então, aqui precisamos de outro novo elemento aqui dentro desse elemento principal. Então, aqui precisamos de um novo elemento chamado simplesmente de meta. Portanto, metadados significam dados sobre dados. Então, aqui estamos descrevendo o conjunto de caracteres. Então, aqui escrevemos um conjunto de cuidados e é igual a um código duplo. E aqui temos que escrever em maiúsculas esse UTF e oito, que basicamente são todos os caracteres simples que usamos no idioma inglês Agora, este aqui, esse elemento não tem uma tag de fechamento, então fechamos isso com uma barra como esta Agora, não estou gastando muito tempo com esse tipo de coisa, porque mais tarde, quando você realmente criar suas próprias páginas , isso acontecerá automaticamente. Isso foi apenas para mostrar que essa é apenas outra forma ou outro lugar em que precisamos de alguns atributos e, em seguida, precisamos especificar um valor para eles, tudo bem. UT de oito aqui está o valor. Especificamos para esse atributo de conjunto de caracteres. Ok, e sim. Então, pessoal, no próximo vídeo, faremos mais alguns links interessantes. Acho que é isso para esta palestra, então nos vemos na próxima 11. Hiperlinks: Um dos blocos de construção fundamentais da Internet são os hiperlinks ou links curtos Os links são o que realmente permite que a Internet seja uma rede mundial. Sem links entre páginas, haveria web, então agora vamos aprender como colocar links em nossas próprias páginas da web. Agora podemos colocar os links em duas grandes categorias. A primeira categoria são links que apontam para outras páginas em nosso próprio site. Digamos que aqui em nosso site, o Coding Ninja, tivéssemos outra postagem no blog, para que pudéssemos criar um link desta página para aquela outra página. Agora, por outro lado, a outra categoria são links que apontam para fora do nosso Por exemplo, se eu colocar um link para wlthscool.com aqui nesta página , é claro que seria um link para o exterior do nosso site Agora, criamos esses dois tipos de links exatamente da mesma forma em HTML, mas ainda há algumas particularidades que precisamos conhecer Agora, na verdade, vamos começar com um segundo link que eu estava descrevendo, que aponta para fora do nosso próprio site. Se eu voltar para minha página de demonstração, aqui você verá o que é a seção HTML, temos um link para o site da W three Schools. Este link está apontando para fora da nossa página. Se eu clicar nele, então aqui você pode conferir esses links que vão para lá. Basicamente, para o site desta escola WT. Este é basicamente um site onde você pode aprender tudo sobre HTML e também CSS e JavaScript. Ele oferece tutoriais e recursos para aprendizado, desenvolvimento web e programação com exemplos interativos para experiência prática, pois é importante, como desenvolvedor web, saber como usar e encontrar informações aqui nesta página de documentação da web Agora, o que queremos aqui significa que só precisamos copiar esse URL. Agora, para fazer isso, você pode criar uma nova guia aqui. Aqui você pode pesquisá-lo como Webley schools Webel schools HTML Introduction Agora você pode conferir este site da W three Schools, então você pode simplesmente abri-lo e, em seguida, entrar no mesmo site. Ou se você não encontrou este site significa que não há nenhum problema. Então, estou apenas copiando esse URL e, novamente, lembre-se de que isso é chamado de URL. Então, como você sabe, cada site na Internet tem seu próprio URL, e é disso que precisamos para criar um link para essa página. Acabei de copiar isso, então volto para a página de demonstração e aqui está. Esse link está depois da lista de pedidos. Agora, vamos. Aqui você vê depois desta lista de pedidos, temos um link aqui. Vamos criar um link após essa lista de pedidos. Para criar um link em HTML, usamos o elemento A que significa âncora Tecnicamente, um hiperlink ou link é, na verdade, chamado de âncora Portanto, é um elemento âncora. Você pode fechá-lo assim. Ou temos que realmente fechá-lo. Vamos começar fazendo isso agora. Quanto ao conteúdo do link, o que especificamos aqui é, na verdade , o texto que queremos exibir na página. O texto do link. Nesse caso, então, as escolas, mas agora e a URL? Queríamos que esse link apontasse? Bem, para isso, precisamos mais uma vez usar um atributo. Nesse caso, é um atributo tarifário e , em seguida, um código duplo , então simplesmente paginamos o URL que copiamos e pronto. Então, se eu salvar , volto para minha página da web em que estou trabalhando no momento e, se eu a recarregar , aqui está Nosso bom link é criado em HTML, e aqui você vê quando eu for às escolas do WT, aqui o URL será exibido. Você pode conferir aqui. E quando eu clico nela , você pode ver que esta página vai para o site das escolas WT, onde temos Point great. Na verdade, isso já é o básico da criação de um link. Muito simples. No momento, queremos que esse link aqui realmente seja como, vamos voltar. E se você conferir nossa página de demonstração, agora mesmo, o que eu quero significa, eu quero esse link em vez deste texto. Então, pessoal, para fazer isso, precisamos criar um elemento de parágrafo para isso e só temos que escrever o texto. Por exemplo, você pode aprender mais no link âncora que é a continuação deste parágrafo E aqui precisamos fechar o elemento do parágrafo. Assim. Vamos salvá-lo aqui, eu volto para a página da web e aqui posso recarregá-lo. Aqui você pode conferir. Isso é exatamente o mesmo que em nossa demonstração. E agora isso se parece com o original, agora mesmo, observe aqui quando eu clico neste link, então aqui você vê o que acontece aqui. Você vê que navegamos diretamente para esta página e agora nossa própria página desapareceu Então, é claro, podemos voltar aqui. Mas às vezes o que queremos fazer é abrir um link em uma nova guia. Então, deixe-me também mostrar como podemos fazer. E, claro, nem sempre queremos isso. Muitas vezes, queremos que a página realmente se mova para o URL que especificamos aqui. Mas às vezes também é útil manter a página aberta e simplesmente abrir o URL em uma nova guia. Mas podemos fazer isso especificando um atributo alvo como esse E a sintaxe é um pouco estranha. Então, temos que escrever sublinhado e depois em branco. Então salve e vamos voltar e agora recarregar mais uma vez e observe que, quando eu clicar neste link, a página será aberta em uma nova guia Observe como ele abriu uma nova guia, e a original ainda está aberta. Ótimo. Então, essa palavra e agora temos um link que aponta para um URL que está fora do nosso próprio site. Mas agora, sobre o primeiro cenário, em que queremos criar um link para uma página interna, então vamos voltar à nossa página de demonstração. Então, aqui você vê, logo no início desta página, que temos esses links, certo. Então, esses deveriam ser os links das 0,2 páginas que fazem parte deste blog. Então, vamos agora criar esse primeiro link aqui, então blogar e também criar uma nova página para a qual você possa realmente criar um link. Portanto, criar uma nova página é como criar um novo documento HTML. Então, vamos abrir a barra lateral e aqui vou criar um arquivo como log dot HTML. E escondido. Agora, criamos um arquivo HTML vazio. Agora podemos criar o clichê usando uma folha de dicas para criar a estrutura HTML Mas, na verdade, vamos praticar um pouco aqui novamente. Se quiser, você pode até pausar o vídeo digitá-lo sozinho Mas eu vou fazer isso aqui muito rápido. É HTML e, em seguida, precisamos criar um elemento principal e, claro, precisamos criar um elemento de título para essa página de bloco. Em seguida, fecharei o elemento principal e criarei um elemento corporal para isso. Aqui, vou criar uma necessidade de adicionar. Agora vamos escrever, bem-vindo ao nosso blog. E vamos fechar o cabeçalho H dois assim, e pronto. Vamos salvá-lo, e aqui temos um documento HTML muito simples e agradável. Mas agora, com isso estabelecido, podemos criar um hiperlink ou um link aqui mesmo neste arquivo HTML de ponto de índice, que apontará para o HTML de pontos do blog Vamos agrupar essa barra lateral para que o navegador navegue até essa página Vamos fazer isso depois desse título H1. Então, vou criar um elemento âncora para isso e escrever HRF Agora estou dando o nome do arquivo como blog dot HTML, que criamos E vamos fechar o elemento âncora. E dentro desse elemento âncora, precisamos escrever o texto Por enquanto, vou escrever um blog como esse e vamos salvá-lo. E se eu voltar para minha página da web, qual estamos trabalhando, agora vamos recarregar a página da web, e aqui está nosso lindo link agora veja o que acontece quando eu clico nele Estrondo. Agora estamos no blog, e você pode ver aqui nesta URL, temos esse arquivo HTML de pontos do blog no final desta URL. Agora, para voltar, é claro que poderíamos clicar aqui neste botão Voltar. Mas o que também podemos fazer é adicionar um link aqui, simplesmente apontamos para o HTML do ponto de índice, certo? Parece uma boa ideia. Então, vamos voltar aqui para este arquivo HTML de pontos do blog como mais um desafio. Agora eu quero que você realmente crie esse link sozinho. Pause um vídeo aqui e crie um link que aponte para o HTML do ponto de índice Então você conseguiu fazer isso ou pelo menos tentou? Bem, espero que sim. Mas de qualquer forma, é claro, usamos o elemento A aqui novamente. E então usamos o atributo Azure of. Em seguida, precisamos escrever aqui como uma pilha HTML de ponto de índice, onde você deseja apontar esse link Então, vamos fechá-lo. E aqui eu vou escrever , vamos fechar o elemento âncora aqui Então, aqui dentro desse texto, eu vou escrevê-lo como voltar para casa. Se você escreveu qualquer outra coisa, não há problema algum. E vamos salvá-lo. E se eu recarregar a página da web, teremos um link. Podemos clicar nele e voltar. Então, podemos voltar ao blog, e também podemos voltar ao ponto índice m. Então, vamos fechar este. Não precisamos mais disso. E só para finalizar, também podemos especificar um link que não vai a lugar nenhum. Deixe-me mostrar isso para você também. Então, vamos escrever o conteúdo primeiro. Então, vamos escrever um elemento âncora e fechá-lo. E aqui, vamos dar uma olhada na página de demonstração. Aqui temos uma grade flexbox e CSS. Agora vamos escrever flexbox. Basicamente, o conteúdo, mas veja o que acontece quando eu recarrego a página Então, vamos dar uma olhada agora você vê que isso não é mais um link, então é um texto normal. Você vê que diz apenas flexbox, mas observe que é apenas um texto normal e não está sublinhado Claramente, não é um link. Embora seja na verdade um elemento âncora , o que torna um incentivo realmente um link é a propriedade HRF, então realmente precisamos especificá-la Caso contrário, não é um link. Então, é apenas uma âncora que não é realmente útil agora. Mas e se você não quiser que esses pontos cheguem a lugar nenhum, como eu estava dizendo, bem, a solução é fornecer tem aqui. Se eu salvar agora e recarregá-lo , voltaremos a ser um link Na verdade, simplesmente não aponta para lugar nenhum. O que acontece quando você clica nesse link é isso? Basicamente, ele volta para a parte superior, então não faz nada. Por exemplo, ele vai para o lado superior e, um pouco mais tarde neste curso, vamos realmente fazer uso desse comportamento. Mas, por enquanto, eu só quero que você saiba que é assim que podemos especificar links quando ainda não temos nenhum URL para eles ou não temos nenhuma página. Basicamente, isso é como um link de espaço reservado, então vamos copiá-lo aqui, e eu o paginei aqui, e aqui eu o escrevo como grade CSS Portanto, não há necessidade de escrevê-lo novamente. Mas é claro que, se você quiser, pode escrevê-lo novamente. Então, só para fazer com que a navegação pareça um pouco mais completa. Mas todos esses links não devem apontar para lugar nenhum, e é assim que você especifica links, hiperlinks ou âncoras, como você também pode chamá-los em HTML Essa é uma parte muito importante da web, como eu disse no início, portanto, certifique-se de entender como elas funcionam e como as colocamos em nossas próprias páginas da web. 12. Estruturando nossa página: Portanto, já aprendemos alguns elementos HTML muito importantes e também podemos criar uma boa página com algumas funcionalidades interessantes. Mas agora é hora de realmente adicionar alguma estrutura ao nosso documento e aos nossos elementos. Então, vamos agora aprender alguns novos elementos HTML phi para isso Agora, quando eu disse que a página não tem estrutura, o que eu quis dizer é que todos esses elementos que colocamos em nosso documento estão simplesmente aparecendo um após o outro aqui Eles não se distinguem realmente um do outro e, especialmente, provavelmente não estão agrupados de uma forma lógica Então, vamos mudar isso criando alguns elementos de contêiner para isso, que então agruparão esses elementos. Agora, a primeira coisa que vem à mente são os links. Então, temos esses links. Portanto, sempre que tivermos alguns links , precisaremos agrupá-los em um elemento de navegação. Então, é basicamente como uma navegação. Então, estou criando um elemento de navegação para isso. Então, basicamente, Nav significa navegação. Então, estou fechando isso e apenas salvando. Agora, se eu recarregar a página da web , aqui você vê em nossa página da web, nada mudou Então, tudo o que acontece aqui é que isso basicamente criou uma caixa invisível, que agora contém esses elementos. Está bem? Portanto, o elemento em si não faz nada. Tudo o que ele faz é agrupar esses elementos. E eu entendo que, no momento, não parece realmente intuitivo ou lógico fazer isso, mas confie em mim, será muito importante ter todas essas partes diferentes dentro de seus próprios contêineres. Tudo bem. Então, olhando para nossa página da web, aqui você vê aqui que estamos tendo essa adição e os links. Basicamente, é a parte do cabeçalho da nossa página da web. Então, só precisamos incluir essa adição e links em nosso elemento de cabeçalho. Então, esse é um elemento especial no DML. Agora estou criando um elemento de cabeçalho como esse. Só precisamos fechar esse cabeçalho abaixo do elemento de navegação. Agora agrupamos esse título e os links em um elemento de cabeçalho Gente, depois desses links, aqui está a postagem do bloco. Gente, só temos que embrulhar todos esses postes do bloco. Temos um elemento especial em HTML para isso, o nome do elemento é artigo. Um artigo nesse contexto, na verdade não significa simplesmente um artigo escrito como esse, mas também pode ser como coisas do mundo real. Como um computador é um artigo ou uma caneta ou um telefone. Então, todos esses são artigos, e se de alguma forma precisássemos representar um computador em STML , um artigo também seria um bom elemento para isso Agora, aqui você vê que nosso corpo tem dois elementos filhos diretos. Então, basicamente, esse cabeçalho e também este artigo. Vamos salvá-lo e, se eu recarregar a página da web, aqui está Nada mudou em nossa página da web. Portanto, o aspecto visual da página da web é o mesmo de antes. Agora, uma coisa que você pode perguntar, bem, se essas caixas, todas elas não fazem nada, então por que não chamamos todas elas apenas de Nav ou todas elas de cabeçalho ou todas elas de artigo Este também poderia ser um artigo e nada teria mudado na página. Por exemplo, certo. Então, se eu recarregar a página da web, pessoal, acho que algo mudou Então aqui você vê, então o título de Hawn ficou pequeno. Portanto, é menor do que isso. Então, esse é basicamente o segundo título, e esse é o título principal. Então, agora, se adicionarmos este artigo, é por isso que esse título ficou pequeno. No entanto, não fazemos isso para algo chamado HTML semântico E explicarei brevemente o que isso significa no próximo vídeo. Mas agora continuando ainda mais, então vamos colocá-lo de volta aqui. Como elemento do cabeçalho. Agora, pessoal, finalmente, se eu olhar minha página de demonstração, agora, finalmente, estamos tendo essa pose relacionada, então essa lista e também esse texto. Basicamente, esse texto é chamado de rodapé. Cada página que existe tem um rodapé no final da página da web Então, vamos apenas criá-lo. Então, só precisamos ir até o final do arquivo HDML e pessoal, para criar esse rodapé, temos um elemento especial em Gente, agora você pode estar adivinhando que o nome seria Potter Portanto, esse é um elemento especial em HTML. Então, só temos que fechar esse rodapé também. Agora também podemos criar um parágrafo aqui para criar esse texto. Gente, vamos escrever esse texto aqui. Eu não forneci este texto, então você só precisa escrevê-lo manualmente. E pessoal aqui você pode notar isso. Então, isso é chamado de símbolo de direitos autorais. Então temos esse C. Então, como podemos criar isso. Gente, isso é chamado de entidade HTML. Portanto, é algo novo em HTML. Então, agora, para criar isso, basta escrever um pequeno código. Então, temos que escrever por cento. E no meu caso, eu sei o nome do símbolo de direitos autorais. Então, temos que escrever por cento, depois copiar, e temos que escrever ponto e vírgula Ou você pode simplesmente clicar aqui e escrever a outra parte. Vamos escrever isso. Então, volte no futuro e salve. Agora vamos voltar à nossa página da web que estamos criando. E se eu recarregar a página da web , como você esperava, o aspecto visual da página ainda é o mesmo, como mencionei no início Portanto, novamente, são importantes apenas para agrupar o conteúdo em partes lógicas, o que é importante para HTML semântico e também para estilizar com CSS, como você verá Falando em HTML semântico, esse será o tópico do nosso próximo vídeo Então, espero ver você lá em breve. 13. Uma nota sobre HTML semântico: Por isso, mencionei o termo HTML semântico algumas vezes nesta seção Então, agora vamos definir muito rapidamente o que quero dizer com HTML semântico HTML. Quando falamos sobre semântica, o que queremos dizer é que certos elementos têm na verdade, um significado ou um propósito associado a eles. Então, quando pensamos em um determinado elemento HTML, na verdade não devemos pensar aparência desse elemento quando é renderizado na página Mas, em vez disso, devemos pensar sobre o que esse elemento realmente significa e o que ele representa. Essa é basicamente a definição de HTML semântico. Agora, nem todos os elementos em DML são semânticos. E, na verdade, eu falei um pouco sobre isso antes aqui neste elemento. Então, esse elemento forte que torna nosso elemento ousado aqui na página. Portanto, lembre-se de como anteriormente eu usava o elemento B, mas não atribuía nenhum significado a ele. Então eu expliquei isso antes, e agora talvez faça um pouco mais de sentido. Então, novamente, usando o elemento forte, esse texto ainda permanecerá em negrito aqui na página da web. Mas o que realmente importa aqui é que agora atribuímos algum significado a esse conteúdo aqui. Agora dizemos que é um conteúdo forte, o que significa basicamente um conteúdo muito importante. E o mesmo aqui é para esse elemento EM. Isso faz com que nosso texto seja enfatizado. Então, essa palavra de tecnologia fundamental, novamente, usamos EM para enfatizar isso, e ela ainda aparece itálico na página da web aqui, como você pode Mas o que realmente queremos dizer é isso. Por isso, demos uma ênfase especial. Isso é o que esse elemento aqui agora significa. E o mesmo vale para todos esses elementos que usamos no último vídeo. Por exemplo, aqui você vê neste elemento de navegação, tudo o que eles fazem é criar uma caixa. Lembre-se de que, em seguida, contém esses três elementos de ancoragem Mas, visualmente, isso realmente não faz nada. Tudo isso faz é representar como significado que se trata de uma navegação. Mas em vez de usar o NAB, também poderíamos ter usado um elemento mais genérico, que é o desenvolvimento Vamos apenas escrevê-lo. Temos que fechá-lo também. Assim. Visualmente, nada mudará, então tudo o que isso fez foi criar uma nova caixa, mas uma caixa sem nenhum significado. Então é isso que DV significa. Então, na véspera do DML Pi, sempre usamos D para cada caixa que precisávamos, como essa na página Mas então o HTML Phi surgiu e introduziu esse conceito de HTML semântico E agora só devemos usar o elemento D quando não quisermos atribuir um certo significado a um determinado contêiner Então, para um determinado elemento da caixa em nossa página. Então, neste caso, nós realmente queremos que isso signifique que é uma navegação. O mesmo vale para a garota, o cabeçalho e o instalador que temos aqui embaixo E, de fato, isso é verdade até mesmo para o parágrafo. Por exemplo, todos os outros parágrafos são, na verdade, basicamente caixas cheias de texto agora O P, é claro, tem um significado semântico. Isso significa que é um parágrafo, mas poderíamos novamente usar uma caixa genérica sem nenhum significado. Portanto, o desenvolvimento e nada mudariam visualmente. Então, vamos escrever agora, vamos recarregar a página da web. Na verdade, algo mudou aqui. Perdemos um pouco do espaço em branco que temos ao redor do P. Vamos colocá-lo de volta aqui de qualquer maneira. Carregue, e agora estamos de volta com nossos parágrafos porque queremos que eles tenham algum significado e, claro, também queremos o espaçamento que o navegador nos fornece por padrão em torno dos elementos P. Mas a ideia que eu mencionei ainda porque poderíamos facilmente recriar esse espaço aqui usando um pouco de CSS mais tarde Então, se você quisesse, poderíamos, na verdade, criar a página da web inteira apenas com elementos D, se você quisesse, e depois usar CSS para estilizá-los como quisermos Mas é claro que não fazemos isso. Usamos HTML semântico para dar significado aos nossos elementos. Agora você pode perguntar por que realmente fazemos isso e há vários motivos, e acho que já os mencionei. Então, uma delas é a otimização de mecanismos de pesquisa, que basicamente significa que mecanismos de pesquisa como Google serão capazes entender a estrutura do nosso conteúdo e, portanto, serão mais capazes de analisar qual é o seu conteúdo e o que é sua página da web. Além disso, escrever HTML semântico é extremamente importante para acessibilidade e, especialmente, para pessoas que dependem de leitores de tela que consomem nossas páginas da web Está bem? Então, espero que isso faça sentido, e também continuaremos abordando esse assunto à medida que examinamos o resto dos códigos Mas eu ainda queria deixar bem claro desde o início que, quando pensamos em HTML, não devemos pensar apenas em como ele realmente se parece no navegador, mas ainda mais sobre o que esses elementos realmente significam e o que eles representam. E com isso dito, meio que terminamos tudo o que tínhamos que aprender nesta seção. Então, no próximo vídeo, configuraremos o código VS um pouco mais e, em seguida, passaremos para os desafios finais. Então não espere e vamos continuar com a próxima palestra aqui. 14. Instalando extensões de código VS adicionais: Bem-vindo de volta. Então, começamos a configurar nosso editor de código VS logo no início do curso Mas agora, neste momento, estamos prontos para instalar três extensões adicionais que tornarão nossa vida um pouco mais fácil à medida que você codifica HTML. Então, vamos até o painel de extensão aqui, e a primeira extensão que vamos instalar aqui se chama Image review. Então você tem que escrever assim e clicar no primeiro resultado. Então, o que essa extensão fará significa que ela nos mostrará uma pequena visualização da imagem em nosso arquivo HTML. Agora você só precisa clicar neste botão de instalação, e eu volto ao meu arquivo HTML de ponto de índice e simplesmente rolo para baixo. Agora, aqui você vê que declaramos uma imagem aqui, e aqui você vê que nossa pequena visualização da imagem está sendo exibida na sarjeta, como é chamada E aqui você vê que temos mais uma imagem, então incluímos em HTML. Gente, como vocês podem ver em nossa página da web, estamos tendo essa imagem, então essa primeira e a segunda. Então, incluímos aqui neste arquivo HTML e, como você pode conferir aqui, há uma pequena equipe de imagens aqui nesta sarjeta Então, mais uma imagem que estamos tendo aqui. Agora, essa equipe de imagem está aqui, certo? E isso às vezes pode ser extremamente útil. Então é por isso que eu realmente queria te mostrar este. Agora, a próxima extensão que vamos instalar, então eu volto ao meu painel de atenção. Aqui você precisa pesquisar o destaque da cor. Agora é só clicar no primeiro resultado. Então esse é o ícone desse destaque de cor. Então, mais uma vez, basta clicar neste botão Instalar. E, na verdade, este, eu ainda não posso te mostrar como é porque só será relevante em CSS. Mas acredite em mim, essa extensão é muito, muito útil para visualizar cores em CSS E agora vamos instalar outra extensão. Então você só precisa escrever aqui a tag de renomeação automática. Clique no primeiro resultado. Então esse é o ícone dessa etiqueta rítmica do autor. Então lembre-se disso. Então, mais uma vez, basta clicar neste botão Instalar e, pessoal, certifique-se de marcar essa caixa de seleção Portanto, sempre que houver uma atualização dessa extensão , essa extensão será atualizada automaticamente. OK. Agora, para mostrar como essa extensão funciona, volto ao meu arquivo HTML de pontos de índice. Digamos que realmente quiséssemos criar esse cabeçalho como um elemento de desenvolvimento. Por exemplo, eu apenas o renomeei como DV, então antes, no entanto, tínhamos esse cabeçalho, então ele é renomeado automaticamente porque instalamos uma extensão chamada tag de renomeação automática Agora, você vê que também altera automaticamente a tag de fechamento, ou seja, a tag de fechamento. E isso, novamente, é extremamente útil e torna nossa vida escrevendo HTML um pouco mais fácil, porque confie em mim, precisamos fazer isso o tempo todo, como mudar o nome definitivo. OK. Agora vamos colocá-lo de volta. Então, eu apenas o chamo de cabeçalho. E enquanto estou digitando aqui, ele é renomeado automaticamente, como você pode conferir Agora, pessoal, outra coisa que queremos fazer, pelo menos, é só acessar as configurações e clicar nas configurações. Então, voltaremos às configurações que desativamos anteriormente Então, agora vamos procurar o tanque de fechamento automático. Agora, certifique-se de marcar essa caixa de seleção desta forma. Acho que, neste momento, você não cometerá mais os erros de obter uma etiqueta de fechamento. E agora podemos permitir que o código VS faça esse trabalho para nós. Agora vamos voltar ao nosso arquivo HTML de pontos de índice. E agora, por exemplo, se eu escrever um parágrafo, por exemplo, assim. Então, estou apenas escrevendo a etiqueta de abertura. Mas aqui você vê que o código VS está fechando automaticamente essa tag de parágrafo. Agora, o que quisermos escrever, podemos escrever ou qualquer coisa que você possa escrever. Portanto, essa também é uma configuração muito útil. Agora vamos deletar esse parágrafo aqui. E agora vamos instalar o mais importante , chamado servidor ativo. Então você só precisa escrever aqui um servidor ativo como este. Clique no primeiro resultado e veja aqui, eu já instalei essa extensão. Então, agora eu só quero habilitar isso. Agora, se você não instalou essa extensão, vá em frente e instale essa extensão. Agora, vou mostrar como essa extensão funciona. Então, vamos voltar ao nosso arquivo HTML de pontos de índice. Gente, agora vou para a faculdade neste painel de extensões. Agora, para abrir o Live Server, basta clicar neste botão. Então, espero que você consiga ver esse botão de golfe na parte inferior aqui. Então clique nele. E depois de clicar, agora você vê que nossa página da web foi adicionada a uma nova guia, certo? Então, o servidor ativo está dizendo que o servidor foi iniciado. Então eu acabei de fechar este. Agora você pode estar vendo que é o mesmo resultado que obtemos em nossa primeira página da web Por exemplo, este, basicamente, parece exatamente o mesmo, mas há uma diferença muito grande. Digamos que eu só queira mudar esse título de ninja de codificação Então, agora eu só quero mudar isso, pois , por exemplo, vou escrever aqui como no código. Agora, aqui você vê, depois de salvar o arquivo, aqui você pode conferir. Por exemplo, eu salvo, e aqui você vê. Veja o que aconteceu, página foi recarregada automaticamente sem que precisássemos fazer nada Então, tudo o que fizemos foi salvar o código, e o que acontecerá é que a página aqui será atualizada automaticamente. Então, todas as mudanças que fizemos aqui serão basicamente injetadas nesta página, e agora você poderá ver o reflexo de nossas mudanças imediatamente Então eu o coloquei de volta agora. Então, se eu salvar, você pode conferir. Não precisamos recarregar manualmente a página da web. Portanto, o servidor ativo está fazendo o trabalho por nós. Agora, se eu quiser interromper essa conexão, depois de desenvolver esta página da web, posso simplesmente clicar aqui nesta porta cinco, duplo zero, e nossa conexão ativa com o servidor terminará, certo, OK Agora, mais uma diferença que eu só queria compartilhar com você. Então eu volto para esse arquivo, e aqui você vê a localização do arquivo muito longo. Basicamente, é chamado de URL. Portanto, é completamente longo. E neste caso, um URL muito curto, 127.0, significa o que está dizendo, então ele executará um servidor web para Então, sempre que você fizer algumas alterações em um arquivo HTML , imediatamente isso será refletido aqui. Agora, se por algum motivo você não conseguiu fazer isso funcionar no seu computador , é claro que não se preocupe. Você ainda pode fazer isso da maneira antiga. Então, basicamente, da maneira como temos feito isso até agora, você pode simplesmente abrir o arquivo do seu sistema de arquivos, como fizemos , e continuar atualizando-o manualmente Mas agora não precisamos mais dessa guia. Acabamos de fechar isso. nosso servidor ativo servindo a página. Sempre que fazemos algumas edições, tudo bem, e com isso, agora estamos prontos para enfrentar nossos dois últimos desafios de codificação em HTML . Nos vemos lá em breve. 15. Desafio #1: Agora chegou a hora do primeiro grande desafio de codificação neste curso Vamos começar agora. Antes de começarmos com o desafio real, quero primeiro fazer algumas alterações na estrutura de arquivos que temos neste projeto no momento. Em particular, o que eu quero fazer é colocar todas as imagens em uma pasta para que eu possa mostrar como você pode incluir as imagens dessa forma quando elas estão localizadas em uma pasta específica. Então, agora você vê que essas imagens estão exatamente na mesma pasta do nosso arquivo HTML de pontos de índice. Agora, o que eu quero fazer significa colocar todas as imagens em uma pasta separada e, em seguida, fornecer o caminho aqui nesse local de origem. Agora, aqui, aqui temos esse toque Explorar, então vamos expandir isso. Como você pode conferir aqui, todas essas imagens aqui estão exatamente na mesma pasta do nosso arquivo HTML de pontos de índice. Agora eu só quero criar uma pasta aqui. Para criar uma pasta aqui, você vê aqui que temos esse ícone, basta clicar no segundo ícone e agora estou dando o nome da minha pasta como IMG Criamos uma pasta aqui. Agora eu apenas expando isso. Eu simplesmente arrasto e solto aqui. Então, vamos fazer o mesmo com todas as imagens. Agora, todas as imagens estão na pasta IMG. Agora vamos coletar a barra lateral. Vamos salvá-lo em nosso arquivo HTML de pontos de índice. Agora, eu só quero recarregar a página da web, não esta, basicamente esta demonstração Este, no qual estamos trabalhando atualmente. Agora, se eu recarregar a página da web , aqui você pode conferir Essas duas imagens, as que temos anteriormente, não foram encontradas aqui porque as reproduzimos em uma pasta separada. Normalmente, o que faremos significa criar uma pasta e depois adicionar imagens a essa pasta. Vamos expandir essa barra lateral. Agora, aqui você vê que nossas imagens estão na pasta de imagens. Agora, para resolver esse problema, o que precisamos fazer significa que temos que dar aqui antes como IMG e depois dar uma barra Então temos que dar o nome da imagem. Nesse caso, esse autor pontuou png. Agora, se eu der um cofre e recarregar a página da web, aqui você pode conferir que a imagem aparece aqui e também apareceu aqui nesta sarjeta, como é e também apareceu aqui nesta sarjeta, como Agora, vamos fazer a mesma coisa com a segunda imagem também. Então eu estou dando como IMG, depois slash. Vamos salvá-lo e entregar a página da web. Agora, a segunda imagem também aparece aqui e também aparece aqui nesta sarjeta Agora resolvemos completamente o problema das imagens que temos na pasta separada Normalmente, sempre colocamos as imagens em uma pasta separada, por isso achei importante mostrar a vocês, especialmente agora, antes desse desafio em que usaremos mais imagens. Então, sobre esse desafio, estou de volta aqui na minha página de demonstração e vamos rolar para baixo e aqui está. Então, essencialmente, o que eu quero que você faça significa que você só precisa codificar essa parte sozinho. Basicamente, esta seção de postagem relacionada. Agora, aqui você vê nesta seção de postagem relacionada. Então, é como uma lista desordenada, e aqui você vê que isso é como um marcador. Está bem? Então, nessa lista não ordenada, temos três itens da lista e cada um deles tem uma imagem, um link âncora Então, basicamente, esse link e o nome do autor. Basicamente, isso é como um parágrafo. Então, deixe-me realmente mostrar onde isso deveria estar em nossa marcação. Então, em nosso arquivo HTML. Vamos rolar para baixo até onde você precisa codificar essa parte. Depois deste artigo, você só precisa codificar isso, não no rodapé, não no artigo Você deve codificar essa parte depois deste artigo. Aqui precisaremos de outro elemento e este, na verdade, escrevo para você. Aqui vamos usar um elemento lateral. E aqui você vê que o código VS é preenchido automaticamente para nós. Aqui vamos usar esse elemento de atribuição e o elemento de atribuição geralmente é usado para algumas informações secundárias. Isso complementa as informações na parte principal da página Nesse caso, a parte principal da página é o artigo e, em seguida, o lado que contém informações secundárias são basicamente algumas portas relacionadas basicamente algumas portas relacionadas ao artigo Para a parte principal. Está bem? Agora, visualmente muitas vezes, usamos o elemento lateral como barra lateral, mas não precisa ser assim Mas sobre esse desafio, você vê que ele começa com esse título, então essa porta relacionada. Um dos títulos, por exemplo, H um, dois, três, quatro, cinco e seis, lembre-se, então aqui você vê que isso é na verdade uma lista Agora, o que não fazíamos antes era ter vários elementos da lista em vez de um item da lista. Aqui em cima, neste exemplo, temos um item de lista basicamente estamos tendo apenas esse texto. Agora, nesse caso, em cada item da lista, temos uma imagem, um link e também temos um parágrafo. Basicamente, o nome do autor, e não há problema algum. Portanto, em vez de cada item da lista, pode haver vários outros elementos secundários. E com essa informação, acho que agora você é capaz de construir isso. Agora, finalmente, sobre as imagens aqui. Essas são algumas informações de que você precisa. Basicamente, eles estão todos na mesma pasta. Basicamente, aqui nesta pasta IMG. Aqui você vê aqui que estamos relacionando um, dois e três. Basicamente, essas são todas essas imagens. E as dimensões que eu queria dar a eles são de 75 por 75 pixels, e agora acho que dei tudo a você. Por favor, pause o vídeo agora e reserve alguns minutos, dez a 15 minutos talvez para escrever o HTML desta seção Boa sorte com isso e com a UTI quando estiver pronto. Tudo bem Espero que você tenha se saído bem Deixe-me mostrar como eu fiz isso. Vamos criar como título e vamos apenas escrever um post relacionado. Espero que você comece a ver como é útil código VS agora fecha automaticamente nossos elementos HTML Para esta lista com marcadores, vamos criar uma lista ander Aqui precisamos criar um sobrenome EMI SAC, SRC, agora estou dando meu texto Al como O único atributo que nunca esquecemos é o atributo lt. Mulher sorridente com longos cabelos pretos ondulados, e então precisamos dar a largura Gente, mais uma coisa que quero dizer é que você pode pular um atributo Por exemplo, você pode ignorar o atributo altura ou o atributo sagacidade A partir desses dois atributos, você pode pular um dos atributos Agora, por exemplo, estou pulando como atributo de altura. Agora vamos fechar a tag de imagem e, em seguida, vou criar um link, basicamente o elemento âncora, basicamente o elemento âncora, e meu link está apontando para lugar nenhum, então eu o estou fornecendo como hash e vamos escrever por que o DMM é Agora vamos criar um parágrafo. Basicamente, queremos escrever o nome do autor. Agora vamos fazer o mesmo e vamos conferir o resultado. Basicamente, é nossa página de demonstração. Agora volto para minha página final da web, na qual estamos trabalhando. Eu apenas rolo para baixo. Vamos carregá-lo. Ótimo. Linda. Tudo o que estamos codificando em nosso arquivo HTML, isso está se refletindo no navegador real Vamos voltar ao trabalho. Vamos criar esse elemento de lista também, por exemplo, elemento lie. Então, vamos criar mais um elemento aqui, vou criar uma tag de imagem e vou criar uma ultra atriboot Agora vou escrever mulher sorridente com laptop branco e, em seguida, precisamos criar um atributo de largura Estou dando as dimensões como 75 pixels e vamos fechar a tag da imagem e criar um elemento âncora Vamos criar um parágrafo. Basicamente, David Smith. Agora, finalmente, só precisamos criar mais um item da lista e aqui vou criar e acabar com ele. Temos que escrever Altetribut e, finalmente, estou escrevendo Smiling Man em nosso terno preto formal Agora, é claro, seu Altex não deve ser exatamente igual ao meu. Isso não é um problema nenhum. Estou atribuindo um atributo de largura 75 pixels e vamos fechar. Agora, vamos criar um link. Basicamente, esse elemento de ancoragem não aponta para lugar nenhum. Vamos escrever por que o Java está criando? Agora, finalmente, temos que dar ao autor o nome de Subi Sara. Davis. Agora vamos salvá-lo aqui e, se eu conferir minha página final da web, qual estamos trabalhando, se eu carregar a página da web, lindo Isso se parece com nossa página de demonstração, e agora temos todo esse conteúdo que queremos exibir aqui bem marcado de uma forma muito lógica Você pode estar se perguntando por que usamos uma lista aqui neste caso, e a razão para isso é basicamente a ideia por trás do HTML semântico Isso eu expliquei um pouco antes. Se pensarmos sobre essa postagem relacionada, podemos facilmente argumentar que é essencialmente uma lista de postagens relacionadas e, se for uma lista, devemos marcá-la em nosso HTML Devemos escrever nosso STML como uma lista, e foi exatamente isso que fizemos mais tarde com CSS Posteriormente, o que faremos significa remover os marcadores com a ajuda do CSS Ok, porque eles não fazem muito sentido nesse contexto, mas mesmo com os marcadores removidos, ainda queremos o significado desse elemento Tudo isso aqui para ser uma lista. Mas de qualquer forma, isso é o suficiente para este vídeo. Eu realmente espero que você tenha concluído esse desafio e que goste de fazê-lo, mesmo que tenha levado algum tempo e mesmo que tenha revisar alguns conceitos das palestras anteriores, isso é completamente normal e é exatamente assim que deveria ser agora para praticar um pouco mais, mesmo que haja outro desafio de codificação surgindo, que está completamente separado Mas é muito empolgante, então espero ver você lá em breve. 16. Desafio #2: hora de outro desafio empolgante de codificação para que você possa continuar praticando suas novas habilidades em HTML Neste, quero que você construa esse componente para esses tênis modernos e confortáveis Estou dizendo componente aqui porque quero que você imagine esse conteúdo aqui no contexto de algo como uma loja de comércio eletrônico Imagine que temos uma sapataria e há vários sapatos para cada um deles; depois, existe o pequeno componente. Então, coisas como o preço, uma breve descrição. Um link e depois alguns detalhes do produto aqui. Estou escrevendo esse DML em uma plataforma de codificação especial chamada CodePen Este é um lugar on-line onde podemos basicamente escrever nosso código, e ele executará automaticamente o código e renderizará, além de facilitar o compartilhamento desse código. Agora, é claro, você não precisa usar o CodePen para concluir esse desafio Agora você pode acessar seu editor de código e expandir essa barra lateral E aqui você vê que eu criei uma pasta para você. Basicamente, essa pasta de desafios e se você entrar nela, aqui, como você pode ver, aqui temos essa imagem e também temos esse arquivo de texto. Então, basicamente, eu forneci a você todo o conteúdo desse desafio. Agora, se você quiser ver a prévia da imagem, basta clicar nela e conferir aqui. E também o mesmo aqui, pois temos nosso arquivo de conteúdo. Basicamente, temos todo o conteúdo para concluir esse desafio. Gente, se você está concluindo seu desafio de codificação, então você precisa de mais uma coisa que é uma URL dessa imagem Agora, o CodePen não permite que você adicione imagens diretamente em sua plataforma Então, o que eu fiz significa que hospedei essa imagem em uma única plataforma e criei uma URL para, então, o que você pode fazer significa simplesmente copiar essa URL e colá-la na caneta de código. Agora, pessoal, se vocês querem o conteúdo desse desafio, então aqui estão, eu forneci o texto para isso. Então, basicamente, a partir daqui, você pode pegar todo o texto até aqui, você pode copiar o texto. A razão pela qual eu não estou fazendo isso aqui neste vídeo é porque, na verdade, vamos desenvolver esse desafio mais tarde. Então, continuaremos desenvolvendo esse projeto muito pequeno, que criaria uma confusão de arquivos diferentes e muitos códigos diferentes Como você está fazendo isso em seu próprio computador, é mais fácil criar um novo arquivo ML e fazer isso aqui. Mas, por outro lado, acho que também é útil e útil que você aprenda um pouco sobre CodePen e crie o desafio lá Deixe-me dar uma demonstração muito rápida do CodePen Vamos criar uma nova guia aqui e pesquisar o CodePen. E você pode conferir aqui codpen dot IO, basta clicar nele Gente, se você estiver assistindo esse vídeo no futuro , a interface deste site pode ser alterada. Gente, depois de entrar neste site da CPN, você pode simplesmente clicar aqui para começar a codificar Então você poderá ver essa interface do CodePen. Mas você sempre pode criar uma nova caneta de código aqui vindo aqui como Copen dot IO slash Agora, pessoal, deixe-me apresentar algumas coisas sobre o CodePen Basicamente, aqui está, temos esse HTML. Este é um painel HTML, e isso é CSS, e esse é o painel JavaScript. Basicamente, você pode codificar aqui como HTML e CSS aqui e também JavaScript aqui neste painel. Nesse caso, não quero esse painel de CSS e JavaScript. Então, o que vou fazer significa simplesmente fechar esse painel. Para agrupar isso, basta clicar neste botão de seta, e aqui você vê aqui que temos a opção minimizar o editor de CSS, basta clicar nele E o mesmo farei com o JavaScript. Agora, pessoal, temos mais espaço aqui no nosso painel HTML. Então, pessoal, qualquer que seja o código HTML que codificamos aqui, ele será refletido diretamente aqui neste painel de resultados. Então, vamos escrever como um título. E aqui vou escrever Hello World. Então, estou fechando a etiqueta. Agora, pessoal, como vocês podem conferir aqui, o que escrevemos neste painel HTML. Basicamente, escrevemos um título principal como hello world, e isso se reflete diretamente aqui neste painel de resultados. Basicamente, o Hello world. Então, vamos conferir o desafio de codificação, que queremos criar aqui Aqui você vê que o nome do desafio é desafio para. Quais são todas as coisas desse desafio de codificação que queremos criar Basicamente, temos um título e uma imagem, e também temos esse preço e esse frete grátis e temos aqui o texto, e também temos um link, e temos os detalhes do produto, e aqui estamos com uma lista de pedidos pendentes, e também temos um botão Agora, para completar este desafio, quero dar algumas dicas, então vou mudar para outro modo, então basta clicar nesse modo de origem Eu só me escondo. Agora, pessoal, o que eu quero significa que você só precisa agrupar todo esse conteúdo em um elemento de artigo. Então aqui você vê mais uma coisa que temos. Basicamente, essa imagem. O CodePen não se permite hospedar diretamente as imagens nesta plataforma, não podemos injetar as imagens diretamente aqui nesta Então, o que podemos fazer significa que você só precisa copiar esse URL. Então, esse URL eu forneci a você no arquivo de conteúdo, para que você possa conferir lá ou simplesmente digitá-lo. E mais uma coisa que eu quero te dizer, aqui você vê, aqui estamos tendo um link, então essa é mais uma informação. E no final, veja, aqui estamos com essa flecha. Basicamente, essa seta é uma entidade HTML. Está bem? Agora, pessoal, eu só quero mostrar mais uma coisa. Se eu for para minha página da web, basicamente esta página da web que estamos trabalhando anteriormente, agora aqui você vê no rodapé, aqui estamos com esse símbolo de direitos autorais Essa também é uma entidade de ML. Agora, o que eu quero dizer significa que há uma lista útil de entidades HTML Então você pode conferir aqui. Basicamente, neste site, ou seja, no site desta escola WT, temos essa lista de quatro entidades HTML, então temos muitas entidades DML Agora, pessoal, se você quiser entrar diretamente neste site de escolas WT, basicamente esse espaço de entidade DML, então o que você pode fazer significa criar uma nova guia e aqui você pode pesquisar escolas WT Quatro entidades HTML. E aqui você pode conferir este site, basta clicar nele e acessar o mesmo site que mostrei anteriormente. Agora vamos voltar ao desafio que estou mostrando. Aqui você vê aqui que temos essa entidade de seta de gravação, basicamente esse símbolo de seta de gravação. Agora, vamos voltar e, se eu quiser pesquisar aquele símbolo HTML de seta de escrita , o que posso fazer significa que posso simplesmente pesquisar aqui. Por exemplo, eu pressiono meu teclado como Control plus F aqui uma barra de pesquisa estará presente e aqui vou pesquisar a seta. E quais são as setas presentes nesta lista, elas serão exibidas aqui Por exemplo, eu só quero essa seta de gravação. Então, aqui você pode conferir. Aqui, temos que escrever o código para a entidade DML como porcentagem R A R e ponto e vírgula Vamos simplesmente copiar isso. Gente, assim só você pode encontrar qualquer símbolo. Por exemplo, no vídeo anterior, usamos o símbolo de direitos autorais. Você pode escrever direitos autorais aqui e poderá ver esse símbolo de cópia, e aqui temos esse código aqui Então, essa porcentagem de cópia e ponto e vírgula. Então, o que eu te mostrei mais cedo. Então, no meu caso, eu quero a seta de gravação, então eu escrevo a seta aqui. Gente, esse código, você tem que escrever aqui para completar o desafio, e eu acabei de copiar esse código aqui. E aqui embaixo, vocês veem, pessoal, temos esse botão clicável que é cartão Ato que nunca usamos anteriormente Então, eu acabei de te mostrar neste arquivo HTML. Então, é como um simples botão. Então, criamos um elemento de botão para isso. Então, abrimos e fechamos e, dentro disso, fornecemos o conteúdo. Certo. Mas se você estiver construindo em uma caneta de código, como eu vou fazer, você precisará dessa imagem que está localizada neste URL. Então, nós apenas copiamos isso aqui e o usamos em seu próprio projeto. Então, as dimensões da imagem devem ser de 220 pixels. E com isso, acho que te dei tudo o que você precisa saber. Então, vá em frente e copie esse URL. E agora mudará para a visualização da página inteira para que você possa ver tudo uma vez e Ni deixará você sozinho e voltará aqui em cinco ou 10 minutos quando estiver pronto. Ok, aqui estamos de volta e espero que não tenha sido um grande desafio para você, para que não tenha sido muito difícil. Então, espero que você tenha que praticar suas habilidades um pouco mais E agora, caso você tenha alguma dúvida ou tenha algum problema, mostrarei minha solução aqui. Vamos voltar para nossa caneta de código. Basicamente, nossa caneta de código vazia, e eu simplesmente excluirei isso e vamos criar um elemento de artigo para isso. E agora, como você pode ver, temos que fechar manualmente os elementos e vamos copiar todo o texto aqui. Agora vamos agrupar todo o texto em alguns elementos. Por exemplo, agora vou escrever dois cabeçalhos, basicamente o título secundário e aqui temos que fechar manualmente os elementos. Depois desse título, precisamos dessa imagem. Vamos criar uma tag de imagem para isso. Agora vamos copiar a URL disso. Acabei de copiar o URL. Agora, aqui, como você pode conferir, colei o URL Agora vou escrever o atributo alt. Vamos escrever o texto Al. Tênis preto e branco flutuando sobre um fundo roxo Agora estou dando a largura de 220 pixels e agora vou fechar o elemento da imagem. Agora, como você pode ver, os resultados estão sendo refletidos aqui no painel de resultados. Aqui você vê que encerramos este título. Basicamente, agrupamos esse texto no segundo título e também adicionamos uma imagem. Então, depois de ver, temos esse texto aqui. Então, esse texto do EstiML que você vê vem em uma única linha. Portanto, o EstiML não se importa com todos esses espaços aqui. Então, o que ele fará significa que tratará todo o texto como um simples parágrafo. É por isso que entrou em uma única linha. Agora, vamos agrupar todo o texto nos elementos, por exemplo. Então, temos esses parágrafos, vamos agrupá-los no elemento parágrafo e, em seguida, precisamos criar mais um modelo e, como você pode ver, agrupar esse texto nos elementos, esse código está sendo intencionado, como você pode ver, mais um parágrafo que você deseja mais um E eu acho que isso é basicamente um link. Então, em HTML, precisamos marcá-lo como um link. Eu só quero atribuir ao RH o atributo. E aqui eu não mencionei para onde esse link aponta. Então, só precisamos fornecer as representações de que um link não está apontando para lugar nenhum, então vamos fechá-lo. E aqui você vê que temos uma flecha, não é uma maneira correta de representar a flecha. Temos uma entidade especial para isso. Por exemplo, precisamos escrever o código para a seta direita como porcentagem, RAR e semiclm e, em seguida, temos os detalhes da proteção Agora, basicamente, é como um título. Agora, para este título que é entrar na zona de conforto, eu dei como h dois. Agora vou dar esse título como h três, e vamos encerrar. E então temos essa lista com marcadores. Basicamente, essa lista desordenada. Vamos embrulhar isso também. criar uma lista não ordenada aqui. Vamos cortar esse texto aqui e colocá-lo aqui. Vou agrupar todo esse texto em um único elemento alla como este. Acho que você tem alguma prática em escrever HTML. Temos mais um último elemento. Agora, finalmente, temos esse botão Attucat. Vamos envolvê-lo no elemento do botão assim. Agora vamos conferir o resultado aqui. Isso parece exatamente o mesmo que nosso desafio. Pessoal, mais uma diferença: temos esses detalhes de preços. Está em negrito, e aqui você pode conferir que está no texto normal. Então, para colocar isso em negrito, o que precisamos fazer significa agrupar esse texto em um elemento forte. Então, como aprendemos nas palestras anteriores. Agora, eu envolvi esse texto no elemento forte. Agora nosso texto está em negrito, ótimo. Mas de qualquer forma, com isso, concluímos esse desafio e nos certificamos revisar tudo o que você acabou de aprender, todas as suas novas habilidades, alunos do Tear. Espero que você esteja gostando do curso e achando-o valioso. Eu trabalhei muito para criar este curso para você. E seu feedback significa muito para mim. Se este curso ajudou você de alguma forma, seja aprimorando suas habilidades, aumentando sua confiança ou inspirando você a criar algo por conta própria, reserve um momento para escrever uma Seu feedback me motiva a continuar. Obrigado por fazer parte dessa jornada. Mal posso esperar para ler seus pensamentos. Obrigado.