Iniciantes em HTML e CSS

1. Introdução: Olá meu amigo. Estes são os primeiros segundos deles quando devo chamar sua atenção ou você apenas fecha esses vídeos. Então eu fiz isso? Bem, espero que sim porque há muita diversão que vamos ter nesses carros. Em primeiro lugar, observe que, bem, eu não falo como robôs, então essa é a principal diferença entre minhas curvas e as outras. Você simplesmente não vai ficar entediado. Certo, este não é um próximo curso chato. Este é um curso muito legal. Então, se você está se perguntando cada vez que você aprende algo novo, perguntas como, por que precisamos de atributos? O que são seletores e por que eles são seletores nomeados e assim por diante, assim por diante. Então você está no lugar certo porque responderei a todas essas perguntas e explicarei tudo do zero. Certo? Acredito que todos têm a capacidade desenvolver software se tiverem ensinado corretamente, e isso inclui você. Então, depois do meu curso, você finalmente entenderá tudo o que você cria. Então, o que você saberá depois dessa partícula, nosso curso, bem, você saberá como usar tags HTML, atributos e seletor CSS. Você saberá como instalar e definir o Visual Studio Code. Você aprenderá atalhos super, realmente super eficientes que são chamados de emmet. E você, então, como adicionar imagem ao seu lado, como criar links internos e externos, como criar formulários de usuário com entradas e assim por diante e assim por diante. Então, há muito contador para você, certo? E a questão é, por que você deve escolher meu curso? Bem, porque você tem minha ajuda em relação a tópicos abordados. Faça uma pergunta na seção de perguntas e respostas, e eu o ajudarei o mais rápido possível. Meus cursos são atualizados, se necessário. Tenho milhares de clientes satisfeitos, ok? Então, o que você deve saber antes deste curso? Para ser honesto, apenas boas intenções precisaram, então nada é necessário. Ok, você pode ser um grande iniciante total, ok. E quem sou eu? Bem, eu sou o nosso Ártico Kaddish. E eu tenho uma enorme experiência em programação, como você pode ver aqui. E já ensinei muitas pessoas, e a maioria delas está muito feliz. Você pode ler resenhas na internet, é realmente adoro ensinar outras pessoas e que adoram ajudar outras pessoas. Então lembre-se, se você tiver alguma dúvida, sinta-se à vontade para perguntar. Você pode me enviar uma mensagem e eu responderei o mais rápido possível. Obrigado por assistir a este primeiro vídeo e ter um bom dia. Boa sorte. 2. Download e instalação no Visual Studio: Olá, meu amigo de hoje. Vamos falar sobre como baixar o código do Visual Studio, que é, como você pode ver, um editor de código. Mas o que isso significa? É editor? Editor, como o nome sugere, veja os nomes. Sempre veja os nomes. Editor é um programa usado para edição, nada de surpreendente aqui, certo? Mas o que ele pode editar? Ele pode editar apenas sites ou talvez texto? Para ser honesto, esse editor, como você pode ver, pode ser usado não apenas para HTML, mas também para Python, Java Scream, CSS, Java, texto datilografado Isso é uma coisa muito grande. E você pode estar se perguntando: por que devemos usar um editor assim? Por que devemos baixá-lo? Por que não podemos escrever sites usando, por exemplo, um pod de notas? Você não pode fazer isso usando o notepod. Você pode ser honesto, usar qualquer editor de texto para criar um site. No entanto, ao usar um editor, como por exemplo, o Visual Studio Code, você economizará muito tempo e tempo é dinheiro, porque bem, por exemplo, seu código será colorido, deixe-o mais claro O editor sugerirá o que você deve escrever a seguir? Ele fechará o texto sobre o qual falaremos mais tarde e assim por diante. Portanto, o editor é algo que funcionará para você. Então é bom ter algo assim, certo? É bom saber que não importa qual editor você escolherá. Vamos começar, você pode escolher o código do Visual Studio. Você pode escolher, por exemplo, feijão líquido e assim por diante. O mais importante para você é que seja adequado para você. Tudo depende do seu gosto, o que você deve usar. Para ser honesto, você pode digitar o desenvolvimento web do Google. Mamãe. Editores, e você pode procurar alguns deles, abri-los, brincar com eles. Mas, para ser sincero, no começo, basta abrir qualquer coisa. Comece a programar porque isso é o mais importante. Comece a codificar, depois você verá o que é importante para você Acho que o Visual Studio Code é realmente um dos melhores editores. Além disso, se você aprender a usá-lo. Bem, você não precisará aprender outro editor se quiser mudar a linguagem que vai programar, certo? Porque você pode programar nele em quase tudo o que quiser. Então, quando digitamos o código do Visual Studio, podemos baixá-lo para Windows. Quando clicamos aqui, como você pode ver, você encontra links, por exemplo, para Linux ou Macintosh Então, vamos clicar aqui e salvar a luta. Então, depois que o arquivo for baixado, podemos clicar em Abrir aqui, e agora é a parte importante. Devemos ler a licença, ok? Essa é uma parte muito importante. Em seguida, clique em Avançar, Avançar. E depois a seguir. E você pode criar ícones na área de trabalho. Assim, você pode abri-lo facilmente. Clique em Avançar, instale e, para ser sincero, isso é tudo. Seu editor será instalado e conversaremos. Bem, agora, quando clicamos em Concluir, como você pode ver, fica assim. Falaremos sobre como usá-lo na próxima aula. Isso está na aula. Muito obrigado. 3. Como criar o projeto en: Olá, chegou a hora de criar um site dentro do nosso editor de código do Visual Studio. Como fazer isso. Bem, em primeiro lugar, precisamos operar em arquivos. Como operar em arquivos com tantos botões por aqui. Em que devo clicar? Bem, em primeiro lugar, não se preocupe. Você não precisa saber onde precisa, sabe, encontrar tudo neste editor instantaneamente. Ok, ok? Quando você estiver olhando para ele, não se preocupe. Há muitas opções. Você não precisa conhecer todos eles. Usaremos os mais importantes no futuro. Vou te mostrar o passo a passo, para que você não se sinta sobrecarregado Então, primeiro, precisamos operar no arquivo. Mas como podemos adicionar um arquivo ao nosso código do Visual Studio? Você pode fazer isso de duas maneiras. Você pode criar uma nova pasta, nova pasta. Vamos, por exemplo, criar uma pasta chamada CATs. Agora vamos movê-lo para cá. Eu apenas o movo. Estou segurando o botão esquerdo do mouse e apenas colocando-o aqui. Olá. Isso agora está dentro do nosso editor. Aqui, como você pode ver, CATs. E como você pode ver, essa coisa se expandiu aqui, ok? Isso é explorador, então o que permite que você explore coisas dentro da pasta anexada que foi adicionada ao seu editor, certo? O mesmo que você tem no Windows, por exemplo. Mas isso parece um pouco diferente. E aqui você pode fazer o que. Você pode criar um novo arquivo, você pode criar uma nova pasta. Então, vamos fazer isso. Vamos clicar em novos cinco. Como você pode ver agora, podemos digitar aqui o nome do nosso FI. Então, por exemplo, amostra, e quando eu clico em enter, como você pode ver, eu criei um cinco. Exemplo, o problema é que, ei, vamos escrever dentro do que está dentro do HTML no futuro. Você não sabe exatamente o que é isso agora, mas vamos escrever código em HTML. Portanto, devemos mudar a extensão aqui. Como você faz isso? Clique com o botão direito, renomeie e vamos digitar seu HTML Como você pode ver, isso mudou o ícone aqui. Agora estamos escrevendo HTML. E podemos digitar aqui o que quisermos. Como você pode ver quando estamos digitando coisas aqui no lado direito Temos aqui algo assim, essa coisa branca por aqui. Isso sugere que houve uma alteração em nosso código e ele não foi salvo. Precisamos salvar isso para ver o resultado. Assim, podemos clicar no arquivo e salvar ou usar o atalho Control plus S do cofre Como você pode ver, agora acabamos de dizer, e podemos usar o open this file. Então, como fazer isso, podemos minimizá-lo. Cortes abertos. Clique com o botão direito, Openwave Por exemplo, Firefox. Como você pode ver, este é o nosso site do Faces, o que é bem estranho porque não diz nada de interessante, mas não se preocupe Aqui, no futuro, você aprenderá como criar sites que tenham algum significado no momento. É só para se divertir. Diversão, diversão, diversão. E a questão é, agora, essa é a única maneira de adicionar uma pasta? Essa não é apenas a maneira de fazer isso. Podemos fechar a pasta que já abrimos aqui, como você pode ver o arquivo, fechar a pasta e, para abrir o arquivo novamente, mas não movendo-o para cá, basta clicar aqui no Explorer, clicar em abrir pasta e encontrá-la. É aqui que ele age. Assim como a pasta, e como você pode ver, acabamos de abri-la novamente. Você pode simplesmente movê-lo para o Visual Studio Code ou simplesmente abri-lo usando, ou simplesmente abri-lo como você pode ver, o Explorer, certo? Portanto, para criar arquivos, você pode fazer isso dessa maneira, mas lembre-se também de que, como não precisa criar um site no Visual Studio Code, você pode criá-lo mesmo usando o bloco de notas Então você pode clicar em Novo. E você pode, por exemplo, usar o bloco de notas. É um documento textv, não foi traduzido para o inglês Não sei o que, mas significa bloco de notas. E aqui podemos, por exemplo, digitar algo como amostra. Vamos mudar a extensão para HTML. O problema é que eu o chamei da mesma forma que aqui, talvez vamos mudar para a amostra dois, certo. E, como você pode ver, ele também está disponível agora aqui, e você pode pular entre um e outros cinco clicando aqui. Está bem? Você pode minimizar essa coisa e ainda trabalhar no seu projeto ao seu lado, na sua pasta. Então você tem mais espaço aqui, certo? Isso é muito útil. Na maioria das vezes, faremos assim. Então, agora sabemos como assistir ao arquivo. Mas lembre-se também de que isso também é importante. É importante que, ao abrir seu arquivo com o Firefox, como você pode ver, não haja nada aqui agora. Por quê? Porque não salvamos o arquivo. É importante que você sempre precise salvar o arquivo. Você tem a sugestão aqui e aqui. Também diz que um arquivo não foi salvo. E aqui temos informações sobre qual. Controle mais S e, como você pode ver, está salvo agora. E aqui precisamos agora atualizar a página para ver a mudança Portanto, precisamos clicar no botão recarregar a página atual ou controlar mais r na atualização e, como você pode ver, obtivemos um resultado Então, nesta palestra, você aprendeu isso. Temos algo como o explorer que permite explorar as pastas do seu computador. E, para ser sincero, ele realmente simula um projeto, certo? Precisamos ouvir um projeto sobre cortes, que possamos criar um site sobre cortes dentro dessa pasta e nos divertir. Mas coisas assim acontecerão em futuras palestras. Se você tiver alguma dúvida, como sempre, fique à vontade para perguntar. Muito obrigado Tenha um bom dia. 4. Configurando seu primeiro projeto: Olá, hoje você aprenderá noções básicas de HTML. Então, primeiro, você aprenderá o que é HTML e o que é tecnologia. Essa é provavelmente a palavra mais importante que você precisa entender para criar sites. Quando você entender isso corretamente, tudo será fácil. E não se preocupe. Farei tudo o que puder para garantir que você entenda isso corretamente. Ok, então o que é HTML? HTML é realmente uma linguagem de marcação de hipertexto. Então é assim que acontece. Isso é um atalho para essa coisa. E o que significa hiper? Hyper significa que isso é algo incrível, certo? Isso significa que algo está muito bom. Mas como o texto pode ser hiperativo? Isso é muito estranho, porque texto é apenas texto, quando estamos olhando aqui, onde temos palavras aqui, e isso é apenas um texto simples Como isso pode ser hiperativo? Como pode ser um texto super bom? Você pode fazer algo que outros textos podem fazer? Bem, quando temos um livro, e quando vamos ao índice deste livro, quando queremos encontrar a Seção quatro e procurar a resposta lá. Precisamos fazer o quê? Precisamos fazer isso manualmente. Precisamos usar nossas mãos para pular para a seção quatro do livro, porque este é apenas um texto simples. Porém, desta vez, quando estamos vendo o hipertexto, esse é um texto avançado Por ser um HTML, ele permite que você pule usando hiperlinks, certo É por isso que eles são chamados hiperlinks de um texto para outro Estamos acostumados a usar o hipertexto. Olha, quando digitamos aqui Polônia, certo, por exemplo, e aqui temos quais links, os hiperlinks que permitem que você pule de um lugar para outro, e outro lugar, e outro lugar Podemos simplesmente pular aqui quantas vezes você quiser, e fazemos isso rápido. Isso é muito legal. Estamos acostumados com isso. Mas, ei, o texto normalmente, quando olhamos livros, não fazemos coisas assim, certo? Então, sim, isso é um hipertexto. É por isso que você tem aqui um hiper dentro desse atalho, ok Este é um texto realmente avançado que permite que você faça coisas muito legais sobre as quais, é claro, aprenderemos. Então, o que significa marcação de linguagem? Isso significa que ele precisa ser marcado, então ele precisa ser marcado. Portanto, ele precisa ser corrigido. Tuck realmente significa marcação, porque permite que você marque coisas Isso permite que você marque as coisas. Isso permite que você diga como algo deve ser interpretado Quando temos um texto como esse, bem, gostaríamos de fazê-lo funcionar de forma diferente. Por exemplo, ei, temos aqui HTL, e eu gostaria de tê-lo em negrito, certo Eu gostaria de alterar a fonte aqui. Então, como fazer isso, você precisa usar impostos. Você precisa marcar. É por isso que é chamada de linguagem de marcação E como fazer isso. Bem, precisamos usar impostos. Digamos, vamos chamá-lo de parafuso, porque isso vai deixar essa coisa em negrito E vamos adicionar aqui uma coluna como essa, e vamos abri-la no navegador da web. Quando fizermos isso assim, você notará que nada mudou. Por quê? Porque cada tag dentro do HTML deve ter essa aparência. Está bem? O nome da tag deve estar dentro de algo assim. E isso vai funcionar? Não, não vai funcionar. Nada aconteceu. Mas ei, a coisa do Bolt desapareceu porque, no momento, nosso navegador , o Firefox, está tentando interpretar isso, mas ele não sabe o que isso significa Precisamos usar o imposto de algum tipo de referência. E você pode encontrar essa referência, por exemplo, neste site aqui. E, como você pode ver, existem muitas tags. E essa tag que estamos procurando se chama B, que define texto em negrito, e precisamos fazer isso assim. Então, agora, quando atualizamos nossa página, como você pode ver, sim Este texto está em negrito. Mas ei, eu queria colocar em negrito apenas essa parte do texto, não tudo. Sim. É por isso que precisamos fechar a etiqueta que abrimos. Ok. Precisamos fechá-lo usando a barra B interna Diz que, ei, essa é a etiqueta de fechamento, essa é a etiqueta de abertura, esse é o começo, esse é o final, e essa coisa aqui é totalmente chamada de Alimento É chamado de Aliment. Agora, isso dirá ao navegador da web que ele precisa interpretar essa parte, o conteúdo. Para ser ousado. E informamos isso usando o tak, usando a linguagem de marcação que aprenderemos em futuras palestras Precisamos aprender como essas tatuagens funcionam. É assim que você cria sites. Usando tatuagens assim No futuro, você aprenderá como criar os hiperlinks que permitirão que você pule de um para outro lugar dentro do texto Você provavelmente já percebeu que as entradas nos espaços em branco, certo, você sabe, os espaços e assim por diante não são interpretadas aqui, certo? Tudo está em uma linha. É por isso que precisamos aprender como, você sabe, fazer com que pareça bom. E você faz com que seja bom usar texto sobre o qual aprenderemos no futuro. Criei algo assim que ajudará você a lembrar esse elemento, então tudo consiste na abordagem inicial do conteúdo e na tática final Existem nomes que você pode encontrar na referência que eu mostrei, como, por exemplo, B, que muda o conteúdo, precisamos finalizar a tag. Caso contrário, se não acabarmos com a etiqueta, vamos aparafusar tudo, o que não é o que queremos Precisamos terminar o que começamos, como na vida real. Claro, isso não funciona sempre. Isso é HTML. Isso é apenas uma linguagem de marcação de hipertexto É uma linguagem em que usamos impostos, para marcar o texto, para torná-lo hiperativo Essa é apenas a lição. Muito obrigado 5. Documento básico de HTML: Olá, meus amigos. Hoje, mostrarei mais algumas tags que permitirão que você crie a estrutura básica para seu HTML f. Todo HTML f deve ser iniciado com uma tag HTML, ok? E essa tag informa ao navegador que ele interpretará a linguagem HTML Mais tarde, você deve criar algo chamado cabeça. Tipo, temos a cabeça nos ombros, certo? Portanto, esse local será usado para armazenar informações adicionais sobre seu site. Como, por exemplo, título. Assim, você pode criar um título para o seu site aqui e colocá-lo entre a tag de abertura e de encerramento. E aqui, você pode, por exemplo , chamá-lo de imagens engraçadas de gatos, assim. E agora podemos abri-lo. Eu salvo o arquivo usando o atalho Cro plus S e, como você pode ver aqui, temos o quê No momento, são os cinco caminhos para o nosso arquivo. Mas quando eu atualizo a página, contro plus r, como você pode ver, imagens engraçadas de corte, sim, agora podemos mudar o título do nosso Isso é muito legal. Então, dentro do calor, colocamos informações como essa. Haverá mais impostos chegando aqui. Falaremos sobre eles mais tarde. Esse é o básico mais importante. Estamos criando algum tipo de modelo que podemos usar para criar sites que você pode copiar. Agora, vamos criar o próximo ato que será chamado de corpo. Como se tivéssemos um corpo em nossa vida real, quando você olha para os humanos , percebe que eles têm algum tipo de conteúdo dentro de seus corpos. Sim, essa é a mesma situação aqui. Nós temos o que, o HTML principal. Do lado interno, temos cabeça e corpo, que têm um conteúdo, certo? Aqui vai o conteúdo do seu site. Agora, quando o atualizamos, como você pode ver, aqui temos as informações Aqui vai o conteúdo do seu site. E você provavelmente está se perguntando por que antes quando fizemos algo assim. Por quê? Ainda há conteúdo aqui quando eu disse que deveríamos criar sites como esse. Essa é uma boa pergunta. E qual é a resposta? Os navegadores da Web são muito inteligentes. Eles podem interpretar quase tudo o que você coloca aqui. Você pode colocar o título no lugar errado assim, e ele ainda estará aqui. Vamos mudar isso. Você pode ver. Tudo funciona bem. Então, por que se preocupar em fazer isso assim? Em primeiro lugar, vamos ser uma boa pessoa para outro codificador de arquivo HTML Nós apenas presumimos que, quando olharmos a etiqueta principal, encontraremos informações aqui sobre o site. Imagine que seu código seja muito longo, assim. E algumas pessoas colocavam título aqui e algumas pessoas colocavam, eu sei, como aqui. Em algum lugar no meio. Isso seria horrível para nós, certo? Se as coisas estivessem em lugares estranhos e diferentes. Então isso é algum tipo de padrão, ok? Então, vamos fazer isso dessa maneira. Mas se você ainda acha que isso não é suficiente para você, imagine por um segundo, então há algum tipo de robô no Google, e eles estão pesquisando na Internet e analisando a Internet. E eles estão analisando sites como você cria. E se você fizer coisas estranhas em seu site, como colocar o título em um lugar estranho, e cometer muitos erros como esse , eles podem te dar algum tipo de desvantagem na classificação . Está bem? Você está criando sites para torná-los visíveis e garantir que você tenha clientes para fazer com que as pessoas assistam ao seu conteúdo, certo? Então você provavelmente não quer que poucas pessoas acessem seu site, certo? Então, esse é um bom motivo para criar um conteúdo que também fique bem atrás da tela, certo? Você não precisa se importar apenas com o que está aqui, mas também com o que está nos bastidores. Então, sim, você pode colocá-lo aqui. Isso funciona bem. Mas agora isso é melhor quando você faz assim. Além disso, existem novos navegadores da web que, você sabe, podem interpretar coisas assim. Alguns mais velhos não farão isso corretamente. Você também encontrará scripts no futuro. Você aprenderá a criar scripts e eles analisarão seu código acessando o texto. Este é um tópico bastante avançado, mas lembre-se de criar conteúdo como ele deveria ser criado. Dentro da cabeça, colocamos texto como título, dentro do corpo, colocamos conteúdo. Assim, podemos, por exemplo , colocar o conteúdo aqui, assim Bam, como você pode ver, aqui vai o conteúdo dos seus sites. Há mais uma coisa que você deve se lembrar sobre os padrões. Você poderia criar seu arquivo HTML dessa forma, ok? Então comece com a letra maiúscula. Vai funcionar bem. Você poderia, eu sei, mudar para curtir. Ainda funciona bem, embora não o tenhamos fechado da mesma forma. Assim, você pode fazer muitas coisas bem estranhas em seu código. Por favor, não faça isso. Está bem? Você pode, mas não comece nunca, eu sei o título da letra maiúscula Talvez isso pareça bom para você, mas o padrão é começar tudo do estojo pequeno, ok? Portanto, não use letras maiúsculas dentro dos nomes das tags. Também é bom saber que tudo o que você coloca aqui no título é mostrado aqui, e isso é muito importante o que você coloca aqui, porque se você colocar aqui, não sei, algo como a primeira página da web, isso não é útil para você e não é útil para o usuário. E também não será útil para os robôs que estão analisando a Internet. Então, quando o Google Robot encontra seu site e vê a primeira página da web, ele fica tipo, do que se trata essa página da web? Ele tentará analisar o conteúdo aqui. Mas quando ele ver o título com essa aparência, ele não terá 100% de certeza e não dará pontos às coisas que você colocar aqui. Se você tem uma página sobre gatos, é uma boa ideia colocar aqui gatos. Se você tem um site sobre bicicletas, coloque a bicicleta aqui Não sei se repete que gatos. Gatos, gatos, gatos, gatos. Isso não é bom porque então o Robot dirá: “ Ok, ele está repetindo isso Acho que ele pode estar trapaceando. Esse cara simplesmente não é legal. Então, vamos bani-lo. Vamos colocar aqui uma palavra, talvez duas vezes a palavra que descreve sua página da web corretamente. O conteúdo realmente deveria estar aqui, e isso vai melhorar sua classificação no Google. Isso está tudo na aula. Obrigada. 6. Etiquetas estranhas e embrulho de texto existente de forma rápida com tags usando o EMMET: Olá, meu amigo. Hoje, você aprenderá a nova etiqueta, a etiqueta ocular. Você também aprenderá como fechar seu imposto aninhado, qual é o nosso imposto aninhado com nossos elementos aninhados Além disso, você aprenderá um atalho muito, muito importante que permitirá que você envolva para inserir a tag no texto que já foi escrito Isso economizará muito tempo. A etiqueta ocular é assim. Então, estamos abrindo o suporte de fechamento e notamos que temos aqui a aderência fechada automaticamente O de encerramento é adicionado automaticamente pelo editor. E quando eu colocar o conteúdo aqui, conteúdo tão inclinado, você notará que o conteúdo está aqui. Está realmente inclinado Então isso é realmente um atalho para a palavra em itálico, ok? Então, ele cria palavras inclinadas, texto inclinado, certo? E é assim que funciona. Mas a questão é: posso colocar a tag inclinada ou a tag em negrito no texto que já existe, certo? Por exemplo, lembre-se aqui. Eu quero deixá-lo em negrito. Como fazer isso rápido? Bem, poderíamos, você sabe, digitar A, depois a tag de fechamento, e você pode ver que agora essa tag que foi adicionada aqui não é boa para nós, porque bem, nós a queremos aqui, certo? Queremos copiá-lo, então precisamos, você sabe, recortá-lo contra mais X. E colá-lo aqui Isso leva tempo, Counter plus z, podemos voltar a isso. Bem, podemos fazer isso também dessa maneira. Podemos colocar B, depois contador mais Z e depois digitar aqui. Isso é um pouco mais rápido, certo? Como você pode ver quando digitamos apenas o ataque de abertura e o colchete de abertura e depois a barra Isso será fechado automaticamente. O que é bom, mas ainda está lento. Seria melhor se pudéssemos alguma forma, envolver o elemento, o texto que já existe em nosso site, com esse t, certo? Existe um atalho para isso? Bem, sim, o bom é que há um atalho dentro do código do Visual Studio usando algo chamado ET. Aprenderemos sobre atalhos de ET durante as palestras porque acho que se eu usar todos os atalhos em uma palestra, você nunca se lembrará Precisa ver a importância de usá-los, certo? Então, vamos selecionar essa palavra aqui e usar o atalho Control plus Shift plus P. E, como você pode ver, aqui estão muitos atalhos que você pode usar E quando digitamos o envoltório com a abreviatura, como você pode ver, ele foi usado recentemente por mim e eu clico Estamos usando o botão esquerdo do mouse no botão de massa ou clicando no botão er. Você pode ver que agora está aguardando a abreviatura. Agora, quando digitamos o que digitamos, como você pode ver, será o que será a tag de abertura e fechamento instantaneamente no texto que selecionamos, certo? Isso é muito legal porque agora podemos colocar B aqui, e isso vai ficar em negrito Não preciso remover a tag de fechamento e copiá-la aqui ou colocá-la aqui. Isso só leva muito tempo. Podemos usar atalhos Isso é muito legal. Insira o final. O trabalho está concluído. Portanto, essa é uma maneira muito boa e muito fácil de incluir seu texto no imposto. A questão é: podemos torná-lo ainda mais rápido? Contra plus z, vamos voltar ao contra plus plus P. Como você pode ver, aqui está algum tipo de equipamento aqui. Você pode clicar nele e configurar as combinações de teclas. Ao clicar aqui e adicionar a associação de teclas, você pode pressionar a combinação de teclas desejada e, em seguida, pressionar enter para fazer com que a nova encadernação para essa combinação seja esfregada com a abreviatura Portanto, não precisaremos usar o atalho contro plus sheaf plus P e depois encontrar Só precisamos, por exemplo, digitar contro plus sheaf plus E. Por que eu me preocupei usar o controle mais eixo mais A mais E Porque bem, observe que muitos atalhos já estão sendo usados Por exemplo, contro plus A é usado por dois comentários existentes. Você pode ver por quê, selecionar tudo. Seria estúpido remover um atalho como esse dos atalhos Então, é melhor usar algo que não tenha sido usado, como, por exemplo, isso. Agora, quando um clique entra, podemos fazer isso um pouco mais rápido. Cro mais Shift plus, e depois B. Ba, isso é muito legal, certo? E agora vamos falar sobre o imposto aninhado. Observe que, digamos esse texto esteja inclinado e, ao mesmo tempo, em negrito Então, eu quero deixá-lo em negrito e ao mesmo tempo. Então, quando digitamos B dessa forma, e aqui, como você pode ver, isso vai ficar em negrito Isso está em negrito. Texto. Agora, quando eu quiser adicionar itálico Observe que quando eu faço o Counter Plus, onde devo colocar o olho aqui? Devo colocá-lo aqui? Como você pode ver, até mesmo o editor está dizendo que algo está errado. Ele está tentando fechar a tachinha corporal aqui, em itálico. Como essa é a placa errada, você deve sempre se lembrar da ordem em que o imposto deve ser fechado. Fechamos a tachinha mais externa . O último. Observe que a última dobra é ou a primeira dobra aqui é B, e a última é I, e devemos alterá-la, certo, essas duas B. Essa é a ordem que você deve usar Então, quando você fecha o, ao abrir o teta, você deve fechá-lo primeiro, certo? Se esta é a dobra interna, é uma dobra externa como esta, ela deve ser fechada como a última dobra, e você pode estar se perguntando por que eu não usei Bem, porque precisamos saber um pouco mais sobre atalhos sobre MD para fazer duas tags usando o atalho que aprendemos Então, exemplo de texto, vamos fazer algo assim. Selecione-o, contro plus shift plus plus E, e ele está aguardando a abreviatura Observe que quando eu digito B, depois I e depois B, bem, nada acontece de bom para nós. Queremos ter duas etiquetas, a taxa aninhada. Como resolver esse problema usando o atalho que conhecemos Precisamos digitar B, e então esse sinal, que é maior que o seno, o colchete angular, e agora digitamos I. Como você pode ver, diz que B é a etiqueta externa, I, é a etiqueta interna Bem, poderíamos, você sabe, fazer mais disso, certo? Mas esse é o resultado que estamos procurando. Queremos que o texto esteja em negrito e também em itálico. Perceba como é rápido fazer coisas assim, certo? Nós apenas fazemos B, I, e isso é tudo. Agora, vamos fazer isso de novo manualmente. Contador B mais B. Eu abaixo. Mmm. Ok, e agora novamente, com o atalho. Texto de amostra. Vamos selecionar e essa colisão. Isso é muito legal, certo? Portanto, esse é o atalho que eu recomendo usar. Agora você sabe quais são os novos avisos fiscais que já os usamos, como aqui, por exemplo, temos o título principal e interno E isso não parecia, sabe, difícil de entender quando você deveria fechar qual deles você deveria fechar primeiro porque usamos o enter aqui, certo? Observe que também podemos fazer isso aqui. E agora, se fizéssemos assim, isso pareceria, sabe, estranho, certo? Portanto, às vezes é uma boa ideia adicionar indentações dentro do seu código para facilitar a leitura, certo E observe também que, quando você adiciona recuos, esse editor é bem legal porque podemos dobrar e desdobrar Assim. Então, por que isso é útil? Bem, imagine que temos aqui a tag principal, e digamos que temos muitas tags aqui em relação ao cabeçalho do nosso site. Por isso, lembro a você essas informações adicionais sobre seu site. E, para ser honesto, quando você escrever, isso não será mais necessário para você. E você só... E isso está dobrado, certo? E você não precisa ver isso toda vez. Então, isso é muito legal, certo? Você pode simplesmente tornar seu código mais fácil de ler. Você pode facilitar o salto de um lugar para outro porque não precisa ler coisas que não são necessárias no momento. Ok, isso está nessa aula. Muito obrigado 7. Criando parágrafos<p>|</p>: Olá, meu amigo. Observe que, ao ler esse texto, o texto está alinhado. Mas quando você olha aqui, definitivamente não é, certo? Usamos entradas aqui. Então, usamos algum tipo de chave que deve quebrar as linhas, certo? Mas isso não aconteceu. Por quê? Porque o HTML não interpreta algo que é chamado de caracteres brancos. Caracteres brancos são coisas como inserir tabulador. Então, quando você clica em Tap, isso é tabulador, como por exemplo, aqui, certo? E também, espaço, mas não espaço como o único aqui. Fique bem, você precisa, de alguma forma, ser capaz de usar espaço sem ter que colocar algo estranho aqui, certo no espaço único, porque isso geralmente é novo. Então, espaço mais de um após o outro. Está bem? Então, quando você tem algo assim, todos esses espaços, exceto um, serão removidos. Observe que aqui temos nosso texto de exemplo, texto de amostra. E bem, simplesmente não há espaço aqui, assim. Há apenas um único espaço, não tantos espaços. Está bem? Então, esses são caracteres brancos e não são interpretados pelo HTML, certo? Bem, pelo navegador da web que interpreta o HTML de forma precisa E bem, como podemos quebrar as linhas? Podemos quebrar as linhas usando algo que é chamado de parágrafos, certo? Eles são usados para criar seções, certo? E a tag que cria parágrafos é chamada P. De ela significa parágrafo E bem, podemos colocá-lo aqui. Por exemplo, vamos ver isso aqui. Como você pode ver, colocamos o parágrafo e, sim, ele funciona bem. Chegamos aqui agora à quebra de linha. Esta linha está aqui e o conteúdo que vem depois dessa abordagem, então todo esse conteúdo está logo abaixo dela Também há algum tipo de margem entre isso e o resto do conteúdo do nosso lado quando adicionamos o ta. Vamos adicioná-lo a outras partes do nosso código k. Vamos, por exemplo, fazer isso nessa coisa. Precisamos selecioná-lo ou podemos usar o atalho. Há um atalho que você pode pular do local onde colocou essa coisa piscando e usar o Shift mais n, você pode então selecionar o código inteiro aqui, e então você pode usar qual controle mais shift mais P, e usar o MED rub com abreviatura ou usar o atalho que você programou abreviatura ou usar o atalho que você programou o atalho O que colocou o P. Agora, quando atualizamos, como você pode ver, a mesma coisa aconteceu com isso Agora temos a margem de baixo para baixo aqui, e agora parece melhor, certo? É por isso que usamos parágrafos para poder quebrar as linhas e torná-las um pouco mais fáceis de ler Vamos agora colocar o parágrafo também aqui. Eu sugiro colocar todo o texto de amostra em um parágrafo. Você também pode fazer isso. Acho que essa coisa também deveria ser assim e assim. Sem atualização. Como você pode ver, esse texto é um pouco mais fácil de ler. 8. Void e quebrando a linha<br />: Olá, meu amigo. Dia. Vamos falar sobre algo, que é chamado de imposto nulo Está bem? O que é vazio Vazio é apenas vazio, certo? Isso significa que a tag não tem final. Então, sim, essa é uma tag que tem abertura, mas não tem fim. E há muitas etiquetas como essa, mas aprendemos apenas uma nesta palestra, e falaremos sobre uma etiqueta chamada cerveja que significa pausa Como o nome sugere, isso quebra a linha, ok? E simplesmente não faz mais nada, ok? Isso simplesmente quebra a linha. É por isso que não precisamos fazer algo assim. Pausa de descanso, certo? Porque bem, simplesmente não há conteúdo para ser colocado aqui, certo? É por isso que vamos escrevê-lo assim. Este é apenas um baralho vazio que não tem final, ok? E ao usá-lo, você adicionará a linha de freio. Como quando você usa o parágrafo. Mas quando você usa o parágrafo, observe que também há uma margem entre um texto e outro. Certo? Às vezes você não quer um comportamento como esse. Então, vamos imaginar que temos sua amostra de texto de amostra de texto de amostra. Digamos que queremos ter um intervalo entre cada uma dessas linhas, certo? Então, vamos fazer algo assim. E agora, bem, desde o final, não precisamos adicionar porque há um parágrafo que você pode ver, acabamos de quebrar a linha. E só um, certo? Linha, e não adicionamos a margem. É assim que a linha de freio funciona. Você pode saber, adicione quantas linhas de freio quiser, como você pode ver, isso só quebrará as coisas, quantas vezes digitarmos o BR Você verá no futuro que algumas pessoas escrevem o imposto nulo usando algo como a barra aqui no final, ok E por que isso acontece? Porque sugere que essa tag não tem final. Mas há uma quantidade tão pequena de etiquetas vazias que você aprenderá no futuro que acho que simplesmente não parece boa Olha, o código como esse acima seria maior, certo? Não é tão fácil de ler. Na minha opinião, não devemos simplesmente usá-lo. Em algo que é chamado de HTML, havia a obrigatoriedade de usar algo assim, certo? Era necessário apenas informar ao irmão que há um encerramento. Esse é o ataque que não tem fim, ok? Mas como estamos usando a versão mais recente do HTML, essa é a mais antiga. Só podemos escrever BR e não precisamos adicionar aqui a barra Estou falando sobre a barra aqui apenas porque, bem, quando você olha o código que será escrito por outra pessoa, bem, é uma boa ideia entendê-lo, certo? Você ficaria surpreso. Ei, por que esse cara adicionou aqui a barra Agora, você sabe, ele o adicionou porque, bem, ele provavelmente está tentando atender a alguns requisitos adicionais adicionados pelo HTM Mas não é necessário agora, então acho que vamos colocar assim. Então BR, novo TA que simplesmente quebra a linha. Ele não adiciona a margem como no parágrafo. Essa é apenas a lição. Muito obrigado 9. O que são atributos? [título] e [lang]: Olá, meu amigo. Hoje, você aprenderá o que é um atributo em HTML? Você aprenderá o atributo chamado idioma do título e aprenderá um atalho que adiciona um atributo com a ajuda de algo chamado met Isso acelerará a maneira como você codifica seu HTML. Então, vamos começar pelo atributo. O que é isso? Imagine uma pessoa, uma pessoa em um jogo, então algum tipo de personagem. E esse personagem tem algum tipo de vitalidade, reflexo, inteligência, Isso é um jogo de atribuição. Então, qual atributo descreve? Ele descreve informações adicionais sobre o personagem. E a mesma coisa acontece aqui. Se você quiser adicionar informações adicionais sobre o arquivo HTML como este. Por exemplo, queremos informar ao navegador que tipo de linguagem estamos usando. Vamos usar o atributo, que é chamado de linguagem. Não digitamos linguagem, mas o atributo é chamado ang. É um atalho, então digitamos lang. E então precisamos digitar o sinal de igual, aspas, e então colocar dentro do valor que representa a linguagem que estamos usando do nosso lado. No nosso caso, é o que, é inglês, então vamos digitar E n. Então esse é o nome do atributo, o sinal de igual, as aspas e o valor. É assim que você cria atributos que são informações adicionais sobre a tática. O mesmo que no personagem dos jogos de computador. Então a questão é: de onde vem o atributo? Ok. Vamos excluí-lo e usar o controle de atalho mais o espaço E, como você pode ver, temos muitos deles. A questão é: você precisa conhecer todos eles? Não, existem alguns que são negativos e você precisa aprender principalmente eles Às vezes, você precisará alguns atributos raros que estão aqui, mas não precisa, você sabe, aprendê-los de cor. Não se preocupe Isso não é algo que você precisará aprender e lembrar de tudo de cor. Isso seria difícil, e eu não acho que seja totalmente editado. Então não se preocupe, ok? Vamos aprender o mais importante, e isso é totalmente suficiente para, você sabe, codificar em HTML. Então, vamos voltar à linguagem. E, como você pode ver, agora podemos colocar seu valor. A questão é: que tipo de valor devemos colocar aqui? É esse valor certo? Bem, não, os valores do idioma estão na referência do código do idioma HTL, você precisa digitar algo assim no Google e digitar os códigos do idioma, e você encontrará os códigos correspondentes para o idioma sobre o qual está criando seu site Então, por exemplo, digamos que polonês é P. Esse é o idioma que eu vou usar. Mas para o inglês, como você pode ver, é E N. Além disso, se você for do francês, F R e assim por diante. Então esse é o valor que vamos usar. Mas vamos aprender sobre o próximo atributo chamado título. Título. Digamos que queremos colocar o título aqui. Arcadis dat está casada desde quando. O título é um atributo que vai criar algum tipo de dica de ferramenta com o valor que vamos colocar no atributo title Vamos agrupar o mérito com algum tipo de tag como, por exemplo, B. E agora podemos colocar aqui o título do atributo, que é o nome do atributo, e o valor, nesse caso, é o que quisermos Nesse caso, queremos colocar desde quando me casei, por exemplo. Como é muito importante saber isso, pelo menos para as mulheres, espero não ter cometido um erro. Vamos aqui. Como você pode ver, quando atualizamos nossa página e passamos o mouse sobre o texto aqui Temos a dica de ferramenta desde 2017. Essa é a época em que me casei. E é assim que funciona. Você fornece informações adicionais para a dica de ferramenta. Título, na verdade, acho que seria um nome melhor, mas eles chamam o título, e isso fornece informações adicionais sobre a tática, como, por exemplo, B e o texto dentro dela Nesse caso, ele cria uma dica de ferramenta. Esse é o próximo atributo que você aprendeu. Agora, aprenderemos um atalho que adiciona um atributo com a ajuda do MET Isso é muito legal. Olha, quando você tem ET, podemos realmente fazer algo assim. Por exemplo, P, e então podemos usar o colchete e digitar o nome do atributo Então, quando pressionamos Enter, como você pode ver, temos o nome do atributo dentro. A etiqueta de abertura. Podemos colocar o valor aqui. Bem, podemos colocar o valor aqui também, como, por exemplo, desde 2017, mas como você pode ver, isso não é bom. Precisamos usar o esquema de cotação e, para ser honesto, controlar o espaço. Como você pode ver, leva algum tempo. Eu prefiro colocar o valor manualmente mais tarde. Então, use colchetes para colocar o atributo dentro da tag de abertura Mas há momentos em que você pode até mesmo melhorá-lo. Você pode ver que pode multiplicar quantas vezes você quer ver a tag repeti-la Portanto, essa é a versão mais fácil, mas você também pode colocar o nome do atributo e repetir algo várias vezes. Isso está fazendo com que você codifique mais rápido. Mas não é como se você precisasse, você deve se lembrar de todos esses atalhos É bom conhecê-los, mas você pode programar manualmente, nada acontecerá. São coisas bem avançadas que estou mostrando aqui agora. Isso só vai acelerar seu trabalho. Mas se você está feliz em se divertir com HTM, não se preocupe com os atalhos que estou mostrando Tornando as coisas mais rápidas, mas não é como algo que é necessário. Você pode simplesmente digitar tudo manualmente. Mas é legal poder embrulhar as coisas mais rápido. Você pode simplesmente clicar duas vezes nele, depois usar o atalho com o MSO Control mais C mais B e você pode usar o wrap com abreviatura de que falei, você pode continuar vinculando-o, e então você pode simplesmente digitar B, o título, e você pode simplesmente digitar o título, e você pode Isso é um pouco mais rápido do que fazer isso manualmente. Mas não é como se você pudesse fazer isso, certo? Você pode tocar em algo neste título. Então, é tipo um, 2 segundos mais rápido, mas o tempo é precioso. Então, isso realmente depende de você. Você aprende o que é atributo. Essas são informações adicionais que você adiciona ao imposto. Essa é apenas a lição. 10. Etiqueta neutra<span></span>: Olá, meu amigo. Hoje, você aprenderá sobre o ataque chamado span, ok? E o que isso faz? Bem, isso não faz nada. A questão é: quando seria um momento em que você deseja criar um ataque que não faça nada. Bem, observe isso quando queríamos adicionar o título do atributo, que mostra uma dica de ferramenta com o valor desde 2017. Bem, tivemos que adicionar uma tag B, por exemplo, ou precisaríamos usar aqui outra tag que aprendemos, por exemplo, A, certo? Ou muitas outras tags que estão no HTML, mas a maioria das tags em HTML faz alguma coisa com o conteúdo. Por exemplo, o mérito do conteúdo estava em negrito. E isso não é algo que você sempre quer ter. Por exemplo, aqui, você não quer colocá-lo em negrito. Queremos fazer com que seja apenas um texto simples, mas ainda queremos adicionar um atributo. E esse é o momento em que você usa uma tática chamada span Como você pode ver, não alteramos nada no texto, mas quando movemos o mouse sobre o texto, ainda temos a dica de ferramenta Então, sim, esse é o momento em que você usa o intervalo. Isso é algo que simplesmente não faz nada. Então, para ser honesto, amplitude é apenas um tacômetro neutro Ele simplesmente não faz nada, mas oferece a oportunidade adicionar atributos como aqui, sem estilizar, sem, por exemplo, colocar o conteúdo em negrito Isso está tudo nessa lição. Obrigada. 11. Instalando extensões no VSC: AutoRenameTag: Olá. Hoje, você aprenderá a instalar extensões dentro do código do Visual Studio, com base no problema que aconteceu na última aula Observe que leva tempo para transformar o spam em. Tivemos que mudá-lo em dois lugares, certo? E o tempo é precioso, como sempre digo. Então, existe uma extensão que poderia fazer isso por nós? Bem, poderíamos procurá-lo. Observe que aqui temos algo como o botão que tem uma dica de extensão embaixo dele Ao clicar nele, você pode pesquisar extensões e instalá-las. Você pode procurar uma extensão para HTML. Como você pode ver, existem muitos deles. Bem, você pode instalá-los se quiser. Você pode conferir, se divertir com eles, ler sobre eles, o que eles fazem e assim por diante. Mas não se concentre nisso agora, porque você precisa primeiro aprender HTML e saber o que pode ser útil para você. Eu vou te mostrar quais são úteis para você quando chegar a hora. Como agora, queremos que a tag como aqui, seja alterada automaticamente quando eu a mudei aqui, quero que ela seja alterada aqui, certo? Então, como poderia ser chamado? Talvez vamos digitar Auto O aqui. Renomear tag automaticamente. Sim, queremos renomear automaticamente a tag. Vamos instalá-lo. E vamos esperar um segundo. Está instalado. Como você pode ver, aqui você pode ver Até alguém mostrou o que acontece quando você o usa. Olha, ele está digitando aqui, também está digitando Agora, quando queremos mudar o intervalo para, ei, é V para a Itália. Ei, é itálico. Talvez até o fim novamente. É Span novamente. Isso é muito legal, não é? Portanto, as extensões são muito úteis, mas você precisa saber o que está procurando. Você sabe como instalar extensões agora mesmo. Você sabe que pode ler sobre eles aqui. E bem, você sabe como usá-los, certo? Você acabou de instalar e eles são instalados, o que é muito fácil. E como você pode ver, instalamos algo. Isso é muito útil, certo? Não queremos usar a tática p aqui, queremos alterá-la para algo novo que aprenderemos no futuro, por exemplo, Seção Ou, todos vocês farão isso bem rápido Isso está na aula. Muito obrigado. 12. Atributo de estilo — Como mudar a cor de fundo? — LECTURA IMPORTANTE: Olá, meu amigo. A aula de hoje é muito importante. Por que isso é assim? Porque você aprende sobre o atributo chamado estilo. É um atributo muito importante que você verá muito no futuro. Além disso, você aprenderá como alterar o plano de fundo da sua página. E você aprende sobre o atributo Big cool, que está obsoleto, e aprende o que significa Então, onde você acha que pode fornecer informações adicionais sobre o plano de fundo de nossa página? Onde está um atributo como esse. Está dentro da etiqueta corporal, certo? Fique bem, corpo é corpo do nosso site, e você também pode colocar aqui e alterar a cor de fundo. Então, quando usamos o espaço Cro plus, como você pode ver, você pode escolher o atributo de cor BG, que significa cor de fundo. Ao mover o mouse aqui, você pode ver a cor de fundo do documento. Mas também há mais informações aqui. Esse método não está em conformidade. use a propriedade de cor de fundo CSS vez disso, use a propriedade de cor de fundo CSS no elemento. Porque, bem, isso está obsoleto, o que significa que o atributo não é mais usado Então, por que estou te mostrando isso? Devemos apenas aprender coisas novas, certo? Bem, isso é verdade. Mas sempre há algo ruim. É bom saber que existem atributos como esses. É bom saber que existem tags como essa. E quando você os ver no futuro, entenderá como eles funcionam porque, bem, podemos aprender as novas formas, mas isso não significa que outras pessoas ainda usem as formas antigas, isso simplesmente não vai acontecer que todo mundo pare de usar a cor BG repentinamente, por exemplo, certo? Portanto, é bom saber que eles existem. Observe também que até a cor aqui é vermelha. Então você pode ver bem rápido o que não é mais usado. Portanto, isso está obsoleto. Mas bem, você pode mudar a cor do BG muito cedo, então algo como, por exemplo, vermelho, ou você pode mudá-la para laranja. Portanto, você pode usar as palavras coloridas simples aqui e alterar a cor de fundo desta forma. Muito fácil e direto, certo. Mas há uma nova maneira de alterar o plano de fundo da página, e vamos usá-la agora , chamada de atributo de estilo. E quando você usa as aspas aqui, uau, você pode fazer muito mais coisas do que apenas mudar a cor do fundo E falaremos sobre essas outras propriedades aqui em futuras palestras, mas ainda não nos sentimos sobrecarregados no momento Eu sei que você acabou de ver muitas propriedades aqui, e você pode estar pensando, não, não, não, não, isso não é para mim. Não vou me lembrar de tudo isso. Não se preocupe Você precisará se lembrar apenas das propriedades mais usadas no futuro. Você aprenderá sobre eles. E todos os outros. Bem, você pode encontrá-los bem rápido. Olha, você pode digitar no Google, como mudar a cor de fundo em HTML. Bam. E, como você pode ver, você pode usar a propriedade CSS Background Color, que usamos agora. Isso é bem rápido, certo? Você pode simplesmente digitar no Google, como fazer, e você descobrirá como fazer isso. Então não se preocupe. Você não precisa se lembrar de tudo de cor. Ok, ok? Você se acostumará com as propriedades que usa com mais frequência. Então, como você pode ver, quando eu clico no Enter aqui, vamos voltar aqui, Cor de fundo, eu pressiono Enter. Eu adicionei os dois pontos aqui e o ponto e vírgula, porque esse é o lugar onde colocamos o valor da cor de fundo Para essa propriedade específica que muda a cor do nosso site. E quando eu uso o espaço Control plus, como você pode ver, agora temos muitas cores que você pode usar aqui, certo? Como, por exemplo, o Aqua. Agora, quando voltamos aqui, como você pode ver, mudamos para Aqua Você pode usar qualquer cor dessa lista. Mas também não é só isso, observe que temos a cor aqui. Isso é legal porque você pode ver instantaneamente qual é a cor ao lado do nome. Mas observe também que quando eu movo o mouse para cá, temos um seletor de cores Isso é legal. Podemos nos mover tipo, vamos embora, talvez esverdeados, talvez façamos algo assim. E clique em enter. Bem, eu não precisei clicar em nada. Eu apenas movo o mouse para não aqui, aqui, por exemplo. Como você pode ver, eu posso mudar de cor. Mas você notará que nossa cor mudou para algo estranho, que se chama G B, vermelho, verde, azul, ok? Você pode misturar vermelho com verde e azul. E dependendo da quantidade de vermelhidão ou verde ou azul, você pode criar cores. Você pode colocar, por exemplo, um aqui, como você pode ver, agora não há muito vermelho. Agora vamos colocar um em azul e, como você pode ver, essa coisa vai ficar mais verde Esse é o valor máximo que você pode ver agora, é bem verde. Quando colocamos aqui um, é preto. Quando colocarmos aqui 255, vai ser vermelho, vermelho, com 25, vai ser vermelho, mas não tanto, certo? Por exemplo, 19, como você pode ver, estamos chegando à cor vermelha bem rápido. Mas, para ser sincero, por que se preocupar em aprender tudo isso quando podemos simplesmente usar o seletor de cores Isso é muito legal. Mas isso está dentro do estúdio visual. Você está usando um editor diferente, não se preocupe, não se preocupe. Totalmente, não se preocupe, pois você pode encontrar seletores de cores no Google, digitar Color Picker HTML e encontrará um bem rápido Então é assim que você muda as cores. Usando o vermelho, verde, azul. Mas é bom saber que quando você, por exemplo, usa nomes legais em HTML, haverá um site como esse. Como você pode ver, cada nome como esse tem uma coisa estranha correspondente como essa. O que é isso? Bem, vamos usar a cor chocolate. Assim, desta vez. Como você pode ver, temos a cor chocolate. Se digitarmos chocolate , também será o mesmo. Essa coisa se chama X. E, para ser honesto, é a mesma coisa que vermelho, verde e azul, esse d dois quando você muda, vamos digitar hexadecimal para Como você pode ver, vamos digitar d dois, e é 210. Se tivéssemos vermelho, verde, azul , assim, seria 210. Em seguida, precisaremos traduzir a próxima parte, que é 69, 69, que é 105. E então faremos o mesmo com um A. Isso é apenas x, e essa é apenas uma maneira diferente de representar, como você pode ver, eu me referi às mesmas coisas. Aqui, quando você usa o conversor de cores de forma um pouco mais rápida. Eu só queria te mostrar como funciona. Vamos copiar isso aqui, como você pode ver, é 20010530 O mesmo que temos aqui. Então, isso é apenas uma representação diferente. É feitiço É chamada de representação hexadecimal de vermelho, verde, azul. Maneira de mudar as cores. Então você pode mudar a cor usando o RGB, você pode mudar a cor usando o X ou, por exemplo, HSL, isso realmente depende do que você quer fazer Não é a diferença, para ser sincero, eu prefiro essa coisa porque é a mais curta e ocupa menos espaço Então eu prefiro usar isso do X. Está bem? No entanto, essas são todas as duas cores? Bem, poderíamos interromper esta palestra porque aprendemos como mudar a cor de fundo Sabemos que a cor PG é duplicada, o que significa que ela não é mais usada, mas funciona Mas pode parar de funcionar, então é bom mudar para coisas que funcionarão no futuro. Sabemos que o atributo stall tem muitas propriedades que você precisa lembrar No entanto, como escolhemos as cores? São todas as duas cores? Bem, como você pode ver aqui no lado esquerdo, você pode ler muitas coisas sobre cores. Eu recomendo lê-los. Mas a coisa mais importante a partir disso, eu acho, são as rodas de cores. Observe que temos uma roda de cores RGB aqui, e isso parece nojento Mas quando você se muda para cá, isso parece incrível, certo? Isso será usado por pintores, artistas e designers. Por quê? Porque isso parece incrível. E essas são cores que se misturam muito bem, ok? E essas são as cores que você deve usar. E o legal aqui são os esquemas de cores dos looks. Quando clico nele, vou para, por exemplo, gritos coloridos monocromáticos Agora, podemos escolher o tema da cor para todo o nosso site, podemos ver como ficaria em lugares diferentes, assim, podemos nos mover e podemos torná-lo um pouco, por exemplo, mais escuro, assim Por exemplo, eu gosto dessa coisa. E agora? Bem, eu escolheria essas cores aqui e copiaria para o meu site, e funcionaria. Se eu quiser, por exemplo, isso em nossa cor de fundo, eu simplesmente copiaria isso aqui. Assim. E ei, isso funciona. Muito legal. Obviamente, no futuro, você aprenderá como alterar a parte da cor do site e assim por diante, então não se preocupe, como mudar a cor do texto e assim por diante. Nesta palestra, você aprendeu como escolher cores para o futuro. Portanto, existem muitos outros esquemas, como, por exemplo, este, como você pode ver, parece um pouco diferente, mas ainda assim parece bom. Você pode fazer com que tenha a aparência desejada e fazer com que as cores se misturem bem. Normalmente, é muito difícil, verdade, mesmo usando o seletor de cores como este Você escolherá uma ou talvez duas cores muito bem, mas se quiser ter mais algumas cores que se misturem bem , é muito difícil. Basta usar o esquema de cores. Você economizará muito tempo e seu site ficará bem legal. Essa é apenas a lição. Muito obrigado 13. Como adicionar imagem em seu site: Olá, meu amigo. Hoje, vou mostrar como adicionar uma foto, uma imagem ao seu site. Primeiro, precisamos usar uma nova tag chamada IMG, ok assim Então IMG significa imagem. Tão fácil de lembrar. OK. Mas observe que não há uma tag final, certo? O mesmo que quando usamos a linha de freio. Portanto, simplesmente não há uma tag final. E bem, você pode fechar a tag da imagem usando a barra, como aqui Essa é a informação de que essa tag está fechada no mesmo local. Mas você não precisa, ok? Isso não é obrigatório. Era necessário. Se você estivesse usando X HTML. Então, se você conhecer alguém que faz algo assim, não se preocupe, vamos trabalhar, certo? Você pode fazer isso, mas nós não precisamos. Então não se preocupe. Não faça isso. E agora há uma coisa importante, como adicionar essa imagem? Bem, se não houver uma tag final, isso significa que tudo conectado à imagem está dentro dessa tag, e nós damos essa informação adicional usando o atributo, certo? Isso é chamado de S RC. Fonte. Significa fonte. Então colocamos aqui a fonte, então colocamos o valor de onde queremos obter a imagem. Bem, onde está nossa imagem? Primeiro, precisamos colocá-lo em nossa pasta. Como você pode ver, temos aqui, por exemplo, aquele que JP G, e podemos colocá-lo aqui. Então, basta movê-lo para os gatos assim, ou você pode simplesmente fazer assim, movê-lo para o nosso editor e movê-lo aqui. E, como você pode ver , agora está aqui. Como você pode ver, podemos abri-lo, você pode olhar para ele. Podemos ver algumas informações sobre a imagem aqui, o tamanho, a largura, a altura e quanto ela ocupa em nosso disco e seu nome. Agora, quando você usa o atalho contro plus space, como você pode ver, ele me sugere que eu possa adicionar o que JP E, para ser honesto, isso é tudo. Como você pode ver, adicionamos uma imagem ao nosso site. É bem grande, mas nós o adicionamos e funciona bem. A questão é tudo. Em primeiro lugar, vamos nos concentrar no nome. Não nomeie suas imagens assim, ok? Isso é uma má ideia. Você deve renomeá-lo para garantir que o nome represente o que está na imagem Esta imagem representa o baixo. O tipo de guitarra é baixo. Acho que devemos apenas renomeá-lo, clicar com o botão direito do mouse, renomear ou o atalho F two, e vamos chamá-lo de baixo Ou o baixo da guitarra, seja o que for. Observe que eu não usei o espaço aqui. Eu não fiz isso assim. Cada palavra, você deve conectar usando o traço aqui desta forma Você não deve usar espaços dentro dos nomes. Além disso, não nomeie seus arquivos dessa forma. Não use letras maiúsculas. Só um estojo pequeno. E bem, é assim que fazemos, certo? Se você apenas nomear, agora é mais autodescritivo . Então, mudamos o nome. E bem, isso não muda nada aqui, mas parece melhor agora não só para nós, mas também para os barcos do Google que, ao olharem o nome, possam, você sabe, ver que trata essa página e o que esse arquivo contém, ok? Talvez os bots possam analisar imagens que são usadas com frequência. Mas uma imagem como essa, bem, é difícil interpretar o que exatamente está aqui. É um baixo. Há algum tipo de vela, será difícil para ele interpretar Mas aqui ele pode pegar esse baixo daqui, e ele sabe disso, isso é um zumbido de guitarra Esta página provavelmente é sobre guitarras. Portanto, é uma boa ideia nomear seus pis assim. Então, agora sabemos como anexar a imagem. A questão é: o que fazemos quando, por exemplo, algo acontece assim. Portanto, a imagem não ficará baixa. Como você pode ver, há algo assim aqui, e poderíamos colocar aqui uma mensagem alternativa. Então A significa mensagem alternativa. Então, a outra mensagem, o que o computador deve fazer quando há algo errado com a fonte. Talvez o servidor tenha caído, algo parecido. Deve digitar aqui o que está representado aqui. Por exemplo, baixo, p. Como você pode ver aqui, agora temos boas informações sobre guitarra de ônibus O problema é que também agora é que essa coisa ocupou algum espaço. Observe que ocupou muito espaço. Se você tivesse uma mensagem aqui, gostaria que ela ainda estivesse aqui. Você não gostaria de destruir a aparência da sua página. E é por isso que você deve sempre especificar a propriedade with, que damos à largura do seu violão. É 680 e a altura é quanto 1024. E como você pode ver, agora, quando fazemos uma flecha aqui, como você pode ver, temos um bom baixo aqui, a descrição, mas há algo que ocupa o lugar da nossa imagem Então, isso especifica a onda e a altura, e também é bom para acelerar o carregamento do seu site porque ele será renderizado, então ele criará o conteúdo do seu site mais rapidamente quando souber o tamanho das imagens do seu lado A aceleração do carregamento do seu site. Você pode mudar, por exemplo, para algo como, não o tamanho que está aqui, como este. Vamos colocar assim. Como você pode ver, funciona bem, mas não parece bom. No entanto, se você remover a pele, observe que ela será proporcional. Mudança, certo? O tamanho é alterado proporcionalmente. Então isso significa que quando você muda a largura, a altura vai de acordo com a largura, certo. Então isso é bem legal, talvez. Você pode estar pensando que pode definir também a altura e isso mudará a largura. Então, parece bom. O problema é que você não deve usar isso. Bem, talvez se você usá-lo uma vez , nada de ruim aconteça. Mas se você o usa com muita frequência , está tornando o carregamento do seu site mais lento Por quê? Como nós, o navegador da web tínhamos que fazer o trabalho por você, tive que alterar o tamanho da sua imagem. Então, leva algum tempo. O próximo passo é observar que essa imagem ocupa cerca de metade do megabyte, 462 Se você tivesse alterado o tamanho aqui, por exemplo, como fizemos aqui, o com para 320. Tem uma largura duas vezes menor, como esta. Então, essa imagem tiraria apenas 250 kilobytes É duas vezes menor. Seu site, nós carregamos mais rápido. Se você precisar alterar o tamanho da imagem, faça isso manualmente, abra-a em algum tipo de editor que edite imagens e faça isso manualmente Não faça isso completamente, pode fazer isso por aqui, mas tente evitá-lo. É melhor simplesmente colocar os valores que estão aqui para acelerar seu site e garantir que tudo esteja bem. Dessa forma, seu site será mais fácil de ler para robôs ou bots do Google, e seu site terá uma classificação mais alta. Isso só para a palestra? Bem, não, podemos inserir imagens mais rapidamente. Note que quando eu abro usando esse sinal de menor e menor que, a tag, quando eu abro assim, eu preciso fazer manualmente o que eu preciso para acessar manualmente todos esses atributos. No entanto, quando eu faço assim. Eu não uso esse sinal aqui e apenas digito IMG. Agora eu clico em Enter. Como você pode ver, ele colocará algo assim aqui, e eu posso colocar a fonte e usar a palavra-chave tab e pular para uma mensagem alternativa como esta. É um pouco mais rápido, não preciso digitar EMG do que a fonte. Depois, basta digitar EMG bam Guitarra Buzz bam buzz guitarra. É mais rápido. Então você aprendeu que, se quiser usar o recurso MET, que é instalado dentro do código do Visual Studio por padrão, basta fazê-lo dessa maneira. Isso também é. Além disso, funciona para outros tipos. Por exemplo, se eu quisesse criar o metatipo sobre o qual falaremos, como você pode ver, podemos, por exemplo, criá-lo com atributos adicionais, e você não precisa pensar em como criar como os atributos são chamados dentro desse como você pode ver, podemos, por exemplo, criá-lo com atributos adicionais, e você não precisa pensar em como criar como os atributos são chamados dentro Basta fazer assim e algo é preenchido pelo editor, o que é gat porque você não precisa se lembrar disso E eu adoro recursos como esse. Porque lembre-se, você é um p, a pessoa criativa que deve criar coisas. Você não deve se lembrar de tudo de cor. Isso não é necessário hoje em dia. Você precisa saber como procurar coisas e como usá-las. Essa é apenas a lição. Muito obrigado. E isso é sempre, lembre-se, se você tiver alguma dúvida, fique à vontade para perguntar. 14. Bônus: Onde obter fotos gratuitas em seu site?: Olá. Hoje, mostrarei como obter fotos gratuitas e totalmente gratuitas em seu site. Você pode usar esse site chamado pexels.com ou pixel.com ou unsplash.com. Vamos usar um desses. Digamos que estamos procurando os CTs. Está bem? Quero ter um site sobre CAT. Então, digamos que queremos encontrar um gato que estará em nosso site. Como você pode ver, essas fotos são lindas, certo? Eles são muito legais. Isso não é realmente trabalho pelo qual normalmente você precisará pagar. Eles são gratuitos. Você pode simplesmente clicar nele, clicar no download gratuito ou mover o mouse aqui, e você pode até mesmo alterar o tamanho da imagem, para que fique um pouco menor. Acho que a versão menor é melhor. Vamos clicar no download gratuito, clique em OK. E, como você pode ver, baixamos o arquivo. Como você também pode ver, o nome desse arquivo não é bom, certo? Porque bem, aqui temos um recorte, e o nome deve sempre representar o que está na foto. A cor desse CD é gengibre. Talvez vamos chamar o arquivo de corte de gengibre. Vamos aqui novamente, e vamos chamá-lo de corte de gengibre. É um nome melhor, definitivamente melhor. Além disso, você deve adicionar um atributo ao anexar a imagem ao seu lado, alternativamente e digitar o corte em gengibre, por exemplo Então, faça isso sozinho agora, porque você precisa se exercitar. Você precisa digitar o código. Você pode simplesmente assistir ao vídeo. Copie para sua pasta. Chaves e basta adicioná-las ao seu site. Eu acho que você deveria praticar um pouco mais e jogar com esses lados. Divirta-se e procure inspiração porque, na verdade, você pode encontrar muitas fotos legais aqui, aqui e aqui, brincar com elas, adicionar algumas ao seu site, que você possa se divertir e saber como fazer isso sem pensar. É como aquela lição. Muito obrigado 15. Como obter tamanho img usando o atalho VSC: Olá. Hoje vou mostrar-lhe como definir a largura e a altura da imagem maneira rápida e fácil. Porque normalmente você precisará abrir a imagem. Você pode fazê-lo um pouco mais rápido, não usando o Explorador de Arquivos usando seu controle e clique com o botão esquerdo do mouse sobre ele. E como você pode ver, a imagem se abriu. E aqui neste canto temos a largura e a metade. O problema desta solução é que precisamos memorizá-la agora, certo? Então, quando eu clicar aqui, eu preciso lembrar a largura é o que eu acho que ver scanner e 80 então eu não me lembro da altura, certo? Preciso clicar de novo aqui, então leva tempo, certo? E não gostamos de coisas que levam tempo. Coloque o cursor dentro da tag de imagem e, em seguida, use o atalho F1 ou gráfico de contorno x3 mais b. E agora aqui você pode digitar atualizar tamanho da imagem ou você pode simplesmente digitar imagem. Como podem ver, só há uma coisa como esta. Quando você clica em Enter, temos boa a largura e altura definida. Isto é muito fixe. E também note que você pode definir a ligação de chave aqui para algo que irá torná-lo ainda mais rápido. No entanto, não o recomendo nesta situação. Por que é assim? Porque situação como esta não é como você faz isso todos os dias, você é então imagem e você esquece sobre a maioria do tempo. Então talvez 23 vezes por página, algo assim. E quando você usa essas coisas ou quando você usa o quê? F1 e, em seguida, digite imagem e quando você clicar em Enter, observe que esta é a primeira coisa. Agora, depois que eu abrir este canto superior direito, ele diz que o usado recentemente, então este é realmente mais rápido usando o nosso direito é apenas F1 enter se você tem outra imagem. Digamos que se pareça com isso. Então F1 entra, F1 entra, É arquivos bonitos, certo? Então não se preocupe em configurá-lo. O atalho não sabia disso. Então, muito obrigado. 16. Como linkar com pastas DIFERENTES? Como criar a teoria DO PATH: Olá, meu amigo. A coisa, o valor que colocamos aqui no atributo source como um valor é chamado de puff Por que é chamado de Puff porque representa uma forma de encontrar o arquivo, certo? Então, para encontrar o arquivo bas gitar do JPE, seu computador precisa procurar onde Bem, na mesma pasta em este documento que estamos escrevendo em algum exemplo, esse HTML está atualmente . Onde está? Está dentro da pasta CATs. Ok, então ele pula daqui para aqui. Está tudo bem porque, bem, a imagem está aparecendo. A questão é: o que precisamos fazer quando há outra pasta? Por exemplo, vamos criar uma nova pasta, mas não a partir daqui, mas usando o código do Visual Studio para aprender como fazer isso. Só precisamos clicar na pasta Nut aqui e vamos chamá-la, por exemplo, de imagens. Porque essa pasta conterá imagens. Certo? Bem, em situações normais, não é uma boa ideia colocar todo tipo de arquivo em apenas uma pasta, certo? Porque, bem, se seu projeto crescer, você simplesmente se perderá. Então, vamos colocar imagens dentro da pasta de imagens. Vamos movê-lo até aqui e clicar em Mover. Ok, agora está bom, mas o problema é que nossas imagens desapareceram. Para acessar as imagens da pasta, precisamos criar um caminho para ela. E para fazer isso, precisamos digitar imagens. Como você pode ver, nosso código do Visual Studio está nos dando uma dica, depois a barra e o nome do arquivo Agora, como você pode ver, recuperamos nossa imagem. Isso não apareceu porque é um caminho escrito incorretamente, mas aqui, tudo está escrito corretamente E isso é bem simples, certo? Só precisamos digitar onde devemos procurar no arquivo aqui. Mas isso não está tudo nesse tópico. Não pare esta palestra porque há situações que são mais difíceis Por exemplo, vamos criar uma nova pasta e chamá-la, por exemplo, de artigos. Digamos que vamos colocar seus artigos. E vamos mover esse arquivo aqui para os artigos, e bem, vamos deletar isso e colocar isso aqui. Então, vamos copiá-lo aqui. E, como você pode ver, vamos abrir os artigos e vamos abri-los com o Firefox. Como você pode ver, simplesmente não há nada aqui. Temos apenas a mensagem alternativa, certo? Então isso não é bom. Por que não está funcionando Porque você precisa se lembrar de que seu computador está procurando o baixo e as imagens onde Quando estamos na pasta de artigos e a amostra de que dois HTML está aqui, ela está procurando por ela aqui, onde o arquivo HTML é representado, onde é criado. Então, precisaremos tê-lo aqui. As imagens devem estar aqui. Mas não está aqui. É uma pasta voltada para cima. Uma vez, precisamos subir. Mas como subimos? E essa é uma boa pergunta. Precisamos usar dois pontos e depois cortar. E isso significa, ei, vamos subir um diretório. Então F vamos fechar isso, e vamos entrar em CATs, e então vamos procurar imagens e, em seguida, vamos olhar dentro da pasta de imagens para esse JP five em particular. E como você pode ver, agora funciona bem. Está bem? Portanto, existem algumas maneiras avançadas de se mover em pastas. Essa é apenas a lição. Muito obrigado 17. Visualizando o código fonte de QUALQUER site. O que são comentários?: Olá, meu amigo, você sabia que pode ver o código de qualquer site? Sim, você pode acessar qualquer site, totalmente qualquer site, e você pode ver o código do site, você pode ir até o Google e ver como ele foi escrito, certo? Mas só a parte visível, ok? No plano de fundo do site. Então, você pode ver a parte HTML. Então, como fazer isso. Use o atalho, o Control plus U. Ok ? E como você pode ver, esse site é realmente um site de scripts, certo? Bem, este site é um site bastante avançado. Mas quando você acessa um site assim, ainda é um pouco difícil. Você pode ver aqui algumas coisas que provavelmente não são compreendidas, mas você pode ver coisas que você sabe sobre, por exemplo, o corpo, a cabeça, você pode aprender com coisas assim. Aprenderemos sobre coisas que você pode ver aqui, a maioria delas. Bem, porque não falaremos , por exemplo, sobre Javascript, código que permite que você altere dinamicamente as coisas do seu lado. Isso é totalmente tópico para outro curso. Eu tenho um curso sobre isso, então você pode encontrá-lo ou aprender esse tópico em outro lugar. Mas bem, você pode ver a fonte. Essa é a coisa mais importante. Quando você vai para o nosso lado, um que escrevemos até agora, quando vamos para a fonte, você pode ver que isso é exatamente o que escrevemos aqui, e podemos copiar e colar aqui e funcionar da mesma forma. Nós codificamos assim. Não, isso não vai acontecer porque, bem, existem algumas referências, como você pode ver, existem scripts que estão no arquivo como este, e você precisará baixar todos os arquivos que estão conectados ao lado se quiser que funcione da mesma forma. Também pode haver algum tipo de linguagem que funcione no lado do servidor do site, como por exemplo, PHP ou talvez o Python, bem, você não tem, certo Então, sinais avançados, você não conseguirá copiá-los. Mas você pode aprender observando como as pessoas estão, por exemplo, usando os DPs que falaremos sobre como elas usam tags, certo? E como ficam essas coisas sobre as quais falaremos também. Essas são as coisas que você pode aprender com o código escrito por outras pessoas. Então, isso é muito legal. Mas a parte mais importante dessa palestra é o que são comentários e quando usá-los. Então, comentários, como o nome sugere, são coisas que permitem que você comente algum tipo de código, por exemplo, então digamos que você queira comentar a imagem, certo? Do que trata a imagem? Então, como fazer isso. Você usa os sinais como este, o sinal inferior, depois o ponto de exclamação e depois d. E, como você pode ver, o fechamento dessa coisa é d e o maior D. E o que quer que você coloque aqui não será interpretado Como você pode ver, quando eu o atualizo, ele não está aqui. E bem, podemos até colocar todas essas coisas aqui sob o comando. Como fazer isso? Bem, você pode usar o atalho que se parece com este, Control plus slash Então, eu apenas salgate, e como você pode ver, agora está sob o comando Qualquer coisa entre isso e isso estará sob o comando. Como você pode ver, todos os textos desapareceram aqui. Mas ele só desapareceu da visão do usuário, mas não das pessoas que sabem codificar. Quando você vai até a fonte, usando o atalho Control plus, vejo, bem, esses comentários estão aqui Portanto, não coloque aqui o que quiser. Você não deve colocar aqui algumas coisas secretas, porque todo mundo pode ver. Então, quando realmente usar algo assim? Seria uma boa ideia descrever a imagem que eu disse sobre Anteriormente? Bem, você pode fazer isso, mas talvez apenas no código de desenvolvimento. O código de desenvolvimento é o código que temos aqui. Mas quando você passa pelo nosso lado, quando você o transfere para a Internet, para o servidor web não é uma boa ideia passar todo o texto porque seu site todo o texto porque seu site vai ficar maior por causa de um texto como esse. Bem, não é muito, porque um personagem é muito pequeno, não está ocupando muito espaço, mas quando há muitos personagens como esse, imagine que temos muitos comentários e você comenta tudo, então seu site carregará um pouco, pouco rápido, mais lento Então, isso simplesmente não vai funcionar bem para você. Porque a velocidade do site é muito importante para uma classificação alta no Google. Portanto, não comente tudo. Mas, para fins de aprendizado, quando você está aprendendo alguma coisa ou quando estou te ensinando, é uma boa ideia usar comentários para dizer que IMG significa imagem, SRC significa fonte e assim por diante É uma boa ideia usar comentários para isso porque, bem, não é legal tê-los visíveis aqui, certo? Porque eu só queria te ensinar como isso funciona, certo? Não quero mostrar isso aqui. Além disso, na maioria das vezes, quando eu uso coisas assim digamos que eu não quero essa imagem por um segundo, e eu só uso o controle de atalho mais a barra, E essa imagem desaparece. E talvez mais tarde, eu queira voltar a esse código e quero tê-lo novamente. Então, está voltando. Então, na maioria das vezes, eu o uso para isso, apenas para comentar por um segundo, e depois volto a ele ou só quero descrever algumas coisas para outras pessoas ou formulários, mas apenas para a parte de desenvolvimento Não quando estou me transferindo para a Internet. Isso está tudo na aula. Obrigada 18. Metatags: Olá, meu amigo, aprendemos que, na seção principal do nosso site, devemos adicionar informações adicionais sobre nosso site e adicionamos o título. Existem tags chamadas Meta, que são usadas para esse fim, para adicionar informações adicionais. E, como você pode ver, essa tag não tem final. Você pode acabar com isso assim. Mas não é obrigatório, certo? Porque estamos usando o HTML de notícias. Então, a meta tag. E como essa é a tag que não tem fechamento, usaremos atributos para especificar as informações adicionais sobre nosso site. Ok, então que tipo de informação podemos colocar aqui? Vamos começar com algo engraçado. Como, por exemplo, o autor deste site. OK. Então, como fazer isso. Precisamos usar um atributo que forneça informações adicionais sobre a meta tag. E isso se chama nome. E especificamos aqui coisas como, por exemplo, autor. Existem muitos outros nomes que permitem especificar, por exemplo, descrição, por exemplo, palavras-chave e assim por diante. Nós os aprenderemos quando forem necessários. Nesta palestra, aprenderemos alguns deles, mas, para ser honesto, você não precisa se lembrar de todos eles porque isso é simplesmente algo que você provavelmente copiará colará de um lado para o outro, ok? Então, não se preocupe, você não precisa se lembrar disso de cor. Ok, então nomeie o autor. E agora, o problema é como colocamos o conteúdo? Como colocamos o valor para esse autor aqui? Precisamos apenas criar outro atributo que conterá apenas o conteúdo do autor, certo? Nesse caso, eu sou o autor desse lado. Vou digitar Arcadis Vodac Essas informações não são visíveis para todos Você precisa ir até o código-fonte, e então você pode encontrá-lo aqui, certo? E essas informações podem ser usadas por programas que analisam o site, e eles podem, por exemplo, mostrar agora que o autor deste site é Arcadis Para ser honesto, essa meta específica é para dizer: ei, esse conteúdo foi criado, esse site foi criado por mim, certo? Você pode digitar aqui o nome da sua empresa e assim por diante. Mas existem metatacs que são usados, por exemplo, pelo Google, quando ele está procurando coisas, ele procura algo, ele procura algo, o que é chamado de meta tag de descrição Como você pode ver, podemos usar o MET aqui para algumas das meta tags, infelizmente, não para o autor, mas para a descrição, que especifica a descrição do seu site O que é essa descrição? Quando você digita aqui recortes, observe que temos aqui um título, que é o que está aqui. E temos algo parecido com uma descrição do seu lado. Sim, você pode especificar a descrição do seu lado aqui, neste atributo de conteúdo. Vamos digitar alguma coisa Gatos são animais de estimação que todos nós gostamos. Vamos minimizar essa coisa que todos nós gostamos. Os gatinhos são adoráveis. Por exemplo, vamos fazer assim, para que possamos ver todo o texto e eles adorem comer lanches do nosso lado da cidade, algo assim Ok, e você pode estar se perguntando agora por que isso se parece com isso. Bem, ao criar uma descrição, você deve se concentrar em torná-la amigável para a pessoa que está vendo a descrição do seu lado, certo? E você deve usar as palavras-chave que ele provavelmente escreveria porque isso é algo que pode ser levado para o ranking do seu lado, ok? E também, quando há algo que você sabe, engraçado aqui ou talvez haja algo que chame a atenção do usuário. Ele clicará do seu lado no ranking. Mamãe. Haverá uma chance maior de ele fazer isso, certo? Então, isso é muito importante para, você sabe, eu usar os gatos, os gatinhos. Eu uso a gravata, certo? Eu não usei apenas, você sabe, porque algumas pessoas descreveriam o site sobre gatos como gatos, gatos, gatos, gatos para, você sabe, ficar mais alto no Google porque o Google leva em consideração quantas vezes os gatos foram, por exemplo, escritos em seu Se exagerar, isso não vai ser bom. Essa é uma ótima descrição, que, você sabe, não parece ter sido criada para o robô. Foi criado para a pessoa. E agora, bem, não criamos, por exemplo, um lado sobre imagens engraçadas de cortes, mas somos o quê? Eles adoram comer lanches do nosso lado fofo. Por exemplo, vamos mudar o título para Kitty. Petiscos. É melhor pegar os lanches ou algo parecido, certo? E isso fará com que você cresça no Google. Essa coisa pode ser interpretada pelo Google como uma sugestão. O que colocar aqui? Por que eu disse sugestão? Porque bem, o Google pode pensar: Ok, você está mentindo ou talvez haja uma parte do site que descreva melhor o seu site, e ele não a inclua. Mas, na maioria das vezes, ele levará isso em consideração. Portanto, é uma boa ideia dedicar algum tempo para colocar aqui o que vai melhorar a classificação do seu lado. Há também uma meta tag chamada tanque de palavras-chave, que especifica as palavras-chave As palavras que são fundamentais para o seu lado. Nesse caso, seriam gatos, chaves, lanches e assim por diante. Mas bem, não leva mais em consideração isso porque as pessoas estavam enviando spam aqui para palavras-chave, como, por exemplo, cortes no CCCC da Cat Cat, e isso poderia levar a uma Internet, você sabe, com spam , certo você sabe, com spam , Portanto, isso não é levado em consideração. Mas você pode especificar as palavras-chave para si mesmo aqui, apenas para saber do que se trata esse lado, mas não é necessário ser honesto. Portanto, há essa descrição e observe que eu a coloquei abaixo do título. Você pode colocá-lo em qualquer lugar que quiser, certo? Mas, para ser honesto, é melhor colocá-lo abaixo do título, porque agora você pode ver exatamente o título e a descrição em um só lugar. Se houvesse mais conteúdo aqui e você tivesse a descrição aqui aqui no título, isso seria um pouco confuso, certo? Essa não é uma boa maneira de codificar as coisas. Então coloque a descrição aqui. Há autores, por exemplo, aqui, e isso é bonito. OK. Existem algumas outras metatags, mas falaremos sobre elas quando forem necessárias, ok? Acho que essa seria a melhor maneira de aprender coisas novas. O na aula. Muito obrigado 19. Charset — codificação adequada em seu site: Olá, meu amigo. Hoje, falaremos sobre a codificação adequada em seu site Imagine que você tem um fórum. Neste fórum deste fórum, há muitos tópicos com pessoas de diferentes países. Como, por exemplo, da Polônia, né, observe que estamos usando aqui observe que estamos usando aqui um caractere que se chama L em polonês, e esse é um caractere que não está em todos os teclados, por exemplo, certo? Portanto, há algum tipo de codificação que acontece em segundo plano que mostra essa letra Letras normais como essa, como AB CDFG e assim por diante, aquelas que estão em quase todos os idiomas, serão interpretadas sem problemas Mas, como este, isso pode dar alguns resultados ruins, essa coisa pode ser interpretada. Eu vou fazer algo muito rápido agora. Note que isso pode ser assim. Estou voltando ao que era antes e logo explicarei o que aconteceu. Portanto, isso pode ser interpretado com confiança, e devemos evitar situações como essa porque queremos ser profissionais Queremos ter uma codificação que sempre garanta que tudo esteja ótimo em seu site Para fazer isso, precisamos codificar seu site, da mesma forma que o arquivo é codificado Como você pode ver, a codificação básica, que é dita agora, é chamada de UTF oito Essa codificação é muito legal porque sempre interpretará tudo corretamente Mas você também precisa adicionar aqui na metatag usando o. Como você pode ver, EMT, podemos usar essa coisa, o atalho aqui, e obteremos uma metatag parecida uma metatag parecida E essa coisa, como você pode ver, diz: tipo de conteúdo HTTP equivalente, e o conteúdo é Tex HTML, e o conjunto de carros é UTF oito Seja sincero, é difícil lembrar, eu sempre copio e colo de um lugar para outro porque seria horrível lembrar disso E essa coisa, certifique-se de que tudo será interpretado corretamente, ok? Mas você precisa sempre lembrar disso: o arquivo, e aqui temos as informações também devem estar na mesma codificação como esta Quando o atualizamos, como você pode ver, aqui, temos a codificação adequada No entanto, você deve estar se perguntando antes que este último também fosse interpretado corretamente Sim. Mas o Firefox, nesta versão, é muito novo, e ele apenas garantirá que seja a versão padrão e a interpretará corretamente, porque essa codificação é bem conhecida e só vai adivinhá-la Mas existem muitos programas, formas de abrir seu site. Acredite em mim. No futuro, aprenda sobre eles. Não sei, olhando para HTML por meio de algum tipo de programa que interpreta e-mails eletrônicos, e então você teria problemas com letras, por exemplo, assim Portanto, é uma boa ideia colocar a coisa aqui. E seu site sempre terá uma boa aparência. Você também deve saber que essa forma de escrever codificação é bastante antiga e funciona em navegadores da Web antigos e em aplicativos antigos Mas, de alguma forma, isso é sugerido pelo código do Visual Studio. Acho que é só porque, bem, eles querem oferecer suporte e sempre ter uma codificação adequada Portanto, se você quiser oferecer suporte a todos os navegadores da web e assim por diante, use esse método. No entanto, se você quiser ir com o tempo , pode usar algo assim. Atributo do conjunto de carros conjunto de carros que apenas define o carro UTF H. Então, isso é igual ao valor abaixo, mas isso não é suportado tão bem quanto a tática acima, com esses Então você pode estar se perguntando o quanto ele não é suportado. Para ser honesto, quase todo mundo apoiará essa coisa, certo? Então, depende de você. Então, vamos usar essa coisa porque acho que é mais fácil de lembrar, certo? E parece melhor. Ele tem menos caracteres, então seu site ficará muito mais rápido. Talvez não muito, mas, você sabe, letra a letra e seu site ficará menor. Você provavelmente já percebeu que cliquei aqui no início, algo assim, e abri novamente com uma codificação com codificação diferente em nosso site Olha, podemos usar, por exemplo, 8892, que é a codificação central do Europin, e tem caracteres desse lugar no mundo E quando eu o uso, percebo que o caractere L muda. Quando eu uso o controle mais Z, eu volto para a codificação que tínhamos antes, mas quando eu atualizo aqui, como você pode ver, temos uma letra molhada Porque o arquivo está codificado nessa codificação. Então, precisamos aqui também ter a mesma codificação, como esta Como você pode ver agora, ele funciona corretamente. Portanto, lembre-se de que você precisa sempre ter a mesma codificação do seu arquivo Na maioria das vezes, você tem isso com UTF oito e não precisa fazer mais nada , basta adicionar o Carset ao UTF oito aqui e tudo funcionará corretamente Vamos voltar ao que é suportado em todos os lugares. Assim e está tudo bem. Também é importante saber que esse ataque meteorológico, excepcionalmente, deve estar sempre aqui Depois do primeiro metataque, por quê? Porque, bem, se você colocar aqui, por exemplo, observe que o caractere L ou está aqui, e o programa saberá qual codificação temos aqui Isso não é uma boa ideia porque podemos receber cartas antes. Além disso, os programas estão sendo analisados o mais cedo possível. Portanto, alguns programas nem conseguirão interpretá-lo se for posterior. Então, basta colocá-lo como a primeira coisa na seção principal. Isso está tudo nessa lição. Muito obrigado. 20. Doctype HTML: Olá, meu amigo, hoje vou te dizer, por que devemos adicionar o tipo Doc ao HTML cinco? Por que devemos especificar o tipo de documento que estamos usando? E é uma pergunta muito boa, porque quando você olha para a extensão do arquivo HTML, podemos ver que é HTML. Por que ainda nos preocupamos em dizer que esse tipo de documento é HTML, certo? Ei, isso é muito estúpido, certo? Mmm. Bem, seria. Mas o problema é que o HTML está muito tempo conosco. São cerca de 30, 40 anos conosco. E, você sabe, as pessoas, há muito tempo, não podiam esperar que nem mesmo a Internet se expandisse, como ela se expandiu, e elas não sabiam como ela se expandiu, e elas não que tipo de versões HTML existiriam no futuro. Sim, versões do HTML. E essa é a causa desse problema. Estamos usando a nova versão S HTML, chamada HTML cinco. E para especificar um documento como esse, precisamos digitar aqui apenas algo assim. Como você pode ver, marque a exclamação Tipo de documento, que significa tipo de documento, e basta digitar seu E tudo isso é muito engraçado. Para ser honesto, você pode terminar esta palestra. Você precisa adicionar isso aqui no topo para dizer aos navegadores da web estamos usando o novo SHTL Se você estiver interessado um pouco mais neste tópico, falarei um pouco sobre as versões mais antigas. Porque bem, ao entrar aqui, você notará que existem muitos tipos de documentos HTML. E o mais popular é o HTML, que é bem antigo, que você nem precisa conhecer. Mas esse tipo como este ainda é muito usado hoje em dia. E para usá-lo, basta copiar essa coisa aqui, e você está usando X X HTML agora. Mas qual é a diferença? Quando eu me refiro a esta página, ela ainda está funcionando muito bem, certo? Quando eu uso a versão di anterior. Como você pode ver, ainda está funcionando bem. Então, não há diferença? Bem, os navegadores da web são bonitos, você sabe, bons hoje em dia. E mesmo que você não esteja usando o padrão adequado, tudo funcionará corretamente. Então eu me preocupei em adicionar isso aqui porque bem, eles precisam adivinhar agora, O navegador sabe qual versão estamos usando quando a especificamos aqui e não precisa adivinhá-la. Então, você sabe, levará um pouco mais de tempo, por exemplo, para carregar algumas coisas. Algo pode ser interpretado incorretamente, especialmente em navegadores mais antigos, ok Então, ainda é muito grande, você sabe, para compilar com o padrão Devemos usar o HTML com pontos e adicioná-lo aqui. Está bem? Você deve adicionar pelo menos informações aqui. Isso não leva muito tempo, então basta adicioná-lo aqui. E, para ser sincero, você pode criar um modelo para seu próximo site. Você pode simplesmente copiá-lo no próximo site, e nem sempre precisa se lembrar dele. Basta copiá-lo para outro site. Mas vamos voltar para a versão que é X HTML. Qual é a diferença principal? Porque às vezes você verá páginas como essa, e então não deve se surpreender com isso, ok? Quando estiver usando HTML, você deve adicionar a barra no final de cada tag vazia, para que a tag não tenha final, ok Ele informa que essa tag está terminando aqui. Então isso é muito popular, e você pode encontrar algo com algo assim no futuro, ok? No novo SH TML, bem, temos suporte para muitas coisas do JavaScript sobre as quais falo no curso de JavaScript. Esse X HTML não tem suporte para. Mas, como eu disse anteriormente, mesmo que você use o XHTML com os novos navegadores S, ele será suportado Meu tempo. Então não se preocupe. Você precisa saber que o XHTML hoje em dia ainda é usado na maioria das vezes porque, bem, HTML cinco não é suportado tão bem em navegadores mais antigos, certo? Portanto, as pessoas usam XHTML se quiserem oferecer suporte a navegadores antigos, como o Internet Explorer Seis, talvez para você, esse é até mesmo um nome desconhecido no momento. Mas houve um tempo em que havia um navegador chamado Internet Explorer, e isso tornava a vida dos desenvolvedores da Web realmente horrível porque na verdade muitas coisas não eram interpretadas da mesma forma que em outros navegadores da web E bem, se você quiser apoiá-lo, então você precisa usar X HTML, por exemplo, para garantir que tudo seja exibido corretamente, ok? Mas bem, isso é realmente importante hoje em dia? Bem, se você está escrevendo um site enorme que é visitado por, sei lá, 5 milhões de pessoas por dia, então talvez você queira apoiar essas pessoas, ou você pode ser uma pessoa que diz aos outros que estamos avançando com inovação e não os apoiamos mais também. Depende do cliente que você tem. Então, se você tem um cliente que realmente diz: Ei, você sabe, eu quero suportar um navegador web, então não se preocupe em usar o HTML cinco, basta copiar isso na parte superior e tentar usar os impostos que estão listados aqui, certo? Mas não use as novas tags listadas no HTML cinco. HTML five s mostra um novo imposto, como, por exemplo, a seção, que não é totalmente suportada em HTML. Portanto, o HTL five é, na verdade, apenas um novo imposto, novas maneiras de usar o script Java com HTML e assim por diante Está bem? E esse é o que vamos usar. Mas é bom saber. Costumava haver uma época em que as pessoas usavam outros tipos de documentos. E agora você também sabe por que precisa especificar algo assim na parte superior, certo? Porque se você não fizer isso, navegador da web ou qualquer outro programa que esteja analisando seu HTML precisaria adivinhar as versões HTML, que não é bom para você, ok ou o usuário verá seu site. Então, qualquer coisa que não seja boa para o usuário também não será boa para provavelmente se classificar no Google, porque o Google gosta de, você sabe, eles gostam de sites profissionais, certo? Então, especifique o tipo de documento, tudo ficará bem. Essa é apenas a lição. Muito obrigado 21. Recurso de código em tempo real e em tempo real de código em tempo real: Para ver o resultado da nossa edição aqui, digamos que adicionamos o ponto de interrogação aqui. Precisamos fazer o que. Precisamos desafiar com segurança, então precisamos usar o controle mais o atalho S e, em seguida, ir aqui e usar o controle mais O relógio leva algum tempo. Não seria melhor se tudo o que acontece aqui já estivesse acontecendo aqui. Vamos tornar a mudança aqui visível instantaneamente aqui. Seria ótimo. Para isso, precisamos usar extensão chamada servidor ativo. Digitamos no servidor Search book life e clicamos em Instalar. Como você pode ver, ele já está instalado. E agora, o que mudou? Bem, precisamos executá-lo. Para executá-lo, precisamos apertar o botão para entrar ao vivo aqui. Ou você precisa clicar com o botão direito aqui e clicar em Open W Live Server. Antes de fazermos isso, vou entrar nas configurações da extensão. Para acessar as configurações de extensão específica, como o Live Server, como você pode ver, você pode clicar aqui no botão gerenciar e precisamos atualizá-lo Vamos voltar lá novamente. Mãe, ele. Agora está aqui. Configurações de extensão. Clicamos nas configurações da extensão. E, como você pode ver, agora temos apenas as configurações conectadas a essa extensão recém-instalada. E aqui temos algo parecido. Navegador personalizado. Especifique as configurações personalizadas do navegador para o servidor de vida. Por padrão, ele abrirá seu navegador favorito padrão. Por padrão, configurei o navegador Chrome. Mas se você não quiser usar o navegador padrão, como, por exemplo, estamos usando o Firefox no curso, vamos clicar no Firefox aqui. E agora, quando eu entro aqui e clico em entrar ao vivo, como você pode ver, está começando, e pronto. Agora estamos neste site aqui. E bem, agora podemos fazer algo assim. Vamos fazer isso menor, à direita. Coloque essa janela aqui, por exemplo, assim. E agora, quando fazemos algo assim, removemos os pontos de interrogação aqui, e eu apenas salvo o arquivo aqui. Não preciso atualizar o arquivo aqui. OK. Então, o que quer que aconteça aqui , por exemplo, vamos negrito. Agora, eu salvo o f, Control mais S. Como você pode ver, o resultado é visível aqui instantaneamente. Isso é legal. Mas ei, eu te disse que isso poderia ser feito automaticamente, instantaneamente. código do Visual Studio é muito legal porque podemos definir o recurso de salvamento automático Para fazer isso, entramos em cinco configurações de preferências. Como você pode ver, o atalho é controle mais coma. E aqui na caixa de pesquisa, vamos digitar auto safe. E, como você pode ver aqui, podemos controlar a segurança automática de editores sujos, certo? E podemos alterá-lo de desativado para depois do atraso. Isso significa que salvará seu f após um atraso. Isso será especificado aqui em muitos segundos. 1.000 milissegundos é 1 segundo. Podemos deixar as coisas assim. E agora observe que quando eu adiciono o ponto de interrogação, como você pode ver, ele é atualizado quase automaticamente Depois de 1 segundo, se colocarmos aqui, por exemplo, 2 segundos, certo? Isso levará um pouco mais de tempo. Mas agora, como você pode ver, essa coisa branca aqui está lá em cima e foi removida após 2 segundos. E a mudança aqui também é visível após 2 segundos. Então, também podemos inserir o y em negrito. Podemos ver que agora está em negrito após 2 segundos Acho que 1 segundo é muito bom. Podemos deixar isso de ânimo leve. Aprendemos como salvá-lo após um atraso. E isso é muito legal, porque você pode ver instantaneamente tudo o que aprende no lado direito do monitor. O problema é que, como você pode ver, não temos muito espaço, porque estamos usando o monitor Fu HD. É por isso que eu realmente recomendo comprar monitores que tenham uma visão maior. Você pode usar a proporção correta de 21 a nove ou 32 a nove. No momento, estou usando 16 a nove. Não há espaço suficiente no lado esquerdo e direito. Também poderíamos, por exemplo, fazer algo como controle mais menos Podemos fazer isso assim e, então, temos mais espaço para nosso site. O problema com a solução é que é difícil ver o telefone agora, não só no vídeo, mas na vida real, certo? Mas talvez você tenha uma boa visão, então você pode jogar assim no seu próprio computador Mesmo que você não tenha um monitor grande, você ainda pode ter seu navegador configurado dessa forma. Ainda é muito útil porque agora, que quer que você faça aqui, certo? Quando eu removo esses pontos de interrogação, não preciso usar o controle de atalho mais S, e o resultado fica instantaneamente visível aqui, quando eu simplesmente mudo para o navegador, certo? Mamãe. Eu vou para o navegador e o resultado está aqui instantaneamente. Então eu não perco meu tempo. Mas eu recomendo ter um monitor maior ou até dois monitores, ou até três monitores, certo? Porque isso acelera e, bem, se vai ser seu trabalho, acelera seu trabalho quando você está trabalhando com HTM Melfis quando você pode ver o que você faz instantaneamente? Não, quando você precisa pular assim, certo? Está bem? Essa é toda a lição. Obrigada. 22. Entidades e validação em HTML: Olá, meu amigo. Hoje, você aprenderá o que é entidade. Quando usá-lo. Como usá-lo. Bem, entidade é só um nome. Sinais de caracteres que você pode digitar no teclado. Portanto, para obter o caractere menor que, você precisa digitar isso. A primeira coisa, você pode estar pensando: por que se preocupar em fazer algo assim Por que não digitar o mais baixo do que aqui. Observe que nossos editores notam que algo está errado aqui. Bem, o personagem está aqui. Quando eu uso a entidade, para usar a entidade, você digita o e comercial usando o shift mais sete, no teclado, depois o nome da entidade e, em seguida, a semicluna Como você pode ver, M Também temos o menor que o caractere. Por que se preocupar Bem, o que acontecerá se eu quiser criar um site, onde falarei sobre HTML. Eu direi, por exemplo, que essa coisa bloqueia o texto, por exemplo, assim Como você pode ver, tudo é bloqueado depois, o ser, e podemos ver a versão beta aqui que estamos descrevendo Se o HTML está usando algum tipo de coator, como o less, então para coisas como o imposto. Então é uma boa ideia escapar. Esse é o processo de transformar isso em algo assim, escapar do personagem e, para fazer isso, faremos algo assim, abaixo. Vamos usar a entidade. Como você pode ver agora, esse f bloqueia o texto. Eu não ousei tudo depois. Poderíamos simplesmente dar as informações sobre isso. No momento, podemos colocar o texto em negrito, assim. Mas essa coisa não será interpretada pelo navegador da web como se fosse uma tag Chega um momento em que você deseja fazer algo como usar a entidade. Existem outras vezes? Bem, observe que aqui eu fiz algo parecido com o set R. De 2017. Bem, estamos citando a mim mesmo, Arcadis E, para ser honesto, devemos usar para tornar as citações corretas aqui. O problema é que o HTML, quando diz atributo, está procurando o valor dentro das aspas, e o valor está agora aqui. O texto aqui é apenas algo que não sabe o que fazer com ele. Talvez seja o próximo atributo, mas não temos o nome do atributo desde então. Agora, como você pode ver quando movemos o mouse aqui, não há nada aqui. Só tem uma flecha. Como resolver isso? Bem, tem isso aqui. Podemos usar a citação assim e assim. Podemos representar a citação. Uma citação. Como você pode ver agora, funciona bem. Bem, para ser sincero, esse caso específico pode ser resolvido de forma um pouco diferente. Por exemplo, você pode usar o apóstrofo aqui. Porque quando você usa o apóstrofo aqui, você pode usar Mas quando você usa o epóstrofo aqui, você pode usar o epóstrofo por dentro, você pode usar Portanto, se houvesse um momento em que você precisasse usar epóstrofo e aspas ao mesmo tempo, seria uma Além disso, acho que é melhor começar cada atributo com as aspas, especialmente para criar seu código, especialmente porque coisas assim não precisam ser digitadas manualmente, não é Eles podem vir do banco de dados ou assim por diante. Sempre, você precisa escapar, então mude a citação para que assim, se você a estiver usando como atributo, não se preocupe em usá-la assim Aqui, você pode usar aspas. No texto em que há um texto, ou você pode usar aspas, no entanto, no caso do menor. Bem, se você usar assim, por exemplo, seis é menor que sete. Como você pode ver, temos um sinal de que algo pode estar errado, mas funciona bem. No entanto, se copiarmos nosso lado. Seu conteúdo inteiro é chamado de validador de HTML, e aqui podemos escolher a validação por entrada direta e copiar nosso Você notará que temos um erro aqui. Sempre, você deve omitir o caractere menor que para ter certeza de que seu código foi validado corretamente Vamos copiá-lo novamente aqui Como você pode ver, o erro desapareceu. Você pode usar essa ferramenta para verificar se tudo foi escrito corretamente. Bem, código visual do sudo, você também pode ver que algo está errado aqui, mas não há informações Portanto, para essa parte inferior, você deve usar essa entidade sempre. E há algo chamado Ampersand. Portanto, você deve escapar do Ampersand sempre quando estiver passando pelos links, quando estiver dentro de um Não, aqui, HTML e CSS são adequados. Mas quando você o está passando usando links, como aqui, por exemplo, está um link, esse é um tópico bastante avançado, mas você deve se lembrar de que algum dia, quando você passar um link, algo não funcionará e você terá uma placa como essa dentro de um link Lembre-se desta palestra de que você precisa comparecer e usar essa pessoa em vez disso Há também um espaço ininterrupto. Olha, normalmente, quando adicionamos espaços, eles não são interpretados. Não há espaços aqui. E é bom que isso aconteça assim porque agora podemos formatar nosso código com bastante facilidade, tipo, você sabe, talvez eu quisesse aqui. E HTML, o navegador da web não interpretará espaços HTML dentro do arquivo dessa forma. No entanto, talvez algum dia você queira ter algo, o que é um espaço ininterrupto, que é um espaço que será interpretado Então você pode simplesmente copiá-lo e, como você pode ver, agora, cada espaço que eu adicionei usando essa entidade é interpretado porque é apenas um caractere que colocamos e dentro do texto, e sabemos o que estamos fazendo Estamos dizendo: Ei, eu sei o que estou fazendo, eu quero o espaço aqui. Portanto, o espaço ininterrupto pode adicionar um espaço que o normal não estaria lá Como você pode ver, agora está alinhado aqui, então talvez eu queira algo assim. Isso é tudo? Bem, existem muitas outras entidades, por exemplo, você pode encontrar uma entidade que criará uma integral, o símbolo da matemática, assim. No entanto, estamos usando o UTF oito e, neste site, você pode encontrá-lo Você realmente pode copiar coisas, como, por exemplo, eu quero esse sinal, então vou copiá-lo aqui. E vai funcionar bem. Observe que esse sinal está aqui. Ao usar o TFA, você não precisa se preocupar com isso Acho melhor simplesmente copiar o sinal em seu HTML. O bom é que você pode ir, por exemplo, até o MOG Smiles, e obter todas essas coisas usando, por exemplo, o número atribuído a esse MOG, mas o engraçado é que você pode, por exemplo, copiar até o mod dentro do editor, assim, e você notará que isso está no Isso é muito legal. Você pode encontrar muitas coisas engraçadas aqui, por exemplo, RoS, como por exemplo, algumas formas geométricas Isso pode ser muito útil, eu acho. Então, símbolos monetários, que você pode simplesmente copiar, passam para o seu site se precisar deles. Isso está tudo nessa lição. Obrigada 23. Como nomear corretamente seus arquivos? Por que a página principal é chamada index.html?: Olá, meu amigo. Hoje, vamos falar sobre como nomear corretamente o Pis, como nomear seu phis HTML, ok? E por quê? A página principal é sempre chamada de índice HTML. Então, vamos começar por como devemos chamar nossos nomes? Não deveria ser chamado como fizemos antes. Então, experimente a amostra dois, vá lá. Ninguém sabe o motivo dessa briga, que trata aquela página quando ele olha o nome assim. Sempre o nome deve descrever do que trata sua página da web. No nosso caso, é Kitty Sacks. A questão é: devemos usar espaços como aqui? Não, cada palavra deve ser separada pelo dia. Você não usa espaços, você usa des para separar palavras. Bem, você não deve usar aqui as letras que não são básicas no alfabeto Como este, não os use. Use somente AB CDF G. O alfabeto básico. Bem, você pode usar números, mas só usá-los quando eles realmente falarem sobre algo em você. Descreva algo relacionado ao seu site, certo, por exemplo, o número do produto ou algo parecido, que poderia ajudar a encontrá-lo, mas caso contrário, tente evitá-lo. Então é assim que você chama seu site. Está bem? Como Kitty Snacks. E agora, quando entrarmos no ar, você notará que esse nome está aqui e é útil para os usuários que estão visitando seu site. Porque quando eles copiam e passam para alguém, eles podem ver a partir desse nome da URL, ou seja, a partir desse nome do link. Sobre o que é esse link, certo? Portanto, é útil para os outros usuários e também ajuda a navegar em seu site até as pessoas. Então, qualquer coisa que seja útil também será coisa boa, considerada uma coisa boa, considerada boa para o Google, tanto para o Google. Portanto, é algo que será levado em consideração pelo Google Ranking. Portanto, é uma boa ideia usar aqui as palavras que representam seu lado, mas lembre-se, não coloque sua descrição, certo? Seria muito estúpido fazer algo como kits, outras coisas, adorar comer e assim por diante. Este não é um lugar para enviar spam para as palavras-chave. Você acabou de colocar aqui Principalmente o título, ou algo relacionado ao título. Isso é algo que deve ser curto. Então é assim que você cria os nomes. Mas um lado, por um lado, deve sempre ser chamado de Index dot HTML e deve ser a página principal do seu site. Por que isso acontece? Note que quando chegarmos aqui e removermos essa parte, obteremos a estrutura, o índice das nossas pastas do nosso servidor web. Quando vamos aqui, podemos encontrar as imagens, podemos encontrar artigos e podemos encontrar outro site aqui. Então, o servidor está procurando o índice e não o encontrou. Então ele coloca o que está dentro da pasta principal. Então, a pasta é cortada em nosso estojo. Mas se fornecermos o índice que ele está procurando, quando mudarmos o nome para Indexar esse HTML, você notará que, quando eu atualizei aqui, ele encontrou Índice em HTML Também podemos digitar aqui Índice em HTML, e ele encontrará Mas você não precisa porque é assim todo servidor web é programado Ele está procurando o HTML do ponto de índice. Talvez Index dot PHP, se você estiver escrevendo em outro idioma, mas ele está procurando o índice. É por isso que a página principal não deve ser um nome autodescritivo como Kitten Snacks, por exemplo Ele deve ser chamado de Índice em HTML. No entanto, nas páginas que estão sob a pasta, por exemplo, artigos, digamos que queremos criar outro site, então, vamos copiar isso aqui. E, por exemplo, não será sobre lanches para gatinhos, mas, por exemplo, imagens engraçadas de gatos, certo? Então, aqui, você deve criar uma descrição, tentar criá-la. Claro, crie-o e nomeie-se aqui como autor. E vamos renomeá-lo para quê? Imagens de gatos, por exemplo, certo? Ou imagens engraçadas. Gatos, algo assim. Porque isso descreve do que trata esta página da web. Mas esta página, a principal deve ter algo chamado menu, que falaremos sobre como criar no futuro. E é como um índice. É como uma abertura para todos os outros subsites, a página está conectada à sua página da web, ao seu site inteiro Isso está tudo nessa lição. Obrigada. 24. EXTENSÃO: ícones doces em seu VSC: Olá, meu amigo. Acho que os ícones padrão que estão ao lado do nome da sua página ou ao lado do nome do JPE five e assim por diante, não são muito bons Felizmente, você pode alterá-los. Como fazer isso? Bem, você pode usar o controle de atalho mais três mais B ou um atalho e digitar a equipe de cinco ícones Quando você escolhe, como você pode ver, você pode alterá-lo para nada. Se você não quiser tê-los, ou pode alterá-los para o mínimo. Isso é muito legal. Ou você pode alterá-los para o que estava aqui. Mas, felizmente, também há uma opção como a personalizada qual você pode instalar equipes de ícones adicionais. Ao clicar nele, você encontrará todas as equipes de ícones que podem ser instaladas a partir das extensões. E o que eu prefiro é esse aqui. Ao instalá-lo, você terá uma opção aqui para escolhê-lo. Lembre-se de escolhê-la porque atualmente é a configuração, então altere-a para ícones Viacde Agora veja como eles são legais. Eles são muito coloridos e, embora sejam coloridos, não ocupam muito espaço. Eles são muito, muito bons. Eu recomendo fortemente este. No entanto, se você quiser, você pode instalar, por exemplo, o ícone do material, instalar e, em seguida, você precisa mudar para o material. Há uma grande diferença? Há alguma diferença. Vamos fazer isso um pouco mais rápido. contraplaca muda P, e vamos mudar do material para o código Vos Como você pode ver, a diferença está principalmente nas pastas. Eu prefiro esse, mas talvez você prefira esse. Para ser honesto, há muitas opções para escolher. Então brinque com eles, certo? E escolha o que você gosta, porque, bem, o editor é principalmente para você, não para mim, certo? Você tem suas próprias preferências, e isso é legal no Visual Studio Code, pois você pode fazer quase qualquer coisa com esse editor para que pareça que você queria Eu recomendo fortemente este, e vamos usá-lo a partir de agora. Essa é apenas a lição. Obrigada. 25. LISTA : ol vs li: Olá. Hoje, mostrarei como criar uma lista de itens de elementos, de posições que você deseja apresentar ao usuário. Quando usamos a lista? Bem, por exemplo, para mostrar aos alunos sobre o que falaremos na palestra específica Este é o momento em que você usa a lista. Além disso, você pode listar, por exemplo, alunos em sala de aula. Quando alguém liga para o número 14, ele sabe que está vindo para ser interrogado e vai ficar um pouco inquieto Não será uma coisa prazerosa. Então você usa a lista para listar coisas para mostrar às pessoas o que ele vai ver no seu site, por exemplo, certo? O que ele deveria fazer logo pela manhã. Por exemplo, ele precisa acordar, depois escovar os dentes e assim por diante. Então você sabe agora quando usar a lista. E o que os usamos? Bem, nós os usamos para apresentar coisas, por exemplo, de forma ordenada. Quando você olha as coisas ordenadas, é mais fácil de ler, certo? Então, para ser honesto, você usa listas para facilitar a leitura. Esse é o principal motivo pelo qual você os usa. Caso contrário, você pode colocar tudo em um parágrafo. Mas, como você viu aqui, não é profissional em HTML, você deve listar uma tag específica , chamada UL ou OL Então, a primeira coisa significa lista não ordenada e a segunda significa lista ordenada. E qual é a diferença? Bem, quando criamos uma lista ordenada, criamos uma tag como essa e colocamos os itens da lista dentro dela. Então eu, como você pode ver, temos o número aqui, que significa que podemos colocar algo aqui, e quando o copiamos, como você pode ver, podemos colocar muito mais coisas, e elas são numeradas automaticamente, e isso é muito legal porque observe que antes, quando usamos isso aqui, digamos que esses dois pontos não são desta palestra, então devemos removê-los Vamos removê-los. Mas agora eu faço o que. Altere manualmente os números, o que não é legal. O legal da solução que acabamos aprender é que ao copiarmos o texto aqui, desse jeito, você vai perceber que o quê? Isso é um número automático. Se eu mudar, digamos que eu queira começar a falar sobre isso primeiro. Então eu copio aqui. Como você pode ver, os números são alterados automaticamente, e isso é fundamental Então, essa é a primeira coisa interessante ou lançada. A segunda coisa é notar que não temos linha de freio porque todo esse item é freio automático Está bem? Então isso também é legal, certo? Portanto, você não precisa usar a linha de freio aqui. E olha, você pode usar o atalho legal, que é uma seta positiva no teclado para mover coisas assim para cima Digamos que eu queira isso primeiro, como você pode ver, agora é o primeiro aqui. Mas se eu fizer isso aqui, certo, assim, preciso mudar os números novamente. Portanto, esse é um recurso muito interessante do código do Visual Studio. Você pode mover as coisas para cima ou para baixo depois de decidir qual ordem deseja colocar as coisas aqui. Se a ordem das coisas não importa, você pode usar underly. Então você acabou de mudar o OL para UL. E então você está apenas alterando o que é apresentado antes de cada item de locação Então você transforma o número em apenas um círculo, assim. Você pode alterar o que está visível aqui. Você não precisa mostrar o círculo, você pode mostrar outras coisas, mas coisas assim, formatação, como colorir e outras coisas assim, devem ser desenhadas por meio de algo chamado CSS, e falaremos sobre isso no futuro Então não se preocupe se você estiver olhando, por exemplo, os círculos aqui, e você ficar tipo, eu gostaria de ter aqui outra coisa porque eu não gosto. Você pode fazer isso, mas não agora. As tags são usadas apenas para formatar marcações para dar significado adicional ao texto E esse significado não é só para nós. Para as pessoas que estão acessando nosso site, mas também para os robôs do Google, para os robôs do Google, porque eles estão vendo sua página e, quando veem uma lista ordenada, podem ver que você está listando algo. Algumas coisas cruciais sobre seu site, bem, sobre as coisas no artigo. Então, se você estiver usando parágrafos, eles podem ver que você está criando algum tipo de texto. Portanto, não é uma boa ideia usar o parágrafo para listar. Bem, existem outros textos que você aprenderá no futuro, como, por exemplo, endereço. E se você colocar o endereço aqui, o Google sabe que aqui está um endereço. Portanto, essas são apenas informações adicionais sobre o tipo de texto que estamos formatando. Que tipo de texto estamos mostrando para o usuário. No entanto, se você quiser mudar a forma como ele aparece, maioria das vezes, você vai fazer isso por meio de CSS. Por quê? Porque é melhor. Por que é melhor, você aprenderá no futuro. Como você pode ver em nossa lista de itens, também devemos aprender sobre um atalho útil , chamado Shift plus tab nesta palestra E o que isso faz? Quando eu seleciono tudo e uso a guia Shift plus, como você pode ver, tudo se move um nível para a esquerda. Então, digamos aqui, como você pode ver, um nível à esquerda. indentação. Quando eu uso a aba, eu posso voltar para o que estava aqui. Acho melhor ter a cabeça no mesmo nível da cabeça e do corpo, porque teremos mais espaço aqui, certo para o texto. Realmente não importa para nós tê-lo nesse nível , certo? Podemos voltar assim. Usando a guia, você pode ir para a direita uma vez, porque bem, a tag está sempre lá. Nós nem olhamos para isso. Simplesmente está lá. Então, isso aumenta a clareza do nosso código, eu acho. A lição. Muito obrigado 26. Truques rápidos com o Emmet para usar com listas: Olá. Hoje, você aprenderá alguns atalhos que melhorarão sua vida como futuro desenvolvedor web Então, vamos começar com esse atalho aqui. Observe que, bem, podemos criar o menor item dentro da UL fazendo algo assim. UL, depois LI, e então precisamos formatar o debate porque não faz bem. E então, se você quiser mais um LI, faremos o que Contro plus, Control plus V. Control plus V, queremos três deles, por exemplo Tudo bem, não há problema em fazer isso dessa maneira. Mas se você sabe que terá dois Is gratuitos , por que não usar algo chamado de signo? Bem, esse sinal, quando acessamos este site, aviso é chamado de signo infantil. Por que é chamado assim? Bem, isso permite que você crie um filho dentro dos pais. Parent é uma tag que está logo acima de outra tag. A criança está apenas dentro de outro pai. Bem, os pais dão à luz filhos, filhos. Então, quando você digita algo assim, NAF, que é uma tag que você aprenderá no futuro, ela é usada para criar navegação, e você digita o quê? Neste sinal, você criará um filho dentro do NAV chamado UL Em seguida, você pode criar o próximo hit, chamado A. Como você pode ver, esta é uma folha adicionada à guia de recursos deste curso Você pode acessar este site aqui, abri-lo e, bem, você pode até baixá-lo e imprimi-lo. Há mais algumas coisas aqui. Você não precisa conhecer todos eles, não se preocupe. Mas há coisas que são usadas aqui que você não sabe no momento. Por exemplo, o D e assim por diante, não se preocupe. Mostrarei exemplos como esse quando forem necessários. Então, podemos fazer o quê? UL e dentro da UL, podemos mentir. Como você pode ver, temos aqui o atalho de abreviatura MA Para mostrá-lo, porque você pode tê-lo assim, você precisa usar o controle de atalho mais o espaço Como você pode ver, eu pressiono control plus space, e então você pode ver como essa abreviatura ficará depois de expandi-la depois Portanto, você não precisa pressionar enter para ver como fica. Então, agora, quando você pressiona enter, como você pode ver, temos um Ai, então ainda precisamos copiá-lo. Mas eu estava falando sobre algo assim em uma das palestras antes de poder multiplicar uma das tags, certo Assim, podemos multiplicar parágrafos. E também aqui, podemos multiplicar o que é o aliado. Como você pode ver, agora, quando digitamos o número aqui, temos cada vez mais aliados, certo? Então, precisávamos de três deles. Então, vamos digitar assim. E o que há mais agora é aquele aviso de que podemos pressionar a tecla tab no teclado e pular para a próxima, y, certo? Então isso é muito legal porque, bem, não precisamos usar nosso teclado e mouse para pular de um aliado para outro. Então isso acelera ainda mais as coisas, certo? Podemos colocar o conteúdo de cada aliado instantaneamente, certo? Isso é muito legal. Ok, mas digamos que cometemos um erro. Por exemplo, digamos que fizemos algo assim, e então eu pulo aqui. O que fazemos se quisermos voltar a esse atalho aqui e fazê-lo funcionar Como você pode ver, não tenho nenhuma dica no momento. Para entrar nele, precisamos usar também o controle de atalho mais o espaço Como você pode ver agora, agora podemos pressionar enter e tudo funcionará bem. OK. Agora, vamos ver se eu quisesse, por exemplo, ter mais um y aqui, certo? Normalmente, você fará o que. Você o copiaria, como por exemplo, este select and contra plus C contro plus V. Mas bem, isso leva tempo Podemos usar o atalho chamado Shift mais l mais seta Ele copia uma determinada linha para cima ou para baixo. Quando eu toco aqui e uso a tecla de seta shift plus l., como você pode ver, eu a copiei Se eu usar a seta Shift Alp para baixo, eu a copio para baixo. Muito legal, não é? OK. Digamos que temos LIs vazios e eu não queira pular para a abreviatura novamente Posso alterar ao mesmo tempo, cada valor interno Posso adicionar o conteúdo de cada elemento LI. Ao mesmo tempo? Sim, você pode. Você pode usar o atalho mais o mouse, clique com o botão esquerdo do mouse Quando eu pressiono um botão e clico, temos mais cursores, certo? Agora podemos digitar a amostra e eu a digito em qualquer lugar. Observe que você pode colocar o cursor em qualquer lugar que quiser e digitar em todos os lugares desta forma. Controle Z para voltar. Novamente, o Controle Z é um atalho muito importante. Se você cometer um erro, basta usar o Control plus z. Então você sabe agora, isso, você sabe, agora , isso, isso, e aqui também está algo assim. Control plus k plus S. Como você pode ver, existem atalhos que você pode ler aqui e também pode alterá-los. Ao clicar com o botão direito do mouse aqui, você pode removê-los ou alterá-los. Mas também existe um site como esse. Se adicionarmos recursos, onde você os agrupa um pouco, é mais fácil encontrar coisas aqui Observe que você tem aqui, por exemplo, uma linha de exclusão. E quando eu entro aqui, digito delete. Pode ver que podemos encontrá-lo e você pode mudá-lo, certo? Ou podemos usá-lo. Por exemplo, digamos que não queremos isso aqui. Normalmente, você precisaria selecionar e clicar no espaço da embalagem ou usar o Shift mais o espaço inicial e o espaço na embalagem. Mas você pode usar exatamente o controle mais o feixe mais a chave Controle mais feixe mais tecla, e você está apenas removendo a linha onde o cursor está Muito legal, certo? Ok, existem mais dois atalhos que vão melhorar sua vida, que são os colchetes e os colchetes Bem, observe que quando estamos criando uma mentira, não há conteúdo dentro da linha, certo? Digamos que eu queira ter conteúdo interno. Como fornecer conteúdo. O conteúdo é o texto que está dentro, certo? Você precisa usar os colchetes encaracolados. O conteúdo vai aqui, certo? Como você pode ver, colocamos dentro da LI o conteúdo. Isso é muito legal, certo? O conteúdo e o espaço entram, e temos um bom conteúdo interno. Você pode colocar conteúdo em qualquer tag, certo? Então, o conteúdo P de P. Como você pode ver, é o conteúdo de P. Muito legal. Isso é útil quando você quer multiplicá-lo, porque agora você pode multiplicá-lo por quatro, por exemplo, e você tem um conteúdo de amostra para cada LI. Muito útil. Clique mais passe, entre e temos mais deles. Portanto, os colchetes são usados para o conteúdo, mas este é usado para adicionar o atributo Então, quando eu faço algo assim, posso, por exemplo, criar um título de código de atributo, e posso dizer que aqui está o título. Como você pode ver, temos a dica de que o atributo será adicionado ao elemento LI porque estou segurando o cursor aqui Mas quando eu pulo aqui e uso o controle mais o ritmo, adicionamos o título a cada Li de forma incrível, certo? Eu posso clicar em inserir o contraponto entre espaço e está aqui. Observe que você pode adicionar o atributo a qualquer tack de arte que desejar Se você quiser adicionar o título à UL, basta colocar os colchetes ao lado de U. Quando você fizer isso dessa forma, teremos um título ao lado A tachinha que obterá o título do atributo a partir dos colchetes é a que está ao lado dela Então, isso está próximo a isso e, claro, está próximo à esquerda. É isso mesmo. Além disso, há um recurso muito interessante, que é o recurso do dólar, e o que ele faz? Vamos entrar em Ai e digamos que queremos colocar uma amostra de conteúdo, como, por exemplo, uma, e eu quero multiplicá-la por quatro Observe que temos aqui o número um, um, 11, e agora precisaremos fazer isso manualmente desta forma se quisermos numerá-lo. Mas o fato é que poderíamos usar, em vez de um, o cifrão, e ele será, como você pode ver, substituído pelos números, algo de um, muito legal. Amostra de conteúdo, um, dois, três, quatro, ótimo. Aprendemos sobre alguns atalhos nesta palestra. Como você pode ver, existem muitos outros. Eu os mostrarei somente quando forem necessários. Como você pode ver, depois da palestra de LI. Essas são coisas legais que é legal saber. Isso vai acelerar o processo de criação de conteúdo. Mas aprender novos atalhos leva tempo. Portanto, não se preocupe se você não os conhecer instantaneamente. E também para aprender atalhos, você precisa sair da sua zona de conforto Sim, você está na zona de conforto quando usa as coisas que aprendeu há muito tempo. Então, talvez você queira até mesmo copiar coisas assim , copiar e colar. Tudo bem, mas, na verdade, é bom emprestar atalhos porque você passará muito tempo criando sites no futuro Essas coisas vão te poupar tempo e tempo é dinheiro. T não é só dinheiro, tempo é felicidade. Se tiver tempo, você pode jogar jogos de computador, se encontrar com amigos e assim por diante. Mas, para economizar tempo, você precisa aprender atalhos Você não precisa aprender todos eles, certo? Porque, por exemplo, situações em que você precisa, sei lá, numerar coisas como aqui. Eles são muito raros, mas pelo menos aprenda sobre este, este e este, porque eles são usados com bastante frequência. Você também pode tentar encontrar coisas que sejam úteis para você em foto da folha de dicas como esta, certo? OK. Essa é apenas a lição. Muito obrigado. 27. dl, dt, dd — lista de definição: Olá, meu amigo. Hoje, vamos falar sobre o que é tag DL e quando devemos usá-la? Tag DL significa lista de definições. Então, essa tag descreve uma lista de definições. Está bem? Então, aqui está o primeiro termo chamado termo de definição, que será descrito dentro de uma descrição de definição. Então, colocamos em DD o que você deseja descrever e, em seguida, DD a descrição, certo? E tudo assim é colocado na lista de definições. Então, a diferença entre isso e isso é que podemos conectar termos à descrição. Aqui temos apenas uma lista de itens individuais. Mas aqui temos uma lista de definições, certo? Então, esse termo está conectado a isso. Esse termo está ligado a isso. Mas você pode estar se perguntando, vá lá. Por que se preocupar em fazer algo assim quando poderíamos, escrever assim, por exemplo, abaixo de P e depois colocar aqui, a definição Então, podemos colocá-lo no parágrafo. E como você pode ver, M Nós temos isso assim. Como você pode ver, a primeira diferença é que a lista de definições cria algum tipo de formatação Aqui, temos algum tipo de recuo para cada descrição, cada tag DD tem recuo e o termo de definição está à esquerda da É só uma formatação? É só isso que seria uma vantagem para você. A vantagem de usar algo assim. Você não se incomodaria em usá-lo se fosse só isso. Bem, a primeira coisa é que Google pode conectar isso, ei, a primeira coisa é que você está definindo algo, então você está descrevendo algo, e ele sabe que isso está descrito aqui. Ele sabe qual é o termo e qual é a descrição. Exatamente, ele sabe disso. Então essa é a primeira coisa. Mas a segunda coisa, vou mostrar o exemplo que é mostrado no site do desenvolvedor mozilla.org Este é um site muito legal porque, bem, você pode aprender aqui em HTML se quiser. Mas eu o usaria principalmente para ver exemplos que estão aqui, que são muito bons. Observe que eles têm aqui um exemplo de uma lista de definições como essa, onde é um script da Cornualha, e então há definições de cada coisa assim Mas aqui está uma saída , de como fica quando está no site. Você pode notar que cada um desses termos está em negrito. Isso é legal. Mas ei, não há etiqueta B aqui. Precisaremos fazer o que. Precisaremos fazer algo assim em cada um para obter o termo em negrito Mas isso leva tempo, e eles usam o que é chamado de CSS, que aprenderemos no futuro. O CSS permite que você escolha, por exemplo, dt e coloque a espessura da fonte em negrito, altere a fonte para torná-la em negrito, mas para cada elemento dT. Isso é muito legal porque aqui, se gostamos de algo assim e descreveremos a tag BR, então o b Dag e assim por diante Se você quisesse escolher apenas essa peça, não conseguiríamos fazer isso e precisaríamos fazer manualmente, de qualquer forma, o que fazer com o negrito. Então, o legal do CSS é que ele pode escolher todas as tags que são, por exemplo, DT e alterá-las para deixá-las em negrito Temos duas vantagens. Uma é que, bem, o Google saberá o que está acontecendo. A segunda é que, no futuro, quando você aprender CSS, poderá escolher essa coisa específica e torná-la melhor, certo? Além disso, quando você está usando algo assim, você está mostrando para si mesmo e para outras pessoas que vão ler seu código HTML que você sabe o que está fazendo, e elas saberão, então aqui estão algumas definições. Aqui está uma lista de definições. Quando eles estão vendo algo assim, eles simplesmente sabem que é um parágrafo, e o parágrafo deve ser usado para colocar texto sobre Bem, você pode dizer que a definição também é algum tipo de texto, e é verdade, mas temos uma tag específica para esse caso específico que torna seu código mais limpo, certo? Portanto, é melhor usar isso em vez disso no caso de definir algumas coisas em seu site. Como exercício, crie mais três termos de definição, relacionados, por exemplo, à tag de título, à tag de cabeçalho e ao tipo de documento HTML. Basta colocá-los no termo de definição e digitar alguma descrição da definição. É um bom exercício aprender como criar esse tipo de imposto, mas você também tentará se lembrar de como esses impostos funcionam. Isso está na aula. 28. EMMET: criando irmãos e tratando dois elementos como um: Olá, meu amigo. Na última palestra, aprendemos como criar uma lista de definições A questão é: como criar uma lista de definições usando Et. Como usar o MET para criar isso. Há um pequeno problema porque observe que quando estamos fazendo algo assim, DL e depois queremos inserir, por exemplo, DT, temos uma solução como essa. Mas como adicionar agora o DD, como adicionar o DD aqui. Como podemos adicionar algo no mesmo nível, não dentro de outra tachinha? Para adicionar uma tag ao lado de outra tag, precisamos usar o sinal de mais, que é usado para irmãos A etiqueta que está no mesmo nível desta, DT está no mesmo nível de DD, é chamada de irmã Então, quando fazemos algo assim dT mais DD, como você pode ver, a solução é DT nos próximos dois dD. Quando digitamos P mais B, temos P ao lado de B. E, por exemplo, próximo P, temos o próximo P. Ok, vamos usar o que aprendemos para criar o que fizemos aqui. Então temos DL dentro dele, então vamos usar esse sinal aqui. Qual DT, e ao lado dele, DD. Ok, isso é o que gostaríamos, certo? OK. Mas se quiséssemos mais deles, precisaríamos copiá-los assim. E, para ser sincero, isso também leva tempo. Mas aprendemos que podemos multiplicar coisas assim, certo? Então, vamos voltar a isso e multiplicar por três. Ainda há um problema porque multiplicamos apenas um d d. Então a multiplicação afeta apenas uma coisa à esquerda Se você quiser agrupar dt e DD. Se você quiser fazer com que seja uma única expressão, como uma única coisa. Você precisa usar a mesma coisa que usa em matemática, os parênteses Quando você faz isso assim, quando eu pressiono controle mais espaço, como você pode ver, agora multiplicamos essa coisa três vezes Uma expressão inteira como essa é multiplicada por três. Agora podemos até escolher cinco vezes dez vezes o que você quiser, e isso é legal. Protegendo-o. Então, para resumir. Para adicionar várias tags no mesmo nível, chamadas de irmãos, precisamos usar o que é o sinal de mais Então você acabou de adicionar. É por isso que é um sinal de mais, um ao lado do outro. Para agrupar alguns limões e fazê-los funcionar como um limão, você precisa usar parênteses como na Para criar uma tacha em outra tacha, você precisa usar o sinal maior da toca Como exercício, tente fazer a mesma coisa que fiz nesta palestra, mas também tente colocar dentro do DT e DD criados, algum texto de amostra, mas usando m. A solução deve ser assim Tente fazer isso como um exercício. Se você tiver alguma dúvida, como sempre, fique à vontade para perguntar. 29. Como criar links internos: Olá, meu amigo. Hoje, vou explicar o que são links, como criá-los e como criar um link de retorno. Então, quando você tem muitos sites, seria ótimo poder voltar ao primeiro site para indexar esse HTML para permitir que o usuário faça isso, certo? Ok, então o que são links? Como o nome sugere, um link é apenas algo que conecta. Duas coisas, um link, links, conectam duas coisas. Por exemplo, site. Bem, não podemos ter tudo de um lado. Bem, podemos se o site for pequeno, mas se tivermos um site grande ou mesmo quando você tiver um fórum, fórum está cheio de subsídios Quando você tem um site, um site grande, precisamos criar links. Bem, também precisamos de links para, por exemplo, conectar outro site criado por outra pessoa, então precisamos de links para isso. Como criar um anel? Bem, precisamos usar essa âncora Algo que é chamado de âncora. A tag A significa âncora. Então, digamos que queremos criar um link para imagens engraçadas de gatos. Imagens engraçadas de gatos. Digamos que queremos criar um link para esse lado. Então eu vou digitar um nome como esse. Então, se quisermos ver mais imagens divertidas de gatos, siga-me. Algo parecido com isso. Quando alguém clica nisso, eu gostaria que ele pulasse para este lugar. Precisamos vincular isso. Precisamos fazer algo assim. Precisamos lançar e ancorar usando a tacha A desta forma. Ou podemos usar o controle de atalho mais **** mais P e encapsular com a abreviatura e simplesmente colocar A aqui e Como você pode ver, a abreviatura acrescentou algo assim, a Vamos removê-lo por um segundo. Vamos ver o que acontecerá quando colocarmos uma âncora nas imagens dos fãs de, bem, eu queria tê-la em todo o texto Como você pode ver, nada acontece. Esse texto ainda é um texto simples porque precisamos dizer onde queremos vinculá-lo e é isso que fornecemos usando o atributo re. O ref significa hiperreferência. Portanto, precisamos fornecer o hipertexto. Então, essa coisa faz com que seu texto seja hiperativo, o que significa esse supertexto que permite que você pule para outro lugar Como você pode ver, esse link agora tem esse estilo. Você pode mudar seu estilo no futuro, usando, por exemplo, CSS, sobre o qual falaremos no futuro. Mas, por enquanto, você pode ver, nós o tornamos clicável, certo Agora chegamos aqui: o mouse está sendo trocado quando movemos o mouse sobre ele. Então, esse texto agora é hiperativo. É por isso que dizemos que é uma hiperreferência. É algo que permite que você pule de um lado para o outro. E é hiperativo porque, normalmente, não é possível fazer coisas assim, certo? Quando você tem um livro, pode simplesmente pular um lugar para outro no livro apenas pressionando o texto nele Esse texto é realmente exagerado. E é por isso que até mesmo o HTML é chamado HTML, linguagem de marcação de hipertexto É hiper porque permite que você pule, e essa coisa é chamada de hiperreferência, porque permite que você pule para vincular coisas, e agora você precisa fornecer aqui entre aspas onde queremos que ela seja vinculada, certo Porque agora nada acontece aqui. Então, precisamos usar o atalho contra plus space, como você pode ver, agora podemos escolher entre ir aos artigos e agora às imagens divertidas de CATs, por exemplo E agora, quando somos atingidos e eu clico nele, como você pode ver, estamos pulando para o outro lado e podemos voltar usando o botão Voltar aqui em cima Então, isso permite que você vá para o local que fornecemos aqui, certo? Precisamos fornecer o nome da pasta para a qual você deseja ir e o nome do fd que deseja pular. Isso é bem simples. Mas o bom é que você pode colocá-lo em qualquer coisa. Então, digamos que temos uma imagem, como, por exemplo, a que temos agora em imagens, como o baixo. Digamos que seja uma guitarra tendenciosa e queremos que toda a imagem seja vinculada, algo em que possamos clicar e pular para outro lugar. Vamos colocar uma abreviatura assim. Vamos colocar a referência etária. Digamos que vamos usar imagens divertidas de C porque não temos mais HTML fs. Agora, como você pode ver, quando movermos o mouse aqui e eu clicar nele, eu pularei para esta placa. Você pode colocá-lo em texto, você pode colocá-lo também em imagens. Então você pode colocá-lo em qualquer coisa que quiser. Vamos lá, e vamos voltar a essa coisa. Note que quando eu vou aqui, não há nada aqui. Agora, e se eu quisesse voltar aqui, mas usando o link. Porque devemos fornecer ao usuário uma maneira de voltar atrás. Como fazer isso? Bem, vamos criar um texto de volta. Agora, vamos criar um link. Vamos colocar uma âncora nela e digamos onde queremos pular E a maioria de vocês colocaria aqui algo assim, em HTML com pontos de texto. Observe isso quando eu clico nele. Há algo que não consigo obter o índice de artigos. Isso porque o índice está dentro da pasta principal. Não está dentro da pasta chamada artigos. Você precisa, de alguma forma, ser capaz de pular daqui para aqui. Para fazer isso, você faz a mesma coisa que fizemos quando eu estava falando sobre imagens. Você pode fazer algo assim e cortar. Isso significa que pulamos para a pasta principal. Agora, quando estamos aqui e eu clico em voltar, e para atualizar, como você pode ver, agora funciona bem Você pode pular de um lado para o outro. Mas isso é bem longo e, para ser honesto, podemos diminuí-lo um pouco. Por quê? Porque a pasta principal está sempre sob uma única barra, como essa Assim, você pode simplesmente colocar a barra e depois o nome da coisa à qual deseja se referir Por exemplo, indexar HTML. Agora, como você pode ver, ainda estamos voltando. O mais legal ainda é que você não precisa fornecer índice em HTML aqui. Você pode simplesmente digitar a barra e ela ainda funcionará Por que é assim? Porque eu te disse que o Index HTML é a primeira coisa que está sendo sempre a primeira coisa que está sendo procurada no servidor. Então você pode colocar o índice HTML, mas não precisa, certo? Você pode simplesmente não colocar nada aqui porque o servidor sempre procurará esse nome especial, Índice em HTML. Então você pode simplesmente colocar assim e funcionará bem, certo? Então, muito legal. Acho que é mais fácil de ler. Como exercício, quero criar um logotipo. Como criar um logotipo, bem, tente encontrar no Google algo chamado gerador de logotipo, ou simplesmente digite no YouTube como criar um logotipo e criar um logotipo do seu site e colocá-lo dentro do seu site como imagens divertidas de CDs Quando alguém clica nesse logotipo, para permitir que ele seja clicável , você precisa criar um link para Ele voltará ao índice em HTML para o índice da página principal do seu site, certo? Por que é legal e por que é importante? Porque observe que alguém pode acessar seu site aqui, certo? Como a primeira coisa que ele vê pode ser sua subpágina, pode ser uma das suas páginas de todo o site Você pode ter milhares de páginas, certo? E quando ele vê essa página de destino, é por isso que ela é chamada de destino , porque ele vai chegar nela, ele precisa saber como voltar para a página principal. E é bem sabido que quase sempre em todos os sites, quando alguém clica em Logo, ele volta para o índice DaDH TML O botão Voltar, o texto inverso. Não significa nada para a pessoa que visita sua subpágina Aqui quando ele pula daqui para aqui. Ele sabe que a parte de trás significa que vamos voltar aqui. Mas, para ser honesto, ele tem o botão da bolsa aqui. Mas se essa é a landing page, é diferente, certo? Ele precisa saber como acessar o primeiro site em que possa encontrar todos os outros links. Então, para o índice HTML, certo? É por isso que é chamado de Índice. Você pode encontrar todos os links para outro site. Então, crie um logotipo, coloque-o aqui e permita que o usuário volte para o lado principal do seu site. Essa é só a lição, obrigado. 30. Links externos | |: Olá, meu amigo de hoje. Vou te ensinar como criar um link para um site externo. Porque às vezes você quer recomendar algo, ou talvez o usuário do seu site esteja no fórum que você criou e queira recomendar algo. Então esse é o momento em que ele precisa ser capaz de criar um link para outro lugar, para um site externo. Então, como fazer isso. Digamos que queremos criar um link para o Google. Então, vamos chamá-lo de Google. E agora vamos selecioná-la e vamos criá-la como âncora E agora, a primeira coisa que você provavelmente acha adequada é digitar algo assim. O Google que vem. Está bem? E vamos clicar nele. Vamos ver o que vai acontecer. Como você pode ver, bem, não consigo acessar o google.com. O que acontece? Bem, para ser honesto, o navegador da Web está procurando neste catálogo o arquivo google.com porque ele não sabe se é texto ou é um Para dizer que este é um site que ele precisa abrir aqui, no navegador da web. Portanto, não é arquivar um único arquivo. Precisamos adicionar aqui um protocolo para isso. Agora, quando clico nele, como você pode ver, estamos no Google e ele abre na mesma guia em que temos nosso site. É assim que funciona. Você precisa adicionar aqui HTTP, não como quando você digita aqui. Aqui, não precisamos digitá-lo porque ele é adicionado automaticamente. No entanto, você provavelmente notou que este site é aberto na mesma guia do seu site. Se você quiser abri-la na nova guia, a guia em branco, é chamada de guia em branco, você precisa direcioná-la, ok? Portanto, você precisa fornecer a tag âncora com informações adicionais fornecidas com esse atributo chamado target Por padrão, ele é definido como self. Então, quando alguém clica nele, como você pode ver, ele tem como alvo a guia em que alguém está. Mas quando digitarmos aqui em branco, você notará que quando eu clicar aqui, o clique esquerdo, usando o botão esquerdo do mouse, abrirá na nova guia. Esse é um comportamento salvo para quê, para o botão do meio do mouse. Normalmente, precisaremos clicar no botão da boca média para abri-lo na nova guia, desta forma. Para ser sincero, acho que você não deveria usá-lo. Algumas pessoas o usarão porque acham que o site desse dia é o site mais importante. Mas acho que incomoda as pessoas quando elas sabem que o comportamento padrão é abrir o site na guia atual Eles sabem que, se quiserem abri-lo em outra guia, usarão apenas o botão do meio do mouse. Deixe o comportamento padrão. Estou mostrando que é porque você vai 100% confundi-lo em algum lugar da Internet. Essa é a primeira coisa. E bem, há exceções em que talvez algo assim seja uma boa ideia É uma boa solução. Quando? Bem, imagine que o usuário do seu site tenha algum tipo de progresso do seu lado. Por exemplo, ele está assistindo a um filme ou superior, está assumindo um formulário em que passou a vida inteira, por exemplo, 10 minutos digitando tudo, clicou mal e agora está do outro lado Se ele está assim, então ele simplesmente perde tudo, todo o progresso. Quando ele fica assim e clica mal com o botão esquerdo do mouse, ele está do outro lado. Essa é uma boa solução para isso. Bem, é uma solução simples, mas sim, você pode fazer assim. Como saber se alguém está fazendo alguma coisa? Bem, para isso, você precisa conhecer o script Java. Para saber o que o usuário está fazendo do seu lado, você precisa conhecer o script Java. É um tópico para outro curso. Mas ei, esse é o momento em que você pode usá-lo. Caso contrário, eu não recomendo. Você pode usar um atalho do Met, como você pode ver, para criar links para os internos, e o que é escola quando você adiciona aqui uma coluna como esta, podemos Como você pode ver, criar um link externo um pouco mais rápido porque o protocolo HTTPP Agora você pode digitar o nome do lado ao qual você está vinculando Mas também há um que é chamado de branco, e você pode estar se perguntando por que há algo assim aqui que não usamos aqui. Para ser honesto, isso é uma informação totalmente adicional. Se você não está interessado nisso, você pode simplesmente adorá-lo. Se você estiver interessado, então ouça. L, significa relação, certo? E esse atributo fornece informações adicionais, quais são as relações entre seu site e o site ao qual você está se referindo, certo? Então, por exemplo, quando você está se referindo ao Google, e esses valores aqui estão aqui porque você quer proteger o usuário do seu site. Que bem, olha. Quando alguém clica nesse link, imagine que esse site era malicioso O usuário não saberia disso porque tudo seria executado em segundo plano, bem no plano de fundo do site. Esse site pode mudar essa guia. Imagine que essa guia possa ser alterada enquanto o usuário estiver assistindo a este site. E quando ele voltar a esse lugar, ele não notará porque alguém mudará apenas o Link Pi, por exemplo, alterando o índice para Índice ponto dois, à direita, ou o nome do domínio para algo muito parecido. E ele também, é claro, fará com que pareça o mesmo. Mas que o usuário estará em outro site agora. E, você sabe, ele pode digitar algumas informações tradicionais aqui. Ele pode digitar algumas coisas que não deveriam ir para o site malicioso, certo? Obviamente, quando você está procurando no Google, não precisa se preocupar com nada, certo? Mas quando você está se conectando a algum lugar que você não está, você sabe, 100% de certeza e é uma boa ideia fazer isso Para ser sincero, o problema dessa solução também é que ela foi corrigida, cinco anos, não é mais possível fazer isso porque os navegadores do News simplesmente a adicionam automaticamente. Portanto, não há necessidade de fazer isso porque é um comportamento padrão do seu navegador. Mas se você quiser oferecer suporte a navegadores antigos como esse, como o Internet Explorer e assim por diante, é uma boa ideia adicionar algo assim. Especialmente quando você está criando algo chamado fórum. Porque no fórum você tem bons usuários, e esses usuários podem se conectar a sites, recomendando coisas que você não tem como verificar, porque existem milhares de usuários no fórum e eles podem se conectar a muitos lugares e você não sabe a que eles estão se referindo Então, isso pode causar problemas para os usuários do seu fórum. Você tem muitos usuários no seu fórum. E talvez eles estejam usando o navegador mais antigo. Em seguida, adicionar algo assim a cada link adicionado pelo usuário é uma boa ideia. Caso contrário, acho que podemos esquecer isso. Acho que é porque não é muito necessário. Bem, você sabe, quando você está usando uma imagem, você pode simplesmente esquecer um pouco que ela foi adicionada automaticamente, você não precisa pensar nisso, certo? Mas quando você está fazendo isso manualmente, leva mais tempo para digitá-lo. Para o fórum, sim, caso contrário, não. Mas de qualquer forma, como eu disse anteriormente, observe que ainda estamos usando o espaço em branco aqui, certo? Bem, só é um problema quando você o está usando. Eu disse que deveríamos evitá-lo. Portanto, não use espaço em branco. Use-o somente em situações em que alguém tenha um progresso que possa potencialmente levar a um problema e alguém usaria o progresso. E isso é apenas uma solução simples. Há muitas outras maneiras de fazer isso, não dessa maneira. Isso está nessa aula. 31. #etiquetas: Olá, meu amigo. Hoje você vai aprender o que nossos trabalhos e por que até mesmo se preocupar em criar algo assim? Bem, os rótulos permitem que você salte do seu lado para o local específico em seu site morto que você quer que o usuário salte para. Ok, quando algo é a luz que é útil. Vamos para Stack Overflow. Este é um ótimo site onde você pode encontrar muitos conhecimentos gratuitos de outras pessoas como você. Aquele que está aprendendo, aquele que empresta algo. Então as pessoas compartilham seu conhecimento de graça. E para ser honesto, este é o lugar onde você passa a maior parte de sua aventura de programação ou desenvolvimento web. Então, digamos que aqui é um tópico como centrado horizontalmente no elemento no futuro, você vai querer aprender isso usando, por exemplo, CSS. E há muitas respostas aqui, certo? E vamos imaginar o corante quer compartilhar essa resposta. E vamos copiá-lo, e vamos colocá-lo aqui. Como você pode ver, estamos no topo do site. Então compartilhar algo assim é jazz, não é bom, certo? Porque você vai precisar enviar a pessoa com quem você quer compartilhá-lo onde isso é bom, certo? Use o número da solução baba, marca baba, ele precisa rolar para a solução que seria estúpida ou usar a solução que foi criada pela pessoa. Estúpido, estúpido. Aqui temos um botão Compartilhar. E quando eu copiar e colar aqui, bam, estamos instantaneamente nessa resposta. O que mudou? Olhe aqui para o link. Temos algo assim. Hash e o número. E este número depois do hash diz que precisamos saltar para este rótulo específico. Considerando que este rótulo eu posso ver, você pode fazer. Ok, vamos usar o controle de atalho, por favor. Mais três mais I. Vamos usar o inspetor aqui. No Chrome, é Controle mais 3 mais J. E vamos pular aqui. Talvez ser pira seja a chave. Aqui. Como podem ver aqui, temos este número aqui. Então, para criar um rótulo, você precisa digitar o quê? Tipo Angkor, o nome do trabalho. E então alguém no navegador precisa digitar algo assim, ou você pode digitar, certo? E, em seguida, o navegador da web irá saltar para este lugar específico em seu site. É assim que funciona. Ok, vamos fazer isso. Vamos fazer isso. Quando estamos do nosso lado, não temos um pergaminho porque não temos conteúdo. Então precisamos criar conteúdo ou criar algumas etiquetas de linha de pão como esta, por exemplo. Ok, vamos criar alguns deles. E então vamos colocar aqui algo assim. Vá para o topo. Então, vamos criar uma âncora que nos permitirá ir ao topo do nosso site. Ok, então vamos fazer isso. Não o quê? Ir para o topo, algo como se eles fossem para o topo. Agora, quando pairarmos aqui, vá para o topo, como você pode ver, não estamos no topo, Garcia, no fundo do nosso site. Isso é porque esta coisa foi adicionada aqui, mas nós não temos âncora que b pode ir para, certo? Precisamos criar a mesma coisa que eles fizeram aqui, certo? O que é que eles fizeram? Um nome, certo, então ancorar com o atributo nome. Então vamos criá-lo nome atributo e vamos chamá-lo vai para o topo. Agora, vamos aqui e eu clico nele. Como você pode ver, podemos saltar para a droga. E isso é muito legal, certo? Podemos saltar para qualquer lugar que quisermos para que possamos, bem, isso é muito útil para escrever porque podemos colocar, por exemplo, no canto inferior direito que vão para dub quando alguém rola muito longe e ele quer ir para DAPI, pode apenas clicar sobre ele e saltar para o topo. Mas seria ótimo se esses botão ir para o topo se moveria com o pergaminho. Mas vamos aprender sobre coisas assim, como colocar as coisas no canto inferior direito e como movê-las quando alguém rolar no futuro. Então esse não é o tópico desta palestra. No entanto, estes muito útil também, certo, porque faz a sua chamada, o seu site um pouco melhor para o usuário. Então vá para Dub, funciona bem. Mas vamos imaginar que temos a parte posterior em algum lugar, certo? Então vamos imaginar que temos as pesquisas sobre Knaflic. E vamos dizer que queremos saltar para ele, certo? Então o que precisamos para criar uma âncora, e vamos para postar, por exemplo, o número 45815, certo? Eu não sei. Talvez digamos que este pulso é este número. Então agora vamos criar âncora de taxa aqui, e vamos nomeá-lo assim, certo? E como pode ver, funciona bem. Quando eu clico nele, eu tenho que pausar Sobre Nada. Quando eu clico em, vá para um topo, eu vou aqui. Mas há um problema porque usamos âncora para Walt, para texto inteiro e deve ser usado para links, ok, não para texto inteiro. Assim chamado resolver este problema, por exemplo, como este. Como pode ver, funciona bem. No entanto, digamos que no futuro você então JavaScript e você quer, por exemplo, extrair o texto aqui, certo? Então, no lado de marcação esforçado, aqui está este rosa. Acredite em mim, não se chama isso de algo assim aqui. Então, talvez vamos colocar aqui. Vamos ver o que acontece. Temos espaço aqui. Por que é assim, porque o parágrafo apenas adicionar alguma margem para a parte superior e inferior. Ok, então esta solução também não é boa. Estas não são uma solução. Sim, podemos usar o ID, o ID do atributo, e isso é chamado ele iria para o topo. Quero dizer, não é bom em cerca de 450. Como podem ver agora estamos aqui. Você não pode usar o atributo name aqui. Simplesmente não vai funcionar. Como pode ver, não funciona certo? Ir ao GDT funciona porque está sob um nome, funciona apenas na pilha, ok? Então você precisa usar ID para fazê-lo assim. E você pode estar se perguntando por que se incomodar em usar esse link aqui. E poderíamos usar a identificação que pode ver qualquer coisa. Para ser honesto, essa é uma pergunta muito, muito boa. E você pode até encontrar uma pergunta como esta neste estouro de pilha. Se quiser, pode lê-lo e encontrá-lo. Isso é um exercício para realizar. Basta ir lá e tentar encontrar este tópico porque, bem, você sabe, você precisa conhecer este site. Muito boa noite. Este é um dos melhores sites onde você pode encontrar soluções. Ok, então leia sobre isso. Mas também vou dizer algo de mim mesmo, está bem? E a primeira coisa é que quando você estiver usando a tag âncora no futuro, você vai aprender algo com o CSS e Eve que você quer, você sabe, estilizar cada âncora, então cada link, então isso pode causar alguns problemas, certo? Então a solução como esta é melhor do que, certo? E principalmente a solução será a melhor. Mas há sempre mau, certo? Pode haver uma situação em que você deseja colocar dois valores aqui e outro valor, por exemplo, para o ID. E o problema é que você pode ter dois valores em ID, ok? Não vai funcionar se você parar de trabalhar. Quando eu clico nisso, ele simplesmente não funciona. Só podemos ter um valor aqui, está bem? E isso causa problema. E eu acho que é por isso que o Stack Overflow tem a solução porque, como você pode ver, tem sido muito semelhante aderência aqui. E você pode ver que eu tenho certeza que eles estão usando algo em segundo plano. E eles simplesmente não querem se repetir. Então, pode haver um momento em que você simplesmente não pode usar ID. A maior parte do tempo você pode. Ok. E eu prefiro usar a versão ID. Mas IV, há algum dia em que você pode estar se perguntando hmm, eu preciso adicionar aqui outra identificação. Então você precisa ficar com essa solução, ok? Isso também é mais bem suportado. Mas, para ser honesto, isso é suportado, eu acho que mesmo no Internet Explorer 6. Então eu não acho que devemos nos preocupar com o apoio agora. Você pode apenas mais, sobre, sobre fazer tudo. Então, a maioria do tempo usa a solução. É bom saber que há uma solução como esta, porque você vai precisar com outras pessoas que estão usando a solução. E essa é a diferença. Eu também gostaria de acrescentar nesta palestra que você pode ir para o topo um pouco mais rápido. Você não precisa fazer algo assim. Porque imagine que, Ei, digamos que nós adicionamos algum conteúdo aqui mais tarde para o nosso site. E o nosso top é onde não está no mesmo lugar, aqui e agora. E se você digitar aqui em cima, você sempre pula para cima. Você não precisa, você não precisa mesmo criar o rótulo. Ele sempre funcionará em nosso site. Você digitou, você está no topo, ok? Você também pode digitar o hash, e eles também contaram. Então, há duas versões, top ou o único hash Tosh, ok? Eu prefiro este porque bem, ele diz o que queremos alcançar aqui, certo? Ok, então mande alguém para o topo, certo. Esta coisa é um pouco menos descritiva, certo? Então use esta versão, eu acho, para enviar alguém para o topo. Isso é apenas uma boa lição. Muito obrigado. 32. Como criar um link para e-mail?: Olá, meu amigo. De todos os lados, você deve sempre fornecer uma informação de contato para você, certo? Então você deve fornecer pelo menos um e-mail, números de telefone, amostras assim, certo? Porque aumenta a credibilidade do seu lado. Como fazê-lo corretamente? Bem, você poderia digitar algo assim. Seu nome de e-mail, domain.com. Tudo bem, parece assim. E o programa é que é só um texto, certo? Eu acho que será melhor que quando clicarmos nele, executemos seu programa que está instalado no computador do usuário que lhe permite enviar e-mails. Isso aumentaria que diminuiria o tempo que ele precisa para enviar um e-mail para entrar em contato com você. E, sabe, tempo é dinheiro, certo? Para todos. E eles vão apreciar algo assim. Como fazer isso? Bem, para fazê-lo, você precisa criar a tag âncora. E você pode usar emit para isso para ajudá-lo com o valor masculino 2 para o atributo de uma referência, certo? E aqui você coloca o nome do e-mail que você quer enviá-lo para. E então aqui você arrasta o texto. Deve ser isso que deve ser visível como, por exemplo, e-mail, qualquer coisa, certo? E agora, como podem ver, temos algo assim aqui. Quando eu clicar nele, Eu tenho uma tonelada lá, programa bert instalado no meu computador e agora eu posso enviar aqui instantaneamente seu principal. Então isso é muito legal, certo? Porque ele executa o programa que está instalado no meu computador. Se alguém estiver usando o celular, ele executará o aplicativo móvel que lhe permite enviar o e-mail que. Então isso é incrível, certo? E é tudo para esta palestra? Bem, a primeira coisa é que quando você seleciona a imagem assim, isso é legal que quando você adicionar agravamento usando aqui, ele vai notar que o texto foi e-mail e ele vai colocar o e-mail instantaneamente aqui. Isso é legal, certo? São speedups, até as coisas um pouco mais, certo? Como pode ver, ainda funciona bem. Você também pode adicionar o assunto, ok, então podemos fazer algo assim. Isto é como, por exemplo, Pergunta, assunto é igual pergunta, pergunta deste lado. Sobre gatos, algo assim. Então este é um assunto padrão. Agora, quando eu clicar nele, você vai notar que aqui no mapa eles fora em poesia ver é assunto. E temos com a sua pergunta deste lado sobre GOT, isso é muito legal porque algumas pessoas não colocam assuntos desses. Então alguns deles puxados com assuntos que não se conectam ao texto. E essa coisa permite que você tenha algum tópico padrão que pelo menos conecte o Eu também de, bem, ele veio da direita? Então você pode colocar aqui o assunto padrão usando a construção assim, ok, então fez o cólon do que o macho, então o ponto de interrogação que o assunto é igual a sinal, e então o conteúdo do assunto. O padrão, embora eu recomendo fazer estes swing, é nesta palestra? Nota, podemos usar o endereço de volta. Isto é muito útil para que possamos colocar outra pilha como esta neste. Eu gosto de tê-lo formatado assim e y até mesmo se incomodar em fazê-lo. Bem, você informa adicionando a etiqueta de endereço que o conteúdo dele é apenas um endereço. Ok? Por que se preocupar em fazer auto necessário? Porque o Google sabe agora que este é o endereço, ok? Então você poderia fornecer-lhe mais informações como, por exemplo, seu nome e sobrenome. E por exemplo, você pode colocar aqui, onde você é, de onde sua empresa está prosperando? Ou você pode colocar esse número frequentemente e assim por diante, direita, na pilha de endereços. E, em seguida, o Google vai saber que, ok, este não é um texto sobre o artigo que você está, por exemplo, mostrando no seu lado ou um produto referente lá que você quer vender. Este é apenas um endereço, ok, esta é uma informação adicional para o Google. Você também deve notar que o conteúdo aqui está agora escrito usando a tag itálico aqui é como um conjunto de etileno em cada pensamento. Nada mudou, certo? Quando eu colocar o I ou quando eles removê-lo. Então você pode alterar o comportamento padrão? Sim, você pode fazer isso. Mas para fazer isso, você precisa saber o CSS que vamos falar na lição futura. Obrigado. 33. Link telefônico: Olá, no endereço. Eu acho que é boa idéia também fornecer o número de telefone para você. Também aumenta a credibilidade do seu site. É muito importante, eu acho, incluir o número de telefone. Não se preocupe, mesmo que o seu site seja muito popular, você quer boas algemas. Acredite em mim, eu forneço o número de telefone e muitas, muitas pessoas visitam meu site e é raro que alguém ligue. É uma boa idéia ter um número de telefone comercial de co, é claro, não é uma boa idéia fornecer ao pessoal um número de telefone aqui, porque às vezes você pode obter alguém que você não gostaria de ser chamado por ataques de domínio. Nestes dias, você não pode nem ser gente, então não se preocupe, apenas desde que isso realmente aumentou a credibilidade. Ok, então como fazer isso? Bem, você pode colocar o número, por exemplo, aqui, assim. É importante adicionar os espaços. Eu acho que porque aumenta a visibilidade do seu número de é mais fácil escrever no papel quando alguém diz que o número como este, nós temos esta base não é sem eles, certo? É mais fácil ler e lembrar disso. Então é assim que se faz. Mas o mais importante para nós agora é que podemos criar um link. Está bem? Então vamos concordar com o link. E, a fim de criar um link para o número, nós não digitamos masculino 2, mas poderíamos digitar que dizer. Então são camisas para o telefone, certo? E então o cólon, é importante colocar o cólon aqui e depois o sinal de mais. E então você precisa digitar aqui o código do país que você pode encontrar no Google. Você pode apenas digitar códigos de país. E, por exemplo, para a Polônia, é o quê? É 489. Então, quatro a oito e depois o número que é seu, certo? E agora, como você pode ver, quando eu clico nele, ele quer escolher um aplicativo para executar. Bem, se você tiver um navegador da web conectado ao seu telefone, então você pode enviar o número instantaneamente para o seu smartphone. Isto é muito fixe, certo? Esse é o primeiro, alguém está visitando seu site no smartphone. Ele pode apenas clicar nele e instantaneamente esfriar você. Isso também é muito legal, certo? Porque ele não precisa fazer, vou escrever no papel. Ele não precisa memorizá-lo. Então, é muito legal que ele pode ser apenas clicado e, em seguida, escolher, por exemplo, o aplicativo como aqui. Que tipo de aplicativo, você sabe, Skype, qualquer que as pessoas podem ter um aplicativo instalado que lhes permite chamar usando o microfone no computador também, então eles podem simplesmente clicar nele e ligar para você do computador. Por isso também é tornar mais fácil e tudo o que torna mais fácil para eles será apreciado por eles. Então lembre-se, é legal adicionar algo assim. Então, para fazer isso, você precisa ajustar IPS, dizer ao Scollon o código do país antes do sinal de mais, certo? E o seu número. E aqui, é claro, você pode digitar o que quiser, escrever o que quiser, ou você pode digitar a fonte, por exemplo. Mas eu acho que é uma boa idéia repetir o que isso aqui, porque bem, talvez alguém que não quer usar o aplicativo, talvez alguém queira escrevê-lo. Então, é uma boa ideia colocar assim. Você também pode usar a imagem para isso se você não quiser se lembrar disso. Então você pode usar o cólon e, em seguida, telefonar. E como você pode ver, esta parte do link para o telefone é imediatamente colocada aqui. Basta digitar o código do país do dia e o número que está nessa lição. Muito obrigado. 34. Cabeçalhos h1 ao h6: Olá, meu amigo. Hoje vou ensinar-lhe o que nossos cabeçalhos e quando você deve usá-los? Porque os cabeçalhos irão melhorar o conteúdo do seu site porque você torna a experiência do usuário do seu site melhor. Por que é assim? Bem, o que é um cabeçalho? O cabeçalho é apenas um texto simples. Sim, é. Mas é grande. É ampliado e também está posicionado acima do nosso texto. Ok? E esta ampliação, este alargamento, faz pedir ao utilizador que se concentre neste tipo de textos mais do que o que está sob o título. Certo, então como criamos cabeçalhos em HTML? Para fazê-lo, usamos tag que é chamado, por exemplo H one. E o que eu digitar aqui vai ser um cabeçalho, cabeçalho. A mais importante. Vamos ver. Como você pode ver, nós temos aqui um grande texto, como eu disse, e também é negrito, certo? E também podemos ver que a fusão somou para cima e para baixo. Então este é um cabeçalho e estes com certeza vai fazer o usuário focado nele, certo? Ele vai ler esta primeira coisa não vai se concentrar nas coisas aqui e ele vai se concentrar neste aqui. E é por isso que estamos usando manchetes, certo? Nós os criamos para focar a atenção na chave, a mensagem mais importante do texto. Algumas partes dos textos podem não interessar salmão e títulos permitem que você salte rapidamente para a parte específica dos textos que interessa ao usuário. O título diz ao usuário brevemente e de uma forma breve, sobre o que será o próximo parágrafo, que torna seu texto mais fácil de ler. E se é mais fácil de ler, o usuário é o quê? Mais feliz. Ele é um homem feliz. Agora, isso é crucial para qualquer bom artigo. Ok? Assim, onde nossas manchetes usam, por exemplo, uma manchete pode ser textos escritos em uma fonte muito maior no jornal, como se fossem as legendas de textos individuais. Essa manchete é usada para atrair a atenção ou aumentar a legibilidade dos textos, certo? Ok, então é assim que você cria uma manchete, um J1. Por que é um J1? Bem, h é a primeira letra do cabeçalho da palavra, certo? Cabeçalho Ok, é por isso que é idade. E o legal é que há mais de um cabeçalho H. Bem, você pode digitar a1, a2, a3, 4, 5 e 6. Existem seis versões de cabeçalhos. Qual é a diferença? Bem, isto é um pouco menor do que um. Isto é um pouco menor do que h para, aqui, vamos mudá-lo para idade livre. Isto é um pouco menor do que h e assim por diante, certo? Então você pode ver isso, o mais importante, e eles estão ficando menores por padrão. Você pode alterar o comportamento padrão, mas você não deve fazê-lo a partir deste espaço, do corpo HTML usando CSS que vamos falar no futuro. Vamos pular para o artigo sobre a palestra que você está ouvindo. Observe que eu tenho aqui algumas mensagens que você ouviu nesta palestra. E reparem que tenho bons cabeçalhos aqui. E como eu disse antes, quando você vê o cabeçalho, você pode ver instantaneamente o que está abaixo, certo? Porque o AGI, então por que nós criamos cabeçalho ele? Ok, então essa parte é sobre isso. Então você não precisa ler o artigo inteiro. Você pode simplesmente saltar para a parte específica do artigo e apenas ler a parte que você está interessado em. Assim, isso aumenta a legibilidade do seu artigo e experiência do usuário e o que quer, lembre-se, o que aumenta a experiência do usuário, torna seu site mais exigente. Então, o Google ficará mais alto, e também as pessoas o visitarão mais. Portanto, é muito importante usar cabeçalhos. E o cabeçalho que é H1 deve ser usado apenas uma vez. Isso é apenas algo que você deve pensar sobre cada sub página do seu lado, Ok, site. Então, esta é a mensagem mais importante sobre o artigo que você está descrevendo do seu lado. Ok? Observe também o que aconteceria se eu voltasse, digamos que não vai ser um cabeçalho e M, tudo bem, vai ser aqui assim. O que vai acontecer? Você pode ver instantaneamente que este texto não é tão fácil de ler como antes, certo? É sempre melhor se pelo menos esta coisa fosse ousada, por exemplo, certo? Isto é muito importante para criar cabeçalhos, ok? Acima dos textos que você vai ter abaixo do cabeçalho. Então vamos voltar a isto. Então, como você pode ver, o cabeçalho pode ser estilizado de forma diferente. Bem aqui, está tudo aqui, é maior. E não é negrito mesmo aqui, como você pode ver, é negrito e maior e, em seguida, fica menor com cada cabeçalho. Mas você pode alterar esse comportamento para torná-lo o que você quer que ele seja, mas usando o CSS que você não pode aprender no futuro. Certo, é hora de um exercício. Como você pode ver aqui abaixo, é um texto que vamos agora. Formatar a batida, certo? Porque tudo está em uma linha aqui. Isso não é confiável, certo? Quando alguém vê um grande pedaço de mensagens, ele não vai ler. Lembre-se sobre isso. Então precisamos formatá-lo. Como você pode ver, eu já formatei a batida BAD no código do Visual Studio. Então eu poderia fazer isso como um exercício. Ok, você pode fazer sozinho ou nós somos maus se você quiser escrever. E como você pode ver aqui, temos algo como os conceitos básicos de criação de página, breve introdução. Eu acho que isso parece ser a coisa boa para o cabeçalho, certo? Este é como o tópico principal de tudo abaixo aqui porque não estamos falando sobre o que é um HTML e CSS. Então essas coisas, eu acho que estão conectadas ao cabeçalho principal, então não podemos chamá-las de H2. E esta ala que vamos chamar também de H2, certo? E como você pode ver, isso está ficando um pouco melhor, certo? Porque temos os conceitos básicos de criação de páginas. Breve introdução. O que é HTML? Muito bem, coisas giras são sobre HTML ou CSS. Ok, então aqui vamos falar sobre CSS. Está ficando melhor. Ok, vamos agora, por exemplo, fazer o quê? Penso que temos aqui que tipo de pergunta é respondida pela lei. Então, quais são os impostos? Ok, então eu acho que essa coisa pode ser H3, certo? Porque isto está ligado ao H dois aqui. Então vamos mudar isso para H. frame E também o que é um seletor H livre. E como faço para incluir o arquivo CSS pij uma árvore. E agora está ficando melhor e melhor. Como você pode ver, todas essas coisas aqui. Acho que são parágrafos. Então podemos dizer que isso é algum tipo de texto, ou devemos selecionar todos eles e colocá-los no parágrafo. Então o Google sabe que isso é texto. Ok. Não precisamos fazer isso. Como você notou, provavelmente até mesmo a fim de ver que este é o texto na página. Então, quando você olhar aqui, mas lembre-se sempre desse texto. Se é um texto como um artigo, é boa ideia colocá-lo no parágrafo como este. E você terá que subir, notar que isso não é tão confiável, tão bom de ler como antes, mas é porque, bem, o comportamento padrão para 3, 2 e 1 neste caso não é tão bom, certo? Provavelmente para isso, o que é Seletor? Seria melhor fazê-lo, por exemplo, aqui no centro, certo? Centralizá-lo, por exemplo. E você pode centralizá-lo usando algum tipo de tag que é chamado de centro. Como você pode ver, é um DAG vermelho agora. E é vermelho porque não é mais usado porque coisas assim devem ser feitas através do CSS e vamos falar sobre isso no futuro. Então isso eu meio que trapaceei foi usado há muito tempo em HTML, mas hoje em dia, não use. E provavelmente, bem, estes seriam um pouco mais fáceis de ler se houvesse mais textos, certo? São textos muito curtos. Então, se houvesse mais mensagens aqui, isso vai ficar mais fácil de ler a cada vez, certo? Você também poderia, eu não sei, substantivo verbo que seja, isso, isso vai ser melhor quando o texto for maior, certo? Então, talvez a regra de borda três não seja necessária aqui neste caso particular. Mas bem, provavelmente ninguém iria apenas digitar algo assim para anexar um piloto de caça, usar o link tag na seção da cabeça. Você então lhe dará um exemplo de como, como fazê-lo, certo? E essa coisa, levaria algum espaço? Podemos até fazer algo assim usando algo como Lorem, Ipsum, Atalho Emmet. Como você pode ver, isso está ficando grande, um pouco maior agora. Nós podemos digitar Lorem e podemos, por exemplo, multiplicá-lo por 50, como você pode ver agora é maior e ok, como eu poderia ver é esta bela página e agora ele é grande. Provavelmente textos como esse precisariam ser divididos de qualquer maneira. Portanto, estes também irão apresentar noite quando você quiser algum texto de espaço reservado. E bem, o próximo exercício que eu quero mostrar é como criar os cabeçalhos de H1 para H6. Tentou fazê-lo sozinho com a ajuda de emitido que falamos antes, como fazê-lo? Bem, h multiplicado por 6, como você pode ver, milho procuramos pilhas chamadas h, certo? Mas queremos números lá. Então vamos fazer assim. Estes são números como 1, mas queremos 1, 2, 3, 4, 5, 6, 7. E eu disse que é usado em vez de numerar o cifrão, vamos contar de um até o número que está aqui, escritor. Então temos seis e 12, 34, 56. Ok, isso é, isso é muito legal. Agora precisamos do conteúdo. Então, como criar um conteúdo? Bem, quando você usa os colchetes e coloca o contorno aqui. E como podem ver, aqui, temos o texto aqui. Desculpe, isso está no lugar errado. O conteúdo deve estar aqui, certo? Como podem ver, temos uma mensagem aqui. E também queríamos numerados, mas a partir de um a seis. E como pode ver, funciona bem. H1 para H6. Você deve ter notado que eu cometi um erro e isso está tudo bem porque eu sou humano, certo? Estou dizendo isso porque provavelmente quando você está tentando escrever seu código, quando você está tentando escrever algo para Scott seria sua letra agora? Você vai cometer erros. E você precisa saber que estou preparado antes da palestra, certo? E eu cometi menos, menos erros, porque estou preparado e também tenho experiência neste assunto, certo? Mas nós humanos tendem a cometer erros em não se preocupe, e não se sinta sobrecarregado quando você não sabe a resposta instantaneamente. Quando você está quando algo não está funcionando corretamente, isso é bonito, bastante normal. Ok? Você está no início de uma jornada e mesmo se você está em Vance, se você tem experiência avançada em algo, você vai cometer erros, talvez menos deles, mas você vai agora fazê-los e não sem respostas instantaneamente. Além disso, eu estou te dizendo isso e eu quase não conserto todos os erros no pós-processamento direito. Porque eu poderia apagar o último segundo em que cometi um erro como este aqui e mostrar que não estou cometendo nenhum erro, mas faria você sentir guerras, certo? Porque você vai dizer: “Ok, esse cara não me deixa doente. Como diabos ele está fazendo tudo corretamente, certo? Eu nunca vou ser como ele. Para ser honesto. Você é igual a mim, mas eu tenho um pouco mais experiente do que você. No futuro. Você vai fazer todas as coisas que eu faço tão rápido quanto eu faço. Há também um atalho legal que eu não falei. É a nossa classe Z quando se tem mensagens assim. E ele sobe aqui. Como você pode ver, é difícil ler laranja. Verifique, mude algo mesmo neste texto. E para mudá-lo, você pode envolver o texto usando o atalho Al plus Z, como você pode ver agora tudo aqui é embrulhado, então quando o texto é um pouco grande demais na tela. Então, quando precisar rolar, vai ser embrulhado assim, certo? E você precisa saber que isso muda a aparência do texto aqui mesmo. Não vai ser mudado, mas aqui é mais fácil mudar algo, adicionar um novo texto, certo? Então eu recomendo usar este modo. Essa é apenas a lição. Tenha um bom dia e sempre há, lembre-se que estou aqui para apoiá-lo no caso de você ter alguma dúvida. Tenha um bom dia. 35. cycle vs cite vs q — como citar outros?: Olá a todos. Hoje vou ensinar-lhe a diferença entre a fila parece bom e o imposto sobre o site. Então, hoje vamos aprender a citar alguém como, por exemplo, Albert Einstein. Como você pode ver, para designar alguém que devemos usar a marca em seu nome ou em seu nome e no livro em que ele escreveu ou URL de domingo, certo? Precisamos digitar o site como onde o texto que está em blockquote ou a tag q vem. Então, o conteúdo escuro do site é, por exemplo, o nome da pessoa que estamos vendo. E então o conteúdo está dentro do blockquote. Na tag q. Nós também citamos alguém e aqui nós fornecemos quem disse isso, certo. Mas nós fizemos dentro dele porque ele é como o Adam aqui. Fizemos uma citação, melhor pertencer a alguns do que a 0. E então dissemos que o IED foi definido por Angie Sepkoski, que são o sangue evolui livro. Então nós fornecemos também o livro. É muito importante dizer, dizer de onde vem. Bem, não sabemos de onde vêm estas mensagens. Bem, pelo menos eu não sei. Essa coisa foi dita há muito, muito, muito tempo antes da internet, certo? Então não sabemos exatamente tão triste dizer que vem do livro especificamente, como podemos dizer aqui, certo? Qual é a diferença entre o Q e o blockquote? Bem, como você pode ver, blockquote é aspas em bloco. Significa que quando vamos aqui, é um bloco, o que significa que temos margem para cima e para baixo. Isso significa que o texto não está ao lado um do outro. Não está na fila, como no caso da citação. Para trás. Como você pode ver, a tag q, que está aqui, é inline, certo? Não adicionou a linha brilhante, certo? Então essa é a primeira diferença. A segunda diferença é que, hey, note que temos aqui, aspas, os sinais de aspas, eles não estão aqui. Então essa é a principal diferença. E as pessoas recomendam usar a etiqueta de código para coisas que são apenas 94 curtas, coisas como estas, ok, para maior. Isso é porque essa palavra foi planejada quando alguém criou essa escuridão. Está bem. Você pode ler sempre quando algo deve ser usado. Quando você move o mouse sobre a tag, como você pode ver, o elemento lateral representa uma referência a um trabalho criativo. Deve incluir o título da obra ou o nome do autor, ou uma referência de URL, certo? Ou, e referência em forma abreviada e assim por diante. Mas você pode ver como algo deve ser usado quando você move o mouse sobre o Visual Studio Code, é coisa muito útil. E também quando você clicar aqui neste link ou copiá-lo diretamente para o seu navegador, você pode ler mais sobre isso. Eu acho que isso é muito, muito legal. Então vamos ler esta citação porque eu realmente gosto dela. Vamos acabar com esta palestra. Pensando. Sabe-se que tal e tal ideia é impossível de implementar. Mas há alguns animais ignorantes. Então alguém que é ignorante, então alguém é talvez estúpido, que não sabe sobre isso. E ele está fazendo isso internados. Talvez ele não fosse tão estúpido, como todos disseram que ele tinha razão. É muito legal, aspas, porque mostra que não devemos olhar para definições e acreditar nelas 100%. Porque, bem, sabemos o que sabemos na atualidade, não com o nosso conhecimento atual é verdade, mas talvez, talvez haja algo que esteja faltando. Então pode haver um guia como este com ignorantes. E ele é ignorante e não vai continuar com as coisas que foram ditas. E ele inventará algo. É assim que a invenção ganha vida. Eu realmente amo essa coisa. Então, nem sempre ouça as coisas que estão disponíveis para nós porque talvez, talvez eles não sejam o certo Sempre. Você provavelmente notou que o código de bloco é o que está amarrado de alguma forma e talvez você não gosta de como é estilo. Talvez prefira este. Sempre. Você pode alterar o comportamento padrão assim, mas no futuro usando o CSS. Então não se preocupe, é bom usar as etiquetas como esta para informar que tipo de texto dentro do seu texto maior é, certo? Você informa o Google Board, informa outras pessoas que tipo de texto é esse? É muito importante fazer coisas como esta para tornar seu código um pouco mais semântica. Então, quando você dá significado, significado semântico, você pode, no entanto, temos nosso CSS também adicionar as citações usando entidades que falamos sobre. Portanto, existem entidades como aspas duplas inferiores e aspas duplas à direita. Então vamos criar um sinal de aspas como este. Então você pode conseguir coisas assim. Mas como você pode ver, é um pouco mais difícil e não é a melhor solução. Sss é sempre melhor em casos como este. Isso é uma dúzia. Obrigado. 36. Abbr | dfn: Olá, meu amigo. Hoje vou mostrar-lhe como definir corretamente e usar atalhos em HTML para garantir que os robôs entendam o que você está escrevendo dentro de artigos. Então, a fim de definir algo como nós temos aqui, HTML é um uso de linguagem alvo para a criação de sites. Devíamos dizer que, Ei, definimos algo aqui. E para fazê-lo, usamos uma tag chamada HDFN, que significa definir o f n, certo? E como mostramos isso? Nós apenas colocar o ataque definir sobre a coisa que estamos definindo dentro da tag. Como, por exemplo, parágrafo. Ok? Então este é um par e pilha porque este texto está dentro do parágrafo, certo? E nós precisamos definir o HTML lá nesse parágrafo agora porque a pilha está dentro disso, ok? Então agora podemos ver claramente que aqui está uma definição, então não devemos defini-la mais tarde em seu artigo. Mas aqui ao lado de onde dissemos que quando dissemos exatamente onde especificamos que Haidt aqui é uma definição. Ok? Por que fazemos isso? Porque os robôs vivem, por exemplo, do Google quando veem seu site e vêem que você está definindo HTML. E alguém, por exemplo, quer encontrar a definição de HTML e ele digita no Google, o que é definição de HTML? Você tem uma chance maior de ser mostrado, certo? Porque o Google saberá que você o define. Você não fez apenas um artigo sobre HTML. Você define o HTML. Certo, essa é a diferença. Aqui temos algo bom como o que usamos é chamado JS neste texto aqui. E você pode notar que temos aqui uma abreviatura de atalho, cada abreviatura quando você usa para facilitar a compreensão para os outros, porque nem todo mundo precisa saber o que é JS. Você, então você deve usar algo que vamos descartar, atacar um cabelo de bebê, que é abreviatura, certo? E fazemos assim. Como você pode ver, temos aqui instantaneamente adicionado o que o atributo título onde você especifica o que esses atalhos significa. Script Java, ok, Isso significa JavaScript. Vamos ver o que mudou quando abrimos o Firefox. Como você notou, HTML é escrito por padrão em itálico, certo? Porque não são letras de passo, certo? É a Itália. Tente agora. E aqui js, quando movemos o mouseover, temos informações que ok, então o atalho é para JavaScript e também temos matado as pequenas bolas bem aqui, certo? Então parece que sugere que algo pode estar escondido lá, certo? Quando você movê-los para todo o lado, você vai saber sobre o que é este atalho? E esta realmente boa idéia para fazer essas coisas. Por quê? Porque como eu disse antes, bem, seus alunos, pessoas que lêem artigos não precisam saber todos os atalhos. E quando você usa a tag de abreviação, você mostrou o Google, você se importava com as pessoas, com os usuários do seu site? Aumenta a legibilidade dos seus artigos, certo? Se você aumentar a chance de ser alguém feliz, e se alguém está feliz, Google estes Hapi, ok, isso é, é quando as pessoas vão usar os serviços do Google. E é por isso que usar abreviatura é uma boa idéia. Eu nunca vou abreviar. Você provavelmente notou que HTML também é uma abreviatura. Não só definimos aqui, mas também é uma abreviatura, certo? Então você também pode colocar uma etiqueta dentro de outra etiqueta, certo? Falamos sobre isso. É como uma etiqueta aninhada. Então podemos colocar a abreviatura dela também e dizer que é a linguagem Hyper Text Markup, certo? Como este. E aqui, como você pode ver agora quando movemos o mouse sobre, temos também esta informação. Então, usamos o definido aqui porque estamos definindo-o e usamos a tag de abreviação. Porque, bem, isto é uma abreviatura, certo? Por isso, é uma boa ideia mostrar o que significa. Aqui. Nós só usamos a etiqueta de abreviação porque bem, nós não definimos o que é JS, certo? Nós apenas dizemos, Ei, estamos usando esse caso em particular, JavaScript, isso é tudo parte. Mostramos que é JavaScript para pessoas que não sabem o que significa esse atalho, projetando a lição. Muito obrigado. 37. Etiquetas semânticas <strong><em>, <b><i>e</i></b> vs , , ,</em></strong>: Olá, meu amigo. Você pode criar artigos do seu lado sem formatação, e será apenas um texto simples. Mas quando você olha para texto simples sem formatação, então nós temos, por exemplo, em negrito textos. Então nós tivemos, por exemplo, dizendo ao usuário, hey, você sabe, aqui este C como diz, é as primeiras letras daqui, por exemplo, como este. Então, quando seus textos são apenas textos simples, é mais difícil de ler, especialmente quando é um texto mais longo, certo? Não é que o recriar, por exemplo, usando emit, por exemplo, usando a abreviatura do fórum. E quando fazemos isso como, por exemplo, 30 vezes o texto como este é simplesmente ilegível, certo? Você precisa usar a formatação como, por exemplo, cabeçalho que falamos. Você precisa usar tudo viu alguma coisa. Como se chamam estes? O forte e ousado e outras coisas como esta, mas não vamos falar sobre nesta palestra. Então há uma etiqueta B, eu sabíamos sobre a primeira. Faremos as mensagens de cobalto no segundo em que o fizermos ir. Oito Alec, há também algo como sublinhado e greve subjacente apenas fazer um subjacente abaixo do texto e o S significa greve, e ele apenas atinge através do texto. Essas quatro tags, como você provavelmente notou, são usadas apenas para formatar texto. Então eles mudaram a forma como o texto aparece e para mudar a aparência, você não deve usá-los. Sim, estes são impostos antigos, muito antigos e bem, hoje em dia, nós apenas usamos CSS para conseguir o que essas tags fazem. Quase sempre. Logo vou te mostrar algum tipo de exceção. Mas na maioria das vezes você usará o CSS. Por que é isso? Então, porque CSS permite que você crie phi externo onde você pode mudar como as coisas aparecem em cada página web que você tem. Bem, agora temos apenas uma única página. Então você não deixa que ele mude manualmente seja para iOS. Acho que isto não é nada. Mas mais tarde, quando você tiver, por exemplo, 400 páginas, certo? Então algo assim é muito legal porque você pode mudar de um arquivo externo como algo se foi, nosso logline, certo? Porque talvez mais tarde você não queira algo para ser negrito ou talvez você queira mudar de ball2 data lake ou outra coisa, certo? Portanto, essas coisas devem ser feitas, pode apenas através de CSS. Mas há tags que são chamadas de tags semânticas, o que significa que, em parte, a partir da formatação, elas também têm significado adicional. Que tipo de significado pode ter uma tag que é adicional? Bem, há uma tag que é chamada forte, que por padrão tem um b como formatação. Então, como você pode ver aqui abaixo, antes de fazer isso, certifique-se de ler o manual de instruções quando usamos a tag forte nesta parte dos textos, também é negrito, certo? Mudaria para ser, também é ousado. Então, por que mesmo se incomodar usando forte é porque ele tem um significado adicional. Mas você pode ser agora, tipo, o que, que tipo de significado adicional? Isso, isso não significa nada para você, certo? Porque, ei, essa coisa bolas, essas bolas grandes da mesma coisa, por que se incomodar? Bem, esse significado não é para o usuário. Este significado é para dispositivos, para programas, para robôs como o robô do Google que visita seu site e analisa o texto que você forneceu para o usuário. Está bem. Então isso pode ser algo útil, certo? Sim, porque quando você, por exemplo, fazer essas coisas usando a tag forte e por exemplo, quando alguém é cego e ele tem um bom dispositivo que lê para ele, Isso será acentuado, por exemplo, ele será lido, ler de forma diferente. Antes de fazer isso, certifique-se de ler o manual de instruções direito. Em vez de antes de fazê-lo, certifique-se de ler o manual de instruções, ok, Você pode ficar importante. Bem, para ser honesto, não é perguntar quem decide como vai ser vermelho porque é para os caras que criam programas que vamos ler o seu texto direito bunda. Isso, Maximus, chama suas mensagens de importante. E também throng é usado para mostrar ao usuário que lê seu site. Morto. Esta parte dos textos é importante quando ele lê algum tipo de parte do código de textos e ele vê estes, ok, isso é importante. E por que é importante fazer essas coisas? Bem, quando alguém tem um texto que não tem formatação boa como este, ele vai sair do seu site, verificar. Se ele diz que algumas coisas são ousadas, isso vai fazê-lo ser capaz de saltar em seus textos de um lugar para outro, mais fácil. Ele saberá o que é importante para você, certo? Porque você pode dizer, Ei, isso é importante e seus textos serão mais interessantes por causa disso. E tem uma influência no aumento da sua posição no ranking do Google. Por que é assim? Porque quando alguém não sai do seu site instantaneamente, quando alguém fica bem no seu site, site por muito tempo, Gooten pode saber disso e eles vão saber que, hey, este é um site muito legal, certo? E a segunda coisa é que notar que existem muitos sites que não usam formatação corretamente e escuro. Bem, uma grande competição para você quando você está criando um artigo, certo? Porque um artigo que gee, que você não pode criar sobre, por exemplo, HTML pode ser encontrado na Internet em, eu sei, 100 mil páginas web. Por que o Google recomendaria você? Bem, pode aumentar porque você está usando pacotes como este, certo? Este é um dos muitos fatores que podem ser levados em consideração, certo? Butt, hey, esses pequenos fatores e cada fator, quando você adiciona um a outro fator, então você tem uma chance maior de aparecer no Google para os usuários da internet, certo? Portanto, é importante adicionar a tag forte em seu site para mostrar ao Google que você sabe o que está fazendo, por exemplo, diretamente com seus textos. Quer dizer que você é realmente e uma pessoa que, que, que quer mostrar às outras pessoas algum valor do seu lado, certo? Você não fez, você presta atenção ao que você está criando. Não é como se você tivesse acabado de criar um artigo e você quer vender algo. Prestei atenção em todos os lugares que criei e sei qual parte é importante. É por isso que eu vou, cada parte importante do meu texto torná-lo forte, por exemplo, certo? Ok, é por isso que você faz. É importante saber por que você faz alguma coisa. Porque senão você esquece um valor, certo? Então essa é uma grande diferença entre ler forte e B. Então vamos usar forte em vez de B no caso de quando queremos fazer algo importante. Há também algo como M, que significa ênfase. Significa atos, pressão e comportamento padrão, pois é, bem, a Itália. Percebe que posso ler essa coisa como o quê? Vamos dizer. Eu faço assim. Adoro cães e gatos. Eu rio, gatos e cachorros. Adoro cães e gatos. Ok, então essa coisa, só é útil para mostrar como algo deve ser vermelho. E isso é usado principalmente por outros programas, certo? Não mostra a importância do Reich, o forte, certo? Porque E, você pode ver claramente que quando algo está em negrito em seu site, mas quando algo é usado como estes quando a ênfase é sobre ele. Então, quando a formatação do texto é intelectualmente, não é tão fácil de detectar, certo? Mas mostramos que essas coisas devem ser lidas de forma diferente. Também. Use-o quando você sentir que algo deve ser sotaque. Acenta de forma diferente. E há também algum tipo de algo chamado Mark. E geralmente usá-lo para marcar coisas que são interessantes e dignas de nota. Então imagine que você tem um livro e um marcador amarelo. E pense em que partes de textos você acha que gostaria de marcar como interessantes para que, você sabe, deite lá o que vale a pena repetir, certo? Então, quando alguém quer repetir algo de seus textos mais tarde, ele deve ser marcado. E os textos como estes se parecem com isto. Na minha humilde opinião, deve ser usado apenas em algum tipo de tutoriais onde você quer mostrar que esta parte da definição é muito legal. Ok? Caso contrário, não acho que deva ser usado. Por quê? Porque todos podem considerar algo que vale a pena notar, certo? Por que você deveria decidir sobre isso? Então essa é a minha opinião sobre isso. Temos aqui também um exemplo como este. Css é responsável pela aparência do seu site. Você quer dizer isso. Este CSS é responsável pela aparência. Você é como se certificar que outras pessoas saibam que isso é importante para você. Ok? Como você pode ver, este exemplo se parece com isso. Então temos aqui o CSS em negrito. Quando eu mover meu mouse para cima, nós temos informações. Esta, esta é uma folha de estilo em cascata e representa e aqui nós negrito as primeiras letras, a fim de, você sabe, como mostrar o usuário, fez. As primeiras letras são daqui. É chamado porque enfatiza que isso é importante, certo? Para, para, para, para, para o, para o usuário. E vamos criá-lo por conta própria. Quão alto foi, certo, então vamos removê-lo. E observe que quando quiser remover a etiqueta, precisamos cortá-la aqui e depois daqui. Mas podemos fazê-lo gráficos de contorno mais rápido Shift mais B e apenas digite ataque removido. Ok, contador mais 3 mais p removido, ele age crítico. E agora vamos fazer o que tínhamos antes. Então você quer colocar a marca forte nele, certo? Porque eu acho que isso é importante. Isso deve se destacar de todos os outros textos. Css significa folhas de estilo em cascata. Bem, nós somos o quê? Estamos definindo algo aqui em breve. Então eu acho que é uma boa idéia usar o deck definido, certo? E também esta é uma abreviatura, certo? Então, provavelmente, será uma boa idéia usar uma abreviatura e digitar aqui que significa folhas de estilo em cascata. Estes, está bem? E note que eu tinha antes de usar aqui o Beta. E esta é uma exceção onde você pode usar o Beta porque, bem, você está usando estes apenas uma única vez nesta partícula, nossos textos olho direito, você quer negrito as únicas três letras. Seria estúpido criar seleção especial dentro do arquivo CSS apenas para este bem, ok, se houver um único uso, basta usar o deck de parafusos. Nós não estamos usando a tag forte porque com a única letra não é importante, certo? Então, há casos em que você pode usar o BI, você é solicitado a agir direito? Mas estes são raros. Mas é bom saber que eles existem assim. E como você pode ver, agora, parece com isso. Ótima. Então, como eu disse anteriormente, você quer usá-lo porque se alguém vê textos legais, há menos chances de que eles vão fechar seu site e eles vão gastar mais tempo nele, que tem um enorme impacto direto sobre o seu Ranking do Google, Ok. 38. Sub vs sup: Olá. Às vezes, em seu artigo você vai querer imprimir. Você vai querer montar a carta, a letra única abaixo da linha de todas as outras letras. Então, por exemplo, como nesta situação, certo, agora temos aqui H2O. Bem, os dois devem estar abaixo da linha, certo, de todas as letras. E três aqui devem estar acima da linha, certo? Então deve estar acima x assim, pequena livre ela estará aqui. Como conseguir isso? Bem, você precisa usar o subscrito para imprimir abaixo da linha, ou um sobrescrito para imprimir uma linha mais ousada. Ok, então vamos colocar o pacote aqui, o subduto, e aqui este. E sim, você pode ver aqui nós temos como resultado a coisa que queremos quando algo como essa facilidade útil também, notar que na Wikipédia, quando nós, por exemplo, temos aqui um direito livre a isso, que Estas são referências, certo, que são usadas assim. Inspecione isso. Como você pode ver, eles estão usando este sabão aqui, certo? Não faça este parecer que está dentro do texto principal, certo? É apenas referenciado, certo? E quando eles clicam nele, eles saltam para sua referência, certo? Certo. E bem, este é um bom exercício que você poderia fazer. Crie um artigo, fez algumas referências usando a pilha SAP e também o tipo de referência h para saltar para o local que o usuário deseja saltar quando clicar nele. É só ouvir. Muito obrigado. 39. Texto Preformatted tags: pre, código, var: Olá, meus amigos. Às vezes, há uma situação em que você deseja colar o texto de outro lugar. Como por exemplo, você tem um programa que você quer mostrar aos outros e você quer manter a formatação não é apenas uma instituição como esta, onde às vezes você tem, por exemplo, algum tipo de poema, o verso que você quer mostrar a outras pessoas e você quer manter a formatação, certo? A forma por formatação, quero dizer, todos os recuos que estão aqui, bem aqui que temos fazendo então queremos manter os espaços onde eles estão. Então, quando eu fizer algo assim, quando eu copiá-lo aqui, você vai notar que, bem, não parece tão bom quanto parece aqui. E em casos como este, você deve usar algo ouro é chamado pilha pré-formatada. Então vamos selecionar isso e digitar o TAC prac. Como você pode ver, agora tudo está formatado do jeito que parece aqui. Então esta é uma etiqueta que você usa quando você quer manter texto formatado, ok? Observe que agora cada recuo é mantido direito, e bem, há muitos recuo. O que eu fiz aqui? Eu uso o atalho que é chamado Shift mais Tab, ok? Ele apenas exclui cada recuo na seleção uma vez. Então precisamos fazer isso mais uma vez e mais uma vez. Como você pode ver, agora está de volta a estes. Se você quiser ter um recuo aqui, certo? Em todos os lugares, você pode confiar no tipo de confiança de novo, certo? Então, para fazer isso, você aperta a aba. Então Shift Plus top é voltar um recuo, e aqui, adicionar recuo, certo? E é assim que se usa o pré-imposto, não estes mortos. O que temos aqui é um código, certo? Então esta é uma boa idéia para mostrar ao Google que este é um cout. E vamos canalizar que isso é código usando o casaco de volta. O que faz o código? Fazer? Você informa ao Google que este é um Google cultural? Por favor, não interpretes isto como um texto, está bem? Agora saiba coisas que você deve interpretar. Concentra-te noutras partes do artigo, está bem? Então esta informação para o robô informá-los que este é um policial. O pré-formatado vai mudar para como as coisas vão aparecer no seu HTML. Então nós apenas combinamos esses dois, a fim de garantir que tudo corra bem. E, ao mesmo tempo, para informar seu Google que este é o código. O código pode ser usado em linhas simples, certo? Como, por exemplo, se tivermos essa parte apenas e pudéssemos colocá-la no código, não precisamos usar a palestra pré-formatada aqui, certo? Porque isto é apenas um único alinhamento, certo? Mas você pode usar o código para esta única linha. Então essa é a diferença. E há também algo que isso chama de FAR. Ele significa variável e é usado para mostrar que há uma variável no texto. Repare que aqui temos algo assim. O número 70, 40% maior que o número C. Então aqui está uma variável, certo? Sabemos disso como humanos, mas diremos que esta não é uma única letra como C. ou, por exemplo, como um, certo? Porque, bem, um é algo que é usado em inglês, certo? Vamos chamá-lo de um, e o Google faria. A coisa boa que fez foi um tipo de palavra mal escrita, certo? E a carta mal comportada, não deveria ser depois de ouvir este lugar, certo? Então devemos informá-los que, ei, esta variável, certo? Então nós vamos apenas fazer algo como esta variável. E isso é variável. Observe que eu tive que fazê-lo duas vezes, a fim de informar o Google sobre os títulos de situação, há algo como multi cursores, e podemos selecionar ambas as coisas ao mesmo tempo e adicionar a tag ao mesmo tempo. Isso é muito legal. Como fazer isso? Bem, usamos a saída. Seguramos o lado de fora, ok, segure o Alt no teclado e então faça a seleção aqui e ainda mantenha a tecla Alt. E podemos fazer duas seleções ao mesmo tempo. E agora vamos apertar a variável Enter, abreviação, atalho e tipo. E nós apenas digitamos em ambos os lugares ao mesmo tempo. Muito legal, certo? Repare que esta carta aqui está escrita em Itália ovo, certo? Então, a diferença entre para formatação, mas eles também informaram o Google que isso é variável. Eu sei que você pode estar pensando, bem, eu não quero perder meu tempo e coisas assim. Por que ainda mais ousado? Talvez melhore a legibilidade dos robôs, mas eu realmente não me importo com isso. Certo, isso é um ponto justo. Mas lembre-se que no futuro você vai aprender algo ou este código css e Eva, você quatro exemplos estado usando o VR tac cada variável do seu lado. Então, quando você adiciona essa tag em cada variável, então, no futuro, você pode, por exemplo, selecionar todas elas de uma só vez e alterar a aparência delas. Por exemplo, você pode alterá-los para ser a cor vermelha ou algo assim. E, ou fazer alguns sublinhados. Mas abaixo da letra e as pessoas veriam isso instantaneamente. Ok, então isso é variável e data, humor fazer o seu código, código bem, artigo inteiro mais fácil de ler todo o exercício. Quando você até mesmo ousado coisas como a casca, até mesmo ousado manualmente como este. Você pode facilmente ver, ok, Então estamos procurando por um, certo, mas você pode mudar o comportamento como ele parece, não aqui a partir do CSS que temos falando futuro. Essa é outra lição. Muito obrigado. 40. Multicursor | Pesquisando e substituindo texto em VSC: Observe que na última palestra colamos o código assim. E alguns de vocês devem ter notado que algumas coisas não foram interpretadas. Como o quê? Bem, como as coisas aqui. Por quê? Porque HTML acha que isso é uma pegada. Ele não sabe que tipo é. Mau? Bem, ele acha que é uma armadilha, certo? Porque temos aqui o suporte de abertura que abre o ataque. E o pré-formatado é apenas quatro texto pré-formatado. E não significa que interprete tudo como sexo, está bem? Seria apenas interpretar espaços em branco. Então, por exemplo, recuo e espaços, e assim por diante, certo? Então, como resolver esse problema? Bem, precisamos usar as entidades, certo? O problema é que o braço e que é para reproduzi-lo para que possamos fazê-lo um pouco mais rápido. Mas fazendo esses robôs, o rendimento, isso é primavera. Muitos deles para responder. Bem, podemos fazer isso um pouco mais rápido. - Como? Bem, podemos usar o multi cursor, todo o recurso Localizar e Substituir do código do Visual Studio que é usado primeiro e multi cursor. Assim, podemos selecionar mais de um ângulo usando a direita, a tecla Alt no teclado. Então, quando eu segurar o Alt, eu posso selecionar mais de um lugar, como por exemplo aqui, e então eu posso mudá-los para isso. Agora aqui precisamos fazer o mesmo por essas coisas. Aqui, eu posso sentar, como você pode ver, é propenso a erros. Para que possamos fazer assim. Foi muito rápido, certo? Fizemos isso corretamente agora tudo é interpretado. Correto. Está bem. Mas eu não acho que esta é uma boa solução quando há muitas aparências do dedo, você quer mudar se houver livre? Ok, esta vai ser uma instituição rápida como esta. Você pode até perder alguma coisa. Há muitos deles. Então, como resolver esse problema usando o Visual Studio Code? Bem, podemos usar algo como controle mais atalho F ou Controle mais H. atalho F ou Controle mais H. Isto significa “achado”. Isto é apenas perto de F. Então é por isso que é um atalho como este. Quando você clica nesse controle mais F, você pode tentar encontrar coisas em seu código, como por exemplo, este sinal. O problema é que estamos tentando, encontramos todas as ocorrências de carros dessa coisa, certo? Então, mesmo em lugares como este, ruim, podemos mudar esse comportamento. Então novo encontramos como você pode usar o controle de atalho mais h, a fim de dizer ao espectador tem que ser ou o que deve ser colocado em lugares onde estes dedo é usado. Então podemos colocar aqui, lá entidade. E agora, quando eu clicar nisso, vou substituir tudo no meu código até a morte. Como você pode ver, isso é uma coisa problemática porque nós não queremos substituí-lo em lugares como, por exemplo, que fala, que são redox. Então vamos usar o gráfico de contorno Z para voltar à coisa que tínhamos antes. E agora você quer selecionar apenas o que a Esfinge que estão aqui apenas. Então. Então vamos selecioná-lo. E antes de clicar nisso, vou clicar aqui. Aqui, como você pode ver, é algo como encontrar na seleção. Há também um atalho para ele. Mas acho que é mais rápido clicar nele. Quando eu clicar nele. Como você pode ver, nós selecionamos apenas ocorrências deste colchete aqui, certo? Observe toda a distância apenas na seleção que tivemos. Como você pode ver, ele encontrou 16 deles. E quando eu clicar nisso, BAM, e isso é legal. Não se atualizou. Atualizado corretamente. Então tudo funciona bem e fizemos isso muito rápido, mais rápido do que usar o multimodal multi cursor, certo? Porque agora é só um clique. Mas, claro, você vai usar provavelmente um multi cursor mais rápido se houver apenas livre. Ocorrências são duas delas, certo? Então é mais rápido para apenas rapidamente grego e para baixo, certo? Em seguida, usando este recurso. Mas quando há muitas ocorrências para mudá-las e coisas assim são muito úteis, não são? Só ouviram. Muito obrigado. 41. O que é forma? Noções básicas de formas: Olá para o NG. Vou te dizer o que é um 44 é apenas um documento simples. Algum tipo de folha de papel, por exemplo, na vida real, que permite coletar dados do usuário, certo? Documento que coleta dados. E ele faz isso usando os lugares para preencher que são entradas frias. Então documento que reúne dados usando algo que é chamado de entradas. Tenho certeza de que você tem louco com formulários em sua vida, provavelmente quando você teve que inserir vários dados sobre si mesmo, por exemplo, ou onde você teve que entrar no site, certo? Este é um formulário, este é um exemplo de forma. As outras amostras, por exemplo, o contato, o topo dos sites requer um nome de e-mail e o conteúdo do e-mail, certo? O texto a ser escrito e postado como um post no fórum é um farm. Então você pode ver que a forma é amplamente utilizada. Como criamos um formulário? A fim de criar o formulário que digitamos formulário. Ok, então este é o formulário mais simples criado. E agora, quando o executarmos, você notará que não há nada. Por que é assim porque é apenas um recipiente para entradas. Então, para pensar que permite que você coloque dentro de coisas como dados. Ok, isso é criativo, lado de entrada simples. E vamos ver como se parece. Como você pode ver, é um lugar onde você pode preencher texto, certo? Texto de amostra. Pode escrever o que quiser. E quando eu clico em Enter, como você pode ver, ou é atualizado porque ele tenta enviá-lo para algum lugar, mas bem, nós não especificamos onde. Portanto, esta é uma entrada padrão que você pode criar na tag de formulário. Vamos chamar de login. Porque bem, vamos criar um formulário de login e senha nesta palestra. Como você pode ver agora temos registro antes. Então agora o usuário sabe que ele deve amarrar o login aqui, certo? Então este é um lugar para digitar um login. Ok, vamos agora, por exemplo, pedir a senha, certo? Então, como fazer isso? Bem, nós poderíamos digitar isso manualmente do zero ou podemos copiá-lo assim. Ou podemos usar o recurso Visual Studio Code que permite que você copie sentimos seleção de uma linha inteira onde você tem esses cursor realçado. Ok, então quando eu apertar o botão Control mais C agora, eu posso apenas controlar mais V agora e fazer você copiar toda a linha. Bastante útil, certo? Muitas pessoas não sabem disso, nem eu comecei. Então aqui vamos digitar a senha agora. E você vai notar que você tem boas agora duas entradas, um login FERPA e senha. Vamos adicionar aqui a linha brilhante, então eles estão em outra linha. O problema com isso é, como você pode ver, o, bem, isso não está alinhado corretamente, mas coisas assim são feitas através de CSS. Então não se preocupe com formatação, sobre como parece, coisas assim. Você os vendeu no futuro. Ok. Então aqui está o login, aqui está a senha. E bem, vamos colocar algo no login e colocar algo no passaporte. Como você pode ver, o que eu digitar aqui é visível e não é assim que você deve criar um campo de senha. A entrada. Por que é assim, porque se alguém está atrás do usuário nas costas, ele pode ver sua senha e Hamada gostaria disso. Então você precisa alterar o tipo de entrada. A coisa legal sobre entradas é que você pode mudar o tipo usando o tipo de atributo dado, e você dá uma informação adicional sobre entrada usando este atributo, certo? E você pode mudar para o quê? Para, por exemplo, a senha. E o que isso muda? Como você pode ver agora quando eu digitar as coisas aqui, o possível estes escondidos. Então resolvemos o problema. Portanto, há muitos, muitos mais insumos. E como eu disse anteriormente, o padrão é texto. Então, quando eu mudá-lo em texto e nada vai mudar essa chance no campo de texto inserido texto que você pode preencher. O usuário pode preencher, certo? Bem, vamos fazer isso, por exemplo, assim. Então fica melhor em nosso HTML. E embora existam tipos mínimos, mas aprendemos no futuro, estes como palestras básicas sobre como criar um painel com login e senha. Tudo bem. E há também mais uma coisa que você pode estar se perguntando, certo, nós temos bons dados agora, mas o que fazemos com esses dados? Coisas assim resolveremos nas futuras palestras. Só há lição. Muito obrigado. 42. Enviando o formulário: Olá, meu amigo. Criamos um quatro, mas não podemos enviá-lo, não podemos enviá-lo, certo? Portanto, este formulário é usado menos para alterá-lo. Podemos criar um botão que permitimos enviar todo o conteúdo como este. Então, como fazer isso? Bem, podemos escolher entre a emita, a submissão. E como você pode ver, então nós temos uma entrada que tipo é algum, e ele permite que você clique sobre ele. Como você pode ver aqui é este botão. E por padrão ele não tem agora nenhum texto porque há também um atributo que define o valor para rir de stat. Se nós removê-lo. Como você pode ver, o valor padrão é coro de subbanda. Eu acho que este é um valor muito ruim como um padrão. Então é por isso que emit lhe diz para mudá-lo para qualquer outra coisa. Então, em nossa situação, eu acho que seria melhor chamá-lo de registro de gravação, travar, talvez com o espaço aqui como este, certo? Temos bom agora aqui botão que podemos clicar. E como você pode ver quando clicamos nele, nada muda. Certo, mas onde podemos clicar e algo se atualiza no tempo de execução de burg. Então, estamos tentando enviar algo, mas não especificamos como enviar evento, para onde enviá-lo. E o que enviamos. Vamos fazer aqui uma célula BreakLine. Parece melhor assim, certo? E agora vamos especificar para onde enviamos informações como esta. Fazemos tal coisa usando o atributo action na tag form. Ele diz que devemos fornecer aqui o arquivo ou o caminho para o arquivo que processamos essas informações. Então imagine que você tenha obtido o seu servidor algo como processo de login dot PHP, certo? Por que PHP? Porque, bem, você precisa infelizmente fazer essas coisas nas linguagens do lado do servidor como PHP ou Python, certo? Então você precisa enviar seus valores para a linguagem de programação que irá processá-lo. Então, infelizmente, sim, você pode fazê-lo usando HTML. Lembre-se de que o HTML é responsável apenas pela forma como as coisas são representadas no seu site. Assim, para o conteúdo do seu site, CSS é responsável para torná-lo melhor. Mas você também precisa saber, por exemplo, PHP para saber como processar as coisas. Mas ainda assim, você precisa primeiro aprender a criar fóruns, certo? Então essas coisas que eu diria são muito úteis. Então esta ação diz que vamos enviar o conteúdo daqui para este phi. E para processá-lo, você precisa saber, por exemplo, PHP, certo? Mas não pare com essa palestra porque é importante, mesmo que você não saiba o pH sendo uma pessoa que conhece HTML e CSS porque às vezes você não precisa conhecer outras linguagens como PHP porque bem, talvez você seja responsável apenas por HTML e outra pessoa vai processá-lo, então você precisa ainda saber como enviar estes corretamente porque ele não termina aqui. Olha, quando eu clico em Login agora estamos sendo enviados para este processo de log dot PHP. E aqui está um ponto de interrogação. E depois deste ponto de interrogação, devemos ter valores a partir daqui. Mas nós não. Por que é assim porque nós não nomeamos a entrada, você sempre precisa nomear a entrada. Caso contrário, o computador não saberia qual entrada vai enviar qual é qual, porque, bem, nós digitamos aqui registrando, mas não está dentro dessa tag, certo? Então precisamos dar um nome. E vamos chamá-lo de registro, por exemplo. E aqui vamos chamá-lo, por exemplo, bem, senha ou podemos chamá-lo de PW. Eu acho que vamos chamá-lo w, Então nós não ficar confuso por ter tempos livres senha. Podes chamar-lhe o que quiseres, certo? Mas deve ser um nome auto-descritivo. Então, quando você olha para ele, você sabe que Ok, aqui é possível. E o que muda agora? Agora, quando eu digitar algo e eu clicar em login, como você pode ver, a primeira coisa é que Firefox, notar que nós digitamos a senha é porque nós usamos a senha tipo de entrada e ele sabe que há uma senha, certo? Por isso, não podemos visitá-lo. A segunda coisa é que aqui, depois do ponto de interrogação, temos algo bom como aquele registro que digitamos aqui. E o valor que eu digitei logo após ele, temos um bom sinal que é usado para conectar mais de um nome como este. E aqui temos BW, certo? A coisa que digitamos aqui e o valor para ela. Então o PHP anula agora que aqui está escondido o valor para estes e aqui, aqui está o valor oculto para estes. E o ETE pode fazer o que quiser com ele. Você pode alterar o banco de dados que, se houver um login como o, o, o PW está conectado a este login e assim por diante. Mas há um pequeno problema que fizemos aqui usamos o método padrão, que é get, que envia valores como este. Dentro do link. O problema é que não é seguro, seguro, certo? E alguém copiou e enviou para adiar a mão, ele podia ver a senha de alguém. Então, para situações como estas, nunca use o GetMethod, use o post one, que como você pode ver agora, quando eu faço algo assim, ele ainda envia tudo para o processo que login dot PHP, mas não é visível aqui. Está no fundo agora. Pode ser interpretado, então não guerra, certo? Então você deve enviar usando este método. Observe também que o problema com o envio desta forma é que estamos sendo enviados para outro site. Bem, poderíamos nos enviar o mesmo site. Mas o problema é que há sempre um recarregamento do site. Se você quiser enviar coisas para fundos ou alguém não vai vê-lo, você precisa aprender linha JavaScript e você precisa para pousar o ajax ou algo assim. Agora que temos que usar esse recurso que permite que você envie coisas em segundo plano, ok? Então você não precisa especificar isso. Você apenas pegar as coisas e, em seguida, enviá-las em segundo plano usando o JavaScript e esse recurso. Então esta é talvez a melhor maneira, certo? Mas ainda assim, como uma pessoa que está aprendendo HTML, você precisa se lembrar de nomear cada entrada, ok? E, claro, fazer um tipo de entrada enviar que permite que alguém clique nele e envie coisas. Lentes. Tem menos do que muito obrigado. 43. Entrada de rádio: Olá, meus amigos. Hoje vou ensinar-lhe como usar e quando usar entrada de rádio, como criá-lo? Bem, usamos a entrada e podemos usar o Emmett e criado usando esse tipo de rádio, como você pode ver aqui, temos dois atributos adicionais. Lá vamos nós. Agora fale sobre breve. Então, como é que parece? Como você pode ver, é um ponto em que você pode clicar. Então isso é algo que você pode escolher, certo? Se criarmos mais deles, você tem três pontos, certo? E ao lado desses pontos, você pode digitar, por exemplo, o tipo de alavanca, certo? Você pode perguntar às pessoas sobre o tipo de entrega que eles querem ter em sua loja, por exemplo, se eles quisessem usar a carreira do IBD, querem pegar a partir de algum ponto ou talvez as taxas de quebra-cabeça usariam mais barato e assim por diante, Certo? A guia Coréia e assim por diante. Então você pode usar isso nas lojas. Então, por exemplo, digamos que aqui é que a Coreia, aqui está um ponto de pico e aqui é um escritório de pulso. Certo? Agora temos o quê? Texto ao lado de cada botão, como estes, ao lado de cada tipo de rádio, certo? O problema é que quando eu clico em um deles, podemos escolher todos eles de uma vez. E não é isso que queremos alcançar, certo? Quando alguém vai aparecer em seu site, ele pode, ele deve ser capaz de escolher apenas um tipo de alavanca chegou. Ele pode escolher carreira e escolher. Eu aponto ao mesmo tempo para o pai quando você deve usar entradas de rádio. Mas para fazê-los funcionar assim, você precisa dizer quais entradas de rádio estão agrupadas. Certo, então é quando você deve criar algo. Como se chamam estes? O atributo name e você deve ter todos esses nomes definidos com o mesmo valor. Então, por exemplo, tipo de entrega como este. Observe que quando estou criando tipos de entrega, eu não uso espaços aqui, certo? Então eu não estou fazendo algo assim. Eu estou usando o sublinhado quando eu estou fazendo outro prêmio como um valor dentro deste nome, certo? Ou você poderia fazer algo assim, mas nunca usar espaços. Ok, então agora eu disse pro Browser que este é um grupo de botões de rádio, certo? Então vamos agora quando eu clicar em lang deles, os outros não são verificados RMN, certo? E é isso que queremos alcançar. Então, podemos perguntar, por exemplo, que tipo de entrega você quer escolher? Escreva, algo assim, ok, para que eu possa escolher estes, estes ou estes. Poderíamos fazer um pouco, mas eles estão procurando adicionando alguns pontos de interrupção, certo? Como este. E como você pode ver, parece melhor. Ainda há um problema. Observe que eu não posso clicar em textos e eu acho que isso não é bom para o bem do seu site, porque esta maioria das pessoas que apenas clicar no texto ao lado desses botões, certo? Para fazê-lo funcionar, você precisa de alguma forma conectar este texto com essa entrada específica, certo? E para fazer isso, você precisa usar uma tag chamada label. Então dizemos que esta coisa é um rótulo para, e aqui nós especificamos para o quê. O problema é que não temos nada a que possamos nos referir nesta entrada, certo? Toda essa entrada parece a mesma. Então, como podemos dizer que estes rótulos são para esta entrada? Para fazê-lo, precisamos criar atributo ID e torná-lo único. Podemos colocar aqui o que quer que seja, certo? Então, por exemplo, assim. E agora quando eu clico neles e eu posso ir clicando sobre isso, aqui, não funciona, certo? Mas aqui eu posso ir em mensagens e funciona bem. Mas, você sabe, digitar o que quer que seja aqui não é uma boa idéia porque não é como seu código deve ser, certo? Então eu sugiro apenas digitar aqui também a mesma coisa que está no nome, mas aqui fora um número como, por exemplo, entregar um tipo 1, certo? Como este. Certo, então precisamos de mais disso. Então vamos copiar isso enquanto você usa o Alt. E vamos copiar isto aqui, assim. Vamos selecionar isso e usar a resposta assim ao mesmo tempo. E vamos criar rótulos. E vamos copiar isto aqui. Como contra esses atalhos estão fazendo uma digitação e ao criar o código bit mais rápido. Então nós temos isso e agora podemos criar no clique em textos e tudo funciona bem. Mas, infelizmente, não é tudo parecia bem e criar uma entrada que é o livro de envio. E nós, por exemplo, dizemos aqui areia e bem, vamos colocá-lo na forma certa? E ação com um B, por exemplo, formar esse PHP. Observe que quando eu clicar em Correios e obrigado clique em Enviar, temos aqui algo como tipo de entrega no grau quando eu digitar não vai clicar em legal aqui temos tipo de entrega em. Ajuda alguma coisa? Só sabemos que a alavanca para redigitar foi escolhida certo? E há tudo, não sabemos que tipo de carreira foi escolhida, certo? Este, este ou talvez um x1. E isso é muito importante, certo? Porque não podemos processar esta informação. Para poder processar essas informações, precisamos mostrar quando definir algo como violeta novamente. E bem, podemos chamá-los do que chamamos aqui, certo? Porque esta é uma caldeira como o mesmo comprimento estava aqui. E precisamos repetir isso também nesses lugares. Então este é o pico de ligação traço. Lembre-se que eu não uso essa base aqui, certo? Dash Point e os correios assim. E agora não está morto quando eu, por exemplo, escolher o ponto de coleta em uma areia. Agora sabemos que o tipo de entrega é igual a escolher um ponto e eu posso processá-lo direito? Agora posso mostrar que o cara aponta para o usuário, ou posso dizer para premiar os prêmios e assim por diante, certo? Então agora funciona bem. Então, como você pode ver, nós precisamos DIBL um monte de coisas aqui, a fim de fazê-lo funcionar corretamente. Nós ainda podemos melhorar tudo isso colocando tudo em algo que é chamado de conjunto de campos. Como você pode ver, agora, temos algum tipo de fronteira em torno de todas essas coisas aqui. E assim podemos dizer que isso é sobre essa coisa específica, certo? Este, este grupo. Agora, quando temos mais, tínhamos mais coisas para escolher. Como você pode ver, você pode distinguir claramente isso para estes formados a partir destes, certo? Bem, este campo definido, certo? Este grupo de coisas, não porque temos tudo de uma forma. Então é por isso que me sinto triste. É muito legal. E também temos algo que é chamado de lenda. E olha, eu não preciso usar roubo. Dan, e eu podemos fazer algo assim. E como podem ver, este texto foi para a fronteira. Parece ainda melhor agora. Então isso é usado para essa coisa. Na próxima palestra vamos falar sobre caixa de seleção, como usá-los e como fazê-los corretamente para que eles possam ser utilizáveis. Quando você estiver processando o conteúdo mais tarde na lição. Obrigado. 44. Caixas de verificação: Olá, meu amigo. Hoje você vai falar sobre caixas de seleção. Bem, vamos criar outro conjunto de campos e vamos usar a entrada que é chamada caixa de seleção. Então o tipo é caixa de seleção. Como é que ele se parece? Como podem ver, temos aqui uma caixa que podemos marcar e também podemos desmarcá-la. Então a diferença entre isso e a coisa que eles evoluem aqui é aquele rádio. Quando você escolhe uma das coisas aqui, como você pode ver, eu não posso e escolho. Preciso escolher pelo menos uma das opções aqui. Posso checar e desmarcar. Ok, essa grande diferença. E também quando você cria muitas caixas de seleção linha, então você pode escolher Mad Men deles de uma só vez, certo? Então você pode usar essas quatro situações como estas, por exemplo, qual é o seu hobby, certo? Bem, alguém pode ter mais de um pulo, certo? Por exemplo, alguém gosta de nadar. Ele gosta de jogos de vídeo, e ele gosta, por exemplo, de programação, certo? E bem, ele pode querer escolher todas essas opções porque são todas as cópias dele, certo? Então é quando você usa as caixas de seleção porque aqui você precisa escolher uma e você precisa escolher uma. Talvez aqui, talvez alguém não goste de nada disto, certo? E não é o passatempo do caso, então ele não precisa escolher nada. Certo. Então, é quando você usa a caixa de seleção. Quando você pode usar talões de cheques? Além disso, digamos que você peça algo como, você quer emitir uma fatura, por exemplo? E ele pode então verificar e ver se há algo assim. E ele mostrará o formulário para colocar os dados sobre a fatura, certo? Se a pessoa desmarcá-la, os dados desaparecerão. Ok, agora vamos nos concentrar em, bem, fazer esta coisa aqui corretamente porque notem que, bem, nós devemos colocar a entrada aqui em primeiro lugar, porque isso é entrada para tudo como 14 pneus longe. E vamos criar rótulos, certo? Quatro. Então vamos criar um rótulo que será quatro, vai torná-lo menos grato por todas essas coisas que vinhos. Então rotular para e para nadar. Aqui nós jogos de vídeo e programação. Agora, quando eu clico no texto ao lado dele, como você pode ver, eu posso escolhê-lo. Então agora vamos nos concentrar no nome, porque bem, quando enviar dados e de alguma forma analisá-los mais tarde, certo? Bem, não pergunte. Mas talvez alguém, é por isso que precisamos saber como nomeá-lo corretamente. Porque agora, quando eu enviar, como você pode ver, bem, entregar o tipo é aqui parte e nossa esperança não é. Então, como podemos chamá-lo? Há duas maneiras de enviar caixas de seleção. Bem, a primeira maneira é dar o mesmo nome como as identidades. Observe que quando eu escolher, por exemplo, a programação e jogos de vídeo. Agora, você vê que os jogos de vídeo estão ligados, a programação está ligada. Agora alguém no servidor pode procurar coisas que estão bem. Se estão ligados, significa que alguém verificou, certo? No entanto, bem, analisar algo assim nem sempre é fácil. Está bem. Nós vamos, você precisa saber exatamente que tipo de nomes estão aqui, ok? Acredite em mim que isso torna as coisas um pouco estranhas e na parte dos dados, ok, você quer o lado do servidor. Então Maasai e as pessoas chamam tudo o mesmo como, por exemplo, neste caso, como BIM. Mas agora há um problema. E eu tenho, quando eu clicar em Enviar, como você pode ver, Hobbes e Hobbes sobre isso. Não sabemos qual zona de cópia. E é por isso que agora precisamos criar valor para cada guia. Então precisamos fazer alguma ideia. Então, para natação jogos de vídeo e programação. E agora quando eu escolher os ganhos de vídeo na programação, podemos ver aqui jogos de vídeo Hobbes e programação Hobbes. E agora, no lado do servidor, podemos apenas procurar o hobbyName. E sabemos que o videogame e a programação para a sua amostra foram escolhidos. No entanto, você precisa saber. É bom saber onde as linguagens sonoras não serão capazes de analisá-lo corretamente. Se você não adicionar aqui colchetes, ok? Então, ou você usa o mesmo nome, lembre-se que você pode precisar, não significa que sempre precisa adicionar esses colchetes aqui. Então isso seria como no servidor agora, ligando variável Guan. Então seria algum tipo de RA, valores como este. Não se preocupe se você não entender você agora porque você deve se concentrar em HTML, ok, em criar coisas como como apresentar os dados, ok? Mas você só precisa ter em mente, talvez algum dia quando você quiser processar esses dados, quando você estiver indo para aprender o PHP, por exemplo, JavaScript. Talvez você precise adicionar isso, nem sempre. Talvez você precise adicioná-lo, certo? Então é assim que você adiciona a caixa de seleção e também a torna dessa forma para que outros possam processar os dados que estes não podem ser enviados. Essa é apenas a lição. Muito obrigado. 45. Atributos mais usados em formas mais frequentes: Olá, meus amigos. Hoje, como vai ensinar-lhe os atributos mais utilizados em formulários de entrada? Vamos nos concentrar no verificado. Observe que quando estamos aqui, estamos perguntando a alguém que tipo de Delhi você quer escolher? E sempre em casos como estes, devemos escolher algo por padrão. Devemos verificar algo por padrão. Por que é assim? Porque imagine a forma em que as pessoas estão lá coisas. Este formulário é bastante longo. E por padrão, por exemplo, maioria das pessoas escolherá a carreira, certo? E baseado nisso, você pode mostrar outra coisa, certo? Se alguém escolher o porco que eu aponto, você pode mostrar outra coisa para ele. Então devemos escolher uma opção padrão para que ele não precise clicar nela aqui. Pode mudar depois, não se preocupe. Podemos por padrão definir, por exemplo, aqui, marcada. Então agora, como você pode ver, esta primeira coisa é verificar quando eu atualizar a página. Sempre distinto por padrão é definido, mas é claro que podemos mudar o para outra coisa mais tarde, certo? Mas por padrão, definimos para Kourion. Numa situação como esta, é uma boa ideia. Mas em situações como Qual é o seu hobby? Ainda é um poço, certo? Porque o que podemos fazer usando algo assim. Mas o problema é que por que escolheríamos o hobby de alguém, certo? É dia de Hub não ser nosso. Não devíamos fazer isso. Mas no caso de eu ver, que tipo de entrega você quer escolher? É boa ideia atingir um deles também. Porque na maioria das vezes você escolheria Courier de qualquer maneira, por exemplo, certo? Ok. Então, esse é um, use o verificado. Você provavelmente percebe que, bem, não há valor para este atributo. Como é possível? Como há alguns atributos que o volume é o mesmo que o nome do atributo, como estes, verificado é igual a verificado. E para ser honesto, isso é auto-descritivo o suficiente? Quando você olha para ele? É o suficiente quando você vê que acabamos de adicionar esses atributos. E não precisas de pôr isto aqui, está bem? Navegadores, sabemos que quando você colocá-lo assim, É você apenas como adicionado este link aqui. Ok? Agora mais alguns, mais alguns atributos como este que falamos. Assim como, por exemplo, necessário. O que é que ele faz? Bem, imagine que você está criando um texto de entrada, tipo de entrada. E você está pedindo a alguém o número da rua, número da rua, certo? E por exemplo, nome de rua como este. E acredite em mim, quando as pessoas digitam aqui o nome da rua, seja lá o que for, eles tendem a esquecer de colocar o número da rua e depois, coisas assim causam problemas porque quando alguém pede uma coisa e ele paga por isso, você precisa ligar para o cara e Pede-lhe o número da rua porque não lhe podes enviar uma entrega, certo? Porque você não sabe para onde enviar. É por isso que entradas como essa devem ser necessárias, certo? Precisamos adicionar o atributo obrigatório. E o que muda quando eu clico no botão Enviar? Como você pode ver, temos q agora uma mensagem, por favor preencha este campo. Muito legal, certo? Se o removermos. Então você pode ver, nós podemos apenas ir e enviar a ordem, certo? No entanto, com ele, não podemos fazer isso a menos que coloquemos algo. P. Então isso é muito legal, eu acho, colocar aqui necessário em casos como este. A próxima coisa é autofoco. foco automático, como o nome sugere, concentre-se em uma das entradas. Quando alguém se refere ao remendo. Algo assim é Yoast, digamos que você está criando um jogo e você está pedindo a uma pessoa, o usuário, para digitar quantas unidades, cavalos, por exemplo, ele quer comprar, certo? E você cria a entrada para este vivo em cavalos de unidade de harmonia, certo? E ele precisa andar, ele precisa clicar nele, a fim de colocar o número aqui, certo? Isso não é legal quando ele faz essas coisas. Por exemplo. Toda vez que ele vem aqui, certo, ele quer comprar cavalos. Então ele clica, por exemplo, no link cavalos de ouro ou no ebola estadual, algo assim, certo? E ele clica nele e quer comprar cavalos. E por que ele precisa clicar nele? Outra vez? Isso só leva tempo. Você pode lembrar e fazer algo como este foco automático. E agora, quando eu atualizar esta página, quando eu faço qualquer coisa nesta página, certo? E eu refresco, sempre o foco aqui, certo? Você pode ver que ele está destacado e você pode digitar o número aqui. Então é quando você usa o foco automático. Você quer colocar o foco em uma das entradas instantaneamente e você ajuda os outros a sentir a forma. Eu acho que é muito legal. A próxima coisa é o tamanho e o comprimento máximo. Observe a cabeça agora, quando estamos perguntando quantos você precisa alguém quer comprar, podemos colocar aqui grande número, essa é a primeira coisa eo tamanho destes apenas para vk. Então, podemos alterá-lo adicionando o atributo size. E podemos, por exemplo, digitar seu formulário. E isso pode ver que é um número menor, você pode colocar dois, é ainda menor, certo? Então isso define o quão grande é a entrada. Mas ainda podemos colocar aqui um grande número. Você pode limitar este número usando algo chamado é chamado maxlength. E como, como o nome sugere, você coloca aqui quantas letras podem ser colocadas na entrada. Então, se eu disser um, como você pode ver agora, não posso colocar mais de um, certo? Posso colocar qualquer número aqui, certo? Mas não posso ou uma última parte, não posso colocar mais. Você pode estar pensando, ok, mas por que ele pode colocar letras ele certo, porque é M, entrada de texto. Se você quiser validar, se algumas coisas que são colocadas aqui, como você quer ter apenas números aqui que você precisa usar para JavaScript de dívida e mais tarde, também será uma boa idéia usar alguma programação do lado do servidor linguagem como PHP, porque bem, coisas assim podem ser enganadas muito facilmente, ok, as pessoas podem digitar coisas aqui mesmo usando o inspetor, então você não pode acreditar em todas as informações que vêm daqui. Mau. Bem, para alguns usuários básicos, coisas assim são bem legais, certo? Ele vai, eles sabem agora que eles podem colocar os números de um a nove. E bem, há algo chamado satélite lugar titular onde você pode sugerir, por exemplo, digamos, hey, estamos colocando aqui 129, permitir números 1, 2, agora, nove, apenas. Como podem ver, temos aqui os textos 12, 9, e quando coloco o número, ele desaparece. Então é apenas uma sugestão o que pode ser colocado aqui? E pensar assim é muito frio em casos como, por exemplo, também aqui. Então eu posso, por exemplo, criar um espaço reservado. E, por exemplo, isso é necessário, certo? E ele não tem nada, ok, estes exigindo para colocar o número da rua, mas não exagere porque espaço reservado talvez seja chamado. Mas vamos imaginar que você crie uma senha. Vamos criar alguns breaklines porque não parece bom agora. Assim. Vamos criar uma senha. Então, na senha do porto. E como você pode ver aqui, nós temos senha. E vamos imaginar que colocamos em lugar coisa titular deslize um laters, dois sinais, maiúsculas. Três vezes. Ao redor do mundo. Você colocou aqui algum tipo de exigência sobre como deve ser possível e quando alguém olha para ele. Ok, então eu posso colocar oito letras e o calor começa a digitar e ele tipo, quantas letras era isso? Quantos devem ser maiúsculas? Quantos sinais através desse uso como o ponto de exclamação ou assim por diante, certo? Este, este é um lugar onde o xadrez americano pensa assim, ok? Mas não exagere quando há muito do Fink para escrever. Não coloque no lugar chamado “As Leituras”. É melhor colocar assim. Ou, por exemplo, mais tarde, você aprenderá que pode, por exemplo. O mouse sobre algo e você pode criar uma dica de ferramenta onde você pode mostrar à pessoa como ele deve ser possível, ok, isso é melhor do que usar o espaço reservado em casos como este. E você tem algo, o que é chamado valor é o valor padrão para algo. Bem, em casos como estes antes de usá-lo para definir o tipo de entrega para um valor que estes enviados para o servidor mais tarde e, em seguida, processar gravação. O valor aqui será visível para o usuário como um valor padrão. Então, por exemplo, número da rua , digamos que temos um bom valor 92, certo? E agora como você pode ver, temos aqui 92 como valor padrão. Não é um titular de lugar. Então, quando escrevo algo aqui , não desaparece, certo? Aqui desaparece, mas aqui não desaparece. Então eu preciso fazer isso. E você pode estar se perguntando quando algo assim é usado em casos de textos. Vamos imaginar que você está criando lado onde as pessoas podem criar uma conta, certo? E eles colocam algum tipo de dados como número da rua, onde deixam qual é o nome deles e assim por diante. E agora imagine que você tem um top onde você permite que as pessoas mudem seus dados, certo? E quando eles vão para esta guia, eles podem ver um formulário com muitas entradas onde eles podem alterar os valores, como a palavra que eles deixam e assim por diante. E em casos como este, acho que é boa ideia colocar por omissão o que tinham escrito antes, certo? Talvez eles não queiram mudar cada entrada, certo? Eles não querem mudar todos os dados sobre eles. Talvez eles queiram mudar em LET o número de telefone, por exemplo. Então eles vão mudar apenas o número de telefone por outras coisas deve ser, você sabe, digitado já lá. Portanto, os valores padrão devem ser definidos aqui. E assim. Então eles não perdem o tempo precioso, certo? Porque eles precisarão redigitar tudo do zero, a fim de mudar apenas uma coisa, certo? Então, é boa ideia fazer tal coisa para torná-lo como o viver melhor. Então estes são os atributos mais importantes que eu acho que são importantes, mas há muitos mais deles. Você pode ir para o lado do Mozilla Developer e, em seguida, entrar em elementos HTML referência à entrada. Como você pode ver, há muitos mais são também tipos de entradas. Você pode ver os exemplos aqui, mas também há muitos atributos e com alguma descrição curta. No entanto, mostrei a mais importante. Está cheio de tempo para aprender todos os atributos possíveis, se você provavelmente nunca usará alguns deles em sua vida, certo? Se você precisar deles, então você vai encontrá-los em Laura muito rápido porque você comprou o Papa segurando esta etiqueta no Google. Alguma pergunta e você vai entrar nesta bandeira sobre site de fluxo de trabalho e você vai encontrar a resposta aqui muito rápido. Por exemplo, assim. Mas algumas coisas não estão apenas ligadas a como fez a guerra, mas quando você deve usá-las? E é aí que é bom ter carros de vídeo como este, para ver dicas sobre quando usar as coisas. Porque se você, por exemplo, exagerar no espaço reservado, seus formulários não serão carvão, certo? É só essa lição. Muito obrigado. 46. EXERCÍCIO: como criar um formulário de contato em seu site?: Olá, meus amigos, é hora de praticar. Eu quero que você crie um formulário de contato em seu site porque bem, cada site deve ter algo assim. Você deve permitir que o usuário do seu site entre em contato com você, caso contrário, você pode não parecer credível. Ok? Então, a fim de fazê-lo, você vai agora usar algumas entradas. E também algo assim aqui que ainda não falamos. Se essa coisa é chamada de área de texto, você pode ler sobre isso. Google. E este é também o seu exercício porque às vezes você não vai saber tudo, Acredite em mim, ok, então leia sobre isso ou mesmo quando você está digitando algo. Mas em vez disso, há informações sobre coisas como esta. Aqui também, olhe e você pode clicar nele. Então não se preocupe, você pode ler sobre isso, certo? Claro que faremos. Também está nesta palestra. Então não se preocupe se não quiser fazer isso sozinho. Mas é bom que você pratique sozinho às vezes. Ok. Então tente fazer isso sozinho. Ok. Faça a mesma coisa que está disponível aqui no lado direito. Ok, vamos fazer todas essas coisas agora do zero porque essa lei e dessa forma, nós vamos então muito mais do que apenas olhando para o SCCOE, acredite em mim. Então precisamos criar que forma, certo? E como você pode ver, existem dois tipos de formulário. Get and pulse usará o método post porque, bem, não queremos enviar o conteúdo de e-mail dentro do link. Como eu disse, post torna os dados que são enviados escondidos, certo? Então, vamos usar o método post e os conjuntos de ação para onde queremos enviar o seu próprio. Digamos, por exemplo, que você tem em seus servidores algo chamado como processo, Enviar, e-mail como este, certo? E PHP, porque ele vai estar processando a linguagem PHP. Então temos agora a nossa forma. Devemos ser capazes de enviar um formulário como comê-lo. Então vamos criar um botão de envio que vai ter um valor de suor. Mas talvez vamos colocar tudo no campo disse, certo, porque, bem, isso vai ser um pouco maior. Então vamos fazer assim. E agora vamos lealdade aqui. E digamos, por exemplo, entre em contato conosco, certo? Então parece melhor. E agora precisamos pedir coisas como, bem, como um e-mail, certo? Então vamos criar uma entrada que estes não podem ser digitados. Qual é a diferença entre um e-mail e um texto? Como você pode ver, quando você olha para isso, primeiro lugar, você não vê nenhuma diferença, mas há uma grande coisa. Foi a diferença. Bem, a primeira coisa que ele disse, se alguém está usando seu e-mail frequentemente nos formulários, ele pode receber uma sugestão sobre chaves de e-mail. Então isso é uma grande vantagem, certo? E a segunda coisa é que precisamos digitar um e-mail para você agora. Então essa coisa não vai ser dito por favor digite um endereço de e-mail, certo? Você precisa digitar uma imagem. Então algo que é, você tem este sinal aqui dentro, certo? Agora. Podemos enviá-lo. Caso contrário, não será enviado. No entanto, você pode enviar imagem vazia. Então isso não é algo que queremos ter porque queremos entrar em contato com alguém que nos envie um e-mail, certo? Precisamos responder isso poderia novamente, é por isso que este campo deve ser obrigatório, certo? Certo, vamos chamar de e-mail. Então alguém que não sabia o que digitar aqui, e o nome vai ser e-mail. E também podemos definir o ID para enviar e-mail se você quiser. Posteriormente atua como este campo verdadeiro, por exemplo, CSS. Agora, bem, nós não precisamos dele, mas quem sabe? Talvez precisemos dele. Talvez você queira criar um rótulo para ele, por exemplo, e-mail. E assim quando alguém clicar nele, ele vai selecionar o formulário aqui, certo? Então podemos deixar o ID na mesma noite, seu nome e o tipo desta vez. Ok, então temos e-mail e agora precisamos pedir o nome de usuário. Então vamos criar um texto típico com o nome, nome. É porque quando pedirmos o nome, então ele vai ser chamado de nome. E bem, isso também deve ser necessário. Eu acho que mais tarde vamos agora pedir o tópico. Então vamos fazer assim. Bem, eu acho que devemos usar algum intervalo, comprimento do intervalo, certo? Então vamos, por exemplo, eu tive que quebrar linhas como esta. Agora temos o nome de e-mail aqui. Poderíamos usar mais uma linha de quebra como esta. Bem, nós pedimos para o tópico e nós também devemos pedir o conteúdo do e-mail, certo? E para isso vamos usar a entrada que é chamada de área de texto. A diferença entre a área de texto e os textos típicos é que olhar, se eu fizer algo assim. Conteúdo, conteúdo. Repare que isto é pequeno, certo? Você pode digitar aqui muitas coisas, certo? Como o conteúdo do e-mail, certo? Ou é algum tipo de post no fórum. Podemos exigir que alguém digite as coisas em uma linha. Essa é a primeira coisa. A segunda coisa é quando eu clicar no Enter, como você pode ver, nosso formulário é B vai ser enviado. Bem, nós não digitamos aqui tudo ruim quando digitamos tudo o que é necessário e eu clico aqui , entrar, vai ser sensato. A entrada de texto irá invocar a ação de envio quando alguém clicar em Enter. Então também não é algo que queremos ter aqui, certo? É por isso que você vai usar algo chamado área de texto discoteca. Então vamos remover isso. E vamos agora criar área de texto. Como podem ver, temos aqui algumas coisas adicionais. A primeira coisa é o nome, porque bem, precisamos de alguma forma interpretado no Send Email dot PHP. Então, por exemplo, em um conteúdo que temos no meu conteúdo. E eu não identifiquei Kate ou enquanto podemos removê-lo por enquanto. E aqui está algo como colunas e linhas. Repare que este rosa é bem grande, certo? É porque as colunas estão definidas como 13. Quando eu mudar para 10, como você pode ver, o tamanho está sendo mudado, certo? Então isso diz quão grande horizontalmente deve ser nossa área de texto. Ok. Então vamos deixar como era antes. Acho que é muito bom. E todos eles dizem quantas linhas de lata, pode, pode o usuário digitar, certo quando eu usar apenas um, então só vai haver um errado sem o pergaminho aqui, certo? Temos o pergaminho aqui. Quando eu digitar ferramenta, como você pode ver agora podemos tomar duas linhas, mas a terceira linha são a rolagem aqui automática. Acho que 10 é um bom lugar para começar. Então talvez vamos torná-lo um pouco melhor adicionando a linha de freio aqui. Eu acho que devemos adicionar aqui um colapso aqui também para ter certeza que se alguém redimensioná-lo, ele vai embora. Ok. E a diferença entre uma área de texto é também estes que percebem que eu posso apertar o Enter aqui certo? Quantas vezes eu quiser. E é assim que deve ser, certo? Porque agora nós queríamos criar algum tipo de texto, realmente tags, não, não apenas simples palavras gostando, dica, tópico, escrever algumas palavras. Então é assim que criamos a área de texto. E também reparem que quando escrevo amostras aqui, continua. Controle de taxa de atualização mais turno mais R. Como você pode ver, ele será mostrado aqui. Então este é um texto padrão, não aqui. Nós não colocar no valor, como nas entradas para se tornar entradas. Mas colocamos o valor aqui. Por quê? Porque cada espaço na área de texto é interpretado. Essa é a grande diferença, certo? Sempre entrar também vai ser interpretado. Ok? Então isso é importante saber que funciona assim. No entanto, acho que é boa ideia aderir a um lugar titular e pedir aos usuários algo como, Como posso ajudá-lo, certo? Eu acho que pequenas coisas como isso faz seu site enquanto o formulário de contato melhor recebido, ok, as pessoas vão pensar melhor de você quando você faz essas coisas. Então como eu posso ter também, eu posso digitar aqui algumas coisas e alguém vai me abraçar, certo? Eu vou apenas coisas pequenas, mas elas realmente importam. E, por exemplo, no email, você também pode adicionar o espaço reservado. Por exemplo, aqui fora, o sinal de e-mail como este. Então você sugere, ok, aqui está um lugar para e-mail. Você também pode adicionar, por exemplo, foco automático. Então, quando eu atualizar esta página, como você pode ver, alguém não precisa clicar aqui. Ele esquenta, ele só começa a partir dele pode, ele pode instantaneamente mergulhar o e-mail, certo? Então criamos uma estrutura. Não parece bom porque coisas assim não se alinham aqui. Você pode alterá-lo, não se preocupe, usando CSS mais tarde. Além disso, não funciona certo? Porque quando eu clico sobre ele bem, quando eu clico sobre ele e eu coloco tudo Q porque é necessário agora, nós estamos sendo enviados para o lado assim e ele não está sendo processado. Mas não se preocupe, você vai aprender a fazer essas coisas ou alguém vai fazer isso por você. Ok? Por enquanto, você está deixando HTML. Então você aprende a colocar corretamente tudo o que o conteúdo em seu site faz lição mais longa. E como sempre, se tiver alguma dúvida, sinta-se à vontade para perguntar. Tenha um bom dia. 47. Noções básicas de criar tabelas: Olá, meu amigo. Hoje vou mostrar-lhe como criar uma tabela. Mas, em primeiro lugar, o que é uma mesa? Tabela é uma representação de dados em colunas e linhas. Ok? Assim, ele permite que você, como desenvolvedor web, organize os dados de uma maneira boa, certo? Porque parece que foi para ser mostrado desta forma, certo? Não é como se alguém tivesse colocado dados em texto. E está tudo bem. Isto parece bom. Você sabe exatamente agora, ok, então o nome do curso é este, os prêmios este para este curso. E também sabemos que esta é uma tabela sobre tutoriais em vídeo. E ele também parece muito legal. E você pode estar se perguntando por que está olhando bom quando, hey, nós temos aqui próprio HTML é porque é uma espreitadela para CSS. Observe que algo pode parecer horrível e você pode mudar a aparência quando você usa CSS muito rápido, certo? Então esta coisa links para o arquivo CSS estilo que vamos aprender a criar em futuras palestras. Então, por enquanto, só saberemos como fazê-lo desta forma. Eu sinto muito. Mas você pode ver o quão poderoso CSS agora e você pode ver que é uma boa idéia aprender com este curso. Porque bem mais tarde você aprende coisas legais. Certo, então vamos removê-lo. Eu sinto muito. Vamos fazer com que pareça assim. E vamos remover esta mesa aqui. E vamos tentar criá-lo por conta própria. Então vamos criar uma tabela. A fim de criar um, criar uma tabela, precisamos usar uma tag tabela, que é usado para representação de dados em colunas e linhas, certo? E bem, a fim de criar linha da tabela, precisamos usar essa tag que é chamada linha da tabela t, r. Agora podemos colocar dentro da linha da tabela, que é algo que é colocado horizontalmente dentro da tabela. Algum tipo de dados. Precisamos fazê-lo usando dados de tabela td. Pacote de dados da tabela também é chamado de célula. Ok? Então vamos colocar uma tabela de dados aqui e vamos chamá-lo, por exemplo, nome. Como podem ver, temos aqui um nome agora. Podemos colocar quantos quisermos. Os dados da tabela estão aqui, ok, então podemos colocar outro e chamá-lo, por exemplo, preço em dólares, certo? E podemos colocar outro, outro, outro, outro, outro quantos você quiser, e tudo estará presente em uma linha. Você deve estar se perguntando, agora odeio repreendido, É em Rao, agora em uma fileira. Mas por que se preocupar em usar tabelas? Bem, poderíamos escrever tudo assim, certo? Bem, parece quase o mesmo, certo? Bem, vamos removê-lo. E observe que você pode adicionar borda à tabela usando algo chamado É chamado fronteira atributo. E agora como você pode ver que cada texto está dentro de dados da tabela, que é uma célula que tem algum tipo de fronteira aqui, certo? E bem, normalmente não se faz coisas assim a partir de HTML, está bem? Você faz isso através de CSS, mas nós vamos vivê-lo. Como você pode ver, é mesmo no vermelho que você não deve usá-lo. Existem melhores maneiras de fazê-lo através de CSS, mas vivemos apenas por uma questão de aprender tabelas. Ok, será mais fácil para nós ver que, hey, este nome está dentro, estas partículas são uma tabela de dados, certo? Então você tem esse nome e preço. E Eve queremos colocar agora o quê? O nome do curso. Então, por exemplo, C mais, não podemos colocá-lo na mesma linha da tabela, certo? Temos de saltar de alguma forma daqui para aqui. E para fazê-lo, precisamos criar outra linha da tabela. Então, criamos outra linha da tabela. E, em seguida, os dados da tabela que é C mais, e outros dados da tabela, que é o preço ou, por exemplo, 19, $99, por exemplo. E se você quiser colocar mais dos cursos, então precisamos copiar isso algumas vezes, por exemplo, assim, e apenas alterar os dados. Então, por exemplo, aqui para Java, o prêmio, e por exemplo aqui para pi dez eo preço, certo? Então nós temos bom, agora uma tabela com cabeçalhos de tabela e dados dentro. Observe que eu disse que isso não é dados, isso é cabeçalhos de tabela, certo? Porque esses dois títulos descrevem o que está abaixo. E por causa disso, você deve nomear esses caras cabeçalhos de mesa, ok? Th significa cabeçalho da tabela também é bom para adicionar algo que é chamado de legenda. Legenda deve ser uma tag que estes depois, a tag tabela dentro da tag tabela, mas a primeira tag depois dele. E bem aqui podemos fazer uma legenda para podermos nomear a nossa mesa. E, por exemplo, vamos chamá-lo de tutoriais em vídeo. Então agora apresentamos os dados corretamente e mais leve. Quando você aprende CSS, você poderia apenas fazer o que link para o style.css e mudar como ele se parece, certo? O que agora é muito bom. Vamos remover a fronteira se não a quisermos daqui e parecer ainda melhor, certo? Então, infelizmente, isso não é o que você faz agora. Precisamos ficar com ele. É bom saber que você pode especificar qual parte da sua tabela é cabeçalho da tabela ou corpo da tabela. Então você pode fazer coisas assim. Estes é o cabeçalho da tabela porque temos bons cabeçalhos aqui. E esta parte é careca de mesa porque este é o conteúdo da sua mesa. E você pode ser como, por que eu faria isso? Bem, você vai tornar sua vida mais fácil se você quiser processar esses dados em CSR ou JavaScript, ok? Por exemplo, apenas para o conjunto. Mas o que, não é algo que é exigido por HTML e guerra. Ok, então podemos criar uma mesa e agora é hora de se exercitar. Criar manualmente. E, em seguida, usando M em uma tabela com três linhas e cinco colunas. Ok? Então manualmente você vai fazer uma mesa. Tabela são todos os dados da tabela e você acabou de copiar estes cinco vezes 1, 2, 3. Isso me fez fazer isso dessa maneira porque caso contrário, onde eu estou tão dados da tabela, dados tabela, dados da tabela, então um toupeira. E então você copiaria isso assim, certo? Precisamos de três fileiras de zeros, então assim, tudo bem, então resolvemos. Mas você também pode usar Emmet, certo? Então dentro da mesa, temos boa linha da mesa velha. Podemos ver que agora temos mesa errada. Precisamos de dados dentro de que tabela, precisamos cinco vezes e precisamos multiplicar tudo por três. E foi quando criamos um pouco mais rápido, certo? E também parece muito bom, certo? Porque temos recuo adequado parece que faz apenas a lição, muito obrigado. Tenha um bom dia. 48. Como fazer células alongadas usando o rowspan e o colspan?: Olá, meu amigo. Hoje vamos falar sobre como fazer uma célula para esticar, para se estender. E quando algo assim é necessário. Para entender isso, vou mostrar-lhe um exemplo prático. Olha, nós temos bons cursos grátis aqui, C mais, mais Java e Python. Que tipo de cursos são eles? Eles são os cursos de programação. Imagine que temos mais cursos como, por exemplo, digamos que temos C plus, plus java, Python. E digamos que temos boa HDMI, css e, por exemplo, JavaScript, certo? Como você pode ver, isso é programação de cursos. E aqui temos os cursos de desenvolvimento web. Então eles têm um tipo diferente, certo? Tipo de curso. Então podemos criar outro aqui. Cabeça da tabela. Por exemplo, digamos tipo de curso, certo? Ok, então podemos especificar agora, então todos estes, bem, bons 32 e promover este td. E este está programando, certo? E aqui temos o quê, então? Desenvolvimento web, certo? Digamos que apenas molhado. Como você pode ver, estamos nos repetindo aqui e isso definitivamente não parece bom, certo? Porque nós os separamos pelo tipo agora. E repetindo assim faz com que sua mesa apenas não baixa ouro, É apenas não preferem fazer compras. Eu acho que a programação aqui deve se estender, deve se estender de uma célula para segunda célula para célula, neste caso. E para isso estamos usando o atributo span. Span significa que se estende até que é um alcance. É até que ponto escrever algo extensões. E bem, no nosso caso, queremos abranger. Então, queremos estender o papel, certo? Porque queríamos ter como em vez de um papel, não deve levar 1, 2, 3 linhas, certo? E é por isso que vamos remover a programação daqui. E nós vamos escolher esta célula aqui, esta célula específica, e você quer estendê-la duas vezes aqui. Então vamos digitar seu atributo rowspan e digitar aqui não dois, porque dois significa que ele vai se estender para duas células, incluindo a si mesmo, mas para liberar. E agora parece melhor, não é? Certo, então vamos fazer o mesmo com a web, certo? Como este. E agora a linha para escrever livre, se houvesse mais deles, então, bem, vamos, por exemplo, dizer que temos bom. Agora, note que o JS, então nós vamos apenas estendê-lo para quatro células. Uma célula estendida para quatro células. É só que ocupa espaço inteiro agora. E eu acho que parece melhor, certo? Porque não estamos repetindo a mesma informação muitas vezes. É uma mesa que parece profissional. Então é quando usamos a extensão de linha ou usamos o colspan também para quê? Para esticar no caso de colunas colspan, certo? Porque se chama “stands para colunas”. Certo? Imagine que você deseja dar informações adicionais sobre esta tabela. Como por exemplo, todos esses cursos foram criados em inglês ou, por exemplo, que eles foram criados por mim, são capturas sem pintinho. Tudo bem, então o que você faria? Bem, você pode mergulhar no texto abaixo aqui ou você pode incluir esta informação dentro da tabela. Mas você vai precisar de alguma forma fazê-lo provavelmente onde ele cavalgar para ter certeza de que ninguém pensa que isso é como um dado dentro da mesa, certo? Isso representa o nome, preço ou tipo, certo? Então vamos precisar conectar todas as células aqui na parte inferior. E enquanto precisaríamos esticá-los direito, então precisamos fazer a extensão certa? Então vamos criar uma tabela de dados de tabela errada. E digamos que tudo aqui foi criado por mim, certo? Criado pela Al-Qaeda. E o problema é o, é que agora esta célula de dados da tabela é estendida tudo, certo? Porque tudo precisava estar dentro, bem, uma única célula. E temos aqui uma grande lacuna, certo? E a segunda coisa é que temos um espaço vazio, que não precisamos, certo? É por isso que seria ótimo consertá-lo. Bem, você poderia consertar o espaço vazio incluindo dois dados adicionais da tabela, certo? Mas não estamos corrigindo a maior lacuna que temos aqui. Então precisamos fazer um alongamento. Então precisamos usar colspan. Precisamos de estender a nossa cela. Quantas vezes? Não duas vezes. Porque nós vamos apenas bani-lo em duas células então, mas três vezes. Então nós temos isso em toda a nossa mesa, certo? Então isso é como uma informação adicional agora sobre esta tabela, específica esta tabela. Ou você poderia apenas digitar aqui que isso foi criado em inglês, o que seja, certo? Esta é a informação guardando toda a mesa. E bem, você poderia alinhá-lo como este centro para torná-lo centrado certo? Existem muitos outros valores aqui que você pode escolher online. Como você pode ver Derman, outro, mas o mais útil é o centro. E para ser honesto como você pode ver, é vermelho. Significa que não deve usá-lo. E quanto mais é melhor usar CSS em casos como esse. No entanto, eu acho que para pequenas coisas como essas quando é raro, só usar, não é boa idéia ir para CSS e criar regras específicas que não podemos falar no futuro, ok, para um único caso como este, Se esta mesa nunca vai ser repetida, então talvez você apenas, você sabe, apenas eu não fiz tudo funcionar bem, certo? Então é assim que você cria colspan, que estica as colunas, as células na maneira horizontal. Então da esquerda para a direita três vezes neste caso, como um exercício, faça a coluna do tipo no lado esquerdo, não no lado direito, eu quero ter tipo, nome e então o preço. Está bem? Só há a lição. Muito obrigado. 49. O que é CSS?: Olá, meu amigo. É hora de uma palestra super importante, porque hoje vamos falar sobre CSS, que significa Cascading Style Sheets. Vamos nos concentrar nessas duas palavras nesta palestra. Folhas de estilo em segunda roda. Concentre-se neste. Então, o que é uma folha de estilo? É um arquivo que descreve um estilo para toda a sua página web. Ok? E os estilos parecem, por exemplo, aqui. Então, por exemplo, nós dizemos, hey, eu quero que cada tabela faça a cor da borda decorra para colapsar. Você quer que ele tenha tamanho de fonte igual a este. Queremos ter largura mínima igual a isso. E também queremos que a caixa de sombra seja alta. Não se preocupe se você não entende, o que ele faz exatamente porque nós, você sabe, explicamos todas as coisas como essas em futuras palestras. Mas por enquanto, eu só quero mostrar que este é um arquivo onde você pode mudar como as coisas aparecem em seu site. Como eles olham dentro de uma única Phi? E por que é tão importante? Ok, vamos criar alguns parágrafos, ok? Como por exemplo, este é um texto de exemplo, e vamos copiar esses textos algumas vezes. E agora vamos dizer que temos boas essas tags. E você quer fazer o texto dentro negrito? Então, como faríamos isso? Vamos a algo como, por exemplo, isso certo? Então leva alguns segundos para fazer tal coisa. Bem, poderíamos acelerar se conhecêssemos alguns atalhos como, por exemplo, este. E cometi um erro ao fazer isso. Então, também é, como você pode ver, propenso a erros. Então eu não vou excluir essa parte do vídeo porque eu quero mostrar a vocês que isso não é bom, boa idéia. Como você pode ver, nós ousamos. Temos uma solução que funciona bem, certo? Ok, então eu quero fazer isso, ele vai levar, e então o que eu vou fazer, novamente, eu vou selecionar todas essas coisas. Tudo bem, isso, OK, e agora é hora de quê? Para mudar de idéia e dizer, eu não gosto que ele tenha, certo? Ok, eu posso usar um contorno z, mas digamos que você reabra esses 52 dias depois e então você precisa removê-lo. Então você precisará excluí-lo assim, ou você pode usar o F1 e, em seguida, remover o ataque. Então vamos dizer que, Ei, nós conhecemos alguns atalhos que vão nos ajudar um pouco. Mas o problema é que ainda está levando muito tempo. Então vamos remover tudo daqui. Ok, agora vamos fazer isso como um profissional. Então, como é que a produz? Use CSS. Ok, então vamos criar um arquivo que não podemos colocar o CSS. Então vamos remover a pasta aqui porque precisamos fazê-lo do zero. E bem, vamos criar uma pasta, certo? Por que criamos uma pasta? Primeiro? Criamos uma pasta porque podemos ter muitas folhas de estilo, não apenas uma, certo? Então vamos para a pasta que mantemos, todas as folhas de estilo iguais para as imagens, certo? Temos a pasta aqui. Temos apenas um em cada grupo pelo ponto. Talvez você tenha mais deles. E é bom manter seu projeto claro. Ok, então nós temos a pasta CSS, e dentro dela, nós vamos criar um arquivo, precisa ter uma extensão como esta, CSS, e você pode chamá-la de qualquer forma, certo? Mas você vai chamá-lo de estilo porque este é o nosso estilo principal, dot css, tudo bem. Ok? Claro que você pode chamá-lo do que quiser, mas isso é algo que estamos acostumados a como criadores, Ok, Chamá-lo é apertado. E agora é hora da magia. É hora de selecionar todos esses gráficos de barras de energia. Como é que fazemos isso? Usamos algo que é chamado de seletor. Ok? Existem muitos seletores nesta palestra você vai aprender o seletor simples que basta chamar select ou attack. Como é que funciona? Bem, basta digitar o nome de Jack que você quer selecionar, ok, e pronto. E então você cria esses colchetes. Eu faço. Você os cria porque você quer colocar aqui propriedades que afetarão essas partículas de ataque cardíaco. Ok? Bem, você pode ter mais de uma coisa selecionada, certo? Então, talvez mais tarde você queira selecionar o BDI, essa tabela, DAC, a etiqueta de legenda, o que for, certo? E dentro desses colchetes, algo que analisa o CSS. Ele sabe que ele precisa aplicar todas as propriedades que estão aqui para este específico, certo, o seletor do Pacífico. Então, a pilha neste caso. E então selecionamos o parágrafo e queremos o quê? Para alterar a aparência do texto para torná-la negrito, por exemplo. Então, como vamos fazer isso? Bem, digitamos o nome da propriedade. Que encontremos onde podemos usar o Controle mais espaço. E como você pode ver, podemos encontrar muitas propriedades aqui. E você pode ser como agora, OK, OK, então você precisa memorizar todas essas coisas, não a primeira coisa é que, como você pode ver, nós temos as dicas aqui, certo? Então seria estúpido lembrar de todas essas coisas. É bom conhecer os básicos, saber onde procurá-los, mas você não precisa memorizar todas essas coisas. Então não se preocupe. Então você verá em breve que é muito fácil usar porque imagine por um segundo como uma propriedade poderia ser chamada. Se queremos mudar a aparência da fonte também, É chamado de fonte. Vamos digitar a fonte. E como você pode ver, há um fam mili de propriedades de mudança de fonte. Então, quando eu digitar traço, como você pode ver, nós temos aqui tamanho da fonte, que muda o tamanho, certo? Então isso é bastante auto-descritivo em isso é muito legal por causa disso. Então vamos mudar o peso da fonte. peso da fonte muda então. Quanta tinta está dentro da fonte, certo? Nós podemos digitar o número aqui, vamos escolher os textos como parafuso aqui, ok, e ele vai apenas fazer o texto letras negrito. Você pode ver que nada mudou. Por que é isso? Então é porque não conectamos esse arquivo a esses cinco. Html5 é o que está aqui. Escreva o arquivo CSS está na pasta CSS. Esta luta não sabe sobre esta, certo? Faça o estúpido. Se algo se conectar automaticamente, ele vai, bem, talvez você não queira que esse estilo em particular seja conectado a esses cinco, certo? Então você precisa dizer, você precisa dizer que você quer se conectar a ele. E para fazê-lo, usamos a tag link, que MME nos ajuda devido a fazer o link usando o CSS, como você pode ver aqui. E quando eu clicar em Enter, temos aqui o que a relação de atributo, que Shays diz que HTML tem uma relação com o arquivo que é especificado aqui como uma folha de estilo. Então, sim, a folha de estilo, certo? Isto é deste nome. Então este é um arquivo que descreve este tipo dentro de uma folha, ok, Então folha de tamanho, e aqui está o link para onde ele está. Repare que ainda não funciona. Por que é só isso? Porque, bem, este index.HTML está no catálogo principal, certo? E precisamos de alguma forma ligar a este local específico. E fazemos da mesma forma que quando fizemos com imagens. Então precisamos removê-lo e digitar o CSS. E precisamos ir para a pasta de CSS e escolher o style.css. E agora olhe, está arrojado. É muito legal. E o que é mais legal que podemos mudar muitas outras coisas aqui. Então tamanho da fonte como, por exemplo, eu quero torná-lo 30 pixels. Vamos torná-lo grande. Como você pode ver, é grande agora e você pode mudar de idéia quantas vezes quiser. E você faz uma mudança aqui em um arquivo em particular, você pode ser como, hey, havia apenas cinco parágrafos. Por que eu me importaria? Isto foi muito rápido e longe? Eu precisaria dele para criar o CSS lado para o comando. Aprenda um novo idioma para seletores e propriedades semelhantes. Ok, mas nós temos aqui no cinco parágrafos, imagine que você tem de lado que consiste em, por exemplo, 500 sub-páginas. Quando o fizerem, tenho a certeza que não. É por isso que style.css é ótimo porque permite que você mude de um incêndio singular, todas essas coisas e o que é mais? Observe que este HTML5 é tão claro agora, antes que nós tínhamos trabalhado em média, em cada tag, nós tínhamos algo assim, certo? E quando olhamos para ele, era difícil focar no, qual é o texto aqui e o que queríamos mostrar aos outros que estamos criando um parágrafo aqui, certo? Então isso descreve a aparência do outro lado. Isso descreve que tipo de texto é distorcido, certo? Nós dizemos: “Ei, isso é um cabeçalho bem aqui, temos uma legenda. Então não temos essa massa adicional aqui agora. É por isso que use o style.css. Portanto, observe que, para selecionar algo, você precisa digitar o nome da tag que deseja encontrar. Em seguida, criar os colchetes e, em seguida, o nome da propriedade. Há muitos nomes como esse e aprendemos a maioria dos mais importantes em futuras palestras e depois a coluna, e depois adicionamos o espaço. Madeira não é necessária. Como você pode ver, nada aconteceu na cama aqui, mas nós adicionamos para fazer parecer melhor. Claro, você pode hospedar para que você tenha tudo em uma linha. Mas estes também não parecem bons, certo? Certo, para fazer seu código parecer bom. E então temos o valor, o valor para a propriedade, que pode ser encontrado onde. Quando você usa o espaço de gráficos de contorno, você tem todos os valores que podem ser colocados aqui, certo? Ou talvez quando você esquecer algo, você também pode fazer o quê? Tamanho da fonte e digite a partir do tamanho da fonte scotch. Como você pode ver, podemos clicar aqui e podemos facilmente ler sobre isso. Então não se preocupe, você não precisa memorizar tudo isso. Não me lembro de tudo, então não se preocupe. mais importante, sim, mas não tudo. Ninguém pode fazê-lo durante a guerra. Eg poderia terminar a palestra agora, mas eu acho que é uma boa idéia para dar-lhe algumas idéias de como CSS poderia ser usado além de jazzy mudar a aparência em aterro sanitário. Então, o que é isso? Imagine que você tem um site que parece muito bom, mas bom para você. Há muitos usuários deste lado e eles usam este site com freqüência. Alguns deles não gostam de como parece. Talvez eles gostariam de personalizar a aparência. Ambos são maus. Sim. Eles, você pode permitir que eles modifiquem o style.css e incluam apenas para eles. Os lados aqui dizem que querem incluir, certo? Eles poderiam fazer o seu site as cores diferentes e diferentes. Bastante incrível, certo? Você também deve saber que você pode alterar a aparência do seu site nos smartphones. Quando alguém tem o grande monitor, você pode riscar todos os elementos em todo o monitor e eles vão olhar muito bom. Mas mais tarde, quando alguém abre o site 0 no smartphone, não ficamos bem? Então, às vezes você precisa até mesmo remover algo ou mudar a aparência dele e você pode fazê-lo, certo? Você pode dizer especificamente que, hey, esta asa vai olhar para este lado no telefone inteligente, ok? Embora você possa até mesmo mudar a aparência do seu site quando alguém está imprimindo? Sim, você pode remover cada logotipo, cada imagem serra, e apenas deixar o artigo para impressão quando alguém usa o atalho Controle mais três mais B, ou talvez controle mais b, eles vêem apenas os textos, certo? Nem todas, todas as outras coisas como imagens e assim por diante. Talvez algo como especificação não seja necessário, certo? Então podemos removê-lo só para imprimir para que alguém não perca a tinta. Bastante incrível, certo? Então, para se inscrever, css é algo que muda a aparência em uma multa. E você economiza muito tempo, e tempo é precioso, tempo é dinheiro, certo? Você pode controlar seu layout. Então, como o site parece de 15, mesmo se você tem centenas de sub site. Além disso, é bom saber que seu site é carregado mais rápido. Porque quando o CSS é carregado, uma vez, ele vai estar em algo que é chamado de dinheiro. É algum tipo de memória dentro de seu navegador web, dentro do navegador web do usuário, que contém o CSS. Então, quando alguém salta de um lado para outro lado, este phi não precisa recarregar. Está no esconderijo. É nessa memória onde o navegador da web pode usá-lo sempre que quiser usá-lo, certo, então carregue os e apenas use-os. Isso é fixe. Essa é apenas a lição. Obrigado. 50. : Olá, meus amigos. Hoje vamos falar sobre a guerra interminável entre as flechas. O que? Sim. As regras estão brigando umas com as outras. As regras que você está tentando aplicar usando algo assim. O que isso significa? Bem, vamos adicionar mais algumas regras. Como, por exemplo, vamos mudar o tamanho para viver por dois pixels. Vamos fazer grandes mensagens. E também vamos mudar a cor. Para alterar a cor do texto, usamos a propriedade color e, em seguida, podemos escolher a cor daqui, como por exemplo, azul. Você também pode alterá-lo usando Cuba. Falaremos sobre isso mais tarde. Então nós mudamos um pouco e como você pode ver, temos agora um grande texto que é azul. O problema é sobre esta guerra entre papéis é que você pode criar tamanho não só aqui no arquivo CSS externo. Não, não, não, não, não, não, não. Você pode criá-los em linha, certo? Ou você pode criá-los aqui. Dentro da etiqueta de cabeça dentro deles. Pack estilo ouro, ou, bem, existem alguns valores padrão, certo? Observe que o parágrafo tem algum tipo de margem, certo? Observe que temos uma boa margem entre este texto e este. Não precisávamos adicionar a linha de quebra aqui, certo? Para fazer a linha entrar, certo? Portanto, há pelo menos quatro maneiras de fazê-lo. Então, o que vai acontecer quando eu, por exemplo, digite aqui parágrafo e eu vou mudar a cor para vermelho. Ok? Aqui temos a cor azul. Aqui temos o quê? Cor vermelha? Como você pode ver que X é vermelho. Mas por quê? E também note, o que é muito importante é que mantivemos o peso da fonte e o tamanho da fonte, certo? Então guardamos o que quer que fosse app, certo? Mas mudamos a cor para vermelho. E este Fink é chamado de cascata, ok, a maneira como você escolhe qual tamanho deve ser aplicado, certo? Em um lugar específico é chamado de cascata. O que é uma cascata? Porque é muito raramente usar a palavra, certo? Em cascata. Cachoeira quando você digita no Google, é uma cachoeira que tem algo como passos, passos de rocha, certo? E a água flui de cima para baixo. E na ala CSS, é bem parecido. Cascade é uma guerra interminável entre as regras. Você tem os estilos padrão do navegador. Imagine que a água flui aqui, certo, é um passo como na cascata, certo? E as cachoeiras para baixo, boom, boom, e boom, certo? E é preciso como água em todos os estilos que era antes, certo? Então navegador tem estilo padrão e define a margem direita? Observe que não removemos a margem ou outros estilos do parágrafo quando ele adicionou aqui e outros lados, certo? Nós não removemos o peso da fonte e o tamanho da fonte quando adicionado aqui, a cor, certo, nós apenas substituímos a coluna, certo? Mau, não removemos outras coisas. Você também pode criar um estilo embutido como este quando você digita o site e muda a cor para, por exemplo, roxo, certo? E vamos mudar apenas a cor, certo? Mas ainda assim vamos ficar com isto. E vamos manter o que quer que seja, que é margem e outras coisas assim. Então, como você pode ver no, a primeira coisa é roxo. Então a primeira coisa na cascata é o navegador, então o arquivo CSS externo, como o style.css, que está aqui, certo? E então temos o estilo definido na tag estilo. Então, isto é aqui. E então temos o estilo inline, que está aqui. E a coisa que me ajudou a entender mais é que o olhar, quando eu mover esta caixa para cá, eu estou como acima de montar isso, certo? Como este. O que significa que quando digitamos, por exemplo, em CSS externo, arquivo, style.css, o que o peso da fonte, negrito tamanho da fonte 40 pixels, e cor azul. Estamos apenas a fazer isto. Então mantemos o que estava no tamanho padrão do navegador, certo? Mas estamos adicionando uma nova camada, certo? Então, estamos adicionando coisas novas como fonte e tamanho da fonte e cor. Eu poderia mudar o que foi definido por padrão, atos certos, por exemplo, margem. Eu posso mudá-lo. Vamos mudá-lo para 50 pixels. Você consegue, certo? Não significa que você não pode fazer isso. Então, como você pode ver, nós poderíamos alterá-lo para Kindle e defini-lo para 100 pixels. Cabe a você. Mas você não precisa. Isto é importante porque continuamos com o que quer que fosse, certo? É por isso que se chama cascata. Porque bem, imagine que a água está derramando de cima para baixo e leva o que era antes disso, certo? Então é preciso cada regra que era antes, mas se algo é novo, vai ser substituído, certo? Então agora você sabe o que significa C em CSS? Então CSS é folhas de estilo. Então Phi está com regras que estão representando isso apertado e eles seguem o papel em cascata, certo? Eu simplifiquei um pouco este tópico. Ele tem que dizer que isso é simplificado porque há mais para isso, mas vamos falar sobre isso mais em futuras palestras quando aprendermos mais tipos de seletores, sim, há mais deles. Então, com o tempo, você vai aprender mais sobre o tipo de como começar a priorizar obras, Ok, então qual deve ser priorizado primeiro. Agora note que isso é bastante lógico porque, bem, seria estúpido se você não pudesse mudar o que é o comportamento padrão do navegador da web, certo? Você pode até verificar o comportamento padrão no Google Chrome. Você pode usar o Control Shift mais j. E quando você inspecionar quaisquer textos como, por exemplo, aqui, você vai notar que aqui está um comportamento padrão como display, blog, margem, doc, start one. Sou, eu sou. Vamos falar sobre o que isso faz. Mas como você pode ver aqui, nossa folha de estilo do agente de usuário, o que foi adicionado pelo navegador da web. Ok? Então podemos mudar esse comportamento bem fácil, certo? Usando, por exemplo, o CSS externo. E também IV, você tem, por exemplo, CSS externo. E você tem uma coisa simples que você deseja adicionar dentro de HTML5 específico. Você pode usar esse estilo dentro da etiqueta de cabeça. Por quê? Porque, bem, você não precisa carregá-lo em todos os lados, certo? E também, se você tem algo muito, muito curto e acontece apenas uma vez, então talvez você possa usar o inline. No entanto, a maioria das vezes a maneira recomendada é esta coisa aqui. Então, usando o CSS externo, porque, bem, isso dá a você a maioria dos benefícios na maioria das vezes, certo? Porque quando você muda aqui algo, você altera cada arquivo HTML que inclui o arquivo CSS. Está bem, faz a lição em aberto. Muito obrigado. E como sempre, lembre-se, se você tiver alguma dúvida, sinta-se à vontade para perguntar. 51. Curso em x id: Olá, meus amigos. Hoje vamos falar sobre classe e atributo ID, esta palestra importante bruit. Então, concentre-se. O que é uma aula? Classe é algo que classifica as coisas. Isso significa? Significa que organiza as coisas em grupos. Ok. Grupos. O Alex. E quando algo assim é necessário. Bem, olha, nós temos alguns parágrafos. Digamos que você queira centralizar todos eles. Então você quer ter o texto no meio da tela. Neste momento, o texto está no lado esquerdo da tela. Quero tê-lo no meio. Certo, então como eu faria isso? Eu preciso escolher o parágrafo e vou usar a propriedade que é chamada de alinhar texto. O alinhamento de texto permite que você altere onde o texto deve estar, certo? Vai ser centrado ao vivo, certo? Vamos colocar o centro aqui. E isso, você pode ver que fizemos isso. Então resolvemos o problema. É também. Mas digamos que temos um bom endereço agora. E o endereço interno temos, por exemplo, o meu nome e o sobrenome. E imagine que há mais conteúdo aqui. E eu quero centralizar isso também. Certo, então talvez façamos assim. Endereço e vamos digitar texto alinhar aqui. Tudo bem. Certo, resolvemos o problema. Mas repetimos horas de duas vezes imaginando que havia morfina. Por exemplo, não ligo para o tamanho do telefone, escrevo algo assim. Então precisaríamos fazer coisas como essa. Não é bom, certo? Então podemos resolver isso ainda, comprado. Para fazê-lo, precisamos usar o seletor de multiplicação. Para resolvê-lo, usamos a vírgula aqui e escrevemos o nome de Jack que queremos escolher escrever. Então isso significa que escolhemos parágrafos e escolhemos endereços e fazemos tal coisa como está aqui. E tudo bem, resolvemos o problema. O que E, Se eu quiser aplicar as coisas que estão aqui, fazer muitos, muitos mais direito fiscal? Há muitos táxons. Então eu precisaria ir para CSS aqui e, em seguida, adicionar outra tag, outra tag, outro deck. E ir, certo? É hora de classificar as coisas, agrupá-las, certo? Repare que a nossa principal razão de o termos feito foi para centralizar as coisas. E bem, nós poderíamos classificar todos os parágrafos em um grupo e fazê-lo assim usando o atributo nome da classe. E depois as citações. Vamos digitar o nome que inventamos, certo? Então nós fralda exemplo centro. E podemos fazer tal coisa para, bem, todos os lugares que quisermos, como por exemplo estes. E agora, em vez de escrever isso, não vamos digitar centro ponto. A fim de escolher imposto que tem boa classe, temos feito centro nomeado, precisamos usar o sinal de ponto e, em seguida, o nome da classe. Como você pode ver, a solução é semelhante. Mas agora eu posso dizer: “ Ei, eu não quero esse cara. Vai ser centrado e não é. Então você pode decidir agora o que centrar em seu site e você não precisa se preocupar com o nome da tag agora, certo? Então é assim que funciona. Se você quiser especificar, eu quero sobre os parágrafos a ser centrado. Você pode dizer, certo, adicionando p aqui. Então o centro do ponto p se foi, no centro dos parágrafos. No entanto, no nosso caso, queríamos centralizar tudo. Observe que este nome pode ser o que você quiser, ok? Então você pode mudar isso para isso e também vai funcionar, certo? Mas não adicione espaços aqui, como por exemplo este, ok? Porque agora não está funcionando porque temos o bem. Agora aqui duas aulas, ok? Esta classe e esta classe. Você pode ter vários valores para a classe. Logo você verá por que é bom. Porque talvez você queira aumentar o texto, por exemplo, direito sobre ele, torná-lo maior. Então vamos criar uma classe que chamamos de maior e descemos para 79 Act tamanho da fonte e fazemos, por exemplo, 40 pixels. E agora eu posso dizer, Ei, eu quero que este seja maior, e por exemplo, este seja maior, certo? Então, adicionamos o espaço entre os valores. E como você pode ver, isso é maior do que isso é maior. E podemos usar essas aulas em qualquer tipo de top, certo? Então a aula está acostumada a quê? Para classificar as coisas. Então organizamos as coisas em grupos, catálogos. Certo, agora é hora da identificação. Identificação. Identifica coisas. Então você tem, por exemplo, algo bom é chamado de cartão de identidade, e ele identifica você apenas você escreve a única pessoa única. Você pode ser replicado. E como podem ver, podemos usar magnetizar classe. No entanto, o ID pode ser usado do seu lado. Temos um nome específico, apenas um. Ok? Então, quando usamos algo assim? Digamos que queremos escolher este endereço ou talvez este parágrafo em particular, certo? Você pode então dizer que id deste parágrafo é, por exemplo, um texto exclusivo sobre este deve ser selecionado. E então você vai aqui e, a fim de escolher esse cara para torná-lo diferente, não os outros. Você vai usar o sinal de hash e depois o nome. E agora você pode fazer o que quiser para escrever e fazer a cor vermelha. Você pode mudar o que quiser. Eu sei o peso da fonte, ousado. Há muitas outras coisas, mas eu não quero mostrar todas essas coisas aqui agora neste eletrodo de partículas, certo? Mas você pode fazer o que quiser. Esse cara específico, você pode ver que agora está lido. Também é arrojado, certo? Os outros não foram afetados. Então você usa ID para escolher um único elemento específico, certo? Você quer torná-lo um pouco diferente. Este identificou e altera-o. E lembre-se, você não pode ter duas identidades do seu lado assim. Ok, isso vai funcionar bem. Como você pode ver, é negrito e agora, mas vai causar muitos, muitos problemas em relação à seleção ID exclusivo usando JavaScript que você vai no futuro, tenho certeza cordeiro. Então lembre-se que o ID só existe uma vez com esses textos únicos. Claro, você pode ter outras idéias como identidade, nome diferente, certo? Mas só aqueles com este nome, está bem? Isso é muito importante para você se lembrar. É como você, você é único. Você tem o cartão de identidade que identifica você apenas. Vamos praticar isso um pouco e vamos criar um formulário. Um formulário. E dentro dele vamos agora criar entradas livres. E bem, temos três entradas. E eu quero escolher apenas entradas nesta forma. Não desta forma, certo? Porque normalmente você poderia digitar entrada, certo? Mas agora você escolhe essa entrada e essa entrada quando ele morreu. Certo, então isso é um problema. Digamos que temos um formulário que ID é, por exemplo, cesta. E aqui temos um formulário que se chama ordem. E agora você pode escolher apenas entradas desta partícula são quatro. Agora você pode digitar cesta, certo? E dentro da cesta, se você quiser escolher entradas, você digita o espaço, ok? Então, se você quisesse, você sabe, ir para o escuro. Então você quer fazer algo de dentro. Digite o espaço e, em seguida, digite o nome da marcação deseja escolher. Então entrada. E agora vamos ter, por exemplo, mudar a cor para azul. E também não podemos mudar, por exemplo, com 250 pixels. Como você pode ver, a primeira forma foi afetada. Podemos digitar aqui em azul e eles são menores. A segunda forma não foi afetada, certo? Então ID também é muito legal para distinguir um do outro. Essa é uma lição muito boa. E como sempre, você tem perguntas. Sinta-se livre para perguntar. 52. Extensões úteis de CSS para acelerar seu trabalho: Olá, é hora de aprender extensões úteis que economizariam seu precioso tempo. Um deles é chamado de suporte HTML CSS. O que é que ele faz? Observe que quando eu estou aqui e eu gostaria de adicionar, por exemplo, outro nome de classe. E eu uso o atalho de controle e espaço. Eu podia ouvir muitas palavras diferentes porque, bem, a versão básica da caixa de suturas é apenas aposta. Quando eu, quando eu começar a digitar maior, como você pode ver, ok, está aqui. Mas também tenta escolher entre o texto que está dentro do HTML e que não é, não, não é bom. Como você pode ver, você deve ter apenas aulas que estão disponíveis para você a partir daqui, certo? Isso é tudo. Então, a fim de mudá-lo, nós simplesmente não podemos instalá-lo. E agora observe que quando eu uso o atalho Controle mais espaço, eu tenho o centro e maior. Então n é estilo. Daqui. Isso tem classe, certo? Bastante incrível. Bomba, maior, e isso é tudo. Ok, então essa é a solução para isso e também para identificação. Ou como você pode ver, você pode ter aqui nos IDs que você pode escolher entre cestas e textos únicos, certo? Porque você foi a duas identidades aqui. A próxima coisa é chamada CISSP. Como o nome sugere, ele permite que você escolha como o seu bem, CSS é escrito sem ter que entrar neste arquivo CSS. Então isso é muito legal porque agora quando eu realmente quero ver como, por exemplo, trabalhos maiores, eu preciso abrir fatias como e olhar para ele. Você pode ficar bem, mas é bem rápido, certo? Ok, são arquivos, mas imagine que seu CSS é um BBB maior, certo? Como este. E então você procura o gás específico. Isso não é legal. Certo, então vamos voltar ao que era antes, ok? E vamos resolver o problema usando o pico CSS. Então CSS pico. E como você pode ver quando após a instalação, bom. Agora, quando eu uso o controle no meu teclado e movo o mouse sobre isso, bem, precisamos recarregar nosso código do Visual Studio para que eu feche e reabra novamente porque às vezes é bom. Boogie após a instalação. Está bem, eu consegui. E agora, como você pode ver, agora temos aqui algum tipo de informação sobre como algo parece lá. Mas o problema é que, como você pode ver, podemos apenas ver o que não e não a coisa toda, certo? O problema é que esta extensão específica gosta de ter tudo o ingrediente aqui como este, ok? Então precisamos formatá-lo dessa maneira. Eu prefiro como formatação como este porque eu posso ver claramente que essas extensões estão aqui e eu abri e fechei um colchete, mas às vezes como coisas como esta. E como você pode ver agora, nós temos aqui informações sobre como o Center parece, quão maior parece. Como você pode ver, é um pouco buggy às vezes talvez nós consertamos isso? Mas eu uso isso principalmente não para pico, mas para entrar neste CSS empate para editar as coisas e como fazê-lo. Eu mantenho o atalho Control e, em seguida eu clico na lógica e eu estou instantaneamente no lugar onde eu quero atualizá-lo. Então isso é muito legal, certo? Então eu quero editar algo. Eu só tenho o controle e eu posso ir lá e editar. Isso é muito incrível. Você também pode adicioná-lo, a partir daqui. Para fazer isso, vamos selecionar algo, clique com o botão direito do mouse, ir pico e, em seguida, Peek Definition. Você pode usar as saídas de atalho em 12 enquanto eu acho que é difícil apertar N no teclado. E então você pode, como você pode ver daqui, editar uma amostra, certo? Então você pode, por exemplo, parafuso de caminho telefonado. E você pode clicar duas vezes para inserir o CSS STI assim. E você pode editar aqui também, mas você pode editá-lo a partir daí e alterar o tamanho, como você pode ver são o peso da fonte para outra coisa. Isso é só uma lição. Muito obrigado. 53. div vs o span in em linha em bloqueio: Nós não usamos isso significa que o evento ou uma extensão e o alcançável é auto anos def Tenho certeza que Cassie dovish, é autossômico eles em local ou nós na linha. Por favor, empreste o carro-chefe da vagina Coniacian. Vá limpo na próxima coisa. Está bem. Span, rins, a tecnologia caiu cada um para digitar Jonathan, E ponto H atributo. Vou cambalear com eles um monte de dinheiro. Status, a pilha irá proibir auto doação Razumovsky. Estella, os patos foram propostos para o nêutron-chave. Todos vocês devem saber Shuttle Dark, Mama para Krishnan e dados de atributos. Agora Thomas Shabbat, os adultos têm que amarrar a mamãe são copiados e eu copio a visão real do túnel fiscal nós em tudo. Akashic cada texto Turquia, uma vez que todos os gatilhos não óbvios para empurrá-los seus textos de sintaxe, o artigo de eco, não me ensinou perguntar é desleixado, não têm escolha senão chamar. A equipe geralmente pode pesquisar. Socialistas jogados ainda eu vou externalizar no Buda pode neutrões mini nosso alvo. Então o DIA, NumPy Air Act ou ADA controle de dieta Shift E, EPA alemães escolheram e para Titus Martinez para o tempo e rota VDJ que é apenas bobagem, embora, por isso não é como costumamos fazer traço chamar texto simples uma opção chamada fáscia, O fogão, o texto. Essas são medidas de volume mamãe para pegar de volta o velho coto. A pesquisa deve ser para soprar chamar o nêutron Washington tac toe fashion. Se o decodificador como o limite 2 é 4 mais 2 nêutron e aeruginosa está preso nele, o que diz ao nigeriano não ensinou mamãe a pagar para ir juntos, empurre-o longitudinalmente. Contacto BS. - Sim. Normalmente poderia momento que tem dois Martinez de tempo. Mas ele é cristão, você é Martinez. E um dólar por ano ainda bloco sais natron bloco não foi ensinado nos disse. Ela esquema não vai usar o Nevada entrar perto tendem a armazenar o texto bom dia, alguns alienantes. Atenção a isso cobre o mesmo que estamos a escolher serra purulenta naqueles estampados no premium diretamente. O último dígito poderia ser atitude me paga farsa tomou um EBS dar a isso. Ela sou eu, empurrou-nos forte. Regime de Alberto Lépidus do Brasil. Bin Dustin, os tumores do tesouro ainda serão um filme da província. O pequeno ataque de feixe das crianças. Eva uma geométrica. Eles não desenvolvem dez horas ou omissão, não é? Golfe, bola de tênis. Então é cor mínima. Lavar para lavar o balde, Colorado. Alguém nos deve porque temos em cada cor, um como algum osso do agronegócio pouco eles ousaram opec é mínimo para Dinah não é necessário para ser atendido necessário para ser atendido de dezenas quebra-cabeça fora para zumbido o início impulsionado e eles disseram, sim, bem destruído. Ele nos diz que como a nossa versão medir mama dois conjuntos de dados é gasto em Amanda propôs jaquetas planas ou talvez escapar bloco de diretório para essencialmente dizer que estamos dose tímpano, gesticulando, porca é jogado a Internet Dolly, anatomia nos Inline, comprovado. É mínima chamada ou uma extensão na trigonometria tem vãos mínimos e não cor de fundo de vermelho. Essas estão no Zoom. Tivemos que ir para eles Páscoa em uma massa de atalho artista para fazer coincidir para voltar para Kotler, Kong não recebe mais nada bloco para me bloquear. Hoje é o ângulo de temperatura. Você não cobre login e eu vou entrar no fundo do livro de ataque que ele está, mas não mamãe. Um pouco gesticulando. O novo impulso Martinez, pequeno ponto Kovach passou, mas Coupang, coisas desonestas como o nêutron e tipo, def East Ponto, nenhum saco marrom para os bolsos simulados, osha, span, etiquetas, volume, display, inline, um def, use táxon e display block para bloquear essa loucura. Londres. Há algumas parcerias acima dele tentativas, mas córneo. Assim, o Propylaia dá a sua declaração tanto Professor Ananya, vamos combinar cor lutando para a de um stego me triste que ela região soviética para tipo II cor de fundo foi Nino e La Nina. Obrigado a restaurar a lei, taco Bodhi árvore. Se a quantidade de lance de um corpo protótipo, cor islâmica da pose de dança, essas integrais de enzima. Eu instalei a compulsão Israel e Kalina coloquei forte sobre o banco de dados ainda diz que, como de costume, a coisa dos resultados é aceitar as cores acabadas jogadas depois de mim, Susan, trauma inicial senta no monitor residentes em sua sombra labial usamos SCADA fica como diz, número. Mas isso é íons fazer tomate. Inline bloco acima máquinas deve lixeira é mais de 10 para os textos coloca puxá-los. Sim. Imposto prato van eles em. Assim, os textos líquidos propõem a sua persona digital actina chave Sim. Inline. Obrigado, Jacqueline AGMA no mapa pró-social constrangedor. Então Kush tiller, ou donzelas tau2 deve ser Santa Maria del dot VNC texto ticker muitas vezes quanto possível. E, amarrar seu sapato. Demônio nojento. Frequentemente, quanto possível. O original sonolento Giotto, máximo Sherlock, tímpano. Um momento para amarrar carimbo. Encontrar Krista, é isso como declaração DACA Germania, Stan, sim. Ampliando a borda. Não é uma opção. Renomeie Ivana e confie neles. Opção de bloco é que você tem viagem Sania ou motor gatilhos brega atrás Yad Vashem. Temos gigawatts mais longos. Metope mostrar latão crack tático após a reinicialização aquática, um alto dist do soquete E, enorme matrilocal para levar a Caltech a ressoar. Dorian me trocou, então arvore um pouco do seu pincel para colocar uma etiqueta div. Eventos, não insulto Dhamma, cluster quando você medir com o Star Wars me e participantes para ir para Caltech turismo concreto perto de mim. Então, para iniciar uma mensagem de texto até à data. Então, o texto, diz Jack, tem uma classe de pedra muito grande com contexto de cultura isquêmica. Ele faz, sim, Mínimo na sombra causou uma opção chamada Statista pick setting. Esses são o método de lavagem para que ela Jia apenas significa gestão ou aqueles tentados a digitar opção transpor. Teste de um texto é polimerase jogando um dado que tem enorme necessidade de seus sintomas de asma. Calouro, mini cochilos da divisão dois, chimpanzés que pico vendendo o vasto aberto a dois anos como começar, eu ainda estava em uma árvore para enviar. Temos eu desejo rolar de volta para cima. Temos a opção de rolar magia. Sou eu, Sean, também erosão costeira ou conduítes ou chimpanzés que pixel. Cosmologicamente dez anos foi feito naqueles iMovie e impopular, carimbado em Cellco Vicent à dor. Livro didático de Chicago, Washington. Agora tronco central vértebra registo burguês. Mamta pode vasoconstrição ou texto alinhar o telhado. Agora você tem um centro oficial de demência ou Benji. Nirvana não marca de lavar sua sombra para o tutor. Sim. Ele falou, racionamento realmente não é feito ainda há colonial. Que eles têm auto livro BWM, que era na verdade o filho de afluentes nacionais se encaixa em Ravana Zaption, o ego. - Sim. Me chame de Mama Pergunta Sombra. Elemental do veículo Washington Gluco. Rapaz, sim. Natalie, Diego de VO2 total, tempo para o Memoriam e aplicativos cortar e essa identificação de conhecimento. Policiais. Diamond vai gerenciar uma amostra única. Permissões em seu DAW é apenas chamada não pressa para cosseno 2 poderia nos levar. Isso nos diz a ilusão. Uma lavagem de dínamo. Ele envia dados para alinhar texto, centro. Palo verde mede que a vogal central não total nome do selo populace para a debulha. Ii. Íons, pilha de ônibus, não um Bengio propôs a vogal central. Dr. vá para a mamãe, Stamp, Tegel, Lisa. Certo, chefe denso possível. Washington, Java, o telhado, Nilo, volta texto alinhar. O estrangeiro ela é um parceiro para pagar muito. Visão animal sionista faz custo sombra tímpano por viralidade muito Itália Shara para levar para eles. Ela é boa tagging, Aikido, Mishnah, assistir TiVo cisalhar Guo significa no meio perto da fronteira. Você vê que você ainda Hexagon e Martina. Martina é má não é 0. A fronteira. Para fazer um gênio automático que estudam em outro e escolher os dados de trabalho Jackie Martinez Austin, que como um bom prato, o selo de ouro Kanyama Envato para Samhita conjunto de algébrica para reduzir muito TOC. E geralmente diz que resultante colonial espanhol, nem todo menino vértebra, também lançar a questão é deixar um spray forte. Michelle Martinez como o jamovi me, alguns de vocês fazem Giotto é os valores sociais Kotok entre x1 e Barbados, em seguida, mostrá-los que eles vão Washington, EUA, auto detectar. Sim, problemas são egoicos presos, inline-block são o automóvel do Benjamin não é simplesmente essa coisa. Agora, para o meu governo de atores estatais seria suplementar ao soviético. Ele fechou o drama para nós dois. Span, sudo nano triângulo truque. Isso fica qual Vietnã Illini ímpeto diagonal. Eles podem visualmente para tomar apenas ir não-spam para a mãe medida de volume em tudo, apenas computando o tempo de antena modelo linear Domingo. E se ela for COVID-19, East Chicago passa por cima do gesto, Tasha Prakash para o tempo. E estas são estrelas octeto de Anna. Romântico, contatos turísticos, van, inline, agradável, minúsculo minuto. Você deveria ter folha de custo escrito. Então CAUTI para profissionais para o meu visto ON taco emitido ou yak. Yak vem Stan. Outro elemento não ambicioso, irresistível para não ser Papai Noel máquina do tempo que nos leva a um episódio de íntima Takashi Murakami, elemento da colheita de córneas Revlon. Esse é o momento de massa. Os espanhóis não diva. Novo projeto. Você tem avalanche tática, opcode, Chautauqua, UV. Então treinado Albo, o Golem e visualmente bolas em, em seguida, ir para a véspera da partícula para furar Borden. Nosso orçamento é popular. Os ternos estão enjoados. 39 Internet de aviários. Tag é Domiciano aqui e o muçulmano é mau em cada nave auxiliar em Washington tomar vários iaque tabu, bloco de Virgem. Agora, no par TAC, bloco tocável de ataque ao ataque de rotina, bloco de erosão ataca o inline. Embora estabelecimentos Ashish ruins. Nem todos potencialmente preso tag inline agora, mas você ainda tem Inclinação Torre para pagar qualquer sistema de inteligência iraquiano não tratar pontos são realmente Domiciano sua ou ela via def é uma peça chave stego sabe Salam. Então, sim peça Montessori versão opção whatnot em provador na Internet ou pelo menos arriscado elemento inline ou muito uísque, elemental, local, verdadeiro pavilhão questão trich tomado para cima. Não muito mais brilhante. Mas espero que em breve, identidade é navio disingênuo mais barato mais dois dos lados do teste navio sobre regex compartilhado ou bancos ou beira pairar. Parte do que para é usar cara sobre inline, tag. Aqueles que trocam para comer. Vi uma chance para vocês que eu transferi para fazer ou não, aqueles estão fazendo até mesmo Vick, que famílias não são individuais. Yellowstone nos dita uma transfusão. Queria propor para ancorar isso na linha diagonal. Mas rapaz sensato. E o linker faz isso em ele é visto e máquinas automáticas, VGG, sociologia de Washington, Dr. Gautam, texto piscando não corta central Vanuatu é central. Quero fazer triângulo e outros tecnológicos seu interior. Então imagens de texto, vídeo, então xi j, há alguma boa discussão começa uma opção para o painel de hoje, o proximal, não os anos centrais. E mesmo que você não tenha acionado para Chautauqua, você tem os chamados totais de conhaque pilha. E devemos pegar texto e reativar vital central para o nosso Ela faz série modelo, até propor a Anita, querida Anita. Java. dadaistas são outros ponto-ponto-ponto. Qualquer Java. Java upto é vulnerável, diz que eu deveria traduzir VFB social, sueco, ela apenas gentil feito em Java. Então, como de costume, o concreto superior agora mudou em Java. Certo, a esquerda dirigindo. 54. CSS: propriedade de exibição: Olá, meus amigos. Hoje vamos falar sobre a propriedade de exibição, que muda à medida que o nome sugere como algo é exibido. Então, como a tag é mostrada em seu site. Por padrão, a tag div tem um bom bloco de exibição. Então, porque temos o bem aqui agora, só div com textos diferentes. Isso não significa que ele será mostrado de forma diferente, certo? Depois, o quarteirão. Então, quando eu abro aqui, uma vista para que você possa ver tudo aqui é exibido como bloco, certo? Há um texto diferente aqui que sugere que talvez pareçamos diferentes, mas isso não importa. A coisa mais importante é qual é a exibição padrão definida pelo navegador da web? E podemos substituí-la mais tarde, por exemplo, acessando tipo 1 ou tipo 2 ou digite livre usando CSS. Vamos mudar a exibição para bloquear em todos os lugares. Certo, assim. Então vamos fazer a mesma exibição em todos os casos, que é bloco, seria apenas valores padrão. Você pode ver que nada mudou, certo? Porque fizemos o mesmo. O que faz o navegador da web. Mas quando mudarmos o tipo 2 para inline, o que acontecerá? Como você pode ver agora, tudo aqui é exibido em linha, então um após o outro, certo? Verde é o plano de fundo e o texto está dentro desses fundos e o que ele não leva espaço inteiro como em caso de bloco. Também não há entrada adicional após cada div, certo? Porque mudamos o comportamento padrão. Agora vamos exibi-lo como inline. Pensa. Está bem? Mas há mais uma coisa como exibir inline-block. O que vai acontecer? À primeira vista, quando você olha para ele, você pode ser como um K. Funciona esta mesma luz inline, certo? Porque tudo está atrás um do outro. Não há entrada e vontade adicionais. Tem um bom fundo, mesmo que no elemento inline, inline, certo? E é verdade que funciona da mesma forma que inline, mas também tem uma característica do bloco. Que tipo de características? Bem, eu te disse na última palestra que você não pode mudar o tamanho de elementos embutidos, certo? Bem, quando fazemos algum vôo com 300 pixels, então ele vai ficar livre 100 pixels. No entanto, no caso de inline-block, essas mudanças, podemos enviar o conjunto a largura e podemos alterá-los, por exemplo, esconder muito fácil para outra coisa, certo? Observe que agora temos blocos inline que ocupam espaço, mas eles são exibidos como inline porque eles são um após o outro. Não há “Enter “depois de cada bloco, certo? Você pode ver que eles estão pulando quando não há espaço suficiente. É assim que funciona. Certo, porque é assim que os elementos inline funcionam. Além disso, se eu tivesse aqui um pouco mais deles, como por exemplo, se batermos moral do que assim. Você também vai notar que quando não há espaço suficiente que saltamos para outra linha, certo? Então, para parar de mostrar tudo na linha , como no caso de aqui, queremos quebrar a linha. Devíamos usar a etiqueta de quebra. É por isso que usamos a linha de quebra, a linha que D, nossa conversa certa. Agora, como podem ver, que paramos o processo de colocar tudo em linha daqui até aqui. E quando definimos o tamanho para, por exemplo, 250 pixels, você notará que temos três blocos que são exibidos na linha. É por isso que isso é chamado inline-block porque ele tem boas características de inline porque as coisas são exibidas em linha. E tem uma boa característica do blog como permitir que você altere a largura e altura, certo? Mas não se aplica e entra no final, certo? Por padrão, o bloco está fazendo. 55. EMMET | Criando tags com id e curso: Olá, meu amigo. Hoje vamos falar sobre bebidas MHC que permitimos que você crie, imposto, incluindo o atributo de classe sem ter que escrever coisas como div, então precisaríamos adicionar o atributo iCloud, então o nome da classe lá será horrível criar coisas como esta, desta forma, certo? É por isso que há uma maneira especial de fazê-lo. E você precisa montar jazz nome de vidro. Ótima. É um pouco mais rápido, certo? Assim, da mesma forma, como você seleciona óculos, você pode criar o direito. Então use também ponto e, em seguida, o nome da classe. E você provavelmente não. Esta dívida está inserindo o atributo de classe na tag div. Por que é assim? É porque ele está adivinhando. Há algo que Deus é chamado, como nomes de tags implícitos. Emma pode adivinhar. É inteligente que quando você está criando uma classe e você não especificou o nome, você é pro provavelmente querer criá-lo dentro div, ok? Então podemos escrevê-lo como este nome de vidro, certo? Mas você não precisa. Você pode apenas digitar o dapp. Claro, se você quiser adicionar classe a pessoas, por exemplo, parágrafo, então você precisa digitar o nome da tag e, em seguida, o nome da classe, certo? Então isso é apenas para situações em que você só quer criar uma div. Mas se você quiser colocá-lo no parágrafo, então você precisa digitar manualmente 2 que tipo de tag você deseja adicionar o atributo de classe, ok? Então é assim que você cria classe e adivinhe o que, a fim de criar o ID, você digita, o que se você quiser criar dentro do parágrafo, por exemplo, você usa o hash. Então, o nome da identidade, certo? Assim, o mesmo como aqui, direito, a fim de selecionar, você usa o hash. Muito bem, muito fácil de lembrar. No entanto, é o dominante a esta palestra? - Não. E se eu quiser adicionar mais de um nome de classe, o que você pode fazer dessa maneira, certo? Eu acho que é mais fácil fazer isso assim porque você tem boas sugestões do que aqui, certo? Todos vocês podem comprar, podem escolher Taiwan, eu posso escolher Tipo 2, certo? Se eu usar os atalhos de espaço da barra de controle. Então eu acho que é melhor do que fazer isso assim. Tipo um, tipo dois e tipo três, certo? Eu não gostava desse jeito. Acho que é melhor. No entanto, se você quiser criar muitos de uma vez, então, você sabe, coisas como essa podem economizar tempo porque você pode fazer o tipo dois, digitar três, e multiplicar por 10, certo, então você está economizando tempo. Mas você quer criar um único elemento? Não me preocuparia em escrever o nome da turma aqui dentro, certo? Eu usaria os dados para criar um ataque. E há mais formas implícitas de nomes de tags de criar usando Emmet. Porque note que temos aqui, por exemplo, lista desordenada. E sempre dentro da lista não ordenada, você terá list-item, certo? Porque é assim que funciona. Você tem bom que você está lista desordenada e dentro dele, você digita itens de lista um após o outro, certo? Então você está fazendo algo assim. Então é por isso que quando você faz algo como U, L e, em seguida, você quer criar uma classe para cada LI. Então você apenas digita isso. Você não precisa digitar LI dot nome do vidro, certo? Sim, Oh, Jazz isso e vai funcionar da mesma forma. E você pode multiplicá-lo por cinco vezes e você tem o nome da classe para cada aliado. E o que é a escola. Você pode, por exemplo, usar outros recursos. Olha, agora temos o tipo. Quando digitarmos 1 aqui, você vai notar se você olhar para o tipo 1, mas podemos usar cifrão como falamos antes, e como você pode ver, temos bom Agora Tipo 1, Tipo 2, Tipo 3, Tipo 4, tipo cinco, algo assim, é útil na maioria das vezes não por causa do CSS, mas quando você aprende o script Java, algo assim irá ajudá-lo a escolher o aliado específico e as informações que isso aqui pode ser usado no JavaScript, por exemplo. Ok? Porque você pode estar se perguntando por que eu iria criar algo assim? Há uma situação como esta foi algo como isso é necessário. Ok, então todos vocês e nós também poderíamos filmar mesa. Observe que nós tabela insight, temos papéis de tabela, certo? Então você não precisa amarrar dados tabela linha tabela quando você está, eu vou criar a classe para cordeiro, certo? Então nós podemos apenas digitar um papel por exemplo e coluna, certo? E como você pode ver, criamos uma tabela com uma linha de tabela e uma tabela de dados. Se queremos ter mais colunas, podemos apenas multiplicar, por exemplo, coluna por cinco. E isso você pode ver agora temos 1, 2, 3, 4, 5 dados de tabela. Se você quiser mais linhas, então você pode multiplicá-lo por 10, por exemplo, agora temos dez linhas de tabela com cada uma delas tendo cinco colunas, certo? Bastante rápido. E também eles são nomeados e, claro, você pode, você sabe, usar o cifrão, a fim de ter cada linha tendo um valor diferente. Bastante incrível, não é? Então é isso. E também há algo assim. Podemos saber se você deseja adicionar um elemento inline dentro elemento inline, porque E m é o elemento inline. E dentro dentro. E você não pode colocar o bloco direito, como def, certo vai com ele não iria funcionar corretamente. É por isso que você pode fazer algo como am EM, e por exemplo, nome de vidro. E ele vai colocar apenas o espaço dentro de dizer vai por exemplo, o beta, certo? Porque também está na Irlanda e em qualquer outro elemento inline, ok? Você não precisa especificar que você deseja colocar este caminho, se você quiser saber colocar dentro B, m, então é claro que você precisa nomeá-lo, mas caso contrário você não precisa digitar esta bomba porque será o valor padrão que será ele vai adivinhar que tipo de dobra deve incluir. Certo, é só essa lição. Obrigado. 56. Regras para selecionar tags com base na importância da regra CSS: Olá, meu amigo. A laticínios vai ser uma situação quando você é como a guerra está acontecendo. Por que essa regra não está funcionando, por que eu estou fazendo tudo corretamente e eu simplesmente não consigo encontrar uma maneira de fazer essa regra funcionar. E acontece porque, bem, você não sabe sobre essa coisa que vamos falar nesta palestra sobre importância prioritária das regras quando você está selecionando coisas, ok? E isso é muito parecido com a forma como a cascata funciona, mas isso é como, você sabe, uma coisa um pouco mais precisa porque o que sabemos agora que quando você cria um estilo aqui, certo? E quando você acessa o tipo 1 e quando você muda o fundo aqui, isso significa que isso é mais importante do que essa coisa da fonte externa, certo? Isso é tudo. Isto é mais importante, está bem? Mas e se eu fizer coisas semelhantes aqui, certo? O que acontecerá quando eu fizer o auto-diagnóstico criado tipo 1? E agora aqui eu mudei a cor de fundo para azul, por exemplo. Qual deles deve ser escolhido dias um neste. E como você pode ver, estes em y 0, vamos talvez fazê-lo desta forma. Agora, será lido. Por que isso é porque quando você olha aqui, se a importância prioritária é igual, então o que temos o seletor que faz o mesmo, certo? E isso é chamado de seletor de classe e é o mesmo. Tem a mesma importância. Em seguida, as propriedades são combinadas e as que ocorrem posteriormente sobrescrevem a anterior mais tarde. Então isso significa que, hey, este é mais tarde no arquivo styles.css, então isso significa que a cor de fundo vai ser vermelho. Está bem. E bem, caso contrário, não é a ordem que conta, mas a importância ou isso significa, bem, se tivéssemos um seletor de ID aqui, então, por exemplo, eu vou dizer, Ei, você sabe o que não vai adicionar este vai ser bonito Um cara importante. Então eu vou chamá-lo assim e eu quero que definitivamente seja, por exemplo, chocolate, certo? E é chocolate. Este é chocolate e não importa agora onde esses dedos jogam, eu posso colocá-lo aqui, vai ser chocolate. Posso colocá-lo aqui. Vai ser chocolate. Por quê? Porque este é o seletor de id e o ADC na cascata. O que uma coisa mais importante mais tarde há CSS inline e mais leve há características importantes. Então, se eu fizer algo assim, você sabe, eu lancei esse cara para fazer, por exemplo, ter a cor de fundo para ser, eu não sei, console. Você verá que o sinal de desconto, ok? E porque isso é a coisa mais importante, mas se eles têm algumas vezes situações em que você pode estar confuso e mesmo estes não vão mudar a cor, então é hora de usar algo chamado uma palavra-chave importante, ok, o ponto de exclamação importante e deve ser colocado antes do ponto e vírgula, ok? E isso é ainda mais importante, mas não, não, por favor, não use. Se você vê-lo, você saberá por que algo não está funcionando. É por isso que estou mostrando para você. Está bem? Porque às vezes você pode fazer tudo corretamente aqui, certo? E alguma coisa. E esta regra não é aplicada à tag do seu lado. E então você é como O que está acontecendo, então é provavelmente hora de olhar para HTML5 e olhar para a pessoa que fez isso e, e, e, e corrigir qualquer uma dica, olhar para o olhar para os dedos como este, e corrigir removendo-o e fazendo tudo bem. O arquivo externo não mata ninguém. Eu só estava brincando. Está bem. Então, há multivariado o que é mais para ele? Porque, bem, nós temos a etiqueta do corpo, certo? E note que aqui está algo como herança. O que isso significa? Isso significa que algumas regras que são como, por exemplo, carvão ou toda a fonte são herdadas. Então, por exemplo, quando eu digitar aqui e eu mudar de cor ou duas, algo assim, isso significa que essa cor será herdada em cada tag que está dentro do corpo. É como quando temos um pai, mãe, podemos carregar a cor dos olhos ou as portas grandes para você. Mas, você sabe, nós herdamos coisas dos pais e diff é uma criança por corpo. Então boda é aparente para profunda e dv herdar coisas do corpo. Isso não significa que ele vai herdar todas as regras porque algumas regras não. Se fossem herdados, seria estúpido, certo? Mas coisas como carvão ou desta, da fonte. É uma boa ideia, certo? Porque seria estúpido se eu tivesse que mudar a cor sempre que possível. Certo? Então eu não me lembro qual deles é herdado. Só penso na minha mente, que seria uma boa ideia herdá-lo, certo? Então cor é uma boa idéia para herdar VD pelo nó, por exemplo, borda ao redor do corpo seria estúpido para herdar em div, certo? Porque tudo mais leve teria uma fronteira ao redor do, isso seria estúpido, certo? É assim que se lembra do que é herdado ou não. E como você pode ver, é a coisa mais alta aqui. E também significa que porque esta é a cascata, é a menos importante que a lista, não é importante, certo? Então isso significa que se você usar o ataque seletor, certo? Então, se você usar o Tipo 1 por exemplo, e você mudar o escritor acadêmico para algo que caras como, por exemplo, tijolo de fogo. Você vai notar que o estudioso para o tipo um, a fonte foi alterada, certo? Pode mudar para o que quiser, porque talvez tenhamos herdado. Mas isso é mais importante o que eu digo no convés, seletor de classe, ok? Isto é mais importante. O seletor de classe. Então eu desmarquei e inline CSS e, em seguida, o importante, Então é assim que ele funciona. Também quero te mostrar algo incrível. Perceba que poderíamos fazer algo assim, tipo um e tipo dois anos. Então é, é, é muito bem reembolso porque nós vamos classe pode ter dois valores livres 45 dias até você. E agora há um problema. Como você pode ver, temos tipo 1 e tipo ok, porque tivemos Tipo 1, Tipo 1 e Tipo 2. Então a primeira coisa que acontece é que estamos conectando o que está combinando, o que não está presente em todos eles, certo? Então Kohler vai ser como, você sabe, neste e neste agora. Então nós temos a cor índigo, isso é certo. Então mais tarde podemos ver que temos um bom tipo, que tem a cor de fundo azul, então temos a cor vermelha, e então temos verde, que é o cara, que é a cor de fundo que estes últimos este CSS apertado, é este, certo? Então é por isso que, como você pode ver, a cor de fundo é verde jasmim. Dissemos que isto vai ser um brilho verde. Se mudarmos a ordem assim, então isso significa que este é o último e temos aqui ler, ok, no tipo 1 e tipo 2. Então a ordem é o que importa quando temos a mesma prioridade, certo, um, porque usamos o seletor de classe em ambos os casos. É assim que funciona. E você deve estar se perguntando, como eu posso me lembrar de tudo isso? Bem, imagine que você está programado processador agora. É algum tipo de programa de análise. Você é um programa, certo? Então, se você é um computador e está analisando o que está escrito aqui, você está lendo coisas de cima para baixo direito? E você está tipo, ok, então eu preciso mudar a cor de fundo para azul. Ok, eu mudei a cor de fundo do quadro de design. O que mais tarde, eu preciso mudar a cor da fonte para índigo, OK, e fazê-lo. E então, oh, há um ou dedos como este e eu preciso mudar a cor de fundo para vermelho agora. Ok, então eu mudo de azul para vermelho. Ok, então eu tenho a classe tipo dois. Ok, então eu preciso mudar a cor de fundo para verde, ok, então eu vou mudar para verde porque é mais tarde, certo? É assim que você se lembra porque é o computador que analisa tudo de cima para baixo. Está bem? Então a última coisa é sempre a mais importante, mas só se tivermos o mesmo seletor. Estou dizendo que fizemos de novo porque ou você usa, por exemplo aqui, amostra de IID, certo? E eu escolho por amostra. Esta coisa é a coisa mais importante agora. Podemos mudar a cor de fundo para um leve golpe de céu, certo? E como você pode ver, é azul claro do céu. Mas eu posso colocá-lo no topo do seu style.css, Ele ainda vai ser azul claro é porque, como eu disse, se a prioridade é igual apenas, então as propriedades são combinadas e aqueles que ocorrem mais tarde substituir o anterior. Caso contrário, não é a ordem que as latas, mas a importância. E aqui está apenas uma dica. Quanto mais precisa for a escolha, maior será o seu valor, certo? Observe que a herança é algo que você pode mudar mais tarde em sua vida. Se você é estúpido, então você pode se você é paras pior, você fisicamente pode se tornar inteligente. Sabe, algumas coisas não podem ser mudadas. Por exemplo, cor dos olhos, certo? Mas algumas coisas podem ser consertadas. Então, mais tarde, quando tivermos a tag seletora, isso é mais preciso, certo? seletor de classe é mais preciso, seletor de id é ainda mais preciso. Inline CSS mais preciso, importante, estes mais precisos. Então, quanto mais preciso for algo, mais importante, maior será o seu valor. E a coisa que a regra que vai ser aplicada é a que é mais precisa. É só essa lição. Espero que agora você entenda os problemas de cada criador de CSS. Muito obrigado. 57. Prática de seletor: Olá a todos. É hora de praticar. Lembre-se que o DV quer ser alguém que cria sites. Você simplesmente não pode assistir os vídeos, como no piloto automático. Você apenas esfolado assista-os e não pratica. Você precisa praticar o que você vê, porque caso contrário você não vai se lembrar de todas essas coisas. Há muitas, muitas coisas novas chegando aula idade e você precisa praticá-las. Faça pelo menos o que eu faço na palestra. Jogue com seletores, jogue com o imposto, lembre-se sobre isso. Então isso é algum tipo de palestra de lembrete. Ok? Eu quero que você crie uma tabela que eu fiz aqui. Ok, faça manualmente, também sozinho. E você pode copiar a parte seletores a partir daqui por tentar criar uma descrição de cada seletor por conta própria. Ok, então você pode comparar com o que está aqui e ver se você entende, ok, o primeiro livre é bem simples. Quando você digita o P aqui, você só vai selecionar o que cada parágrafo. Então cada parágrafo, que está, por exemplo, dentro desta div ou dentro, por exemplo, tag corporal, certo? Sempre que for, você vai selecioná-lo e você pode alterar a cor dos parágrafos. Faça, por exemplo, vermelho. E como você pode ver, nos referimos ao n. Estes são vermelhos porque estes são parágrafos, certo? Podemos vê-lo claramente também quando você usa o inspetor. E podemos ver que este é parágrafo este parágrafo este parágrafo não é parágrafo, este parágrafo. Ok. Agora, vamos selecionar todos os elementos. Essa classe é F2. Então, a fim de selecionar apenas os caras para quem a classe é, precisamos usar o ponto, certo? E isso significa que nós vamos selecionar o que a classe para, e nós não nos importamos se esta classe Foo está dentro do parágrafo ou D. Nós apenas dissemos, hey, selecione a classe foo, isso é tudo. E como você pode ver, funciona assim. Se quisermos selecionar apenas parágrafos, lembre-se de que você precisa especificá-lo antes dos dados. Então você precisa digitar a energia do nosso gráfico aqui, certo, a tag p aqui. E agora, como você pode ver, selecionamos apenas os parágrafos. Remova isso. Nós vamos selecionar a div e parágrafos, ok, porque esta é uma div com a classe foo. Ok? Se você quiser selecionar todos os alinhamentos, esse ID é igual a, você, basta usar o hash, ok? Isso é bem simples, então não vamos fazer isso. E aqui está algo que permite que você selecione todos os elementos que são profundos e estejam ao mesmo tempo. Então, se você tomar a dor, como você pode ver, nós vamos selecionar todos os elementos porque, bem, a verdade é que P está dentro de div, mas não importa, certo? Porque vamos selecionar D e P sempre que for, agora mesmo. No entanto, se removermos a vírgula, você notará que selecionamos apenas parágrafos que estão dentro do, isso é importante. A grande diferença. Então, isso permite que você selecione o final B e aplique a regra aqui. No entanto, quando você faz isso assim, significa selecionar todos os p que estão dentro do if e apenas dentro da div. Ok? Então este aqui, este, este aqui em tudo. Isto não está dentro do “se “este parágrafo dentro do corpo, certo? É assim que funciona. E se mudarmos para, por exemplo, dot foo, você é selecionar apenas elementos. Essa classe é igual a 4, mas eles estão dentro da morte. Devem estar dentro da direita. Então, se eu adicionar aqui classe foo, estes não serão selecionados, mas este, este, este e este serão selecionados. Como você pode ver, acabou. Ok. O que mais temos? Como você pode ver, podemos especificá-lo. Podemos dizer que, hey, eu quero apenas parágrafos dentro da div que tem a classe foo. Então isso significa que isso não será selecionado agora, mas esta e esta roda, como você pode ver, é através. Então é assim que esses seletores básicos funcionam. Mas temos aqui também algo como selecionar todos os elementos do lado, que é o sinal de asterisco, ok, o sinal de multiplicação. Vamos usá-lo. Então, quando você faz coisas assim e diz cor vermelha, você vai notar que tudo está vermelho agora. E bem, para ser honesto, este não é apenas o lugar onde é usado. Observe que quando fazemos algo assim. Então, selecionamos apenas a classe foo dentro da direita. Então nós selecionamos sobre isso, isso e isso. Para ser honesto, aqui está algo como o asterisco. Significa selecionar todos os elementos. Essa classe é igual a foo. E isto é, você pode ver que nada mudou, certo? Isso funciona da mesma forma, como se estivesse lá ou não. Mas bem, porque esta é uma operação tão frequente quando você usa o CSS que as pessoas decidiram que ele pode ser omitido. Ok? Então você não precisa colocá-lo aqui, certo? Mas se alguém o usa é bom saber o que está acontecendo, certo? Porque se você tivesse visto algo assim e eu não dissesse que viu, algo assim existe. Ficará surpreso por não saber como funciona, certo? Agora você sabe que essa coisa seleciona todos os alinhamentos possíveis, certo? E quando você usá-lo com a classe vai dizer todos os elementos possíveis, mas ele precisa ser igual a esta classe. E também neste caso, precisa estar dentro da div, certo? Mas não precisamos usá-lo, certo? Pode ser omitido. Isso é tudo nessa lição. Obrigado. 58. Fronteiras em torno dos elementos: Olá, meu amigo. Hoje vou mostrar-lhe como adicionar borda em elementos do seu lado, como por exemplo, div ou tabela que vamos adicionar fronteira fazer no futuro. Então, para adicionar uma borda, você precisa especificar seu tipo. Linha Dharma que pontilhado, tracejado, sulco duplo sólido, crista ins e saídas em e assim por diante. Quando você usa o controle mais espaço, é claro que você entra e recebe algumas dicas sobre o que você pode escolher, certo? Então você não precisa memorizá-los, mas é bom ver pelo menos uma vez todos eles em um só lugar, porque ele vai permitir que você escolha um deles quando você precisa do direito. Então, é bom vê-los todos de uma vez. O problema é que porque nós removemos a margem aqui, devemos adicionar margem dentro de nossos elementos que são diff. Então vamos adicionar um espaço que será igual a 10 pixels entre cada div e nosso corpo inteiro. E como você pode ver, adicionamos uma margem usando essa regra e agora é mais fácil analisá-la. Então, como você pode ver, quando adicionamos o salgado, temos aqui um ferro sólido. Quando usamos o pontilhado, temos pontos ao redor ou borda tracejado. Temos traços, linha dupla, teremos o gráfico de linha dupla parece que este inverso do grupo é chamado de alcance. E parece que esta entrada inicial. E, claro, você pode misturar as coisas, o que não funcionou porque eu não adicionei aqui o estilo. Como você pode ver. Agora, nós temos aqui, os traços aqui, nós temos no crescimento inferior para que você possa misturar as coisas, ok? Mas não é todas as coisas que você pode fazer com bordas porque, bem, você pode definir borda específica, você começa e definir, por exemplo, esquerda da borda para ser lido. E você pode, você simplesmente não pode definir qualquer outra borda. Como você pode ver, só há borda no lado esquerdo. E nós usamos isso como uma decoração que mostra que isso é mensagens de texto importantes, como por exemplo, uma definição, certo? Então aqui está uma borda que também mudamos a cor. Então, como fazer essas coisas? Vamos, por exemplo, remover essa coisa daqui. E note que quando eu digitar fronteira, temos aqui muitas dicas. E podemos escolher a partir daqui algo como topo, esquerda, direita e botão. E permite que você altere a borda específica direita, para cima, para direita, para baixo e para a esquerda. Então, podemos definir, por exemplo, borda inferior dois Como e, claro, o estilo para algo como, por exemplo, inserir. E você vai notar que agora aqui, então aqui nós temos apenas fronteira na parte inferior, direita, não em todos os lugares. Se removermos a palavra inferior, você notará que temos boas em todos os lugares na parte superior, direita, inferior e esquerda. Mas podemos especificar qual estilo você deseja definir. Essa é a primeira coisa. Você também pode definir a cor para ele. Então você pode dizer algo como borda, traço e fundo e bem, e nós não queremos sentar desta vez agora, mas podemos definir a coluna e podemos definir aqui, por exemplo, a cor como chocolate. E como você pode ver, nós temos bom aqui, a mudança de cor. Também podemos alterar a largura da borda Bolton. Então podemos mudar o quão grande será a fronteira deles. Então, por exemplo, podemos defini-lo para 10 pixels. E como você pode ver, são 10 pixels, é um pouco mais Vk, certo? A WAF mudou. O problema da solução como esta é que nós realmente digitamos um monte de coisas apenas para especificar o fundo da borda desta classe, certo? Há quatro. Bom para nós, algo como uma pequena propriedade de caça para definir a fronteira. Como você pode ver, primeiro você precisa digitar a largura, depois o sinal e, em seguida, a coluna. Então só usamos a cor aqui. E então precisamos digitar a largura, então 10 pixels. Então precisamos digitar que estrela vai ser. Então, no nosso caso, é inserida. E então precisamos digitar a cor. Então, em nossa situação é chocolate. Então agora nós podemos apenas remover isso, e isso é realmente, isso é igual a essa coisa aqui. Mas note que eu não adicionei botão aqui. E por causa disso, vamos definir todos esses valores para cada borda no topo, para a direita, para a parte inferior e para a esquerda. Então, se você quiser dizer, hey, Island, para escolher apenas o fundo, e então eu vou dizer um fundo de fronteira. E agora, como você pode ver, nós mudamos apenas a parte inferior da coisa aqui, como você pode ver, eu uso isso aqui para definir a borda esquerda para 50 pixels, e então eu mudo a cor de fundo. E por causa disso, parece que são textos mais importantes, certo? Tem uma coisa vermelha aqui à esquerda, que é uma fronteira, certo? Então isso é, isso pode ser muito útil. Observe também que você pode mudar a largura de nossos blocos assim, certo? E vai ficar melhor quando você fizer isso. Na maioria das vezes quando não há texto suficiente, certo? Por isso, é boa ideia lembrar-se disso. Você pode fazer essas coisas. Também é bom saber que, bem, note que quando estabelecemos a fronteira assim, para tudo, podemos remover, por exemplo, estes e este usando que fronteira. E queremos escolher o topo, depois o estilo, e podemos defini-lo para nenhum. Como você pode ver, removemos a borda superior. Agora. Podemos remover o estilo da borda. Borda, estilo certo para também nenhum. E como você pode ver, eu removo também o lado direito. Lembre-se que é muito, muito importante que ordem você digita todas essas coisas porque Eva, nós começamos a partir disso e então nós adicionamos a fronteira. Você vai notar que nós não removemos nada. Por que é isso? Então é porque o CSS foi para cima, ser interpretado de cima para baixo direito. Então, quando estamos neste seletor especificamente, computador vai ler isso. Ele precisa remover a borda no topo à direita. E então ele vai lê-lo. Ele precisa adicionar a borda em cima à direita, em baixo à esquerda, direita. Então não fizemos nada que queríamos fazer. Então esta palestra também é importante não só porque você aprendeu o que é fronteira, mas você precisa lembrar em que ordem você coloca as coisas porque às vezes você pode ser como, por que isso não está funcionando? Não está funcionando porque você coloca as coisas fora de ordem. Isto é muito, muito importante. Também é bom para nulo. Bem, vamos comentar que quando você está definindo o estilo de borda, você pode colocar aqui o valor um e o valor dois. Ok? Então significa que, bem, você poderia digitar algo como, obrigado, isso é ótimo. Outra definição, definição dois. E observe que quando eu digitar estilo de borda, por exemplo, sólido, vamos ter medo de tudo sólido. Mas quando eu for firme. E então, por exemplo, cara, como você pode ver, nós temos coisas boas na fronteira na parte superior e inferior. Por que é assim? Porque se você colocar apenas, se você colocar mais de um valor, em seguida, o valor um foi para cima, efeito a parte superior e inferior. E o valor 2 vai afetar a esquerda e a direita. Ok? Então, se digitarmos aqui pode ser algo diferente como sulco sólido, então ele vai ter sólido aqui e ranhura no lado esquerdo. Então você pode misturar as coisas, certo? Mas também, é bastante útil apenas remover, por exemplo, esquerda e direita. Observe que quando fazemos coisas como agora nós, por exemplo, 500 pixels e, em seguida, com o texto alinhar, então centramos o texto lá dentro, se ele vai parecer muito legal, certo? Porque você tem uma mensagem importante e tem boas fronteiras em cima e baixo mortos, como o SAS que é importante, certo? Porque sem eles, você nem notaria essas mesas, certo? Mas agora é mais fácil perceber, certo? Assim, as bordas podem ser usadas para decoração, mas também para garantir que a pessoa que está lendo os textos veja o texto, certo? Nós só somos importantes para ele. Há também mais uma coisa que os repreende. Relógio ou papel. Perceba que podemos colocar mais valores como sem valor e quatro. E então o valor um é responsável pelo topo. Valor 2 é responsável pelo direito. Como o relógio vai direto para o, vai de cima para a direita, certo? Vai na direção certa. Então ele vai primeiro o topo, direita, então o valor f3 é igual ao fundo, e então o valor quatro é igual à esquerda. Então poderíamos definir algo como nenhum, nenhum, nenhum, certo? Então isso significa que nós vamos ter apenas o sólido no topo. Outras coisas serão removidas pelo Kiel, certo? E podemos, por exemplo, definir, digamos que queremos comer na esquerda e inferior direita. Então, como eu faria isso? Precisamos de um sólido aqui e aqui, certo? Em outros lugares, não queremos ter nenhum. Então agora é assim. Então você pode decidir qual estilo vai ser apresentado ou qual não vai estar presente, certo? Você também pode dizer agora algo como, vamos mudar a fronteira. Esquerda, carvão ou dois, por exemplo, carmesim, certo? E como você pode ver, nós mudamos a cor de todos esses caras aqui. E lembre-se também que a ordem importa, certo? Quando fizermos assim, vai funcionar desta vez porque não mudamos a cor mais tarde, certo? Mas se você fez coisas como cor da borda e mudar a cor para, por exemplo, preto, certo? Repare nisso porque mudamos tudo para preto e depois as duas rainhas esquerdas, e então a esquerda vai ser cremes mal quando o colocarmos aqui, certo? Como você pode ver, nada aconteceu porque mudamos a borda esquerda para Crimson, mas depois mudamos cada fronteira para bloquear. Lembre-se sobre a ordem, ok, isso é muito, muito importante. Isso é tudo nessa lição. Como um exercício, tentar jogar com todas essas coisas que você aprendeu nesta palestra é boa idéia para jogar com ele, porque então você vai se lembrar melhor. Então tente criar uma definição que esse cara tem, por exemplo, cor diferente no lado esquerdo. E talvez fazer um botão de borda que seja um pouco mais estreito. Escreva-o para não ser tão grande como este. Então talvez diferente, certo? Isso está na lição. Muito obrigado. 59. Cantos arredados: Olá a todos. Cada canto, que se parece com isso, que é quadrado direito para baixo, pode ser arredondado. Para fazê-lo, precisamos usar a regra que é chamada de raio de fronteira. Então nós apenas gostamos de raio de fronteira e, em seguida, nós digitamos, por exemplo , 10%, o que significa que nós queremos tê-lo em torno dele em 10%. E como você pode ver, todos os cantos são arredondados em 10%. Mas eu acho que neste caso, é melhor usar, por exemplo, pixels. E então você vai notar que, ok, nós executamos o DEM em 10 pixels e como você pode ver, eles são muito mais bonitos. A primeira coisa que você vai notar provavelmente é que este raio de fronteira não é coletado conectado à borda esquerda, direita. Observe que podemos remover a borda e ainda esta caixa vai ser arredondada para que você não precisa usar bordas, certo? Mesmo a caixa inteira ou assim, a fim de tê-lo arredondado. Ok? Isso é muito importante, o que significa que você pode, por exemplo, criar entradas livres e, em seguida, obter duas entradas. E então, por exemplo, defina o raio da borda para eles. Nós só 10 pixels. Por padrão. Vamos ver como se parece. Como você pode ver, é assim que parece em como a entrada se parece. Mas quando eu adiciono raio de fronteira, eles têm aparência diferente, aparência muito legal. Você pode criar sua própria entrada. Como, como eles vão se parecer? É boa ideia adicionar alguma margem. Então há algum tipo de espaço entre eles, certo? Como você pode ver, temos executado as entradas são suficientes. Quando pode algo assim também ser usado? Vamos criar uma classe que será chamada, por exemplo, dica. E digamos que aqui é uma dica importante como esta. E vamos agir como a dica. E agora observe o fim de semana fazer algo como, por exemplo, cor de fundo. Vamos mudar a cor da dica. Então parece muito ruim. Agora, vamos fazer 300 pixels como este. Então vamos, por exemplo, textos alinhados ao centro. E como você pode ver, agora está centrado. E agora vamos fazer o comprimento do raio da borda de Deb, por exemplo, 10 pixels. Como pode ver, parece melhor. Mas ainda assim. Vamos fazer algo que aprenderemos no futuro, que é chamado de preenchimento. E vamos definir brotação para, por exemplo, 20 pixels. Como você pode ver, preenchimento adicionado. O fundo na parte superior e inferior é adicionado o espaço que é igual a 20 pixels agora. E então isso realmente parece uma dica importante, certo? Diz terra nua e também encurralou os cantos arredondados, certo? Quando removo o raio da fronteira, parece estranho. Agora mesmo. Parece melhor. No entanto, podemos torná-lo ainda melhor. Um olhar, ainda melhor. Olha, você pode colocar aqui o valor como 10 pixels, mas o que vai acontecer em nosso anúncio aqui, o segundo valor como 15 pixels, nós temos banana. O que aconteceu? Observe que 10 pixels afetaram o quê? Canto superior esquerdo e direito, canto inferior, direito. E 50 pixels afetaram o canto superior direito e o canto inferior esquerdo. Ok, então é assim que funciona. Podemos dizer aqui que quando você digita algo assim, isso significa que o primeiro valor vai afetar o canto superior esquerdo e o canto inferior direito, direito. Quando você mergulha o valor dois, você vai afetar o canto superior direito e o canto inferior esquerdo. Ok? Isso não é tudo. Você também pode fazer algo assim. Então, se eu digitar algo assim, isso é igual a isso. Mais uma vez, isso é igual a sinfonia. Essa data é igual, ok, é a mesma. O que significa que quando você digita algo assim, volume número um é canto superior esquerdo, bem aqui. É o canto superior direito? Como é que me lembro disto? Eu sou tão bom? Tão bom. Preços, coisas assim. Tenho uma mensagem abaixo de mim? Eu só uso a ordem do relógio no sentido horário, certo? Porque note que este é o canto superior esquerdo, depois o canto superior direito, e depois? No canto inferior direito, à direita. Em seguida, o valor para força é igual ao canto inferior esquerdo. É assim que o relógio funciona, certo? 0, 0, 0, 0. E a coisa legal sobre isso é que podemos, por exemplo, definir um dos valores dois, por exemplo, 0, 0 pixels. E agora reparem que temos algo assim, certo? Então isso é arredondado um pouco, isso é arredondado muito. Estes arredondados um pouco. E aqui temos jazz no canto quadrado, certo? E criamos nossa dica personalizada. Isso parece muito legal, certo? É assim que se pode mudar o raio da fronteira. Só há essa lição. Muito obrigado. 60. Tabelas e preenchimento: Olá, meu amigo. Esta mesa aqui está horrível agora. Vamos melhorá-lo usando o CSS. A fim de selecionar tabela, só precisamos mergulhar em horas aqui esta tabela. Ou se você quiser nomeá-lo, você poderia usar o IV, certo? E assim eu tenho uma carona como esta. Mas queremos selecionar qualquer tabela que temos do nosso lado, então não vamos adicionar o ID. Então temos selecionar tabela e agora é hora de adicionar, por exemplo, uma borda como esta borda branca que é apenas um pixel. E como você pode ver, você tem fronteira em torno da nossa mesa. Está bem, tudo funciona bem. Mas o primeiro problema é que não temos o espaço entre a nossa página web no lado esquerdo e estas partículas, a nossa tabela. Então, a fim de mudá-lo, nós vamos adicionar a margem dez pixels. Então isso parece melhor, certo? Podemos ver claramente que temos uma fronteira aqui. Agora, vamos adicionar, por exemplo, borda dentro de cada tabela de dados. Então vamos fazer assim. Um pixel preto sólido. E você vai notar que há um problema porque cada tabela de dados tem sua própria fronteira, certo? E para ser honesto, não parece bom, certo? Seria ótimo se esta fronteira do lado direito se conectasse a esta fronteira do lado de fora. Se pudesse se conectar de alguma forma, entrar em colapso um no outro, seria ótimo. E há uma regra que é chamada de colapso de borda, que por padrão é definida para separar, o que significa que eles não estão conectados. Mas quando você muda para colapso, como você pode ver, nós conectamos a borda dos dados da tabela a qualquer outra borda e agora parece melhor, certo? Definitivamente melhor, mas ainda assim não é bom. Agora é hora de adicionar um espaço entre o que, entre o texto, o conteúdo de cada tabela de dados e a borda em torno dele. E esse espaço entre o conteúdo e a borda é chamado de preenchimento. Acolchoamento. Portanto, há uma regra que é chamada de preenchimento e você pode adicionar, por exemplo, 10 pixels são, por exemplo, 15 pixels entre o conteúdo e a borda desses dados da tabela. E como você pode ver, agora definitivamente parece melhor. Podemos mudar para 100%. Você pode ver aqui que precisamos redefinir o Zoom. Então parece agora assim ou isso definitivamente parece melhor do que quando não temos estofamento, certo? Observe que quando você usa as Ferramentas do desenvolvedor da Web e quando eu uso o Control Shift mais I ou j no navegador da Web, eu posso selecionar cada item. E como você pode ver aqui na cor roxa, temos um bom estofamento. E como você pode ver, a mancha é em torno do que o conteúdo, certo? O conteúdo é agora selecionar todos os elementos chamados b. E este é este texto, certo? E quando eu mover o mouse para cá, como você pode ver, nós o selecionamos. Quando eu me mudar para cá, temos aqui um estofamento, certo? Isto é apenas algum tipo de espaço extra entre o texto e a borda. E é muito necessário porque caso contrário, isso só parece ruim. Agora é hora de mudá-lo um pouco mais, por exemplo, removendo, removendo a borda de todos. Repare que, ei, estamos apenas perdoando, isso parece muito bom. Mas havia, seria bom se houvesse algum tipo de separação entre cada linha, certo? Então vamos escolher a mesa ou tudo. E vamos adicionar a borda na parte inferior de cada linha da tabela, certo? Como um bloco sólido de pixel. E agora você vai notar que isso parece muito bem, certo? Separamos cada fileira da mesa e não há apenas sobrecarga aqui, certo? Como, por exemplo, a borda esquerda, a borda direita. Acho que está melhor agora. E isso é muito importante saber que você tem que usar o colapso da fronteira aqui. Observe que quando eu removê-lo, nós simplesmente não trabalhamos. Quando eu adicionei por, ele funciona bem. Então lembre-se sobre a adição de colapso de borda, a fim ser capaz de até mesmo criar uma borda dentro de linhas de tabela. Ok, então é assim que funciona. Acho que devemos também escolher, por exemplo, legenda. Vamos escolher a tabela th. Então, selecionamos o cabeçalho da tabela. E vamos torná-los um pouco maiores, certo? Como, por exemplo, tamanho da fonte 24 pixels. Como você pode ver, eles são maiores agora. Assim, podemos ver claramente que estes são cabeçalhos. Nós poderíamos definir para ambos, o peso da fonte muito negrito, então eles estão em negrito. Não só este pacote, então o acima aqui, bem, talvez não, talvez isso seja melhor. Então é assim que você pode mudar isso muito rápido. Você pode mudar as cores aqui, você pode mudar a cor de fundo também, por exemplo, eu não cortá-lo azul e a cor das coisas que são escritas ela para Crimson. E como você pode ver, agora parece muito ruim. Lembre-se de que quando você quiser escolher cores, você deve tentar escolhê-las a partir do enredo. Então é melhor usar o tamanho como este, certo? Eles têm esquemas de cores e escolhem as cores de acordo a partir daqui, certo? Porque como você pode ver, por exemplo, em laranja. Então, na cor de fundo como esta, é bom ter a cor como esta, por exemplo, certo? Por isso, não posso dizer assim. E isso vai parecer um pouco melhor agora. Ainda não parece muito bom. É porque, para ser honesto, você deve mudar a cor de papéis iguais na tabela, certo? Então mude a cor deste neste, este aqui. E este deve ser de cor diferente ou deve haver alguma diferença entre eles, a fim de torná-lo o bom, a fim de fazê-lo, você precisa aprender sobre coisas que são chamados de pseudo-seletores, mas nós vamos aprender sobre eles no futuro. Então, por exemplo, note que eu vou apenas dar-lhe uma amostra quando eu tiver sua tabela, dados da tabela, digamos que eu quero fazer todos esses caras em negrito, mas apenas para os dados da tabela que é o primeiro, certo? Não este. Só este. Como escolhê-lo? Temos uma tabela, 2 D, então estamos indo para a tabela, então estamos indo para 2D. E nós temos os dois. Eu quero apenas este. A fim de ter apenas estes são você usar o cólon aqui e, em seguida, usar o primeiro pseudo alinhamento filho. E assim mudamos apenas o primeiro cara. Está bem? Então vamos fazer coisas como mesa para o primeiro filho TD. Porque aqui estamos mudando o estofamento, certo? Então, hum, mas nós queremos ter estofamento para ambos como o mesmo. Mas queremos ter o peso da fonte em negrito no primeiro gráfico. Então você pode ver agora esses caras são ousados, mas também seria melhor. Ele continuou mesmo na tabela dados do primeiro filho seria negrito, certo? Vai parecer muito melhor, mas aprendemos coisas assim em futuras palestras. Há apenas uma dúzia. Obrigado. 61. Como criar menu horizontal? Estados de links: link, visitado, hover, ativo: Olá, meu amigo. Hoje é hora de que, para, como melhorar a aparência de nossas âncoras. Então os links, ok, vamos criar um menu usando algo chamado estados dos elementos do seu lado. Ok? Então vamos primeiro usar a âncora e vamos acessar, por exemplo, essas imagens caindo, certo? E, por padrão, o link se parece com isso. E é azul. Por que é isso? É porque é um lado não visitado. No entanto, quando eu clicar sobre ele e, em seguida, eu voltar, ele agora é roxo é porque o estado mudou para visitado. Certo, então temos dois estados. Um é o link, o segundo é visitado. Link é apenas unvisited maneira padrão como o link se parece. E podemos acessar o estado. Como é que o acedemos? Para acessá-lo, digitamos o nome da âncora e, em seguida, digitamos a visita. Ok? E também mergulhamos o link da mesma forma. E agora podemos mudar como eles se parecem quando algo é visitado ou não. Então vamos mudar. Em primeiro lugar, a coisa visitada porque onde temos bom agora só visitou em Q. Então vamos mudar a cor para viver. Por exemplo, marrom. Como você pode ver, agora é marrom, certo? Então, alteramos o comportamento padrão. Vamos criar outro link. E vamos, por exemplo, enviá-lo para financiar uma pedra de corte medius. Nós não temos um pago como este, mas ele não é visitado em nosso navegador web agora porque ninguém clicou nele. E como podem ver, é azul. E nós podemos mudar também o estado estacionário não visitado em abundância para, por exemplo, eu sei aqua, como você pode ver, agora é aqua. Ok? Então é assim que você muda a aparência deles quando algo é visitado ou não, certo? Há também algo chamado é chamado de um e, em seguida, o pairar. E isso é muito legal porque esse estado é realmente um estado que você pode colocar em quase qualquer ataque. E significa “mão sobre”. Então, quando você move a mão para mover o mouse sobre algo, essa coisa deve acontecer. Isto é muito fixe. Por que é assim porque o estado chama quando você move o mouse sobre o link. Então podemos criar algum tipo de animação que esta instância. Então vai aparecer instantaneamente, certo? E digamos que vamos apenas mudar a cor para, por exemplo, digamos assim. E como você pode ver agora quando movemos o mouse sobre o link, algo acontece assim, por exemplo. E você pode fazer realmente o que quiser. Você pode alterar a chamada de terra da barra ou escrever. E usaremos o velho, mais velho em breve para fazer isso parecer melhor. Ok? No entanto, há mais um estado que eu quero falar sobre qual é ativo. E como o nome sugere, ele vai invocar quando o link estiver ativo. Mas quando o link está ativo realmente. Bem, quando fazemos algo como vamos mudar a cor para azul violeta. Então é fácil notar. Quando eu mover o mouse sobre, o link não está ativo, ouvir é ativo quando eu clicar nele, como você pode ver. E este é apenas o momento em que você clica nele. Ok, então é difícil de detectar. Vamos talvez eles saibam alguma coisa, cremes e vamos mudar a cor de fundo para alugar. Como você pode ver, isso só acontece quando eu clico, clique botão esquerdo e você sabe, eu movo o mouse aqui. Então, isso ainda está no modo ativo, mas só não é desabilitado. Como você pode ver, apenas quatro milissegundos quando você clica em algo, certo? Então é quando o link está ativo. Então, há quatro estados como este. E podemos usar esse conhecimento agora para fazer algum tipo de manual. Ok? Como vamos fazer isso? A primeira coisa é que devemos retirar estes textos de declaração abaixo. Link, este sublinhado aqui não está muito bom, certo? Então vamos acessar algo ou simplesmente chamado de papel de decoração de texto. E nós temos que mudá-lo para nenhum. Não queremos vê-lo. Como você pode ver. Nós clicamos em imagens engraçadas, certo? Então, por que desapareceu também no estado não visitado? Isto é porque a decoração de texto é herdada nestes estados, está bem? No entanto, não é para todas as outras coisas. Quando eu mudar, por exemplo aqui para cor aqua. Só o visto no link não visitado mudará, certo? Então, para ser honesto, eu quero continuar adicionando, olhar o mesmo como um visitado. Então, como eu faria isso? Então, quando normalmente eu precisaria fazer algo assim, certo? Mas se eu parasse, eu começaria a digitar algo aqui. Eu também preciso fazer isso aqui. Isso não é bom. É por isso que vamos usar a seleção múltipla ou assim, certo? E agora, quando digitarmos algo aqui, isso afetará esse e esse estado ao mesmo tempo. Agora não precisamos nos preocupar com nada. Então, ok, vamos, por exemplo, mudar a cor para branco. Certo, assim. Mas precisamos também mudar a cor de fundo para que seja um pouco visível e eu vou usar o cólon 059555. Esta é uma cor verde como esta. Ok? E você pode escolher, é claro, a cor daqui. Escolhi estes antes, por isso parece bom. Ok? E agora, quando temos uma cor de fundo, você vai notar que o que os links são realmente um elemento inline, certo? Então, quando eu não posso mudar a largura, eu posso mudar a altura do elemento. E também fará com que o estofamento latiu um talão. Observe que quando eu uso o popping, a fim de criar um espaço entre a borda e o texto. Temos o polígono esquerdo, direito e lado inferior, mas não há preenchimento no topo. E que pequeno. Observe que quando fazemos algo assim, então eu coloco tudo na div e quando eu copiá-lo mais uma vez, nós vamos ter coisas engraçadas. É porque, bem, nós temos aqui por padrão display definido para inline, e é assim que ele funciona com o preenchimento. Isto é um pouco bargainer. Mas quando mudarmos para blog, vai parecer melhor, mas não queremos ter links por todo o lado. Queremos que algo exiba inline-block, certo? Então eles estão em linha, mas eles estão bloqueados. E agora envasar tudo funciona bem, certo? Se eu copiar isso mais uma vez aqui, vai funcionar bem. Então, ok, então nós mudamos o display inline-block. E também vamos definir, por exemplo, a cúpula de fronteira, por exemplo, ampla. Como você pode ver. Um pixel sólido, um pixel sólido branco. Algo como isto. Como você pode ver, agora temos uma boa fronteira em torno dele, que é branco. E agora é hora do melhor ajuste. Vamos fazer o mesmo com o ativo aqui. Para o efeito de pairar porque esta é a coisa mais importante. Então, quando eu mover o mouse para cá, eu quero mudar a cor do fundo primeiro. Então vamos mudar a cor de fundo para, por exemplo, branco. E como você pode ver, não é grande, mas o problema é que nossos textos desapareceram. Então precisamos mudar a cor do nosso texto de volta para o que fazer, por exemplo, qual era a cor do fundo antes? E agora está bem legal, certo? Porque mudamos a cor de fundo e a cor do texto ao mesmo tempo. Poderíamos também fazer o mesmo com, por exemplo, a fronteira. Então nós podemos, vamos copiá-lo. E nós vamos apenas definir aqui a cor como esta. E como você pode ver agora é ainda melhor, certo? Então criamos algum tipo de maneira aqui. Podemos enviar pessoas para outros sites. Ele não precisa ser o site SAP do seu lado. Você só precisa alterar os direitos do esquema de texto. Mas criamos um homem. E reparem agora que há algum tipo de problema. E se você tivesse algum tipo de textos como, Hey clique lugar, por favor clique aqui e subscreva, por exemplo. E você quer que isso, por exemplo, essa coisa aqui seja um elo, certo? O problema é que esse comportamento está agora em todos os lugares em seu site e provavelmente não está. O que vocês queriam alcançar, certo? Então, é uma boa idéia usar o, por exemplo ID e dizer que este é o menu, certo? E agora vamos mudar o comportamento dos links apenas dentro do manual. Certo, então vamos fazer algo assim, assim, assim. E como você pode ver, agora essa coisa não é afetada por isso. Dentro do manual são afetados. Lembre-se que o EV queria ter mais de um manual. Você não deve usar o ID, você deve comer, usar em vez de classe então, e mudar aqui em cada protease, o hash nos dados, certo? Assim. No entanto, na maioria das vezes há apenas um único homem, certo? Então podemos voltar usando os gráficos de contorno z. Então é assim que você pode mudar a forma como os links se parecem. Essa é apenas a lição. Obrigado. 62. Alterando ícones de lista padrão | :: antes do seletor: Olá, meu amigo. Hoje vou mostrar-lhe como mudar a aparência dos marcadores no lado esquerdo da lista. E faremos isso de duas maneiras. Então você quer mudar isso em algo que parece bom, ok, então para algo que parece, por exemplo, assim, é definitivamente melhor. Certo, então como fazemos essas coisas? Em primeiro lugar, precisamos selecionar as listas não ordenadas, por exemplo, certo? E dentro da nossa lista não ordenada há algo como o estilo Elise. E como podem ver, temos aqui regras livres. Um deles é o tipo que permite que você altere o tipo do seu lançamento para coisas que estão disponíveis aqui. Por exemplo, para lista não ordenada, a mais popular é quadrada. Portanto, não podemos alterar o marcador padrão que está no lado esquerdo aqui para o quadrado. Como você pode ver, nós mudamos de algo que é chamado de SQL, ok? Há também algo que é chamado círculo. E há mais alguns, como você pode ver disponíveis aqui. No entanto, na maioria das vezes, esses são os que são usados com mais freqüência. No entanto, há também um mais que você deve saber sobre que é chamado non iria apenas remove o marcador. Isso é muito importante às vezes porque você quer obtê-lo aqui, um personalizado, ou você simplesmente não quer ter uma lista. Temos o mercado do lado esquerdo. Então, é quando você usa a Sony. Você verá um exemplo prático quando algo como isso é você notar que esta é uma lista não ordenada, que significa que nós não nos importamos com que tipo de ordem está dentro de um limões aqui. Mas podemos facilmente mudar isto para a OrderedList, certo? Os ordenados por padrão são número. No entanto, também podemos alterar o estilo da lista, digitar em algo como, por exemplo, alfa superior, que irá mudá-lo para a, B, C, D, E, F, G, e assim por diante, certo? Ou podemos usá-los, não a parte superior do corpo, há também o Alpha inferior. Escreva algo assim e isso vai ser letras menores. Há também algo chamado lei, como o romano inferior. Então vamos usar o romano, o número, números e recursos, ou grego inferior, que é parecido com as coisas da boca. Há Latim mais baixo, escreva algo assim, então você pode usar isso também aqui. Mas o problema é que eu não sei o recomendado porque este é ordenado e você deve usar tipos que estão conectados a numerar coisas aqui, certo? A ordem importa aqui. Há um sob isso, então poderíamos usar alguns ícones, algumas coisas que não estão conectados ao IBC, o win-win, algo quando você vê a ordem, certo? Então vamos voltar para a lista não ordenada, e vamos voltar a criar o que uma imagem gosta. Por exemplo, o que eu coloquei aqui. Então aqui temos um tick, que é a extensão do tick é PNG. E isso é muito importante porque não há, como podem ver, nenhum fundo aqui. E porque não há fundo e PNG permite que você faça isso, ele vai ficar bem em todos os bares, certo? Porque ele só vai pegar o fundo da coisa que ele aparece, certo? Então, isso é muito importante usar o arquivo PNG e você pode redimensioná-lo para algo deslizar 12 pixels, por exemplo. E para redimensioná-lo, recomendo o programa chamado Pine dotnet. Você pode encontrar uma imagem na internet, que é o, que tem a extensão PNG e redimensioná-lo para algo pequeno como este. Mais leve. Você pode escolhê-lo fazendo algo como o mínimo, estilo essa imagem. E aqui podemos usar algo que é chamado URL. Aqui, você coloca as aspas que o caminho para onde a imagem está. Como você pode ver, nossa imagem é onde está aqui. Então, precisamos primeiro saltar da pasta CSS para o que fazer a página principal 1 linha direita para a pasta principal e, em seguida, ir para imagens. Então, para fazer isso, precisamos usar o que para isso e depois o lodo. E como você pode ver agora, podemos ir para imagens, em seguida, o tick PNG. Então nosso caminho se parece com isso. E agora, como você pode ver, temos uma bela marca no lado esquerdo que se parece com isso. E podemos colocar aqui uma imagem que você quer, certo? Mas lembre-se que deve ser PNG, caso contrário não ficará bem em cada Bagua, certo? Então é assim que você adiciona a imagem. Mas há também outra maneira, que é eu acho que para a maioria Stein, ainda melhor porque você não precisa olhar para a imagem. Certo, então como usamos esse método quando fazemos algo como você e depois Ally? Então nós escolhemos o que o LI dentro da URL. Podemos mudar, por exemplo, a cor para amarelo, certo? E como você pode ver, nós mudamos a cor do que do texto aqui, certo? Mas há também algo que é chamado de antes selecionado. E o que ele faz? Como pode ver, quase como se nada tivesse acontecido, certo? Porque quando você adicioná-los antes de entrar em algum tipo de modo, o modo que permite inserir, para, inserir conteúdo para E, Mas antes dele. Ok? Então, onde é isso? Antes? Está aqui, ok, queremos colocar o conteúdo aqui. E, mas como colocamos o conteúdo aqui? Precisamos usar algo chamado é chamado de conteúdo. Ok? Assim, o conteúdo permite que você adicione algo fila e você colocar o conteúdo nas aspas, dentro das aspas. E aqui colocamos o conteúdo certo, para que possamos até ver cantando le, le, le, le, le, le. Então essa coisa vai aparecer aqui, ok? Como você pode ver, nós vimos e o que é mais é amarelo. Então, alguma coisa que faça para se sentir bem? Então, por exemplo, queremos alterar o peso da fonte para, por exemplo, bola. Você não vai se trocar aqui agora, certo? Então, afetamos apenas o conteúdo com as regras aqui, certo? Isso também é muito importante. Significa que podemos colocar o que quisermos. Mas é aí que podemos encontrar coisas políticas para eles? O legal é que as entidades permitem que você, quando você vai a um site como este acima, colocar realmente muitos sentimentos, certo? Há setas que você pode achar interessantes, como por exemplo, esta ou esta. E para usá-la, precisamos usar o valor hexadecimal daqui, certo? Não então TT, mas o valor x daqui. Então, por exemplo, eu gosto desta flecha aqui. E para usá-lo, vou usar a barra invertida, não a lama, mas a barra invertida. E depois o número do lado que te mostrei. E agora você vai ver que nós temos seta amarela que se parece com isso, mas nós temos também o estilo padrão aqui, certo? Então vamos removê-lo, estilo de lista, tipo, Vamos configurá-lo como nenhum, certo, Então queremos remover eu fiz isso no removê-lo. Certo, porque precisamos fazer algo assim, certo? Então este é o URL, URL. Então, quando fazemos coisas assim, temos isso. Quando fazemos assim, temos isso e queremos apenas removê-lo, certo? Então vamos para o lado leste morto. Nenhum. Então não há nada assim aqui. E temos apenas flechas de um ano. Podemos usar até mesmo quaisquer ícones emoji ou hey, eu quero ter essa coisa, então eu vou tê-lo aqui. Como você pode ver. É assim que parece. Então cabe a você o que vai usar, certo? Você quer ter uma teca que se parece com isso, então você vai ter um carrapato que se parece com isso. Há todo o tipo de coisa. A lei realmente, você não terá tempo para verificar todos os possíveis daqui. Esta é uma grande quantidade e projetar o emoji certo? Image Smyth, o que puder colocar, o que quiser antes do contrato. E o que é mais, lembre-se que antes da coisa, esta coisa funciona em qualquer elemento, certo? Não só tem aqui n elemento, mas este é um exemplo prático como usá-lo. Há coisas que são ala lembrar, porque na maioria das vezes estamos usando o sinal de ticks e tick é reservado sob este número. Como você pode ver, temos um tique aqui, e o DQ negrito está abaixo de 27, 14, como você pode ver agora ele está negrito é ainda mais visível, certo? Então lembre-se quando você usar o imposto antes, antes do seletor, você precisa adicionar o conteúdo. E o conteúdo vai ser alterado de acordo com as regras abaixo, certo? Por isso, quero que seja lá em baixo. Vai ser azul, certo? Temos um cara azul aqui. E observe que ele será avaliado. Haverá algum tipo de espaço aqui, certo? E você pode colocar o DSpace aqui usando os mil, ok? Como podem ver aqui há um espaço entre este novo tique e o conteúdo, certo? Parece um pouco melhor agora, acho que essa lista, mas cabe a você, certo? Então queremos ter mais espaços. Você pode fazer algo assim, certo? Se você não quiser e então não duvide. Mas este é o espaço e é onde está escondido. Há também algo como 000 BBM, que eu recomendo usar, que está olhando muito incrível, certo? É como, hey, este é o primeiro elemento perde, o segundo é o terceiro, certo? Na lista desordenada é muito legal. Então, digamos que menos de 2713 é grosso. 2714 é negrito, tick escrever 000 BB é o que? É algo como isto, muito parecido com isto. E mil, 000 a, um 0 é gasto, certo? 63. Tornando elementos transparentes: Olá, meu amigo. Hoje você aprenderá a fazer algo transparente. Significa que o fundo ficará um pouco desfocado, certo? Vai ficar borrada. Então você pode ver através do fundo, certo? E nós vamos usar para essa opacidade e a linha RGBA, eu vou dizer-lhe a diferença entre isso e isso. Mas antes de fazermos isso, vamos praticar um pouco. É uma boa ideia fazer o que eu faço agora. Manualmente. Então não baixe o código-fonte, tente fazer o que eu faço. Ok, Esta é uma boa prática porque nós vamos adicionar para imagens para fazer um exemplo prático manualmente aqui, agora, mas usando Emmet. Então, como adicionamos imagens? Podemos digitar a imagem, certo? E, em seguida, colocar os valores para os atributos. Mas hey, nós precisamos de imagens, então imagem multiplicada por quatro. E agora vamos para as imagens e então escolhemos o arquivo que queríamos ter. Então precisamos colocar o curso de vídeo C afiado, a versão que usa o atalho Z de saída para tornar tudo visível em uma tela. E vamos apertar o botão F1 e digitar o tamanho da imagem de atualização. Então nós temos o tamanho da imagem, ok, então aperte o botão guia e precisamos ir para outro curso. Então, como este e curso de vídeo, curso de vídeo C plus. E depois o quê? Atualizar imagem F1, Tab. E novamente, imagens. Eu posso usar o espaço para que eu vou obter as dicas, Foster e vídeo curso Java. Acho que apertei o botão errado. Preciso fazer manualmente. Então o vídeo ocorre. Java e imagens. Fala ser vídeo, é claro, PHP. E precisamos atualizar o tamanho da imagem. E é uma boa idéia na arte aqui, entrar, então ele olha para ele assim. Então temos quatro imagens e imagine que você tem lado onde você permite clicar em cada imagem como esta para obter o usuário para um site específico onde ele pode comprar o curso como este. E para fazer isso, precisamos colocar isso no tornozelo, certo? Então vamos usar a âncora em bem, todos esses caras, então vamos usar a tecla de saída, e esse é o ângulo. E aqui precisamos, eu acho que o HTML5 deve ser chamado muito semelhante como aqui, certo? Porque, por causa disso, será mais fácil tornar seu site mais alto no Google assim. Então temos agora links. Então, quando eu mover o mouse sobre as coisas aqui e eu clicar sobre ele, nós vamos ser enviados para a página assim. A página não existe. Bem, você pode criá-lo manualmente, mas nós não vamos fazê-lo porque este não é o diretório não é sobre morte. Imagine o usuário do lado, como aqui, e como eu sugeriria para ele que ele possa clicar em algo assim? Ok, nós mudamos o cursor do curso para o ponteiro direito? De como este para caçar. Mas isso não é suficiente. Penso que devemos mudar a opacidade, por isso devemos torná-la transparente como fazê-lo. Vamos selecionar um e dentro. Se houver dentro de um EMG, vamos mudar a opacidade. E como você pode ver, os valores para a opacidade de 0 a 11 significa que nada mudou. No entanto, você coloca, por exemplo, um ponto zero. Você vai notar que ela é bem transparente, certo? Você pode ver através deles. Então vamos colocar aqui, por exemplo, 0,7, ok? E agora é um pouco transparente, certo? Eu quero mudá-lo para não ser transparente e mais quando alguém mover o mouse sobre as coisas aqui. Certo, então como vamos? Vamos usar o pairar. Ok. Então, pairar é a mão. Falamos sobre isso quando usamos nos tornozelos, certo? Então, quando alguém move o mouse sobre, ele, come, ele, aplica as regras que estão dentro onde você coloca o pairar, certo? Então, quando você faz algo como um EMG e quando alguém move o mouse sobre, direita a entrega, então a opacidade vai mudar de volta para um. E como você pode ver agora, isso sugere que, hey, este é um link, certo? Porque quando alguém move o mouse sobre, ele, ele claramente diz que algo muda aqui. Ok, então Islands, eu vou apenas clicar nele. E esta é uma boa sugestão para o nosso usuário. Então é quando você usa, por exemplo, ou passa. Sempre que temos aqui algo como RGBA, olha, digamos que queremos alertar alguém sobre algo em nosso site. Então, digamos que vamos criar aviso de ID. E digamos que isso é um aviso. Tenha cuidado, mensagem muito importante. Ok? E vamos fazer este portal de mensagens. Então vamos entrar em alerta e vamos torná-lo ousado. Por exemplo, vamos, por exemplo, aumentar o tamanho dele. Vamos, por exemplo, adicionar o preenchimento para torná-lo melhor. Certo, este é um cinza quente. Vamos fazer cor de fundo, por exemplo, marrom. Vamos fazer algo assim. Isto é um aviso, cuidado, mensagem muito importante. Vamos definir a largura como, por exemplo, 5000, 500 pixels. E vamos centrar isso, certo? Então parece assim. Muito quente, certo? E agora vou usar algo que é chamado de opacidade nele. Então usarei a opacidade para, por exemplo, 0,6. O que vai acontecer, como você pode ver, o problema sobre esta mensagem é que mudar a transparência do anti ou pensar com o conteúdo, incluindo o conteúdo e não algo que provavelmente não vamos porque queremos manter o texto em negrito, para ser fácil de ver, certo? E, a fim de apenas mudar a transparência de fundo, nós usamos o RGBA, ok, Então nós não usamos isso. Vamos usar a Hill Air GBA. No entanto, nós também podemos apenas clicar aqui, ok, mover o mouse para aqui e escolher a cor que queremos. E aqui podemos, como você pode ver, enviar o quarto argumento, certo, o valor quatro aqui que definimos como algo transparente deve ser. E você pode ver que o menor valor significa que ele é mais transparente. O maior número até nada é que não é transparente. Então, digamos que queremos configurá-lo para algo assim. E como você pode ver, eu vou remover isso. O texto ainda está em negrito, é preto. Nós não mudamos a transparência disso, certo? No entanto, mudamos a transparência da pechincha. E você pode estar se perguntando por que eu faria o transporte de advertência? Ok, isso é uma boa pergunta. Porque a maioria das vezes avisos como estes devem ser, por exemplo, no meio e aqui deve haver um monte de textos. E provavelmente o aviso seria sobre outras mensagens, certo? E vamos simular isso, mas eu sinto muito, mas eu não vou explicar tudo o que eu faria agora porque nós vamos falar sobre isso no futuro. Vamos usar a posição absoluta. Vamos mover o objeto para o meio. E vamos agora ter certeza de que parece corretamente. Fazendo algo assim, essa coisa. cima esquerdo. Traduza. Eu deveria usar aqui traduzir assim. Como você pode ver, este rosa faz seu texto no meio, sempre no meio. Até eu mudei o tamanho do nosso navegador. Está sempre no meio. Então, no futuro, vou dizer-lhe como isso funciona corretamente. Mas, por enquanto, você só sabe que deveria definir essas regras. Você vai fazer algo para estar no meio, certo? E como você pode ver quando eu mover isso, por exemplo, imagens aqui. Agora posso ver essas imagens, certo? Eu acho que quando você coloca um aviso do seu lado e você faz algo assim, isso é uma má idéia porque o usuário é como, ele não sabe o que está por trás, certo? Ele, ele é como se ele tivesse perdido todo o conteúdo do seu site. Eu acho que você deve sempre aplicar o Alpha a 0,9, algo como dias, certo? Então ele está tipo, ok, esta é uma mensagem de aviso, mas eu ainda posso ver claramente o que está por trás, atrás da tela, certo? Eu também vou mostrar mais uma coisa agora porque eu acho que algumas coisas que você pode estar aprendendo agora são chatas, certo? Mas infelizmente, a fim de criar coisas do zero, você precisa, às vezes, coisas chatas, mas eu não ligar as coisas agora, um pouco mais legal. Olha, vamos criar alguns textos aqui. Para criar textos, vamos usar o M em Lorem, certo, ele cria alguns textos, mas quando multiplicamos por 50, cria ainda mais textos. E o problema é aqui, como você pode ver, temos essa mensagem no meio, mas quando rolamos, não parece certo. E podemos mudar a posição de absoluto para algo que é chamado fixo. E agora essas medidas, como se mudar conosco, isso é legal, certo? Então podemos, por exemplo, criar aqui o x. Quando alguém clica no x, ele subiu, por exemplo, desapareceu, mas só quando ele leu e sabe o que está fazendo quando aceita o que está aqui. Então, como você pode ver aqui, até colocando um pouco maior, certo? Por exemplo, 200 pixels, certo? Isto é muito, muito importante. E mudamos de volta para um. Você vai notar que o usuário é leucina, certo? Tudo desta página, certo? Então, é boa ideia definir algo assim. Certo, isso é tudo na lição. Muito obrigado. 64. Alterando o cursor | como criar a caixa de hint: Olá. Hoje vou mostrar-lhe como mudar o cursor, o ponteiro para outra coisa. Como por exemplo, temos agora aqui um ponteiro padrão um, eu movo o mouse. Aqui temos um ponteiro com o ponto de interrogação que sugere que há informações adicionais, como a que apareceu com o curso de vídeo, as barras de ônibus, é em promoções e dizer que o que quer que aqui quando nós mover o mouse sobre alguns textos, temos informações estava acontecendo para que possamos colocar qualquer coisa na caixa como este. Então nós mostramos como criar uma caixa como essa também nesses extras, então esta vai ser uma palestra muito interessante, certo? Ok, então vamos continuar como fazer isso. Primeiro, removemos tudo o que fiz. Por que eu fiz isso? Grandes objetivos. Quando você vê como eu faço algo do zero, você aprende muito, muito mais do que analisar o código, ok, Então isso também significa que você deve tentar fazer tudo o que eu faço nesta palestra manualmente mais tarde, depois que você comprou. Então garra a palestra depois de vê-lo e fazer tudo o que eu fiz nesta palestra sozinho, tente não olhar como eu fiz, direito de repetir o que eu fiz, mas não olhe para a solução. Ok, então vamos começar, por exemplo, ajudando. Então, se você quiser mudar o cursor primeiro, precisamos colocá-lo em algum tipo de todos m e escrever que podemos escolher a partir do CSF. Eu sugiro começar aqui uma aula que vai chamar, por exemplo ajuda. Então, quando tivermos mais expostas, como por exemplo, aqui, eu gostaria de ser capaz de mudar o cursor em todos eles. Então, como mudar o cursor? Não podemos escolher o hub e vamos usar a regra que é chamado cursor. Muito direto para a frente, certo? E agora aqui temos um bom homem, um cursor que podemos escolher. O que vamos escolher é chamado Hub, que sugere que é usado quando queremos e dar ajuda adicional para alguém dentro do texto, por exemplo. Há muitos mais. O mais útil que eu uso mais tempo é chamado ponteiro. Assim, o ponteiro muda para ponteiro que tem boa mão sobre o texto. E sugere que você pode clicar na amostragem certo? próximo que eu uso com mais freqüência é o peso. Isso é muito legal porque quando você está fazendo algum tipo de carregamento em segundo plano, você pode fazer o usuário este carregamento. Pense na tela dele e ele saberá que precisa esperar por algo, certo? Este dedo, uma esfinge são usados mais tempo quando você sabe JavaScript, quando você carrega algo que Bergen alguns, alguns dados ou algo assim. Então, estes bastante avançados. E há muitos, muitos mais. E para ser honesto, não é como se eu me lembrasse de todos eles porque maioria das vezes você não usá-los em seu projeto, mas é bom saber pelo menos que eles existem. Então tente brincar com eles. Certo, então passe por um deles como, por exemplo, eu não sei. Vamos para a cópia e você move o mouse para cá. Ok, então cópia é assim ou isso também é uma boa idéia porque, como eu disse, você não se lembra de tudo. Normalmente digitação Google carro fonte e CSS. Está bem. E você vai encontrar lá, você sabe, cada cursor, como ele se parece em algum lugar na GPU. Lembre-se da luz do sol, você vai assistir todo o meu vídeo toda vez que precisar encontrar o cursor específico, você ainda vai conseguir, você assistir meu vídeo porque eu te mostro como fazer as coisas, certo? Eu não mostro cada não pode mostrar-lhe todos os possíveis cursor porque este é apenas o seu tempo livre quando você está me observando, Eu vou mostrar-lhe como usar algumas coisas e dizer-lhe que elas existem. Então agora vou mostrar-lhe uma coisa muito boa que é difícil de encontrar, como por exemplo, como criar um TPP, certo? Digamos que temos um título aqui. E digamos que aqui está mais informação, certo? E agora vamos copiá-lo e colocá-lo aqui e aqui, e aqui, por exemplo, estava acontecendo. E aqui vamos digitar outra coisa. Por padrão, há algum tipo de caixa que aparece como você pode ver, o que está acontecendo. Aqui está mais informação, mas parece horrível. Você gostaria que parecesse melhor, certo? Vamos mudar de volta para ajudar. E como fazemos isso? Bem, em primeiro lugar, precisamos escolher o centro. Então precisamos fazer as mudanças quando alguém mover o mouse sobre o hub, certo? Porque caso contrário, acrescentaríamos tudo. - Tudo. Nós adicionaríamos a caixa sempre certo? Não só depois de alguém mover a mão sobre o elemento de ajuda, certo? Então, queremos adicionar o conteúdo. E a questão é, que tipo de conteúdo? Digamos que amostra. E você pode ver agora quando eu mover o mouse para cá, e nada acontece porque nós não dissemos onde queremos colocar esse conteúdo. E há dois lugares onde podemos colocá-los antes do texto ou depois do texto. Observe que aqui usamos a coluna única e aqui usamos as duas colunas. Ok, isso é muito, muito importante. O, caso contrário, não funcionará. E também isso deve ser em primeiro lugar, como pairar e depois. Então, depois do texto que tem boa ajuda, classe. Gostaria de adicionar o exemplo de conteúdo. Como você pode ver, ele aparece. O problema é que nós queremos, nós não queremos que ele seja amostrado, nós queremos que ele seja derrotado está aqui, certo? Exatamente a coisa aqui. É possível levá-lo? Sim, é possível. E isto é muito fixe. Podemos digitar coisas como um TTR, que significa atributo, certo? Então você coloca aqui o nome do atributo e o título está em um atributo. E isso é tudo. Você acabou de pegar este texto e colocá-lo depois do texto que está aqui. Certo? Porque você disse que quando alguém moveu a bomba do mouse, algo mais estava acontecendo. Aqui está mais informação, muito incrível. Agora é hora de mudar a aparência dessa coisa, certo? Então, em primeiro lugar, o que devemos fazer? Sugiro que primeiro sigamos algum tipo de cor de fundo, certo? Como, por exemplo, Aqua. Vamos dizer algo assim, ok, a segunda coisa que eu acho que devemos fazer é adicionar algum tipo de estofamento. Então parece um pouco melhor. Está bem? Está melhor agora. A segunda coisa é, bem, eu acho que o raio da fronteira seria ótimo aqui. Ficará melhor quando houver um raio de fronteira nele. Ok, está ainda melhor agora. E a segunda, a terceira coisa é que o aviso que quando eu mover o mouse sobre e eu acho que ele move tudo para a frente, certo? O problema é que esse conteúdo é adicionado ao fluxo de todos os elementos. Se você queria fazer algo absoluto, absoluto, então você quer tirá-lo do fluxo de todos os elementos. uso deve usar algo chamado de repreensão, a regra chamada posição e configurá-lo para absoluto, ok? Significa que você o tira do fluxo e, como você pode ver agora, está em todos os outros dedos do seu lado. O problema é que este pano de fundo é agora o quê? Escondendo tudo para trás. E eu acho que é uma boa idéia torná-lo um pouco transparente. Então eu movo o mouse aqui e torná-lo um pouco transparente fazendo algo assim. E como você pode ver, a mudança de cor do Aqua para RGBA, e isso é aqua, mas tem uma configuração aqui que é definida como 0,7, por exemplo. E agora ele foi para cima ser o quê? Transparente. Você pode ver as informações em segundo plano. Eu acho que é um pouco transparente demais agora. Mas digamos que, por exemplo, 0,9, ok? Então aqui está mais informação. Então nós criamos isso muito fácil. Há, no entanto, um problema. O problema é que digamos que você tem uma imagem certa, e você vai acessar doentes ou feridos. Diga que você deseja acessar o curso de vídeo C mais VD0 carro C mais mais. E digamos que você vai agora adicionou a classe assim. E aqui você diz que hoje é promoção. Ainda diz L. E assim, você dá informações adicionais como essa, e quando você move o mouse aqui, nada acontece, certo? E podemos resolvê-lo colocando-o no espaço e colocando esta classe e o título no span. Como você pode ver, agora podemos ver que hoje é uma promoção. É inseguro. Por quê? Não funcionava antes, porque a imagem não é um texto. E essa coisa, o depois, funciona apenas na extensão do texto. Assim como há uma mensagem aqui dentro, ok? E nós apenas um tipo de brincadeira com o navegador web, ok? Nós apenas corrigi-lo adicionando ao limão que pode ter imagem de texto, não pode ter um texto, certo? Se a coisa divertida é que se você remover a tag fonte, ele vai funcionar porque temos a mensagem nativa externa na maioria dos navegadores web. Ok, nós trabalhamos? Este é algum tipo de correção que você precisa saber que se você quiser adicionar e fez o efeito após ou antes afetar o trabalho, você precisa usar o span ou um elemento que pode chamar texto. A imagem não é um texto. Eles podem ver que tudo aqui está em linha agora porque bem, nós temos bons todos os lugares aqui. Então podemos fazer, por exemplo, BreakLine. E agora parece assim, certo? Então criamos uma caixa, mas ainda há um problema, um problema que podemos resolver. Tudo o que sabemos como criar atributos personalizados, como jogar com eles. Observe que nós sempre precisamos usar a classe não seria ainda melhor se ele leva o título a partir daqui automaticamente. E também será Grau IV. Quando você mover o mouse para cima, você não tem duas caixas agora, certo? Temos uma caixa que é criada por nós. Nós simplesmente lindos. Bem, talvez consigas torná-lo ainda mais bonito, certo? Se você brincar com ele. Mas há outra caixa, mas abaixo do cursor, hoje é Promocional em seu próprio site. Como você pode ver depois de alguns segundos, temos boas caixas de ferramentas e isso não é bom. Queremos resolvê-lo, mas como fazê-lo? Aprenderemos na próxima palestra. Obrigado. 65. seletor de atributos | atributos personalizados em HTML: Olá, meu amigo. Hoje você aprendeu como criar atributos nomeados personalizados e como selecionar a partir de CSS com base no nome do atributo. Isto é muito bom. Ok, então a primeira coisa é como criar atributos personalizados nomeados e por que nos importaríamos de criá-los? Observe que na última palestra, usamos o título para, para usar o valor daqui, certo? O problema é que o título é realmente reservado para outra coisa para mostrar uma caixa. O largo, certo, o pequeno aqui. E três segundos das promoções de hoje no celular, mas estas pequenas, não a que conhecemos o cliente. Certo? E gostaríamos de removê-lo, mas não queremos perder o conteúdo daqui. E é aí que você pode usar atributos de nome personalizados. Isso significa que você pode criar seu próprio nome de atributo, mas você não criá-lo assim, por exemplo, ok? Mas você criou ideias. Digita a palavra de dados e depois o traço, está bem? E então você pode chamá-lo do que quiser, mesmo do jeito que fizemos aqui, certo? Então podemos fazer algo assim agora. E como você pode ver, ele funciona, mas nós não temos esse comportamento padrão básico agora. Então nós pegamos as informações deste atributo dados a como o F. Claro, não é assim que você deve chamá-lo. O que eu te mostrei que você pode inventar aqui. O nome que você quiser, podemos chamá-lo, por exemplo, ajuda de dados, certo? Então vamos chamar isso de ajuda de dados. E agora, é claro que precisamos tirar isso da ajuda de dados, certo? E funciona bem. Então temos bom agora os atributos de nome personalizado, Não é apenas usando lugares como que também é usado para algum tipo de scripts feitos em JavaScript. Mas essas coisas não acho que você vai aprender neste curso porque este HTML e CSS vai. E o que temos também algo de madeira é chamado de seletores de atributos. E neste caso, isso vai ser incrível. Por que é isso? Então vamos o que precisamos adicionar toda vez essa aula tem para fazer isso funcionar, certo? E eu acho que será melhor se nós apenas adicionarmos os dados, ajudar com os textos. E essas coisas devem funcionar automaticamente, certo? Como pode ver, não funciona. Então, como fazê-lo funcionar? Precisamos escolher pelo nome dos atributos. Certo, isso é bom. Olha, temos que colocar aqui entre colchetes o nome do atributo. E isso vai escolher NLM e que tem bom o nome de atributo como este. E como você pode ver, agora, nós mudamos o cursor do mouse para este com o ponto de interrogação. Nós também vamos fazer a mesma coisa aqui. Então agora, quando alguém mover o mouse sobre, vamos mostrar esse texto, o conteúdo como este. E nós vamos mudar esse conteúdo de acordo com as regras, mas abaixo. E como podem ver, agora funciona bem. E isso é legal realmente porque você sabe, essa coisa chamada ser algum tipo, por exemplo, poder nosso gráfico. Pode haver ar resfriado, mais textos aqui. E, por exemplo, o que é isso? E você vai decifrar esse espaço e os dados do satélite ajudam. Isso é realmente algo que está certo. E agora é cosseno. Podemos ver aqui que isso é algo, realmente outra coisa. Mas aqui nós usamos a linha de quebra, fazer com que pareça melhor assim. Ok? Vai muito bem. E ele mostra apenas sobre isso agora sobre isso, mas sobre isso, o que chamamos para mudá-lo para, por exemplo, ter uma borda inferior, um pixel, sólido, vermelho omega d v derrotável mais, certo? Então sugere que quando você mover milhas oferece coisas como esta, você vai obter algumas informações, dados que sugerem ainda mais, ok? Então você pode ver isso sugerindo que hey, movê-los para cá porque há algum tipo de mais informação aqui, ok? Aqui que há, não há aqui nós temos informações e agora é muito rápido, certo? Porque podemos adicionar informações para que possamos criar conteúdo no site HTML. Mas este Fink cuida de como parece político. Isso é apenas uma boa lição. Muito obrigado. 66. Formatação e decoração de texto: Olá, meus amigos. Hoje vamos falar sobre algumas regras que permitirão que você afete a aparência do texto. Em primeiro lugar, vamos falar sobre decoração de texto. Olha, nós adicionamos aqui a borda na parte inferior de cada texto. Mas nós fizemos isso mesmo? Observe que esta é uma borda e a borda está em torno da caixa do conteúdo. Então o problema é que se adicionarmos aqui, por exemplo, preenchimento de 10 pixels, notaremos que nossa borda está agora muito longe do texto porque esta é uma borda de caixa inteira aqui, certo? Portanto, esta solução não é tão boa. No entanto, há algo chamado de decoração de texto que pode nos ajudar. Ok, vamos criar aqui algum tipo de texto. Vamos chamá-lo de amostra de classe. Vamos escolhê-lo. E digamos que aqui é um texto sobre nada. E agora vamos colocar isso talvez impedido aqui porque eu quero ser revigorado, incentante. E agora vamos talvez fazer algo como preenchimento de 10 pixels. Vamos começar aqui. Cor de fundo, por exemplo, isso. E agora podemos trabalhar com isso. Observe que podemos usar algo chamado linha de decoração de texto. E permite que você adicione uma linha. Como que tipo de linha? Como toda a nossa linha que vai estar acima e textos de pneus. Mas isso está acima do texto, não acima. Não é isso. Acima do conteúdo da caixa, certo? Não está aqui, certo? Está acima do texto porque estas decoração de texto sublinham, não pode estar sob o texto, certo? Quando eu disser que a linha é verdadeira, ela vai estar alinhada com o texto. O legal aqui é que podemos conectá-lo. Então, por exemplo, você quer ter a nossa linha e você quer ter sublinhado. Vai ser sublinhado por terra. Você pode até adicionar a linha por aqui, mas não parece bom, certo? Mas você pode conectá-lo é. Então isso é uma grande diferença porque, bem, quando eu faço borda inferior, um pixel sólido, o preto, por exemplo, você vai notar que esta borda está aqui bem na caixa inteira. E esta coisa vai ajudar-nos em breve a resolver este problema com isto aqui, certo? E, mas antes de morrermos, observe que existem regras morais sobre a decoração do texto. Como, por exemplo, lado de decoração de texto, certo? E podemos usar aqui, por exemplo, a versão pontilhada, certo? Então nós queremos ter pontos ou podemos usar, eu sei que o dobro, então vai ser linhas duplas. Você pode usar o ondulado. Então vai ser onda, certo? Como este. E então cabe a você quais estudos podem ser rendimentos, certo? O pontilhado ou tracejado. Cabe a você. Isto parece semelhante ao que estão disponíveis nas fronteiras, certo? Então vamos ficar com, por exemplo, dados, certo? E também você pode mudar a cor da decoração do texto para y.E também eu me sinto como laranja, por exemplo. Então vai ser laranja está pronto. Cabe a você que tipo de cor você vai usar. E bem, a coisa legal sobre a decoração do texto é que há algum tipo de atalho para este Fink. Observe que você pode colocar após a vírgula, após a coluna, primeira linha, depois o estilo que a coluna. E isso significa que você pode fazer algo como, por exemplo, eu quero sob linha, pontilhada e, por exemplo, a cor que está aqui, certo? A coisa legal sobre isso é que leva menos espaço. Eu acho que é mais fácil de ler e vamos tomar este Bayesiano ou CSS vai ser menor. Se algo é menor está indo muito mais rápido. Então eu recomendo usar esta versão abreviada, certo? E agora podemos usar esse conhecimento e copiar isso aqui, certo? E a coisa legal que substituímos essa borda agora é que quando você adiciona o estofamento aqui, por exemplo, 10 pixels, temos aço o que? O sublinhado sob o texto. Ok? Então esta é a primeira regra. A segunda regra sobre a qual vamos falar hoje é a transformação de texto. Olhe. Podemos transformar para que possamos alterar o texto usando CSS. Isto é muito fixe. Quando escolho uma amostra e uso essa transformação de texto. Nós não poderíamos nebuloso, mas aqui, você pode escolher algo que vamos discutir. Por exemplo, minúsculas, O que ele faz? Você deve ter notado que a primeira letra aqui muda para minúscula, então não é a letra maiúscula, não é a letra grande, certo? Se eu colocar aqui letras grandes agora notar que todas elas são digitadas em minúsculas. Se você usar a letra maiúscula, tudo estará em maiúsculas. Mas a coisa mais legal aqui é algo chamado “capitalizado”. Vai mudar cada primeira letra de cada palavra para maiúsculas. Eu realmente gostei do porquê? Quando algo assim pode ser útil. Observe que eu criei uma entrada aqui. E digamos, bem , são apenas algumas linhas porque queremos ter algum conteúdo aqui. E digamos que eu queira perguntar o nome de alguém. Notei que quando alguém digita o nome, o nome é tipo a partir do minúsculo ou se ele digita o iodixanol, o nome da rua, e ele começa a partir da minúscula. E você não imprimiu o pedido assim. Não parece bom, certo? É que vai ser ótimo. Se todas as maneiras há uma letra maiúscula, a primeira letra de cada palavra será maiúscula. E podemos facilmente alterá-lo apenas escolhendo a entrada e, em seguida, fazer a transformação de texto em maiúsculas. E agora reparem neste que estou a escrever. A primeira letra é grande, certo? Eu não posso sentar quando eu adicionar espaços sempre a primeira letra é grande, certo? Eu não posso mudar de turno para turno até agora tem um sabonete. Eu não estou mentindo, certo? Então agora alguém digitou o nome, está sempre em maiúsculas. Alguém que vive o nome da rua é sempre maiúscula. Bastante incrível, certo? Então esta é uma transformação de texto. A próxima coisa que vamos falar é sobre o alinhamento de texto. Vamos copiar isso algumas vezes aqui. Talvez fiquemos quites. Então eu acho que é. Como você pode ver, nós temos o bem. Agora aqui estão alguns, alguns textos. Vamos remover o texto transformar decoração de texto. E vamos brincar com o texto. Linha. Toma uma linha, permite que você alinhe de modo a mover o texto para, por exemplo, o lado esquerdo. E este é o comportamento padrão, mas você pode movê-lo também para o lado direito, como você pode ver agora, todo o texto está para o lado direito. E aqui temos também o espaço, mas também podemos centralizar algo. E esta é a coisa que temos usado até agora. Mas lembre-se que quando você está centrando, algo está sempre centrado na caixa que estes em torno do texto, certo? Assim, por exemplo, 400 pixels. Vai ser centrado em torno desta caixa. Então lembre-se que é sempre assim porque, bem, por exemplo, por padrão, o PE, display P de B é bloco de exibição. Que estes jogos é chamado de bloco. Significa que ocupa todo o espaço do navegador da web. Então, para a direita e para a esquerda, para a direita. Então centro significa que ele vai centralizar texto em torno desses livros. Estes livros não são Malin, não são visíveis, certo? Podemos remover o fundo e não é visível. E você pode estar se perguntando por que algo se parece com isso. No entanto, há muito, muito, muito legal texto alinhado recurso, que é chamado justify. Eu recomendo usá-lo porque não isso. Vamos copiar a div e longa assim. Observe o que acontece aqui. Temos agora aqui tags que não gostam conectá-lo ao lado direito do navegador da web. Ruim quando usamos o comportamento padrão. Como você pode ver, você tem aqui espaço, bem aqui é algum espaço, aqui é algum espaço. E sempre, quando nos movemos assim, como podem ver, há espaço aqui. E não parece bom ser honesto quando você usa os textos de recurso justify que sempre gostamos de se conectar ao navegador da web e eu acho que isso parece melhor, definitivamente melhor. Ok, então justifique um altamente recomendo usar armas, algum tipo de artigos, característica bastante impressionante. E há também algo chamado, Chama-se espaço em branco. regra de espaço em branco, como o nome sugere, funciona nos espaços em branco. O que isso significa? Significa que funciona em caracteres brancos, como por exemplo, espaços como anteras, que são novas linhas, certo? Ou algum tipo de torneiras, certo? Então, o que é que ele faz? Observe que temos aqui agora texto e temos bom aqui. Por exemplo, se você tem espaços e tudo é própria nova linha. E mesmo que seja, tudo é visível aqui em uma linha, certo? Nós não somos sempre algo que você quer ter. Talvez você tenha, você tem algum tipo de poema de verso que você quer colar em seu código e você não quer, você sabe, linha de pão em todos os lugares. Então você pode fazer algo como espaço em branco e você pode usar a linha pré. Como você pode ver agora, cada linha está aqui quando está aqui, certo? Então, quando eu adicionar aqui algumas entradas, eles vão ser interpretados certo? Então, cada linha é predefinida, certo? É por isso que é a palavra pré aqui. Significa que vai ser levado em consideração, mas apenas nas linhas. Então, quando há algo assim, não vai ser interpretado. E isso é muito legal quando você está colando algum tipo de poema. E você também tem algo que é chamado pré wrap. E essa coisa vai interpretar cada espaço e sempre entrar. O problema sobre esta solução está em textos como estes, você precisa então fazer algo como, por exemplo, isso, certo? Então está em uma linha. Leva tempo para pré-formar algo assim em seu HTML. No entanto, isso ainda é útil quando algo assim é útil quando você tem o lado F sobre, por exemplo, codificação. Observe que aqui está algum tipo de definição de função e os recuo como este, certo? Então, os espaços aqui são muito importantes em línguas como esta. Então, se você usar a linha pré, tudo vai ser apenas em uma linha. Então isso não é bom, certo? Então, se você colar o código, eu acho que é uma boa idéia usar a versão árabe. Ok, também não há Rob, você quer dizer que eu quero ter tudo em uma linha. Então eu mudei isso em uma linha, claro que para o código não é algo. Mas há uma característica como esta. Eu recomendo que você jogue com todos esses recursos. Certo, então faça o mesmo que eu fiz na palestra. É uma boa idéia praticar porque então você terá em algum lugar em sua cabeça que, hey, algo assim existe e quando for necessário, você vai usá-lo. Caso contrário, você simplesmente esquece. Então tente brincar com ele. Essa é apenas a lição. Muito obrigado. 67. Indentação no parágrafo e :::seletor de primeira letra: Olá. Hoje vamos falar sobre texto, recuo e o seletor de primeira letra. Olha, nós temos aqui algumas amostras de texto, ok? Estes são blocos de texto, e cada um destes blocos de texto tem algumas linhas dentro, certo? Mas a primeira linha é afetada por algo que estes chamados recuo de texto. Recuo é apenas uma margem para surdos primeira linha de bloco de texto. Ok? Então nós significa que podemos, por exemplo, selecionar a amostra e podemos fazer o quê? Recuo de texto. E, por exemplo, defina-o para 30, 40 pixels. E como podem ver, agora, apenas a primeira linha do bloco H de texto à direita, tem algum tipo de margem aqui à esquerda. Então torna a sua vida mais fácil ler alguns, algum bloco de texto se for grande, certo? Esta é apenas uma maneira de adicionar parágrafos em seu site. Algumas pessoas gostam, outras não. Então é assim que você consegue. Mas há uma coisa que eu realmente amo. É o seletor, a primeira letra de descartar. E ele funciona muito semelhante ao anterior porque você pode ajustar, selecionar apenas a primeira letra de cada, por exemplo, amostra de classe. Então, quando eu faço algo assim, e agora eu seleciono a primeira letra, eu estou agora dentro como a primeira letra de cada parágrafo, ok. E isso exige que, bem, eu possa fazer coisas como mudá-lo, certo? Então eu posso, por exemplo, dizer o peso da fonte dois volts, certo? E agora a primeira letra de cada parágrafo está em negrito. Eu também posso torná-lo maior. Então eu posso, por exemplo, torná-lo tamanho da fonte 24 pixels, certo? E é maior, certo? Apenas a primeira letra de cada parágrafo. Isto é muito fixe. O que eu gosto porque faz com que cada entrada de parágrafo seja um pouco diferente, certo? Lembre-se que o recuo do texto afeta na primeira linha, certo? Você ainda pode adicionar, por exemplo, em cada amostra de pobreza na vida, por exemplo, 10 pixels, certo? Ainda está disponível, mas só afetará esses caras aqui. Claro, este também é afetado por, mas não é visível aqui, certo? Porque quando eu digitar, por exemplo, 100, será um pouco mais fácil de ver, certo? Então temos 100 pixels para cada linha, mas o recuo de texto afeta apenas a primeira linha de cada parque, certo? Desta forma. Está bem. É só essa lição. Muito obrigado. 68. : Olá, meu amigo. Hoje vamos falar sobre os sindicatos, que Px, que representa pixels, que EM e o sinal de porcentagem e quando usá-lo. Ok, então primeiro vamos nos concentrar em pixels. Nós o usamos até agora, certo? Usamos para, por exemplo, colocar a imagem do seu lado, certo? Quando usamos a imagem, podemos definir essa onda e a altura da imagem usando os pixels. Nós não mergulhamos o Px lá porque esta é apenas uma unidade padrão para quase qualquer coisa em seu computador, certo? Isso é algo que estamos acostumados porque temos algo bom. Discutiremos a resolução no nosso computador, certo? Eu estou usando cru e agora a resolução como esta no meu monitor. Ok. Mas bem, eu acabei de ver que eu apenas usar esta parte da minha manhã para gravá-lo porque esta é uma resolução mais suportada. E isso é o que você vê agora. E eu tenho o que, 19020 pixels da esquerda para escrever. E eu tenho 180 pixels de cima para baixo, direita. E este é o espaço disponível aqui, aquele para o registro duplo. Quando eu abro o navegador da web, nós temos bom, um pouco menos do espaço porque bem, se você tem bom aqui, o endereço que temos aqui, o nome superior da guia e assim por diante, certo? E podemos até diminuí-la quando não estávamos, quando fazemos coisas assim, certo? Então estamos diminuindo a quantidade de espaço que temos aqui. É claro que estou simplificando isso agora, mas para aprender como usá-lo, acho que isso é suficiente. Vai, você pode ter dispositivos de alta densidade de pixels que tem pixels mais densos, mais pixels em uma polegada do que normalmente, certo? Mas não é o tema desta palestra na maioria das vezes, o problema é assim, ok? E bem, você, então temos esse espaço valioso que podemos usar. E, por exemplo, quando temos bom aqui a amostra por padrão porque esses parágrafos ou sua exibição é fácil, facilidade bloco. A largura é definida como 100% do navegador da Web. Ok? Então, muda. Quando eu entrar no inspetor, você verá que o tamanho é assim. E quando eu mudo o tamanho do nosso navegador, esse valor é aqui, certo? Alterações com o tamanho do navegador da Web. Porque está definido para 100% do espaço disponível para a peça. O corpo tem também 100% e HTML é o pai para o corpo, e também tem 100%, certo? Então nós temos um, apenas o tamanho de todo o nosso conteúdo usando o sinal de porcentagem. Podemos mudá-lo para, por exemplo, 50 por cento assim. E agora nós apenas pegamos sempre 50% do conteúdo do nosso navegador web. E isso é legal porque quando você envia, por exemplo, para o que livre 100 pixels, o problema é que, bem, ele sempre parece o mesmo. Às vezes você pode querer alcançar algo assim, mas não é algo que você sempre quer ter, certo? Porque as pessoas podem ter diferentes tamanhos de monitor e algo assim pode parecer pequeno. No entanto, agora, as pessoas também podem usar o zoom, certo? E eles podem aumentar tudo de acordo com o que querem ver. Mas, por padrão, será melhor mostrar algo que parece bom em todos os lugares. Então eu acho que por uma semana é bom usar o sinal de porcentagem. Ok. Mas não é bom usar, eu acho que o sinal de porcentagem para tudo. Olha, aqui está algo chamado “EM”. Qual é o n? Observe que quando temos aqui o tamanho da fonte, 24 pixels. Contamos esse volume sabendo que a tag body tem bom tamanho de fonte padrão definido como 16 pixels. E este é um valor padrão para navegadores da Web. Como pode ver, nada mudou aqui, certo? E bem, quando mudamos esse tamanho de fonte, então algo acontece como, por exemplo, 80 pixels, o que vai acontecer? Observe que nossa primeira letra de bico não é grande RMN, certo? Então esta letra não está mudando seu tamanho de acordo com o que acontece no outro lado com o tamanho da fonte que o conjunto em ambos o escuro. Porque a etiqueta do corpo. Quando você define o tamanho da fonte na tag body, tudo feito ou assim, em seguida, a tag p. E havia uma etiqueta dentro da etiqueta p herdaria o tamanho, certo? Então isso significa que nós gostamos de fazer algo assim e algo assim e algo assim, certo? Nós compilamos aqui. O que aqui? Nós fizemos isso. Por quê? Porque nós substituímos, certo? Porque o quê? Isto é como, a cascata, certo? Dizemos que isto é mais importante. Enviamos o tamanho da fonte para 24 pixels de 80. Claro, se eu removê-lo, vai ser ajustado para 80, certo? Mudamos para 24, mas não queremos que seja tão pequeno agora, certo? Então precisaríamos contá-lo novamente. Então, 80 pixels multiplicados por 1,5 é 120 pixels. O problema é que, preciso sempre de doces como este? Isso seria estúpido. É melhor usar ouvir algo ou isto chamado ENM. Em pode ser ajustado para, por exemplo, um E m. E o que vai acontecer, como você pode ver, é o tamanho do dedo aqui, tudo no lado direito. São 80 pixels agora, porque um em é realmente algo assim. É realmente um multiplicado por 80, ok? Y multiplicado por 80 porque aqui é 80. Então, quando eu faço algo, 1.5 é 1.5 multiplicado por 80, e agora é o quê? 120. Então a coisa legal sobre usar EM é que quando você muda aqui o tamanho 2, e eu acho que isso sempre vai ficar bom, certo? A primeira letra será sempre 1,5 maior. Você pode torná-lo um em phi vezes maior se você quiser. Cabe a você, certo? Então é como 50 pixels agora, certo? Porque é 5 multiplicado por 10, porque 10 está definido aqui. Então é realmente 50. Ok? Então isso é como unidade relativa. Portanto, ele muda de acordo com o tamanho da fonte é definido no pai. Ok? Então eu acho que em casos como este, é realmente boa idéia usar EM porque seu tamanho aumentou, mudar de acordo com o que acontece com o tamanho da fonte aqui. E você pode estar pensando, mas quando algo assim mudaria no futuro, você aprenderá como, por exemplo, mudar de acordo com o tamanho do navegador, do usuário, o tamanho da fonte. E então você pode simplesmente mudá-lo em um lugar, não em todos os lugares possíveis. Você não precisaria mudá-lo em todos os lugares possíveis, o tamanho da fonte, ele só mudará o índice em Baldi, certo? E tudo em outros lugares será alterado automaticamente porque o que este Fink, nós o calcularíamos, certo? Assim, você pode, por exemplo, em dispositivos pequenos como smartphones, você pode alterar o tamanho da fonte para 10 pixels. Mas para as pessoas que têm dispositivo muito grande por padrão, limpar e disse, Eu não sei o tamanho da fonte para 24 pixels, certo? E este link será alterado automaticamente e você não precisará entrar na primeira letra de amostra e seguida, não alterar o tamanho da fonte. Só leva tempo. Então eu acho que é uma boa idéia usar iene. Então usamos o M em casos como este. Usamos pixels quando você quer ter algum valor para ser absoluto, certo? Nós, nós só queremos ser como para as imagens, por exemplo. E usamos o sinal de porcentagem quando queremos ter certeza de que algo como, por exemplo, a amostra levará muito território por cento de 40 ou 50 por cento de todo o navegador da Web. E sempre leva isso, paga assim. Então temos certeza agora. E lembre-se que o sinal de porcentagem subiu, pegue 40 por cento do pai e o pai neste caso é negrito, certo? Corpo. Se mudarmos os pais, digamos que nos divertimos. Eu fiz. E eu disse aqui a identificação para os novos pais. Agora, nada mudou. É só porque você entra em um novo pai e fazemos algo como cor de fundo vermelho, você vai notar que o DFF é realmente um blog. Por padrão, 100 por cento da onda, certo? Bot, ei, olha, agora quando fizermos algo assim, digamos 700 pixels, o que vai acontecer? Como você pode ver, esta coisa dentro, que é este parágrafo, leva apenas 40% desse valor aqui, ok? Digamos que 50%. Então isso significa que essa coisa leva o que, ponto zero 85 multiplicado por setecentos, trezentos e cinquenta pixels aqui, porque leva 50% do par e do tamanho. Ok? Então agora é preciso 50% deste bloco vermelho ao redor. Sempre quando você não sabe o que está acontecendo. Lembre-se do que essa cor de fundo, ajuda muito, ok? Você vai se perder muitas vezes quando você está criando algo em CSS e HTML, use a cor de fundo para se certificar do que está acontecendo com os itens aqui, certo. Ou use o inspetor para ver, ok, então este pai aqui, eu acho que a div é 700 pixels, certo? Isso está na lição. Muito obrigado. 69. Brincando com fontes: Olá, meu amigo. Hoje você vai falar sobre telefones. Em primeiro lugar, vamos pensar por um segundo. O que é uma fonte? Font é algo que descreve como cada letra do alfabeto ou um caractere que você deseja usar deve se parecer, certo? E é descrito em algum tipo de jogadas em seu computador. Você tem a pasta em seu computador, por exemplo, no Windows que acabamos de chamar telefones. E dentro do VDD você tem bons Fives que descreve cada letra. Dentro de um cinco, por exemplo, Times New Roman. E diz como deve parecer quando você usa essa fonte em particular. Oh, quando você usa este ou este aqui, o que seja, certo? Então a fonte muda. Quando você altera a família de fontes. Como mudamos isso? Digamos que, em primeiro lugar, vamos para o style.css e digitamos algo como a família do traço da fonte. E aqui, como podem ver, temos uma boa sugestão. Você pode usar essas sugestões como quiser. Então, por exemplo, este e você vê diferenças. Mas em primeiro lugar, precisamos saber, vamos ver por que eles ainda se incomodam em digitar tantos tipos de fonte de esqui, certo? E qual deles vai ser escolhido? Qual é a diferença? Por que se chama família? Você vê, existem muitos tipos de telefones, mas eles são um pouco parecidos um com o outro. Às vezes eles têm algumas semelhanças e dissimilaridades estão conectados à família de fontes. Então, por exemplo, aqui está uma fonte monoespacial. E a fonte monoespacial está tendo algo como espaço. Estes modelos entre cada personagem, certo? E qualquer um que queira criar uma fonte nesta partícula ou família chamada monoespacial, deve seguir estas regras, ok? Para fazer este espaço entre, eles podem fazer algumas diferenças em, em cada personagem, certo? Como fazer o logline que eles devem seguir essas regras? Então é por isso que se chama font-family porque, bem, existem muitas famílias, bots e eles seguem algum tipo de regra que é semelhante a eles. E, e eles são nomeados de alguma forma, certo? Por exemplo, você tem REI, tem Verde, tem tem casa e outras coisas assim. Então, para escolher uma fonte, basta digitar o nome da fonte por padrão. O primeiro financiado é que estes aqui, por padrão, que é carregado pelo navegador web, é chamado Times New Roman. É o mais popular. Como pode ver, nada mudou. E observe também que eu uso os apóstrofos aqui. Porque quando você usa mais de uma palavra, você precisa de alguma forma conectá-los para dizer que esta é uma única fonte. Não, não libera fontes diferentes, certo? Quando eu digitar algo assim, computador vai pensar que estes são três tipos de letra diferentes. Isso só funciona porque quando nada corresponde às fontes disponíveis no computador, a versão padrão será escolhida. Então, por padrão, vai ser Times New Roman. Mas se você digitar aqui sempre terá assim. Todas essas fontes não existem, certo? Não há telefones como este e Times New Roman vai ser escolhido. Então, quando você digita aqui algo como, por exemplo , Helvetica, você vai notar que eu acho que digitei errado. Tudo bem. Como você pode ver, ele muda, certo? E a coisa legal sobre isso é que você pode digitar aqui muitas fontes ao mesmo tempo. E você faz isso porque às vezes alguém não tem uma dessas dobras. Estas são fontes seguras. O que eu mostrei aqui, digamos fonte, significa que na maioria das vezes quase todo mundo vai ter que escrever. No entanto, existem telefones. Eu não sei quando eu uso, por exemplo, este conjunto de fontes, como estas aqui, como estas aqui, ele não estará disponível em todos os lugares, onde quer que seja. Na maioria das vezes alguém vai tê-lo e você pode usá-lo. Certo? E se este fundo não estiver disponível, este será usado. Se tonto não estará disponível. Este será útil. Se não, então isso, se não, então isso, tudo bem. E este chama-se sans-serif, significa que isto é como família. Isso está conectado a todas essas fontes aqui à esquerda. E quando alguém, quando, quando, quando o computador vê isso, ele precisa carregar o san-serif padrão. Font, ok, então isso é como uma versão de backup e você digita aqui no caso de todos os outros não funcionarem. Ok? Tente jogar com as fontes que estão disponíveis aqui. Está bem, vê como eles ficam? Eu, ou talvez se eles aparecerem. Porque como eu disse, quando comete um erro aqui, como pode ver, agora usamos a marca registrada. Agora usamos a Genebra. Agora use o Verdana. E então usamos o san-serif. Ok, então quando há um erro de ortografia, então você usa o que é semelhante a este, certo? É por isso que usamos alguns deles aqui porque se alguém não tem, vamos fazer parecer um pouco bom. Tudo parecido com o que você quer que ele pareça, certo? É por isso que você escolhe sempre os telefones que são de uma fórmula porque seria estúpido, você sabe, usar o espaço mono, por exemplo aqui, certo? Porque isto parece definitivamente, certo? É por isso que você usa os telefones similares em uma linha de um. - Tudo bem. É por isso que se chama família. Ok, nós temos também algo que vamos chamar tamanho da fonte. Já o usamos muitas vezes. No entanto, há também, você sabe, coisas como, por exemplo, maiores. Então você torna o tamanho da fonte maior do que é agora. Você pode ficar ainda, ainda maior. Eu não gosto, nunca use. Eu recomendo usar 1,5 AM ou algo assim porque você sabe o que você está fazendo e quando você lê-lo, você sabe o que está acontecendo. Ok? Há também algo chamado variante de fonte. Eu realmente amei este. Observe que existem algumas opções aqui, mas para ser honesto, a opção herdada é apenas visto estes mundo herdando está nos pais. Então, o que é incorporado o, o respondido significa que não há nada. O narval é apenas flutua normal. Então nada mudou. E inicialmente é o valor padrão do navegador da web, certo? E esta é apenas a única coisa que podemos escolher aqui. Vamos chamar bonés pequenos, e eu adoro isso. Observe que isso parece ser o motivo de criarmos um livro agora, certo? Porque livros são escritos assim. Temos aqui a primeira letra como esta, e mais tarde, cada personagem é maiúscula. Ok? É por isso que é chamado de copos pequenos, é porque é maiúscula, mas está fazendo uma pequena letra maiúscula. Aviso. Observe que quando eu não o uso, por exemplo, o olho tem um bom ponto aqui, certo? Então a versão maior não tem, certo? Então, para ser honesto, essa coisa faz todas as fontes capitalizadas, mas muda seu tamanho de fonte para a menor. E é por isso que temos um efeito legal como este. Eu realmente adoro fazer alguma página. Quando você faz uma página com algumas histórias, isso é muito legal para realmente gostar disso, certo? E além disso, adicionamos o efeito para a primeira letra, certo? E tornou-o ainda melhor. Podemos removê-lo. E ainda notar que o primeiro personagem que usamos como aqui é um pouco maior. É por isso que se chama Small Cap, pequena letra maiúscula, certo? Então, vamos voltar para aqui. Este efeito realmente se conecta muito bem com isso. Ok? Há também algo que se chama afectuoso molhado e nós já aprendemos sobre DID, mas há mais do que isso. Observe que temos font-weight e podemos configurá-lo não só para parafuso, mas há alguns valores aqui de 100 a novecentos. Cem significa que algo deve ser o mais fino possível. 900 significa que deve ser ousado quanto possível. O problema é que nem toda família de fontes onde a partícula formada suporta todos os números daqui. Especialmente criado aqui na parte inferior, algumas classes onde eu disse peso da fonte de 100 para 900. E aqui eu crio aquela hora que eu não criei, então vamos criá-la muito rápido. Então vamos criar uma div. Podemos fazer coisas assim, que chamam de peso, certo? E então o número que numeramos para que não possamos usar o cifrão. E precisamos de quantos deles? Precisamos de nove deles. E temos um pouco de conteúdo, certo? Então, conteúdo, texto. Então, agora temos isso. E como você pode ver. Nós mudamos apenas o texto aqui no fundo de cento e duzentos e trezentos e quatrocentos e quinhentos, seiscentos. Então isso significa que pesava seis. Ok, nós aplicamos um texto em negrito aqui. Mas o problema é que usamos em nosso DFF, não a família de fontes que está aqui. Vamos usar o padrão, que é o Times New Roman, certo? Quando acessamos o div, este é um padrão. Então, quando entramos em fonte, família fonte, e dissemos isso duas vezes, Times, New Roman, você vai notar que nada mudou. No entanto, se você usar o que está aqui, ok, Vamos copiá-lo. Observe que agora há uma diferença em muitos mais níveis. Bem aqui. Não vemos diferença, mas aqui é um pouco mais ousado. Aqui está ainda mais, e aqui está ainda mais ousado. E aqui é bastante ousado, certo? Então este suporta. Vamos removê-lo por um segundo. Repare que este não, certo? Portanto, há uma grande diferença entre esta e esta fonte, mesmo que não haja grande diferença em como elas aparecem. Primeiro, certo? Porque este suporta muitos níveis ousados. E para ser honesto, às vezes você não quer ter texto para ser negrito como este, certo? Isto é muito difícil. Você quer ter um texto como este, por exemplo, certo? Só um pouco ousado. Ok. Então isso é o peso da fonte. E também temos algo que vamos discutir. Estilo de fonte antigo. O estilo da fonte permite que você defina a fonte para ser escrita como oito iguais. Então está inclinado um pouco, certo? E nós também temos ouvir algo que vamos discutir oblíqua. E para ser honesto, é muito parecido, certo? Quase como se nada tivesse mudado, mas há pouca diferença que talvez você não precise se lembrar, mas vale a pena saber. Quando você vê que alguém usa oblíqua. Comer igual é apenas a versão que foi criada dentro desta fonte. Ok, há um arquivo que tem bom cada personagem, como ele é representado, certo? E é também, ele também tem um cinco onde ele mostra como ele deve ser parecido quando alguém usa o estilo de fonte Itália. Mas você sabe, às vezes não há nenhum phi como este. Note que há um arquivo como este para cada fonte. E então você pode usar o oblíquo para fazer todas as letras parecerem assim, ok? E você não carrega sobre o que parece. Você só diz, “Ei, eu quero ter escrito como a Itália, mas não é, não precisa ser implementado, não precisa ser criado como o criador queria. Faz com que pareça. Certo, essa é a diferença. Ok, então nós temos o estilo de fonte e para ser honesto, como no caso da fronteira, por exemplo. Lembra que tínhamos um mais ousado e poderíamos fazer uma versão curta como esta de fronteira, certo? Poderíamos usar o verniz, essa regra específica para isso, para isso e isso, mas podemos torná-lo inline no caso de fontes, há também a mesma coisa aqui. Podemos copiar isto aqui. E agora sabemos que em primeiro lugar, precisamos enviar o estilo de fonte e não mudá-lo para que possamos enviá-lo para o normal. Então vamos definir as tampas pequenas porque queremos manter estas pequenas tampas. E então podemos enviar o peso da fonte para, por exemplo, 600. E então podemos mudar o tamanho da fonte, que é, por exemplo, um M. Então não mudamos nada. E então eu não copiei em algum lugar aqui. Ok. Então temos o quê? O nome da família da fonte para que possamos copiá-lo daqui, assim. E como você pode ver, nós colocamos todas essas coisas. Podemos remover isso daqui em cima agora em uma linha. No entanto, vamos levá-lo para os comentários para que você possa se referir a isso. Eu não gosto desta versão porque é longa e para ser honesto, é difícil lembrar qual, que é trigo, certo? Bem, podemos mover o rato aqui e depois ver qual deles é qual. Mas ainda assim, De alguma forma eu prefiro no caso de fontes porque, bem, você não enviá-los muitas vezes para ter todos esses valores separados. Bem, se você está movendo seu código do seu computador para o servidor, então cineasta, por exemplo. Eu acho um pouco mais, um pouco mais pequeno, certo? Então, para torná-lo menor, desculpe. Então leva menos espaço, certo? Style.css carregar mais rápido do que talvez seja bom tê-lo em uma linha. Mas há programas que farão seu carro ou seu CSS menor para você. Eu recomendo usar este campo. No entanto, o esporte para saber que algo assim existe porque quando você vê algo assim, você não saberia o que ele faz. É bom saber também que você pode enviar o tamanho da fonte, a altura da linha aqui. Então aqui, quando é um eu sou. E quando você define o tamanho do telefone, certo, você também pode definir o tamanho da altura da linha. Então, qual é o tamanho que o espaço entre cada linha? Então, 1 por exemplo, 17h. Por que isso? Funciona bem aqui. Ou 150 por cento, cabe a você que tipo de valor você vai usá-lo. Isso é tudo uma boa lição. Muito obrigado. 70. Fontes personalizadas - Fontes do Goofle: Olá, meus amigos. Hoje você aprenderá como anexar fontes personalizadas ao seu site. Porque digamos que você não goste dos formulários padrão que instalou no seu computador, certo? Portanto, você precisa, de alguma forma, permitir que o usuário do seu site baixe novos telefones. Como fazer isso? A maneira mais fácil de usar o lado chamado fonts.google.com. Isso é incrível porque as fontes aqui são de uso gratuito. Eles são super fáceis de configurar e também carregam mais rápido porque algo bom é chamado de técnica de pré-conexão, sobre a qual não podemos falar. Ok, então o que fazemos? Primeiro, digite algo aqui porque você quer ver como a fonte ficará. Será que o texto é que você deseja verificar. Então, por exemplo, este é um exemplo de textos, certo? Mas lembre-se de que aqui estão as letras típicas que existem em quase todos os alfabetos, certo? Então, essa é uma boa ideia. Se você é, por exemplo, da Polônia para digitar as letras polonesas, por exemplo , como você pode ver, esta não é compatível. Ou você quer ver como eles se parecem. E, claro, há muitos outros países que têm seus próprios caracteres especiais, então confira antes aplicar a fonte, pois você pode se surpreender que ela não funcione corretamente para cada caractere. A segunda coisa é que você pode verificar o tamanho, o tamanho de cada um formado, sua aparência. Porque talvez você queira usar isso para o cabeçalho à direita. Talvez isso pareça melhor para Heather, mas também parece ruim, por exemplo, quando é pequeno, certo? Então você decide dessa maneira. Você também pode ouvir a mudança para o tema escuro para ver como fica no escuro com o tipo de site. E aqui você pode escolher as categorias das coisas que deseja procurar, por exemplo, você deseja procurar apenas caligrafia. Isso é muito legal, certo? Você quer procurar os textos manuscritos e desenhados à mão. Por exemplo, eu realmente amo esse, digamos, o Pacífico. Sim, isso é o que eu quero usar do meu lado porque escrevo poemas do meu lado e, uau, isso vai ficar incrível. Então, como usá-lo? Bem, você vai clicar nele. E então você pode baixar a família, e então você pode extraí-la e assim por diante, assim por diante. Mas não faça isso dessa maneira. Por causa da fonte, carregamos mais devagar dessa forma. Então, eu nem vou falar sobre como fazer isso dessa maneira. Porque a maneira como isso deve ser feito é usar o sinal de mais aqui. E então, como você pode ver, temos aqui uma forma expandida de importá-lo do seu lado. Então, ele diz que você precisa incorporar uma fonte no chapéu usando esse código. Então, vamos copiá-lo, clicando neste botão aqui. E vamos entrar no Visual Studio Code. E podemos ajustar, colocar onde estava antes do CSS. Por que antes do CSS? Porque, bem, não queremos carregar a fonte padrão, certo? Antes de carregar isso. Então, vamos colocá-lo aqui. E depois disso, o que precisamos para aplicar a fonte, certo? E para aplicá-la, precisamos digitar o nome da fonte como a primeira linha aqui. Não podemos fazer assim e simplesmente colocá-lo aqui, certo? Família de fontes, queremos que seja Pacifica. E vamos ver se funciona em nosso site. Como você pode ver, sim, funciona bem. Usamos o Pacific Go agora. Se você quiser usar outro formulário do Google, precisará acessar o Google Fonts e, por exemplo digamos que queremos algo diferente. Agora. Vamos redefinir tudo. Digamos que eu realmente goste desse. Agora posso adicioná-lo aqui. E como você pode ver, agora podemos usar os dois ao mesmo tempo. Como você pode ver aqui, escrevemos sobre o que é Bruno A's e também o Pacífico. E para usá-lo, vou simplesmente copiá-lo em nosso código do Visual Studio aqui. Certo? Agora, se eu quiser usar o Bruno como C, eu me encontraria para usar aqui o quê? Esta família de fontes. Então, assim. E agora vou usar os Bruno A's. Como você pode ver. Agora, é Bruno, se eu quiser usar a chamada Pasiphae em outro lugar, ou talvez você queira usá-la para outra coisa. Por exemplo, digamos que você queira ter aqui outra coisa, certo? Eu só quero acessar este. Então, eu faria outra coisa. E eu vou mudar isso também. Porque isso será, por exemplo, o cabeçalho, certo? Esse Bruno é. Então, talvez fosse ainda melhor se eu digitar algo como cabeçalho. E aqui vou fazer algo como gato, certo? Então, para cabeçalhos, eu quero usar. Isso depois da escola para pagar impostos, eu quero usar isso. E se você quiser parar de usar um deles, certo, basta remover essa parte, certo? Eu não quero esse. Ou você pode simplesmente acessar este site e ele gerará o código para você. Você quer, por exemplo, parar de usar o núcleo Pasiphae, então eu vou simplesmente removê-lo. E, como você pode ver, essa atualização de código. A instalação é bem legal. E essa parte do código que adicionamos aqui, que é O responsável? Aqui temos algo, minha mensagem, como pré-conexão. O que significa que algo está pré-conectado? Isso significa que ele vai ser carregado. Portanto, antes da conexão, antes de baixar o conteúdo D. Portanto, antes de baixar o telefone, ele acelera o processo de carregamento do seu site. E se alguém acelerar, toda a tinta do seu site vai te beneficiar , porque seu site será visitado com mais frequência, porque é assim que o Google funciona em nossa velocidade, é muito, muito importante. Mas como isso funciona? Se você quiser entender o teclado e se não, continue. Você só precisa adicioná-lo e não o faça, não se preocupe com isso. Mas se você quiser entender , continue ouvindo. Portanto, quando um navegador carrega sua página da web, ele precisa buscar, obter muitos recursos diferentes, como arquivos CSS, arquivos JavaScript, suas imagens em seu site, sua fonte, como esta, e muitas, muitas outras. E tudo isso leva tempo. Pode haver, por exemplo, 100 recursos do seu lado. Além disso, muito gordo. Cada um desses recursos, o navegador precisa estabelecer uma conexão com o servidor em que esses recursos estão localizados. E isso também leva tempo. Eles podem estar localizados em vários servidores diferentes. E é preciso algum tempo para se conectar ao servidor. Portanto, a técnica de pré-conexão envolve o navegador estabelecer uma preliminar, então uma inicial agora é nossa conexão com o servidor antes que ele comece a buscar recursos específicos. Ok, então ele só vai estabelecer uma conexão antes de começar a buscar recursos específicos. Então, por que o navegador está ocupado carregando, por exemplo uma imagem do seu lado, ok? A conexão com a fonte que temos aqui já foi estabelecida com a ajuda da reconexão. Isso significa que quando o navegador começa a buscar o arquivo de fonte específico real, a conexão com o servidor já está estabelecida e pronta para uso. Portanto, você não precisa se conectar e depois se alimentar, você já se conectou a ele. Por isso, reduz o tempo necessário para baixar o arquivo. E como simplesmente não há necessidade de estabelecer uma conexão repentina com o servidor, o navegador só precisa realizar o download dos dados em si, ok. Então, sem precisar se conectar ao servidor novamente, repito porque essa ação já foi executada pelo procinético. Em suma, isso apenas reduz a carga no tanque de uma página da web. E é por isso que essa é a maneira de usar o tamanho de fonte personalizado. Obviamente, você pode baixar quando outras pessoas que você compra compram algumas delas. Não faça. Veja quantas famílias de telefones estão aqui. Por que se preocupar em procurar em outro lugar? Você tem que manter o conteúdo gratuito, muitos deles. Você definitivamente encontrará algo adequado ao seu site se não gostar da fonte padrão. Dessa forma, ele carregará rapidamente e fará com que seu site seja visitado com mais frequência. Só há menos do que muito obrigado.