HTML intermediário: desenvolvimento da web em HTML intermediário

1. HTML 201: desenvolvimento web intermediário: Olá e bem-vindo ao HTML 201A, aprendendo HTML intermediário. Então, neste curso, vamos estar pulando sobre um monte do básico. Você já deve saber o básico, como sintaxe HTML, coisas como criar links, sublinhados, negrito, adicionar imagens, você sabe as coisas simples como essa. Então, se você não sabe como fazer isso já em HTML, por favor, volte para o curso HTML 101 ou comece um curso HTML e pegue esse. Caso contrário, você vai ficar um pouco perdido neste. Caso contrário, se você já tomou HTML 101 ou já está familiarizado com o HTML Basics, este curso será para você. Nós vamos passar por um monte de coisas diferentes, como alguns links internos semânticos, fabricações, caminhos. Essa é realmente grande. Vamos criar um layout de página da Web usando tabelas. As mesas são muito importantes aqui. Vamos olhar um pouco mais para CSS, como classes CSS embutidas, IDs, formatação de código, formulários, campos de formulário, como quando você digita seu endereço de e-mail ou sua senha, coisas assim. E alguns pedaços e bobs no meio. Oi, meu nome é Caleb Pauline. Eu vou ser seu instrutor hoje. Nós vamos estar aprendendo HTML intermediário. Ensinei mais de 300 mil alunos a programar. Eu sou um desenvolvedor web sênior e um instrutor de codificação online. No final deste curso, juntos vamos estar criando uma página web baseada em ML foi um layout adequado. Então, se você fez o curso HTML 101, que na verdade não tem um layout adequado. Nós meio que jogamos um monte de elementos em uma página. Este vai ter um layout adequado, então vamos ter um título e navegação, uma seção de conteúdo. Vamos incorporar um vídeo do YouTube, um monte de imagens, mas um pouco mais de conteúdo e há algum conteúdo escrito, vai ser fantástico. Agora, se tudo isso parecer que é o seu beco, estou ansioso para vê-lo na primeira lição. 2. Não linhas: Tudo bem, primeiro as coisas precisamos esclarecer algumas coisas. Então, quando criamos uma estrutura base no curso HTML 101, e vamos apenas mudar isso de texto simples para HTML. E a propósito, eu estou usando código VS se você estiver usando um editor diferente, tudo que eu fiz foi ir para Arquivo que fica fora da minha área de gravação e então novo arquivo, então Comando ou Controle, e nós vamos criar um novo arquivo para você. E ele automaticamente pensou que era um arquivo de texto simples. Então eu cliquei aqui em baixo onde ele usa um texto simples digitado em HTML e HTML selecionado. E isso só nos dá boas guloseimas como esta. Podemos fazer HTML dois-pontos cinco, apertar Tab para auto-completar usando VS Code. E isso nos dá um monte de coisas aqui. Então eu vou realmente ir em frente e excluir um pouco disso. E eu vou chamar isso de HTML2 01. Agora, nós aprendemos em alguns pontos que nós temos parágrafo que poderíamos colocar alguns Lorem Ipsum lá dentro. E poderíamos dizer, por exemplo, que isso deveria ser sublinhado, algo assim. Agora, se eu salvar isso como vamos entrar aqui e index.html sem nome. E eu apenas salvar isso em uma pasta particular que eu tinha chamado HTML para 01. E eu chamo de index.html. Mas se eu abrir o Google Chrome ou qualquer tipo de navegador, seja o seu navegador favorito, você pode ir para o arquivo e, em seguida, abrir o arquivo. Então, Controle ou Comando O. Vá para minha pasta aqui. E vamos abrir isso e podemos ver que isso, uma vez que eu amplie, é sublinhado. E isso é legal, ele faz o que queremos, mas infelizmente subjacente é obsoleto. Então, estava tudo bem aprender isso há pouco tempo apenas porque precisávamos deixar isso sublinhado. Mas há uma maneira melhor de fazer isso. E a melhor maneira de fazer isso provavelmente seria adicionar um espaço aqui. E vamos em frente e mudar isso para um elemento span. E tudo isso é, é um elemento simples em linha. E você deve estar familiarizado com helmintos de bloco versus elementos inline neste ponto. E o que vamos fazer é trabalhar com este atributo de estilo. E este atributo de estilo nos permite escrever CSS. Então você não precisa realmente saber muito CSS agora. Mas se quiser sublinhar, eu diria que talvez tente memorizar este em particular. Eu digo às pessoas o tempo todo que você não precisa memorizar muito. Quero dizer, você sempre pode Google, como adicionar subjacente usando CSS, que funcionará bem. Então eu vou fazer texto, decoração, espaço de cólon, sublinhado. Agora, se eu salvar isso, voltar para a minha página e atualizar, deve parecer que nada mudou. E isso é perfeito. E eu sempre posso verificar clicando com o botão direito do mouse e clicando em Inspecionar. E você pode ver na minha ferramenta de inspeção aqui embaixo que há de fato uma extensão com decoração de texto sublinhado. E se eu quisesse, posso ligar e desligar isso agora, que é muito, muito bom. Então, avançando, sempre que usamos sublinhados, vamos em frente e usar decoração de texto subjacente. Em vez de usar os elementos de interface do usuário, só porque o elemento de interface do usuário é obsoleto, é de versões antigas de HTML e CSS agora pode fazer isso, e nós preferimos usar CSS sempre que pudermos. 3. Links internos: Certo, vamos dar uma olhada nos links internos. Então, na verdade, vamos recapitular primeiro. Então, como criamos um link? Nós criamos um link e eu vou fazer isso um pouco maior aqui. Criamos um link com o elemento uma âncora no e o atributo HREF. E isso poderia ir para HTTP, website.com, ir para website.com. E isso só vai nos mostrar uma pequena ligação aqui em cima. E vai para website.com, seja lá o que estiver naquele site. Então é assim que criamos um link. Mas e se quiséssemos vincular a outra coisa na página? Então vamos em frente e realmente nos fazer página olhar um pouco mais agradável. Então, digamos um. Bem-vindo ao HTML 201. E vamos criar um link. E ainda não sabemos o que esse link vai ser, mas sabemos que ele vai dizer rolar até o final da página. E podemos nos livrar deste porque isso não é mais necessário. Isso foi apenas um exemplo. Então, agora, quando eu faço isso, eu clique em rolar até o final da página e ele não faz nada. É porque não vai a lugar nenhum. Você pode ver que não há HREF, Não, não há referência de hiperlink. Então, digamos que tivemos essa página muito, muito longa e vamos continuar copiando isso um monte de vezes. E eu realmente não me importo muito com a formatação neste momento. Só quero que a página role assim. E eu quero quando clicarmos no link para ir para a parte inferior da página e talvez ter um link na parte inferior da página para nos trazer de volta ao topo. Então vamos fazer isso. Digamos que vai haver, digamos, como um H3. E nós vamos dar a este um ID, e este é um identificador exclusivo para este elemento, então ele nunca deve ter que ter o mesmo ID na mesma página. Então vamos chamar este fundo, e este é o fim da página. E quando eu atualizo, você pode vê-lo apenas como na parte inferior da página, nada aconteceu com o ID não fez nada em particular. Mas se voltarmos ao nosso link, podemos realmente digitar o número de identificação do sinal. Seja qual for a identificação, e agora que a ID que escrevemos foi inferior, vá até aqui, ID é igual a baixo. Guarde isso. E eu só vou me refrescar aqui em cima. E você pode ver meu link realmente mudou de cor. E você pode realmente ver que diz o fundo do sinal de número index.html. E quando eu clico isso, boom, ele me traz para o fundo para que ele não faça um rolagem suave, mas ele me pulou para o fundo da página, o que era realmente muito importante para páginas de conteúdo longo. Agora vamos em frente e criar um link para nos trazer de volta ao topo. Então talvez vamos remover isso como um H3 e isso torna isso um pouco mais escondido. Vamos criar uma div aqui. E você pode ver que vamos ficar um pouco mais avançados com isso. Id é igual ao fundo, mas sabemos que os IDs podem ou devem ser completamente únicos. Então vamos em frente e livrar-nos desta. Você pode realmente se livrar dessa linha inteira. E vamos colocar um link aqui que vai voltar ao topo. De volta ao topo. Agora, como este é um link interno, precisa de um ID em algum lugar na página chamada top. Então vamos rolar de volta para o nosso código aqui, e vamos dar a este um ID de topo. E vamos atualizar sua página e dar uma chance a isso. E essa maneira ampliada para mim, eu quero fazer zoom de volta. E isso deve me rolar até o fundo. Boom, assim ou não rolar, mas pulando para o fundo e isso deve saltar de volta para o topo, assim como isso. Então agora temos ligações internas. O que eu gostaria que você fizesse é criar uma página que é longa o suficiente para que você realmente crie uma barra de rolagem aqui. Ou o que eu fiz foi porque esta página na verdade não era muito longa. Você sempre pode abrir sua ferramenta de inspeção e se você encolhê-la ou se você trazê-la alta o suficiente, ela vai encolher sua janela de exibição e você terá uma barra de rolagem e você pode testá-la dessa maneira. Vá em frente e dê uma chance assim que estiver pronto, vamos para a próxima lição. 4. Favicons: Vamos dar uma olhada nos ícones fabulosos. Fabricações são esses pequenos ícones que aparecem ao lado do título da sua página. Agora não temos um conjunto de favicon. Temos um título, o que é legal, mas e se quisermos algo um pouco personalizado? Podemos acrescentar isso também. Podemos personalizá-lo para ser o que quisermos. Saber. Normalmente, ela deve ser uma imagem de 32 pixels por 32 pixels, então ela é bem pequena. Eu não vou exatamente seguir essa regra porque eu sei que ela vai reduzi-la, mas se você quiser que ela seja adequadamente dimensionada, talvez tenha translucidez ou transparência adequada ou algo assim. Então sim, você vai querer 32 por 32 imagem. Mas eu vou usar a imagem aleatória que eu tenho da codificação, de codificação para todos os branding. Então vamos abrir nosso código aqui. E em nossa cabeça, o que vamos criar é o elemento de ligação. E podemos fazer a ligação do cólon, favicon. E ele nos dá todo tipo de coisas aqui. Agora, por padrão, ele quer que usemos um ponto ICO. Esse é um formato antigo. Não temos que fazer isso. Podemos usar, digamos um ponto PNG. Agora, isso é como vincular a uma imagem ou um CSS ou um arquivo JavaScript, nós realmente precisamos ter certeza de que isso funciona. E você notará que estamos usando três atributos aqui. Então temos o elemento de ligação. Temos o trilho ou a relação como o que é? É um atalho e é um ícone, uma referência de hiperlink para onde quer que a imagem esteja e, em seguida, o tipo de imagem. E nós não queremos que o tipo de imagem seja ícone X, queremos que a imagem seja P&G porque eu vou estar usando um PNG. Da mesma forma, se você estiver usando um JPEG, seria JPEG. Alternativamente, JPEG com um e, Mas estamos usando P&G. Agora é neste ponto que eu poderia realmente querer usar o meu editor um pouco mais. Então o que eu gostaria de fazer é em vez de ter apenas um arquivo aberto, eu vou abrir toda essa pasta. Vou abrir um arquivo. Eu vou para a minha área de trabalho onde esta pasta está, e eu só tenho index.html lá. Vamos em frente e abrir isso. E realmente parece que ele não fez muito, exceto adicionado esta barra Explorer. Agora, se essa barra explorada não aparecer, você sempre pode ir para onde você está em algum lugar em seu explorador de visão bem ali. Veja Explorer que ele sempre o ativará para você. Então, vamos clicar em index.html. E esta é apenas a página em que eu estava trabalhando. E aqui também quero algum tipo de imagem para ligar dois. Então, vou abrir o meu Finder. Vou copiar esta imagem em particular. Eu vim preparado para esta lição com uma imagem chamada codificação para todos, favicon dot PNG. Vou copiar o nome inteiro. E você pode ver como eu copiei para aquela pasta, VS Code era como, oh, há um novo arquivo. Ok, vamos colocar isso aí também, e agora podemos pré-visualizar. Então é assim que a imagem vai se parecer. E tudo o que tenho de fazer é porque copiei o nome do ficheiro, vou colar o nome do ficheiro. E não estamos usando barras ou pontos, pontos ou algo assim. Nós não estamos usando isso, ou digamos, fav cons, não estamos fazendo nada disso. Queremos ter certeza de que isso está na mesma pasta que o nosso index.html, apenas para manter isso simples por enquanto. E você pode dizer isso na mesma pasta porque estamos no HTML2, uh, uma pasta aqui. E há index.html e codificação para todos, favicon dot PNG. Vamos em frente e salvar isso. E vamos atualizar esta página. E você pode ver que o favicon agora apareceu. Agora, se você estiver usando outro navegador e ele não aparecer, isso pode ser devido a uma das duas razões. Há um erro de digitação e você não adicionou a imagem corretamente. Vou mostrar-lhe como depurar isso em apenas um segundo. Ou há cache e eu sei que navegadores como Microsoft Edge gostam de dinheiro muito duro. Então você pode realmente ter que fazer uma recarga difícil ou abrir outro navegador. Eu só porque seu navegador vai tentar obter essa imagem uma vez e então tentar armazená-la por muito, muito tempo. Agora, se isso não aparecer para você, e vamos em frente e fazer isso palavrão. Não aparece lá dentro. E você pode realmente ver com minhas ferramentas de inspeção aberta, há um erro. Se eu passar para o meu console, você pode ver o arquivo erro de rede não encontrado e está procurando uma codificação de consulta para todos, favicon dot PNG. E isso simplesmente não existe. Então, se você abrir suas ferramentas de inspeção e houver um erro de digitação, ou o arquivo não existir, você verá o erro ali mesmo. E eu vou desfazer isso. E lá vamos nós. Temos um favicon. Então, se você está me acompanhando, o que eu gostaria que você fizesse é encontrar uma pequena imagem, algo assim, e adicioná-la como seu favicon à página em que você está trabalhando. 5. Pathing: Tudo bem, vamos falar sobre algo que é meio complexo e meio complicado porque este vai enganar muitas pessoas por muito tempo, incluindo eu mesmo. E estou falando de trajetória. Então nós colocamos tudo em uma pasta específica agora, mas e se quiséssemos outra pasta? E se quiséssemos mover nosso favicon para uma pasta chamada imagens barra ícones fab. E poderíamos clicar e arrastar isso para lá. Temos uma pasta aqui chamada imagens, e então outra pasta chamada ícones fabulosos, e então um arquivo aqui chamado codificação para todos. Então, na última lição, criamos um favicon. Mas quando eu atualizar esta página, nós vamos ver se nós obtemos que o arquivo air não encontrado. Ele não existe porque não está mais na mesma pasta. Está na mesma pasta que index.html. Mas o que podemos fazer é dizer e ir para a pasta de imagens barra, a barra de pasta de ícones fab, e depois o nosso nome de arquivo. Então vamos em frente e salvar essa atualização de qualquer maneira e aparece para nós. Então, isso é o caminho. É assim que entramos em um caminho. Então nós tínhamos apenas o nome da pasta barra outro nome de pasta, e a propósito, não use espaços. Eu sei que muitos usuários do Windows gostam de usar espaços, mas em coisas como esta, não usar espaços é muito mais fácil se você usar sublinhados ou traços, mas por favor não use espaços, você vai ter um monte de problemas. Então uma pasta chamada barra, nome da pasta barra, e então o nome do arquivo, Simples assim. Agora vamos em frente e adicionar uma imagem na pasta de imagens aqui, não na pasta favicon, mas apenas nas imagens. Então vamos em frente e vamos ganhar splash dot com. E vamos obter uma imagem de um computador porque estamos trabalhando em computadores. Bom o suficiente. E vamos baixar este de graça. Vamos pegar a versão pequena deste, porque é tudo o que precisamos. Gostaria de agradecer a Glenn Carsten. Do Peter. Esta é uma foto doce. Obrigado por me deixar usá-lo. Vamos em frente e mostrar isso no Finder. E eu vou abrir isso. Só estou copiando este arquivo. Vamos em frente e jogar isso aqui. E eu vou renomear isso para computador ab.js JPEG e editor. Você pode realmente ver isso transformado em uma pasta adequada agora. E agora há subpastas aqui, mas em imagens, eu tenho uma pasta chamada ícones fav e uma pasta, e não uma pasta, mas uma imagem, um arquivo chamado Computer dot J peg. Agora, eu vou me livrar de um monte desses elementos p porque agora nós realmente não precisamos deles e nós vamos fazer esta página longa de qualquer maneira. Então, esse link interno para a parte superior e inferior da página vai funcionar perfeitamente bem. Eventualmente, Provavelmente não agora, porque a página é meio curta. Mas vamos em frente e adicionar uma imagem. E esse SRC vai ser imagens, esse é o nome da pasta. E, em seguida, o nome do arquivo é Computer dot JPEG recebe um computador alt. E é isso. Então, se voltarmos para nossa página e atualizarmos, podemos ver essa imagem aparecer agora. E isso está na pasta Imagens agora, novamente, se isso não funcionar para você, vamos apenas garantir que você sempre tenha as coisas digitadas corretamente. É sensível a maiúsculas de minús Então, se suas pastas chamadas imagens em minúsculas, não escreva imagens em maiúsculas e isso simplesmente não vai funcionar para você. Então vamos fazer imagens. Quebre-me e vamos refrescar-nos. Podemos ver o texto alt aparece lá em cima e no meu console, você pode realmente ver erro não encontrado. Então isso é passar para uma pasta. Digamos que alguém entre na pasta de imagens porque podemos fazer isso. Sabemos que HTML 201 é uma pasta. E também sabemos que as imagens são uma pasta. Então vamos fazer isso. Vamos cortar imagens. E podemos realmente ver que temos tecido em uma pasta e temos computador pontilhado JPEG. Mas digamos que realmente queríamos que algo aparecesse aqui. O que podemos fazer é entrar na nossa pasta de imagens, criar um novo arquivo. Queremos chamar isso de index.html. E isso significa apenas usar esta página por padrão. Esta é a página padrão que o seu navegador vai procurar. Então, mesmo se você não pousar nesta página, vai tentar usar esta página. De qualquer forma, apenas por padrão. Meu código VS está configurado para usar templates do Django por padrão, mas vamos alterá-lo para HTML5. E vamos fazer HTML dois pontos cinco. A pasta de imagens vai ser o título, nome, e no corpo, vamos apenas dizer, oi, oi, oi, oi. Tudo bem, então eu apenas atualizar a página que temos, este arquivo index.html e não está mostrando nossa página por byte padrão, esta é uma boa prática porque uma vez que ele entra em um servidor, index.html vai ser a página que aparece por padrão . Então, ele vai parecer exatamente como você clicar nele, exatamente assim. Mas não vai necessariamente dizer index.html. Isso não é uma coisa que você precisa realmente lembrar neste momento no tempo, mas é uma pequena coisa legal que você pode fazer com servidores ao vivo, sites ao vivo na estrada. Então agora temos este arquivo index.html, pasta de imagens internas. Vamos vincular uma página. Então, digamos que h3. Esta é a pasta Imagens. E vamos criar um Lincoln aqui, um link âncora com o hipertexto, referência de hipertexto. E vamos usar uma página relativa. Então vamos dizer subir uma pasta, e é assim que fazemos isso. Nós vamos ponto ponto acima de uma pasta. Se precisássemos subir mais uma pasta porque isso já está na pasta Imagens. Precisávamos estar lá fora. Poderíamos fazer ponto, ponto barra, ponto, ponto barra, ponto, ponto barra. Cada um desses que você pode realmente ver está subindo para uma pasta no meu computador. Agora eu não quero nada disso. Eu só quero um. E eu quero ser capaz de selecionar não a pasta de imagens, mas index.html. E isso vai fazer referência a este aqui. A nomeação fica um pouco confuso porque temos que o arquivo index.html é, mas tudo bem, e VS Code foi inteligente o suficiente para descobrir o que estávamos tentando fazer. Voltar para casa é o que vou dizer na página de três calouros. Faça disso um grande, maior. E podemos voltar para casa. E quando eu clico nele, ele volta para o HTML para uma página inicial de um. Então isso é caminho em poucas palavras para mover para cima uma pasta, use ponto barra. Para mover para uma pasta. Você não usa a barra de ponto, basta especificar o nome da pasta barra, subpasta chamada Se houver uma barra e, em seguida, seu nome de arquivo. E isso é o caminho em poucas palavras. 6. Introdução a mesas: Certo, vamos dar uma olhada nas mesas. Tabelas são extremamente importantes para nós agora porque não vão nos permitir realmente criar algum tipo de layout para a nossa página. Agora, reconhecidamente, layouts, laranja realmente criado com tabelas mais. Esta é uma maneira muito antiga de fazer as coisas, mas porque não sabemos CSS e ainda não sabemos JavaScript. Esta é a única maneira que temos e isso é 100% aceitável porque mesmo que nós vamos estar usando tabelas de uma maneira que realmente não é mais usado. Nós vamos estar aprendendo tudo sobre como usar tabelas corretamente porque ainda há usado para coisas como conjuntos de recursos ou praticamente qualquer site do governo porque todos eles ainda usam tabelas por algum motivo. Sim. Assim, as tabelas ainda são usadas. E-mails usam tabelas de tabela o tempo todo. É uma habilidade muito importante para se ter. Então eu vou descer aqui e nesta lição eu vou apenas mostrar a vocês como uma tabela é criada, mas nós realmente não vamos fazer nada com ela ainda. Então, não sintas que tens de programar comigo. Então uma tabela é um elemento de tabela assim como este. E dentro disso, temos linhas de tabela chamadas TR e, ou eu posso fazer TR. E depois Tab. Podemos ter outra guia TR linha da tabela. E, em seguida, dentro de cada linha da tabela as células são chamadas células da tabela ou células de dados da tabela T Ds. Célula um. E vamos entrar aqui e fazer a Célula TD 2. E a propósito, se você é um pouco novo neste curso, eu estou indo um pouco rápido demais para você. O que eu fiz lá foi que eu poderia digitar na tabela e porque é um elemento HTML, eu posso digitar na tabela. E assim que eu vejo a abreviação de Emmett, eu posso pressionar a tecla tab no meu teclado e ele apenas cria em elementos HTML para mim. Então agora estamos entrando em um bom aninhamento e um HTML 101 que aprendemos tudo sobre aninhamento. Então sabemos que tudo isso vai ser uma mesa incluindo os elementos da criança e do neto. Essa coisa toda é uma linha, incluindo seus elementos filhos. E este único elemento aqui vai ser uma célula, e este vai ser a célula dois. E se apenas atualizarmos nossa página aqui, role em. Podemos ver a cela um, a cela dois, nada extravagante realmente acontecendo lá não parece que nada aconteceu. Mas e se dermos a isto uma fronteira de um? Na verdade, agora temos uma mesa. Podemos fazer mais com a gente para, podemos dizer que a largura vai ser um 100%. E ocupa a coisa toda, como poderíamos adicionar outra célula. E este vai ser tão 1.2, eu acho. E nós poderíamos adicionar 1.3 e nós podemos subir, assim por diante e assim por diante. Então, de qualquer maneira, nós vamos entrar nisso em muito mais profundidade nas próximas duas lições. Mas eu só queria mostrar rapidamente que é assim que criamos uma tabela. 7. Linhas e células: Vamos dar uma olhada nas linhas e células da tabela. Então, para criar uma tabela, nós fazemos esta tabela barra tabela. E isso é tudo o que realmente precisamos fazer para criar uma tabela. Mas dentro de uma tabela consiste em dois elementos primários, uma linha de tabela. E é isso que TR significa. T r é igual a uma linha da tabela. E dentro de cada linha temos células são células de dados de tabela. Assim, um td é igual a uma célula de dados da tabela. E assim é através da guia TD. E vamos criar uma primeira célula, primeira célula aqui. E vamos virar para um navegador e clicar em Atualizar. Vamos ver nossa primeira venda. Bem, não podemos realmente vê-lo e podemos inspecioná-lo se quisermos. E podemos ver que estamos de fato em uma tabela e nosso navegador é inteligente o suficiente para dizer, hey, na verdade é suposto haver um corpo aqui. Então embrulhe os TR em um corpo T. Então isso realmente vai um nível mais profundo. Então ele vai tabela T Corpo TR td. Agora eu não tenho que escrever o corpo t porque eu estou assumindo que tudo que eu estou escrevendo vai estar no corpo da tabela de qualquer maneira, e o navegador está fazendo a mesma suposição para que possamos atalho dessa maneira. Agora, para ver nosso progresso, eu sempre gosto de jogar fronteira aqui e depois me livrar dessa fronteira mais tarde. Então vamos fazer uma borda de um e uma largura de 100%. Vamos refrescar. E agora podemos ver que temos nossa primeira cela. E se formos em frente e adicionar uma segunda célula, e isso vai ser lado a lado, que é algo que não fomos capazes de alcançar com elementos de bloco em HTML 101. Mas agora podemos, e podemos continuar fazendo isso, assim por diante. Então, em vez de segundos L Poderíamos fazer terceira célula e podemos continuar adicionando mais e mais e mais. E nos livramos do terceiro Salomon e copiamos tudo isso. Na verdade, não vou copiar. Vamos escrever isto à mão, porque é uma boa prática escrever isto à mão. Ted Row para vender um. E se eu fizer outra TV bater Tab R2, L2. E lá vamos nós. Temos primeira venda, segunda linha de célula 2l, uma linha para vender. E é assim que criamos uma tabela linhas e células. Agora, o que eu gostaria que você fizesse é dar essa chance. Quero que crie uma tabela de dois por dois, crie quatro células. Então você tem duas linhas para colunas e quatro células no total. Vá em frente e dê uma chance assim que estiver pronto, vamos passar na próxima lição onde mergulharemos um pouco mais em mesas. 8. Compressão de tabel e linhas: Vamos dar uma olhada em mesclar células e linhas. Então isso fica muito, muito interessante e não é realmente super intuitivo no começo, mas fica um pouco mais fácil quanto mais você faz isso. Então, na última lição, criamos uma tabela dois por dois, duas linhas, duas colunas. Este aqui, queremos criar um três-por-três. Vou fazer uma mesa aqui e quero ver a minha fronteira. Quero ver o meu progresso aqui. E então mude essa largura para 100% porque eu queria ocupar o máximo de espaço possível na minha página. Não quero deixar espaço extra para a direita. Agora, para uma boa medida, poderíamos sempre fazer um corpo t se quiséssemos. Não fiz isso na última lição. Eu falei sobre isso, não fiz isso. Isso está tudo bem. Vou fazê-lo desta vez só para te mostrar que podemos fazê-lo. Então temos uma fila de mesa aqui. Sabemos que esta vai ser a nossa primeira fileira de mesa. Segunda fila, terceira fila. E tudo que estou fazendo é hash neste outono, desgastando isso. Estou a tornar isto um pouco mais fácil de trabalhar. E agora eu preciso, porque eu tenho três linhas e três colunas e vamos em frente e criar TD 12. E tudo o que estou fazendo aqui para copiar toda a linha é Comando C, Comando V ou Controle C, Controle V. E eu vou selecionar tudo isso, copiar isso, colá-lo, e colá-lo lá dentro. Vamos dar uma olhada em como é a nossa mesa agora. Temos linha um, linha para linha três. São, na verdade, essas são colunas. Entendi isso ao contrário. Então, na coluna um, coluna dois, coluna três, linha um, linha dois, linha três. Agora há uma maneira de mesclar células. E podemos fazer isso de uma maneira muito interessante. Podemos fazer Colspan. Assim, a extensão da coluna é igual a três. Então temos que dar uma olhada aqui. Quantas colunas temos? 123. Podemos gastar três colunas. Vamos salvar isso e ver o que acontece. Este número um na primeira fila ocupa três espaços, mas agora há mais duas células aqui. Agora, se você vir algo assim, você pode excluir com segurança essas células extras porque elas não são necessárias. Dissemos colspan de três, então pegue três larguras de coluna. E então também tínhamos algum HTML antigo lá e acabamos de nos livrar disso. Quando atualizarmos nossa página, vamos ver que rho um ocupa três colunas. Agora. Agora vamos em frente e fundir este e este dois juntos. Não vamos fazer isso. Vamos fazer este dois e este três. Então precisamos ir para a fila dois. Então temos a primeira fila aqui. Vamos fazer a segunda fila. E queremos fundir estes dois juntos. Então podemos dizer que colspan é igual a dois porque queremos que isso ocupe todos os números dois e três. Vamos continuar e salvar essa atualização. E agora está ocupando esse espaçamento extra também. Agora vamos em frente e fundir este. Então, rema para vender um e três células um. Vamos em frente e fundi-los juntos. Então nós podemos realmente escrever, nós podemos mesclar pedaços de linhas juntos também. Então aqui, porque queremos fundir para baixo, vamos fazer uma linha de dois. E vamos ver como isso se parece. Se eu não ajustar isso, você pode ver uma outra célula deslocada que não é o que queremos. Então ainda temos 123 e linha três e não queremos isso. Vamos em frente e apague esse rho um porque nós temos temos um aqui e temos um aqui. Não precisamos dos dois. Vamos apenas, vamos apenas apagar este. Então exclua, salve, volte para o nosso navegador e atualize e veja isso. Então temos três larguras de colunas. Na nossa primeira fila. Aqui, temos duas larguras de coluna. Aqui, temos duas alturas de linha. E fazemos isso com esses atributos chamados rowspan e colspan ou span de coluna. Isso vai ser muito importante para seus projetos finais. E o que eu gostaria que você fizesse é dar uma chance, fazer exatamente o que eu fiz. Crie uma tabela de três por três. E, em seguida, começar a mesclar linhas e células e ver como ele desloca células e, em seguida, tentar excluir as células apropriadas e apenas fazê-lo realmente funcionar da maneira que você deseja que ele funcione. Vá em frente e dê uma chance. Se você ficar preso, não se esqueça, você sempre pode fazer perguntas abaixo ou no grupo do Facebook chamado aprendendo a codificar. Há mais de 56 mil membros. Podemos ajudá-lo em apenas alguns minutos após postar uma pergunta. Vá em frente e dê uma chance e te vejo na próxima aula. 9. Larguras e celular: Ok, bem-vindo de volta. Vamos dar uma olhada em larguras de tabelas e larguras de células. Então eu vou excluir essa tabela da última lição, criar uma nova. E vamos dar a isso uma borda de um, e vamos apenas criar algum conteúdo padrão aqui temos uma linha da tabela, célula da tabela, célula aqui, tabela padrão. Já deveríamos estar um pouco familiarizados com isso. Então, se eu for para o meu navegador e este for do último vídeo, se eu apenas atualizar, eu tenho que vender aqui. Não está ocupando muito espaço, talvez um, ocupa 50% do espaço nesta página. Então, se eu diminuir o zoom, você pode realmente ver que é super, super minúsculo. E o que posso fazer é dizer que a largura é igual a 50%. Até agora eu tenho dito com é igual a um 100% e ele ocupa toda essa largura por aqui. Mas agora estou dizendo, na verdade, só ocupam 50%. E eu posso entrar no modo responsivo aqui. E eu posso ver isso à medida que minha página fica menor, assim como essa tabela. Isso é realmente super, super difícil de ver, porque isso é super, super minúsculo. Mas está se tornando cada vez menor. Portanto, é manter essa largura de 50%. E tudo o que ele fez lá foi clicar neste pequeno ícone no Google Chrome e isso me envia para o modo responsivo. Então você pode ver como as coisas vão ficar como em tablets, em dispositivos móveis, coisas assim. Agora, eu só vou dar zoom de volta aqui. E vamos mudar isso de volta para um 100% porque eu quero usar mais largura. Então eu posso ocupar mais imóveis apenas para fins de demonstração no vídeo, ele só parece um pouco melhor. Você não tem que seguir exatamente o que estou fazendo. Então eu vou adicionar uma segunda fila aqui. E digamos que eu tinha uma venda aqui e eu não queria que ele ocupasse exatamente 50% da mesa. Então o que o nosso navegador aqui está fazendo é dizer, hey, há uma tabela, é 100% de largura. Há duas células, 100 divididas por duas, cada uma é 50%. Isso é tudo o que está fazendo aqui. Digamos que eu queria que o primeiro fosse menor. Poderíamos dizer aqui, largura é igual a, e vamos dar-lhe 20% aqui. Agora, antes de mostrar como isso se parece, eu também quero mencionar que você pode se livrar do sinal de porcentagem e você pode fazer isso em pixels também. Isso é um pouco mais difícil. É um pouco mais codificado. Nem sempre o que você quer por cento geralmente é o que as pessoas estão procurando. Mas você também poderia dizer em vez de uma largura de 100%, porque uma largura de 500 pixels. Mas eu vou ficar com a porcentagem por enquanto. Eu guardo isso, atualizo minha página. E você pode ver que a célula realmente ficou menor. Agora você provavelmente está pensando, bem , qual é o uso disso? Mas se eu fizer isso, posso fazer uma nova linha de tabela e uma nova célula aqui. E eu posso fazer colspan de igual a, é suposto ser igual a dois. Então é como se houvesse dois deles, mas eles vão ser fundidos juntos. Bem-vindo ao meu site. E neste, aquele que a largura é de apenas 20%, poderíamos dizer algo como H3. Vamos colocar isso em novas linhas para podermos lê-lo. Navegação H3. E aqui podemos fazer conteúdo H3. Vamos em frente e atualizar isso e podemos ver bem-vindo ao meu site. É como o título da minha página. Nós temos navegação para que possamos fazer uma lista de links lá dentro. E colocamos algum conteúdo aqui. Então agora estamos trabalhando em um layout real. Agora o que eu gostaria que você fizesse é criar uma tabela e com apenas uma célula em particular, eu quero que você diga exatamente a largura que deve ser, dar-lhe uma largura. E como recapitulação, tudo o que fizemos lá foi adicionar o atributo width à tabela ou à célula. No meu caso, fiz as duas coisas. Assim, a tabela é uma largura de 100%. E então eu disse que a célula deveria ter 20% da largura da mesa. 10. de de mesa: Certo, vamos dar uma olhada nos cabeçalhos da mesa. Agora este é realmente super fácil porque temos vindo a usar os elementos TD para célula de dados da tabela. Vamos em frente e usar um cabeçalho de tabela. E tudo o que fazemos aqui é T H. E eu vou mudar isso para um arquivo HTML. Th representa uma célula de cabeçalho em uma tabela. E vamos em frente e mudar a etiqueta de fechamento também. E você vai ver da última lição para esta lição, isso é o que costumava ser, e isso é o que vai parecer assim que eu apertar Refresh. Agora está centrado e ousado. É um cabeçalho de tabela. E isso é realmente tudo o que há para adicionar um cabeçalho de tabela funciona exatamente da mesma maneira que uma célula de dados de tabela. A única diferença é que em vez de TED, nós dissemos th, é isso. Próximo em suma. Quando achar que tem o jeito disso, vamos para a próxima lição e te encontro lá. 11. CSS online: Okey-dokey, bem-vindo de volta. Vamos dar uma olhada em CSS inline agora nós realmente já cobrimos isso na primeira lição em que dissemos estilo é igual a text-decoração subjacente. Podemos fazer isso em praticamente todos os elementos do corpo da nossa página. E por corpo, quero dizer o elemento do corpo. Então, qualquer elemento aqui, podemos adicionar esse atributo de estilo também. Então vamos em frente e criar uma div. E aqui vamos dar um atributo de estilo, e vamos mudar algumas coisas. E eu só vou te dar um vislumbre do CSS. Então vamos dar um preenchimento de 40 pixels. Vamos dar-lhe uma cor de fonte de branco e uma cor de fundo de, digamos preto. Para que possamos lê-lo bem na tela. E aqui posso dizer “tabulação inferior”. E é tudo o que vou fazer. Então você pode realmente ver a sintaxe aqui. E neste ponto eu provavelmente não preciso mais explicar essa sintaxe para você, mas apenas para uma boa limpeza, vamos passar por isso de qualquer maneira. Então eu criei um Div, espaço. Estilo é o atributo é igual a e, em seguida, eu tenho tudo entre aspas. Então eu tenho uma declaração CSS aqui. Então tudo isso é uma declaração. Você não precisa se lembrar da parte CSS a propósito. Mas esta é uma declaração CSS, estavam dizendo adicionar preenchimento 40 pixels para o topo, direita, inferior e esquerda. Altere a cor da fonte para branco, cor do plano de fundo para preto. E entre cada uma dessas declarações, como esta, temos um ponto-e-vírgula, então é um pouco diferente do HTML, mas ainda muito, muito legível. E essa coisa toda aqui é chamada de CSS inline. Então vamos voltar para nossa página e eu vou atualizar e olhar para isso com apenas um pouco de esforço e sabendo apenas uma pequena quantidade de CSS, nós fomos capazes de criar um preenchimento aqui. Então temos espaçamento aqui, aqui, aqui e aqui. Mudamos a cor de fundo para preto e a cor da fonte para branco. Também podemos inspecionar com o botão direito do mouse. E se eu clicar neste elemento em particular, podemos ativá-los e desativá-los. Isto é o que o preenchimento faz. Podemos mudar esse preenchimento para ser maior ou menor se quisermos, que é o que estamos fazendo aqui. E tudo o que fiz foi clicar ali e acertei a seta para cima ou para baixo. Você também pode digitar se quiser. Se você quisesse, você poderia rolar todo o caminho para baixo nesta pequena janela aqui e você pode ver que ele vai dizer imediatamente que há um preenchimento de 40 em todos os quatro lados. E isso está na linha CSS, isso é realmente tudo o que há para ele. E nós podemos escrever todo o nosso CSS lá. Essa não é uma boa maneira de o fazer. Mas ocasionalmente você vai ver que isso vai ser realmente necessário. E isso é apenas algo que você deve estar muito ciente. Agora, este CSS novamente, neste momento, não sinto que você precisa saber isso. Depois de você, depois de terminar HTML2, O1, este curso, definitivamente sinta-se livre para pegar CSS. Eu tenho um curso sobre CSS chamado de CSS masterclass. É um curso enorme, enorme que passa por tudo o que se pode pensar. Mas, por enquanto, vamos continuar focando em HTML. Agora, se você quiser seguir e fazer exatamente o que eu fiz, vá em frente, pausar o vídeo e nos dê um preenchimento. Lembre-se que é o que estamos tentando mudar espaço de dois pontos e, em seguida, um valor e, em seguida, um ponto e vírgula. E então o que estamos tentando mudar, como o espaço de dois pontos de cor, e então o valor, e então um ponto e vírgula. E é assim que colocamos três seguidas assim. Então sinta-se livre para dar uma chance ou não. E quando acabares, quando estiveres confortável, quando estiveres pronto. Vamos para a próxima lição. 12. Cursos de HTML: Tudo bem, à medida que mergulhamos cada vez mais em HTML, vamos acabar fazendo a transição um pouco mais para CSS. E nesta lição eu quero mostrar a vocês exatamente como podemos fazer isso imediatamente. Então, na última lição, olhamos para a cor de preenchimento e fundo branco, cor branca e cor de fundo de preto. Agora vamos dizer que queríamos adicionar isso a outra div. E então nós poderíamos escrever outra div aqui, e nós podemos preencher isso com algum Lorem Ipsum. E então nós teríamos que copiar e colar isso assim, que não é grande coisa, mas se tivermos isso 20 ou 30 vezes e então nós temos que fazer uma mudança todas elas. Então vamos dizer que precisávamos mudar de branco para azul e mudar de branco para azul aqui. Temos que fazer isso 20 vezes. E isso fica muito bem por falta de um termo melhor porque muito irritante. E leva muito tempo e há uma maneira melhor de viver sua vida. Então eu vou, primeiro lugar, criar outra div aqui. E isso poderia ser facilmente parágrafos. E vamos em frente e ver o que temos em nossa página. Tenho um lorem ipsum. Um lorem ipsum em lorem ipsum. Então temos 123. E digamos que eu queria aplicar este estilo para este terceiro, mas não o segundo. O que poderíamos fazer é que pudéssemos realmente puxar este atributo de estilo para fora em um elemento de estilo. Agora acontece que eles são nomeados a mesma coisa. Você não pode necessariamente puxar um nome de atributo para fora e transformá-lo em um elemento e apenas esperar que ele funcione. Mas, neste caso, podemos, por isso é apenas uma coincidência lá. Então o que eu vou fazer é selecionar tudo isso deletado, vir aqui, colar isso no meu estilo. E isso não vai fazer nada, mas o que estou vendo aqui é reusabilidade. Então eu tenho essa div e eu tenho essa div. E eu queria ser capaz de dar esses três atributos, esses três atributos CSS a ambos. E podemos fazer isso com uma classe CSS, e podemos dizer Nome da Classe aqui. E selecione esses três, movendo-se de volta, coloque-os lá. E então essa sintaxe parece um pouco estranha. Não vamos passar muito tempo aqui. Mas a aula começa com um ponto. Depois o nome. Não há espaços nem nada nele. É colchetes sensíveis a maiúsculas e minúsculas. E então as coisas que colocamos dentro do nosso atributo de estilo que agora colocamos em um elemento de estilo. E o que podemos fazer aqui é eu vou copiar isso, mas antes de tudo, quero mostrar a vocês que quando eu atualizar a página, nada acontece. Meu console não está quebrando, não está reclamando. Só tenho três divs com lorem ipsum. E o que eu quero fazer aqui é dizer, neste primeiro, classe é igual ao nome da classe aqui. E você pode ver que VS Code está tentando preencher automaticamente isso para mim. E eu também poderia fazer classe é igual ao nome da classe aqui. E assim, em vez de escrever estilo é igual a preenchimentos, 40 pixels, cor é branco, cor de fundo é preto. Em vez de escrever isso duas vezes, escrevemos uma vez, parece um pouco diferente. E nós dissemos classes iguais a ClassName. Ouça classes iguais a ClassName aqui. Agora, quando atualizo minha página, salvo e atualizo a página. Você vai ver que ele aplica o estilo para ambas as seções para mim. Agora, cuidado com erros de digitação aqui porque estou usando caracteres maiúsculos e minúsculos aqui. Mas se você não fizer direito. E eu propositadamente intitulado esse, ele não vai aparecer, mas seu console também não vai reclamar. Então você tem que ficar de olho nisso, ter certeza de que está digitando as coisas corretamente. Se isso significa que você digita mais devagar, isso significa que você digita mais devagar. Isso está tudo bem. Agora a outra coisa com as classes é que podemos adicionar várias classes. Então poderíamos adicionar outra classe aqui, chamá-la em maiúsculas, e poderíamos transformar texto em maiúsculas. Agora, eu já sei isso porque eu escrevo muito CSS no meu dia-a-dia. Mas VS Code também é muito útil aqui. Assim que eu digitei texto, você pode ver está tentando me dar todos os tipos de opções diferentes aqui. Há muito para CSS. Novamente, você não precisa memorizar tudo se você realmente não quiser. Você sempre pode descobrir como o Google é, contanto que você possa descobrir como obter a resposta, isso é o que é importante. Mas voltando óculos. Então eu tenho uma segunda classe aqui. Novamente, a classe começa com um ponto. Isso é o que isso significa. É muito como dizer ponto é igual ou aqui em cima é muito como dizer classe é igual a. Nós apenas usamos ponto como um método abreviado. E então vamos fazer um desses maiúsculas e podemos adicionar maiúsculas para o segundo. Agora precisamos adicionar um espaço. E aqui, se você não adicionar um espaço, apenas se parece com isso. E seu navegador vai pensar que o nome da classe é chamado class_name aqui, maiúsculas. Como todas as palavras, não é seu ClassName aqui, espaço e, em seguida, maiúsculas também. E podemos adicionar mais e mais e mais se quisermos, desde que eles realmente façam algo. Então eu tenho ClassName aqui, espaço, maiúsculas. E quando eu atualizar isso, devemos ver que isso herda esse mesmo estilo, mas também deve ser todo maiúsculo. E olha para isso. É como se estivesse gritando comigo. E isso é tudo o que há para realmente classes em HTML. Uma classe é um pedaço de código reutilizável. Tem este pequeno ponto aqui que diz como uma classe, tem este tipo de sintaxe. Novamente, você não precisa saber esta parte neste momento. Por favor, concentre-se no HTML. Html que queremos focar é o atributo chamado classe. E como funciona, podemos ter um nome de classe, espaço, nome de segunda classe, espaço, nome de terceira classe, assim por diante e assim por diante e assim por diante. 13. IDs de HTML: Ok, bem-vindo de volta. Temos mais uma coisa para cobrir quando se trata de CSS, e é essa ideia de um ID. E nós realmente fizemos isso quando estávamos criando links internos. Então podemos criar um link que vai para baixo ou como este, um link que vai de volta para o topo da página. Mas estamos usando este atributo ID aqui, e podemos realmente definir as coisas com base em uma idéia também. Então, na última lição, demos uma olhada nas aulas. Classes usam um ponto. Mas se eu rolar de volta aqui, você pode realmente ver esse id, como se eu estivesse ligando aqui de volta para o topo e fazer, fazer, fazer, fazer, fazer, fazer, fazer. Id é igual ao topo. Mas aqui em baixo, eu ainda estou ligando a ele com um sinal de número, número, sinal de topo. E isso vai me levar de volta ao topo da identificação. Agora o que isso está dizendo é basicamente sinal de número é igual ao topo. Id é igual ao topo. É a mesma coisa. Então, se rolarmos para baixo dentro de nosso atributo de estilo aqui, podemos criar um ID de teste de ID. E aqui, e você verá que ele começa com um sinal numérico, sem espaços, sem caracteres especiais. É só mensagens regulares aqui. Então não tente ficar muito chique com seus nomes de classe ou seus nomes de identificação. E aqui poderíamos fazer algo como borda, cinco pixels, vermelho sólido. Vamos realmente tornar isso muito mais desagradável e fazer 15 pixels vermelho sólido. Agora, fora da caixa, isso não vai fazer nada porque nós não aplicamos esse ID de teste específico em nenhum lugar. Vamos em frente e adicioná-lo a este meio. Então temos três divs aqui. Temos uma div superior com o nome da classe aqui, div inferior com o nome da classe aqui e maiúsculas. E no meio temos ID é igual a. E eu vou rolar até a identificação do teste e você pode ver que ambos combinam bem aqui. Agora a coisa com IDs é que eles devem ser 100% únicos. Nenhum navegador nem sempre honra isso, mas JavaScript sempre terá um problema se você tiver dois IDs iguais. Então você não precisa saber o que isso significa neste momento. Mas o que você precisa saber é que uma identidade é igual à sua carteira de motorista. Só deve haver uma cópia. Só deve haver uma versão dele. Essa é a sua identidade. Então vamos voltar ao nosso navegador aqui. E quando eu apertar atualizar, vamos ver uma borda vermelha de 15 pixels por aqui. Assim como aquele super detestável. Assim, assim como as classes, podemos selecionar coisas por IDs e, em seguida, adicionar estilo a ele. E é daí que vem esse atributo ID. Agora não há nada para fazer aqui. Não se preocupe, você não precisa realmente saber tudo isso agora você vai ter toneladas de experiência com isso em CSS e JavaScript quando você vai e aprender essas coisas. Mas, por enquanto, novamente, vamos continuar focando em HTML. É bom saber que há um atributo de classe e um atributo de ID, e é assim que ele funciona. Oh, e uma última coisa. Você não adiciona várias IDs aqui. Assim como nós temos o nome da classe aqui, e então um espaço e, em seguida, maiúsculas. E isso é selecionar essas coisas e essas coisas com uma identificação. Não fazemos isso com uma identificação. Só dizemos que há uma única coisa aqui. Então não fazemos identificação de teste. E outro, e outro. Nós não fazemos isso. Só dizemos que há um. Então deixe isso afundar por alguns minutos. Sinta-se livre para me encontrar e a próxima lição, e voltaremos ao HTML. 14. Formatação de código: Ok, bem-vindo de volta. Vamos dar uma olhada em algumas maneiras diferentes de formatar código, formatar código ou formatar código. A primeira maneira é este pré tag p e. E se nós apenas passar o mouse sobre esse tempo suficiente, MD n vai nos dizer que a tag pré é é um elemento que representa um bloco de texto pré-formatado em que a estrutura é representada por um tipo de Alibaba por a primeira, a coisa mais importante aqui é que se representa texto pré-formatado, algumas coisas aqui. E vamos em frente e vamos apenas verificar como isso parece no início. Então isso é perto do fundo aqui. E olha para isso. Na verdade, fez algo estranho. Acrescentou um monte de espaços. Então, em HTML 101, se você se lembra, eu pregava sobre isso. Html ou não HTML, mas seu navegador não se importa com espaços em branco. No entanto, há alguns casos em que isso acontece. Pre é um desses casos. Então o pré tag é muito branco sensível. E se fizéssemos uma segunda linha aqui, segunda linha aqui. Agora, em HTML regular, precisamos adicionar um BAR ou algum tipo de elemento de bloco para entrar em uma nova linha como esta. Mas na verdade não precisamos fazer isso, não em uma pré tag de qualquer maneira. E uma pré tag. Olhe para isso aparece perfeitamente. Agora, a coisa a ter em mente é que o pré tag se preocupa com o espaço em branco. Então vamos em frente e adicionar um monte de espaços aqui. Faça com que isto seja realmente terrível. Ele também alinha nosso texto a propósito, então realmente não importa qual é nossa fonte padrão, porque nosso editor de texto vai tentar se certificar que cada fonte é mono ou cada letra é monoespaçada, modo que h é o mesma largura que E, como a mesma largura que a nossa é a mesma largura que e é a mesma largura que os olhos. Da mesma forma que Zed está dizendo onde este m, sim, você entendeu o ponto. Na etiqueta pré. Vai fazer exatamente a mesma coisa. Considerando que se você olhar aqui que r não é tão largo quanto o EFP. Considerando que aqui o SOM ou todos a mesma largura, mesmo os espaços são a mesma largura. Isso é chamado de espaçamento Mano. Então essa é uma maneira de formatar seu código. Outra maneira de formatar seu código é se quiséssemos fazer algo inline porque PRE como um elemento de bloco, poderíamos dizer, vamos adicionar algum texto Lorem aqui, código barra código. E isto vai estar na fila para nós. E isso vai fazer com que pareça um pouco mais código como, um pouco mais como este. E olha para isso. Ele realmente levou lorem ipsum dolor assento, assento, sentar. Eu não sei. E formatou muito assim. Agora é sensível a espaços em branco? Vamos explorar. Vamos adicionar um monte de espaços entre lorem ipsum. Este não é sensível a espaços em branco. Você olharia para isso? Mas pré é é sensível a espaços em branco. Então essa é uma boa distinção para ter em mente. Então vou desfazer isso porque não é necessário. E essas são duas maneiras pelas quais você pode formatar seu código. Então você pode escrever um código como este. Ele ainda vai tentar renderizar HTML dentro dele. Não se esqueça disso. Você ainda vai precisar de entidades HTML. É uma coisa sobre a qual falaremos no futuro. Mas você ainda pode formatar seu código assim ou assim. Elemento de bloco, elemento em linha, elemento de código bonito. 15. Entidades HTML: Ok, vamos dar uma olhada em entidades HTML. Agora, na última lição, olhamos para elementos pré e código. E digamos que eu queria colocar algo aqui como B. Isso é ousado. E digamos que eu realmente queria exibir isso. Eu não queria apenas dizer que este é um texto em negrito. Eu queria realmente mostrar esta etiqueta. Agora vamos ter um problema quando eu apertar a atualização. É, apenas negrito meu texto. Então ele ainda está renderizando HTML regular, e isso não é o que queremos. Na verdade, queremos que esta etiqueta apareça. Agora temos essas coisas chamadas elementos HTML. E um elemento HTML começa com um e comercial ou o final, e termina com um ponto e vírgula. E são apenas atalhos para mostrar menos que, maiores que direitos autorais, coisas assim. E agora há tantos deles, eu não posso cobrir todos eles. E você vai ter que fazer um pouco de Google para isso. Mas podemos fazer menos do que, que é esse símbolo aqui, B. E então podemos fazer comercial e maior que G T. E isso parece muito, muito estranho, mas o que isso vai fazer é transformá-lo nisso. E este vai transformá-lo nisso. Mas só enquanto o exibimos. Então vamos em frente e atualizar sua página. E podemos ver que isso agora realmente aparece. Vamos copiar tudo isto para a nossa etiqueta de encerramento. E vamos adicionar uma barra aqui. Olhe para isso. Portanto, nosso texto não está mais em negrito e está nos mostrando as tags HTML. Agora podemos fazer a mesma coisa, exatamente a mesma coisa dentro de nossos elementos de código que usamos em nossa última aula ou última lição. A mesma coisa, e não precisamos fazer isso dentro do elemento de código. Poderíamos fazer isso em qualquer lugar. Isso realmente não importa. Você verá aqui embaixo que diz B, isso é negrito, modo que isso é um elemento HTML ou uma entidade. E uma entidade, tudo o que é tomar algum tipo de maneira de ler regularmente o código que você é navegador. Tentamos interpretar e mostrar da maneira que você quer mostrá-lo de uma forma legível por humanos. Agora, um bom exemplo é se fôssemos adicionar como um rodapé à nossa página aqui. Digamos que este é o nosso rodapé. Poderíamos dizer algo como e copiar. E então poderíamos colocar o ano aqui para que pudéssemos colocar tipo 2022, se esse for o ano. Role para baixo e lá está, um copyright. Agora só por fundos estes, eu vou jogar em extras aqui. Podemos fazer por super, e isso compensa. Então ele traz isso um pouco em vez de ser centrado. E também podemos fazer SUB, SUB para subscript, sobrescrito e subscrito. E isso o traz para baixo. Então vou desfazer isso se estiver à vontade para brincar com eles se quiser, mas eles não são realmente necessários. Apenas pensei, jogue-os lá para se divertir porque eles estão trabalhando ao longo de linhas de direitos autorais. Copyright é geralmente aquela pequena visão, no topo da linha, você usaria sobrescrito para isso. 16. Introdução às formas: Ok, vamos falar sobre formulários bem rápido. Formulários. Agora vamos passar um pouco de tempo em formulários, mas na verdade não vai ser incrivelmente útil para nós. Formulários são como enviamos dados para um servidor. Mas nós realmente não temos um servidor só porque nós abrimos em arquivo HTML em seu navegador não significa que é um servidor. Servidor geralmente executa uma linguagem de programação como Python ou PHP, Java, C, alguma outra formatação adequada, linguagem de programação adequada que estamos usando não uma linguagem de programação. Html não é uma linguagem de programação, é uma linguagem de script. E assim, não temos um servidor, não precisamos do servidor para executá-lo. No entanto, os formulários são importantes para criar formulários de contato, atualizar formulários, formulários de inscrição de formulário de login, esqueceu seus formulários de senha, coisas assim. Agora forma tipicamente se parece com isso. Você tem o elemento de formulário. Você tem algum tipo de método. E você pode realmente ver que ele está sugerindo para aqui, bem três, mas realmente você vai estar usando GET ou post para a maior parte do tempo. Eu, vamos em frente e usar o “get”. E a ação vai para algum HTML de ponto de página. Agora, apenas como um exemplo aqui, vamos em frente e criar um botão. E o tipo vai ser Submeter, e vamos cobrir tudo isso individualmente, individualmente também. Envie este formulário. E se eu voltar para minha página e atualizar e clicar em enviar este formulário, veja o que ele faz com meu URL. Ele vai para alguma página ponto HTML. Então mudou a página para nós, o que é legal. E tentaria também coletar as informações do formulário e colocá-las na URL, o que não é ótimo para senhas ou cartões de crédito ou coisas assim, mas é uma boa maneira de trabalhar com formulários quando você está apenas aprendendo. Vamos dar uma olhada no que mais podemos fazer com um formulário. E novamente, você não precisa seguir junto com isso, vai cobrir tudo isso por conta própria. Então entrada, temos entrada e podemos fazer uma área de texto. E eu apenas deixei meu código VS, meu editor preencher coisas automaticamente para que ele me mostrasse coisas. Este é um campo de entrada. É uma única linha, como seu e-mail ou sua senha ou algo assim. E esta é uma área de texto como você está adicionando seu endereço. Então vamos em frente e dar uma olhada em alguns desses individualmente. O que vou fazer é apagar isso porque não vai ser útil na próxima lição. Embora queria fazer aqui era mostrar-lhe, ei, é assim que os formulários funcionam. E na próxima lição, vamos começar com formulários. 17. Elementos de entrada: Ok, bem-vindo de volta. Na última lição, demos uma olhada no que um formulário faz, uma ação. Não queremos que isto vá a lado nenhum. Vamos apenas fazer isso. Vamos fazer com que vá para a mesma página em que já estamos. Então, quando temos certos elementos, como entrada, área de texto ou botão, ou há um foram realmente selecionar. Vamos cobrir todos estes individualmente. Mas quando temos estes, todos eles devem ser embrulhados em um elemento de forma. Agora isso é uma espécie de mistura e combinar e fazer o que quiser. Não há muitas regras nisso. Como em você não precisa ter um botão de área de texto de entrada, em seguida, selecione. Você pode misturar e combinar estes de qualquer forma, forma ou forma que você gosta. Mas vamos começar com a entrada. Então podemos fazer a entrada. E eu só vou bater no Tab. E por padrão, seu tipo é texto, então apenas texto normal, mas há muitos tipos diferentes. Há botão que se parece com um botão, uma caixa de seleção colorido datetime, datetime, local, data, arquivo de e-mail oculto. O que é bom porque esse não aparece de todo, mas você ainda pode colocar informações em um upload de imagem, mês, número, senha, Radio Research, tal pesquisa, enviar, toalha, tempo de texto, URL, semana, assim por diante e assim por diante e assim por diante até um e assim por diante. Vamos trabalhar com um para começar com um texto normal. Então este é o nosso elemento. Este é o nosso atributo, tipo é o atributo, e este é o nosso valor. Estamos dizendo que é um campo de texto. Em seguida, podemos dar-lhe um valor padrão e dizer Olá mundo. E podemos dar-lhe um espaço reservado também. Espaço reservado é igual para inserir seu nome. Vamos em frente e vamos dar uma olhada no que isso parece. Oh, não, vá até o fundo. Obrigado. Isto tem HelloWorld. E quando eu apago isso, apago, exclui, exclui, exclui, exclui, exclui, exclui, exclui. Este último, aquele pequeno texto em segundo plano que é o texto de espaço reservado. Mas quando eu atualizar a página por padrão, ele diz Olá mundo. E isso é por causa do valor que eu dei a ele. Agora, outro exemplo seria a senha. Vamos em frente e, e você pode ver que ele transforma em pequenos pontos que nós realmente não podemos ver o que ele está fazendo. Então esse é o campo de entrada, isso é realmente tudo o que há para ele. Na próxima lição, vamos dar uma olhada em nosso campo de área de texto. 18. Textareas: Olá e bem-vindo de volta. Na última lição, criamos um campo de entrada neste, vamos em frente e criar uma área de texto. Agora este é um pouco diferente. Você notará que o campo de entrada era uma tag de fechamento automático. O formulário não era, então ele envolve um monte de coisas aqui, mas o campo de entrada realmente leva um valor na forma de um atributo chamado valor. A área de texto não. Podemos nos livrar do nome e identidade porque não estamos fazendo nada disso. Nós também temos um pouco de quebra de regras aqui onde estamos dizendo, hey, este não está realmente usando valor. O atributo não está fazendo isso. Este quer que coloquemos nosso texto aqui. E isso é interessante porque se eu atualizar esta página, diz texto aqui. Mas o que nos torna mais interessantes é que este é um daqueles casos raros em que o espaço em branco importa. O espaço branco importa aqui. E a razão pela qual eu estou mostrando isso é porque eu tenho na minha primeira linha texto aqui, mas então na segunda linha, eu tenho como 15 ou o que faz 12 espaços antes da palavra espaço em branco. Vamos ver o que isso faz. Quem são a área de texto. Isso faz com que não seja muito agradável e nos dá todos os espaços extras lá dentro. Então, se você encontrar algo assim, basta ir em frente e jogar isso à esquerda do seu documento, sua página em que você está trabalhando. Vamos em frente e refresque-se. E isso o traz de volta para a esquerda, e esse é o nosso valor padrão. Agora, isso também pode levar um espaço reservado. Espaço reservado é igual a, uau, um espaço reservado. Espaço reservado. Está bem, refresque-se. Vá em frente e vamos pegar tudo isso e você pode ver que eu tenho espaço extra em branco lá também. Vamos em frente e limpar isso e pegar tudo isso Delete. E ele diz, uau, bem lugar titular. Agora também temos colunas e linhas como uma tabela. Podemos dizer as colunas, digamos que em vez de 30, digamos que haverá 50. As colunas vão para cima e para baixo. Então isso vai ser 30. Então 50 vai ser, eu vou adivinhar que em algum lugar por aqui estão bem perto. E então temos filas que vão para cima e para baixo. A dez linhas aqui podemos dizer cinco linhas. Vamos torná-lo um pouco mais curto. Então tivemos 12345 e depois disso, a barra de rolagem vai aparecer para nós, 6789. E você pode ver essa barra de rolagem aqui. Nós também podemos redimensionar estes, o que é muito bom. A maior diferença entre uma área de texto e um campo de entrada como ele tem colunas e linhas, o espaço reservado é exatamente o mesmo, mas o valor realmente vai entre a tag HTML de abertura e fechamento. Neste momento, gostaria que você desse uma chance, criasse uma entrada e, em seguida, criasse uma área de texto. Não se esqueça se você ficar preso, você pode fazer algumas perguntas abaixo. Ou, alternativamente, você pode participar do grupo de aprendizagem para código do Facebook. Somos mais de 56 mil membros podem ajudar a ioga a qualquer momento. 19. Botões: Certo, vamos dar uma olhada nos botões. O que há de tão importante em um botão? Bem, se voltarmos para nossa página aqui, temos um campo de senha e temos uma área de texto aqui, mas não temos como enviar este formulário. Não há nenhum botão para enviar este formulário, e é isso que um botão faz. Agora, botão pode fazer uma de três coisas. Então vamos fazer botão é igual ao botão e clique em mim. Então o importante aqui é que estamos dizendo tipo, assim como nossa entrada, tipo é igual a senha, tipo de botão é igual a botão. Agora, quando eu vou aqui e atualizar, eu clico nisso, nada está acontecendo. E isso é porque dissemos que Tipo é igual ao botão. Isso é em grande parte para JavaScript, onde JavaScript pode realmente fazer algo com o clique de um botão. Para nós, isso é completamente inútil. Em seguida, temos reset. Agora, reset não parece que vai fazer nada. Mas se eu ir em frente e excluir isso e fazer um monte de coisas aleatórias em seu faz, faz como, como, como, como, como, como dados. E clique em mim. Porque isso é definido como Tipo é igual a redefinir. Vai redefinir todo o meu formulário. Então isso vai preencher automaticamente com um valor padrão, e isso vai aparecer com seu valor padrão. Assim, redefiniu o formulário para nós. Então muito legal, honestamente não usado com muita frequência nos dias de hoje. O que você vai usar com mais frequência é enviar. E agora, se eu atualizar minha página e atualizar, clique em mim. Na verdade, recarregou minha página. E você pode ver que ele foi para o ponto de interrogação index.html. E depois pôr-me de volta ao fundo. Agora esse ponto de interrogação é porque estamos usando um método chamado get. E quando esse método é obter, o que podemos fazer é aqui podemos dizer que nome é igual a senha e a área de texto que podemos ver o nome é igual a, eu não sei o endereço de alguém. Por exemplo, vamos em frente e atualizar esta página. E quando eu enviar este formulário mais uma vez, você pode ver a senha é igual a Olá mundo. É isso que aparece aqui. E o endereço é igual ao texto aqui. Uma nova linha, espaço em branco não importa aqui. E assim que colocá-lo em ou URL. Agora, esta é realmente uma prática muito, muito ruim. Não coloque coisas como sua senha, URL interna nunca. Isso não é realmente algo que você precisa se preocupar muito agora, mas eu vou pregá-lo apenas para que você esteja familiarizado com o tipo de segurança funciona. Se você alguma vez colocar uma senha ou um cartão de crédito ou um número de seguro social, número de segurança social em seu URL. Google pode pegar esse URL e armazená-lo na internet e ele não vai saber melhor. Vai pensar que é uma página legítima. Não apenas o Google, mas sendo ou outros motores de busca, os bots poderão enviar o formulário e obter essas informações também. As pessoas compartilharão os links com sua senha em e coisas assim. Você só quer evitar basicamente ser capaz de compartilhar uma senha ou um número de cartão de crédito, números de segurança social, número de seguro social, qualquer coisa assim, qualquer coisa que seja privada. Você nunca quer colocar em seu URL. Então, de novo, estou recebendo um pouco de pregação sobre segurança aqui, mas é muito bom saber. A coisa a observar aqui, porém, é test1. Teste-2. Senha é igual a testar dois endereços igual ao teste um, exatamente como dissemos. E esse formulário agora está enviando porque temos tipo de botão é igual a enviar. 20. Menus de Dropdown: Ok, vamos em frente e olhar para as opções suspensas. Agora este é realmente interessante. Eu realmente gosto deste aqui, mas antes de fazermos isso, vamos limpar isso só um pouco porque nossa forma está parecendo um pouco nojenta e ele vai mostrar como isso parece antes e depois. Então eu vou adicionar um monte de divs. E aqui, sabendo que uma div é um elemento fictício não faz absolutamente nada, mas é um elemento de bloco. Então ele vai tipo de colocar estes em suas próprias linhas. E vamos fazer isso também. E era assim que nossa forma parecia no início. Vou ampliar aqui. Isto é o que a forma parece no início. E quando eu atualizo a página, isso está em sua própria linha on-line. On-line. Então, isso é um pouco melhor na minha opinião. Vamos em frente e criar mais uma div aqui só para que possamos ter um elemento seleto. E este elemento selecionado é bastante interessante. Então o que podemos fazer é nomear. Podemos dar-lhe uma opção de sublinhado nome selecionado. Não precisamos de lhe dar uma identificação. E este é interessante porque funciona um pouco diferente da área de entrada e texto. O que isso faz é que nos permite usar o elemento opção onde podemos colocar um valor e uma representação de texto desse valor aqui. Então valor um, e podemos dizer que este é o valor um. Fazemos a mesma coisa na segunda linha, valor dois e isso é valor para, vamos em frente e ver como isso se parece. Isto é uma pequena queda agora, e podemos fazer isto uma e outra vez e outra vez. Vou fazer um monte aqui. Não é um bom exemplo, mas um exemplo mesmo assim. E podemos selecionar um desses. Agora, a razão pela qual adicionamos um valor no ano mais a representação de texto desse valor é porque se eu selecionar Valor um, envie este formulário. Você pode ver aqui em cima. Então opção selecionada é igual ao valor um, e esse valor corresponde aqui. Então, quando você enviar seu formulário, sua linguagem de programação do lado do servidor como Python vai ler este valor, vai dizer que é o valor um não vai procurar este é o valor um, ele vai estar procurando apenas um valor. Agora também podemos tornar as coisas desativadas e também podemos fazer as coisas pré-selecionadas. Então vamos em frente e fazer uma nova opção aqui que está desabilitada por padrão. O valor da opção não será nada. E digamos que isso é desabilitado como igual a desabilitado. Deficiente, assim. Vamos em frente e talvez jogar isso em uma nova linha só para que fique um pouco mais legível. E vamos atualizar nossa página. Zoom de volta. Temos uma opção que está desativada. Não consigo selecioná-lo e posso selecionar o valor um ou dois, mas não desativado. Agora vamos dizer que eu tenho uma opção aqui que eu sempre quero ser selecionado por padrão. E diga “default”. Selecionado é o valor. Selecionado por padrão é a representação de texto desse valor. E podemos dizer, disse eleito é igual a selecionado, selecionado por padrão. E assim mesmo se eu voltar para esta página e Lake, limpar todas essas coisas como se eu fosse um novo usuário, eu rolar para a parte inferior da página, selecionado por padrão, mesmo que seja uma terceira opção, ele, ele não selecionou valor1 e valor2 por padrão, ele é selecionado por padrão. Agora, a última coisa a saber sobre esses campos de formulário é que você pode torná-los necessários. Então, digamos necessário e necessário. Portanto, a senha nos campos de endereço é necessária. Vamos em frente e atualizar esta página. Vamos ir em frente e limpar isso e clique em mim e diz por favor preencha este campo. Agora, onde isso fica interessante é que podemos dizer que isso não é uma senha. Podemos dizer que este é um endereço de e-mail. Vamos atualizar a página. E, na verdade, o que eu preciso fazer é mudar esse tipo para e-mail e até mesmo mudar o nome para e-mail também. Portanto, o valor padrão é Hello World. Mas se eu clicar isso é por favor incluir um anúncio no endereço de e-mail. Ele sabe que está procurando um endereço de e-mail. Olá mundo em something.com. Certo, então a validação após essa primeira, não passou na segunda. Ele quer que eu preencha este campo aqui. Uma vez que eu preencha isso, ele enviará a página ou enviará o formulário para mim. Agora, isto são formas em poucas palavras, formas são incrivelmente importantes. Eles também são bastante complexos. Então eu recomendo apenas tomar alguns minutos e mexer com ele. Agora ele não será imediatamente aplicável a você agora até que você comece a trabalhar com uma linguagem de programação do lado do servidor. Novamente, como Node.js, Python, C, PHP, algo assim. Mas você ainda pode obter prática prática compreendendo que algo pode ser necessário, que ele tem um nome que ele poderia ir na URL se for um GetMethod que o tipo poderia ser e-mail, senha, texto, reset. Isso poderia até tecnicamente mesmo por botão se quiséssemos, vamos mudar isso para botão e ver o que acontece lá. Muda para um botão. Embora eu goste de usar esta forma de um botão, é um pouco mais explícito, verbosamente chamado Even. E sim, então dê uma chance e brinque um pouco com ele. Não tente alcançar nada em particular, apenas tentei quebrar as coisas. O que acontece quando você digita Kohls é igual a 500 ou um? Veja se isso tem alguma aparência diferente ou linhas, ou veja se você pode fazer isso selecionado, este elemento de seleção também necessário. Vá em frente e brinque com isso. Não há nenhum objetivo aqui, mas eu diria gastar pelo menos dez minutos brincando com isso e apenas tendo uma idéia de como isso funciona, porque estes são incrivelmente importantes no final da estrada. 21. Empenhando vídeos: Ok, bem-vindo de volta. Vamos dar uma olhada em incorporar algum tipo de conteúdo. Agora fazemos isso tipicamente com um elemento chamado iframe. E iframe leva um SRC e uma borda de quadro enquanto ele realmente leva um monte de coisas diferentes. Mas a borda do quadro vai ser 0 porque nós não queremos uma borda em torno dele. Mas vamos, vamos adicionar essa fronteira. E de qualquer maneira, vamos fazer SRC é igual a HTTPS. Caleb dot i, vamos ver se isso funciona. Ainda assim. Meu site não vai deixar você fazer isso. Mas você pode ver que há uma borda de armação por aqui. E o exemplo é a borda do quadro um versus a borda do quadro de impressão 0. Nós gostamos de quadro borda 0 estes dias ele só parece um pouco melhor. Mas vamos em frente e adicionar um vídeo do YouTube. Então eu estou apenas na programação para todos os canais do YouTube. E vamos para os fundamentos de desenvolvimento web. Vamos pausar isso. E se eu for em frente e clicar em compartilhar, posso compartilhar no Facebook, Twitter ou clicar em Incorporar. E isso me dá um iframe e um monte de códigos. E eu posso copiar isso. E vamos apagar este iframe. Cole isso aqui. E você vai notar que é um iFrame. Tem uma largura e uma altura também. Sua origem é a URL do YouTube. Então dub, dub, dub dot youtube.com barra incorporar barra j, y arco PIH DG. Essa é a ideia única do vídeo, sim, borda do quadro de 0. E o YouTube também não quer que tenhamos uma borda de quadro e permitir um monte de outras coisas aqui que podemos nos livrar, exceto permitir tela cheia. Vamos manter isso aí. Isso parece útil. E assim podemos voltar para nossa página e atualizar e olhar para isso. Temos um vídeo do YouTube na nossa página assim. E isso é literalmente tão fácil quanto possível. Então esse é literalmente copiar e colar. Mas vamos ver o que acontece quando fazemos com aqueles nove de largura de 900, mas a altura permanece a mesma em 315. Fica um pouco mole lá, não é? Digamos que a largura vai ser 900 e a altura é 100. E agora parece que está sendo cortado um pouco. Então, há maneiras de controlar isso. E vou desfazer isso porque o YouTube sugeriu as dimensões certas para mim. E eu posso ir em frente e tocar isso e funciona para mim logo fora da caixa. Agora, o que eu gostaria que você fizesse é encontrar um vídeo do YouTube, clicar no link de compartilhamento ou no botão de compartilhamento, e então pegar o iframe e colocá-lo em sua página. Eu quero que você tenha um pouco de experiência com isso porque no próximo vídeo nós vamos mergulhar em seu projeto final onde você vai precisar usar uma incorporação, como um iframe. 22. SEU PROJETO: Okey-dokey, bem-vindo de volta. Estamos finalmente no seu projeto final para HTML2 01. Agora, aqui está o que eu quero que você faça é que eu quero que você crie um layout de página. Então eu quero que você tenha algum tipo de seção de cabeçalho e navegação e uma seção de conteúdo. E ele tem que ter um layout e ele tem que usar tabelas ou uma única tabela, tabela múltipla, não importa. Vou deixar isso com você. Sua navegação deve ter pelo menos um link para outra página existente. Área de conteúdo. Deve ter uma imagem, um parágrafo, um cabeçalho e um vídeo do YouTube. Por último, seu rodapé deve ter um símbolo de copyright e o ano em que você criou esta página. Então poderia ser como Copyrights 20-20 e copyright 20-25. E quando terminar isso, gostaria que tirasse uma captura de da sua página e compartilhe-a com o resto da turma. Eu acho que é realmente útil obter algum feedback se você não quiser compartilhar com a turma, tudo bem. Você sempre pode ir para o Facebook aprendendo a codificar Grupo e compartilhá-lo com o grupo e obter alguns comentários lá também. Mas o feedback é absolutamente vital e não fique muito nervoso com o feedback. Milhares de pessoas fazem isso todos os dias. Está totalmente bem. Podemos dar-lhe todo tipo de feedback positivo para ajudá-lo a escrever código melhor, para fazer as coisas parecerem um pouco, um pouco melhores, um pouco mais modernas, coisas assim. É sempre bom ter outro par de olhos no seu código. Então vá em frente e dê uma chance. O que eu vou fazer é pausar este vídeo por cerca de, eu não sei, cinco segundos mais ou menos. E então eu vou criar minha versão disso bem na sua frente. Então vá em frente e pause o vídeo aqui e você sabe disso se você ficar preso, você pode apenas me ver fazer o meu e então você pode tentar por conta própria também. Mas recomendo que experimente sozinho primeiro, faça seu cérebro suar um pouco. Isso é muito, muito importante. Ok, vamos em frente e criar nossa página do projeto. Então eu vou para Arquivo, Novo Arquivo e deixar alterações de texto sem formatação para um arquivo HTML. E a primeira coisa que eu preciso fazer é criar essa estrutura HTML5. Este documento será chamado de projeto do Caleb. E a primeira coisa que precisávamos aqui era criar um layout de página usando tabelas ou uma tabela. E então, de repente, deixo algum espaço para trabalharmos aqui. E queremos algo que se pareça um pouco com isso. Devido ao Doo-doo-doo-doo. Perde a maneira mais difícil de desenhar algo. Mas sim, para que pudéssemos ter algo assim. Então nós temos como nosso cabeçalho aqui. Eles poderiam dizer como o projeto do Caleb, site do Caleb, seu site, sua comida favorita, animal de estimação favorito, sua mobília favorita ou algo assim. Temos algum tipo de navegação à esquerda. Por aqui. Nós temos um conteúdo e a direita, e nós temos algum tipo de rodapé na parte inferior. Esse é o tipo de olhar que estou procurando. Seu estilo pode ser um pouco diferente, seu layout pode ser um pouco diferente. Mas primeiro, eu sei que preciso de uma mesa e sei que preciso trabalhar com essa mesa e ver exatamente o que está acontecendo. E eu quero que a largura seja 100% desta página. A seguir, sei que tenho pelo menos uma fila aqui. Então eu tenho uma fila de mesa, e eu quero a tabela indo para aqui. Agora é bom ter o título da mesa vai ousar para mim, mas eu não quero que seja ousado. Quero um H1, quero que seja enorme e diga o projeto de Caleb Tolkien. A seguir temos outra fileira aqui. Então vamos em frente e criar outra linha da tabela. Mas este tem duas células. Então nós fazemos TD célula um, TDs L2. E vamos em frente e visualizar isso salvando isso como meu HTML ponto do projeto. E eu posso ir para arquivo, arquivo aberto, meu projeto dot HTML. E podemos ver que as células não estão funcionando. E isso é esperado porque queremos que isso ocupe toda a largura. Mas isso quer dizer, bem, há duas células, temos que exibi-las de alguma forma. O que podemos fazer aqui é que o colspan é igual a dois. E isto quer dizer que há duas células aqui em baixo. Certifique-se de que isso também finge que são duas células. E lá vamos nós. Isso parece um pouco melhor. Agora temos uma navegação aqui na cela um. Então vamos seguir em frente e rotular esta navegação e vamos rotular este conteúdo. Ok. Você pode realmente ver que isso bateu na minha navegação. Vamos mudar a largura aqui. A largura deste vai ser algo como 20%. Isso parece melhor. Por último, o que escrevi aqui, que a propósito, eu poderia fazer rap em uma pré tag, é que eu preciso desta linha de baixo aqui. Então vamos em frente e adicionar esta linha inferior, linha da tabela, td, rodapé aqui. Vamos ver como é que isto se parece. Nada mal, nada mau. Mas também queremos que isso tenha um colspan de dois. Vamos fazer colspan de dois. Lá vamos nós. Temos um rodapé aqui e queremos centrá-lo. Então não vamos torná-lo um TD, vamos fazê-lo um th. E vamos começar com a coisa mais fácil aqui. Então, temos o nosso layout terminado. O rodapé deve ter um símbolo de copyright. Sabemos que é uma entidade HTML. É aquele pequeno C com um círculo ao redor. Então poderíamos dizer e copiar o site do Caleb como de nós viver no futuro, 20-30. Lá vamos nós. Nada mal, nada mau. Navegação. Sabemos que as regras eram navegação deve ter um link para outra página existente. Vamos em frente e nos dar algum espaço para trabalhar aqui. E vamos criar uma lista não ordenada. E vamos mudar isso para um arquivo HTML. Temos uma lista desordenada e esse primeiro link será uma tag âncora que vai para index.html. Index.html. Vá para o nosso HTML para uma página única. Ok? Certo, isso está se juntando. Vou ampliar aqui. Então isso está se juntando. Vamos em frente e criar outro aliado com uma âncora dentro dele, um item de lista com uma âncora dentro dele. E vamos dizer a este para ir para, sei lá, Facebook.com, mas este é um link externo. Precisamos da barra de dois pontos HTTPS. E isso poderia dizer: “Vá para o Facebook”. Ponto com. Lá vamos nós. Temos alguns links lá dentro. Sabemos que esta existe porque essa era a página em que estávamos trabalhando ou é uma página em que eu estava trabalhando de todos os outros vídeos. Por último, temos algum conteúdo aqui. O que queremos adicionar em seu conteúdo deve ter uma imagem de parágrafo, um cabeçalho e um vídeo do YouTube. Vamos em frente e adicionar esse cabeçalho primeiro. E então você realmente percebe que o que eu fiz lá foi conteúdo era apenas um pedaço de texto para mim. Tudo o que eu realmente queria fazer era me dizer que era onde deveria estar para que eu pudesse selecioná-lo rapidamente e começar a trabalhar. Vamos em frente e adicionar algum cabeçalho aqui. E não tem que ser conteúdo real, a propósito, algum cabeçalho lá dentro. Só precisa verificar esse critério de aceitação. Então o cabeçalho é feito. Podemos nos livrar disso. Link para outra página, livre-se disso. Crie um layout de página usando tabelas. Livrar-se desse rodapé deve ter um símbolo de direitos autorais. Livre-se disso. Agora temos apenas uma imagem, um parágrafo e um vídeo do YouTube. Vamos em frente e adicionar um parágrafo aqui. P. Laura. Ok. Esse está feito. Não precisamos mais do parágrafo lá. Precisamos de uma imagem. Já temos imagens? Nós temos um computador, então vamos em frente e adicionar isso. Img. A fonte vai ser imagens que esta pasta aqui barra computador, ponto-ponto JPEG. E o alt vai ser computador caso a imagem não carregue. Isso funciona para mim? Sim, aí está. Há uma grande imagem lá dentro. Vamos, por último, adicionar um vídeo do YouTube. Então eu vou apenas inicializar o YouTube aqui e ir para o canal de codificação para todo mundo. E vamos em frente e vamos fazer formatação Python. Vamos em frente e clicar em compartilhar, e vamos pegar essa incorporação. E tudo o que estou fazendo é selecionar o texto que vai ser copiado. E aqui embaixo, colar. E essa largura ainda vai ser 560, essa altura ainda vai ser 316. Vou deixar isso permitir que o Excel acelerômetro prancheta, certo? Todas essas coisas. Vou deixar isso aí porque é o que o Google está sugerindo. Nós não precisamos saber o que realmente é neste momento específico porque este é HTML intermediário, não HTML avançado. Vamos em frente e vamos voltar para a nossa página. E temos um título. Temos alguma navegação lá dentro. Temos um cabeçalho, um parágrafo, uma imagem, temos um vídeo do YouTube, e temos um rodapé. A última coisa que quero é livrar-me desta fronteira e deste pré aqui. Então vamos nos livrar desse texto pré-formatado e essa borda pode ser removida. E vamos ver o que temos. Lá vamos nós. Temos uma página HTML com um layout adequado. E isso é tudo o que há. Então, obrigado por fazer este curso. Meu nome é Caleb Eataly e obrigado por tomar o tempo para aprender HTML 201 ou HTML intermediário comigo hoje. Não se esqueça se você gosta do jeito que eu ensino você sempre pode me seguir em compartilhamento de habilidades também. Milhares de pessoas já estão me seguindo. Mas você vai receber pequenas atualizações. Um barco como quando eu tenho um novo curso que saiu, coisas assim e então você pode assistir New Course tem como eu colocá-los para fora. Então obrigado novamente por dedicar um tempo para aprender tudo isso comigo. Estou ansioso para vê-lo em outro curso. Se eu não vê-lo em outro curso, espero vê-lo no Facebook aprendendo a codificar Grupo é um grupo completamente livre. É completamente opcional. Mas há cerca de 56 mil membros lá agora. Todos estão dispostos a ajudá-lo a qualquer momento. E se eu não te ver lá dentro, então mais uma vez, apenas obrigado e feliz codificação. Te vejo por aí. Tchau.