Aprenda HTML: do básico ao profissional

1. Introdução: Você já pensou em criar um site? Nesse caso, o primeiro idioma que você precisa aprender é o HTML. Hoje vamos falar sobre tudo o que você precisa saber para aprender HTML. Oi, meu nome é Zoe. Sou engenheiro de software e ex-professor que adora ajudar outras pessoas a começar a programar Eu criei muitos sites e aplicativos da web usando React, CSS, HTML e muito mais. Hoje, abordaremos os fundamentos do HTML e como você pode usá-los para criar seu primeiro ou o próximo site criando este site Falaremos tudo sobre como usar elementos, estrutura paga, atributos e muito mais. Neste curso, começaremos com uma visão geral do que é HTML, por que ele é usado e para qual finalidade ele serve Em seguida, mergulharemos diretamente em nosso tutorial. O tutorial será dividido em três partes. Primeiro, inicializaremos nosso novo projeto HTML. Em seguida, vamos colocá-lo em funcionamento em nosso navegador e, finalmente, criaremos a estrutura do nosso site. Este curso é para qualquer pessoa interessada em criar seus próprios sites e aprender a trabalhar com HTML. Ao final deste curso, você poderá fazer tudo isso sozinho. Vamos começar. 2. Projeto do curso: Projeto de classe. O projeto desta aula será criar um site simples usando apenas HTML. Ao longo da aula, abordaremos qual editor usar, como estruturar seu código e como ver e atualizar seu site enquanto você trabalha. Para esta aula, será essencial ter acesso a um computador no qual você possa executar o código do Visual Studio ou outro editor de código de sua escolha. Você também vai querer ter um navegador como o Google Chrome instalado e funcionando, pois o usaremos para exibir nossa página da web Deixarei links para todos os ativos e recursos que você precisará na guia Projeto e recursos abaixo. 3. O que é HTML?: O que é HTML? linguagem de marcação HTML ou hipertexto é o alicerce essencial para tudo o que você vê na web De botões a links e seções maiores, tudo envolve HTML. Se você nunca viu o que parece antes, você pode realmente ver o HTML, mas isso é usado para criar esta página da web Se você clicar com o botão direito do mouse na página e selecionar a opção Exibir fonte da página, isso exibirá todo o HTML da página. E funciona em qualquer página da Internet. Experimente, que, como linguagem de marcação, nos permite exibir tudo o que vemos na web O HTML é feito de elementos, e esses elementos são os blocos de construção da web. Cada elemento consiste em duas partes, suas tags e seu conteúdo. Vamos examinar a estrutura geral do ataque para entendê-los melhor. 4. Tags: Etiquetas. Existem três tipos de tags: tags de abertura , tags de fechamento e tag de fechamento automático. Uma etiqueta de abertura começa com um colchete angular esquerdo, seguido pelo nome do elemento e, em seguida, por um colchete angular reto Se o elemento tiver conteúdo entre as tags, ele conterá uma tag de fechamento, que é uma tag da mesma estrutura da nossa tag de abertura, mas com uma barra após o primeiro colchete angular Se o elemento não exigir tag de fechamento porque não há conteúdo entre as tags, vamos nos referir a ela como uma tag de fechamento automático e adicionar uma barra imediatamente antes desse colchete angular reto Para a maioria dos tipos de tags, haverá conteúdo entre as tags de abertura e fechamento, mas o conteúdo que você escolher colocar lá dependerá do tipo de elemento com o qual você está trabalhando. 5. Elementos: Elementos. Existem dezenas de elementos diferentes que são usados em HTML e cada um pode servir a uma finalidade diferente. Se estivermos interessados em criar um elemento para exibir texto, dependendo do tipo de texto, podemos usar um cabeçalho ou uma tag de parágrafo. Existem seis níveis diferentes de tags de cabeçalho e você as usará em sua página em uma ordem hierárquica Vamos nos aprofundar um pouco mais nos cabeçalhos em nosso tutorial. No entanto, digamos que não precisemos exibir texto especificamente, mas estamos procurando mais estruturar o formato do nosso HTML. Nesse caso, queremos dar uma olhada em elementos como divisórias ou seções Esses elementos nos ajudam a separar um pedaço de HTML do outro e nos permitem manter nosso código organizado e trabalhar mais facilmente com o sling posteriormente 6. Tutorial: Então, primeiro de tudo, vamos dar uma olhada no projeto que esperamos construir. Este é um design para o projeto que estamos querendo construir. Basicamente, é um formulário simples com, você sabe, algum estilo em segundo plano, alguns tamanhos diferentes de cabeçalhos e coisas assim Tudo bem, então, primeiro de tudo, você acessará o link na descrição abaixo e conectará sua conta para poder baixar todos esses arquivos iniciais gratuitamente Realmente, você só precisa das imagens, mas podemos usar todo o kit inicial para começar Então, o que nos foi fornecido aqui são muitas informações. Eles basicamente criaram vários arquivos para nós. Vou continuar ocultando esse arquivo que possamos trabalhar juntos para construí-lo novamente. Então, o que queremos fazer é criar um novo arquivo e chamar esse ponto de índice de HML, exatamente como eles tinham Essa é apenas a convenção que as pessoas usam para escrever novos arquivos HTML Incrível. Então, agora queremos realmente pegar nosso arquivo HTML e mostrá-lo, queremos ver os frutos da nossa lava, certo? Nós criamos o arquivo. Queremos ver isso na web. Então, vamos clicar aqui embaixo onde diz: Go Live. Lembre-se de que instalamos o servidor Live na última unidade. Bem, vamos começar a usá-lo agora. Então, no canto inferior direito, onde diz, Go Live, você só quer clicar nele para executar o servidor Live. E tudo começou. Então, começou no porto 5.500 Se eu passar o mouse sobre um e eu for para o posto local 5.500. Estou recebendo minha página da web, mas literalmente não há nada lá Agora, por que isso? É porque ainda não colocamos nada no arquivo. Então, vamos ver se eu digo hello hello world e clico em Salvar. Ainda nada. Isso é estranho. Por que isso está acontecendo? Bem, é porque o HTML, como você deve ter visto no outro arquivo, tem uma estrutura de pastas muito específica que, na verdade, informa ao computador que ele formatou corretamente o ele formatou corretamente Não podemos simplesmente digitar texto em nosso editor. Na verdade, precisamos formatá-lo corretamente. E você até verá que o VS Code está nos dando um pequeno servidor ativo e nos dando uma pequena dica aqui. Tipo, o recarregamento ao vivo não é possível sem uma etiqueta na cabeça ou no corpo, sabe? Basicamente, está nos dizendo, tipo, Ei, estão faltando peças neste lugar. Portanto, o código VS tem um recurso muito, muito legal em que, se você digitar um ponto de exclamação, ele realmente usará o Emmet, que é um recurso de preenchimento automático integrado, que fornecerá todo o tipo de documento para um Eu o encorajo a usá-lo porque muito raramente você realmente terá que digitar HTML do tipo Doc em seu trabalho real. Portanto, se você pressionar o ponto de exclamação e pressionar Enter, ele pegará todo esse clichê e o colocará na Se clicarmos em Salvar, agora temos vários elementos adequados. E vamos dar uma olhada no que é. Então, o primeiro diz doctype HTML Então, isso basicamente nos diz que o documento é do tipo HTML. Se você notar isso logo abaixo do HTML do tipo Doc, há essa tag HTML que, na verdade, tem um par correspondente na parte inferior Lembre-se de que falamos sobre HTML vindo em Bem, essa é a tag HTML de abertura e fechamento. Agora, uma coisa que você precisa lembrar com o HTML é que tudo está dentro dos elementos, certo? E se você não escrever algo dentro do elemento HTML, ele não existe na página. Então, quando começarmos a escrever, vamos nos certificar de que escrevemos tudo dentro desse elemento HTML. Vamos descer para o próximo nível. Aqui temos uma cabeça e, embaixo da cabeça, eles parecem estar no mesmo nível Nós temos corpo. Então, cabeça e corpo. Você pode pensar em HTML como se fosse um corpo humano. Então, a cabeça é o que contém muitas informações, você sabe, o tipo de conhecimento dos bastidores. O corpo é o que contém o elemento literal. Então, se olharmos para o cabeçalho aqui, veremos que há algumas metatags aqui, que são basicamente informações de metatags aqui, que são basicamente metadados que basicamente fornecem ao computador um pouco mais de informações sobre nosso arquivo HTML Então, está dizendo qual conjunto de caracteres usar, conteúdo, a porta de visualização, esse tipo de coisa. Essas não são partes com as quais precisamos nos preocupar agora. Então, também nos dá um título. Assim, podemos realmente dar um título à nossa página da web. Vamos chamá-lo de formulário de inscrição. Agora, se acessarmos nosso navegador e talvez atualizarmos a página, ainda não há nada lá Mas se você notar no canto superior esquerdo, aquela coisa que dizia Local host 5.500 agora diz formulário de inscrição Então, ao alterar o título em nosso HTML dentro de nossa cabeça, estamos na verdade mudando o título da nossa página. Muito legal, hein? Tudo bem, então meio que terminamos com uma cabeça por enquanto Voltaremos a isso em aulas posteriores, mas, por enquanto, isso é o melhor que precisamos obter. Em seguida, falaremos sobre o corpo. Agora, como mencionei, o corpo é onde todos os elementos vivem. Então, queremos ter certeza de que estamos colocando tudo o que queremos ver no corpo, em vez de começar com apenas textos básicos, porque embora pudéssemos colocar hello world aqui, salvá-lo e depois voltar aqui, ele apareceria. Isso não é realmente semanticamente correto. O HTML tem muitos elementos diferentes que você pode realmente usar para texto, imagens e botões, como já falamos antes. Você quer ter certeza de que está usando o elemento correto para o tipo de dados que você apresentará. Então, como estou apresentando algum texto, provavelmente vou usar uma tag de cabeçalho. Portanto, a tag H one é a mais alta das tags de cabeçalho. Só deve haver uma tag H one em sua página, porque isso basicamente nos diz que é disso que trata a página. Então, como não há mais nada na página, vou chamá-la de página Hello World por enquanto. Então eu digito Hello World entre essas tags H one, e vamos dar uma olhada, você verá que ela já está formatada de forma diferente Isso porque os cabeçalhos, por padrão, têm alguns estilos integrados Eles são ousados, são maiores. Eles têm mais destaque na página. Se eu fosse criar isso com, digamos, uma tag H six, por exemplo, e salvá-lo. Você veria como o texto é pequeno, mal consegue lê-lo. Portanto, é bom entender a importância e a proeminência de H um versus H dois versus H três até H seis e quando você deve usá-los. Pessoalmente, não uso as tags H six com muita frequência porque isso requer muitos títulos antes disso para serem usados Vamos dar uma olhada no nosso design. Então, como podemos ver aqui, é grande imagem em segundo plano, e então aprendemos a programar observando outras pessoas, vendo como desenvolvedores experientes resolvem problemas em tempo real. E então há esse formulário no lado direito. Ok, vamos começar a construir isso. Tudo bem, então aprenda a programar observando os outros. Eu acho que provavelmente é o H, então vamos digitar isso. E se formos até aqui, veja isso. Já está atualizado. Surpreendente. Tudo bem. E vamos ver como desenvolvedores experientes resolvem problemas. Então, nesta parte, mostra como desenvolvedores experientes resolvem, você pode estar pensando: Bem, deveria usar H dois aos três anos e aos quatro anos? Na verdade, você não quer usar um título para essa parte. Isso é algo para o qual você usaria uma Ptag ou uma tag de parágrafo As tags de parágrafo são para aqueles textos maiores e mais gerais que você verá em uma página da web, você sabe, basicamente parágrafos de Então, usaremos a tag de parágrafo para isso. Outro recurso muito legal do VS code é que você pode arrastar suas guias para um lado e depois colocá-las lado a lado, para que você possa apenas referenciar o que está acontecendo na outra guia Então, usando um Ptag, diremos: Aqui, os tutoriais com script do Bing são ótimos, mas entender como os desenvolvedores pensam é mas entender como os desenvolvedores Eu concordo E você definitivamente deve entrar em contato com seu mentor para obter um pouco disso individualmente Tudo bem. Incrível. Portanto, temos nosso H one e nosso PTAC Vamos ver como isso parece. Perfeito. Tudo bem, legal. Mas então há essa outra seção aqui. É assim, experimente gratuitamente por sete dias, e depois há essa situação, tipo, formulário. E então isso parece um botão no qual você clica. E depois há mais texto aqui embaixo. Então, como queremos estruturá-lo? Podemos entender que existem duas seções aqui, basicamente, certo? Há uma seção à esquerda que é, na verdade, apenas o texto. É como nos contar sobre a página. E depois há uma seção à direita que é mais sobre, tipo, o que realmente está acontecendo. Portanto, podemos usar qualquer um dos elementos da seção. Ou podemos usar o elemento div, que é mais apenas um divisor genérico Então, o que vou fazer é criar duas divs aqui, DIV um e DIV O que eu fiz aqui foi colocar todo esse texto em uma div, criar a segunda div e colocar todas as informações do formulário nela Isso é apenas para dar a eles uma boa separação, e será mais fácil quando voltarmos ao lodo mais tarde. Então, nesta primeira seção aqui, vou criar uma tag P e encapsular esse texto Então, vamos dizer P. Agora temos um formulário. a primeira vez que lidamos com formulários. Vamos falar sobre o que é um formulário. Um formulário é, você sabe, você provavelmente enviou vários formulários on-line, mesmo quando se inscreveu no Github, provavelmente está enviando um formulário O que um formulário faz é pegar os diferentes dados enviados ou inseridos pelo usuário e enviá-los para outro local para serem processados e tratados. Talvez tenha se tornado um usuário, talvez, você sabe, esteja enviando seu pedido do Instacart do dia Seja o que for, os formulários são usados em toda a web, por isso é muito importante saber como criá-los. Então, para criar um formulário, vamos realmente usar o elemento chamado formulário. E o que isso vai fazer é apenas nos fornecer algumas ferramentas especiais extras que você vem com formulários. Então, dentro de um formulário, você pode ter algumas coisas diferentes. Você pode ter uma entrada. E o melhor de muitas dessas extensões de código do VS que instalamos é que elas fornecem informações aqui. Então, se você tiver alguma dúvida sobre o que é algo enquanto está digitando, você pode literalmente clicar aqui onde diz referência MDN, e você pode dizer abra-o Em seguida, ele o abrirá em uma nova guia e você poderá ler tudo sobre a entrada do formulário e o elemento do formulário. Vou trazê-lo aqui para que você possa ver do que estou falando. Então está aqui. Insira o elemento do formulário e ele fornecerá todas essas informações sobre a entrada dentro do elemento do formulário, certo? Vou te dizer que tem um tipo, tem IDs, tem um nome, é obrigatório, etc., etc., etc Portanto, as entradas são um ótimo lugar para começarmos. Então, dentro do HTML, você não tem apenas todos esses elementos diferentes. Então, se você voltar ao topo, onde diz HTML aqui, vemos que Lang é igual Lang é um atributo específico do HTML, o atributo da linguagem, certo? Podemos especificar o idioma em HTML porque é mais ou menos como o elemento geral. Nem todo elemento terá esse recurso, mas, na verdade, você não precisaria dele se definisse que seu idioma geral é o inglês. Assim, todos esses elementos diferentes têm seus próprios atributos particulares. Portanto, a entrada é uma delas. A entrada tem vários tipos diferentes de atributos. Então, um é o tipo, certo? Você pode especificar o tipo de entrada que você tem porque há vários tipos diferentes de entradas que você pode Então, um pequeno truque que eu quero te mostrar aqui. Tudo bem, então quando você digita o tipo e pressiona Enter, ele fornece todas as opções diferentes que você tem para o tipo de entrada que poderia ser Então pode ser um botão, uma caixa de seleção, uma cor. URL, pode haver muitos tipos diferentes de entrada que você pode usar. Assim, você pode começar a ver como o HML tem muita flexibilidade, mesmo sendo uma linguagem bastante limitada para escrever Queremos que isso use o primeiro nome do que nossos usuários inserem. Então, vamos querer que seja um texto, ou seja, um tipo de texto. E então outro atributo na entrada. E você pode procurá-lo aqui nos documentos do MDN. Outro atributo é o nome? É o nome? Então você quer o nome de qualquer que seja a entrada. Então, se é o primeiro nome da pessoa? É o sobrenome deles? É a idade deles? Qual é a informação que eles estão enviando Então, se voltarmos aqui, digitarmos o nome, na verdade colocaríamos primeiro e poderíamos colocar o primeiro nome. E é assim que sabemos qual informação está lá. E então nós o fechamos. As entradas são, na verdade, tags de fechamento automático. Então, em vez de ter essa entrada de barra novamente, não faríamos isso Essa não é uma sintaxe adequada. Prettier nos dará um pequeno erro aqui, dizendo: Ei, eu, se não há nada entre suas tags, elas devem fechar sozinhas Então, o que é uma tag de fechamento automático é que, se pegarmos a entrada e a isolarmos aqui, é uma tag que termina com uma barra e um Portanto, não há nada que se interponha entre isso. A tag em si é o valor. Outro recurso muito legal que você pode usar com entrada. Outro atributo interessante é o atributo placeholder. Assim, você pode realmente dar um aviso ao seu usuário. Você sabe que quando entra em um formulário e não tem certeza do que deve inserir, você pode realmente avisá-lo, como endereço de e-mail, nome etc Então, vamos dar um primeiro nome ao nosso primeiro atributo de entrada, o espaço reservado Legal. Então, agora, quando voltamos à nossa página, incrível. Quando você olha aqui, esta é a nossa pequena caixa de entrada, e esta é a nossa primeira caixa de nome. No entanto, você pode notar algo interessante. Todo o nosso código está indo direto para baixo. Tipo, não é só como vir para o lado. Isso porque ainda não incluímos nenhum estilo. Trabalharemos na estilização desta página na próxima unidade, quando falarmos sobre CSS Mas, por enquanto, vamos tentar colocar tudo na página de forma semântica. Tudo bem, vamos dar as próximas duas entradas aqui. Então, vamos copiar e colar e colar um pouco de hack lá E vamos digitar Este será o sobrenome deles. Então, vamos mudar o nome para sobrenome. Portanto, lembre-se de que esses valores que eles enviam serão enviados para, você sabe, um banco de dados ou back-end ou, você sabe, vamos fazer login no console. Mas precisamos entender o que eles estão nos enviando, certo? Porque se conhecermos alguém cujo nome é George Steven, não saberemos se George ou Steven é o primeiro nome, a menos que atribuamos a ele uma chave específica Então, decidimos que o primeiro será o primeiro nome e o próximo será o sobrenome. Espaço reservado para este, sobrenome. E então a próxima parece Tudo bem, temos nossas quatro entradas Novamente, eles estão sentados lado a lado em vez de empilhados um em cima do outro, mas isso é algo que vamos corrigir em outra lição E então, abaixo disso, precisamos de mais um tipo de entrada Lembra anteriormente que vimos que a entrada poderia ser um botão? Bem, isso está especificamente relacionado aos formulários. Portanto, com os formulários, você quer garantir que, ao enviar o formulário, todas as informações com um formulário sejam enviadas com ele. E fazemos isso criando um tipo de botão de entrada, incluindo aquele dentro do formulário. Então, vamos criar mais uma entrada, chamá-la de entrada, criá-la do tipo. Nome do botão. Vamos mudar o nome para valor real e reivindicaremos seu teste gratuito lá dentro. E ainda é uma etiqueta de fechamento automático. Tudo bem. Ok, legal. Portanto, vale a pena solicitar seu teste gratuito. Se formos aqui, boom, um grande botão que diz solicite seu teste gratuito. Incrível. Estamos sobrevoando isso. Tudo bem, acho que a última coisa que precisamos adicionar é essa peça aqui Ao clicar no botão, você concorda com nossos termos e serviços Tudo bem, então vamos em frente. Isso parece estar fora do formulário. Vamos adicioná-lo aqui embaixo. Vamos fazer um PTag e vamos colocá-lo. Agora, algo interessante aqui é que tanto os termos quanto os serviços e experimente gratuitamente por sete dias estão em negrito, mas ainda não os colocamos em negrito. Então, o que poderíamos fazer é realmente usar a tag forte. Agora, também poderíamos fazer isso em CSS, mas há algumas maneiras muito fáceis de fazer isso em HTML. A tag forte basicamente torna o texto mais forte ou em negrito. Então, vamos apenas envolver as partes do nosso texto que queremos que apareçam negrito com a tag forte Vamos colocar um aqui e experimentá-lo gratuitamente por sete dias. Vamos colocar um aqui. Guarde isso. E bum, lá vamos nós. Experimente gratuitamente por sete dias em negrito, assim como os termos e serviços. Incrível. Acho que temos todos os elementos na página. A última coisa que você vai querer fazer antes de passarmos para o CSS é enviar nosso código para o Github e obter uma gravação inicial do que estamos fazendo aqui Então, vamos abrir uma nova instância do terminal. Tudo bem, então isso está em uma pasta chamada arquivos de projeto. Vamos fazer disso um repositório Git. Então, vamos digitar Git nele. E vamos mudar a ramificação para principal e incrível. Tudo bem, então temos nossas marcas Git e kit. E, como você pode ver aqui, tudo isso ainda não foi adicionado ao nosso repositório Git Então, eles estão aparecendo verdes e sem rastreamento. Então, o que podemos fazer é seguir em frente e esses são apenas os designs e as imagens, bem como o índice e as instruções de como construir isso. Mas, na verdade, não precisamos rastrear todas essas coisas. Tudo o que realmente precisamos fazer é rastrear nosso arquivo HTML de pontos de índice no momento. Quando adicionamos mais CSS e imagens ao trabalhar com coisas diferentes, podemos começar a rastreá-las. Mas, por enquanto, tudo o que precisamos é do nosso HTML com pontos de índice. Então, podemos fazer isso e podemos simplesmente chamar esse Commit inicial. E podemos cometer isso, e aí está. Feito. Tudo bem, agora o que queremos fazer é vincular isso a um repositório do Github, porque lembre-se de que estamos rastreando todo o nosso código no GitHub desde o primeiro dia até o final Então, vamos navegar até o Github. E acessaremos sua conta, seja qual for o nome da sua conta, e criaremos um novo repositório Então, vou para os repositórios, novo repositório. Vamos chamar esse formulário de inscrição. Espero que esteja disponível. Sim, é. Incrível. Tudo bem, não precisa da sua descrição Vamos mantê-lo público e vamos criar um repositório, assim como fizemos da última vez Incrível. Como já criamos um, já o inicializamos como um repositório Git, tudo o que precisamos fazer é pressionar esse botão de cópia aqui, e ele copiará todas essas lindas linhas de código que não precisamos memorizar Vou voltar ao código do VS, colá-lo em nosso terminal, pressionar Enter e pronto. Está configurado para rastrear. Então, se voltarmos ao GitHub, atualize a página, apenas para verificar nosso Tudo bem, veremos que temos um arquivo HTML de ponto de índice confirmado há 1 minuto Temos uma confirmação e diz: Confirmação inicial. E a melhor coisa sobre o Github é que você pode realmente clicar e ver todas as informações Então, isso é tudo o que acabamos de digitar lá. Veja nossas caixas de texto, nossos botões, nosso formulário, nossas tags P, nossas dibs, nossa letra H. Temos muitas coisas acontecendo neste arquivo HTML no momento. Então, vamos aprender pouco de CSS e adicionar um pouco de estilo a esta página