O desenvolvedor definitivo de HTML — aprenda a programar com HTML

1. Introdução: Olá e bem-vindo ao derradeiro curso para desenvolvedores de HTML. Meu nome é Caleb contando, e eu vou ser seu instrutor durante todo o curso. Felizmente para você, este curso é apenas algumas horas. Então você não tem que ouvir minha voz por muito tempo. Vou passar rapidamente por cima do que este curso é um cinto. O que você vai entrar nele, como ele funciona e como tirar o máximo proveito dele. E eu vou te dar uma pequena informação sobre quem eu sou. Em primeiro lugar, mais uma vez. Meu nome é Caleb Tallinn. Eu sou um desenvolvedor da Web de pilha completa sênior. Nasceu em 1989 e aos 10 anos de idade. Em 1999 eu fiz meu primeiro site por tempo. Eu tinha 14 anos. Eu estava fazendo trabalho freelance para as pessoas. Nos nove anos seguintes, passei trabalhando principalmente como freelancer. Se eu visse o serviço na Internet que eu gostei que eu queria usar. Mas eu pensei que poderia fazer melhor. Eu não poderia fazer melhor. Poderia ser mais valioso ou de pessoas que eu não iria recriá-lo. Eu poderia fazer tudo isso antes de me formar no colegial. Não só fiz uma quantidade decente de engraçado, mas criei bem mais de 1000 sites no meu tempo. Pouco depois disso, pensei em intensificar o meu jogo e comecei uma empresa. Aquela empresa tinha cerca de um ano e meio quando a vendi. Desde então, renunciei ao cargo de CEO, e assumi um cargo mais de diretor de tecnologia. Isso significa que estou no comando da tecnologia. Os servidores, essa equipe de desenvolvimento, a experiência do usuário, a interface do usuário, tudo o que o código toca. Tenho um pouco a ver com a empresa. Deixe-o trabalhar para em 2015 entre abril e dezembro, fez quase US $900.000. Eu era um diretor de tecnologia daquela empresa, e o serviço principal foi o software que criamos para as pessoas. Isso é um pouco sobre mim. Vamos falar sobre este curso. Este curso, como você sabe, é dividido em dois módulos primários. Há o módulo básico, que facilita você em HTML, familiariza-o com ele e alguns dos conceitos por trás dele. E depois há mais rastro de idade avançada. Esse é o módulo número dois, onde você vai encontrar partes mais avançadas de HTML, incluindo um monte de HTML cinco e X html, e você vai aprender sobre tudo isso neste curso. No final de cada módulo é um questionário. O primeiro teste do módulo é de cerca de 70 perguntas, e se acabarmos adicionando mais vídeos ao primeiro módulo, haverá mais perguntas no primeiro módulo. Questionário. O Módulo de Tese tem um questionário muito mais extenso sobre 100 20 perguntas, e cada teste passa apenas sobre o módulo atual. Então, no total, há quase 200 perguntas que você vai ser testado no final de quase todos os vídeos. Há também uma tarefa. Essa tarefa vai ser algo muito direto, como a direita fora dos elementos, como a direita fora dos elementos, um pouco de prática com os atributos, assim por diante e assim por diante, ou a tarefa pode ser criar página inteira, criar formulário inteiro, enviar o formulário, aprendeu a teoria por trás dele, e que tudo depende do que o vídeo é sobre eo que os vídeos anteriores eram sobre. Agora, para tirar o máximo proveito deste curso, você vai querer assistir ao vídeo prestar muita atenção ao que está acontecendo. Possivelmente tomar notas se você gosta de tomar notas, eu sugiro fortemente tomar notas e fazer a tarefa no final de cada vídeo. Mesmo que esteja familiarizado com isso, faça a tarefa um pouco mais. A prática nunca machucou ninguém. As tarefas são geralmente bastante curtas, por isso não vai demorar muito se você já está familiarizado com ele. Agora. Uma coisa que você pode ter notado sobre este curso particular que você não viu em muitos outros cursos é que este é puramente HTML, onde muitos outros cursos são HTML e CSS ou HTML, CSS e JavaScript e apenas muito. Este é um curso altamente especializado e, no final deste curso, você será um profissional. Quando se trata de escrever HTML, você não será medíocre. Você não será aceitável ou tudo bem, você será um profissional quando se trata de escrever HTML. Na minha opinião, você aproveitará ao máximo este curso passando por cada vídeo um por um, fazendo a tarefa, fazendo o dever de casa, fazendo seus questionários e apenas praticando. Como você provavelmente já adivinhou, este curso é bastante compacto. Não há nenhum penugem mágico. Não há muito silêncio morto. Vai direto ao ponto. A idéia por trás de fazer um curso tão compacto é que quanto menos tempo você gastar assistindo vídeos, mais tempo você pode gastar realmente praticando o que você aprendeu com isso dito, eu quero enviar uma enorme recepção para o HTML final Curso de desenvolvedor e vamos transformá-lo em um desenvolvedor profissional. 2. O que é HTML?: O que é HTML? HTML significa linguagem de marcação de hipertexto. É a estrutura por trás de cada página da Web em que você já esteve, e é responsável pelos parágrafos, pelos vídeos, pelas imagens, pelos forints. O ousado itálico sublinhou tudo isso. Ele é responsável por cada parte que você vê em uma página. Agora não tem nada a ver com o estilo real, mas mais do template ing. Então, se você vir uma coluna à esquerda da página à direita da página, talvez as colunas Arnold. Mas há uma barra de navegação no topo da página, só isso. HTML. É o esqueleto de cada página da Web. 3. Editores: para escrever HTML e você precisa o que é chamado de editor e editor de HTML pode ser um programa muito básico , como No pad para o PC ou texto nele para o Mac. Mas há outros programas lá fora um texto tão sublime, que você pode ver aqui. Vá para o sublime tex dot com, e você pode obter uma cópia disso. Alternativamente, você pode usar nenhum pad plus, que é apenas nenhum traço pad mais dash plus dot org. Mas no final, você não precisa escrever qualquer HTML com um editor avançado, você pode simplesmente usar um editor de texto básico, e isso funcionará perfeitamente. Aqui está um exemplo de nenhum pad plus plus e nós vamos escrever alguns HTML agora. Vamos pular um monte de partes importantes do HTML, e eu vou mostrar a vocês uma demonstração rápida de como HTML é. Então aqui está um parágrafo e você vai notar quando eu digitar barra p e vamos falar sobre elementos em uma lição futura. Só estou te dando uma demonstração rápida. Nenhum bloco mais tenta me informar. Um bom editor vai tentar encher você e seus editores lá fora que irá ajudá-lo drasticamente quando se trata de preencher elementos, fechar tags de elementos para você e apenas ajudá-lo a programar seu site ainda mais rápido. Então, para isso, ele está me dizendo que é um parágrafo, então eu acabei de fechar a etiqueta. Cada editor é um pouco diferente. Todos eles têm seus prós e seus contras e, em última análise, cabe a você qual editor você quer usar. Mas por que estavam escrevendo HTML? Você não precisa de um editor muito chique. Você só precisa de algo básico que possa escrever um arquivo de texto reto como este e salvá-lo como um ponto html. Então eu vou salvar-nos apenas como página um ponto html, a senhora ponto txt inferior clique em salvar. E agora posso abrir isso no meu navegador. É agora se eu encontrar onde o arquivo foi salvo, clique com o botão direito e abra com Escolha sua escolha de navegador. Firefox Chrome Internet Explorer. Também tenho óperas instaladas aqui. Se eu usar o Google Chrome, então aqui está um exemplo de como isso vai acabar, diz Aqui está um parágrafo e eu vou apenas copiar isso muito rápido. Eu salvei o arquivo e se eu atualizar minha página, aqui está um segundo parágrafo. Sabe, se há uma quebra significativa de linha, há uma diferença entre as duas linhas aqui. Isso é o que um parágrafo é, e vamos obter mais em parágrafos e todos esses diferentes elementos do que tudo isso realmente significa no futuro. Mas agora, ele queria mostrar como você pode escrever HTML facilmente com qualquer editor. Então, por enquanto, o que eu gostaria que você fizesse é encontrar um editor que você possa gostar, seja imposto sublime, sem pad plus text adicionado ou mesmo se você só quiser usar nenhum pad na Microsoft por si só . Sua tarefa para este vídeo é encontrar um editor com o qual você sinta que você pode trabalhar novamente. Este exemplo. Eu só usei nenhum pad plus plus, é muito básico, faz o trabalho, mas não sinta que você tem que usar qualquer coisa que eu estou usando agora. 4. Navegadores: um navegador é como você visualiza a Internet é como você visualiza sites, páginas da Web dizer-lhe, Explorar Facebook e Google. É provavelmente como você está vendo este vídeo agora, e há dezenas, se não centenas, de navegadores diferentes por aí. Mas, na verdade, há seis navegadores primários que eles estão indo da esquerda para a direita. Temos Microsoft Internet Explorer, Microsoft nova versão do Internet Explorer chamado Edge. Então temos Mozilla Firefox, Google Chrome, Apple Safari e ópera. Agora, de longe, o navegador mais popular na Internet é o Google Chrome. O segundo lugar tende a ser demitido. Fox Terceiro lugar tende a ser safari, depois Internet Explorer. Uma vantagem na ópera. Sabia que essas percentagens são tão baixas? Não importa neste momento. Agora, Edge pode ser mais popular no futuro. É relativamente novo, saiu com o Windows 10, mas hoje cerca de metade de todos no mundo usa o Google Chrome . Agora, como desenvolvedor da Web, o navegador importa. Cada navegador gerencia HTML, CSS e JavaScript um pouco diferente. Cada um tem seu próprio conjunto de regras, que eles querem cumprir, e tende a haver um padrão por trás deles, mas os padrões são um pouco mais antigos. Por exemplo, se você quisesse fazer algo em negrito, você usaria a mesma tag HTML negrito e todos os navegadores, porque esse é um elemento mais antigo. Mas a partir de agora, se você quisesse criar uma tela e esse é um elemento HTML cinco que falará no futuro, versões antigas desses navegadores não lidarão com isso. Assim, você sempre quer ter seu navegador atualizado. Como um desenvolvedor da Web, você terá a garantia de correr em um problema onde um de seus usuários ou um de seus clientes pagantes você não pode usar seu site porque algo não está funcionando. provável que o JavaScript esteja desativado ou que eles estejam usando o Internet Explorer 6 em vez do Microsoft Edge ou do Internet Explorer. Seja qual for a versão mais recente, talvez eles estejam usando um laptop muito antigo, e ele esteja executando uma versão antiga do safari. Bem, a diferença entre, por exemplo, Google Chrome um e o Google Chrome 42 é significativa, e à medida que a tecnologia evolui, o navegador também evolui. E à medida que o navegador evolui, isso significa que temos acesso a melhores funções, melhores recursos, melhores animações e Morrell. A menta tornar-se padronizado, então basta notar que avançar. Eventualmente, esse problema acontecerá com você. Acontece com cada um de nós e que o navegador que alguém está usando desempenha um papel importante. A maioria dos desenvolvedores não gosta de criar para o Internet Explorer porque o Internet Explorer gosta jogar com regras diferentes das outras pessoas, enquanto todos os outros se dão bem até certo ponto. Então, quando você está construindo um site, seja usando apenas HTML ou uma série de idiomas diferentes, você vai querer testar suas páginas em todos os diferentes navegadores que você pode filmar para seis em seis navegadores. Teste seu site no Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome Safari, bem como ópera e veja se ele funciona da maneira que você queria. De vez em quando, você vai tropeçar em um elemento particular que não funciona da maneira que deveria, e isso se torna um grande problema. Então você terá que contornar que, se você construir um site ou serviço ou um aplicativo, e ele funciona em todos os seis navegadores, as chances são de que quando alguém vem até você e diz: “ Ei, Ei, seu site não funciona para me, é provavelmente por causa do uso de uma versão antiga do navegador ou eles têm o JavaScript desativado. Falaremos mais sobre JavaScript no futuro, mas agora vamos ficar com HTML e ver qualquer HTML. Precisamos de um desses seis navegadores. Agora eu prefiro cromo. Muitas pessoas preferem o Firefox. Muitos usuários de Mac vão ficar com safari. Esses tendem a ser os Três Grandes nessa ordem. Sua tarefa para este vídeo é baixar e instalar todos os seis navegadores. Não, dependendo do seu computador. Todos os 6 podem não estar disponíveis para você, então tente obter o máximo que você puder como um mínimo nu. Tente obter o Internet Explorer, Firefox, Firefox, Chrome Safari e ópera. Se não conseguir obter o Microsoft Edge porque está num Mac mais antigo ou num sistema de janelas mais antigo, tudo bem. Mas baixe e instale o máximo que puder 5. Elementos: H E páginas de e-mail são compostas de elementos ou, por vezes, também referido como uma tag onde eles têm uma tag inicial em uma tag final. Excepcionalmente algum tipo de conteúdo entre as duas tags. Como exemplo ao vivo, vamos escrever nossa primeira tag aqui, fazer algum espaço extra aqui para nós. Vou mostrar-te como isto funciona. Então nós temos tag HTML, e que vai entre o menor que e maior do que símbolos algum conteúdo no meio. E, em seguida, você fecha a tag HTML com um menos de uma barra. Você notou como estes combinam? Mas este começa com o menos que tag, e este começa com menos de imposto de barra. Isso significa que está fechando agora. Este é um elemento onde pode haver id de conteúdo entre ele. Um grande exemplo disso seria o elemento parágrafo, os elementos negrito, o elemento itálico. Todos eles têm algum tipo de conteúdo entre eles. Então, se quiséssemos colocar algo em itálico, escreveríamos abrindo Eyetech com uma tag de fechamento. Agora temos um tipo diferente de elemento, bem como, e é um elemento auto fechamento. Estes elementos são um pouco diferentes, mas de acordo com as mesmas linhas. Há alguns elementos que não têm conteúdo neles porque eles usam o que são chamados atributos e vamos cobrir atributos em um futuro muito próximo. Um desses exemplos seria os elementos da imagem. Então, para este, teríamos I m g, que é fonte SRC imagem. Colocamos site dot com barra J peg imagem lá e fechamos assim. Portanto, não há tag de imagem de barra. Então, em vez disso, atacamos. Isso se fecha porque você não colocar qualquer conteúdo dentro de uma imagem, exceto para a imagem não, além disso isso nós poderíamos fazer o que é chamado de aninhamento. Podemos colocar elementos HTML dentro de outros elementos HTML e isso irá criar uma forma de hierarquia. A maneira mais fácil de manter sua hierarquia é através do recuo através do recuo. Você vai descobrir que tudo é muito fácil de entender. Então, aqui, vamos fazer um exemplo. Vamos abrir um parágrafo. Ei, eu sou um parágrafo, e neste parágrafo nós vamos fazer algo ousado e então eu fecho tag parágrafo. Então aqui você vê, eu abro o parágrafo fecho um parágrafo dentro dele. Eu tenho mensagens regulares. Eu também tenho outro elemento HTML para tornar este negrito, Então isso irá exibir um parágrafo também. Uma área za Bolden. Não se esqueça que ele precisa ser fechado, embora seja muito importante que se você tiver uma tomada de abertura, você tenha uma etiqueta de fechamento. No caso da imagem, temos a tag de abertura, a tomada de fechamento apenas acontecer de ser parte da tag de abertura original bem. Então é tudo um elemento. Onde é aqui e aqui? Há uma etiqueta de abertura e fechamento. A última coisa a observar aqui é que todas essas tags com minúsculas você não precisa usar HTML minúsculo. Mas tipos de documentos mais rígidos como X html exigem tags HTML minúsculas, e isso é uma padronização para todos Agora, seja em minúsculas ou para cima, caso realmente não importa muito nos dias de hoje. No entanto, manter o padrão geralmente é a melhor abordagem, especialmente, vamos trabalhar com outro desenvolvedor em algum momento. Sua padronização de vida também é ajudá-lo com os motores de busca. Então, quando o Google se deparar com o seu site e procurar certas informações, Google vai ver o HTML como o que temos escrito aqui. Sua tarefa para este vídeo é abrir seu favor, editor, onde não há pad plus, além de sublime nenhum imposto pad em qualquer que seja. E certo, apenas algumas etiquetas. Analisamos as etiquetas em negrito e itálico do parágrafo neste vídeo. Então pratique escrever isso. Abra sua marca de parágrafo. Coloque algum conteúdo entre ele uma ou duas frases e, em seguida, feche-a. Tente aninhar também. Abra um parágrafo. Escreva uma frase, certo, uma frase parcial. Faça uma das letras em negrito, talvez faça uma frase completa. Feche esse parafuso, um fechamento, essa tag de parágrafo e então eu quero que você salve o arquivo e abra no seu navegador, e você pode ver como ele se parece a partir daí. 6. Olá!: quando começamos a falar sobre programação ou codificação de sites, esta tende a ser a primeira lição, e a lição geralmente é chamada Hello World, e nós vamos criar uma primeira página de Olá mundo agora, a fim de criar nosso primeiro Página HTML. Há algumas coisas que temos que fazer, e não vamos entrar em muitas coisas terrivelmente avançadas agora. Nós só queremos criar um modelo de página HTML básico. Então nosso arquivo precisa dizer a qualquer navegador que este é um pitch HTML. Não que esta seja uma página de texto ou PDF que é uma página HTML. A primeira coisa que fazemos é abrir nossa página com a tag HTML. Eu vou fazer algum espaço, e eu vou fechá-lo no final lá. Duas secções em que tens a cabeça. Vou deixar um pouco de espaço aqui e vou fechar essa etiqueta de cabeçalho. E depois há o corpo. Você pode pensar nisso assim. A cabeça é onde o conhecimento sobre a página vai. Então, o ano do título da sua página fez uma descrição. Tudo isso vai cobrir tudo isso. Seus títulos suas descrições. Alguma imagem para compartilhamento social, como no gráfico aberto do Facebook? Vamos cobrir tudo isso mais tarde. Mas o que queremos agora é criar Ah, olá, olá, página do mundo. Então a primeira coisa que vamos escrever é “Olá, mundo”. Agora você pode salvar isso como hello world dot html Salve-o onde quer que você salvou um para ir e encontrar esse arquivo direito Clique em e abra com o navegador que você deseja abri-lo com. Eu vou abri-lo com o Google Chrome e como você pode ver, é este mundo Olá. Isso é tudo o que há para ele. Depois de chegar ao passo, você criou oficialmente sua primeira página HTML. Sua tarefa para este vídeo é criar o modelo que eu criei para você neste vídeo . Essencialmente, apenas copie o que eu lhe dei. Você vai escrever sua tag HTML. Você vai fechá-lo, você vai deixar algum espaço lá dentro e tem uma etiqueta de cabeça e corpo dentro dela. E dentro desse corpo, você quer escrever “Olá mundo”. Deve ser exatamente o mesmo que o meu exemplo 7. Títulos de página: titulando suas páginas HTML tão simples quanto usar um elemento HTML específico. E isso é, é claro, o elemento título no último vídeo. Nós fomos mais sobre a criação de um modelo HTML onde nós aninhamos todo HTML dentro de nossa tag HTML e nós deixamos nosso elemento cabeça vazio. Desta vez não vamos fazer isso. Nós vamos criar um título, e o título desta página vai ser Olá título mundial. Desta forma, podemos ver o que o título realmente é. Antes de salvar este arquivo, vou mostrar a você como ele se parece antes e depois que a tag título é adicionada. Isto é antes de termos a tag título diz olá mundo dot html. É o nome do arquivo que normalmente não é o que queremos. Na verdade, quase todos os cenários que não são o que queremos. Em vez disso, queremos ter um título real aqui, então eu vou ir em frente e salvar isso e, em seguida, atualizar esta página e ele diz Olá título mundial no topo, onde o conteúdo da página permanece o mesmo. O título alterou as alterações para o título de teste. Vou mostrar-lhe que ele muda mais uma vez assim que eu pressionar atualizar e é assim que você muda o título da sua página. Sua tarefa para este vídeo é criar um documento hello world e adicionar o título a ele. Depois de adicionar seu título ao título pode ser chamado como quiser, abra esse arquivo no navegador e observe se o título foi realmente alterado. Se o título foi alterado, você concluiu a tarefa. 8. Doctype: o tipo HTML DOC é o que tecnicamente diz ao navegador que este é um arquivo HTML. Antes nós simplesmente dissemos que este elemento aqui nos diz que a página vai ser HTML, ea maioria dos navegadores pode descobrir isso. No entanto, em alguns casos, isso não é suficiente. Em vez disso, o que queremos dio é que queremos adicionar um elemento acima dele no início, chamado de tipo DOC. Agora começa com um ponto de exclamação, como podem ver aqui. Espaço HTML. Este é o tipo de documento HTML cinco, e esta é a única exceção a essa regra em que todo o seu HTML deve ser minúsculo. Este deve ser maiúscula a maioria dos navegadores. Isso não importa muito, mas novamente, é um problema de padronização. Queremos ter certeza de que todas as páginas são iguais. Se mais páginas podem ser lidas por mais navegadores da mesma maneira, então seu site vai ser visível tumba ou pessoas exatamente da mesma maneira em todo o planeta. Agora, com o doc digite HTML lá. Lembre-se, esse é o tipo de documento HTML 5. Esse é o novo tipo de Doc HTML envelhecido que queremos usar cada vez que tecnicamente diz ao navegador que esta não é página html e dentro do elemento HTML é onde HTML está indo para ir. Eu ia abrir um pouco de espaço perto para trabalharmos no futuro. Era uma regra geral. Todo o seu HTML deve estar dentro deste elemento aqui. Sua tarefa para este vídeo é adicionar em html cinco tipo de doc para sua página Olá mundo existente . Se você ainda não tem uma página Olá mundo, vá em frente e crie uma e certifique-se de que ela tem o símbolo menor que mais um ponto de exclamação . Esse ponto de exclamação é absolutamente vital. 9. Atributos: atributos html, ou apenas que eles atribuem a um determinado elemento. Cada tag HTML ou cada elemento HTML tem atributos diferentes. Que ele pode acessar um atributos é basicamente uma maneira de fornecer informações adicionais sobre um determinado elemento. Eles sempre serão especificados na tag de início. Ou, se há ah, sem tag de início e fim, é apenas uma tag individual. Ele será encontrado lá também, e eles vêm em pares de valor de nome. O primeiro 1 que queremos olhar é os atributos de linguagem, e este pertence ao HTML. Então, quando adicionamos Lang é igual a e traça-nos, estamos dizendo que o idioma que é os atributos é igual ao Inglês. Traga-nos. Isso é inglês americano. Agora que um, na maior parte, é realmente usado apenas no elemento HTML. Mas há outros atributos disponíveis para elementos muito diferentes, e há alguns atributos globais também. Ah, atributos globais é um atributo que você pode usar em praticamente qualquer tag. Então, se nós apenas adicionar um parágrafo aqui, separar algum conteúdo e vamos adicionar mais um parágrafo aqui, isso tem um título. Agora este parágrafo vai ter um atributo chamado Title é igual a um título de exemplo. Se salvarmos isso e abrirmos isso em seu navegador aqui vemos que parece basicamente apenas Olá Mundo em outro parágrafo. Mas o título aparece quando colocamos o mouse sobre ela, diz um título de exemplo, e você percebe que muitos sites populares como o Facebook ainda usam isso. Há muitos, muitos atributos, e nem todos eles são aplicáveis a todos os elementos. Por exemplo, quando adicionamos uma imagem, a imagem vem com atributos com e altura. Podemos adicionar um atributo de título global e um altar atributos o salt é o texto alternativo que aparecerá se a imagem não estiver disponível e a fonte, que é limitada à imagem ou vídeo em alguns casos, entrará aqui. Fechamos isso e fica assim. Agora, quando estamos falando de tamanho é uma largura pode ser 250 por 250 estes serão pixels. Mas as sobrancelhas padrão vão procurar pixels. O título pode ser qualquer título. Poderia ser tudo título itiveness retorno para a imagem faltando, ea fonte seria site ponto com barra imagem ponto j. saco. Agora, com isso, quase todos os atributos devem ser minúsculas. Então, o que você vê com a altura título Ault fonte qualquer coisa que vai dentro de um elemento aberto deve ser menor. caso deve ser sempre minúsculo, e isso vai também com a padronização dos nossos elementos. Assim, todos os elementos HTML e atributos devem ser minúsculas o tempo todo. Agora, quando estamos olhando para atributos porque eles vêm em pares, como você pode ver com a imagem com é igual a e, em seguida, ele tem aspas. Agora isso funciona, ou nós podemos você aspas simples qualquer um deles funciona. Mas o que não funciona é com é igual a 2 50 A maioria dos navegadores sabe como descobrir isso, mas se você estiver usando, Título é igual a este é um título de exemplo, e vamos envolver elemento aqui, apresentá-lo ao elemento span. Como você pode ver, No pad plus plus não sabe o que está acontecendo aqui. Ele não percebe que isso é parte dos atributos, porque seus espaços em seus espaços são os separadores entre atributos. Então, se nos envolvemos em cotações e ar aspas duplas, tipicamente o padrão html. Mas, novamente, ambos estão disponíveis para você usar a qualquer momento. Então você vai notar que este é realçado azul por nenhum animal de estimação plus mais automaticamente, e ele deve funcionar perfeitamente bem em que lá dentro. Por exemplo, vamos mover esta imagem porque não há imagem nesse local. partir de agora, quando você ficar mais longe depois do HTML, você vai começar a olhar para outra linguagem chamada folhas de estilo CSS em cascata. Agora não vamos cobrir nenhum estilo agora, mas para dar a vocês uma idéia de como seria, temos mais alguns atributos globais que podemos usar classe sendo um deles novamente. Isto é para idéias CSS, outro e estilo onde podemos adicionar CSS diretamente em um atributo. Sem classes de cobertura, ideias e estilos mais tarde, mas agora tudo que você precisa saber é que um atributo fornece informações adicionais para um elemento. Então, sua tarefa para este vídeo é adicionar o atributo título a outro parágrafo, então primeiro crie um novo parágrafo. Lembre-se, que está usando a tag P e, em seguida, em segundo lugar, adicione o atributo título para o elemento de parágrafo como Então vá em frente e faça isso Uma vez feito . Abra esta página no seu navegador. Passe o mouse sobre o texto. Lembra-te, fizemos isso com esta pequena secção aqui. E quando colocamos o nosso máximo sobre esses pequenos shows pop-up da pequena miniatura na página , exibição aparece com outro título. Então, no título, atribua a um novo parágrafo com frases lado dele. Coloque o mouse sobre ele. Se você ver, você estava acabado. 10. Cabeçalhos: HTML. Cabeçalhos são a forma como criamos títulos ou manchetes importantes e HTML foi capaz de usar os cabeçalhos H um a H seis e neste vídeo vamos passar rapidamente por cima de cada um deles. Vamos olhar para a tag de cabeçalho mais importante e esse é o elemento H um. Este é o maior cabeçalho disponível. Então, quando abro esta página, é isso que vemos. Este é o maior cabeçalho disponível. Agora vamos olhar para a diferença entre H um e em h dois. Este vai dizer que eu sou um cabeçalho secundário. Você percebe que há uma grande diferença e a mesma coisa pode se aplicar com um H três e isso continua todo o caminho até H 6, lembra? Então aqui temos 81 h dois h três. Nós pulamos quatro e cinco e em h seis, então você pode ver que o H seis é bem pequeno. Agora vamos olhar para um parágrafo regular para que você possa ver que os cabeçalhos H seis realmente menores que o texto do parágrafo normal, e isso é bastante normal para a maioria dos navegadores para exibi-lo dessa maneira. Nenhum cabeçalho é muito importante porque eles especificam determinados pedaços de conteúdo em sua página. Seu H um é provavelmente o mais importante para motores de busca de motor de busca vai encontrar que h um e ele vai para Ele vai olhar para ele e lê-lo, analisá-lo, descobrir o que é sobre e perceber que Hey, sim, isso é sobre o conteúdo que está nesta página, e é muito relevante. Vamos usar esta informação. A otimização do motor de busca é um assunto totalmente diferente, mas meu conselho é nunca usar mais de um h uma tag em uma página a menos que você absolutamente precisa . O H um elemento deve ser usado para o título da página. Se você tem um artigo maciço ou uma revista onde um blogueiro possivelmente usou H um apenas para o título desse bloco, Artigo dois separam seu conteúdo, possivelmente usando H dois e H três. Isso ajuda sua Jenn Jones a entender o que é a informação. Ah, sobre o que é a informação abaixo. E o mais importante, você só não quer um monte de texto. Este tamanho na sua página não parece muito bom. Então, sua tarefa para este vídeo é criar uma página e criar 81 h dois h três h quatro h cinco e H seis elementos. Coloque-os em uma página e, em seguida, abra essa página em seu navegador e você verá algo ao longo das linhas deste. Eu pulei sobre H estrangeiro H cinco. Você terá aqueles para que você possa ver a diferença é uma vez que você abriu sua página e você pode ver claramente as diferenças entre os elementos de cabeçalho, então você está acabado. 11. Breaks de linhas: html não é sensível ao espaço, e isso se torna um problema quando você deseja criar novas linhas em seu conteúdo. Então eu vou mostrar a vocês um exemplo rápido de como HTML não é sensível ao espaço. E então vamos criar novas linhas. Então, primeiro, este é um parágrafo sem espaços e uma segunda linha aqui. Vou guardar isso. E quando o abri no meu navegador, está tudo na mesma linha. O que eu posso fazer é clicar com o botão direito do mouse, ir para ver fonte e o código-fonte aparece da maneira que eu escrevi no meu editor, no entanto, eu queria linhas não um. E isso não acontece apenas com novas linhas, também. Acontece com muitos espaços. Aqui está um exemplo. Agora, se eu atualizar a página, todos esses espaços se transformaram em um espaço. E se eu olhar para o código-fonte, o código-fonte não mudou exatamente o mesmo. É assim que o navegador interpreta as informações que você está dando. Então, quando você dá mais de um espaço como o que você vê aqui, o navegador automaticamente pensa OK mostrar apenas um espaço agora para criar uma nova linha. Usamos o elemento B R. Este é um desses elementos que se fecha em si mesmo, então não precisa de uma tag de abertura ou fechamento, e isso é porque não há conteúdo para colocar dentro dela. Então, se você colocar um BR aqui, mas estamos aqui onde queremos outra nova linha, guarde isso. Portanto, queremos uma linha romper no final deste período. Queremos uma quebra de linha no final deste período. Queremos outra quebra de linha, mas nada nessa linha. E depois queremos a nossa sentença. Isso tem muitos espaços nele. Salve isso e para fora mostra a maneira que queremos a exceção fora dos espaços. Agora vamos adicionar mais uma quebra de linha lá. Vou deixar algum espaço para nós aqui, e quero mais de um espaço entre isto e isto. Esses canos, se eu mostrar bem rápido e bem realçado, esse tubo é um espaço, e então você destaca o outro tubo, este rasgo básico antes dele. Mas se eu adicionar muitos espaços, nada acontece. Estou refrescando uma página. Nada está acontecendo então, em vez disso, o que eu quero Dio, este é um pouco mais avançado HTML. Queremos o sinal e B S P semi cólon. Se você salvar isso, coloque um espaço em cada lado dele que conte como um caractere de espaço. Esse caractere, então, é interpretado da mesma forma que qualquer outro caractere. Um alfabeto é interpretado. Então, quando eu atualizar você vê, eu tenho três espaços lá dentro. Vamos ver o código-fonte. Eu tenho um espaço aqui. Eu tenho o espaço que dissemos a ele para fazer e nós temos um espaço depois disso. Isso é um pequeno bônus para este vídeo agora. Isso não é importante saber. Então você está teste para este vídeo é não adicionar muitos espaços. Sua tarefa é simplesmente também. Crie um novo parágrafo, adicione novas linhas e verifique se você fez isso corretamente. 12. Negrito: para tornar o texto em negrito, basta adicionar o elemento B. Então, quando você criar um novo parágrafo aqui e dentro deste parágrafo, eu vou ser ousado. Agora eu quero dizer que eu vou ser ousado, deve ser aparafusado. Isso é tudo o que fazemos é adicionar o elemento barra B para fechar a tag, salve-a aberta em seu navegador. E agora diz que dentro deste parágrafo, vou ser ousado, e esta última parte é ousada. Foi do jeito que dissemos que deveria ser. Sua tarefa é criar um novo parágrafo e dentro disso, escrever uma frase e fazer metade dela em negrito. Teste sua página. Se metade for negrito, então você adicionou ênfase à sua sentença. 13. Italics: adicionar itálico à sua página adiciona uma camada de ênfase ao que você está tentando explicar. Por exemplo, a palavra realmente é frequentemente enfatizada no texto e na linguagem. Então, quando dizemos que isso é realmente fácil, bem, nós poderíamos capitalizar todas as letras ou fazer essas letras minúsculas e adicionar itálico. Agora, se nós visualizarmos isso, você sabe, é que realmente é enfatizado e todos os outros Texas normal. Sua tarefa para este vídeo é abrir e fechar elementos de parágrafo como eu fiz direito. Qualquer frase antiga que você goste. Nem sequer tem de fazer sentido. Enfatize adicionando itálico a certas palavras. Abra a página no seu navegador. Verifique se suas palavras são diga-nos olhos. Pode verificar se suas palavras estão em itálico? Você adicionou ênfase à sua frase com sucesso e você está acabado. 14. Underline: Muitas vezes você gostaria de adicionar palavras de orientação subjacentes para adicionar um tipo especial de ênfase. É importante entender que o elemento subjacente não é apenas obsoleto ID para HTML cinco. Ele tem um propósito específico para HTML cinco agora, que não é tecnicamente sublinhar ou adicionar ênfase. O elemento que estamos prestes a aprender não se destina a dar ênfase. Negrito geralmente é usado para manchetes, cabeçalhos, cabeçalhos. Itálico é geralmente usado para ênfase, e em HTML cinco, o elemento U para subjacente foi obsoleto. ID não significa mais para adicionar ênfase. Em vez disso, o elemento U é destinado a representar palavras que são drasticamente diferentes do texto normal . Por exemplo, por exemplo, palavras com erros ortográficos. Se você quiser apenas adicionar um subjacente a uma palavra e ela realmente não tem nenhum significado particular , você pode usar CSS para isso. Não, não estamos aprendendo sobre CSS, mas ainda é vital que você entenda qual é o elemento subjacente. Então, para adicionar um sublinhado apenas para você quando dizemos que em vista dele, você está sublinhado. Agora, partir do HTML 5, não devemos usá-lo desta forma. Eu simplesmente fiz isso como um exemplo, a maneira correta seria se a palavra você estivesse errada. Esse sublinhado está agora a acrescentar uma ênfase que mostra que esta palavra não se encaixa. Essa é a maneira correta de usar um HTML cinco. Então, sua tarefa é Criar um novo elemento de parágrafo. Escreva um anúncio de frase sublinhado Abra-o no seu navegador. Verifique se há sublinhados. 15. Comentários: um comentário em qualquer linguagem de programação, incluindo HTML é uma seção de código que não aparecerá ou não será executada. Neste caso, ele simplesmente não vai aparecer, mas ainda vai aparecer em seu código-fonte para iniciar um comentário HTML. É menos do que ponto de exclamação, traço, traço e tudo em Aqui está um comentário, e, como você pode ver nenhum bloco mais pastar esta área. Ele automaticamente agora para fechar esse comentário. Use Dash Dash maior do que como exemplo. Aqui está a minha mensagem. Eu vou adicionar outro comentário aqui, e eu vou exibir esta página. Então tudo o que aparece é aqui o meu imposto. Agora, se eu clicar com o botão direito do mouse e ir para exibir a fonte da página, meus comentários ainda aparecerão. Então, se você quer esconder algo secreto e lá, este não é o lugar para fazer isso. Mas se você quiser escrever pequenas notas para si mesmo, esta é a maneira perfeita de fazê-lo, então você também pode usá-los como é o meu Rodapé. Como pequenas notas, poderíamos dizer Rodapé está abaixo deste e recente grupo linguista algumas das coisas juntos e aqui. Eu quero adicionar um link, e isso só vai para o Google sem motivo aparente. Agora, quando eu mostro a página, o link do Google aparece. E se eu quisesse comentar isso para que não funcionasse, não apareceria. comentários funcionam em várias linhas, desde que você o abra e o feche corretamente. Portanto, qualquer coisa dentro de um comentário não é renderizado em seu navegador. Sua tarefa é escrever um pouco de HTML, usar o elemento de parágrafo e, em seguida, comentou, emitir um comentário acima dele, colocar um comentário abaixo dele e, em seguida, comentar a coisa toda e obter uma idéia de como esses comentários funcionam . Se você olhar para a fonte da página de muitas outras páginas da Web, você vai descobrir que os comentários são bastante comuns e eles nem sempre são exibidos em um formato agradável, como este ou tag de abertura e fechamento. Terminando na mesma coluna aqui, certo, certo, um pouco de HTML e depois comentou. Carregue que cada fêmea em seu navegador E se o que você comentou não aparecer , você criou com sucesso um comentário 16. Links: links são encontrados em praticamente todas as páginas da Web na Internet. O que chamamos de link, na verdade queremos chamar de hiperlink. Um hiperlink vincula uma página a outra página, e é assim que você move de um documento para outro documento. Então vamos olhar para a criação de um link que vai para qualquer página da Web antiga para este exemplo. Vamos ligar diretamente ao Google. Então, digamos que esse link vá para o Google. Agora salvamos e exibimos esta página. Nada fora do comum vai aparecer. E como você pode ver, o link aqui não aparece. Então o que precisamos fazer é adicionar o elemento A. O elemento A é o nosso elo. É o nosso hiperlink e um link de uma página para outra. Precisamos de atributos muito específicos. Isso é atributos chamados H R E. F. É o atributo que lhe diz para onde direcionar o usuário quando eles clicam nele. Então este vai para o Google Dot com. Quando você atualiza a página, de repente um link aparece, eu posso clicar nesse link, e isso me leva ao Google Dot com. Eu vou voltar e nós temos outros atributos que precisamos olhar, e isso é chamado de atributos alvo. Este é um pouco diferente da maioria dos atributos porque ele começa com um subjacente Você é o valor começa com um subjacente Os valores que estão disponíveis são sublinhado em branco sublinhado Pai sublinhado Self e sublinhado Superior. Agora só queremos definir um desses, e se quiséssemos abrir uma nova janela, usaríamos Sublinhado em Branco. Então, alvo em branco. Se eu salvar uma página superior aberta novamente, nada vai parecer diferente. No entanto, quando eu clicar neste link que traz uma nova janela sublinhado Self é o padrão. Quer dizer, vai abrir na sua própria janela. Você não precisa especificar isso se quiser que a nova página carregue em particular janela que você está definindo destino é igual a Sublinhado Self é o mesmo que nenhum atributo de destino em tudo. Como passar rapidamente por cima dos outros sublinhar. Os pais abrirão links no quadro do documento se houver um quadro e a parte superior abrirá o documento em todo o corpo. Fora da janela. A maioria das pessoas se apegam a si mesmo ou aos pais ou em branco para uma nova janela. Então, para este, vamos dizer que o Google precisa se abrir em uma nova janela, e sua tarefa para este vídeo é criar um link usando o elemento A. Faça esse link aberto com atributos de destino em branco. Isso significa abrir uma nova janela de salvamento. Abra este arquivo no seu navegador. Clique no link. Depois de abrir esta página no navegador, clique no link. Você completou este vídeo. 17. Links internos: um link interno é como você vinculou a outra seção dentro da mesma página, enquanto outros links de uma página para outra página um site para outro site. Isso vincula diretamente ao conteúdo que ainda está na mesma página, essencialmente, para permitir que essencialmente, você role para baixo ou role de volta para onde quer que o conteúdo seja. Talvez eu vou fornecer um exemplo aqui diz Clique neste link. E em vez de adicionar um site ou uma página da Web ou um, você sabe ah, arquivo como índice dot html, vamos adicionar sinal numérico, comumente conhecido como hashtag. Agora, Anderson, para chamar este link um e eu vou criar. Então eu vou criar apenas um espaço vazio aqui, e isso vai nos permitir rolar para baixo sua página por um bom tempo que uma pré-visualização isso você pode ver que minha barra de rolagem apareceu. Eu tenho o link na parte superior, e se eu rolar para baixo, Eu ainda estou rolando na parte inferior, diz mais conteúdo aqui. Agora o link no topo. Quando eu clico, nada acontece. Mas na U. R. R. L Bar, ele tem o nosso arquivo html co dot. Esse é o arquivo que eu estou escrevendo agora que tem o lado do número do sinal de libra tag hash , que significa que isso está tentando vincular a um determinado pedaço de conteúdo nesta página e está tentando encontrar o link uma peça. Quando eu clico, nada acontece. Então o que fazemos é criar outro link. Mas desta vez usamos o atributo name e não precisamos necessariamente ter qualquer conteúdo dentro dele. Mas este vai chamar-se Link 1. Então, quando eu clicar, isso destaca aqui em cima também demonstra que link um aqui em cima é o mesmo que link lá em baixo . O link interno precisa toe Ter sua hashtag na frente dele no link onde ele vai para não tem isso. Também não tem o oito ref. Não tem mais nada nele. Na verdade, você nem será capaz de vê-lo. Então, quando voltarmos para a nossa página e eu atualizar e agora eu clico, este link vai rolar todo o caminho para baixo. Agora está tentando o dedo do pé. Traga isso para o topo da página e uma boa maneira de demonstrar que é simplesmente tomar mawr espaço extra em branco garganta na parte inferior de onde o conteúdo está. Salve isso. Vou atualizar a página quando eu clicar neste link apenas mais uma vez, e isso me leva para a área de mais conteúdo. Agora posso rolar para cima e para baixo. É tudo na mesma página, mas temos criado com sucesso um link que não sai desta página e disse que links para conteúdo dentro desta página. Então sua tarefa para este vídeo é criar um link interno, vinculá-lo a outro hiperlink dentro do mesmo documento. Como o que eu fiz. Abra o documento no navegador, clique no link e verifique se ele funcionou. 18. Imagens: imagens são uma grande parte da Internet ou Facebook feeds seria muito chato. Sem imagens, Pinterest não existiria e as imagens do Google não existiriam. Se não tivéssemos imagens por toda a Internet. É importante que entendamos como criar essas imagens. A primeira coisa que você precisa saber é que a tag de imagem começa com I M g abreviação para imagem parece imagem. Se você tirar o A e E, também é uma etiqueta de fechamento automático. Ele não requer tag de imagem de barra. Ele simplesmente se abre e se fecha na mesma tag. Agora, para definir uma imagem que usamos o S R. C significa fonte, e é aí que nos ligamos à nossa imagem. Agora eu vou escrever em uma imagem que eu conheço do topo da minha cabeça, e eu vou pré-visualizar isso. Agora temos uma imagem. Esta imagem é um PNG, que significa gráfico de rede portátil, e isso significa que pode ter algumas partes transparentes nele. Assim, uma imagem pode ser o doc gif jpeg, o outro esquivar um peg dot PNG e em alguns navegadores dot spg para gráfico vetorial escalável, mas o mais comum você verá tipicamente o presente, o J Peg e o PNG. Agora que temos esta imagem carregada, vamos assinar outros atributos. Então, digamos que Border é um. Vamos ver o que acontece então. Agora há uma fronteira em torno dele. Temos todos marcados o texto alternativo para aparecer no caso de a imagem não aparecer. Então, digamos que todos etiquetem aqui para que possamos ver como ele se parece. E eu vou me certificar de que esta imagem não existe adicionando alguns passeios desnecessários do final dela. E agora, quando eu atualizo, a página diz: “ Tudo marcado aqui, são os impostos. A imagem quebrada aparece com o texto que defini. Ainda tem a fronteira ao redor, mas não há imagem. Se houver uma imagem, o texto todo não será exibido. Também podemos definir a largura e a altura. Então, digamos a largura. Queremos fazer isso 600 pixels junto. Então, agora que você percebe, a imagem foi dimensionada para ser 600 pixels em com, mas também cresceu em altura agora, se você quiser restringir a altura também, tudo o que temos que fazer é especificar a altura para um número diferente. Digamos que só queríamos que a altura fosse de 50 pixels, em vez do que seja agora. Não queremos que ele aumente a escala da maneira correta. Agora nossa imagem tem 50 pixels de altura e 600 pixels de comprimento. Agora, se quiséssemos dimensionar a imagem com base na largura e altura, ela não funciona para todos os navegadores, mas para a maioria dos navegadores modernos, exceto isso nos dias de hoje. Então, se dissermos que queremos que esta imagem seja 230 pixels Hall No, ele sabe que as imagens aumentaram para uma escala normal a mais 50 pixels, e vamos notar que ela também vai crescer em largura, que aconteceu. Também podemos adicionar a tag de título e não vamos colocar o mouse sobre ela. Aqui diz título. Assim como o que escrevemos, lembre-se, Title é um desses atributos globais. Podemos usá-lo em basicamente qualquer elemento. Agora eu vou remover essa borda para que se pareça com isso e eu vou adicionar um link vai para o Google. Vou guardar isso. Vamos visualizá-lo, e agora podemos clicar nessa imagem também. Assim que eu clicar nele, ele nos leva ao Google. É sua tarefa para este vídeo é bastante grande. A primeira coisa que eu quero que você faça é criar imagem. Então use. Use o elemento de imagem e adicione os atributos de origem. Não importa o que suas imagens, desde que seja uma imagem de trabalho, você pode saltar para imagens do Google e apenas agarrá-lo. Vocês são todos de lá. Isso é tudo para a prática, então não importa qual imagem. Pegue o segundo passo. Haddon Ault atributos terceiro em uma borda atributos em um costume com e altura em um título . Em seguida, envolva um link em torno de sua imagem. Como o que eu tenho acima salvando abrir seu documento em seu navegador. Último up. Verifique se a imagem e o link estão funcionando corretamente. 19. Bloco em: em HTML. Cada elemento pode ser categorizado como um bloco ou um elemento em linha. Neste vídeo, vamos olhar para a diferença entre um elemento de bloco e um elemento em linha. Vamos exibir algumas partes do HTML e possivelmente algumas CSS que ainda não aprendemos . E tudo bem, porque este vídeo é simplesmente sobre aprender a diferença entre um bloco e um elemento em linha . Então elemento bloco seria um elemento como um parágrafo DIV, qualquer um dos títulos e assim por diante. Um elemento de bloco ocupa toda a largura da esquerda para a direita de toda a tela ou de toda a área em que ele está contido. Então, como exemplo, eu vou criar um desenvolvimento, vou aprender sobre desenvolvimentos mais tarde. Mas este é um elemento básico de bloco. Vou adicionar uma borda bem rápido. Nada extravagante, não devidamente escrito, e este é um elemento de bloqueio. Olhando para esta página, você pode ver que a borda ocupa toda a largura da página da esquerda para a direita. Agora, se olharmos para um elemento em linha, isso é algo que só ocupa o espaço que realmente precisa. E um grande exemplo disso é o elemento span. Então este é um elemento de bloco porque ele vai todo o caminho através da tela. Os pais, o Container é o elemento do corpo, certo? Então, se olharmos para o elemento div que escrevemos seu contêiner pai, o acima dele na hierarquia é o corpo no corpo ocupa toda a página. Onde é isso? Ben está na fila. Essa fronteira envolve esse espaço. É o máximo de espaço que ele precisa. Vou adicionar um espaçador lá, e vou criar alguns desenvolvimentos aninhados. Vamos fazer com que seja uma fronteira azul. Sabemos onde estamos trabalhando para dar um pouco de estofamento. Não se preocupe com o CSS por enquanto. Basta escrever isso para que você possa ver a diferença entre um bloco em um elemento em linha . E diremos que a largura deste é 50% do contêiner pai. 50% fazem fronteira. Vamos dar uma olhada no que temos. Então isso ocupa 50% da página, tem algum preenchimento, e esta é a borda azul de 50 centavos, certo? Se tivéssemos outro Devyn aqui, isto é 100%. Então nós especificamos que o primeiro elemento de bloco só vai ser um elemento de bloco para que 50% da tela em que, O próximo elemento de bloco dentro dele vai ocupar 100% da largura de seu elemento pai de maneiras melhores. Na verdade, eu só tiro este preenchimento que blocos elementos. Um dos dois pixels borda preta sólida que diz que 100% ocupa 100% da área da borda azul . Então elemento bloco vai ocupar tanto espaço quanto possível da esquerda para a direita de sua página, enquanto que um elemento na linha não vai. Como você pode ver aqui, o elemento em linha não faz isso. Ele só ocupa o espaço mínimo que tem que fazer. Agora, por que isso é importante? Bem, porque elementos de bloco muitas vezes ocupam toda a página Se você for para o Facebook, o cabeçalho no topo do cabeçalho azul onde ele tem o logotipo na barra de pesquisa Em suas notificações, esse elemento pai será um elemento de bloco porque ocupa todo o espaço da página. Agora você pode criar colunas dentro, mas esses elementos de bloco maciços, mas requer um pouco de estilo extra, e isso não é algo que estamos cobrindo neste vídeo. Mas como exemplo, vou copiar isto e arrastar-nos para baixo e dizer mais 50% azul e ver o que acontece quando coloco um ao lado do outro. Se eu limpar isso para que possamos ver que estes ar dois grupos muito distintos, esta seção aqui é nossa primeira fronteira azul áreas é 50% azul fronteira tem nosso elemento bloco no elemento de linha, e lembre-se, apenas ocupou 50% da página e a outra ocupa 50% da página, e deve, em teoria, em teoria, sentar-se ao lado dela. Mas como ambos são elementos de bloco, eles vão ocupar 100% da página, mesmo que eles vão ocupar 100% da página, a borda não se expanda para 100% dela. Outro grande exemplo é se criarmos outro span aqui, a borda verde e meu lado ou abaixo, porque um span é um elemento em linha e o DIV é um elemento de bloco, os elementos de bloco vão ocupar 100% do com da esquerda para certo, mesmo que apenas 50% esteja sendo utilizado. Isso significa que outros 50% apenas aquela área branca que vimos. É um espaço vazio em branco. Nada vai ser usado lá e que o SPEN deve sentar-se abaixo dele. Agora. Este é o nosso espaço e está sentado abaixo de toda a área. Agora eu vou limpar um pouco disso para que possamos dar uma olhada nisso. Um pouco mais limpo, 50% de borda azul. Mais uma vez, parece que estamos usando apenas 50%, mas é realmente o elemento bloco está ocupando 100% todo o caminho da esquerda para a direita. Reivindicou 100% do com, mas está usando apenas 50%. Então isso significa que você é elemento span vai ir abaixo dele porque mesmo que você não pode ver nada sendo usado aqui, ele está secretamente sendo usado. Então essa é a diferença entre um bloco e um elemento em linha. Sua tarefa para este vídeo é criar um elemento de bloco. Você pode brincar com o desenvolvimento ou com o que estamos mais familiarizados até agora, que seria o elemento parágrafo. Qualquer um funciona, e então eu quero que você crie e no elemento de linha agora em elementos de linha pode ser o elemento span . Sublinhado em itálico negrito. Estes são apenas alguns dos que cobrimos até agora, e quero que veja como eles se sentam. Coloque o elemento de bloco acima do elemento em linha e, em seguida, tente o inverso. Tente colocar o elemento em linha acima do elemento bloco e ver como eles disseram Você não tem que entrar no CSS, que é o atributo style aqui. Você não tem que entrar em nada disso, desde que você possa ver onde você está trabalhando. Terceiro passo. Abra o documento no navegador e a etapa final. Verifique se você fez um bloco e elementos de linha na mesma página. 20. 170 dív: um dos elementos mais comuns em HTML é o elemento DIV, e ele apenas se parece com isso. Ele requer uma abertura e uma tag de fechamento, e se você olhar para a fonte de basicamente qualquer página da Web 99,99% do tempo, você verá pelo menos um desses, se não dezenas ou possivelmente centenas desses elementos agora com desenvolvimento não tem uso especial. É um elemento de bloco em branco. desenvolvimento do Damien vai ocupar tanto quanto o pai. O contêiner permitirá. Se você não estiver familiarizado com a diferença entre um bloco em um elemento em linha, volte para o bloco primeiro em vídeo elemento de linha, e você aprenderá a diferença lá em apenas alguns minutos. O desenvolvimento é simplesmente um elemento fictício. Ele não tem nenhum propósito especial, nenhum uso especial, e é totalmente personalizável seu CSS. Não estamos cobrindo CSS aqui, mas é importante saber que o desenvolvimento será encontrado praticamente em todos os lugares na Internet. Esse HTML cinco criou muitos elementos que agora são padronizados, a fim de reduzir a quantidade de dibs e separar as informações. Por exemplo, em html cinco. Temos o elemento de cabeçalho. Temos o elemento rodapé e muitos, muitos, muitos mais. Antes do html cinco, tudo era um diff. Foi um div. I d é igual a rodapé algo ao longo destas linhas agora, enquanto isso ainda é aceitável, se você está escrevendo um determinado pedaço de código para um rodapé ou cabeçalho ou uma navegação, esse é outro bom que você verá com bastante frequência. Agora você vai querer usar um desses e novamente há muitos deles, mas estes foram apenas os três que vamos cobrir agora, mas no final não há nada de errado em usar um desenvolvimento como este. É preferido em HTML cinco que usou um destes, mas se você tem que usar um div, você tem que usar um div, e é para isso que ele está lá. Não há tarefa para este vídeo. Isto é puramente educativo. Para que você saiba que o DIV é um elemento fictício não tem nenhum propósito especial, nenhum uso especial, e é completamente personalizável. Muitos outros elementos são personalizáveis até o grau final, no entanto, o DIV é basicamente uma ardósia em branco. É um elemento de bloco em branco que você pode fazer basicamente qualquer coisa com agora neste momento . Se você está apenas começando com HTML, você não pode fazer muito com o Div exceto criar blocos que vão da esquerda para a direita de toda a sua página. Não é tão útil. Mas à medida que você se torna um desenvolvedor mais qualificado, o desenvolvimento é um desses elementos que você escreve centenas e centenas de vezes, possivelmente centenas de vezes, mesmo em apenas um único dia. 21. Listas: em HTML. Existem dois tipos de listas em listas ordenadas e listas ordenadas. A diferença entre os dois é que uma lista A Norden geralmente usa marcadores ou algum tipo de imagem para denotar em que ordem cada item da lista está indo, e realmente não importa qual deles vem 1º 3º 4º assim por diante. Assim por diante. Considerando que uma lista ordenada geralmente tem números ou letras onde uma lista de ordens começaria com 12345 a b c d e f g, ela tem algum tipo de ordem para ele. Aqui está um exemplo ao vivo Primeiro não é uma nova lista ordenada. Começamos com você l uma nova lista ordenada e para criar um item de lista é apenas esse item de lista e para criar outro item de lista, tudo o que fazemos é criar mais um e podemos continuar fazendo isso para sempre. E eu vou adicionar um título aqui. E vamos dar uma olhada no que escrevemos. Temos uma lista Norden. Nós temos um item de lista, um ponto em branco, outro item de lista 1/3 item aqui, o item de lista que não tem nada nele era realmente um erro de digitação. Esse foi o meu erro. Bem, vamos usar isso a nosso favor para aprender como isso funciona. HTML precisa de uma tag de abertura e de fechamento para a maioria dos elementos. O 1º 1 não tinha uma etiqueta de fechamento, então o que ele pensou que estávamos fazendo era isso. Agora, isso não significa que você pode pular quaisquer elementos de fechamento. Este é apenas o navegador tentando corrigir o que ele acha que é correto, e ele pode não aparecer da mesma maneira em todos os navegadores. E certamente não é uma padronização, e outros desenvolvedores não vão gostar de trabalhar com ele. Você sempre cria essa etiqueta de fechamento e nós removemos isso? E esse é o nosso Nordeste onde as balas são a parte ordenada pela ONU, não importa qual vem primeiro. É simplesmente uma lista. Alternativamente, temos ordenado listas, e isso começa com, como você provavelmente adivinhou, um poço. Agora, um item da lista é exatamente a mesma coisa em uma lista ordenada. Este item número um. Vamos fazer o número dois número três e não me preocupo com espaço extra aqui. E para pré-visualizar isso para uma lista ordenada, temos 123 e vem na ordem 12 e três você também pode aninhar listas dentro de um do outro. Isso está ficando um pouco mais avançado, mas vamos dar uma olhada em uma lista ordenada com um item Nord aqui e no segundo item da lista . Vamos adicionar uma lista ordenada para que seja uma lista dentro de uma lista Número de Ordem 1. Ordem número dois Novamente não se preocupar com nenhum espaço em branco que não é relevante neste momento . Vou fechar este item de lista que você pode ver quando eu clicar nele. Ele destaca os elementos de abertura e fechamento. Tudo tem um elemento de abertura aqui. Com exceção desta, feche a lista ordenada da ONU e vamos dar uma olhada nisso. Agora. Este é um OVNI dentro de um poço, então em ordem lista com uma lista ordenada. Então, como você pode ver, aqui temos o primeiro item é um erro Nord. O segundo item está em ordem, mas também é uma lista. Podemos adicionar outro aqui. 30 Bem, item e podemos ver como isso criou uma lista ordenada dentro forno uma lista Norden, e poderíamos fazer o vice-versa, ou podemos fazer a ordem dentro, ordenado ou lista ou um não ordenado dentro de um novo encomendado. Isso é mais um exemplo rápido. Mas vamos fazer uma lista ordenada dentro de uma lista ordenada, e esta é uma lista ordenada dentro de uma lista ordenada. Vou atualizar minha página, e aqui está. Em vez de balas, temos simplesmente números. Então temos números dentro do número dois também. E mais uma vez, só por clareza. Chamou-nos o último ponto. Lá vamos nós. Então, sua tarefa para este vídeo é criar primeiro um nordeste com pelo menos três itens, depois criar uma lista ordenada com pelo menos três itens, depois salvar e abrir esse documento em seu navegador, seja qual for o navegador que você quiser e verificar se seu listas apareceram corretamente. Então sua lista deve ter marcadores e números para o seu A Norden uma lista ordenada, respectivamente, 22. Tabelas: tabelas são bastante comuns em HTML, e você vai eventualmente ter que usá-las. Ao longo da última década, as tabelas foram progressivamente eliminadas em favor de elementos que carregam mais rapidamente, como o desenvolvimento. No entanto, há alguns casos em que uma tabela é apenas a solução certa para você, e é importante entender todas as diferentes partes de uma tabela. Não, uma tabela é bastante complexa, e consiste em muitas partes diferentes. A primeira coisa que você precisa saber está na mesa. Elemento é apenas chamado de tabela. Nada extravagante sobre isso. E se você quiser criar sua primeira linha porque as tabelas funcionam em linhas e células pensam nisso como uma planilha, você vai querer criar um TR que é uma linha da tabela. Você abre e fecha como faria com a maioria dos elementos HTML. Mas dentro desta sala, você também precisa de uma cela. Não, esta célula, você pensaria, seria t ver célula da tabela, mas é na verdade dados da tabela TD. Esta será a primeira célula e vamos criar mais uma e entre parênteses. Vou escrever dados. Então você sabe que uma célula é na verdade um TD. Agora, se visualizarmos isso, não parece muito. Mas se adicionarmos borda à nossa tabela, apenas uma borda de um pixel agora podemos ver que suas células reais, a tabela, também leva um com Podemos dizer que queremos que a largura seja 100% e fora 100% da tela ou sua contendo elemento indo da esquerda para a direita. E se nós simplesmente queremos adicionar outra célula, nós apenas adicionar mais uma célula, e agora nós vamos ter três colunas. O elemento da tabela também tem auto-espaçamento e venda estofamento, mas vamos obter o preenchimento da célula em apenas um momento. Espaçamento celular. Se você der uma olhada nisso contra aquilo, ou se fizermos isso drasticamente diferente, esse é o espaçamento entre cada uma das células. E se vamos colocar isso de volta ao normal, aqui está o que parece. Quando eu disse para voltar para cinco, há outro chamado estofamento de venda, e queremos que este seja ajustado para ver o que cinco faz. Então esse é o preenchimento dentro da célula, não entre as células, mas dentro de cada célula. E se fizermos isso muito mais drástico. Você pode ver que o estofamento entre as letras que vemos aqui e a primeira borda interna . Também podemos alterar a cor da borda usando os atributos de cor da borda e apenas o nome de uma cor. Podemos dizer mudanças para ler, e agora é lido, ea fronteira não tem que ficar permanece. Um. Poderia ser drasticamente maior. Então você vê agora que a fronteira é todo o caminho ao redor da mesa. Não é a borda para cada célula, no entanto, adicionar uma borda adiciona essa borda de um pixel todo o caminho em torno de cada self. Então agora temos uma linha e adicionar notas. Aqui, isto é uma fila. Esta é a tabela de dados, e se quiséssemos criar mais uma linha, tudo o que fiz foi copiar isso. Atualize a página. Temos outra fileira agora. O próximo. Não precisávamos saber. Nossa coluna gasta e assado bandas. Então, digamos que a primeira linha tem quatro células e a segunda linha tem três células. Não vai se alinhar corretamente, e é assim que o cromo tenta descobrir isso. Portanto, as células nas três células superiores na parte inferior. Mas e se quisermos que os Celtics gastem mais de duas colunas? Bem, é quando estamos aqui. Então, para ter certeza de que você está trabalhando no lugar certo, se você é novo com HTML, você pode simplesmente adicionar um texto trabalhando aqui, atualizar sua página e ele diz, trabalhando aqui. Ótima. Então sabemos onde estamos trabalhando. Nós vamos selecionar este elemento e nós estamos indo toe mudar a extensão da coluna ou extensão de carvão para eu quero dizer, ele vai ocupar duas colunas em vez de uma. Refresque eu conheço os Celtics até duas colunas em vez de apenas a que ele deveria saber . Vamos adicionar 1/3 linha, este também vai ter três células. No entanto, queremos mesclar esta célula com esta. Vamos voltar para onde estávamos trabalhando aqui. Sim, estamos na cela certa. E se dissemos que a proibição do assado é igual a dois, isso leva a Rose Now, agora , para fazer um pouco mais de sentido nisso, porque isso está ficando um pouco difícil. Vamos rotular estas fileiras e um número de telemóvel. Agora podemos ver se esta é a estrada e esta é a cela que temos. Fila um, alguém rema uma célula para linha um, célula três e assim por diante. Assim por diante. Aqui nós escrevemos para vender um, e leva até Rose. Lembra-se? Isso é porque temos a extensão da linha é definida como, enquanto este é escrito para vender três e linha para vender quatro. Isso é porque temos a extensão da coluna definida para agora Isso funciona fora da estrada que tem a maior quantidade de células nele. Então tudo isso funciona fora da primeira estrada porque a primeira estrada tem quatro células nela. Agora também podemos adicionar o corpo do cabeçalho e rodapés. Então isso foi muito fácil. Este é um corpo T cabeça T, que é onde toda a sua rosa e dados vão e, em seguida, pé T. Agora, esta é simplesmente uma maneira de gerenciar nossas informações de linha. Então, em sua cabeça, em sua cabeça de mesa, nós temos nossa linha de mesa e precisamos th que é um cabeçalho de tabela chamado nós. Chame-o de um, faça um pouco mais compacto, ligue para ele também. Três e quatro. Agora, se formos dar uma olhada, temos cabeçalhos de coluna. Agora o th é diferente do T d. O th é a cabeça da tabela vai fazer o seu texto em negrito automaticamente e centralizá-lo. Se não quiséssemos isso, nós apenas mudamos de volta para T. D. vai agir como um cabeçalho normal na única razão pela qual estamos chamando este cabeçalhos porque nós colocamos no T tinha elemento. Agora, isso é apenas se você estiver se tornando mais organizado com o seu HTML. Também podemos pegar essa coisa e copiá-la no pé T e o que acontece? A mesma coisa? A única diferença é especificar que esta linha inteira aqui é um cabeçalho. Nesta linha inteira aqui é um rodapé da tabela. Vamos chamar isso de mudança. Estes são para que eles façam um pouco mais de sentido. Então você pode pensar nisso como um corpo humano. Você tem o cabeçalho que é sua cabeça, seu corpo. Então, seu torso, seus braços, suas pernas e seu rodapé que são seus pés tudo. Eles são muito vitais para o seu corpo. Todos eles são muito vitais para uma mesa. A próxima coisa que queremos aprender aqui é como mudar a largura de uma coluna que leva o com atributos, colocá-lo em qualquer coluna única e a mudança nos com 50% tinha um. Toda esta coluna é agora 50% do quadro, e os restantes 50% têm de ser divididos igualmente entre estes três. Agora, nós também podemos especificar que queremos a segunda coluna Diabo com de 25% e ele tem efeito para toda a coluna. O navegador irá descobrir isso automaticamente, e você pode colocá-los. Qualquer um. Não tem que estar na cabeça. Não precisa estar no rodapé ou no corpo. Pode estar em qualquer célula. Você percebe que 50% com para linha Uma coluna uma linha, uma coluna um afeta. A coluna inteira afeta a tabela inteira. Agora, se você não especificar uma largura para qualquer uma de suas células, seu navegador vai ser otimizado automaticamente para o que ele acha que é melhor aqui, parece que ele está tentando otimizar para 25% com em cada coluna. No entanto, se adicionarmos mais texto, ele agora está deixando mais espaço, e está apertando os outros juntos. Isso pode não lhe dar o efeito desejado que você deseja. E se esse for o caso, você vai querer adicionar isso com Teach sul, e é assim que você cria uma tabela em HTML. Então, sua tarefa para este vídeo é uma tarefa bastante longa. Primeiro, crie uma tabela, depois crie três linhas e, em seguida, crie quatro células em cada linha. Volte para o elemento da tabela em uma borda para sua tabela. Altere a cor da borda da tabela. Faça a largura da sua mesa 100% para que ele ocupe toda a largura da sua tela na linha para vender. Três. Eu quero que você use os atributos de extensão de carvão para ocupar duas colunas. Isso significa que você vai ter que remover a quarta célula na fileira dois, também na fileira dois. Quero vender um para levar à Rose. Isso significa que você precisa remover a primeira célula na Linha três e usou os atributos de banimento de assado . Depois de ter feito isso em uma mesa, mesa cabeça, pé e corpo da mesa, salve todo o seu progresso. Abra-o em seu navegador e, se sua tabela for semelhante à tabela que você viu neste vídeo , você está pronto 23. O DOM: o D.O. D.O. M. é o modelo de objeto de documento é o que acontece quando as páginas carregadas em seu navegador e seu navegador cria automaticamente este modelo de objeto de documento Então você tem seu HTML, em seguida, para a esquerda. Você tem sua cabeça, seu título e seu fez um tags, CSS e possivelmente JavaScript para a direita. Temos nosso corpo, e ninguém tem nenhum elemento que queremos colocar nele. Divisores estão em ordem, listas, mais divisores. Itens de lista ir sob a lista ordenada da ONU, e assim por diante até agora, este é um modelo de objeto de documento bastante básico, e você vai notar que isso se parece bastante com uma hierarquia. E isso é exatamente o que é. É uma hierarquia. Agora, aqui está uma imagem de um modelo de objeto de documento que é significativamente mais complexo novamente. Ele começa com o HTML o topo é ou elemento HTML. Temos nossa cabeça ou título, etcetera, etc. Isso não vai muito fundo, mas notamos que a área do corpo pode ter uma div, e então pode ter um lado diferente disso. Em uma tabela dentro disso, e dentro de cada tabela ou tabela subiu e dentro de cada linha de tabela nossas células de dados da tabela e nós podemos ter mais HTML dentro disso, e isso pode apenas ficar cada vez mais profundo e mais profundo, dependendo sobre o tamanho de suas páginas da Web e quantos elementos diferentes sua página da Web precisa usar. Agora. O D.O.M D.O.M define algumas peças diferentes. Ele define elementos HTML como objetos. Ele define todas as propriedades de elementos HTML, que são atributos. Ele define os eventos para todos os elementos que fica mais em JavaScript, e define os métodos de acesso a todos os elementos também. Modelo de objeto de documento é um padrão W três c. Não é vital saber tudo isso agora enquanto você está escrevendo seu HTML, já que isso realmente tem mais a ver com JavaScript. Mas o modelo de objeto de documento é baseado mais em HD Melvin e é JavaScript considerando que tudo é baseado no html que você escreve. Então, estamos aprendendo sobre isso agora. Sua tarefa para este vídeo é ir para imagens do Google. Isso é imagens dot google dot com, digite modelo de objeto de documento e olhar para algumas das diferentes imagens de hierarquia que você encontrar. Olhe para alguns dos mais básicos e olhe para alguns dos mais avançados e tome uma nota mental sobre quais são as diferenças e também quais são as semelhanças. Cada modelo de objeto de documento tem algumas semelhanças. Começam sempre da mesma forma. 24. XHTML: X html significa linguagem de marcação de hipertexto extensível. É muito, muito semelhante ao HTML. É mais rigoroso do que HTML normal e X. HTML é essencialmente HTML, mas projetado para aplicações XML, ou XML usa X html de suportado por todos os principais navegadores. E se você não estiver familiarizado com o que é XML, XML é uma linguagem de marcação onde todos os documentos que precisam ser escritos são marcados corretamente. Em outras palavras, eles são muito mais rigorosos. Eles são muito mais precisos. Não é uma linguagem muito vagamente escrita ou estrutura de marcação. A estrutura do X html significa que há sempre um tipo de documento. Isso também significa que os elementos de cabeçalho, corpo e título HTML são todos necessários em cada página a cada vez. Isso é um mínimo deve agora x elementos HTML também devem ser devidamente aninhados. Isso significa que se você tem um parágrafo com itálico aninhado dentro dele, elementos seriam parecidos com P I I p. Todos os seus elementos devem estar devidamente fechados. Lembre-se daqueles elementos auto fechamento que falamos anteriormente, onde termina em uma barra maior do que sinal e todos eles devem ser mais baixos. Documentos html caso X têm apenas um elemento de rota, que é o elemento HTML, e você vê que no documento Modelo de objeto e X html atributos devem sempre ser minúsculas . Eles devem sempre ser citados, e eles podem nunca ser minimizados. Aqui está um exemplo de minimização. Um dos atributos que podemos usar para desativar um botão seriam os atributos desativados em HTML normal. Nós escreveríamos desabilitado um HTML X, nós escrevemos Desativado é igual a desabilitado É um pouco redundante, mas isso é o quão rigoroso essas linguagens você sabe, tudo o que você aprendeu até este ponto com todos os outros vídeos HTML tem preparou-te para este momento. Em vez de aprender uma linguagem de marcação com regras muito soltas, você acabou aprendendo um conjunto mais difícil de regras primeiro, que significa que você realmente aprendeu x html em vez de HTML. Agora aprender x html e voltar para HTML é extremamente simples. Mas mudar de HTML dois x html é um pouco mais difícil. Então nós realmente começamos com um mais difícil Agora, quando você está escrevendo seu html seu X html , você vai querer às vezes validado. Certifique-se de que você está fazendo certo, especialmente se você está apenas aprendendo isso Pela primeira vez, uma ótima ferramenta para validar seu código HTML X pode ser encontrada em validator dot w three dot org. Existem diferentes maneiras de validar seu HTML. Você pode carregar um arquivo, copiar seu HTML em uma área de texto, ou você pode até mesmo inserir o U R L que você está olhando. Agora isso é o que X HTML é. É essencialmente HTML, mas é mais rigoroso. Sua tarefa para este vídeo é ir para validator w três pontos org Clique em Validar por entrada direta. Pegue um dos arquivos em que você trabalhou em um vídeo anterior, ou se você não acabou de começar a escrever algum HTML aqui e clique no botão de seleção. E isso lhe daria validação sobre se você está escrevendo seu HTML X corretamente ou não corretamente. 25. CSS em inline: em linha. CSS é CSS que você direita dentro de um elemento dentro de seu modelo de objeto de documento. A maneira como fazemos isso é usar os atributos de estilo e esse atributo de estilo é um atributos globais . Agora, neste vídeo, você não vai aprender formalmente nenhum CSS seja quem for. Se você quiser tomar nota de alguns dos CSS que eu escrevo que é completamente até você. Você não será testado em nenhum dos CSS que eu escrever este vídeo porque este é puramente um vídeo HTML. No entanto, aprender o que você está prestes a aprender irá prepará-lo para futuras lições de CSS, e você será muito melhor sabendo apenas um pouco de CSS deste vídeo. Agora, para dar um exemplo de alguns CSS em linha, eu vou criar um desenvolvimento com esses atributos de estilo. Vou escrever, testar dentro dele e fechá-lo. É pré-visualização, e é apenas uma página básica. Diz “Teste agora” em todo o lado. CSS entra aqui agora, uma lição muito rápida sobre CSS. Você tem o que é chamado de declaração, e em uma declaração CSS você tem um par de valor de nome. Então, por exemplo, fronteira seria o nome. Você tem dois pontos, um pixel, vermelho sólido, vermelho sólido, e você termina essa declaração com um ponto-e-vírgula para que você possa adicionar mais aqui. Próximo. Vou adicionar margem superior e quero que seja 50 pixels. E digamos que eu também queira que a largura seja de 30% da minha página. Não, de novo, não é sensível ao espaço. Assim como HTML. Deveria ser tudo minúsculo e temos três declarações aqui, temos a nossa margem de declaração de fronteira , declaração de topo e a nossa declaração com. Então eu vou salvar isso e vamos dar uma olhada nisso no cromo. Agora podemos ver que há um espaço no topo. É de 50 pixels de margem a partir do topo. Isso significa que os elementos vão sentar-se 50 pixels abaixo do com não é 100% da tela. É um elemento de bloco, então deve ser. Mas dissemos que só precisa ocupar 30%. E, claro, há aquela borda vermelha em torno dela. Então, isso está na linha. CSS. Em poucas palavras, colocamos todo o nosso CSS dentro deste atributo de estilo, e novamente, esse atributo de estilo é um atributo global, ele possa entrar em quase qualquer outro elemento HTML como um exemplo. Alterações no parágrafo. Virar de volta para o cromo. Não parece diferente. Vamos fazer isso com um elemento span. Lembre-se, este é um elemento em linha. Isso não vai ocupar toda a largura da página por causa disso, com pode não funcionar. Idade do refresco. Agora o com não está funcionando da maneira que deveria na margem não está funcionando também. E isso ocorre porque esses apenas afetam elementos de bloco ou em elementos de bloco de linha. No entanto, nossa fronteira ainda está funcionando, e isso mostra que nosso estilo é aplicável a qualquer elemento. Então, sua tarefa para este vídeo é criar um novo desenvolvimento no atributo de estilo para ele. Nesse estilo. Atributo, eu quero que você escreva um pouco de CSS. Sinta-se livre para ir para trás neste vídeo, Pausar onde você precisa e copiar o CSS que eu escrevi. Se você está familiarizado com CSS, sinta-se livre para escrever o seu próprio, mas se você não estiver, você pode copiar meu que o que você faz, salvando abrir o documento em seu navegador e tomar nota do que aconteceu. Então, se você adicionou uma borda, haverá uma fronteira. Se você adicionou uma margem, haverá uma margem. Se você especificou uma largura de 70%, ela deve ser apenas 70% da largura da tela. Faça isso e quando terminar, nos veremos no próximo vídeo. 26. CSS interno: CSS interno é a segunda maneira que podemos escrever CSS que afeta toda a nossa página ou qualquer parte da nossa página para mostrar o que quero dizer. Vou apresentar-lhe o elemento de estilo. Nós vamos escrever alguns CSS dentro do elemento de estilo. Se você não está familiarizado com CSS, tudo bem. Você não vai ser testado no CSS agora, pois este é puramente um vídeo HTML, mas você precisará saber sobre o elemento estilo. Então, como um exemplo, eu vou criar um desenvolvimento aqui, e eu vou dar-lhe uma classe atributos e atributos de I. D e um estilo atributos. Agora podemos ou não precisar dos três, mas o que precisamos é do elemento de estilo. Um elemento de estilo deve ir dentro de seu elemento de cabeça. Agora, como um navegador renderiza a página, ela vai de cima para baixo. A primeira coisa que olha é o tipo de médico, diz Linna. Ok, tem HTML aqui. Eu preciso entender e partes HTML que está nesta página. A cabeça vem antes do corpo porque ele é carregado primeiro vai de cima para baixo e nesta cabeça vai tentar renderizar nosso CSS qualquer estilo, quaisquer bordas, margens, almofadas, cores de fundo, cores de texto, qualquer coisa que colocamos lá que estiliza a página que vai ser renderizada primeiro, os navegadores, então vai reconhecer que tem um certo estilo para lembrar para esta página, e ele vai tentar aplicá-lo ao corpo uma vez que o corpo é carregado. Agora isso faz com que a página pareça carregar mais rápido agora. Navegadores, esses dias e conexões de Internet hoje em dia ar tão rápido que a maioria das pessoas nunca será capaz dizer a diferença. Mas há muitas pessoas lá fora que têm uma conexão muito lenta com a Internet, e eles serão capazes de dizer a diferença. Também deve notar-se que o elemento de estilo pode realmente entrar dentro do corpo. Ele funciona perfeitamente bem em navegadores modernos, mas deve entrar no elemento de cabeça. Agora vou escrever um pouco de CSS aqui. Vou adicionar uma borda, e aqui vai ser apenas um pixel, borda vermelha sólida. Eu vou adicionar um I D. Não se preocupe com as aulas e eu ds. Falaremos sobre isso em um vídeo diferente. Mas agora vou mostrar-te como isto funciona. Tivemos o i d e queremos dizer preenchimento 40 pixels. A linha têxtil vai ser o centro. Agora nós vamos adicionar uma classe, a classe fronteira, e nós vamos adicionar o i D ID D. D. Nós vamos ignorar os atributos de estilo no Texan aqui, e vamos dar uma olhada no que nós escrevemos em nosso agora mesmo. Agora aqui podemos ver o Texas. No centro, temos nosso único pixel, borda vermelha sólida, e parece que há um tapinha entre a borda superior e o imposto junto com a borda inferior e o texto. Bem, nós dissemos que o navegador estava em uma borda um pixel, vermelho sólido, adicionar preenchimento em um centro alinhado de texto e fazer isso afetar nosso elemento aqui. Então, em vez de escrever todo o CSS dentro dos atributos de estilo como fizemos em um vídeo anterior , escrevemos tudo dentro do elemento de estilo. E o benefício de fazer isso é quando se trata de aulas vai adicionar mais um mergulho aqui, e eu vou chamar isso de dar a e mais um, e este vai ser def. Três. E quando eu salvo e olho para isso e cromo ou qualquer outro navegador, estes também têm bordas. Agora, a razão pela qual estes têm fronteiras é porque a classe de fronteira aqui afeta todas as classes aqui dentro. Agora é uma lição rápida em CSS. Uma classe CSS começa com um ponto como você vê aqui, onde é a borda do ponto pode ser aplicada a vários elementos. Em qualquer página, podemos adicionar algumas quebras de linha aqui em um parágrafo. Esta é uma atualização P. A página tem algumas quebras de linha lá, e elas também afetam o parágrafo. Agora, o forte benefício disso é que, se quiséssemos mudar esse estilo em particular, queríamos remover essa borda completamente. Podemos remover esse arquivo de proteção, atualizar a página em seu navegador, e ele se livra de todo o estilo de uma só vez. Isso significa que você não precisa escrever estilo. Atributo é igual a borda de um pixel vermelho sólido para cada elemento. Porque se você precisa mudar algo em um site muito grande, digamos que você precisava remover todas as fronteiras Por qualquer motivo, você não quer ter que passar por aqui, procurar por cada fronteira e excluí-la porque isso está indo para levar uma eternidade. Em vez disso, o que podemos dio é simplesmente excluir isso e que se livra de todas as bordas Agora queria usar o atributo style para que você saiba que o atributo style pode estar vazio. A maioria dos atributos pode estar vazia e o atributo style é um deles? Não, quando falamos de ideias, ideias não são como aulas. Uma classe pode afetar vários elementos como eu disse anteriormente, e eu d só pode afetar um elemento e eu d deve ser único. Deve ser como a sua identificação pessoal. Ninguém mais o tem. É completamente único para você como pessoa. Esta identificação funciona exatamente da mesma maneira e eu começaria com o sinal de número Hashtag seja lá o que você quiser chamá-lo hoje em dia. Então sua tarefa para este vídeo é escrever o elemento de estilo em sua cabeça, certo. Três desenvolvimentos em seu corpo. Então eu quero que você crie a classe de fronteira como fizemos neste vídeo. Dê a que uma borda um pixel vermelho sólido. Se você não estiver familiarizado com CSS, volte para uma parte do vídeo onde ele mostra o CSS com o qual trabalhamos e fique à vontade para copiá-lo. Então, para cada um de seus desenvolvimentos que estão dentro de seu elemento corpo, eu quero que você adicione os atributos de classe, eo valor deve ser a poupança de valor de borda. Abra o documento em seu navegador, e se você vir uma borda em todos os três de seus desenvolvimentos, então você adicionou com sucesso o estilo CSS interno à sua página. 27. CSS externo: CSS externo é como adicionamos o CSS de um arquivo em outro arquivo. O principal benefício de adicionar todos os seus CSS e um ou vários outros arquivos que não estão dentro do HTML atual significa que você pode editá-los sem editar várias páginas. O que eu quero dizer com isso é, se eu tivesse uma cópia isso sobre outra página e eles são bastante semelhantes, vamos apenas chamar este CSS externo para agora. Olhe para estes e não há muita diferença. Pode haver uma quantidade incrível de diferença. Mas a questão é, nós ainda queremos usar essa classe, esse estilo em ambas as páginas. Agora, na primeira página, eu poderia simplesmente mudar a atribuição. Se eu quisesse remover essa fronteira. Eu faria. O problema é que, se eu tiver uma segunda página, ela ainda está lá agora. As chances de você ter apenas duas páginas são bastante pequenas. Você pode ter até 50 ou 100 páginas diferentes, dependendo do site ou projeto em que está trabalhando. Você poderia ter milhares de páginas diferentes. Você poderia ter apenas algumas páginas. Independentemente disso, o objetivo da programação é não fazer algo duas vezes. Você quer fazer uma coisa uma vez e ter efeito o máximo possível. Essa é a maneira mais eficiente de trabalhar. Então, aqui vamos adicionar em vez disso algum estilo externo. Agora isso usa o elemento de link com atributos treff EA, e outro atributo, chamado REHL, significa relacionamento. É uma etiqueta de fecho automático, e vai para a tua cabeça. O H R E F é a sua fonte em uma imagem. Use SRC e um link que você usa H R E f. Então aqui vamos adicionar um arquivo chamado estilo dot CS Access file ainda não existe, mas vamos fazê-lo existir em apenas um momento. E a relação com este documento HTML é folha de estilo que diz ao navegador o que é isso . Pode ser um arquivo de texto. Pode ser um arquivo javascript. Pode ser absolutamente nada que é importante para esta página, mas quando dizemos folha de estilo, o navegador sabe ir e obter esse arquivo particular e agir automaticamente como se fosse uma folha de estilo sem ter que fazer qualquer adicional pensando, Eu estava indo para re adicionar a borda de volta aqui, e eu vou copiar este estilo. Vou cortar. É o que vou fazer. Nós vamos criar um novo arquivo colado aqui contra Basic não importa com CSS, e eu vou salvar isso como estilo dot CSS. Então temos estilizado em CSS e temos o arquivo chamado style dot CSS. Não há uso para isso, já que o atributo style agora está vazio. Agora abri isto no meu navegador. Vou tocar em Refresh. Nada mudou. Isso é perfeito. Verifique se estamos fazendo isso. Correto. Eu vou mudar essa borda Os cinco pixels de azul sólido salvando aberto no navegador Atualizar e olhar para isso. Está afetando. E, na verdade, o que eu quero fazer aqui é criar um link aqui e nós temos uma cópia disso aqui e voltar para a página principal. Agora temos um link no seu que vai para código em página. Ótima. Agora, quando não queremos voltar ao código uma página. Então você notou que obviamente há uma diferença aqui. Agora, novamente, o problema está naquela classe chamada fronteira. Está aqui dentro. No entanto, está em sua folha de estilo, que significa , você sabe, se tivéssemos 234 500 páginas iria abrir cada página e editar cada estilo manualmente. Não é isso que queremos. Então, em nossa página de código original, eu vou substituir o elemento de estilo pelo elemento de link. Ele vai vincular ao nosso estilo que a página CSS, e quando eu atualizar a página, eu estou clicando entre código e co. Dois pontos html. Aqui, nada mudou. Isso está impactando para que possamos ver o que mais está acontecendo aqui. Eu vou para o código. Uma palmadinha entrou em vigor. CO dois tapinhas entraram em vigor. Agora tudo o que eu fiz aqui foi que um pouco de CSS para um arquivo em particular, e está afetando ambos instantaneamente. Então, se eu atualizar minha página em co dot html e se eu ir para co dois dot html, é afetado ambas as páginas com sucesso. Agora, o principal benefício novamente é o tempo como programador. Como desenvolvedor da Web, você vai gastar muito tempo escrevendo HTML PHP JavaScript, Jake Weary CSS e você quer minimizar quanto tempo seus gastos em seu casaco a última vez que você gasta em seu código usando métodos como CSS externo quanto mais tempo você pode gastar construindo outras partes de seu serviço ou seu site agora como outra nota, se tivéssemos outro arquivo, não temos. Mas se fizéssemos e chamávamos de CSS de ponto de estilo, não podemos ter duas folhas de estilo no seu. Na verdade, podemos ter quantas folhas de estilo quisermos. Pelo bem deste vídeo, só temos um. Sua tarefa para este vídeo é uma tarefa bastante longa, e você tem que ir passo a passo através deste primeiro, criar um arquivado chamado código dot html assim como eu tenho. Então eu quero que você crie um segundo arquivo chamado Código para ponto html. Em terceiro lugar, criar um arquivo chamado estilo dot CSS quarto no elemento link para ambos co dot html e código para ponto html assim como fizemos em seu elemento cabeça. Em seguida, abra o estilo dot CSS e adicione um pouco de estilo básico para ele. Sinta-se livre para usar a borda é um pixel declaração vermelha sólida que temos usado em um monte de exemplos, em seguida, codificar dot html e co dois pontos html criar para desenvolvimentos em cada página para cada desenvolvimento na classe chamada fronteira mesma classe que usamos neste vídeo. Neste ponto, você deve ter dois arquivos com dois desenvolvimentos em cada um, para um total de quatro desenvolvimentos, todos com uma classe chamada border. Agora abra as duas páginas no seu navegador. Neste ponto, você terá duas abas abertas, e seus elementos def terão bordas. Agora. Eu quero que você abra o estilo dot CSS mais uma vez, removeu a borda desse arquivo, salve-o, volte para o seu navegador e atualize o código dot html co duas páginas dot html. Agora. Se você fez tudo certo, os desenvolvimentos não terão mais fronteiras. E você fez isso tudo simplesmente fazendo uma pequena mudança de um arquivo, e isso afetou duas páginas. 28. Cursos: Classes CSS ar como afetamos vários elementos com apenas um pedaço de código. Agora, nós abordamos isso em CSS interno, bem como CSS externo. Mas não aprendemos sobre a classe real. Atributo em si Assim, o atributo de classe aqui é um atributos globais e você pode marcar junto com quase todos os elementos neste vídeo. Você não vai aprender sobre CSS, nem você vai ser testado em nenhum dos CSS que nós acertamos. Mas a parte HTML que você será testado. Então vou abrir um espaço aqui. Eu ia ligar para essa aula de novo. Não se preocupe com o CSS, e o que eu vou fazer aqui é agora que eu tenho uma classe CSS chamada classe vai escrevê-lo aqui como classe e abrir isso no navegador e nós temos nossa borda sólida de um pixel. Provavelmente nada de novo para você neste momento. Mas onde isso é mais poderoso é a duplicação. Eu posso duplicar isso muitas vezes que eu gosto, então eu tenho cinco cópias aqui que vão aparecer cinco vezes as mesmas bordas que vão aparecer cinco vezes novamente. Se eu remover essa fronteira, afetará todos eles agora. O truque é que ele só funciona com os atributos de classe. E se mudarmos este também, também, este é um elemento I D, e tiramos esta página de atualização de classe. É o primeiro elemento que temos. Este primeiro elemento de bloco é o único com uma borda fora. A outra maneira de estilizar é através da ideia. Nós não vamos aprender sobre isso neste vídeo que será no próximo vídeo, mas I D não funciona como classe funciona. Então, se eu colocar ideias iguais à classe, a classe corresponde ao estilo dela, salvando atualizar um navegador. Nada acontece agora. Podemos ter várias aulas. É chamado de uma classe para, e queremos que o texto seja centrado. Também queremos que a cor seja lida. Nós vamos adicionar outra classe para o meio aqui, este vai dizer, tem duas classes, tem duas classes, e para adicionar outra classe, tudo o que temos a fazer é adicionar um espaço que é uma classe separador, também. Voltando ao navegador. Este tem um texto de fonte vermelha. Parece que é bem no meio, então sabemos que ele está trabalhando fora para a classe é a primeira classe como essa borda vermelha. A segunda classe tem o Tex Vermelho, e o texto está no centro agora. Poderíamos fazer isso com várias classes, não apenas duas, mas poderíamos fazê-lo com 345 50 se precisasse saber que é desaprovado usar 50. Mas se você precisa usar mais de um, é para isso que eles estão lá. Sua tarefa para este vídeo é criar um novo documento no elemento estilo do elemento cabeça na área do corpo. Quero que escreva cinco “D” de elementos. Todos eles têm que ter os atributos de classe. Em seguida, criar duas classes em seu CSS ou dentro do elemento de estilo e nomeá-los classe ponto e classe ponto, também. Estile-os da mesma forma que você viu neste vídeo. Então classe ponto deve ter uma borda com um pixel, vermelho sólido e classe para deve ter texto alinhar, centralizado e cor vermelha. Agora aplique a classe de ponto para todos os cinco dibs. Aplicar classe para dois DIV número 13 e cinco salvando abrir este documento em seu navegador e verificar se todas as dips têm bordas e que dão 13 e cinco também ter lido carinho e centro para texto 29. IDS: Há outra maneira de estilizar seu HTML usando CSS. Só funciona para CSS interno e externo. Ele não funciona para CSS em linha, embora em CSS linha estaria implícita. O que estamos falando é chamado de I DS, que tem desenvolvimento e um conjunto de uso de classe. Ou em vez de usar estilo, usamos I d. e vamos escrever com CSS interno. Embora isso funcione com uma folha de estilo CSS externa também. Agora, uma aula, lembre-se, sempre começa com um ponto e eu começaria com o sinal de libra sinal hashtag qualquer que você quiser chamá-lo começa com o seu sinal de número. Nós vamos chamar isso de eu d Você não vai ser testado no estilo, mas você vai ser testado sobre o que o HTM real são atributos e elementos são, então não sinto que você precisa saber todo esse CSS que nós vamos estar escrevendo neste. Mas você sente que você deve estar familiarizado com o HTML Agora quando eu abrir isso no meu navegador só diz que este é um eu d. Nada especial, nada único. Mas se eu adicionar borda inferior três pixels traço e vamos torná-lo preto, e eu aplicar este I d toothy I d atributos, e ele não tem que ser chamado I d também. Pode ser chamado de qualquer coisa. Na verdade, é isso que vamos fazer. Vamos renomear isso para qualquer coisa que corresponda a isso. I d atributo corresponde ao estilo do sinal de número. Se eu salvar um abrir isto no navegador, agora temos uma borda com três pixels de largura em Lee na parte inferior, é tracejada e preta. É exatamente o que queríamos agora, uma ideia supostamente única. Onde uma classe CSS lembrar aquela que começa com um ponto uma classe pode ser usada quantas vezes quiserem, e eu d só deve ser usada uma vez agora em navegadores modernos, como o que estou usando, estou usando um novo, atualizado do Chrome e I D funcionará mais de uma vez. Então, se eu voltar para as atualizações do meu navegador, sabemos que as ideias funcionaram duas vezes. Agora. Navegadores modernos geralmente são muito bons com isso, mas nem todo mundo tem um navegador moderno. Ainda há pessoas que estão usando navegadores muito desatualizados. Talvez eles não tenham acesso à Internet para atualizar o navegador ou eles não têm os fundos para comprar um novo laptop ou telefone ou dispositivo móvel de algum tipo como um desenvolvedor da Web é o nosso trabalho considerar todos que acessam a Internet e é o nosso trabalho de entender que todos acessam a Internet um pouco diferente. E isso significa que temos que trabalhar com muitos navegadores mais antigos. Nenhum navegador mais antigo. Pegue o Internet Explorer seis, por exemplo, provavelmente não renderizará isso da maneira que você vê agora. Na verdade, ele só pode realmente processar o 1º 1 e o 2º 1 terá apenas estilo em branco. Então, minimiza esse problema. Nós só queremos usar o mesmo eu d uma vez para que qualquer coisa possa ser aplicada a este elemento. Mas não deve ser aplicado a este elemento. O atributo idea é um atributo global. Ele pode ser aplicado a praticamente todos os elementos, e se você está pensando bem, isso só pode ser usado uma vez. Então, realmente, qual é o ponto de usá-lo? Tenha em conta que esta página pode ser basicamente multiplicada cinco ou 600 vezes para, você sabe, um site de tamanho justo e se você tem, por exemplo, uma barra de navegação em cada página e você quer mudar as cores ou a borda ou onde ele fica na página, você não mudaria nada desse estilo. Você não quer ter que abrir cada página e mudar. Em vez disso, você pode adicionar um I D. Assim como você adicionaria uma classe. Mas essa ideia é única para essa barra de navegação agora. Não só isso, mas quando você começa a entrar em JavaScript e Jake cansado I DS são muitas vezes a maneira mais comum de selecionar um elemento. Nós não vamos falar muito sobre isso, mas para dar-lhe algum tipo de insight tanto JavaScript quanto J. Query, que é uma biblioteca JavaScript. Tentamos acessar esse elemento. Ele poderia acessar os atributos, o texto dentro dele, o HTML dentro de seu único aninhado. HTML pode acessar tudo, e você pode alterá-lo. Remova, adicione-o, adicione mais a ele, copie um pingente pré. Você nomeia qualquer coisa que alguma vez mudar em sua página em qualquer site específico. Isso é JavaScript funcionando para você agora. A maneira ideal de usar um I D é se você fosse escrever, Há uma borda um pixel, vermelho sólido, e é a única vez que mostra o tempo Onley, seu estilo para isso. Em vez disso, você tira o estilo sobre os atributos de estilo, colocá-lo em CSS e direito I d. é igual a qualquer coisa. Então agora não só nosso estilo está sendo aplicado em uma folha de estilo, possivelmente uma folha de estilo externa, mas agora JavaScript e Jake, onde você pode acessar facilmente esse elemento. As ideias tornam-se muito mais populares, muito mais comuns, mais você se dá bem com suas habilidades de desenvolvimento na Web. partir de agora, não é importante que você saiba o estilo ou como escrever o CSS. Mas é importante saber o que é um I D e como ele difere entre uma classe. Então, sua tarefa para este vídeo é criar um novo documento. Adicione o elemento de estilo em seu elemento de cabeça, certo, um desenvolvimento dentro do elemento do corpo semelhante ao que fizemos neste vídeo, certo? Um CSS I d. Em seu elemento de estilo. Sinta-se livre para rebobinar este vídeo em pausa onde você precisa copiar o CSS. Se você não estiver familiarizado com o CSS. Se você está familiarizado com CSS, sinta-se livre para escrever o seu próprio. O próximo passo é então aplicar esse CSS i d. ao seu desenvolvimento. Usamos a idéia chamada qualquer coisa, mas você pode nomear qualquer coisa que você gosta de salvar abrir o documento em seu navegador e verificar se o estilo entrou em vigor. Se o estilo entrou em vigor da maneira que você queria, então você aplicou um i D ao seu elemento com sucesso. 30. citações: chegará um momento em que você precisa citar algo em HTML. Uma maneira simples de citar algo é simplesmente adicionar citações em torno dele. Isso funcionaria perfeitamente bem, no entanto, como desenvolvedores da Web, não é apenas nosso trabalho entender que as pessoas vão estar olhando para esses sites, mas também que os computadores estão olhando para esses sites. Isso significa que às vezes temos que aplicar uma marca especial apenas para computadores. Pegue o motor de busca do Google comprado Google comprou. Por exemplo, quando o Google comprou olhares para esta página, ele quer descobrir de onde certas informações estão vindo. E uma maneira de fazer isso quando estamos citando outro site é adicionar uma citação em bloco. Então nós temos um elemento de citação de bloco, e isso vai ser apenas um pequeno título acima dele, disse ele. E na citação de bloco, faça ou não. Não há nenhum Try Yoda. Agora, se salvarmos isso e abrirmos isso em um navegador, a citação do bloco será automaticamente recuada para nós. Esse é um problema resolvido. Nós não temos que nos preocupar em inventar agora, porque Block Citação está fazendo isso para nós agora. A maioria dos navegadores irá adicionar um recuo, mas não todos eles bem, e este é um daqueles momentos em que é ótimo para verificar o seu trabalho em outros navegadores para tentar abrir esta página no Internet Explorer ou Edge opera Safari Chrome Firefox. Veja se há alguma diferença se não há diferenças do que grandes. Mas se houver uma diferença, então você vai ter que contornar esse navegador para ter certeza de que ele parece o mesmo que qualquer outro navegador. Agora há outra maneira de adicionar uma citação, e isso é simplesmente adicionando cotações. Mas em vez disso usamos o elemento Q que o outro cara falou. E vamos colocar isso. Q sentido para citação, você foi o escolhido. Atualize a página e teremos cotação automaticamente. Não só isso, mas há realmente um espaço entre a citação em que é devido ao fato de que há brancos extras se baseando aqui. Agora sabemos que HTML não é sensível ao espaço, então se adicionarmos 20 espaços no final dele, ainda assim, eu vou aparecer com um espaço na página real. Lá vamos nós agora temos citações antes e depois. Agora queremos considerar citar as fontes, e usamos os atributos do site em ambos os elementos, citando sua fonte realmente só tem a ver com citar algo. Agora os atributos do site valor que o site deve ser não deve ser Yoda ou, neste caso, seria Obi Wan Kenobi. Não seria nenhum desses, embora nós estamos citando eles, o site deve realmente ser a fonte completa de onde encontramos essa informação. Então, se o encontrarmos na Wikipédia, a citação deve ser a UL completa de onde encontramos esta frase em particular. Então, por exemplo, se encontrarmos isso na Wikipédia poderia ser a Wikipédia ponto com e citando este. Podemos ter descoberto isso em um site de fãs de Star Wars ou em um livro específico, mas onde quer que seja, tem que ser um link real. Então, sua tarefa para este vídeo é criar um novo documento. Nesse documento, eu quero que você use o elemento de aspas de bloco, e dentro desse elemento, insira uma frase nele. Não importa as frases que possa ser. Qualquer coisa. Então eu quero que você use o elemento Q e insira uma frase nele novamente. Não importa quais são as frases, mas certifique-se de ter uma aí dentro. Então eu quero que você adicione sua citação para cada frase. Portanto, use os atributos do site tanto na cotação de bloco quanto no elemento Q. Não te esqueças que não estás a citar uma pessoa individual. A citação é uma fonte Você Earl, salvando sobre o documento em seu navegador e verifique se sua citação de bloco e frase citada funcionaram da maneira que você viu neste vídeo. 31. Código de computador: html é tudo sobre semântica. Não tanto o estilo, mas mais sobre o que está sendo lido por outro computador. Pense nisso dessa maneira, e quando pensamos sobre isso dessa maneira, temos alguns tipos diferentes de códigos de computador que não só vai estilizar o texto um pouco diferente, mas permite que outro computador leia ou HTML e entenda o que é olhando. Então temos alguns elementos diferentes que vamos rever neste vídeo. Vamos aprender qual código é o que Samp K B D. Var é primeiro de procurar texto normal. Este é um texto normal, e como você pode ver, parece normal. O texto revestido é diferente. Na verdade, se adicionarmos outro pedaço de código aqui vai notar que as letras realmente alinham onde C é sempre um para três de Dia. Ele tem quatro dias. Cinco Espaços são sete aqui. fonte normal e a fonte codificada não se alinham corretamente. Então isso é ótimo se você está escrevendo código muito específico em sua página da Web e as letras têm ser alinhadas corretamente, muito parecido com o que você vê no meu editor aqui Em seguida, temos exemplo este é um exemplo exemplo. Qualquer que você queira usar, é uma amostra, no entanto, e uma pedra é um pouco diferente do código. Em seguida, temos entrada de teclado K BT novamente parece um pouco diferente, e por último temos. Eles são muito iguais. Variável que é realmente representa é variável e mais uma vez é tudo diferente. Sua tarefa para este vídeo é criar um novo documento. Escreva o teclado de exemplo de código e elementos variáveis. Coloque algum texto entre esses elementos e salve-o aberto. O documento verificou que cada estrangeiro parece diferente. Cada seção parece diferente, e então uma vez que você fez isso, talvez em algum texto normal colocado no início, bem no final, bem no final, você pode usar quebras de linha como o que eu fiz. O objetivo por trás dessa tarefa é entender que não há apenas uma diferença entre variáveis, amostras de entrada de teclado e código de um ponto de vista semântico. Mas também parece diferente do ponto de vista de um usuário. 32. Forte e ênfase: Até agora, você deve saber como fazer algo ousado ou como adicionar itálico a ele. Aberto a este ponto, usamos apenas o elemento B no elemento I negrito e itálico, respectivamente. Mas há dois outros elementos que entram em jogo também, e esses são fortes e enfatizam. Agora, a maneira como você pode pensar sobre isso também é ousada. Negrito e forte é mais forte que Bolt, e E. M é a 1ª 2 letras de ênfase, e você sempre escreve um talento para adicionar ênfase. Mas há diferenças entre Bolden, strong e Yem, e eu sei que a principal diferença tem a ver com leitores de tela. Muitos desenvolvedores nunca ouviram falar de um leitor de tela. Na verdade, uma boa maioria dos usuários da Internet apenas lê artigos por conta própria. Eles não têm um computador. Leia para eles, no entanto. Mas há muitas pessoas cegas no mundo que usam leitores de tela para ler para eles sobre o que eles estão olhando, e essa é a principal diferença. Negrito é simplesmente boliche. É só deixar as letras em negrito. É, é visual, é tudo o que é. Mas forte é uma ênfase forte, como você poderia dizer, Você quer fazer algo agora ou você pode dizer Você quer fazer algo agora é como adicionar ênfase Mawr antes de um ponto de exclamação e a diferença entre E. M e eu praticamente o mesmo. É tudo sobre como você iria lê-lo. Por exemplo. Estou muito cansada. Pode estar em maiúsculas, mas a maioria dos casos não vai ser. Na verdade, poderíamos adicionar um I o elemento itálico, e isso iria aparecer como eu estou realmente cansado como um pouco de ênfase extra. Mas, novamente, há puramente visual para leitor de tela leitor de tela precisa desse elemento de ênfase. E novamente, cada um cheira tudo sobre semântica. Não se trata de parecer diferente. É um barco sendo estruturado corretamente. Então, para um leitor de tela, não vai dizer que estou realmente cansado. Um leitor de tela vai adicionar ênfase adicional que você está realmente enfatizando a palavra , realmente. Então o leitor de tela provavelmente iria ler a frase mais ao longo das linhas fora. Estou muito cansada. ênfase quase muda a pronúncia da palavra. Agora, se você quiser escrever um artigo sarcástico que seja amigável ao leitor de tela, você usaria muita ênfase, muitos elementos E m. sarcasmo é muitas vezes afastado de muita ênfase, possivelmente muita ênfase na maioria dos casos. Por exemplo, se um leitor de tela estava lendo uma frase que dizia algo ao longo das linhas, o homem que estava na fila do McDonald's colocou a mão no bolso e pegou um punhado de trocos. Foi quando ele percebeu que era muito rico. Isso é sarcasmo. Ele sabe que não é rico. Esse é um cenário em que você usaria ênfase em vez de apenas eu. Então, muitas pessoas neste momento estão perguntando, bem, onde você usaria ousado ou apenas metal? Se estamos adicionando ênfase especial para leitores de tela de qualquer maneira, qual é o ponto de usar o plano de Boulder em itálico simples? Bem, a idéia é, para as pessoas que estão visualmente olhando para um site ou visualmente olhando para o seu artigo, Bolt chama muita atenção. Então, se você tem um parágrafo inteiro de apenas texto regular e, em seguida, você tem uma frase que é apenas dobrada, pode não necessariamente precisar se destacar de forma diferente. Para um leitor de tela. Pode ser. Talvez precise ser lido exatamente da mesma forma que o texto normal seria vermelho, mas você quer que os olhos de alguém sejam atraídos. Pode ser uma ligação. Pode ser um botão pode ser algum tipo de chamada à ação. Ou se você quiser apenas adicionar itálico, ou se você quer que alguém coloque suas bocas sobre uma palavra específica para mostrar-lhes a definição ou dada pequena dica de ferramenta ou alguma ajuda adicional que você obter em itálico porque esses não são necessários para leitores de tela. O Screen Reader não se importa se você pode colocar sua boca sobre ele ou não é ele está lendo o artigo para você. Não é tão importante, então ele vai pular o I. Mas alguém visualmente olhando para o seu site novamente vai chamar a atenção deles, e eles podem realmente tomar medidas sobre isso. Essa é a diferença entre ousado e forte e itálico e ênfase. A menos que você tenha um leitor de tela, não há tarefa para este vídeo. Você provavelmente poderia ir e obter um leitor de tela, extensão Chrome ou Firefox. Adicione ou venda no aplicativo em seu telefone, se você realmente quiser. Mas se você não tem naturalmente um desses agora, basta saber quais são as diferenças e ser muito consciente quando você está escrevendo um artigo quando você está usando HTML, você tem que perceber que haverá pessoas que não podem fisicamente ver o que está sendo lido para eles. E se começarmos a falar sobre otimização de motores de busca para um motor de busca, estes são elementos muito, muito diferentes. 33. Elementos de cabeça: o elemento de cabeça HTML, como vemos aqui, é parte de duas seções principais desse documento. Modelo de objeto o D um, que é HTML. Todo o seu HTML entra aqui, e seu navegador cria esse modelo de objeto de documento. E há duas seções primárias onde você coloca seu casaco na cabeça e no corpo. A cabeça não vai muito fundo. Essa hierarquia é bastante curta e consiste em elementos como Title. Mas há outros elementos. Normalmente, elementos que você não vê entram em vigor em uma página que colocamos aqui agora . O elemento título obviamente entra em vigor imediatamente, e vemos isso na aba de qualquer janela que abrimos. Sabemos que o elemento de estilo também deve ir na cabeça, porque é aí que um CSS é renderizado. Nós colocamos seu estilo e eles estão no navegador, diz certo, Esta informação que eu preciso segurar e aplicá-lo ao corpo. Há outro elemento chamado base. É um auto-fechamento de um script. É muito parecido com o estilo. No entanto, em vez de colocar estilo dentro de um script, colocamos javascript. Nós lidamos com a adição de CSS externo, e usamos o elemento link e que entra na cabeça também. E por último, temos o elemento meta, e tivemos todo tipo de informação para uma meta tag aqui. O elemento meta é onde você adiciona coisas como palavras-chave à sua página ou descrição da sua página . Não se limita apenas a isso, mas essas são geralmente as duas meta tags mais populares que usamos. Não, nós não vamos rever todos os meditados agora, mas estes são os elementos mais comuns que você usa dentro do elemento tinha. Temos o estilo de título baseado no link de script auto-fechamento, auto fechamento e meta auto fechamento. Não há tarefa para este vídeo, mas é importante que você saiba que esses elementos devem ir no elemento de cabeça, bem como na seção de cabeçalho de sua página. É muito importante que você saiba que adicionar o título ao corpo da sua página não vai fazer muito pode ou não ter o efeito desejado que você deseja em todos os , especialmente os navegadores mais antigos que foram muito mais estilo estrito. Sabemos que podemos colocar dentro do corpo se quisermos, mas devemos entrar na base da cabeça sempre entra. O roteiro principal pode ir basicamente a qualquer lugar, e um desses lugares está no link principal. Quando você está vinculando a uma folha de estilos externa tem que ir para dentro. A cabeça tem que ser carregada antes que qualquer outra coisa na página seja carregada e seu meta absolutamente foi em frente é que é o único lugar útil para ele. 34. metadados: meta tags no cabeçalho que se parecia com isso. Eles sempre vão dentro do elemento head, e há toneladas de diferentes tipos de meta tags que podemos usar. E então todos começam com Metta. Mas a diferença é que há atributos de medicamentos para metadados. São dados adicionais que ajudam a página a definir quem é. É a personalidade da página. Não necessariamente vê-lo na superfície, mas os raspadores de mecanismos de pesquisa até mesmo o Facebook usarão metadados para descobrir o que as páginas sobre. Em apenas um vislumbre, há toneladas de atributos de metadados diferentes. E então eu encontrei esta página. Vou compartilhar isso com você e vou colocá-lo nas páginas. Você pode baixar isso também, e eu vou passar por alguns desses com você. Samata Care Set, um personagem disse, é utf oito. Isso é um padrão geral. Isso significa que símbolos especiais irá aparecer um símbolos especiais em vez de geralmente uma caixa de diamante preto com uma pergunta. Marque dentro dela. Palavras-chave. Este é um dos mais populares que você coloca suas palavras-chave para cada página lá. Se você estiver escrevendo um artigo sobre HTML fez uma tag, você mudaria o conteúdo. Este atributo dois fez um tags provavelmente tinha mais um lá chamado HTML Fun fato motores de busca usados para usar as palavras chave feitas quatro rankings Até cerca do tempo que o Google veio em torno, nós usamos para preencher nossas palavras-chave com 506 100 palavras diferentes. Se pudéssemos, nós apenas colocamos tantas palavras possíveis e variações de cada palavra neste elemento particular , e os motores de busca imediatamente nos classificam mais alto. Felizmente, esse não é mais o caso que não funciona. Você provavelmente não deve ter mais de 10 mais do que 10 e um motor de busca tem a possibilidade de olhar para sua página e dizer que isso provavelmente é apenas spam. A próxima é a descrição. Este ano diz 150 palavras. Mantenha sua descrição mais curta quando estiver procurando algo no Google. Quando você faz uma pesquisa na Internet no Google, essa descrição geralmente não é muito longa. Não são 150 palavras. É mais como 150 caracteres. Meu conselho Mantenha-o mais curto do que um tweet 140 caracteres ou menos. O sujeito. Isto está realmente errado aqui. Se ele tivesse usado citações duplas em vez de citações regulares ou apóstrofos. Esse problema não apareceria agora. O navegador olharia para o seu site, e eu acho que estes são os atributos e que isso é apenas lixo. Temos direitos autorais se houver uma linguagem de direitos autorais, geralmente um código de dois caracteres. Sim, para espanhol. D para robôs alemães. Você quer um robô? Um mecanismo de busca para seguir a página de um índice da última vez que foi revisado. Ah, vamos pular alguns desses algo que é um pouco mais comum, como autor. Você colocou seu nome seu endereço de e-mail lá, se você quiser. Pessoalmente, eu não colocaria seu endereço de e-mail lá. Eu acho que um monte de possível Raspe sua página, encontrar seu endereço de e-mail e apenas começar a enviar spam para você. Mas seu nome ou seu identificador do Twitter geralmente é encontrar proprietário Seu nome apenas pulando através de alguns desses. Aqui você tem um médium. O que é isso? São blogueiros? Ele flog é um canal do YouTube e esses são todos apenas nome e conteúdo. Você pode explorar esta página por conta própria. A única coisa que eu notaria que o fez um texto fechado indevidamente. Armida tag deve ter uma tag auto fechamento e que segue as regras do X HTM fora HTML estrito , mas usa como um exemplo geral. Nome é um atributo conteúdo é atributos. Temos aqui alguns chamados http Quiver, Sra. Cashing. Quando é que expira? Expiração Mawr, etcetera, etc. Estão até Mawr aqui. Use-o para se você estiver criando um aplicativo. Internet Explorer fez um tags Quando foi oito meta tags e assim por diante e assim por diante. Sinta-se livre para explorar esta página. Eu não vou passar por cima de todos eles. Provavelmente há mais meta tags lá fora. Ela pode querer entrar no Google e pesquisar você mesmo. Você não precisa ter todos os homens atacando também. Ah, muitos novos desenvolvedores. Eles pensam que ter todas as cabras possíveis meditar lá em cada página que eles têm vai ajudá-los a classificar melhor. Vai tornar a página deles melhor para compartilhamento social, como no Facebook e todas essas coisas, e isso não é necessariamente o caso. Você realmente só precisa de seus importantes. Palavras-chave do conjunto de caracteres, descrição e robôs são provavelmente cinco dos 10 primeiros. Agora sua tarefa para este vídeo é realmente vir a esta página e apenas explorar Leia através deste. Pode parecer muito, mas não é muito. Muito disso é auto-explicativo, e se você não sabe o que um em particular é, pule no Google e tenho certeza que há uma resposta para isso. 35. Favicon: uma tela em é uma pequena imagem que você vê na aba da janela. Um ótimo exemplo disso é quando você acessa o Google na guia. Diz que o Google e ao lado tem essa pequena imagem. Quase todos os sites tem um desses em um tecido em você usou o elemento link assim como nós vinculamos a outras fontes, como uma folha de estilo em cascata externa. O relacionamento seria um ícone, e então você ligado a ele usando H. R F. É geralmente tecido em ponto I. CEO Seo é a extensão do ícone, embora muitos navegadores modernos também aceitam imagens como PNG e o tipo sua imagem barra ícone X e você fecha-o e isso é tudo de tecido em. É o problema com tecido em é o ponto I seo extensão. A extensão do ícone não é facilmente criada lá. Plugues fotoscópicos. Dependendo da loja de fotos que você tem, você pode ou não pode criar um ícone. Então, em vez disso, você pode usar um PNG e que funciona normalmente justiça. Encontre em um navegador moderno agora ícones ou o que você usa para todos os navegadores. Vamos aceitá-lo nos navegadores realmente antigos, porque ainda há pessoas usando esses, e é aceito nos navegadores modernos também. malha em geralmente é de 16 pixels por 16 pixels, portanto, não é muito grande e geralmente está em algum lugar no servidor. Sua tarefa para este vídeo é criar um novo documento, e então eu quero que você encontre ou crie seu próprio ponto i c e o seu ícone fab con ponto. Se você é incapaz de salvar quaisquer arquivos do Photoshopped, qualquer outro serviço de imagem que você está usando como um ponto i seo sinta-se livre para saltar em imagens do Google e apenas olhar para um ponto I imagem CEO. Então eu quero que você aplique a malha em sua página, salvando abrir o documento e verifique se a malha sozinha é exibida corretamente. Se você vir a pequena imagem ao lado do seu título na aba da janela, então você adicionou uma malha no 36. Entidades: HTML tem alguns caracteres reservados. Por exemplo, se você apenas tentar escrever um sinal maior do que um sinal de lição em HTML, ele não aparecerá da maneira que você pensa. Por exemplo, se eu disse que meu nome é e, em seguida, você colocar um espaço reservado lá chamado nome, mas você tem o maior do que menos sinais em sua parece um HTML Elements salvar isso. Abra no seu navegador, e ele não aparece. No entanto, se você olhar em seu código-fonte, ele está lá. Isso é porque seu navegador está indo para o pé automaticamente. Suponha que isso seja, por alguma razão, alguma forma, um elemento. Então, em vez disso, precisamos usar o que são chamados entidades HTML. Essas entidades tipicamente começam com um e comercial que é o sinal e terminam com um ponto semi vírgula, e eles têm alguma variação de letras entre ele. Então, se dissemos que é por menos do que e vamos fazer mais um aqui, temos GT. Isso é maior do que, e eu vou aplicá-los ao nosso elemento, salvá-lo visualização no navegador, e ele aparece da maneira que queríamos aparecer. O sinal menor que aparece maior do que simples aparece. Nosso elemento ainda aparece agora, se vermos nossa fonte, é porque o que fizemos foi certo. A entidade HTML real para o maior que e menor que símbolos é foram maiores do que nós realmente escrevemos um longo caminho em vez de escrever um caractere porque seu navegador interpreta o caractere como parte de um elemento. Agora essas entidades vias aéreas para criar símbolos, e não é apenas limitado a menos ou maior do que se você quisesse adicionar o sinal e parece fácil o suficiente, mas em html seria realmente um M P que seria e M por cento. Esse é o sinal e. Mas também funciona para caracteres que você pode não ter disponíveis no teclado. Por exemplo, o símbolo de direitos autorais que a maioria dos teclados que eu vi não tem um símbolo de direitos autorais. Esse personagem não é comum o suficiente para realmente colocar um teclado. Então, em vez disso , em HTML, escrevemos e copiamos semi cool, e isso é um símbolo de direitos autorais, e até funciona para espaços extras. Então, se dissemos extra adicionou espaços Atanas aqui versus e B S P A significa espaço não quebrando , nós apenas adicionar número destes aqui. Vamos dar uma olhada no que uma página está nos apresentando. Agora temos um menor do que temos maior do que o símbolo comercial mostra redatores trabalhando espaços extras em nosso código. Temos todos esses espaços que não aparecem. O navegador assume automaticamente que você realmente quis dizer apenas um espaço individual. Ambos os personagens. Com todas essas entidades, adicionamos espaçamento adicional. São entidades HTML para quase todos os caracteres. Sua tarefa para este vídeo é criar um novo documento. Eu quero que você escreva o menos que um percentual de direitos autorais e entidades de espaço não quebrando salvando abrir o documento. Verifique se os caracteres apareceram corretamente. E se você quiser uma lista de MAWR dessas entidades, sinta-se livre para entrar no Google e fazer uma busca por uma lista de entidades HTML 37. Formulários: formers ar como nós enviamos dados para um servidor. Você usa formulários o tempo todo. Use-os em formulários de redefinição de senha da Loggins, formulários de cartão de crédito e assim por diante. Sempre que você entrar em um site, você usou um formulário. O elemento que usamos é o elemento de forma, e ele vai para dentro. O corpo tem uma etiqueta de abertura e fechamento, e há certos elementos que usamos dentro de um formulário. Agora, esses elementos podem ser usados fora de um formulário, mas eles são mais úteis dentro de um formulário. E estes são, mas não limitados a entrada, que é um botão de área de texto auto-fechamento e selecione. Vamos passar por cima do botão de área de texto de entrada e selecionar elementos um pouco mais tarde. Neste momento, só estamos cobrindo o que é uma forma. Um formulário tem alguns atributos primários que são extremamente importantes. O 1º 1 é método, e este é geralmente get ou post. Agora, quando usamos, obter e enviar um formulário, as informações de nossos campos de entrada, como área de texto de entrada, selecione aqueles que vão aparecer na barra U L. Então, se você está tentando fazer login em alguém, eu não quero usar esse método. Na verdade, uma boa regra de ouro é qualquer momento, qualquer tipo de informação que eles poderiam até ser considerados como sensíveis precisa ir do navegador para o seu servidor. Não use get Em vez disso use post. Enviará a mesma informação, mas não passará pela U.R. L. Bar. Em vez disso, ele silenciosamente vai em segundo plano, e então nós temos nossos atributos de ação, e os atributos de ação é onde a informação deve estar indo. Então, se ele está indo para esta página, ele vai para código dot html. Se ele estiver indo para uma página de servidor, você pode querer enviá-lo para fazer login dot PHP. PHP é uma página de servidor. Não é uma página de tipo HTML estático, e a ação é o arquivo que você deseja vincular para saber que ele não precisa ser um parente. Você, Earl. Pode ser um euro exato. Agora é assim que um formulário se parece em HTML. Se visualizarmos isso no navegador agora, ele não vai aparecer com muito, e ainda não sabemos o que botão de área de texto de entrada ou select realmente faz. Mas é vital que você entenda o método diferente e ação, então sua tarefa para este vídeo é simplesmente praticado isso. Primeiro, quero que você crie um novo documento, e eu só quero que você pratique a escrita. O elemento forma o ar tão vital em HTML, é como transferimos informações do navegador para um servidor ou outro serviço. Na verdade, é tão poderoso que pode ser seguro dizer que pode realmente ser uma das espinhas dorsais da Web. É importante saber qual é o método de atributos de ação. Então, seu terceiro passo é escrever o método em atributos de ação. Você não tem que colocar nada específico dentro deles, apenas escreva-os. 38. Attributes de elementos de formas: elementos do formulário são elementos que podem ser usados fora de um formulário, mas eles são muito mais úteis dentro de um formulário. Esses elementos são tipicamente o elemento de entrada, área de texto de fechamento automático, os elementos de seleção e botão. E este vídeo. Vamos rever estes muito rapidamente, apenas como uma visão geral rápida. E em vídeos futuros, vamos rever estes um por um. 1º 1 que queremos passar por cima é o elemento de entrada. O elemento de entrada é simplesmente um campo de entrada. É muito pequeno, mas também é muito poderoso. Agora, se eu apenas escrever a entrada, é um Nós também temos que adicionar um valor de texto aqui. Estávamos dizendo, o tipo de entrada é imposto e vamos entrar no tipo em apenas um momento. Então agora nós visualizamos a página e temos uma área de texto que eu posso escrever aqui. Agora o usuário tem alguma maneira de interagir com sua página, suas páginas, não apenas informações que vão para eles. Eles podem enviar informações. Back Type tem um monte de valores diferentes que podemos usar. Texto irá criar um botão caixa de texto irá criar um botão, mas não vamos usá-lo desta vez. disse. Nós vamos aprender sobre o elemento botão que você pode em uma cor caixa de seleção. Na verdade, vamos rever cada um desses para que possamos ver como eles realmente se parecem. Comece do início. Texas 1. Caixas de seleção. Outra. Chegaremos na data das cores. Esses são ambos html cinco. E-mail. O navegador tentará validar o endereço de e-mail. Se você colocar na madrasa e tentar enviar o formulário e não é um endereço de e-mail válido, seu navegador irá dizer por favor e colocar um endereço de e-mail válido novamente. Isso é apenas um arquivo HTML 5. Este é outro grande. Se você quiser fazer upload de um arquivo específico que você usar tipo é igual ao arquivo oculto. Esta não vai aparecer, então vamos ver uma linha vazia na página dela. Livre-se dos texanos. Não é mais aplicável. Que tal um número? Você pode adicionar um número lá ou uma senha. Isso significa que quando alguém digita essa caixa, isso não vai aparecer como texto normal. Vai aparecer como aqueles pontos de bala. E quanto ao rádio? Poderíamos até colocar o U.R L. Existem outros, mas estes são os que vamos ficar com agora, porque estes são os mais comuns agora, antes de comentários no navegador, Vou simplesmente rotular estes agora. Eu vejo isso no navegador. Temos um campo de texto enfraquecer direito neste campo de texto com uma caixa de seleção. Podemos selecionar uma cor novamente. Este é apenas HTML cinco por data novamente. Isto é apenas HTML. Cinco. Os navegadores antigos não podem lidar com o e-mail do campo de cor e data. Ele se parece muito com um campo de texto, mas quando você tenta enviar o formulário e ele não funciona, o formulário não será enviado automaticamente. Na verdade, um pequeno erro aparecerá logo acima ou abaixo dele. Pequena dica de ferramenta em seu navegador dirá por favor sob um arquivo de endereço de e-mail válido. Você pode. É como um arquivo escondido. Nada aparece número. Estou tentando digitar isqueiros, e aqui nada está funcionando, mas os números funcionarão. Posso até movê-lo para cima e para baixo. A senha é exibida como um botão de opção de senha normal. Isto é, se você quiser que alguém para selecionar uma das várias opções e um u L. Você está doente. Você coloca o endereço exato do site lá, isso é validação HTML 5. E se o seu navegador não acha que é um u R L. válido Ele não vai deixar você parte do formulário novamente vai dar-lhe um pouco de ar acima ou abaixo dele, dizendo para você inserir um euro válido em um título rápido aqui, Chame-os de Fields. E aqui vamos chamar esses atributos porque é isso que vamos aprender a seguir. Há alguns atributos aqui que você precisa saber. O 1º 1 é os atributos de valor. O valor é o valor que você deseja colocar aqui. Então, se dissemos campo de texto e o valor é página de atualização de texto pré campo, o campo de texto já tem texto lá. É exatamente o que especificamos. Enfraquecer. Selecione-o. Podemos apagá-lo. Fazemos o que quisermos. Outro seria. Vamos usá-lo no foco automático do e-mail. Então, em html nós normalmente poderíamos apenas escrever foco automático. Mas porque nós escrevemos x html, que é muito mais rigoroso, nós digitamos foco automático é igual ao foco automático. Agora, quando eu atualizo esta página, não importa o que eu faça, não importa qual campo eu vá. Toda vez que atualizo a página, eu sou automaticamente colocado no campo de e-mail para que eu não precise clicar nela. Eu poderia começar a digitar. Isso é um passo a menos para o usuário. Isso geralmente significa que eles vão preencher informações um pouco mais rápido. Há outro para caixas de seleção. Cheque. É igual a marcado, então a caixa de seleção não está marcada agora. Mas se atualizarmos a página depois que adicionamos esses atributos e agora é por padrão, ela será adicionada novamente. Podemos remover isso se quisermos. Obviamente, as caixas de seleção só funcionam para itens que você pode marcar, como uma caixa de seleção ou um rádio. E o foco automático é realmente usado apenas em campos nos quais você realmente insere texto. Agora vamos adicionar outro. Vamos desativar um que temos desabilitado é igual a desabilitado, e você notará que o campo URL aqui está desabilitado. Na verdade, mudar de cor um pouco, e eu não posso clicar nele. Quando falamos de números, podemos adicionar um mínimo e um máximo. Alguns homens com digamos que o mínimo é 10 e o máximo é 20 Agora este é um pouco se eu puder colocar em qualquer número digitando. Mas quando uso flechas, não posso ir mais alto que 20 e não posso ir mais baixo que 10. Agora, se queremos que um campo seja lido, só isso significa que eles não podem editá-lo. Usamos os atributos somente leitura. Coloquei isso no campo de texto. Sabe, quando coloco o mouse sobre um campo de imposto normal muda o cursor. Este caso, não acontece quando eu entro nele, nada acontece. Ainda posso selecionar o texto. Eu simplesmente não posso mudar nada disso. Isso significa que há um campo disponível, mas eu só devo lê-lo como usuário. Eu só deveria ler outro grande espaço reservado. Coloque isso na senha, e ele aparece em segundo plano. Agora não é texto selecionável, e ele desaparece assim que você digita nele. E quando não há nada, aparece automaticamente espaço reservado como ah, aviso rápido nem sempre funciona com o Internet Explorer, portanto, às vezes, quando você adiciona um espaço reservado para um Internet Explorer, mesmo alguns dos as versões mais modernas do Internet Explorer. Ele só vai aparecer como um campo em branco, então não necessariamente dependa disso. Mas você pode usar esse atributo como uma forma de melhorar seus campos para navegadores mais modernos. E se quiséssemos adicionar um comprimento máximo máximo e isso funciona para áreas de texto, se quisermos, digamos, o comprimento máximo vai ser oito caracteres agora, se eu digitar esses números, eu sou pressionando nove agora e nada está acontecendo. Máximo de caracteres oito. E então, por último, temos auto completo, e este na verdade não é. Auto complete é igual a auto complete. É qualquer um dos dois. Muito completo está ligado ou desligado agora. Se você o queria ligado e alguém estava digitando seu endereço de e-mail e ele o digitou no endereço de e-mail em um formulário semelhante antes que o navegador vai reconhecê-lo e tentar preenchê-lo automaticamente para você. Há alguns outros que eu quero ir sobre o primeiro 1 é o nome. Este é um atributos globais, e se você é quatro, método é obter o nome vai aparecer na barra u. R L, então arquivo seria capaz de nome do arquivo é igual a oculto ou, neste caso, apenas H. E o que isso pareceria é que você teria seu site dot com barra co dot html página, e então você teria o que é chamado de uma string de consulta. Vamos falar sobre isso mais tarde no get video, mas como um exemplo rápido, ele iria aparecer com Nome H é igual a qualquer que seja o valor aqui. Então, se tivéssemos um valor de 123 H é igual a 123 e vamos realmente mover isso aqui e colocá-lo com o endereço de e-mail e dizer e-mail é igual a e qualquer que seja esse valor. Então, digamos que o valor para o endereço de e-mail que alguém colocou no endereço de e-mail como e-mail no gmail dot com, e isso apareceria como e-mail no email dot com. Então ele iria literalmente para esta página novamente. Falaremos mais sobre isso um pouco mais tarde em outro vídeo, mas isso é rápido. Qual o nome atributo Will Dio. Claro, todos eles podem ter um I D. Eles não podem ter aulas e todos os títulos. Estes são todos atributos globais agora. Não há nenhuma tarefa para este vídeo, no entanto, você pode querer ver este vídeo apenas mais uma vez, mesmo se ele está em avanço rápido apenas para obter um bom controle sobre o que está acontecendo aqui. Há muito a saber há um monte de atributos diferentes para o elemento de entrada único, e você vai precisar saber, você pode usar um espaço reservado em uma entrada oculta? Tecnicamente, sim, mas está escondido, então não vai fazer nada. Você pode colocar atributos de foco automático em um botão de opção? Talvez então, talvez experimentar com alguém que, mas a coisa mais importante a saber são esses atributos. E no futuro os vídeos vão passar por cima do botão de área de texto de entrada diferente e selecionar elementos individualmente sem todos esses atributos, e vai apenas dar uma olhada em como eles realmente operam dentro do navegador quando alguém está trabalhando com eles. Quando um usuário está realmente usando esses elementos 39. Campos de entrada: O elemento de entrada é como adicionamos entrada a uma página que permite que um usuário se comunique conosco. Eles podem colocar em texto, apertar um botão de envio e essa informação vai de volta para o nosso servidor, então pode reagir a ele e mostrar-lhes as informações apropriadas. Como quando você entra no Facebook, entre em sua própria conta. Facebook. Entenda que você fez login para fornecer um feed personalizado. Então, para isso, vamos dizer tipo é texto que é apenas campo de texto normal. E só para você saber o que isso parece, apenas um campo de texto normal. Agora também podemos adicionar um espaço reservado. Chame esse primeiro nome, e quando eu atualizar a página diz que o primeiro nome não é selecionável, mas dá uma dica do que deveria ser. Valor. O primeiro nome pode ser qualquer coisa. Este é apenas o valor padrão. Você pode nem sempre precisar de um valor padrão, mas se precisar de um, coloque-o lá. E se você queria alterar a largura deste elemento de entrada, usado o tamanho. Atribuir o tamanho, atributos quantos caracteres é suposto ter. Então vamos mudar para 50 e quando atualizamos a página, ela fica mais longa. Lembre-se, isso são caracteres, não pixels, porque se dissemos 500 pixels, isso deve ocupar cerca de 45% da minha tela. Mas porque ele funciona em caracteres e não pixels, ele ocupa o que parece ser 250% de mente maior tela. Lembre-se de que o tamanho é baseado em caracteres, não pixels. Se você quiser focar automaticamente, basta digitar o foco automático e, sempre que atualizar a página, você poderá começar a digitar automaticamente. Você não precisa necessariamente clicar no campo. Posso clicar fora dele, atualizar a página e selecioná-la automaticamente para mim. Sabe o que acontece se eu duplicar isso? Há foco automático em dois campos. O que vai acontecer? E foco automático no primeiro campo. Alguns navegadores podem focar automaticamente no último campo. O foco automático deve ser exclusivo para uma página individual. Isso significa que se você tem uma página de login e deve se concentrar automaticamente no endereço de e-mail ou nome de usuário . Geralmente é o primeiro campo em um formulário que é focado automaticamente, mas você não necessariamente precisa usar isso também e vamos mudar esse sobrenome de um dedo e vamos desativar este. Agora posso mudar o primeiro nome, mas não posso mudar o sobrenome. Posso selecioná-lo, mas não posso alterá-lo. Então, essencialmente, este é o seu campo de entrada. Agora, em um vídeo anterior, aprendemos sobre os diferentes tipos de entrada. Os campos não precisam ser uma área de texto. Pode ser o botão de opção da caixa de seleção. Você poderia até ser um botão em si. Por exemplo. Vamos ver o que acontece quando mudamos o tipo para botão. A única coisa que realmente funcionou foi o status de valor Skywalker e está desativado. Não consigo clicar nele. E o tamanho do trabalho deficiente é irrelevante. espaço reservado era irrelevante. Atualize a página. Nada mais muda. Sabemos que esses são os únicos atributos disponíveis para este. Então, sua tarefa para este vídeo é criar primeiro um novo documento. E então eu quero que você crie elementos de texto de entrada. Então você escreve para elementos de entrada. O atributo do tipo é igual ao texto, e então eu quero que você desabilite um deles, mantenha um habilitado, mantenha o outro desabilitado, e então eu quero que você escreva mais um campo de entrada. Este vai ser tipo é igual a senha. Você não viu isso neste vídeo, mas eu quero que você explore isso por conta própria. Altere o tipo do campo de entrada para senha e digite dentro dele. Veja a diferença entre um campo de texto normal em um campo de texto de senha salvando abrir o documento e verifique se todos os campos funcionam corretamente. 40. Textarea: a área de texto é como você escreve grandes partes de texto. Então, se você está pedindo a alguém para escrever um ensaio, você vai querer usar a área de texto Área de texto parece que esta é uma área de texto. Ele também vai dentro do elemento de forma assim como o elemento de entrada que aprendemos sobre. E este também leva uma etiqueta de encerramento. Não é auto-fechamento, e a razão para isso é porque você está realmente colocando algo dentro dele. Ao contrário do elemento de entrada, este não leva um valor. Tecnicamente, isso seria incorreto se você quisesse adicionar um valor. Você colocou o valor aqui. Vamos dar uma olhada nesta página. Você vai notar algumas coisas diferentes. Primeiro de tudo, é muito pequeno, sem espaço suficiente que você precisa realmente escrever algo valioso nele. Em segundo lugar, você pode redimensioná-lo. Isso significa que se eu quisesse mais linhas aqui, tudo o que eu faço é apertar shift, entrar em mais linhas na maioria dos navegadores, você pode até apertar, digitar e adicionar mais linhas. Se for muito pequeno, criará uma barra de rolagem para você. Agora, uma coisa que você precisa ter muito cuidado é que é sensível ao espaço. Isso significa que todo esse espaço aqui que, você vê, esta é uma linha totalmente nova, mais todo esse espaço adicional mais o espaço no final. Vou refrescar-me e mostrar-vos aqui e depois selecionarei tudo isto. Este é o espaço no início. Este é o espaço no fim da linha. Como você vê aqui agora para eliminar que não adicionar nenhum espaço extra em branco lá dentro. Então eu removo o espaço em branco hit atualizar e o valor está lá. Então vamos querer fazer isso maior. Então, em vez de adicioná-lo com, nós os chamamos de colunas. Então, para este, nós chamamos Coles é o atributo. E quantas colunas queremos? Digamos que 150 agora. Essas colunas são baseadas na largura do caractere dentro dele. Assim, cada letra seria considerada uma coluna. 150 não é um valor de pixel. Se fosse 100 50 pixels, seria provavelmente cerca de 1/5 a 1/4 do tamanho da largura atual dele. Agora mesmo. Agora, por padrão, sua área de texto terá que talvez três linhas, dependendo do navegador. Ro, é quantas linhas diferentes existem. Então esta é a segunda mudança de estrada que muda a rosa. Se quiséssemos adicionar 10 linhas. Lá vamos nós. Temos 10 linhas agora, voltando para o valor padrão que você vê aqui. E se você quisesse na terceira fila algum imposto adicional. Então você está apenas dando a eles um pequeno modelo rápido. Modelo abaixo. Bater. Entrar. Então agora você está na segunda fila. Digite o seu na terceira linha. Agora, isso vai dizer certa linha e 1/3 linha está no meio ish. Quero dizer, não é onde deveria estar. Se quiséssemos que fosse à direita para a esquerda, tinha que ser à esquerda da página HTML, o que significa que isso precisa ser bem acima. Agora. Não temos espaçamento adicional, mas essa segunda linha tem algum espaço. E talvez não queiramos isso também. Membros muito sensíveis ao espaço. Então, se nos livrarmos desse espaçamento, salve-o, atualize a página. Não há nada lá, exceto uma nova linha. Não, uma área de texto também pode ter um espaço reservado e navegadores mais modernos. Este mundo vai ser chamado de exemplo de espaço reservado em um lugar onde só aparece quando não há impostos aqui. Então, se eu selecionar tudo isso e excluí-lo, há um espaço reservado de amostra novamente. Isso não funciona com todos os navegadores, mas com a maioria dos navegadores modernos, exceto o espaço reservado, especialmente em uma área de texto. Claro, você pode adicionar os atributos de nome I. D. Título de estilo de classe, etcetera, etc. Ele continua e sobre todos os atributos globais que você está ciente de agora estão disponíveis na área de texto também. Então, sua tarefa para este vídeo é primeiro criar uma área de texto, criar um novo documento. Se você não tiver feito isso primeiro, crie a área de texto. Então eu quero que você altere a coluna com ou a largura da área de texto para 100. Mude o número de linhas do pé cinco, e depois quero que escreva o seu primeiro nome na primeira linha. Mas eu quero que você escreva o sobrenome na terceira fila, e você deve obter algo que pareça algo ao longo dessas linhas. Agora, este é principalmente um teste de espaçamento por causa do espaçamento é crítico neste. E também mostra que você pode usar várias linhas em vez de apenas uma linha individual. Como o quê? O elemento de entrada permite que você difique e, em seguida, salve seu documento aberto. Verifique seu nome e sobrenome em Rose diferente, como você viu no meu exemplo. E se tudo funcionou do jeito que aconteceu neste vídeo, então você está acabado. 41. Botões: o elemento botão tem uma grande quantidade de energia, especialmente dentro de um formulário. Não só os botões parecem uma grande chamada para ações, por isso, se você está tentando obter alguém para comprar, você geralmente usa um botão ou algo muito chamativo ou um link grande e colorido para fazer alguém clicar nesse botão. Mas normalmente, os botões fazem o truque, e você pode estilizar um botão de váriasmaneiras diferentes, maneiras diferentes, e muitas vezes eles vêm com seu próprio tipo de estilo. Neste vídeo, vamos olhar para os diferentes tipos de botões em um formulário. Temos campos de entrada. Temos áreas de texto. Temos menus suspensos, que selecionam que ainda não cobrimos. E nós temos botões. Vamos cobrir os botões agora mesmo. Mas antes de fazermos isso, eu quero adicionar campo de imposto com um valor de Luke Skywalker, e o nome vai ser nome. E então vamos criar um botão, e isso também tem um tipo. Agora o tipo de botão pode ser enviar botão e redefinir. Mas eu só posso ser um desses. Então, para este exemplo em particular, agora, vamos dizer enviar e onde vai dizer Submeter. E é assim que criamos um botão de envio em um formulário. Agora, se nós visualizarmos esse Luke Skywalker e se eu clicar em enviar, não parece que nada aconteceu, mas ele realmente enviou o formulário. Então, se olharmos para o u R L aqui em cima e diz Nome, lembre-se, o nome era o atributo nome. Valor é o que está acontecendo aqui e Luke Skywalker agora E se alguém quiser redefinir o formulário que está em outro botão e vamos chamar este reset e talvez até colocar isso em uma linha diferente para que possamos ver o que realmente estamos fazendo. Refresque. Então eu posso enviar isso ou eu posso redefini-la agora. Tenha o botão de reinicialização aqui. Quando você clicar, ele irá esvaziar todos os campos indo para criar um exemplo aqui. Então temos Anakin Skywalker e Luke Skywalker. O botão de reinicialização. Quando você clica, ele não parece ter feito nada, mas o que ele realmente fez foi retornar os valores para seus valores padrão. Agora dissemos a eles qual era o valor padrão. O valor é Anakin Skywalker e Luke Skywalker, Então, se dissemos valor um e valor para e, em seguida, aperte o botão de reset. Repõe aqueles de volta ao que normalmente são. Agora, se não quisermos nenhum valor lá, reinicie novamente. Nada vai acontecer, não tem nada para redefinir. Mas se dissemos nome um e batizamos para redefinir, ele vai voltar para nada, porque não há nada nesse valor que é agora o valor padrão. Em terceiro lugar, temos apenas um botão normal, e este, tal como o nome sugere, não faz nada. Um botão é apenas um botão normal. Agora, por que você nos usaria? Muitas pessoas usam isso em JavaScript, Jake Weary. Outras pessoas vão estilizá-lo, para que não pareça um botão. Você sabe que há muitos usos diferentes para ele, mas quando estamos falando apenas sobre HTML em um botão que não faz nada exceto CSS JavaScript ou J. Query, não realmente tão valioso. Mas é importante saber, porque uma vez que você começa a trabalhar com JavaScript e possivelmente Jake cansado, ele vai fazer muito mais do que você pensa. Agora há mais uma coisa que você precisa saber. Se nos livrarmos do elemento de formulário, voltamos a uma página e atualizamos. Não parece que seja diferente. Se tentarmos reiniciá-lo, nada vai acontecer. O botão da área de texto de entrada e os elementos selecionados. Sabe, os elementos que supostamente devem entrar no elemento de forma só são úteis dentro desse elemento de forma. E este é um excelente exemplo. Isso não está mais dentro de um formulário e o botão de reinicialização não funciona. Se eu apertar o botão de enviar, nada acontece. É porque não há um formulário para enviá-lo. Você precisa desse elemento de forma agora. Sua tarefa para este vídeo é criar um novo documento, e dentro deste documento, eu quero que você crie um elemento de formulário dentro deste elemento de formulário. Adicione o campo de entrada com o valor padrão. Nosso valor padrão era Banik e Skywalker ou Luke Skywalker. O seu pode ser qualquer coisa. Eu não quero que você adicione um botão de envio abaixo disso, e ao lado do botão de envio, eu quero que você crie um botão de reinicialização. Lembre-se, a única diferença é que o tipo de tipo é igual a enviar ou tipo é igual a redefinir salvando abrir seu progresso em seu navegador e, em seguida, alterar o campo de texto que você criou direito qualquer outra coisa nele. Então, se o seu valor padrão for Anakin Skywalker, altere-o para o que quiser. Coloque seu primeiro nome, se quiser, então aperte o botão de enviar. E quando você apertou o botão de enviar, olhe para cima em sua UL e eu notei que sua barra de endereço mudou. E isso só mudará se você usar os atributos de nome como fizemos em nosso exemplo. Por último, atualize a página e, em seguida, eu quero alterar o imposto em seu campo de texto mais uma vez, mas desta vez pressione o botão de redefinição e observe que o valor padrão volta. 42. Glow down: os atributos de seleção é como criamos um menu suspenso. Nunca veja menus suspensos em todos os lugares, mas ainda não aprendemos sobre eles. É bem simples. Eles são muito parecidos com listas, então você cria uma tag de abertura e fechamento em vez de usar UL ou um poço para lista ordenada que usamos select porque você pode selecionar uma das muitas opções, e dentro dela leva um elemento de opção. Essa opção pode ter um valor, e eu coloquei o Este é o texto que vai aparecer. Esse não é o valor deles. Mas o valor estará aqui. Então esse valor era, também e muda para dois. E eu vou adicionar mais um e dizer, Basta chamar este valor de teste e este valor vai ser valor de teste. Agora, quando abrirmos isso em um navegador, vamos ver um menu suspenso com o texto que colocamos. Seu valor é igual a um valor águia para processar e testar o valor. Agora, quando selecionamos algo, não vai mudar nada. Nada vai acontecer. Mesmo que tenhamos um formulário em torno dele, nada vai acontecer. Precisamos criar um tipo de botão de envio é igual a enviar e Texas apenas pedaço de Mitt. E agora somos escolhidos. Element precisa de um nome para que possamos ver se ele realmente funciona. Quando enviamos o nome do formulário é capaz de selecionado para ser qualquer coisa. Agora eu atualizei a página, e quando eu selecionar o valor de teste ou valor para o nosso valor um e clique em enviar, é um pouco valor para Are You? L diz código dot html selecionado é igual a dois. Esse era o valor do número dois. Vamos ver o que acontece quando selecionamos o valor de teste. O valor de teste aparece, e isso é porque isso corresponde não apenas aqui, mas corresponde ao valor aqui. Então, lembra-se desta área interior? Isso é o que vai ser visível. Esse é o texto que é visto. Mas esse não é o valor que o formulário vai apresentar. O formulário vai enviar o valor aqui. Agora vamos desactivar. Um destes. Desativado é igual a desabilitado e, você sabe, vamos chamar esse valor de três. Para ficar no caminho certo com o 1º 2 lá, atualize a página, e agora não podemos mais selecionar Valor é igual a três para que possamos desativar essas opções agora . Há mais uma coisa que queríamos dizer. Alguém pode selecionar múltiplos que tínhamos. Os vários atributos dedo são elemento de seleção, e agora alguém pode selecionar vários valores as maneiras como eles selecionam vários valores como eles coletam um valor e mantenha comando ou controle enquanto clica nos outros. Eles podem desativá-los. Agora, se eles selecionaram todos os três, clique em Enviar. Rul vai parecer um pouco estranho agora porque é um selecionado é igual a um. Enquanto nós selecionamos os primeiros valores como é igual a dois. Nós selecionamos o segundo valor e selecionado é igual ao valor de teste. Esse foi o 4º 1 Agora podemos também, se realmente quiséssemos desativar todo o menu suspenso, adicionando desabilitado para o elemento select , Eu não posso mais selecionar qualquer um destes. E para deixar isso mais claro, vamos nos livrar dos múltiplos atributos. Eu nem consigo selecionar o menu suspenso mais, e há apenas mais um atributo que eu quero mostrar a vocês, e o que eu vou fazer aqui é consertar-nos para que saibamos o que estamos olhando para torná-lo um pouco mais fácil vai adicionar valor para nós que temos o valor 123 e quatro, mas este será selecionado por padrão. Para isso, nós escrevemos, selecionado é igual a selecionado com aspas em torno dele, e quando eu atualizar a página, valor para é selecionado automaticamente em vez de o 1º 1 ser selecionado como era antes para selecionado. E se tivéssemos mais um valor, temos valor de cinco anos para ainda selecionado, mesmo que haja uma opção antes e depois dele. Esse é o elemento de seleção. Então, sua tarefa para este vídeo é criar primeiro um novo documento. E então eu quero que você crie um novo elemento de formulário como o que você viu neste vídeo, onde o elemento de formulário foi enrolado em torno dos elementos de seleção e botão, em seguida, crie um elemento de seleção que é um menu suspenso. Não se preocupe em adicionar um nome, mas dentro dos elementos selecionados, eu quero que você escreva cinco elementos de opção. Todos eles têm que ter um valor. Faça os valores 1234 e cinco. Mas qualquer texto que você quer dentro deles possivelmente usar 1234 e cinco, bem como para corresponder os valores de cada elemento de opção. E então eu quero que você faça a opção um desabilitada e faça a opção três automaticamente selecionada. Quando você terminar que salvar abrir o documento e clicar em seu novo menu suspenso, você deve notar que a Opção um é automaticamente desativada. Não é possível selecioná-lo. Uma opção três foi selecionada automaticamente, mesmo que não seja a 1ª 1 da lista. 43. O que é o GET?: neste vídeo, vamos olhar para a diferença entre o método get e o método post usando um formulário. Então eu vou criar um pequeno formulário rápido aqui. Tudo bem, eu tenho um formulário, e eu vou pré-visualizar isso no navegador para que você possa ver como ele se parece. Se você não está familiarizado com como conseguimos as entradas aqui ou o botão. Há outros vídeos que passam por cima disso neste vídeo. Não vamos passar por cima de como criamos essas entradas para o botão de envio. Agora temos um formulário, e falamos anteriormente sobre o método e os atributos de ação neste vídeo. Vamos falar sobre o método. Obter o que ficar bem, dio quando você salvar e recarregar esta página e, em seguida, você enviar o seu formulário vai colocar suas informações na barra U. R L. Então eu vou em frente e fazer isso, Caleb Tall, magra. E quando eu clicar, enviar algo um pouco diferente vai acontecer. Essa informação que eu inputted vai aparecer na minha barra ul, e a informação vai ser um par de valor chave, então pressione enviar e na U. R. R. L Bar diz que meu nome de arquivo é co dot html. Em seguida, ele tem um ponto de interrogação que significa que tudo depois disso é parte da cadeia de caracteres de consulta. Esta seção inteira aqui é chamado uma consulta String F nome é igual a Caleb e l nome é igual a alto magra. Agora, quando olhamos para um código tivemos f nome que era o meu primeiro nome e L nome era o meu último nome. Agora podemos fazer isso com muitos tipos diferentes de entradas. Eu vou criar mais um aqui, e eu vou chamá-lo de J. E vai ser um menu suspenso. Temos valores diferentes. Nós valorizamos 10 para 2020 30 e as informações dentro de cada opção é exatamente a mesma legenda rápida ao lado dele. Atualize a página. Sei que não envelheci o menu Drop down. Meu primeiro nome vai ser Jon Snow e é estimado que a idade é provavelmente entre 30 e 40 anos. Bater. Submeter. Agora essa informação desaparece no formulário, mas novamente aparece na barra U. R L, onde o primeiro nome é John. O sobrenome é neve e as idades entre 30 e 40 anos. Agora isso é chamado de método get, e sempre que você enviar um formulário com o método get, suas informações aparecerão no novo Orlebar. Então, se você tiver que enviar qualquer formulário, ou seus usuários vão enviar qualquer tipo de informação que possa ser potencialmente considerada como sensível, estamos falando de senhas secretas, senhas, crédito cartões, qualquer coisa assim. Aquelas informações extremamente sensíveis ao ar. Mas mesmo se você considerar a data de nascimento de alguém como sendo informações confidenciais ou sua idade , dependendo do que seu aplicativo é tudo sobre, então você pode não querer mostrar essa informação aqui em cima porque isso é acessível a Todo mundo. Presume que o usuário aperta esse botão de envio. Ele aparece no bar U. R L. Agora, para mostrar o que quero dizer, vou criar mais uma entrada. Vamos chamar-lhe “password”. Atualize a página. Agora eu tenho um nome, sobrenome, uma idade e uma senha, e você não vai ser capaz de ver o que eu posso escrever. E provavelmente não há nenhuma maneira você pode adivinhar o que eu acabei de digitar, No entanto, quando eu apertei o botão enviar. Essa senha aparece e você pode vê-la aqui. A senha é igual a, mas aparece na barra U. R L. Agora, onde isso vem em útil é quando você está usando um código do lado do serviço, como A S, P ou PHP, e ele está tentando obter as informações fora da barra de URL. Às vezes, é muito útil colocar algumas informações na barra do mundo porque você é você pode alterar o conteúdo em sua página, dependendo do que a variável pode ser. Então, se isso fosse, seria um pouco mais parecido com isso. Co dot consulta PHP página String é igual a 123 Poderíamos então puxar essa informação para o servidor. O servidor reconheceria que a página é igual a 13 a 3. Isso criaria uma variável para nós, e nós podemos mudar tudo o que está nessa página, com base puramente nas informações aqui. Agora é aí que ele se torna realmente poderoso. Agora sua tarefa para este vídeo é criar um novo documentos. Então eu quero que você crie um elemento de formulário com o método get, assim como fizemos. Abrimos um elemento de formulário. O atributo, chamado Método, era igual a obter. Então, dentro desse elemento de formulário, eu quero que você adicione um campo de entrada, apenas um campo de texto normal, um campo de senha e um menu suspenso. Então, nesses três campos, eu quero que você adicione o atributo nome a cada elemento. Então você é Texeira, seu campo de senha, e seu menu suspenso deve ter o atributo name, e o valor deve ser diferente. Por exemplo, o campo de entrada de texto poderia apenas ser chamado de nome. Senha pode ser chamado de senha ou passar depois disso em um botão enviar para o final do seu formulário, salvando sobre o documento em seu navegador. E depois quero que preencha o seu formulário. Pressione o botão enviar e você notará que os dados são inseridos na barra U R L. Se suas informações forem exibidas na barra de URL corretamente da maneira como apareceram neste vídeo, você criou com sucesso um formulário de envio usando um menu suspenso, uma entrada de senha e um campo de texto enviado por um botão de envio, e a informação foi enviada para a barra U R L. Uma vez que está funcionando para você, vamos vê-lo no próximo vídeo 44. O que é post?: quando enviamos um formulário, há outra maneira de enviar informações. Em um vídeo anterior, aprendemos essas informações através do método chamado Get em vez de post. Nós vemos. No entanto, o método get irá automaticamente colocar informações no seu Albar, e isso nem sempre é o que queremos. Então, neste exemplo, vamos aprender sobre o método post, onde ele ainda envia as mesmas informações para o servidor. No entanto, as informações não são facilmente visíveis para o usuário final. Então aqui o que eu fiz foi Método é capaz de postar em vez de obter como fizemos em um exemplo anterior . Ação. Eu criei uma nova final do PHP. Este é um servidor arquivando você para PHP ou SP não familiar. Isso é bom. Não vamos passar por cima de nada disso agora. Isto é puramente uma demonstração. Foram o primeiro nome com o nome do nome F. Com a idade é uma senha de menu suspenso e nome é senha. Em seguida, o botão Enviar. Agora, quando visualizamos isso em, o navegador parece uma forma comum. Então, primeiro nome. Vamos colocar querida idade 30 a 40 possivelmente antes de você 50 senha. Você não pode ver o que escrevi para a senha. Agora, quando eu bater submeter duas coisas vão acontecer. Seu 1º 1 é se olharmos para a barra de URL, ele foi para postar ponto PHP foi para arquivo completamente diferente. Esse é o arquivo de ação que especificamos em ação, e ele enviou essa informação para o post na página PHP. A segunda coisa é, essas são as variáveis que você normalmente veria aqui. Então, em vez de ver o nome F é igual a Han, uma idade é igual a 30 a 40 anos e senha é igual a qualquer que eu digitar. Então, em vez de ver algo ao longo destas linhas, essa informação não aparece na barra U. R L. Em vez disso, podemos acessá-lo a partir do servidor. Agora, novamente, não estamos aprendendo sobre as coisas do lado do serviço agora, mas este é um exemplo para mostrar que o método post enviará a informação a mesma informação para o servidor sem mostrá-la na Barra Ural. Agora, o que acontece se removermos a ação completamente? Mas os métodos permanece como post redigitado. Isto aqui agora não há ação, mas o método é post agora. Parece que não aconteceu nada. Nosso bar você é L não parece ter mudado em tudo. Na verdade, parece que o realmente redefinir nosso formulário agora. Isso ocorre porque essa informação de postagem não está prontamente disponível para nós. E para garantir que isso funcione da maneira que queremos que funcione, basta tentar atualizar a página. Depois de enviar um formulário de publicação e tentar atualizar a página, maioria dos navegadores lhe dará um pequeno aviso, não um aviso. Muitas vezes parece algo como este formulário confirmado re submissão a página que você está procurando informações usadas que você inseriu. Está a dizer-nos que a informação que introduzimos da última vez ainda está a ser usada. Retornar a essa página pode custar qualquer ação que você tomou para ser repetida. Deseja continuar? Então está dizendo que se atualizarmos esta página, há uma chance de que a mesma Informação seja enviada novamente. Agora, se alguém estiver enviando um cartão de crédito ou um formulário de registro de usuário, você não quer que essas informações cheguem ao servidor duas vezes. Então a coisa mais segura a dizer seria cancelar. E se você bater, continuar Bem, Chrome não me mostrou nada porque ele está tentando usar a informação. Agora, uma extensão dot html, por padrão, não pode usar quaisquer métodos ou funções do lado do servidor ou qualquer tipo de poder que vem com escrita de uma linguagem do lado do serviço. H Male é puramente sobre o usuário, então não há nenhuma informação a ser mostrada aqui. Mas se tentarmos atualizar a página novamente na mesma manhã aparece. Isso significa que a página ainda está tentando usar essa mesma informação, mesmo que não possamos ver nenhuma delas. Sabemos que está lá. Então, sua tarefa para este vídeo é criar um novo documento dentro desse documento, criar um novo elemento de formulário e, nesse formulário elemento usar. O atributo chamado Método e Método é igual a postar, assim como vimos neste vídeo em um campo de texto em um menu suspenso e adicionar um campo de senha . Em seguida, adicione os atributos de nome todos os campos que você acabou de escrever. Em seguida, no final do seu formulário, à direita, um botão enviar salvar. Abra o documento em seu navegador, preencha o formulário, envie o formulário e você notará que nada parece ter mudado. Na verdade, parece que apenas redefiniu completamente o seu formulário. Agora. Neste momento, pressione o botão Atualizar no teclado ou clique no botão Atualizar no navegador . E se você estiver usando um navegador mais moderno, você verá um aviso como vimos neste vídeo. Se você vir esse aviso, você sabe que seu envio com êxito de informações de postagem para o servidor você não pode vê-lo, mas você sabe que ele está funcionando. 45. Semântica de HTML5: HTML é tudo sobre semântica. Não é sobre estilo, necessariamente. Não se trata de parecer bonito ou estar perfeitamente apresentável. HTML é uma estrutura por trás de cada página da Web, e para que uma página da Web seja exibida corretamente, o navegador precisa entender o que ele está olhando. Se o navegador não entender o que ele está olhando, sua página pode aparecer um pouco diferente do que você esperava. Agora, até os últimos anos, nós sempre usamos elementos como Div, e nós adicionamos um monte de estilo para basicamente reiniciá-lo, para fazê-lo fazer o que quiséssemos que ele didio se quiséssemos usá-lo para uma barra de navegação ou um cabeçalho ou rodapé ou uma seção de você sabe, um artigo ou, de fato, até mesmo apenas uma seção. Sempre usamos o desenvolvimento. Há uma série de outros elementos que sempre usamos. Nós sempre os reprogramamos para fazê-los fazer o que queremos, e isso geralmente envolve um monte de estilos diferentes. Agora, HTML não é sobre estilo. É sobre o navegador ser capaz de entender o que ele está olhando. Então, quando o Google olha para sua página da Web. Ele não vê o que você vê visualmente. Ele olha para o código que você escreveu. Então, quando ele vê outra área DIV com algum conteúdo aqui, todas as cidades são uma área dividida com algum conteúdo lá dentro. Ele não sabe necessariamente o que está olhando. HTML cinco tem um monte de elementos diferentes que agora são padronizados. Isso reduz algumas das ambiguidades entre eles ou elementos comuns, como def. Então, se isso fosse parte de um artigo, poderia ser um artigo. Google ou Bing ou qualquer rastreador ou navegador que está olhando para sua página agora, ele vai entender que este é um artigo ou se tivemos um diff no topo de uma página. Tivemos algum estilo extravagante para torná-lo flutuar na parte superior da página sempre que você rolar para baixo em tinha suas opções de navegação aqui, e que permite que você mova de página para página barra de pesquisa de usuário, o que quer que seja em seu site que ser considerada uma barra de navegação. Então, em vez disso, colocamos valete. Isso significa que o mecanismo de busca agora está entendendo que esta é uma barra de navegação, que eles são certos links, e aqui ele vai priorizar quais links ele deve olhar, não deve olhar para ele apenas tem uma melhor compreensão do que ele está olhando. Então, por que isso é importante para um usuário diário? Um desenvolvedor não Web para navegador de Internet normal? Isso não importa. Eles nunca verão a diferença, e eles provavelmente nunca se importarão com a diferença. No entanto, como desenvolvedor da Web, você não está criando sites apenas para pessoas. Você está criando sites para outros programas para acessar outros mecanismos de busca, acesso para navegadores para acessar, possivelmente uma extensão cromada ou e adicionar ou conectar a outro navegador. Se alguém tinha um plug on, digamos Firefox, e foi feito para remover todas as informações sem importância em uma página. À exceção de um artigo, entanto, talvez essa extensão em Lee procure um artigo que elemento real e tudo o mais que ele corta. Se você não estiver usando o artigo, algum usuário vai ficar muito infeliz agora. Isso pode ser apenas uma pequena, pequena, pequena parte do seu público-alvo, mas você não sabe o que eles vão estar fazendo em seu site ou como eles vão estar usando motores de busca para coisas como motor de busca otimização. Se você pode tornar sua página mais fácil para um mecanismo de busca entender, então você provavelmente vai obter classificações um pouco mais altas. Não há ciência real por trás disso, mas só faz sentido do ponto de vista dos programadores. Então sua semântica é realmente importante se você não tem que usar o desenvolvimento para uma página HTML cinco, não use a seção de artigo de rodapé de cabeçalho, navegação lá toneladas de outras. Tudo o que você tem a fazer é pular no Google e procurar algo ao longo das linhas de diferentes HTML cinco elementos, e você vai notar que há muitos deles e mais deles estão chegando todos os meses. Não há tarefa para este vídeo, mas em vez disso eu quero que você entenda que há uma importância por trás da semântica H Mill , ou devemos apenas dizer a semântica HTML. HTML é destinado para a estrutura a marca para cima, o template ing de um site, mas não é necessariamente destinado para o estilo. Styling é algo completamente diferente, e a estrutura de sua página pode dizer a um navegador que ele pode dizer a um leitor de tela que pode dizer a um mecanismo de busca muito sobre o que está nele 46. Vídeo: usando HTML cinco enfraquecer diretamente incorporado vídeo diretamente em nossa página, e nós simplesmente usar o elemento de vídeo. elemento de vídeo tem uma marca de fechamento de abertura em Dentro do elemento de vídeo é o elemento de origem , e isso leva dois atributos. SRC para a fonte. Assim como uma imagem e um tipo, o tipo será sempre barra de vídeo. Seja qual for a extensão de vídeo, por exemplo, e antes que eles voltem para o elemento de vídeo, podemos alterar o com a altura, adicionar controles e reprodução automática automaticamente apenas através da adição de atributos. Então é por isso que queríamos um com 500 de altura. Vamos fazer isso muito proporcional e colocar isso em 150 e queremos ver os controles agora para isso funcionar, vou precisar de um vídeo MP 4. Acontece que eu tenho um chamado Prime Video Dot MP 4. Este é um vídeo local. Está na minha máquina agora, mas para você você pode usar qualquer MP quatro vídeo que você gosta. Então vamos visualizar isso, e eu quero ver a área com que estamos trabalhando aqui vamos com isso. 500 de altura é 150 tem nossos controles aqui. Podemos fazer uma mudança de volume em tela cheia, reprodução e pausa. Avançar rapidamente para qualquer parte do vídeo, como um vídeo normal. Agora, se quiséssemos que o Toe tocasse isso mais cedo, alguém aterrissa na página que você está criando. Ativar a reprodução automática. E quando eu atualizar esta página, você notará que ela está sendo reproduzida automaticamente. Agora há mais duas coisas que você precisa saber. O 1º 1 é Fonte não precisa ser um MP quatro. Também pode ser o que é chamado Web M ou org, e as extensões refletem isso também. Então não Web M is Dot é video slash web dot org Is Video Sochaux G. Agora, para um navegador que não suporta HTML cinco e mais antigo navegador, ele não vai reconhecer um vídeo ou os elementos de origem para que possamos escrever algo aqui. Não requer outro elemento. Simplesmente entra com a fonte. E poderíamos apenas dizer que você não tem um navegador HTML cinco habilitado. Seu navegador vai olhar através dessas fontes vai tentar descobrir o primeiro 1 que pode usar apenas o ponto de vídeo prime e antes existe. Neste caso, ele faz dot web m existe Não. A dot org existe? Não. Então eles não deveriam estar aqui. E nosso elemento de vídeo deve ser parecido com isso. No entanto, salvamos esta pré-visualização nossa página, ele ainda funciona. Agora o que acontece se eu colocar e antes no fundo onde não temos uma teia? Não temos um arquivo Ogi. Atualize a página. Ainda funciona agora. A razão para isso é porque os navegadores procurando Web e, em seguida, vai procurar Ogi Não encontrou nenhum desses, mas ele encontrou um e antes. Então ele vai usar isso. Então, seu navegador simplesmente passa por cada fonte e tenta encontrar a fonte do vídeo. E quando encontrar um vai usá-lo, é altamente recomendável que você use dot mp quatro. É o formato de vídeo mais aceito. Ele funciona em todos os navegadores, e você não terá nenhum problema com ele. Ele também tem um ótimo método de compactação, que significa que seus vídeos serão menores e o carregamento mais rápido para o usuário. Agora é isso para o elemento de vídeo para este vídeo. Quero que crie um novo documento dentro desse documento. Crie o elemento de vídeo exatamente como você viu aqui. Quero que encontre um vídeo do MP 4. Você provavelmente pode baixar um em qualquer lugar na Internet. A maioria dos computadores geralmente tem um ponto e antes de vídeo em algum lugar disponível. Então, encontrar um ponto e antes de vídeo e adicionado à fonte. Atributo dentro do elemento de origem que lembra que o elemento de origem estava dentro do elemento de vídeo muito parecido com um elemento de seleção tem opções dentro dele. O vídeo tem fonte dentro dele. Em seguida, adicione algum texto para não HTML cinco navegadores em seu elemento de vídeo. Ligue os controles, ative a reprodução automática. Então eu quero que você salve um documento aberto em seu navegador e verifique se seu vídeo funciona. Se você tiver feito todas essas etapas, seu vídeo deve ter controle para que você possa pausá-lo e a reprodução automática funcionaráautomaticamente funcionará 47. Áudio: html cinco nos permite incorporar automaticamente música ou som. Este é um elemento HTML cinco apenas, por isso só funciona com mais. Os navegadores modernos não funcionam com os navegadores antigos, e o elemento que estamos usando é chamado de áudio tem uma tag de abertura e fechamento. E assim como o vídeo, ele também tem uma fonte. Tag recebe o atributo SRC. Essa é uma fonte do áudio, e também é preciso um tipo para que o navegador saiba que tipo de áudio ele deveria estar tocando. O elemento de áudio leva alguns parâmetros diferentes. Atributos principais. Um sendo os controles. Você pode controlar o som em controlar o volume? Sim ou não neste caso estavam dizendo Sim, queremos ser capazes de controlar o áudio e reprodução automática. Agora nada disso vai funcionar sem uma fonte, então a fonte para isso vai ser Ben Sound épico dot mp três. Eu só encontrei esta música livre de direitos autorais em ben som ponto com eo tipo seria barra de áudio mp três. Agora, se um navegador não suporta html cinco áudio enfraquecer, basta digitar aqui sem outro elemento apenas dentro do elemento de áudio. Seu navegador não suporta HTML five Audio. Simples é isso. E se o seu navegador suportar áudio HTML cinco, este texto não aparecerá. Agora vou pré-visualizar esta página e ela começou a ser reproduzida automaticamente. Também temos controles aqui. Eu posso mudar o volume, e tudo o que é é áudio. Agora, o que acontece se eu tirar os controles? Os dentes controlam, mas o jogo automático está salvando. Refresque. Tocava a música automaticamente. Eu não tinha controle sobre a música, e ela só ia tocar uma e outra vez. Ótima. Se você estiver configurando uma sala de cinema, não é ótimo se o usuário em uma página da Web não quiser necessariamente ouvir músicas diferentes, efeitos sonoros diferentes em uma página. A maioria das pessoas navega na Internet enquanto estão ouvindo música, ou eles têm outro vídeo em um filme, e eles não querem outros sons interferindo nisso. Portanto, tenha muito cuidado ao desativar os controles com a reprodução automática ativada. Agora, uma última coisa. Nós temos dois outros tipos de áudio que podemos transmitir Oh gee, assim como com vídeos exceto com um vídeo em vez de barra de áudio o. G. Era um vídeo,Draghi social, Draghi social elementos de vídeo e assim por diante, e nós também temos onda. A onda geralmente vai ser a maior forma, então pode demorar um pouco para uma conexão com a Internet mais lenta. Toe load, tudo isso para que possamos começar a jogar Ogi não amplamente aceito, mas MP três é o formato de áudio mais amplamente aceito na Internet. Ele também tem uma ótima taxa de compressão, que significa que sua música ou seu arquivo de áudio será menor. E por causa disso, ele vai carregar mais rápido. Para o usuário, a qualidade não é tão ruim. Seu processo vai olhar para cada uma das fontes bem e tentar encontrá-los. Se este navegador meu navegador, estava procurando um arquivo O. G, ele não encontrá-lo, ele iria então tentar procurar um arquivo de maneira, e se ele não encontrar que ele iria, em seguida, procurar um arquivo MP três. Então, se eu salvar isso porque os arquivos Ogi e Wave não existem e eu atualizo minha página, ele ainda funciona agora porque eu não tenho os outros dois disponíveis. Tecnicamente, não precisa dos elementos lá dentro, então sua tarefa para este vídeo é criar um novo documento no elemento de áudio e, em seguida, adicionar os atributos de controles a esses elementos de áudio para sua fonte. Quero que adicione um arquivo do MP 3. Sinta-se livre para ir ao Ben Sound Dot com e obter um audiófilo dele. Então eu quero que você adicione texto não HTML cinco navegador. Então, se o navegador não pode usar o elemento de áudio, ele vai mostrar algum texto e disse salvar abrir o documento em seu navegador e, em seguida, pressione play em seu audiófilo. Se o seu elemento de áudio começar a projetar música ou som de qualquer tipo, seja qual for o seu arquivo MP três, então você adicionou áudio à sua página com sucesso. 48. Design responsivo: design responsivo é a capacidade de alterar o modelo e estilo de uma página com base no navegador com agora. O que isso significa é que, se alguém estiver visualizando seu site em um navegador particularmente grande que geralmente é um laptop ou computador desktop, ou computador desktop, a largura será bastante ampla. Mas se alguém visualiza essa mesma página em um telefone em um dispositivo móvel, um tablet teria aproximadamente 70 75% da largura em pixels, como seria seu laptop e seu telefone poderia ser metade disso. Possivelmente menor possível um pouco maior, dependendo do telefone. Agora não sabemos todos os dispositivos que estão lá fora. Não sabemos as resoluções de todos. Não sabemos quais pessoas estão usando quais resoluções. Vamos acessar o site a que horas, e isso se torna bastante problemático. E o que realmente queremos fazer é criar um site que esteja disponível para todos. Fazemos isso com um termo chamado Design Responsivo. Algumas pessoas chamam de móvel First mobile ready, mas essencialmente cada site precisa ser responsivo tem ser responsivo à largura do navegador. Agora a idéia é se você abrir um site, digamos Facebook em seu navegador em seu laptop , e então você abre Facebook dot com em seu dispositivo móvel, seu tablet, seu telefone, seja lá o que for, Vai parecer diferente. Pode até agir de forma diferente. Esse modelo de coisas vai ser diferente. Você poderia ter uma barra de navegação que flutua com você pode não flutuar com você. Sua barra de pesquisa pode ser maior. Pode estar oculto, você pode parecer, ou informações em um laptop porque o laptop tem mais imóveis, mais área para trabalhar, enquanto que em um dispositivo móvel geralmente não há muito espaço. Então, algumas das informações menos importantes não são visíveis agora porque não sabemos quem vai estar no telefone, quem vai estar em um laptop ia estar em um tablet. Como desenvolvedores da Web, é nosso trabalho construir para todos. Agora isso não significa que você tem que construir um site para dispositivos móveis, como telefones, outro para tablet, outro para laptops, outro para desktop. Em vez disso, você pode usar diferentes bibliotecas, diferentes grupos de código em que outras pessoas trabalharam para criar apenas um site que funcione em todos os dispositivos e reaja de acordo. Agora, por que isso é importante agora é porque estamos em um grande momento de transição. A maior parte do mundo ficou online através de desktops. Computadores eram bastante grande foi 2030 anos atrás. Eles não eram muito poderosos do que os laptops saíram. As pessoas foram capazes de levar seu desktop para qualquer lugar e continuar fazendo seu trabalho basicamente qualquer lugar por pelo menos algumas horas sem ficar sem bateria. E se houvesse uma tomada em algum lugar, bem, bem, agora você pode levar seu trabalho para todos os lugares com você que era muito poderoso. Mas agora temos tablets e dispositivos móveis como o seu Android ou iPhone e mais pessoas que estão entrando online. Começamos com dispositivos móveis, principalmente porque os telefones são mais baratos para alguém comprar seus telefones. Eu posso acessar a Internet que você pode comprar em diferentes áreas do mundo por $50,100 dólares e eles vão para cima 78 $900 dependendo de onde você está em que tipo de telefone você quer. Mas todos eles acessam a Internet agora. Agora, enquanto mais e mais pessoas estão ficando online usando seus dispositivos móveis, ainda temos muitas pessoas que usam laptops. Agora, se você é um desenvolvedor da Web, você vai escrever código em um laptop. É praticamente inevitável neste momento. E enquanto você cria um site em seu laptop, outras pessoas acessarão o site em seus telefones. Você vai ter que acessá-lo para testá-lo em um laptop e em seu telefone, então há um monte de misturado aqui. Eu não vou levantar uma estatística baseada em quantas pessoas estão acessando a internet de seus telefones agora. Mas é muito alto, e só vai ficar mais alto agora. O que isso significa é que seu site tem que ser amigável para todos. Se não é amigável para todos, você pode estar perdendo algum tráfego muito importante. Um ótimo exemplo é se você vai criar uma rede social que só estava disponível para pessoas na Índia. Bem, há muitas pessoas na Índia que têm uma boa quantia de dinheiro, e há muitas pessoas que não têm muito dinheiro. Mas você quer que todos na Índia usem suas redes sociais. Você vai ter que construir para ambos. E à medida que o tempo avança, menos pessoas comprarão laptops e desktops e mais pessoas apenas comprarão tablets. Então, um histórico rápido como um desenvolvedor, nós costumávamos fazer apenas sites de desktop. Era a única tecnologia que tínhamos. Se não parecia ótimo para todos, bem, o usuário final tinha que viver com isso. Esse não é mais o caso. Então nós criaríamos um site secundário apenas para dispositivos móveis. Foi quando o iPhone saiu pela primeira vez e dispositivos habilitados para Internet dispositivos portáteis, como o iPhone. Mesmo para os primeiros telefones Android, as pessoas ainda estavam fazendo sites móveis apenas para esses lugares, e eles estão dizendo para ir para m dot website dot com. Então m dot cineplex dot com é aquele que eu vejo regularmente em Ah, em comerciais. M dot facebook dot com é outro, e agora temos que fazer sites móveis primeiros que parecem ótimos tanto para dispositivos móveis quanto para hábeis onde quer que eles pousem. É importante que façamos isso agora. A maioria dos desenvolvedores usa um framework chamado Bootstrap. Você pode achar que em get bootstrap dot com, e é acoplado com uma biblioteca JavaScript chamada J Query. Você pode descobrir um.J coury dot com Jake é uma biblioteca JavaScript que funciona em todos os navegadores. Compatibilidade entre navegadores é a terminologia que usamos, e a razão pela qual ele é tão poderoso e tão amplamente aceito em toda a Internet para quase todos os desenvolvedores, cada desenvolvedor front-end de qualquer maneira é porque cada navegador entende e usa JavaScript um pouco diferente. E por causa disso, uma única biblioteca JavaScript que nos permite fazer tudo apenas uma única maneira que une todos esses navegadores juntos é extremamente poderosa para nós agora, voltando para Bootstrap Bootstrap é um agrupamento padronizado e ele usa CSS, HTML e JavaScript. E combina tudo isso junto com algumas ferramentas de JavaScript legais que permitem que você faça as coisas instantaneamente. Agora, novamente, este não é um curso JavaScript, mas botas Drop é de longe as bibliotecas de design móvel primeiro ou responsivo mais comuns disponíveis. Agora é neste momento em que você provavelmente sabe HTML suficiente que você pode baixar e instalar bootstrap e você pode ler através de sua documentação. Essa documentação está muito bem organizada. Na verdade, não é muito chato. Eles têm ótimos exemplos, e você pode começar a construir coisas por conta própria, mesmo que você não conheça CSS ou JavaScript. Há muitas partes poderosas do bootstrap que também não exigem, e há outras partes chamadas componentes que exigem marcação HTML. Bootstrap vem com seu próprio estilo, então você não precisa se preocupar com isso. Isso é tudo tratado para você, e você pode habilitar muitos recursos JavaScript simplesmente escrevendo atributos HTML. Então, se você quiser ir para obter botas drop dot com, esse seria um ótimo lugar para continuar progredindo. Então sua próxima porta de chamada é ir para bootstrap, obter bootstrap dot com, baixar e instalá-lo e apenas começar a usá-lo. Você não precisa necessariamente conhecer todos os CSS ou JavaScript porque eles tornam isso tão simples. Você pode escrever a maior parte do seu site, um site responsivo usando apenas HTML, e fazendo isso, você vai chutar o seu caminho para avançar rapidamente sua carreira como desenvolvedor por muitos meses, Possivelmente anos. Só fazendo isso,