HTML e CSS para iniciantes

1. Introdução: Olá e bem-vindos a uma nova turma. Isso é HTML e CSS. E basicamente HTML significa linguagem de marcação de hipertexto. E esta é uma linguagem muito fácil para descrever a estrutura de uma página web. E se eu quiser aprender programação ou codificação, vou começar com HTML, já que é a linguagem mais simples e direta. Agora eu tive Eunice, e eu serei seu instrutor para este curso. Então vamos começar com o esboço. Então, o que vamos cobrir? Então, os tópicos para esta classe são alguns conceitos básicos sobre a célula e algumas tags predefinidas e assim por diante. Também temos atributos. E então vamos falar sobre estilo e formatação. Em seguida, vamos passar para imagens de comprimento menos e tabelas. E, finalmente, vamos aprender como deixar nosso arquivo CSS para o nosso HTML. E então, finalmente, vamos acabar nossa classe falando sobre tipos de entrada. Então é isso. E espero que tenham gostado desta aula. Vejo você no próximo vídeo. 2. Cabeçalhos: E agora este é o nosso código do Visual Studio. Vamos em frente e clique no arquivo. Podemos ver aqui temos as extensões e começou a adicionar algumas extensões. Por exemplo, podemos HTML. Eu já instalei alguns deles, no entanto, este é o suporte HTML CSS pode ser útil. Nós também temos este. E, finalmente, eu vou baixar e, e navegador apenas para visualizar nosso código HTML e nosso navegador e instalar. Agora vamos fechar esta extensão e começar com o nosso código aqui. Então, por exemplo, deixe-me apenas criar um novo arquivo. E este nome de lista de arquivos no início, o HTML. E estamos bem agora, eu abro isso, veja primeiro HTML aqui. E como posso escrever meu primeiro código HTML? Eu posso simplesmente escrever STM n e ir para HTML cinco restaurante, e este é o nosso primeiro código HTML. Agora vamos supor que eu queira visualizar este código. Posso simplesmente clicar com o botão direito do mouse aqui e acrescentar no navegador padrão. E então esta é a nossa primeira página. É uma página vazia, já que não adicionamos nada até agora. Deixe-me ir em frente e apenas explicar um pouco sobre a estrutura deste código HTML. Então a primeira coisa que vamos notar é este DOCTYPE, HTML, e isso indica o tipo de documento. E porque estamos escrevendo em HTML, vamos defini-la como HTML. Agora a segunda coisa é HTML. Abrimos a etiqueta de abertura. Então este é o nosso código HTML dentro da tag de abertura e término. E depois temos a nossa língua. Podemos simplesmente adicionar este idioma e, neste caso, estamos usando o inglês. Então, EN indica inglês. Agora, sempre que acrescentamos em nossa tag, podemos simplesmente escrever HTML. E esta é a nossa etiqueta de abertura. Agora, se você quiser escrever a nossa tag final é a mesma que a nossa abertura, mas vamos adicionar esta barra. E como podemos ver, a estrutura do nosso código HTML é bastante simples e simples. Então, dentro do nosso HTML, temos duas tarefas principais. Então o primeiro é a cabeça. E dentro da nossa cabeça temos o nosso título, então temos o nosso corpo. E aqui vamos escrever o nosso código. E, por exemplo, eu posso escrever um lope. E se eu apenas abrir isso no navegador padrão, eu posso ver para baixo impresso aqui. Agora, deixe-me voltar aqui. E então este é basicamente o nosso corpo. E aqui vamos escrever tudo o que queremos. E vamos supor que eu escreva este olá e um texto usual ou um tamanho pequeno. Por exemplo, quando escrevo, por exemplo, como um título, posso simplesmente usar o título. E isso será em um. E se eu pressionar Enter, eu fico em um. E neste caso, se eu escrever “olá “, execute isto. Vou receber este grande olá. Agora, na verdade, temos tantos títulos. Por exemplo, X2 será menor. E, claro, h3 será menor também. E deixe-me verificar aqui. Então, acima e em navegador diferente e nós temos este, este é H2, e este é a borda três. E, na verdade, só temos seis títulos. Então, se eu escrever x, eu acerto. Olá e teimoso e pressione Enter, nada vai acontecer. Não temos um mundo restrito sete. Então, se eu apenas, e assim nós estamos indo para obter este pequeno Olá. E isso é, basicamente segue os títulos como podemos ver como vamos mais alto e números, o tamanho do nosso título ou nosso título seria menor e menor. E isso é basicamente, então este é o nosso primeiro código HTML, é muito simples. No entanto, ficará muito mais complicado. E os nossos próximos vídeos. Então fique focado e veja você. 3. Noções básicas de HTML: Agora, depois de escrever nossas rubricas, podemos começar com uma fenda. Então vamos supor que eu quero escrever aqui, eu posso simplesmente escrever b. Então este é um parágrafo e eu vou escrever, meu nome é Eunice. E se eu abrir isto, vamos buscar o “Olá”. Meu nome é “unidades”. Agora deixe-me apenas escrever outro parágrafo e eu posso simplesmente escrever aqui, este é outro parágrafo sobre ele. Como podemos ver, vamos obter dois parágrafos diferentes. No entanto, se eu simplesmente escrever aqui e acrescentar, nós vamos obtê-los, todos eles na mesma linha. Então, se eu quiser começar um novo parágrafo, vou simplesmente fechar o primeiro e subir. E como você pode ver aqui, então isso é porque no tempo do primeiro, e esta é a etiqueta de abertura do segundo. Agora, deixe-me deletar isso e terminar isso. E agora vamos passar para outra coisa. E esta é a ligação. Então, como podemos adicionar um link para o nosso código HTML? Então a primeira coisa que vamos escrever é um e, em seguida, pressione enter. Nós vamos conseguir isso. E se você não conseguir, você pode simplesmente escrevê-lo. Então, uma referência h, e esta é a abreviatura de referência e igual a. E como você pode ver, nós temos isso aqui e devemos escrever nosso link nessas condições. Então deixe-me apenas ir ao Google e pegar este link, por exemplo, e bases aqui. E se eu simplesmente, eu posso simplesmente escrever aqui, este é um link do Google. E abra. Vamos buscar o “Olá”. Meu nome é unidades de cabeça e esta é uma perna do Google. Então, se eu pressionar neste link e ele abrirá automaticamente este link ou Google Fotos, como você pode ver aqui. E é assim que podemos criar, como você pode ver, basta voltar, e é assim que podemos criar nosso link em HTML. Agora vamos passar para outro conceito básico e que é adicionar uma imagem. Então, como você pode ver, se eu quiser criar uma imagem, eu posso subdividir IMG e virar. E esta é a nossa etiqueta de abertura dentro da tag objeto. Como antes, precisamos adicionar nossa fonte dois, esta é a fonte de nossa imagem. E vamos supor que eu quero voltar aqui e Google Fotos. Então, isto é uma imagem. Eu posso simplesmente copiar este link. E Long, mas vamos resolver isso. Então esta é a nossa ligação. Se agora eu abrir isto, podemos ver que vamos conseguir esta imagem. E aprendemos a ajustar o tamanho dele ou o comprimento e a largura desta imagem mais tarde. Mas por enquanto, é assim que podemos adicionar esta imagem e nosso código HTML. Agora, vamos voltar aqui. Então vamos supor que eu queira criar um botão. E neste caso, eu posso simplesmente escrever botão e, e assim este é o nosso botão e eu posso simplesmente escrever, por exemplo, clique em mim neste. E podemos ver aqui que temos um botão que diz “Click Me”. Agora, ele não faz nada para Agora já que não adicionamos nada, se eu apertar este botão, nada vai acontecer. Simplesmente verá que ele muda um pouco , mas volta ao normal e nada aparecerá na tela. E como não adicionamos nenhum código a este botão, vamos voltar ao nosso código HTML e vamos começar a falar sobre menos. Então, um HTML temos dois tipos de lista. Temos a lista desordenada e uma lista ordenada. Então vamos começar criando uma lista não ordenada. Por isso, deixem-me apagar isto e começar com o número dois. E esta é uma lista desordenada. E como podemos criar uma lista não ordenada? Podemos simplesmente usar as iniciais que você e, e esta é a nossa lista. Agora, como podemos criar itens e decidir cortar sentido? Sempre que criamos, sempre que nós, sempre que escrevemos u l, este é o nosso vazio menos do que agora nós não adicionamos nenhum item. Então, sempre que queremos adicionar um item, podemos simplesmente escrever item da lista. E abre um pouco. E dentro destas duas vezes podemos criar o nosso item. Então vamos supor que eu fui ao telefone certo. E o segundo será laptop. E este terceiro será um relógio. E agora, se eu abrir isto, podemos ver que esta é uma lista desordenada. E temos três itens, telefone, laptop e relógio. Agora deixe-me voltar aqui e vamos criar outra lista. Isto é, esta será uma lista ordenada. E neste caso, deixe-me apenas escrever aqui etch, fazer também. E dentro desta borda para L, vou escrever isto como uma lista ordenada. E como podemos criá-lo? Então, oh, E como de costume, e nós podemos simplesmente adicionar nossos elementos aqui. Então, o primeiro elemento lista item como de costume, e deixe-me escrever os mesmos itens como antes. Então temos encontrado, temos laptop e temos Watch. Agora, deixe-me abrir isso mais uma vez. E esta é uma lista ordenada. Nós temos três, na verdade três itens e eles são numerados de um a três. Agora, outra coisa aqui, se, por exemplo, eu tivesse aliado e me deixasse apenas uma garrafa. E neste caso, não precisamos abrir isso toda vez. Nós podemos simplesmente voltar aqui e apenas atualizar e você pode vê-lo aqui. Mas acho que é mais fácil. Eu só abri. Mas sempre que abrires tudo isto, isto vai ser tão confuso aqui. Então, apenas atualizado atualizando a página de cima. Então isso é basicamente para a lista não ordenada e ordenada e HTML. É assim que podemos criá-los e criar itens dentro de cada um deles. Então este é o fim deste vídeo, e o próximo vídeo vamos discutir atributos HTML e vê-lo em seguida. 4. Atributos: Agora vamos passar para atributos, e temos visto alguns atributos em HTML. Então, por exemplo, quando escrevemos A e pressionamos enter, temos este HREF. Esta é uma referência hiperlink. E sempre que escrevemos, por exemplo, vamos tentar HTTP e google.com. E se eu abrir isto como antes, é só escrever algo dentro disto. Diga, por exemplo, clique aqui. E deixe-me voltar ao Google e fazer isso. Vamos trazer o Glick aqui. E se eu clicar aqui, ele me levará automaticamente ao Google. Posso procurar o que quiser aqui. Agora deixa-me apagar isto e esta é a nossa página. E deixe-me voltar. Então este é um atributo. Agora, outro atributo pode ser o atributo título. Então, por exemplo, se estamos escrevendo um título, então deixe-me apenas excluir isso. E agora temos espaço. Então vamos supor que eu quero escrever Olá mundo e Olá mundo dentro de um. Posso acrescentar aqui a etiqueta de abertura. Um título igual a. Este é um cabeçalho, por exemplo. E reparem que se eu abrir isto, nada vai acontecer. Simplesmente recebo olá mundo. No entanto, podemos usar este título mais tarde sempre que quisermos chamar, por exemplo, este cabeçalho ou usá-lo em outro lugar. Então este é outro atributo. Agora, por exemplo, também temos os atributos de largura e altura. Assim, sempre que estamos adicionando uma imagem ao nosso código HTML, podemos simplesmente ajustar esta imagem. Por exemplo, deixe-me voltar aqui e notar aqui que temos esta imagem. Olá, vamos copiar este link e deixe-me voltar aqui. Imagem. Então a fonte será esta. E claro que eu posso adicionar uma alternativa, eu vou fazer isso mais tarde. Mas, por enquanto, deixe-me apenas adicionar a largura e altura para que eu possa simplesmente digitar. Deixe-me fazer isto primeiro para ver como esta foto fica. Então parece assim. É muito grande. Então, se eu quiser apenas ajustar isso, eu posso simplesmente escrever isso. Eu quero que a altura deste seja igual a 600 e a largura seja igual a 400 neste caso. E deixa-me voltar, refrescar-me. Então esta é a nossa imagem agora. E você pode notar que ele fica menor. Então, podemos ajustar a largura e altura como, como queremos. Então, por exemplo, deixe-me apenas torná-lo quadrado por trezentos e trezentos. Volte para trás. Corra de novo. E esta é a nossa imagem agora. Então esta é a alternativa para, sinto muito, para os atributos altura e largura. No entanto, uma coisa com que vamos lidar é, por exemplo, supor que eu tenha este e nós temos um título. Por exemplo, se eu só quiser escrever uma palavra, eu posso simplesmente adicionar aqui, olá. E isso tem um título, funcionará corretamente. Nada vai acontecer. Se eu fizer isso, nada vai acontecer. Então só temos o “Olá Mundo”. No entanto, se eu tiver duas letras ou duas palavras para o título, por exemplo, hello world, não posso adicionar isso a um único título sem citações. Então, como podem ver aqui, isto é uma laranja e este é o azul celeste. Portanto, certamente não é um título. Então, para lidar com isso, posso simplesmente adicionar mutações como fizemos antes. No entanto, se eu tiver apenas uma palavra, eu posso simplesmente adicionar sem adicionar condições. E a última coisa que vou discutir neste vídeo é o ousado. E neste caso, vamos supor que eu tenha um parágrafo. Eu sou o Urano e queria ser um barco. Eu posso simplesmente adicionar o estar aqui. Desculpe. Deixe-me adicioná-lo como de costume. E eu vou pegar isso. No entanto, eu terminei bem aqui. Então, e estando nisso, como podemos ver aqui, Chaim tinha unidades. Isto está em ambos. Agora vamos supor que eu só quero que meu nome fique em negrito. Eu não quero mensagens instantâneas altas e você quer que elas sejam normais. Posso voltar atrás e abrir isso, estar em blocos de anúncios e fechá-lo depois disso e mais uma vez. Bebeu. Como podemos ver, temos unidades de cabeça e parafuso. Portanto, isso é útil, por exemplo, se tivermos algumas palavras específicas que precisamos destacar, podemos simplesmente adicionar o parafuso ou ser tags de abertura e fechamento. E isso fará o trabalho como podemos ver aqui. E isso é para os atributos. E com isso dito, este é o fim deste vídeo. Vejo-te no próximo. 5. Parágrafo: Agora vamos nos concentrar um pouco no parágrafo. Mas antes de tudo, vamos supor que temos alguns títulos e seguidos por algum parágrafo e o corpo. Então, por exemplo, vamos supor que eu tenha o título um. E dentro deste título temos este título um. Depois disso, vamos tentar. As palavras estão na seção de parágrafo e eu posso simplesmente escrever, este é o primeiro parágrafo. Então, depois disso, eu posso escrever isso como adicionando dois. Em seguida, outro parágrafo, este como o segundo parágrafo. E, por último, acrescentando três. Eu sinto muito. Deixe-me ajustar isto. Então, rumo três. Este é o três. E finalmente, este é o terceiro. Até agora que trouxemos isto. Vamos apenas abri-lo. E como podemos ver aqui, temos isso como Título Um. Este é o primeiro parágrafo, rumo ao segundo parágrafo e terceiro parágrafo da rubrica 3. Agora deixe-me voltar aqui. E como você pode ver, não estão separados. O eles são apenas seguidos uns aos outros, eles estão seguindo uns aos outros. No entanto, se eu quiser apenas separá-los por uma linha, eu posso simplesmente usar o EHR, e esta é uma linha horizontal. Então, se eu usar o HR entre o parágrafo um, parágrafo dois, o parágrafo três, execute isso. Vou refrescá-lo. Vejo que estão agora separados por esta linha horizontal. E vamos voltar ao nosso código e trabalhar com algo um pouco diferente. E esta é a estrutura de um parágrafo. Agora, vamos supor que eu tenha um parágrafo e dentro deste parágrafo, eu tenho esta é a primeira linha do parágrafo. E depois outro parágrafo. E dentro disso temos isso como a segunda linha do parágrafo. Vamos apenas refrescar. E temos duas linhas. Então este é o primeiro, segundo e tudo funciona normalmente. No entanto, vamos supor que eu tenha dentro disso. Deixe-me só agora, deixe-me apenas pegar isso e colado aqui como podemos ver. Então temos duas linhas em nosso código HTML. Esta é a primeira linha e esta é a segunda linha. No entanto, se eu voltar para o nosso navegador e executar isso, podemos ver que eles estão na mesma linha. Então esta é a primeira linha do parágrafo. Esta é a segunda linha. No entanto, eles estão na mesma linha. Portanto, note aqui que sempre que temos um parágrafo, tudo o que escrevemos, mesmo que apenas adicionemos algumas linhas, elas estarão na mesma linha em nosso navegador. Então podemos ver que eles estão aqui exatamente na mesma linha. E, na verdade, o número de linhas em um parágrafo depende do tamanho da janela do navegador. Então, por exemplo, se redimensionarmos nossa janela do navegador aqui, deixe-me apenas para a esquerda um pouco. E podemos ver que agora temos duas linhas. E este é o máximo que vamos conseguir. Então temos duas linhas. Se redimensionarmos nossa janela. Agora, se quisermos que eles estejam em linhas separadas, podemos trabalhar com parágrafos diferentes, como escrevemos antes. Então, por exemplo, temos este parágrafo e o outro parágrafo. E vamos apenas refrescar. Vamos conseguir dois parágrafos diferentes. No entanto, temos outro método que vamos usar aqui, e este é o BR. E deixe-me apenas escrever, por exemplo, se eu quiser que isso esteja em uma linha separada, eu posso simplesmente escrever BER e depois fechá-lo aqui. E como podemos ver, deixe-me correr. E nós vamos chegar como a segunda linha do parágrafo. E isso está em uma linha separada. Então aqui nós perdemos isso. E deixe-me deletar isso só para tornar mais simples. E o este parágrafo daqui atualiza. E você pode ver agora que temos esta é a primeira linha e esta é a segunda linha em clientes diferentes ou separados. Agora, a última coisa que vamos fazer é trabalhar com os Bri. E esta pretensão preserva espaços e linhas. Então aqui, por exemplo, se eu adicionar alguns espaços aqui e voltar, atualizar, nada vai acontecer. Assim, os espaços não são preservados sempre que usamos DBR. No entanto, se eu usar o pré, por exemplo, vamos supor que eu tenho Bree aqui. E dentro do Supremo. Deixe-me escrever uma coisa. Por exemplo, eu tenho esta linha aqui, então esta é a primeira linha, e então esta é a segunda linha. No entanto, está na terceira linha, na verdade. Então temos uma linha vazia aqui. E deixe-me adicionar alguns espaços. E então deixe-me escrever aqui. Esta é a última linha. Agora, deixe-me voltar ao nosso navegador. Refresque. E como podemos ver, então temos alguns espaços aqui, aqui e aqui. E como podemos ver, temos uma linha vazia. Então, sempre que adicionarmos uma linha vazia aqui, ela estará em nosso navegador. Então este pré simplesmente preserva todos os nossos espaços e linhas sempre que escrevemos algo nele. Então é isso para o parágrafo. Estas são algumas informações gerais e podemos sempre aprofundar. No entanto, esta é apenas a introdução de como podemos usar parágrafo e como ajustar nosso parágrafo da maneira que queremos. Dito isso, este é o fim deste vídeo. Vejo-te no próximo. 6. Estilos: Agora vamos falar um pouco sobre estilo. E para cada componente, para cada tag, podemos escrever seu próprio estilo. Agora vamos cavar mais fundo e começar, sempre que escrever nosso CSS. Por enquanto, podemos simplesmente escrever alguns estilos simples. Então, suponha, deixe-me deletar tudo isso. E vamos supor que eu tenha um título e um parágrafo. Então vamos supor que eu tenho H um e este aqui, este é um título. E então será seguido por três parágrafos. Então o primeiro parágrafo é azul, o segundo é vermelho, e o último é preto, por exemplo. Tão negro. Agora, se eu abrir este e como de costume, então este é um título e azul, vermelho, preto, No entanto, eles são todos na cor normal e a cor padrão que é preto. E vamos supor que eu quero que esta letra desta palavra seja em azul e esta palavra, que é lida para B, na verdade em vermelho e exibida será normal. Então deixe-me voltar aqui. Então a primeira coisa que vamos fazer é especificar que precisamos de uma caneta. Então, dentro do parágrafo, dentro da tag de abertura do parágrafo, eu posso escrever estilo. E será igual abrir as citações. E eu quero a cor. Então é assim tão simples. Então a cor será azul. E como você pode ver aqui, esta é uma caixa ou quadrado indicando que a cor é azul. Se quisermos mudar alguma coisa, posso simplesmente pressionar aqui e podemos mudar. Então vamos supor que eu quero, eu queria ser um pouco mais escuro, então eu posso voltar aqui ou um pouco mais leve aqui e assim por diante. Finalmente, para mudar a cor, eu também posso mudá-la a partir daqui. Então aqui temos nossas cores. E como você pode ver, para cada camada temos um código específico. E por enquanto vamos ficar com o azul. Então eu posso simplesmente escrever cor será igual a azul e eu sinto muito, ele não é igual é a coluna. E para o vermelho vai fazer a mesma coisa. Então vermelho será igual à cor vermelha. E estamos bem. Agora, se eu voltar e atualizar isso por refrescante, vai ficar azul e vermelho, n cores diferentes. E preto, que está na cor normal e preto. Agora, vamos supor que eu queira mudar o tamanho disso. Eu posso simplesmente escrever, deixe-me escrever apenas Beck. E este azulejo que vamos escolher é igual para abrir as mutações. E temos aqui o tamanho da fonte, como você pode ver aqui, digite. Então o tamanho definido será a. Suponha que eu queria que ele fosse 50 pixels. Refresque. Vamos ficar grandes e 50 pixels em vez do normal. E como você pode ver aqui, se eu quiser o preto também, eu posso simplesmente também, certo? Então precisamos do estilo igual ao tamanho da fonte, igual a 50 pixels. E refresque-se. Vamos ficar preto e grande e 50 pixels cada. Agora vamos supor que eu não quero falir cânone deste navegador para ser um branco. Vamos supor que eu queria que fosse azul celeste ou azul pólvora. Eu posso simplesmente escrever dentro do corpo. Posso adicionar estilo. E dentro deste tipo, podemos adicionar a cor de fundo. Como você pode ver, temos o fundo e a cor. Sinto muito, precisamos adicioná-lo aqui para que haja igual a, como você pode ver, temos pó azul, temos pilotado foi, e precisamos do azul pólvora. E deixa-me voltar, refrescar-me. Assim, podemos ver que a corrente de fundo agora é azul pó em vez de branco, que é o padrão. Também podemos alterar a família da fonte, ou por exemplo, não queremos que ela seja normal. E suponha que eu queira esse azul, eu quero mudar essa família de fontes para sobrecarregar, por exemplo. Então, dentro do estilo, deixe-me apenas, deixe-me tentar com o preto, por exemplo. Então, dentro do plugue eu posso adicionar estilo. E dentro do estilo, eu quero mudar a família de fontes. E temos uma lista de todas as famílias que podemos escolher. Então temos área para Daniel, suponha que precisamos disso. E se eu voltar aqui, correr, podemos ver que esta fonte é diferente desta. E vamos escolher outro. Por exemplo, para o título e estilo. E assim desta vez nós temos font-family. E vamos tentar isto. E a Coreia, por exemplo. Então nós temos e novo e voltar, atualizar. E este é um título e está escrito na Coréia. Fonte. Agora pode até mesmo alterar o tamanho da fonte. Em vez de escrever 50 pixels, posso alterá-lo com porcentagem. Então, por exemplo, eu posso adicionar a um 100%, voltar atrás. Podemos ver que isso é um pouco menor do que antes. No entanto, se eu apenas acrescentar, por exemplo, aqui, 100% voltar ao terreno, podemos ver que isso vai ficar muito mais rápido. Então, temos dois métodos também. Nosso tamanho da fonte, seja especificando os pixels ou especificando a porcentagem de aumento do tamanho da fonte. Agora, note que sempre que escrevemos algo, agora realmente código ML aqui. Ele será automaticamente do lado esquerdo. Então, como podemos ver aqui. Então esta é a adição. Suponha que queremos mudar a posição deste é este título para decentrar, por exemplo. Uma maneira de fazer isso é ajustando isso a partir de um. Então deixe-me deletar isso. E precisamos, em vez de escrevê-lo à esquerda, posso adicionar no estilo, o texto alinhado. Então o texto alinhado BY precisava estar no centro. Volte, atualize. Você vai entender isso como um título e está no centro da linha. Agora podemos fazer exatamente a mesma coisa para cada cabeçalho são cada parágrafo. No entanto, se quisermos que todo o nosso código seja centralizado, podemos simplesmente adicionar estilo ND. Aqui. Podemos adicionar texto alinhar, sinto muito, no estudo, no estilo do corpo e centro. Volte e vamos ter todos os nossos componentes ou parágrafos e cabeçalhos do Oliver centrados no centro de cada linha dentro do nosso navegador. Então é isso para os estilos. É uma ideia pequena ou específica. E vamos discutir isso ainda mais nos próximos vídeos quando vamos falar sobre CSS e como escrever nosso código CSS. Mas, por enquanto, consideramos isso como uma apresentação. E com isso dito, este é o fim deste vídeo. Vejo você na próxima. 7. Formatação de texto: Agora vamos passar para a formatação de texto. E já falamos sobre o B ou ambos. E isso só fará discreto, basta fazer nosso parágrafo ou direção e parafuso. Então vamos supor que eu tenho no meu corpo. Apenas, deixe-me apenas excluir estes e o estilo e queria ser por padrão. E vamos supor que eu tenha o parágrafo. Isto é um Bolt, Bolt. E neste caso, se eu quisesse que fosse negrito, posso simplesmente adicionar a tag b aqui. Deixe-me copiar isto e adicionar ao final da nossa etiqueta e abrir isto. Podemos ver que temos este parafuso e parafuso. Agora vamos voltar. E também temos outra etiqueta de abertura e isso é forte. E ambos são na verdade iguais. Tão forte. E por dentro amarrou isso tão forte, como forte faz ou apenas atualizá-lo a partir daqui. Vamos pegar essa prancha e isso é forte. E como você pode ver, eles são os mesmos. E podemos usar qualquer um deles e eles fazem o seu trabalho. Agora, vamos supor que eu queira escrever um parágrafo e Alec, eu posso simplesmente começar com a abertura da etiqueta I. Então temos o parágrafo I. Isto significa metálico e isto é itálico. Agora vamos voltar, atualizar e nós vamos conseguir, este é um itálico e como você pode ver, ele está mudando. Agora também temos outra coisa que é semelhante a um dialeto, e é o EM e significa enfatizar. E este texto, como m tamanho. Volte, atualize. E nós estamos indo para obter este imposto é enfatizar. Então esta é uma estrutura muito semelhante à do delegado. E como podemos ver, temos ambos e fortes. Ambos são semelhantes. Eles são metálicos e enfatizados, e também são semelhantes. Agora também temos pequeno. Então isso indica que queremos que um parágrafo seja pequeno. E vamos supor que eu queira escrevê-lo usando pequeno. Então eu simplesmente escrevo pequeno e abro a etiqueta. Dentro desta tag, podemos escrever isso como um texto modelo. Volte, atualize, e nós vamos receber esse pequeno texto. No entanto, se eu compará-lo a um tags normais, este é um texto normal. Volte, atualize. Vamos notar que há uma diferença entre estes dois textos. Então este é o normal e este é o menor. E, claro, se eu quiser destacar algo, vamos supor que eu queira destacar esse normal. Posso simplesmente usar a marca. Então eu quero destacar Normal dentro do nosso parágrafo. Posso adicionar Mark. E então dentro desta marca eu posso adicionar normal que Refresh, nós vamos ficar normal realçado por amarelo. Portanto, a cor amarela é por padrão. E nós também temos o D e aquilo, e neste caso, vamos supor que eu tenha a minha cor favorita. Então, no parágrafo cientistas eu tenho o meu favorito. O outro é azul. E vamos supor que mudei de ideia e quero apagar isto e tentar vermelho. E se eu voltar e executar isso, podemos ver que temos minha cor favorita é azul, vermelho. E suponha que eu queira excluir isso, então eu apenas adicionar uma linha de estado aqui, linha horizontal no azul. Eu posso simplesmente usar a palavra-chave del. E neste caso, então. E dentro deste delta, podemos adicionar o azul. Volte, refresque-se, e vamos ficar azuis. E como podemos ver, isso, como se fosse excluído e mudamos para vermelho. Agora vamos passar para outra coisa. E é quando queremos sublinhar algo. Então, podemos usar os ins e isso representa texto inserido ou adicionado. Então, por exemplo, se eu quiser sublinhar o favorito aqui, vamos supor que eu queira sublinhar a cor. Vamos voltar para o nosso código e minar subjacente descolorido usando os ins, ins. E dentro disso, podemos adicionar nossa cor, voltar, atualizar. E como você pode ver, temos cor sublinhada usando o Ion como tag. E também temos o tipo subscrito e sub é a abreviação da pilha. Então, sempre que quisermos usá-lo, vamos supor que eu queira mudar, ou deixe-me apenas criar outro parágrafo. E dentro deste parágrafo temos este é um texto subscrito. Eu posso adicionar aqui sub e dentro deste sub script. E depois seguido de texto. Sem costas. E é claro que você cai. Nós vamos obter isso como tags assinadas e esta palavra é realmente assinada. Também temos o super roteiro. E neste caso, vamos supor que temos algo que queremos que seja. Por exemplo, dez para o poder de três. Então parágrafo não-científico em vez de escrever dez para o poder de três desta forma, volte, vamos voltar e executar isto. Vamos conseguir dez para a potência de três horas. Posso usar o submarino e a Intel três aqui. Deixe-me ajustar isto. Volte para trás. E nós vamos conseguir dez para o poder desta maneira. E também podemos usar o subscrito, Por exemplo, se estamos trabalhando com o mesmo, por exemplo, massa para diferentes objetos. E vamos supor que nós os chamamos de m1, m2, m3. Então, em vez de escrevê-las desta forma, dentro deste parágrafo, temos, hum, um. Em vez de escrever isto, desta forma e obter M-um como denso, podemos usar o submarino e adicionar um aqui. E fora do sul temos nossa massa M. E vamos fazer isso. E como podemos ver, vamos ter display m1 e parece melhor. E podemos entendê-lo melhor ao dirigir algo que precisa ser ajustado. Então esta é uma idéia geral sobre formatação de texto. Temos muitos formatos e podemos usá-los sempre que quisermos. No entanto, estes são os mais importantes. E com isso dito, este é o fim deste vídeo. Vejo-te no próximo. 8. Citações e citações: Vamos agora discutir algumas condições e citações. Então, primeiro de tudo, se quisermos apenas escrever algum texto dentro de algumas citações, deixe-me deletar isso. Primeiro de tudo. E vamos supor que temos o nosso parágrafo e dentro deste ensaio de parágrafo que Brian definiu. E queremos dizer o que Brian disse dentro de citações. Então podemos simplesmente escrever, vamos supor que queremos escrever, este é o número um. E para criar uma citação, podemos simplesmente usar a palavra-chave fila. E dentro deste cubo, podemos adicionar o que quisermos. Então vamos supor que queremos que este seja o número um. E volte para trás. Corra. Brand disse que este é o número um. E como podemos ver, estas são citações adicionadas. Agora, vamos supor que queremos codificar algo e podemos usar código de bloco dentro. Neste caso, por exemplo, posso usar um código de bloco. E dentro deste código de bloco podemos adicionar. Por exemplo. Você pode ver que esta não é a única maneira. E estamos usando esse código de bloqueio. Se eu ir em frente e atualizar, podemos ver que há um pouco para a direita. Temos algum espaço aqui, e isso indica que estamos codificando algo. Então estas não são as nossas palavras. Este é o mundo de outra pessoa. Agora vamos supor que queremos adicionar a citação. Podemos adicioná-lo aqui. Então, dentro do código de bloco, podemos adicionar site, e dentro do site podemos adicionar o URL ao código. Então HTTP, algo, eu não sei. E eu acho que os EUA que é usado para uma URL. Então é isso para o código de bloco. Vamos passar para outra coisa que é o endereço. Agora, sempre que queremos escrever um endereço, podemos usar a pilha de endereços. Então endereço e dentro deste endereço podemos escrever algumas informações. Então a primeira coisa que vamos fazer é escrever o nosso nome. Então, como os EUA, e, em seguida, se quisermos apenas saltar alinhados, podemos usar DBR para saltar. E dentro da segunda linha, vamos escrever o, vamos supor o e-mail. Então Hadi Yunus em e pensar, oh, que apoiar Outlook.com. E depois disso queremos escrever, por exemplo, nosso endereço. Então, dirija-se aqui. E finalmente, depois disso, precisamos adicionar nossa localização. Então vamos supor que os EUA e nós estamos, agora terminamos. Podemos voltar a isto e, como podem ver, este é o nosso endereço. É um itálico. Primeiro temos o nosso nome, endereço de e-mail e localização. E este é o fim para os ágoras. Vamos passar para outra coisa que é a abreviatura. Então, por exemplo, se quisermos falar sobre a Organização Mundial da Saúde conhecida como h2, podemos usá-lo assim. Assim, dentro deste parágrafo, podemos dizer que a OMS foi fundada em 1948. Agora, se eu rodar isso, atualizar nosso navegador, eu vou conseguir isso sem nada indicando o que é a OMS. Agora, se quisermos indicar que a UE é a Organização Mundial de Saúde, posso acrescentar um BBR, e esta é a abreviatura. E o título será Organização Mundial da Saúde, mediação. E dentro disso podemos acrescentar, OK. Agora vamos voltar aqui, executar isso. E como você pode ver, nós temos este rho e nós temos um pouco de amido sublinhado. E isso indica que isso é uma abreviatura de outra coisa. E esta é a Organização Mundial da Saúde, na verdade. Agora, em relação à imagem, vamos voltar e pegar este URL. Então temos uma URL de uma imagem que diz olá. E dentro desta imagem podemos criar aqui IMG. Então a primeira coisa que vamos fazer é escrever a fonte desta imagem e temos a nossa fonte. E depois disso, vamos nos ajustar. Então, podemos escrever que a largura será igual a 200 e a altura a ser igual a 250. E neste caso, deixe-me voltar antes de fazer qualquer coisa, atualizar o documento e vamos receber Olá representado assim. Agora vamos adicionar alguma citação a isso. Então, vamos acrescentar que isto é “olá”. E dentro do nosso código, seguir, imagens podem escrever um parágrafo. E dentro deste parágrafo, temos de procurar. Então, vamos adicionar site. Dentro do lado. Podemos adicionar o, o que esta imagem é sobre. Então, neste caso, vamos simplesmente adicionar olá. E o criador ou criador desta imagem é desconhecido. Então, agora vamos voltar centenas. E como você pode ver, nós citamos que o título, ou o que é esta imagem sobre? E neste caso é, olá. Agora também podemos adicionar aqui uma alternativa. Como podemos ver, temos sobre o que é e t. Então, neste caso, vamos supor. Se algo ocorreu ou um adulto foi gerado a partir deste URL, vamos simplesmente substituí-lo por esta palavra Olá. Deixe-me adicionar uma foto que diz “olá”. E neste caso, deixe-me apenas escrever algo aqui apenas para tornar este URL inválido. Então eu gosto das letras extras. Volte e execute isso. E como podemos ver, esta imagem ou este URL gerar, gera um somador. E vamos usar a alternativa. E neste caso, é uma foto que diz olá. E como podemos ver, vamos tirar uma foto que diz olá e configurar a imagem em si. Deixe-me ajustar isto. E agora estamos prontos para voltar a correr. Vamos pegar as fotos, já que o URL é válido. Temos também um ataque que cobre reprimidas alinhadas. E neste caso, se quisermos, e vamos supor que queremos reverter esta linha. Então temos um parágrafo e espiral, desculpe, deixe-me anotar. E nós temos o parágrafo. Dentro deste parágrafo, queremos reverter o sinal. Então esta é uma linha. E ser escrito da direita para a esquerda, em vez de escrever da esquerda para a direita. Então, agora vamos voltar. Renovado, nada vai acontecer. Vamos ter uma linha simples, e esta é uma estrutura normal em linha. Agora vamos voltar. Se quiséssemos pegá-lo da esquerda para a direita, vamos usar o vídeo. E neste caso BD. E a direção é d, l, Então da direita para a esquerda. E se eu copiar isso, colá-lo aqui e correr, vamos notar que esta é a mesma linha, mas escrito em sentido inverso. Então, se quisermos lê-lo, então DES é uma linha e seria escrito da direita para a esquerda. Agora, isso pode ser útil ao escrever algumas strings ou escrever alguns inteiros, e queremos o inverso deles. Então, em vez de ter que escrever um loop for começando do ponto final até o ponto inicial, podemos simplesmente inverter um tempo inverso e começar a trabalhar com eles dessa maneira. Então, neste vídeo, apresentamos o código do bloco, endereço, abreviatura AB, IRR, e, claro, o site e o vídeo. E com isso dito, este é o fim deste vídeo. E a próxima. 9. Links: Agora vamos discutir o modo de comprimento. Então, primeiro de tudo, deixe-me escrever mais uma vez. Como podemos acessar um link ou como podemos adicionar link ao nosso código HTML? Então, dentro do nosso parágrafo, podemos simplesmente adicionar um link usando a referência h, desculpe, dentro do nosso a. Então aqui temos o link. Então vamos supor que eu quero ir para o Google para que ela é EBP HTTP, a barra direta coluna duas vezes, nós vamos ter. E se eu adicionar aqui o Google, deixe-me apenas abrir isso. E como podemos ver, temos o Google. Se eu pressionar essa palavra, iremos automaticamente para google.com. E aqui podemos procurar o que quisermos. Agora vamos voltar ao nosso código e começar discutir como podemos mudar esse tamanho ou o que fazer com o escravo. Então a primeira coisa que vamos discutir é o absoluto versus URLs relativos. Então, sempre que escrevemos HTTP, isso indica que este é um URL absoluto. Então este é um endereço web completo, e estamos adicionando-o ao atributo hiper referência. Agora, às vezes temos alguns URLs relativos, e esses URLs são basicamente um link para uma página dentro do mesmo site. Então, por exemplo, se temos, vamos supor que temos Google.com e dentro do Google.com temos imagens. Então, podemos simplesmente escrever um URL que nos leva do Google para imagens do Google sem sequer escrever o HTTP. Isso, podemos simplesmente escrever imagens do Google.com e ele vai funcionar bem. Agora, outra coisa a pensar é a cor do link. Agora, como você pode ver aqui, a cor do link é realmente azul antes de tudo. E então deixe-me mudá-lo só para ver a diferença. E por dentro, deixe-me chamá-lo de Google com o g minúsculo, apenas para alterá-lo, atualizar. E como você pode ver, este é um Google. Agora, se eu quiser mudar o estudioso, eu posso voltar aqui e adicionar um estilo de hora aqui. Então temos estilo e a cor, por exemplo, podemos mudar a cor para azul e vamos obter este azul. Vamos supor que eu queria que fosse vermelho. Eu posso simplesmente adicionar vermelho, voltar, atualizar. E este é o nosso link agora e ler. Portanto, é basicamente a mesma coisa que um parágrafo. Mesmo que estejamos a lidar com uma ligação, vamos fazer exactamente a mesma coisa que antes. Agora, observe aqui que sempre que estamos escrevendo um link, estamos criando um link. Temos esta linha aqui. Então, uma maneira de remover isso é simplesmente. Certo e estilo. Precisamos de decoração de texto. Então temos decoração de texto e precisávamos ter nove anos. E agora vamos voltar e fazer isso. E como você pode ver, nós não temos linha e nós já removemos a cor aqui. Então vamos ter a cor padrão, que é um pouco como roxo. E se eu pressionar, me prever como antes, nada mudará, mas esta linha desaparecerá. Agora, se eu pressionar aqui mais uma vez, não apenas isso, vamos para cima e google.com na mesma janela ou na mesma guia e na janela. Então, por exemplo, eu queria abrir este documento em uma nova janela ou em uma nova guia. Eu deveria especificá-lo. Então aqui vem a importância de um alvo. Então, em vez de escrever isso, simplesmente escrever o link e apenas escrever o fim de semana do Google especifique o alvo aqui. Então alvo será igual a, temos 44 exemplos, então temos o self, e isso abre o documento na mesma janela ou guia como ele foi limpo. Então este é o padrão, e nós também temos o espaço em branco e isso abre o documento em uma nova janela ou guia. Nós também temos o pai de um dopant, o documento no quadro pai. E por último, temos o topo e abre o documento em todo o corpo da janela. Agora vamos supor que queríamos abrir uma nova janela. Neste caso, eu posso usar o espaço em branco, então eu vou usar o branco. Volte, atualize, pressione. E como você pode ver aqui, eu sempre abro uma nova aba ou uma nova janela em vez de abri-la e a mesma janela. Então, usando isso, ainda podemos ter nossa página principal. No entanto, também temos o link que estamos nos referindo em outra janela ou guia. E vamos voltar aqui. Agora, vamos supor que queremos adicionar uma imagem, e sempre que clicarmos nesta imagem, ela nos levará para outro local. Então já temos uma imagem aqui. Então, isto é um olá. Vamos copiar o link e trabalhar com ele. E sempre que pressionarmos esta imagem, ela nos levará automaticamente, nos levará para Google.com. E neste caso, uma maneira de fazer isso é subir e como de costume, então esta é a hiper referência. E dentro desta referência, vamos escrever google.com. No entanto, em vez de adicionar o Google ou escrever o Google, vamos adicionar uma imagem neste caso. Então IMG, como sempre. E dentro da fonte eu vou simplesmente e esta imagem. Então deixe-me voltar aqui e me afogar logo. Observe que agora temos uma imagem e, sempre que pressionarmos, ela nos levará para google.com. Então vamos ajustar isso para que a altura seja. Igual a 40, por exemplo, e largura igual a 30. Acho que está tudo bem. Você está de volta R1. E como podem ver aqui, temos uma baixa. Sempre que pressionamos sobre ele, ressoar, ele vai levar, leva, leva-nos para google.com. Agora vamos voltar e vamos ver agora como você pode usar um link dentro do nosso HTML são o nosso navegador principal. Então vamos supor que temos alguns exemplos, exemplo 123456. Então aqui, suponha que eu tenha b um, desculpe, h um. E este é o exemplo um. Então temos um exemplo em Biograph. Vamos supor que este exemplo seja algo. Então temos 111 tempo. Este é o exemplo dois. E neste caso também temos um parágrafo e este exemplo como e como de costume. Então também temos para mais exemplos, então eu vou apenas copiá-los neste ponto. Então eu simplesmente escrevo isso e depois copio o outro. Então este exemplo é, e nós temos algumas informações agora, deixe-me apenas copiar isso, ler mais vezes. Então temos 123. Agora deixe-me mudar M. Então temos aqui 456. Agora, se eu ir em frente e abrir este arquivo em nosso navegador, podemos ver que temos, este é o exemplo um. Este exemplo é o exemplo 23456. No entanto, vamos supor que eu precise pular para o exemplo 56 imediatamente. Então, em vez de escrevê-los assim, posso adicionar alguns links aqui. Então a primeira coisa seria em um parágrafo. Então, um será o ID do nosso parágrafo ou nosso exemplo para o qual precisamos saltar. Então precisamos especificar um folato id para isso. Então, por exemplo, em um dentro do conjunto S1, Nós vamos especificar que este é e cinco. E, claro, aqui temos uma idéia e os dois V igual a E6 indicando que este é um exemplo, exemplos x. Agora, se voltarmos aqui, então h referência será para hashtag e o ID, que é cinco neste caso. Agora posso escrever aqui. Vá para o exemplo cinco. Deixa-me abrir isto. E como podemos ver aqui, temos de ir para o exemplo cinco, no entanto, ainda não foi adicionado. Então. Porque escrevemos aqui em vez de escrevermos dentro da etiqueta “A”. Agora, volte para trás. E como podem ver, temos de ir para o exemplo cinco. Se eu preceder, levar-me-á imediatamente ao exemplo cinco. E isso funcionará se tivermos tantos exemplos. Então deixe-me copiar isso e imprimir, por exemplo, dez vezes. Eu não sei. E agora se eu voltar, e assim teremos muitos exemplos. No entanto, se eu pressionar a densidade vai me levar imediatamente para o exemplo cinco, seja lá o que for. E a mesma coisa, é claro, se aplica aos circuitos de exemplo. Então temos E6 indicando que este é um exemplo seis parágrafo a e hashtag E6, e vá para o exemplo seis. Agora, se eu executar isso, volte aqui e atualize. Posso ver que temos o exemplo seis. E se eu clicar nele, levar-me-á imediatamente ao exemplo seis. Agora, há um ET aparece aqui no final do navegador é porque nós não temos nenhum dado. Seguindo estes dois exemplos mostram que suponha que eu tenho alguns dados aqui. Então, temos títulos acima e abaixo. E se eu voltar, executar isto, podemos ver que temos cerveja. Então, se eu for para o exemplo cinco, eu posso sintetizar o exemplo cinco no topo da página. Se eu ir para o exemplo seis, eu também posso ver que este é Exemplo seis no topo da página também. Agora, a última coisa que vamos discutir é escrever e-mail para alguém. E neste caso, deixe-me voltar aqui. E em vez de apenas criar uma hiperreferência ou um comprimento feliz que nos leve para a imagem. Podemos simplesmente adicionar a imagem em si aqui. Então deixe-me apenas ir em frente e deletar isso. Agora, sempre que quisermos escrever um e-mail. Então deixe-me começar com, este é um link de e-mail. E depois disso, eu vou escrever um e dentro do HRF, eu vou usar o e-mail para assim enviado para alguém, por exemplo, não. E se eu quiser acrescentar o assunto, posso simplesmente acrescentar o ponto de delegação e depois segui-lo. O assunto seria, por exemplo, para olá mundo. Então, olá. E sempre que quisermos escrever um espaço dentro deste H ref, devo adicionar a porcentagem 20. Então porcentagem 20 indicará que eu sou, eu preciso de um espaço aqui. Então, olá novamente e envie e-mail a partir daqui. Agora. Então, quando quiser. Agora deixa-me abrir isto. E como podemos ver aqui, temos isso como um link de e-mail enviar imagem a partir daqui. Então, sempre que eu pressionar sobre isso, ele vai automaticamente me levar para o sexo masculino e ele vai definir o assunto eo destinatário do e-mail por si só automaticamente, desde que eu indiquei aqui na imagem. Então o homem dois indica a pessoa que eu vou enviar o e-mail para o endereço, como você pode ver aqui. Em seguida, seguido pelo sujeito. Claro, temos o assunto igual a Olá novamente. E, finalmente, podemos acrescentar, em vez de apenas o assunto, também podemos adicionar o corpo. Então eu posso simplesmente escrever aqui e corpo. E dentro do corpo eu também posso escrever o que eu quiser. E sempre que eu quiser usar um espaço, eu posso simplesmente adicionar a porcentagem 20. Então este é para enviar um e-mail e este é ele para o link em geral é uma idéia muito geral. Temos tantas coisas que podemos fazer com um link ou referência em HTML. Mas, por enquanto, esta é uma introdução geral. E com isso sendo dito, este é o fim deste vídeo. Vejo você na próxima. 10. Imagens: Agora, em relação às imagens, acredito que temos uma boa idéia sobre as imagens tendem agora. E isso não é uma, apenas uma recapitulação sobre o que aprendemos sobre imagens e como usá-las. Então deixe-me primeiro excluir isso e começar com a criação de uma imagem. E como de costume, temos o nosso comprimento aqui. E como antes, podemos especificar a largura e a altura. Assim, a largura será igual a 200 e a altura seria igual a também 200. Então essas coisas nós sabemos, e se eu voltar, então esta é a nossa imagem aqui. E como podemos ver, ajustamos como queremos. Agora. Por exemplo, se eu tiver essa imagem e como dissemos antes, esse URL não está funcionando. Podemos escrever aqui imagem do Google. E algo aconteceu neste URL, talvez copiando-o ou por engano, nós adicionamos algo, e este não é um URL válido, como dissemos, vamos obter a alternativa para esta imagem. Neste caso, escrevemos que precisamos de imagem do Google. Agora, vamos supor que queremos escrever esta imagem ou esta imagem à direita. Uma maneira de fazer isso, uma barra S especificando este fluxo de mosaico para a direita. Agora podemos abrir o Stein aqui. Então, o estilo será igual e dentro do estilo. Precisamos adicionar o carro alegórico. E neste caso precisamos que a imagem esteja à direita. Então, se eu atualizar, posso ver que a imagem do Google está agora à direita. Deixe-me apenas copiar o link certo aqui. Neste caso, este é o link. Deixe-me apenas copiá-lo de volta para o meu código aqui. E vamos conseguir essa imagem onde quisermos. Então nós queremos isso à direita, nós vamos buscá-lo aqui. Agora também podemos especificar a largura e altura para ser porcentagem. Então vamos supor que eu quero que a largura seja igual a um 100%. E neste caso, se eu especificar como um 100%, eu vou obter a largura como esta. Agora, deixe-me voltar e especificar a altura para ser igual a 100%. Além disso, volte, atualize. E como você pode ver, nós vamos obter o primeiro ou o link inicial ou a imagem inicial que obtivemos deste link. Agora, então esta é uma maneira de especificar a largura ou a altura, seja especificando a porcentagem ou especificando o pixel. Agora, outra coisa é, nós falamos é que sempre que queremos adicionar uma imagem para ser uma referência, nós podemos simplesmente escrever um e dentro deste um, eu vou usar a imagem e ele vai me levar, por exemplo, para SGP, google.com. E como dissemos antes, sempre que escrevemos referência um e precisamos fechar aqui div tag. E como podemos ver, se eu voltar agora, executar isto, temos à direita. Posso clicar nele. E se eu clicar nisso, ele me levará automaticamente ao Google.com. Estas são algumas ideias básicas sobre imagens. Temos tantas outras informações e ideias que podemos usar. No entanto, eu apenas pensei que eu poderia simplesmente mesclar todas as idéias que falamos nos vídeos anteriores. Neste vídeo, apenas para esclarecer ou ter uma idéia clara sobre o que podemos fazer com as imagens e como usá-las. E, claro, como manipular o tamanho ou a localização da nossa imagem em nosso código HTML ou nosso navegador. Então é isso para imagens. Vejo você no próximo vídeo. 11. Tabelas: Agora vamos falar sobre tabelas e HTML. Então, como pode recriar nossa mesa? Então, em primeiro lugar, aqui temos o nosso corpo. E dentro deste corpo, podemos começar criando a tabela usando a tag tabela. Pressione Enter. Então esta é a nossa mesa agora. Agora temos que fazer, uma vez que temos a linha e a coluna. Então, se quisermos criar uma linha, podemos simplesmente usar a tabela crescer. E dentro desta lei da tabela, vamos supor que eu tenha apenas um componente ou um item em nossa tabela. E isso nos dá uma tabela de dados. Assim, dados significam colunas neste caso. Então, TDI. E deixe-me tentar um. Agora, se eu for em frente e abrir isso, podemos ver que vamos conseguir um. Então esta é uma tabela de tamanho um. Só temos um elemento no estábulo do Papai Noel. Agora vamos supor que eu quero uma tabela de uma linha e duas colunas. Posso adicionar aqui DD. E dentro deste TED, posso adicionar o número. Vamos supor que eu queira, deixe-me voltar aqui, refrescar-me. E como podem ver, agora temos uma mesa. E temos nesta tabela dois itens ou dois números, 12. E agora eles não estão separados por nada. Eles são apenas exibidos como e como eles estão aqui. Então, vamos voltar. E vamos supor que eu queira criar uma matriz de, uma matriz de três por 33 por três matriz na verdade. E neste caso, vou ter três filas e três colunas. Assim, a primeira linha terá três itens ou três números. Neste caso, temos 123 e a segunda linha, eu preciso criar outra linha usando o TR. E dentro desta linha, eu também terei três números, então 456. E finalmente eu tenho minha última linha e dentro do traço, eu tenho os últimos três números. São 789. Então DD sete, td oito. E, claro, TD nove. Se eu voltar agora, atualizar isso, podemos ver que temos uma tabela de três linhas e três colunas. Como podemos ver, temos 123456789. Então, a ideia geral. Sempre que queremos criar uma linha, vamos usar DTI. Sempre que vamos adicionar um ampere ou como um tempo específico vamos usar o Td. E isso significa dados de tabela. Agora, como podemos ver aqui, temos uma matriz de três por três. Vamos supor que eu queira adicionar alguns títulos aqui. Então isto é, eu posso especificar que estes são o primeiro número, segundo números e terceiro números. E eu posso realmente fazer isso criando uma nova linha aqui. Então temos TR dentro desta linha. Eu posso adicionar th. Então th. E dentro do palco eu posso escrever e b1, em seguida, seguido pela idade e B2. Então finalmente th e B3 voltar, atualizar. E como podemos ver, eles são e um parafuso, como podemos ver número um, número dois, número três estão em ambos. Agora vamos mudar o exemplo e lidar com a borda da tabela. Até agora não temos fronteiras, como podemos ver, elas são simplesmente exibidas e formam a mesa. No entanto, ainda não temos as caldeiras. Deixe-me voltar ao nosso código e apagar isto. Então, dentro da nossa tabela, vamos criar, vamos adicionar alguns dados na verdade. Então a primeira coisa que vamos fazer é adicionar pessoas e vamos pedir-lhes informações sobre dispersão. Então o FirstName, LastName e H. Então a primeira coisa que vamos fazer é criar a primeira linha. E dentro desta linha, vamos adicionar três colunas. Assim, o primeiro indicará o FirstName. Então o primeiro nome, depois o sobrenome TH. E finalmente a idade, a idade. Agora, depois de criar este rho, podemos começar com a adição de nossos dados. Assim, o primeiro cliente ou a primeira pessoa será TD. Então este é o TLB de dados, Alex, e o sobrenome será um ponto. E, claro, precisamos adicionar é h. E neste caso, vamos supor que a idade seja de 30 anos. E então vamos criar outro profissional. E dentro do pergaminho temos John, e também temos J. E finalmente a idade será de 45 anos. E a pessoa final seria que nós apenas abrir para o, eu sinto muito, aqui nós precisamos adicionar célula TD do são selecionados apenas o Dean John Jay, e DD 45. E agora dentro da nossa última fila, vamos adicionar uma Aimee por trás deles dessa forma. E será um, e finalmente, a idade será de 25 anos. Agora, se eu voltar aqui e eu executar isso, nós temos nossa mesa até agora, nome, sobrenome e idade. Agora, se eu quiser adicionar o velejador, posso adicioná-los a cada linha e coluna. Então, toda vez que eu adicionar uma linha ou dados, eu sinto muito, um dado ou um cabeçalho, eu posso adicionar a borda. No entanto, uma maneira de lidar com tudo isso, em vez de adicionar cada vez aqui, por exemplo, em Boulder e depois usá-lo, Eu posso simplesmente adicionar e a cabeça. Então, dentro de nossa cabeça, após o título, podemos adicionar estilo. Assim, dentro deste tipo, podemos mudar o que quisermos aqui. Então, por exemplo, eu quero mudar a tabela quântica. Dentro da tabela, eu quero mudar o cabeçalho da tabela e os dados da tabela para cima e, assim, e dentro desta mudança Eigen, por exemplo, o Boyden, eu queria ferver para ser um pixel, e eu quero que ele seja preto sólido. Agora vamos voltar para baixo. E como podemos ver, temos evitado oh, 1%. E é assim que agora, se eu voltar aqui e me deixar apenas simplificar isso ou minimizar isso, volte. E como podemos ver hoje, fique menor. Agora, vamos supor que eu não quero que seja tão chique. Eu só quero ser, só quero que minha mesa seja simples. Neste caso. Posso remover a fronteira externa. Neste caso, posso usar o colapso da fronteira e ser igual a colapsar de volta, atualizar. E como você pode ver, nós vamos obter uma versão mais simples da tabela sem as fronteiras externas. Agora, como podemos ver aqui, o estábulo como um pouco confuso, apenas informações são adicionadas juntas. E vamos supor que queremos mudar o preenchimento dentro do óleo, dentro dos dados da tabela. Então, uma maneira de fazer isso é adicionando ao nosso estilo. Queremos o título. E assim th td abrir isso e queremos que eles tenham o preenchimento de 15 acesso, por exemplo. Então, se eu ir em frente agora e atualizar isso como podemos ver. Daqui temos 15, daqui somos 1515 e assim por diante. Então o preenchimento é basicamente a distância mínima que vamos ter entre a borda da tabela e o próprio item. Agora, como podemos ver aqui, 15 pixels é muito. Então deixe-me tentar cinco pixels. E acho que está tudo bem. Agora, se I1 os títulos para estar à esquerda, eu posso simplesmente adicionar dentro do estilo, a idade acima e, e eu preciso que o texto alinhado para estar à esquerda. Volte, atualize. E nada aconteceria, já que eles estão na torre esquerda. Precisamos ajustar o tamanho da mesa. Então, dentro da nossa tabela, depois de criar esta tabela, podemos simplesmente adicionar aqui esta telha. E precisamos que a largura seja igual a 100%. E neste caso, antes de voltarmos a atualizar, podemos ver que a tabela agora é muito mais ousada. E neste caso, sempre que usamos o imposto alinhado à esquerda, vamos obter FirstName, Sobrenome e idade para a esquerda. No entanto, se eu apenas remover isso, promova Deus. Então remova o text-align esquerda de volta e atualize. Podemos ver que o FirstName, Sobrenome e idade, estarão no centro da nossa caixa. E isso ocorre porque o título geralmente está no centro e todos os outros itens. Então, sempre que usarmos TD, eles estarão automaticamente no lado esquerdo da nossa caixa. Agora. Até agora temos o título horizontal. Como podemos ver, temos o FirstName, Sobrenome e idade. Mas vamos supor que eu queira criar uma tabela que represente os números de telefone e o, e isso, por exemplo, podemos dizer que isso representaria o telefone. Então vamos estar bem na extremidade esquerda e à direita nas caixas da direita, vamos escrever o número de telefone, o verdadeiro Para um número. Então, uma maneira de fazer isso é criando a tabela como de costume. Então, primeiro de tudo, deixe-me voltar aqui. Depois da nossa tabela, vamos criar outra tabela. Dentro desta mesa, vamos ter a primeira fila. Dentro da primeira linha, vamos criar o primeiro cabeçalho da tabela e temos telefone. E então vamos adicionar nossos dados. E neste caso, vamos adicionar os números reais. Então vamos supor que temos 555555 para D4, e esta é a nossa primeira linha. A segunda linha também será assim. Assim, o manuseio será telefone e os dados serão o número. E neste caso, temos este número. Então vamos voltar e fazer isso. E como podemos ver, temos o telefone, e este é o rumo vertical. Então, como podemos ver, os títulos são verticais e os números padrão estão nas caixas certas. Então, apenas verifique as coisas. Podemos simplesmente adicionar antes da nossa mesa um título. Então H um será este é um exemplo da horizontal. E depois, e depois do estábulo. Então, entre as duas tabelas, vamos escrever cada uma também mostrou isso como um exemplo. Aos 30 garota tendo. Agora, se eu voltar e executar isso mais uma vez, podemos ver que este é um exemplo de um título horizontal. Como podemos ver, os títulos são horizontais e aqui os títulos são verticais. E este é o fim para este vídeo. No próximo vídeo, vamos discutir mais tabelas e vê-lo então. 12. Tabelas 2: Agora vamos supor que queremos adicionar uma legenda à nossa tabela. Então, em vez de escrever um título aqui, vamos adicionar isso como uma legenda à nossa tabela, e a mesma coisa se aplica aqui. Então, uma maneira de fazer isso é que dentro da nossa tabela, podemos adicionar uma legenda. E podemos dizer que este é o rumo vertical. Vamos apagar isto e voltar para a nossa primeira mesa. E, claro, dentro desta tabela também adicionar uma legenda. Re, não está adicionando. E neste caso, se eu voltar agora e afogar essa atualização, vamos notar que este é o cabeçalho horizontal e o cabeçalho vertical dos dados. E eles são o centro da nossa mesa. Então, se eu quiser que eles estejam no lado esquerdo para que eu possa escrever texto alinhado à esquerda. Agora, volte, atualize. E podemos simplesmente ver que esta posição horizontal está à esquerda agora. E também podemos fazer a mesma coisa pela direita. Eu não o usei agora. Mas também podemos usá-lo. Corra. E podemos ver que esta é a nossa posição horizontal, e esta está agora na posição mais certa. Agora, vamos excluir essas tabelas e trabalhar com uma nova apenas para ver um novo recurso. E neste caso, vamos aqui e, claro, vamos sair disto. E ainda temos isso também. Então agora vamos voltar ao nosso corpo e vamos criar uma nova tabela. E, claro, a largura será como de costume. Assim, a largura deste será igual a um 100%. E agora podemos trabalhar com a nossa mesa. Então a primeira coisa que vamos criar é o primeiro traço dentro da primeira linha, vamos simplesmente adicionar o nome para que os títulos sejam nomeados e o outro título seria na verdade um número de telefone. Então, número de telefone. E nós vamos adicionar outra linha para apenas uma pessoa. E assim, os primeiros dados serão o nome, como dissemos. Então vamos supor que o Yunus. E, claro, o segundo será o número de telefone. E neste caso, deixe-me assumir que este é o meu número de telefone. Agora, se eu puder voltar aqui e ver se temos o nome de um número de unidades e o número de telefone. E suponha que eu tenha dois números de telefone e quero adicionar os dois aqui. Então, uma maneira de fazer isso é criando duas células dentro desta coluna. Então, se eu voltar aqui e dentro do th, então este é o segundo, a idade, o cabeçalho da mesa. Eu posso adicionar col span e dentro disso eu posso especificar o número de sons que eu quero mesclar juntos. Então, por exemplo, aqui neste caso, eu quero, e eu posso simplesmente adicionar DD e novo número de telefone. E neste caso, este é o segundo número, que backround. E como podemos ver, agora temos dois números de telefone, o primeiro e o segundo, e eles são comprados sob a seção de número padrão ou o saldo de número de telefone. Agora, uma vez que fizemos isso para colunas, podemos fazer exatamente a mesma coisa para linhas. E neste caso, deixe-me demonstrar isso dentro de nossas mesas. Então, e assim embora tabela vamos ter o TR e, claro, o nome, e depois seguido pelo nome. Então eu quero apenas mover estes. Então vamos ter um nome. E então aqui para o número do que o nome aqui. E ambos em números aqui e aqui. Então, e os cientistas vão ter $0,02. Então, para fazer isso, vamos criar nosso primeiro título, que é o nome, no entanto, seguido pelos dados. E, neste caso, será o meu nome. Então, os EUA. E, claro, dentro de nossa segunda fila, vamos criar nosso primeiro título, segundo hélio, desculpe. Então aqui temos a idade. E então 78s, eu posso especificar a extensão da linha. E eu precisava ter dois anos. E dentro disso, vamos adicionar o número de telefone. E finalmente temos os dois números de telefone. Então nós temos o primeiro, e isso é igual a td. E o segundo será uma nova linha. Como dissemos, precisamos de três filas. Então, TR. E se eu voltar agora, rode isto para vermos que temos o Meu nome, adicionar Urano do que o número de telefone. Temos dois números de telefone. Então, o que fizemos aqui? Deixe-me voltar. E como podemos ver quando eu especificar o rowspan 22, eu apenas peguei duas células ou duas linhas e juntá-las. Então, se eu remover isso do meu código, e vamos ver o que vai acontecer. Faça isso mais uma vez. Posso ver que temos a segunda linha seguida do número. No entanto, o terceiro número estará aqui. Agora, uma maneira de lidar com isso é simplesmente adicionando o último título. Então. Um cabeçalho vazio. Desculpe, eu não o guardei. Refresque. E como podemos ver, temos um anti-islanding. Então, apenas para remover isso e não confundir o leitor, podemos simplesmente usar o rowspan e mesclar comprado cresce para se reunir. Uma vez que precisamos de quatro números e ambos representam o mesmo número de telefone ou ambos em números do mesmo usuário. Agora, deixe-me voltar aqui e remover esta hora desconhecida. Então esta é a nossa mesa. Agora, vamos supor que eu precise da borda interna e externa, então eu vou, eu vou remover o colapso R1. E como podemos ver agora, temos mesa mais chique. Agora. E vamos supor que eu queira aumentar ou alterar o espaçamento da fronteira. Então desprovido de espaçamento é na verdade a distância entre a borda interna e externa e decidir esta tabela. Então deixe-me voltar aqui e dentro da minha tabela ou dentro do estilo aqui, podemos adicionar que queremos que a tabela seja, por exemplo, o espaçamento entre bordas e seja igual a cinco pixels. Vamos voltar e fazer isso. E como podem ver , mudou e aumentou. Então, por exemplo, se eu usar agora 15, você volta R1. Podemos notar que ele muda e a distância entre a borda interna e externa aumentará. Agora, sempre que criamos uma tabela, não precisamos apenas adicionar itens ou palavras. Podemos adicionar o que quisermos. Assim, por exemplo, podemos adicionar parágrafo, uma lista, uma palavra, ou até mesmo outra tabela. Então deixe-me voltar aqui e remover isso, um espaçamento de fronteira e adicionar aqui o colapso da fronteira. Como de costume. Volte R1. E deixe-me ir aqui e precisamos salvá-lo. Eu sinto muito. Sem corrida ao banco. E esta é a nossa mesa. No entanto, dentro de nossa tabela, deixe-me excluir as linhas e colunas e iniciar uma nova tabela. Então, se eu seguir em frente e títulos, sinto muito, até aqui, eu posso começar com a criação da primeira linha. Então a primeira linha, dentro da primeira linha, vamos criar nossa primeira coluna. Assim, a primeira coluna, os primeiros dados serão consistindo de parágrafos. Então B, este é um parágrafo. E então deixe-me apenas criar outro parágrafo. Então este é outro parágrafo. Vamos voltar aqui. E como podemos ver, se eu criar isso, teremos a primeira coluna ou o primeiro item dentro da nossa tabela. Agora, se eu voltar e vamos criar outra coluna. E dentro disso, vamos apenas criar uma lista. Ou vamos criar outra tabela, por exemplo. Então dentro TD, vamos criar a segunda tabela. Então nós estamos indo para digitar tabela. E dentro desta tabela vamos criar a primeira linha. Versos da primeira linha de 212. E então a segunda linha também consistirá em duas colunas, então 34. Agora, se eu voltar e executar isso, nós vamos obter os 22 itens dentro da nossa mesa externa ou mesa maior. E esses dois itens serão espectrógrafos e lista. A nossa mesa. Agora, nossa segunda linha consistirá em uma lista e uma palavra. Então, dentro da nossa tabela, vamos criar a segunda linha. Então, aqui, depois de obter, depois de terminar a partir da primeira linha, criar o segundo e dentro do segundo terá uma palavra. Então vamos supor que eu tenha uma carga e o segundo item dentro da segunda linha será uma lista. Então, para criar esta lista, vamos simplesmente usar uma lista não ordenada. E vamos supor que precisamos do TD. Então criamos um TD, e depois disso podemos criar nossa lista. Lista tão desordenada. Dentro desta lista, temos alguns itens de lista. Então Banana, outro item da lista, Mapeador. E o último será abacaxi. Então, agora terminamos. Vamos voltar e fazer isso. E como podemos ver, temos a nossa tabela e consiste em parágrafos, tabela, Palavra e lista. E este é o fim para a mesa. No entanto, ainda podemos modificar algumas coisas. Por exemplo, podemos alterar a cor de fundo desta tabela. Então podemos usar o ID para fazer isso. Então nós temos nossa mesa, e eu quero dizer a mesa externa ou a mesa maior. E neste caso, eu posso acrescentar aqui a idéia de ser igual, por exemplo, a um. E agora, se eu quiser acessar esta tabela, eu posso simplesmente usá-la dentro do estilo. Então, dentro do nosso estilo, eu posso especificar que eu preciso para o ID d1. Vamos abrir as chaves e eu preciso que a cor de fundo seja igual a isso. Suponha que pur, propósito, eu acho que o que era bom? E agora volte, atualize. E como podem ver, nossa mesa vira um propósito. Agora também podemos especificar que queremos que a primeira linha seja igual a B de uma cor preta e a segunda linha de uma coluna, branco ou cinza, por exemplo. Então podemos fazer isso simplesmente especificando a linha e coluna e especificando o plano de fundo, cor, tamanho ou família de fontes. E este é o fim para o cone. Podemos fazer tantas coisas com tabelas em HTML, mas isso é como de costume, uma idéia geral. E você pode se aprofundar e aprender mais sobre isso sozinho. Mas, por enquanto, vamos ficar com isso. Então é isso. Este é o fim do vídeo da mesa. Dito isso, vejo você no próximo. 13. Listas: Agora vamos falar mais sobre menos. E em nossos códigos HTML anteriores, criamos uma lista. E neste vídeo vamos nos aprofundar neste tópico. Então, primeiro de tudo, deixe-me apenas excluir tudo isso e voltar para o nosso padrão normal. Bom, então aqui estamos. Então temos nossa cabeça e corpo. Então, para criar uma lista, como sabemos, se quisermos começar com a lista não ordenada, podemos digitar q e entrar. E esta é a nossa lista desordenada. E por padrão, se eu adicionei alguns itens aqui. Então, e deixe-me apenas abrir este navegador padrão. E como podemos ver aqui, temos banana e maçã. E esta é a lista padrão não ordenada. Agora, como podemos ver por padrão, temos os marcadores de disco. Então, é o mesmo se eu escrever no estilo que eu quero que o tempo da lista seja uma mesa. E neste caso, se eu ir em frente e atualizar, não vai mudar nada, já que isso já é uma bala de disco. Agora vamos supor que eu quero que eles sejam círculos. Eu posso simplesmente voltar para o meu código e mudar a mesa, o tipo de disco para círculo. Vamos voltar aqui e nos refrescar. E como podemos ver, agora, nossos pontos de bala, nosso círculo em vez de mesa. Nós também temos o quadrado, por exemplo, neste caso, deixe-me apenas voltar e mudar este círculo, dois S quadrado. Então temos diferentes tipos de pontos de bala. E como podemos ver aqui, temos o quando ele aponta como quadrado. E, por exemplo, se não quisermos nenhum marcador, neste caso, posso definir o meu tipo como nenhum. Então, como podemos ver aqui, se nós atualizarmos, nós vamos obter o nosso menos sem nenhum ponto de bala. Agora, vamos passar para a lista de ordenados. E neste caso F i1. Para criar minha lista ordenada, eu posso simplesmente digitar O L. E dentro desta lista eu posso definir meus itens de lista. Então, como sempre, e Anna e Apple. Vamos voltar, refrescar. E como podemos ver, vamos ter minha lista ordenada pela ordem ascendente de um a dois, já que eu só tenho dois itens. Agora, vamos supor que eu queira ordená-los por letras em vez de números. Neste caso, posso voltar aqui e definir o meu estilo como de costume. Assim, o tipo da lista ordenada será igual a um conjunto de números. Voltando atrás, execute isso, eu vou pegar a, B, e C e assim por diante. Agora vamos supor que eu os queira dentro. A carta normal volta e, como podemos ver, eles mudariam. E, claro, por exemplo, se eu quiser que eles com números romanos, eu posso voltar também e mudar isso em i, indicando que eu os quero em romano. E como podemos ver, podemos usar números de drama como ordenação neste caso. Agora, claro, se eu quiser que eles também sejam romanos, mas não capital neste caso, eu posso secá-lo. Olho normal e como você pode ver, eu vou conseguir como em números Brahman. Agora, nós também temos algo que é chamado de lista de descrição. E nesta última semana pode listar itens. Mas podemos adicionar algumas, por exemplo, descrição para este item. Neste caso, vamos supor que eu tenho banana e maçã e eu quero adicionar a cor. Então eu posso adicionar banana, um amarelo e maçã, vermelho neste caso, por exemplo. E se eu voltar, deixe-me criar nossa lista de descrições. E como fazemos isso? Podemos simplesmente escrever d e pressionar enter, e esta é uma lista de inscrições. Dentro desta lista, eu tenho. Posso usar o DT. E se eu entrar em um café ou banana neste caso. Então este é o item e DD, apenas para indicar que vamos inserir a descrição para este item. Então DD, Go e eu podemos simplesmente escrever, por exemplo, amarelo. Agora vamos voltar DT e DD e ler. E, claro, se eu voltar e atualizar, basta salvar isso e salvá-lo. Agora volte revigorado. E nós vamos pegar banana, seguido pela descrição, e então maçã e também seguido pela descrição. Agora, eu posso simplesmente adicionar aqui, por exemplo, a cor. Só para esclarecer o que estou fazendo. E neste caso, deixe-me voltar mais uma vez. E como podemos ver, temos nossos frutos e a cor associada a ele. No entanto, vá para a lista aninhada. E basicamente, lista aninhada é uma lista que está dentro de outra lista. E neste caso, suponha que eu tenha, por exemplo, uma lista e esta é a maior. Então é desordenado. Então eu vou usar un. Então dentro desta lista eu tenho o item da lista. Vamos supor que eu tenha laptops ou telefones e, em seguida, seguido por outro item da lista. E neste caso, é um laptop. E, claro, este laptop, eu tenho muitos, muitos tipos. Vamos supor que eu queira criar uma lista desses laptops. Então eu posso criar uma lista não-ordenada da ONU dentro deste item da lista. E dentro desta lista não ordenada eu posso criar, digamos HB, mark, e assim por diante. Agora, se eu voltar aos renderizadores do meu navegador, podemos ver que temos telefones, laptop, e dentro da reabilitação de laptop, HP e Mack. Agora, observe aqui que os marcadores padrão são mesa. Então os pontos de bala da mesa que priorizei. No entanto, se estamos, já os usamos. E os marcadores padrão agora são os círculos. Agora também tivemos a lista horizontal e podemos criá-la usando o estilo. Podemos alterar o estilo de exibição de nossos itens de lista. Então vamos supor que eu só tenho que listar itens. Neste caso, temos nosso laptop e formado. Então deixe-me voltar aqui. E deixe-me apenas criar uma identificação para isso. E neste caso, deixe-me chamá-lo de C 5. Agora dentro do nosso estilo, aqui em cima, dentro da nossa cabeça, podemos criar este azulejo. Então aqui temos estilo. E, claro, se eu quiser usar isso ou acessar esta lista desordenada. E a ideia é C5. Precisamos acessar os itens da lista e dentro desta lista não ordenada. E neste caso, preciso mudar a exibição para iluminar. E usando isso, eu posso ver que agora meus itens de lista são, meus itens são listados de forma horizontal. Então, sempre que usarmos os iluminados aqui em nossa exibição, eles serão exibidos horizontalmente. Então isso não é por menos. E deixe-me acrescentar algumas coisas. E eles não estão claramente relacionados com a lista. No entanto, acho que eles são importantes e devem ser adicionados em nossa classe. Então a primeira coisa é o elemento DIV. E este elemento é um elemento de bloco e sempre iniciará uma nova linha e ocupará toda a largura disponível. Então é basicamente como uma caixa. Então deixe-me demonstrar isso aqui. Vamos mover é e remover equipes. E eu posso criar esse elemento. Por isso, dentro desta div, posso dizer olá, mundo. Então, por exemplo, se eu quiser que o negrito apareça, eu posso adicionar no meu estilo aqui que eu quero que a caldeira seja igual a um pixel, digamos, e preto sólido. Então eu quero que a cor seja preta e a largura da borda um pixel. E como podemos ver aqui, agora temos caldeiras conscientes. E agora têm o tamanho de um pixel. E, claro, eles são de outra cor preta. Se eu quisesse mudar a cor, digamos que posso voltar. E como você pode ver, desculpe, I1, I2 e assim por diante. E é claro que vamos pegar HelloWorld e a fronteira está inclinada agora. Então, como podemos notar, este elemento se esticará para a esquerda e guiará o máximo que puder. Então, como podemos ver aqui, ele para ir por toda a página de e a partir deste ponto final para o último pedaço da tela. Agora, outro elemento é o elemento span, e neste caso, deixe-me voltar aqui. Portanto, este elemento span é um elemento inline e não vai começar em uma nova linha e só ocupa tanto quanto necessário. Então deixe-me apenas demonstrar o uso deste elemento span. Então deixe-me deletar isso, criar nosso espaço. E, claro, deixe-me dizer que preciso do HelloWorld. E deixa-me em silêncio. Dentro da nossa expansão, vou adicionar o meu estilo para ser borda, um pixel como de costume e preto sólido. Volto agora, refresco isto. Podemos ver que temos Olá Mundo dentro da fronteira. No entanto, o ponteiro levará tanto quanto necessário. Agora, suponha que eu adicione algumas palavras lá fora. Então esta extensão está em um parágrafo. E claro que tenho algumas palavras fora do espaço. Então posso dizer que sou Adi e bom. Por neste caso, se eu voltar e podemos ver que este Olá Mundo é entre estas palavras ea fronteira vai apenas tomar tanto quanto necessário. Assim, podemos ver que a palavra está dentro da caixa e se encaixa perfeitamente. Agora, se quisermos estilizar esse espaço e elementos, por exemplo, vamos supor que eu tenha isso. Então eu tenho aqui o parágrafo, dentro do parágrafo, eu tenho comida. Há recuperadores. E temos vermelho, azul e amarelo. No entanto, eu quero que cada cor deste seja apresentada e a respectiva cor. Então, agora, se eu voltar aqui e lambdas, eu vou chegar lá três cores, vermelho, azul e amarelo. E para fazer isso, podemos simplesmente adicionar este canto para abranger. Então span e eu posso digitar pão. E o estilo disso. Podemos usar a cor para ser igual a isso. E o fim de semana torná-lo ousado, tão divertido. E é claro que eu preciso adicionar e esperar para ser igual a. Agora, se eu voltar e executar isso, eu posso ver que nós lemos e é endpoint. Então podemos fazer exatamente a mesma coisa para azul e amarelo. E é assim que podemos modelar nosso espaço e podemos fazer exatamente a mesma coisa com nosso elemento div. Então este é o fim para este vídeo. Vejo você na próxima. 14. CSS: E às vezes, sempre que estamos escrevendo nosso código HTML, algumas coisas podem ficar um pouco confusas, já que vamos adicionar, por exemplo, alguns estilos e alguns detalhes. E neste caso, podemos não entender exatamente o que estamos fazendo em nosso arquivo HTML. Então, aqui vem a importância de um arquivo CSS. E dentro do CSS, vamos estilizar nossos elementos ou nossos dados. E neste caso, em vez de escrever o estilo aqui, tempo de configuração e nossa cabeça. Então nós realmente não precisamos escrever Stein aqui, ou mesmo adicionar um estilo em cada componente. Então não precisamos fazer isso. Podemos simplesmente escrever hora sozinho ou nosso arquivo CSS onde vamos estilizar nossos componentes. Então eu apenas criei o meu arquivo dot CSS, eu nomeei arquivo. E dentro deste arquivo, eu só disse que eu quero ser uma cor de fundo e cor de fundo é adquirida. Agora eu tenho aqui um neste caso. E eu preciso ligar esses dois arquivos. Então, uma maneira de fazer isso é usando o comprimento e temos CSS. Então este é Stylesheet e eu quero vincular o arquivo, o TSS. Agora, se eu for em frente e, me desculpe, volte e abra isso. No navegador padrão. Eu vou, eu vou pegar aquele com uma cor de fundo de bandgap de unaspas. Agora, nós também podemos querer, eu tenho duas cores diferentes para títulos diferentes. Então vamos supor que eu tenho outro título que diz “Mundo”. E neste caso, se eu voltar aqui e atualizar, eu vou ter a mesma cor para ambos os títulos. No entanto, uma maneira de lidar com isso é criando idéias diferentes, idéias separadas para cada componente e, em seguida, usar essas idéias em nosso arquivo CSS. Então vamos supor que eu quero que isso seja adquirido e o segundo da cor vermelha, neste caso, eu vou criar um ID aqui. Então este é o primeiro e este é o segundo. Agora, se eu voltar e eu posso especificar que para o ID primeiro, eu preciso que a cor de fundo seja igual para ocorrer. E para a identificação. Segundo, sinto muito, preciso me levantar, por exemplo. Eu escrevi primeiro antes. Então esta cor de fundo para ser igual a. Vamos voltar e fazer isso. Vou pegar o primeiro com a cor de fundo da Alcoa e o segundo com a cor de fundo do vermelho. Então, como podem ver, podemos usar ideias. E F, Por exemplo, eu quero que ambos sejam aqua. Eu posso simplesmente dizer que eu quero que um seja igual a aqua. No entanto, se eu também tenho alguns outros títulos, e eu quero apenas estes dois background-color de aquático e simplesmente adicionar aqui. O segundo. E, claro, preciso adicionar a hashtag. Agora vamos apagar isso, voltar e digamos que eu tenho aqui a cor vermelha. No entanto, agora eu executar isso, eu vou obter aquífero ambos com eles uma vez que o ID é priorizado sobre o tipo de componentes. Então, primeiro de tudo, nós temos o id, então nós temos o tipo. Agora, se eu também tiver outro rumo aqui. Então vamos supor que eu tenho um título dentro depois do nosso parágrafo e que diz o fim. E eu não especifiquei nenhuma idéia para a venda. E se eu ir em frente e correr, eu vou obter a cor de fundo padrão de amigos, já que eu especifiquei que para cada ID, para cada cabeçalho, a cor de fundo deve ser lida a menos que eu tenha primeiro ou segundo. E, neste caso, a cor de fundo será uma citação. Agora também temos algo que é chamado de classe. E neste caso, sempre que criamos uma classe, ela é semelhante à ideia, mas geralmente é usada para mais de um componente. E neste caso, deixe-me apenas usá-lo para supor que eu tenho um p e eu quero especificar a classe para ser igual a cores. E neste caso, se eu quiser acessar este parágrafo e meu CSS, eu posso usar o operador ponto e seguido pelo da classe e o nome da ampulheta é colorido e dizer, deixe-me verificar suas cores. E, claro, posso mudar a cor de fundo como de costume. Então cor de fundo seria igual a C verde, vamos ver. E de volta Ramdas, vou mudar a cor de fundo usando a classe. Então podemos usar vidro ou ID ou até mesmo usar o componente inteiro apenas chamando-o. Por exemplo, adicionando 11 cada para serem respondidas. Então esta foi apenas uma idéia geral sobre nosso arquivo CSS. E este arquivo podemos adicionar qualquer coisa que quisermos em relação a este tempo de nossos componentes. E neste caso, podemos simplificar as coisas em nosso código HTML. Já que vamos escrever a maior parte do nosso código aqui, não queremos adicionar o estilo e torná-los mais complicados e descrever. Nós podemos adicioná-los e podemos realmente criá-los em nosso arquivo CSS e apenas vinculá-los usando esta folha de estilo relação link. E hiperreferência deve ser o nosso arquivo que CSS. E isso é basicamente para, este vídeo, é apenas um vídeo introdutório de como vincular nosso arquivo, nosso arquivo CSS, ao nosso arquivo HTML. E como dissemos, podemos fazer tantas coisas. Estamos com nosso arquivo CSS, mas por enquanto vamos ficar com isso. Vejo vocês no próximo vídeo. 15. Tipos de entrada: Agora vamos discutir os tipos de MBA. Então vamos supor que queremos um nome do usuário. E neste caso, precisamos de uma caixa onde o usuário possa colocar ou adicionar seu nome. E neste caso, se quisermos criar esta caixa, precisamos da tag de formulário. Então, se eu escrever formado aqui e pressionar Enter, um formulário com uma ação vai acontecer. E veremos o que podemos fazer com ele em um minuto. Mas, por enquanto, a ação não será nada. Vamos apenas digitar nosso nome e clicar na caixa. Ou o consultor se você quiser criar uma entrada quatro sub-redes. Então deixe-me demonstrar esta forma. Então, em primeiro lugar, precisamos criar nosso rótulo. E neste caso, deixe-me apenas nomear o nome. Então este é o FirstName e dentro da minha gravadora pelo Dr. Primeiro Nome. E depois de criar nosso rótulo, precisamos criar nossa entrada. Então agora esta entrada será do tipo texto. E, claro, deixe-me apenas tentar, minha opinião aqui. E deixe-me apenas criar um ID para mais tarde. Então a idéia será, então este é FirstName, então um caminho de imagem. E é claro que posso criar um objetivo para a minha opinião. E neste caso, eu também nomeio-caminho. Agora, se eu quiser pular a linha como de costume, podemos usar o DBR apenas para pular a linha. Agora, deixe-me abrir isto e ver o que aconteceu aqui. Então, se criarmos isso, vamos obter o nosso FirstName. Isso é adiado com apenas criado e seguido por nossa entrada. Aqui podemos acrescentar algo. Por exemplo, acrescento Hadi. Agora nada vai acontecer porque não adicionamos uma ação. E nós não vamos adicionar uma ação neste vídeo, já que estamos apenas aprendendo sobre como criar nossas entradas e como estilizá-las. Agora vamos voltar aqui para o nosso código e vamos adicionar outro rótulo. Neste caso, permitam-me apenas saltar uma linha aqui também para melhor a ver. E claro que eu preciso de um rótulo, eu nome e sobrenome, então nome L. E então eu preciso digitar o sobrenome. Claro, a entrada será do tipo texto também chamado o ID para ser igual a lname. E, em seguida, é claro, o nome será também escolher para ser o mesmo que o ID. E, claro, pular a linha, voltar e atualizar. E como podemos ver, agora temos FirstName seguido por suas marcas, e sobrenome seguido por Sparks. Agora, desde que aqui eu não adicionei. Ele, apenas adicionado e atualizar. Então podemos ver que agora temos duas caixas. Temos duas entradas. Podemos adicionar o nosso primeiro e último nome. E neste caso, podemos querer adicionar a parte inferior ou a entrada enviar. E neste caso, sempre que pressionarmos o envio, ele nos levará, nos levará para outro lugar. Agora, como dissemos neste vídeo, vamos apenas discutir como criar essas entradas. Então, se eu voltar aqui, posso criar outra entrada. No entanto, desta vez o tipo não é texto. Nós temos um HTML fez enviar e, claro, o nome desvalorizar, eu sinto muito. Posso acrescentar um dedicado a ser Submeter. Agora, se eu voltar e atualizar, eu posso ver que eu tenho aqui a entrada enviar. Então, sempre que eu pressionar o envio, ele vai me levar para outro lugar. Por exemplo, podemos querer adicionar esse nome e sobrenome juntos e em uma palavra, em uma frase, e então apenas alugado para o usuário. Por exemplo, vamos dizer bem-vindos. Digamos que eu entre 30 e unidades. Neste caso, sempre que eu pressionar enviar, ele irá gerar uma carta de boas-vindas dizendo que bem-vindo teve anos. Então este é um exemplo de como podemos usar isso. No entanto, precisamos adicionar a ação de forma antiga. E, por enquanto, vamos continuar a criar estes. Agora, vamos supor que temos um nome de usuário e uma senha. E neste caso, queremos que o usuário insira sua senha como um campo de senha. Então podemos pedir a ele para digitar a senha como um texto. Uma vez que a senha deve ser naziismo. E para fazer isso, podemos criar rótulo no início, e este rótulo será o nosso nome de usuário. E então pergunte o nome de usuário. E, claro, adicione nossa entrada. Dentro de nossa entrada, temos o tipo a ser tributado, uma vez que estamos adicionando o nome de usuário no início. E se eu lhes pedisse para antagonizarem uma mensagem, preciso pedir-lhe para introduzir a palavra-passe agora. Então o rótulo agora será Basswood. Deixe-me apenas uma imagem B e senha. Então, é claro, eu deveria adicionar a entrada e o tempo poderia ser senha. Agora, se eu voltar aqui e atualizar, ver que temos nome de usuário e senha. No entanto, eu posso escrever aqui meu nome de usuário e senha será assim. Então temos tela preta, podemos ver o que estou escrevendo agora. Então isso é basicamente para a senha, e é assim que podemos criar o campo de senha. Então, como podemos ver, está escrito como círculos negros. Agora, vamos passar para outro tipo de entrada, e este é o tipo de rádio. E neste caso, por exemplo, eu tenho três tipos. Digamos que eu queira perguntar pelo sexo. Neste caso, eu posso digitar masculino, feminino, ou outro. Então, para fazer isso, deixe-me voltar. E dentro de nossa forma, podemos criar nossa entrada para ser radial em vez de texto. E então, claro, eu posso adicionar o nosso rótulo. Assim, o rótulo será seu nome, ele Mail, por exemplo. E eu pergunto se este é um macho, então salta alinhado. E, claro, a amplitude será mais uma vez rádio. E deixem-me criar o nosso trabalho. Então o rótulo será que ele fez neste caso feminino e então pulou a linha. E, claro, eu também posso adicionar a entrada 11 vez. E neste caso, a entrada também será do tipo rádio. E depois temos a nossa gravadora. Então o rótulo será agora outro. E podemos escrever no ano deles. Agora, se eu voltar para o meu navegador aqui, e, assim, podemos ver que temos masculino, feminino ou outro, e eu posso escolher um ou mais. E neste caso eu posso perguntar antes de criar estes quatro, eu posso perguntar um, digamos três anos. E qual é o seu sexo? E depois disso, deixe-me apenas deprimir. E como podemos ver, podemos escolher a partir desta lista. Então podemos escolher um homem, uma mulher ou outra. E como antes, é claro que eu posso adicionar a entrada de envio para que eu possa criar minha entrada para ser enviado neste caso. E se eu voltar a atualizar, podemos ver que temos a submissão. E se eu apresentar submeter deve me levar ou gerar outra coisa. Agora, vamos passar para outro tipo de entrada. E, neste caso, serão as caixas de seleção. Assim, a caixa de seleção tipo de entrada, definida como o nome indica uma caixa de seleção. Então, para redes P8, deixe-me apenas excluir isso. E em primeiro lugar, eu crio minha entrada. E o tipo pode ser, como dissemos, verificar bugs. E, claro, deixe-me trabalhar. Por exemplo, vamos falar sobre laptops. Então L1, assim saltar sobre será e a entrada é segunda entrada será também do tipo caixa de seleção e o rótulo será L2. Neste caso, podemos adicionar, por exemplo, matemática. E se eu ir em frente agora e criar nossa entrada enviar. Então este é do tipo enviar e deixe-me voltar, atualizar. E como podem ver, temos HB NMAC. Desculpe, esta é a pergunta para o outro. Para os, como dissemos, os botões de rádio. Mas, por enquanto, deixe-me deletar isso e vamos voltar, atualizar. Como podemos ver, temos HB e Mac. E eu esqueci de adicionar algumas linhas aqui. Então podemos adicionar uma linha aqui. E aqui. Agora volte, atualize. Podemos ver que temos HB, Matt e enviar, para que possamos escolher um ou mais. E então sempre que pressionarmos enviar, o que nos levará como reinicializado para outro lugar. Agora, vamos voltar aqui e discutir o botão de entrada e como podemos trabalhar com ele. Então, se excluirmos isso dentro do nosso formulário, sempre que queremos criar botão put, botão, nós realmente não precisamos desta fórmula. Então eu posso criar a entrada, e isso será do tipo botão. E eu posso escolher que Onclick Alertar alguma coisa. Então, neste caso, sempre que clicarmos nisso, ele alertará Olá. E agora eu volto aqui. E como você pode ver, nós temos algo, desculpe, isso é o que devemos chegar e agora o valor será, eu não posso subir, por exemplo, um clique em mim. Então clique em mim. E agora vamos voltar e fazer isso. Então, atualize. E como você pode ver, nós temos o botão Clique em mim. E sempre que eu pressiono para gerar isso, por exemplo, este alerta. E diz “olá”. Agora, se eu pressionar OK, eu posso voltar. E sempre que eu digitar nele ou eu pressioná-lo, ele irá gerar este alerta dizendo que esta página diz, e a mensagem que eu vou enviar para o usuário. Vamos voltar ao nosso código e falar sobre o campo numérico. E este tipo de entrada é número e define o campo de entrada numérico. Então, podemos usar os atributos mínimo e máximo para adicionar restrição numérica e o campo de entrada. Então, por exemplo, se eu quiser que o usuário adicione uma quantidade, por exemplo, e eu posso querer especificá-la entre 110. Posso usar os atributos min e max para garantir que o usuário esteja adicionando o valor correto ou o valor dentro do domínio específico. Então, agora vamos criar nosso telefone. Então aqui temos quatro. Dentro deste cone. Podemos criar o nosso rótulo. E este rótulo será eu limitar a quantidade por enquanto. E, claro, a nossa quantidade. Será entre, como dissemos, 110. E então eu posso criar nossa entrada. A entrada será do tipo número, como dissemos. E eu posso usar o mínimo. Assim, o mínimo será igual a um e o máximo será igual 210 neste caso. Agora, deixe-me apenas criar nosso tipo de entrada enviar e saltar alinhados aqui. Agora volte, atualize. E como podemos ver, temos uma quantidade entre 110. Então podemos usar esses cursores ou, como podemos ver, se eu chegar a dez, não mudará mais desde nosso carimbo de número máximo. Agora, se eu apresentar Submetido deve me levar para outro lugar. No entanto, então agora não adicionamos nosso telefone, lembre-se. Mas por agora, por exemplo, se eu pedisse 44 e pressionar em submeter, isso vai gerar este dizendo que o valor deve ser menor ou igual a dez. E se eu escolher menos cinco e presente submetido para dizer que o valor deve ser maior ou igual a um. Então isso é basicamente para o campo numérico. E como podemos ver, temos tantos tipos de entrada e discutiremos alguns deles mais tarde também no próximo vídeo. 16. Tipos de entrada 2: Agora vamos continuar nossa discussão sobre quantidade ou tipo de entrada numérica. E neste caso, dissemos que podemos adicionar o mínimo e o máximo. No entanto, também podemos adicionar esta guia e o valor inicial. Então, por exemplo, se eu voltar ao meu código e depois de adicionar o mínimo e máximo, deixe-me adicionar o máximo a ser caçado. O mínimo será 0. E posso adicionar esta etiqueta neste caso. Então o passo, por exemplo, eu escolho entrar no passo de dez. Neste caso, o usuário será obrigado a inserir 0102030 e assim por diante até que ele ou ela atinja o número 100, que é o máximo. E eu também posso adicionar o valor e w, por exemplo, seria igual a 20 neste caso. Então, se eu voltar aqui, atualizar, então o valor inicial será 20 acima Eu posso adicionar dez e nada vai acontecer. Vai voltar para 20. Se eu adicionar 30, digamos que ele também vai voltar para 20. E, claro, se eu adicionar um 150, ele vai dizer que o valor deve ser menor ou igual a 100. Então, como podemos ver, o mínimo e o máximo ainda são aplicados. No entanto, o valor será sempre igual a 20. E neste caso, deixe-me apenas excluir esse valor e manter o tamanho do passo. E vamos voltar e fresco. Não temos nada aqui. No entanto, se eu inserir quatro, insira um valor válido. Os dois valores adicionados mais próximos são 010. Então, como dissemos, escolhemos o tamanho do passo para ser igual a dez. E neste caso devemos ficar para escolher algo que é múltiplo de benzo. Se eu escolher dez, está correto. Quando t também está correto, e assim por diante até atingir o 100. E também será correto. Então é isso para os passos numéricos. Agora vamos passar para um campo de data. E, por exemplo, se eu quiser pedir ao usuário para inserir seu aniversário, eu posso usar o tipo de data de aniversário neste caso. Então, se eu voltar e excluir isso para que eu possa criar o rótulo no início. O testamento seria do tipo, vamos nomeá-lo. O aniversário é neste caso. E eu adicionarei aniversário. E é claro que preciso criar minha opinião. No entanto, o tipo será, neste caso, data, e eu posso saltar alinhado e criar minha entrada enviar como de costume. E agora vamos voltar ao nosso navegador, atualizar. E como você pode ver, nós temos o aniversário e seguido pelo tipo de data. E eu preciso entrar aqui para a data e mês e, claro, o ano, digamos 1000 neste caso. E se eu pressionar “Submeter “, deve gerar algo. E agora vamos supor que queremos adicionar algumas restrições. E podemos adicionar o mínimo e máximo. Por exemplo, se eu voltar ao meu código e dentro do rótulo, digamos que o rótulo aqui. Posso adicionar o aniversário. No entanto, posso pedir-lhe para introduzir uma data antes, por exemplo, poof antes de 2 mil. E, claro, no meu tipo de entrada, o máximo estará aqui. Então max será igual a, digamos 199. E claro que posso adicionar o 1212. Claro, sinto muito, E, podemos adicionar 30. E vamos voltar ao nosso código. E como podemos ver, até que eu fiz antes de 2 mil. Então, se eu adicionar 1000 aqui e 7572001, clique em Enviar. O valor deve ser 3012 ou anterior, 11999 ou anterior. Agora, vamos supor que eu queira inserir uma data depois de 2 mil. Então, neste caso, posso pedir ao usuário para inserir uma data após 2 mil e o mínimo neste caso estará aqui. Assim mínimo será igual a, Eu posso escolher ser 2001 para deixar dizer. E neste caso, vamos voltar ao nosso navegador e ver o que aconteceu. Então, agora, se eu entrar o que, 1999 apresentar propostas interbedded o campo. Ok, eu sinto muito. Aqui precisamos adicionar algo, digamos por phi. E como podemos ver, valor deve ser a data específica para cem, dez centos ou. E neste caso, vamos apenas mudar este ano 2001. E ele deve funcionar corretamente e gerar ou tomador nos leva para outra página. E isso é basicamente para a restrição do campo de data. Agora, vamos supor que queremos mostrar uma cor. E, neste caso, podemos usar a cor do tipo de entrada. E vamos voltar ao nosso código, como de costume. Dentro dos nossos quatro. Vamos criar o nosso rótulo. E digamos que para este rótulo estará usando a cor. E vamos nomeá-lo, selecione sua cor. E neste caso, o usuário deve selecionar sua cor. E, claro, o tipo de entrada será colorido. E deixe-me apenas criar nosso envio de entrada. Então, envie aqui e, em seguida, volte, atualize. E como podemos ver, selecionamos a cor e a cor preta é a padrão. No entanto, podemos alterar isso e nosso código e lado, nosso tipo de entrada. Podemos adicionar nosso valor para ser igual a uma cor específica. E este é o código para ratos ou teoria ff 0-0. 0. Agora vamos voltar ao nosso navegador e atualizar. E como podemos ver agora, a cor que está à nossa frente é a cor vermelha. Se eu clicar nele, ele irá gerar esta página ou esta caixa. E eu posso escolher a cor que eu quiser. E depois disso, posso apresentá-lo como de costume. E é isso para o seletor de cores. Agora também podemos criar campo organizar. E neste exemplo, campo de derange será exibido como um controle deslizante. Então, por exemplo, podemos pagar algo semelhante ao volume aqui. Então, dentro do nosso volume, podemos ver que podemos mover para a direita ou para a esquerda e aumentar ou diminuir o nosso volume. E nós podemos realmente criar isso usando HTML. E então vamos voltar ao nosso código aqui e começar com ele. Então, em vez de escrever a cor rotulada, criarei nosso rótulo e darei o nome de volume. E então vamos adicionar o volume aqui. Então este é o volume entre 0. E, claro, eu preciso adicionar minha opinião. Neste caso, a entrada será de tipo intervalo, e eu posso adicionar o mínimo e máximo como de costume. Então os homens serão iguais a 0 e o máximo será igual a 100. E neste caso, então é isso. Vamos apenas criar o nosso, Por exemplo, o botão enviar. Então envie e volte, atualize. E como você pode ver, agora temos nosso volume entre 0 e, por padrão, ele está no meio em 15. Agora eu posso rolar para frente e para trás e escolher o volume que eu quero e, em seguida, enviado. Então é isso para o campo de intervalo. Também podemos adicionar um campo de monge, falando de campos. Ele permite que o usuário selecione um mês e o ano. E o mês não é suportado no Firefox Safari ou Internet Explorer 11 ou anterior. Portanto, certifique-se de que você tem algo mais e está usando, por exemplo, aqui, o Google Chrome. E vamos voltar ao nosso código aqui. Então, para fazer isso, podemos simplesmente criar nossa etiqueta para ser um aniversário. Para que possamos escolher o mês e o ano. Então aqui, aniversário, temos mês e ano. E, claro, nosso volume será, vamos mudá-lo para o mês de aniversário. Então eu simplesmente escrevo demanda. E agora podemos criar nossa entrada. Assim, a entrada seria tipo mês. E, claro, eu posso adicionar outra entrada para enviar. Então este é enviar e saltou para outra linha. Volte ao nosso código, atualize. E como podemos ver aqui, podemos escolher um mês específico, janeiro, junho, julho e fevereiro. Posso escolher o que eu quiser. E o ano. 2 mil. E isso é basicamente para o mês e ano e como podemos escolher um mês e ano específicos dentro do nosso campo de meses. Agora, vamos passar para outros índices importantes para exibir um controle de entrada fraco. E esta semana de entrada também não é suportada no Firefox, Safari e Internet Explorer 11 ou anterior. Para ter certeza de que se você quiser usar essa entrada, você precisa ter algo mais instalado. Agora vamos voltar ao nosso código e criar nosso rótulo. Neste caso, deixe-me apagar isto. E o rótulo será fraco e selecionará fraco, e então criará nossa entrada. E, neste caso, nossa entrada será do tipo fraca. E agora, se eu voltar ao meu navegador, atualize, então a semana será a três. E o, eu posso escolher o ano que eu quero daqui. E então, claro, clique em enviar. E eu também posso usar o ano civil. Então, como você pode ver, você pode escolher qualquer fraco e qualquer ano que fomos do nosso calendário. E se eu quiser escolher esta semana, eu posso simplesmente clicar sobre isso e ele vai gerar para mim a minha semana. Agora vamos para outro exemplo e criar um controle de entrada de tempo. Assim, este tempo nos permite selecionar um horário sem um fuso horário. E, na verdade, desta vez não é suportado no Safari ou no Internet Explorer 12 ou anterior. Então vamos voltar ao nosso código. E dentro da nossa firma, vamos criar a nossa etiqueta. Ou seja, o tempo e os limites são simplesmente nome no momento e, e pedir ao usuário para selecionar uma hora. E então podemos criar nossa entrada e será do tipo tempo. E, claro, o botão “enviar”. E agora volte, atualize. E como podem ver agora temos o nosso tempo. Então, para quatro e podemos sempre tempo a partir daqui e podemos escolher o que quisermos. Então isso é basicamente para o tempo e colocar o controle. Agora, vamos passar para o campo de e-mail. Então, se quisermos criar um campo de e-mail, eu posso simplesmente criar o rótulo como de costume. E esta etiqueta será para um e-mail. E eu posso pedir ao usuário para entrar como ele fez. Então digite seu e-mail. E, claro, eu preciso criar uma entrada do tipo e-mail neste caso. E, em seguida, saltou alinhado e, finalmente, criar o botão enviar e voltar. Então, como podemos ver agora temos o nosso e-mail e se eu apenas digitar qualquer coisa, ele vai dizer que estes incluem e adicionar no endereço de e-mail. A Kdf está perdendo o anúncio. Então eu posso adicionar exemplo no exemplo, ponto com. E, claro, se eu me submeti, ele vai funcionar muito bem e gerar outra coisa ou me levar para outro lugar. Agora, a última coisa que vamos discutir é o campo de busca. E ele realmente se comporta como um campo de pesquisa regular ou campo de texto. Então, para fazer isso, podemos simplesmente criar equipamentos. Então isso é para a pesquisa e pesquisa, Google, digamos. E depois disso eu posso criar minha entrada de pesquisa de tipo e agora saltar alinhado. Se voltarmos e nos atualizarmos, vamos fazer a busca. Eu posso inserir o que eu quiser e, em seguida, enviar para procurar por ele ou fazer o que eu quiser com ele. E isso é para os tipos de entrada. Temos tantos tipos de entrada e você pode procurá-los. E este é o fim para este vídeo. Vejo-te no próximo. 17. Projeto: Em relação à parte do projeto, você vai criar um formulário de viagem. E este formulário, você vai pedir ao usuário para inserir seu nome e sobrenome, como você pode ver aqui. Então você vai pedir-lhe para falar um pouco sobre si mesmo ou sobre si mesma. Em seguida, para declarar a razão oferece cabo, por exemplo, para visitar a família ou amigos, quer para estudar no exterior ou para fazer trabalho Ferrante ou trabalho de longo prazo. E você também pode adicionar outros See I não adicionou, mas você sempre pode adicionar outros. Pode haver outra razão. E, claro, o destino. Então aqui eu adicionei cinco destinos, França, Itália, América, Grã-Bretanha e Espanha. E depois disso, vamos pressionar a submissão, e ele deve ser submetido. Então este é o fim para este projeto. Acho que todas as ferramentas estão disponíveis para você. Nos vídeos anteriores, podemos apenas voltar alguns campos que você perdeu alguma coisa. Nós aprendemos como criar a entrada e como preenchê-la. Podemos usar o preenchimento aqui, e também aprendemos como escolher entre entradas e, claro, como enviar. Então, eles estão todos disponíveis nos vídeos anteriores. Então você pode ir até eles sempre que quiser. E isto não é para este projecto. Espero que goste. E não se esqueça de adicioná-lo à seção do projeto para que eu possa olhar para ele e dar meu feedback. 18. Recapitulação: Parabéns por terminar esta aula. Você acabou de completar a classe HTML e CSS. E vamos fazer uma breve recapitulação sobre o que cobrimos? Em primeiro lugar, falamos sobre alguns conceitos básicos e sintaxe. Depois passamos para o estilo e a formatação. E também falamos sobre tabelas, listas e imagens. E, claro, aprendemos como vincular nosso CSS ao nosso arquivo HTML. E este é o fim para esta aula. Espero que tenha sido benéfico. E muito obrigado por se matricular nesta aula. E vejo-te em breve.