O código não é tão assustador quanto zumbis: HTML e CSS para escritores, editores e iniciantes

1. Introdução: Olá e bem-vindo ao código não é como zumbis assustadores. HTML e CSS para escritores e editores. Este curso vai falar com você sobre código e como ele não é assustador. Você vai começar a trabalhar com HTML e CSS de uma forma que é favorável e permite que você descubra o que você está fazendo sem ter tanto medo disso. Vamos falar sobre HTML, o que é, como é a estrutura da web, e como você pode criar suas próprias tags ou, pelo menos, escrever suas próprias tags e incluí-las em seus diferentes projetos. Também falaremos sobre CSS, que é mais sobre o design e como torná-lo bonito e ajudá-lo a usar isso para melhorar ainda mais seus projetos e permitir que você não tenha medo de código. Ao longo do caminho, vamos tentar matar alguns zumbis e ajudá-lo a se divertir um pouco. 2. Suas ferramentas de combate aos zumbis: Olá. Neste episódio vamos falar sobre o tipo de ferramentas que você vai precisar para trabalhar com este curso. A verdade é que você não precisa de muita coisa. Existem muitas coisas diferentes que você pode usar, mas aqui estão algumas recomendações. Primeiro de tudo, editor de texto simples. Se você estiver no Windows, você pode usar o Bloco de Notas ou, se acontecer de estar em um Mac, você também pode usar a Edição de texto, embora você deve usá-lo no modo de texto sem formatação. Tudo isso dito, bem você não pode usar um editor de texto simples, provavelmente não é o mais ideal só porque ele não lhe dá tanta ajuda quanto poderia. Para isso, eu ainda recomendo um editor de codificação de cores. O que ele faz, ele vai codificar o código de cor para que você possa realmente ver que tipos de código ou pedaços de código, como eles interagem uns com os outros e as tags e obter uma cor diferente do que dizer, conteúdo e algumas dessas coisas. Isso torna muito mais fácil depurar e descobrir se você tem um erro de sintaxe ou algo acontecendo ou algum outro tipo de erro. Para eles, eles ajudam você a detectar erros. Notepad ++, acredito que esteja disponível em toda a plataforma, mas está definitivamente disponível no Windows. O Atom está definitivamente disponível em toda a plataforma. Outro, Brackets e, em seguida Sublime Text é provavelmente um pouco além do nível escolar. É um grande editor de texto e um editor de texto muito poderoso e provavelmente mais do que você precisa. Eu não compraria se não precisasse. Notepad ++, Atom e Brackets são todos gratuitos para baixar e realmente qualquer outra coisa que você usa, qualquer outra ferramenta de codificação para HTML e CSS deve funcionar bem. Qualquer coisa, na verdade. O que eu vou recomendar é codepen.io. Este é um site que está disponível gratuitamente para uso. É fácil de usar. Ele é atualizado automaticamente à medida que você digita, o que é super útil à medida que você está aprendendo. Ele cuida de todas as coisas inquietas com apenas como construir uma página e o que fazer por essas coisas. Ele permitirá que você apenas se concentre no código que você deseja se concentrar em vez de ter que lidar com todo o código em torno desse código que você precisaria se você estiver usando apenas um editor de texto básico e quaisquer demos de classe estarão em codepen.io. Vamos dar uma olhada nisso. Vamos ver como configurar, como criar uma conta gratuita. É importante salvar seu trabalho principalmente para que você possa voltar para ele e corrigi-lo e também jogar com ele. Quando você começa a trabalhar em seu projeto, é bom tê-lo no lugar onde você pode salvá-lo ao longo tempo enquanto você percorre o curso e é capaz de então apenas publicá-lo para que outras pessoas possam ver e olhar para o que você fez. Vamos dar um soco na garganta dos zumbis. Este é o site da CodePen. Aqui embaixo, no canto inferior esquerdo, você vai se inscrever. Você clica nisso, inscreva-se com e-mail. Esse processo é bem típico. Vou fazer login só porque já tenho uma conta. Fazendo login. Estas são algumas canetas que eles acham que você pode estar interessado. Mas o que vamos fazer é ir para Explorar, vamos para Criar e uma Caneta. Na CodePen, uma Caneta é uma parte HTML, CSS e JavaScript de uma página que você pode jogar com ela. A parte JavaScript não é algo que precisamos, então o que vou fazer é minimizar isso. Na verdade, não vamos lidar com CSS agora. Chegaremos a isso um pouco mais tarde no curso. Vou minimizar isso também. Só temos HTML. Eu só vou escrever uma coisinha rápida aqui. Olá Mundo. É uma maneira padrão de começar a aprender uma linguagem de programação é digitar hello world e enviá-lo para a tela. Como você pode ver, enquanto eu digitei, ele saiu. Codepen.io é apenas uma ótima ferramenta para usar, muito fácil e espero que torne sua vida muito mais simples como você tenta acompanhar. Essas são as ferramentas. Obrigado. Vamos para a próxima seção. 3. Por que os zumbis odeiam HTML: Bem-vindos de volta ao Código não é tão assustador quanto Zumbis. Vamos dar uma olhada no que HTML é e por que os zumbis odeiam tanto. Primeiro de tudo, o que é HTML? É uma linguagem de programação, mas na verdade, ao invés de fornecer tanta programação ou processamento, ele fornece estrutura para documentos. Eu gosto de pensar nisso como o esqueleto de sua página ou o esqueleto de sua página do site. Ele permite que você construa a página e tem diferentes tipos de flash e diferentes tipos de cores e todos esses tipos de coisas que entram em uma página do site, mas ele tem que pendurar em algo, e HTML é que pendurado ponto. Ele fornece informações sobre o conteúdo do documento. Agora, há cerca de quatro partes para um elemento HTML, é uma única unidade de HTML, quatro partes: tag de abertura, atributos, conteúdo e uma tag de fechamento. A tag de abertura do portfólio usa os colchetes angulares, sinais menores e maiores que para definir a tag, então ele começa com um sinal menor que, e a tag em si termina com um sinal maior que. Por exemplo, o parágrafo da tag de abertura se parece com isso, que é uma tag de parágrafo de abertura. Você provavelmente já viu isso no último vídeo quando eu estava demonstrando Codepen.io, mas esta é uma tag de parágrafo de abertura. Em seguida, temos atributos. Isto é algo que vamos chegar a um pouco mais tarde, mas só queremos apresentá-lo aqui. São coisas sobre as etiquetas. Eles vêm logo após o nome da tag de abertura e antes de seu colchete angular de fechamento, então eles são usados para informações adicionais, identificação ou opções, fornece algumas outras maneiras de usar tags ou ajuda o navegador a saber como isso tag particular está sendo usada. O atributo class nos ajuda, particularmente quando chegamos a CSS, ele define um grupo de elementos, tipo de conteúdo HTML. Não precisa ser o mesmo elemento em particular, mas pode ser uma classe de elementos que agem da mesma maneira ou fazem a mesma coisa ou têm o mesmo aspecto. Pode ser que todos eles tenham lido texto ou todos eles têm uma certa configuração de margem entre eles, algo assim. Realmente poderia ser qualquer coisa, mas quando você está adicionando uma classe a um elemento, é assim que acontece. É a etiqueta de abertura da etiqueta “p”. Então, antes do colchete ângulo de fechamento, temos classe igual e, em seguida, “aprendizagem”. Esperemos que você não esteja aprendendo em “ aspas ”, mas a classe tem um valor de aprendizagem, e pode haver vários elementos HTML na página que tinha essa classe. Há muitos outros atributos que podemos usar, e falaremos mais sobre eles um pouco mais tarde. Agora, a terceira coisa ou terceira parte de um elemento HTML é provavelmente a mais importante, é o conteúdo real. É a informação que entra. Está entre as etiquetas de abertura e fecho. Muitas vezes, isso é texto, mas também pode ser outros elementos. Muitas vezes, é também outros elementos. Alguns elementos terão limitações que não podem estar dentro de outros elementos, depende do trabalho específico que o elemento está fazendo e o que é apropriado para ele. Alguns elementos simplesmente não podem existir dentro de alguns outros elementos. Outros elementos só existe dentro de outros elementos. Depende apenas do elemento em particular com o qual você está trabalhando. HTML também é muito indulgente. Mesmo que você estrague tudo, o navegador apenas tenta o seu melhor para fazer o que ele acha que deve. Muitas vezes, ele faz um bom trabalho. Às vezes isso é bom e que não vai falhar miseravelmente. É ruim, porém, se um navegador não permite que ele falhe, mas o outro faz, e você não testa nesse navegador. Ter um bom código é a melhor opção para visualizações consistentes de páginas em vários navegadores. etiqueta de fechamento, parece muito com a etiqueta de abertura, exceto que tem uma barra na frente dela. A tag de parágrafo tem uma barra p. Algumas tags são o que é chamado de tags vazias e não têm uma tag de fechamento. Notavelmente, estes são quebra de imagem, e RH ou regra horizontal, portanto IMG, BR e HR. Estes são os principais que provavelmente estaremos falando dentro deste curso. Mas há alguns mais do que isso também, mas a maioria das tags tem uma tag de fechamento. Normalmente, a única razão pela qual eles não têm uma tag de fechamento é porque o conteúdo do servidor de tags reside na tag de abertura, em vez de ter algo entre ele. Por exemplo, uma imagem chegará lá eventualmente, mas você terá um atributo fonte que lhe dirá onde a imagem pode ser encontrada e a imagem apenas a mostra, então não faz sentido ter necessariamente uma tag de abertura e fechamento para imagens. Aqui está um exemplo de tag de parágrafo. Trazendo um atributo, bem como as tags de abertura, fechamento e conteúdo, então começamos com uma tag p com uma classe de aprendizagem onde matar zumbis é divertido. Esse é o nosso conteúdo e, em seguida, barra p é a nossa etiqueta de fechamento. Aninhamento. Outra coisa importante sobre tags HTML é certificar-se de que você tem tags de abertura e fechamento aninhadas corretamente. Por exemplo, isso é incorreto. Você tem a Tag 1 e a Tag 2, ambas abertas e, em seguida, Tag 1 é fechada antes da Tag 2 ser fechada. Isso é incorreto. A maneira correta de fazer isso ou aninhá-lo corretamente, teria Tag 1 aberto, em seguida, Tag 2 aberto, e fechar Tag 2 e fechar Tag 1. Essas são, é claro, tags HTML não reais, elas são apenas um exemplo para mostrar aninhamento facilmente. Famílias zumbis. Uma das coisas importantes sobre o nidificação é que vamos chamar-lhe famílias. Se o elemento A é completamente fechado pelo elemento B, então A é dito ser um filho de B, e B é um pai de A, então você pode ter filhos e netos. Muitas vezes, especialmente quando chegarmos ao CSS, estaremos falando muito sobre esses relacionamentos. Mas se um elemento causa outro, o primeiro elemento é o pai e o elemento fechado é o filho. Por exemplo, temos zumbis não têm família. Eu, a tag itálica, que vamos chegar em breve, é uma criança da tag p. 4. Blocos de conteúdo zumbis — parte 1: Olá e bem-vindos de volta ao Código não é tão assustador quanto Zombies. Agora vamos olhar para blocos de zumbis e outros blocos de conteúdo. Primeiro de tudo, temos tags de parágrafo, falamos sobre aqueles na última seção. Todos os parágrafos devem, por mais surpreendente que seja, estar em tags de parágrafo. É a unidade mais básica de texto e 90 por cento do texto estará em tags de parágrafo, embora não tudo, é claro, 10%. Claramente não vai ser. Mas estes podem ser estilizados com texto recuado ou ter um retorno de carro ou na linha entre os dois, dependendo do que você deseja fazer com o seu site. Provavelmente mais tipicamente na web, tende a ser uma linha em branco entre parágrafos, mas há algumas exceções a isso. Outra tag que podemos falar é a tag break. Agora, na maioria das vezes você não quer moldar texto, você deseja que ele flua dentro de seu contêiner. Porque particularmente com design responsivo, você não vai saber exatamente a largura ou a altura ou qualquer que seja o recipiente para o texto específico é. Se você fizer alguns retornos difíceis, então ele vai parecer estranho se alguém olhar em uma tela que acontece de ser um tamanho diferente do seu, que é quase certamente provável por causa da proliferação de dispositivos que têm tela diferente tamanhos e áreas de trabalho, e quem sabe o tamanho da largura será na área de trabalho, etc. Haverá momentos, no entanto, que você precisa formatar um endereço ou pedaço semelhante de conteúdo onde você não quer linhas entre eles. Por exemplo, se você tiver feito uma linha em branco entre parágrafos, se você criar outro parágrafo, ele continuará a fazer linhas em branco entre as coisas. Isso não parece ótimo, especialmente em um endereço ou outros tipos de conteúdo como esse. O que você pode fazer então é usar uma tag break, e em vez de pular uma linha, você pode simplesmente ir direto para a próxima linha. Agora, há muitas vezes em que precisamos ousadamente ir onde nenhum lutador da resistência zumbi jamais esteve antes, que aqui está a marca ousada. O HTML é principalmente estrutural, a maioria da estética vai com CSS, mas você também pode designar o que deve ser negrito ou fortemente enfatizado. Por exemplo, temos a tag b, que é a tag negrito, isso é o que tivemos é sobre HTML4 quando ele veio junto com XHTML. Quando HTML e XHTML se uniram, eles queriam ser muito rigorosos sobre como as tags que usavam. Eles trouxeram a tag forte, que é basicamente a tag negrito, mas rotulada forte. Em teoria, dá-lhe um pouco mais de informação do que apenas a letra b faz sobre o conteúdo que está lá dentro. Mas forte leva mais tempo para digitar. Estou na digitação mais curta é melhor acampamento. Eventualmente, eles basicamente disseram que b e forte são equivalentes e você pode usá-los dessa forma como você vê o ajuste. Tanto b quanto strong tornarão o conteúdo em negrito. Há uma luta semelhante com I. Eu seria a tag itálica. Em um ponto eles queriam fazer algo melhor e então eles vieram com a tag em para ênfase, que realmente não faz sentido para mim porque é sobre o mesmo nível enigmático que i e pode ser confundido com a unidade de tamanho CSS. Chegaremos lá em breve. Mas sim, não parece que realmente ajuda. Eventualmente eles apenas fizeram o mesmo bem, particularmente HTML5. Tanto i como m tags tornarão o conteúdo itálico. Vamos dar uma olhada em algum código. Está bem. Isso mostra marcas de parágrafo, itálico e negrito. Temos uma etiqueta p aqui. Termina com uma tag p de fechamento. Aqui temos uma etiqueta em. Você também pode fazer uma tag i. Aqui está um exemplo. Aqui estão os exemplos aqui em baixo. Não porque zumbis não são carinhosamente surpreendentes como pode ser. Ali está o itálico. Rigor-Mortis realmente afeta a flexibilidade. Se você está surpreso com isso, tem um zumbi na sua cabeça. Isso é ousado ou forte. Este é um arrojado. Então aqui temos um exemplo do que não fazer. Isso é basicamente tanto o aninhamento impróprio quanto as tags de final impróprias. Nós combinamos a tag em e a tag i juntos, mas enquanto eles fazem a mesma coisa, eles não necessariamente interagem corretamente. Esta barra i não fecha este m, então é por isso que zumbi ainda é itálico. A barra forte realmente não fecha a tag p, mas isso é mais difícil de ver porque é aí que a página termina também. Mas sim, esse é o código para parágrafos, itálico e negrito. 5. Blocos de conteúdo zumbis — parte 2: Em seguida, precisamos falar sobre links. A tag a ou âncora é o que é usado para criar hiperlinks, atributo href é o que contém a URL de destino, e o conteúdo ou o texto do link é o texto entre as tags de abertura e fechamento. Aqui temos uma abertura de uma tag, então temos um atributo href vinculando a https://undead.institute, que é o meu site para livros de Desenvolvimento Web temático Zombie, se você quiser ir mais fundo, há um lugar para ir. Então temos o texto do link, que é mais Zombie Web Development, eo fechamento de uma tag. Uma coisa que você quer ter cuidado é links absolutos versus relativos. Links com http://ou https://geralmente são links absolutos, e enquanto a página estiver funcionando o navegador deve chegar lá. Se você não incluir http://ou https://, estes são links relativos, o navegador pressupõe que eles estarão no mesmo caminho de pasta ou no mesmo servidor que esta página atual. Se você acessar https://google.com, ele será enviado para outra página da Web, obter google.com e trazê-lo de volta para você. Se você apenas digitar google.com, ele procurará um arquivo chamado google.com, que não é tão útil em geral. Vamos fazer um pouco mais CODING AO VIVO, aqui temos a nossa tag com href, undyinglove.org, amor eterno. Temos algumas tags de quebra apenas para separá-lo, e aqui temos um link de e-mail. Os links de e-mail funcionam muito semelhantes aos links de texto normais, mas aqui você só começa com mailto: em vez de http://nunca permite. Então, quando alguém clicar nele, ele abrirá o cliente de e-mail padrão nesse computador. Você também pode configurar links telefônicos, então links tel e sms, esses dois últimos particularmente úteis em telefones, mas também podem ser usados em todos os lugares maneira também. É assim que se faz algumas ligações. Muitas vezes, quando estamos criando texto para a Web, é importante torná-lo desnatável ou facilitar para as pessoas apenas passar por ele, uma das melhores maneiras de fazer isso é através de cabeçalhos e subtítulos. HTML começa com <h1> através <h6>. É importante evitar tags de cabeçalho em branco, assim como qualquer pessoa que seja um usuário com visão irá digitalizar através de uma página com os olhos saltando de cabeçalho para outro, tentar encontrar o conteúdo que está procurando. Além disso, os usuários do leitor de tela digitalizarão com seus ouvidos e saltarão entre cabeçalhos para tentar encontrar o que eles estão procurando, títulos em branco podem particularmente jogá-los fora, mesmo que eles não joguem fora os usuários citados tanto. Cabeçalhos, cada um é geralmente vai ser o seu maior título, mas geralmente mantém o título da página para que você salte, não quer muitas vezes usar a menos que você sabe que não é o título da página. A próxima é, e você deve começar a quebrar seu conteúdo lá fora, , e continuar,,, mais subtítulos,,, muitas vezes se você chegar aqui, você geralmente tem alguns problemas de conteúdo, você pode querer para realmente olhar para isso e se você chegar a você quase definitivamente tem alguns problemas de conteúdo. Aqui temos títulos HTML, você pode ver como você subir em hs, é o maior aqui, então, 3, 4, 5 e 6, ou PFC Wiggins deve reportar a um esquilo aleatório aparentemente e como você pode ver; & lt; h1> </h1> Uma última seção que vamos abordar aqui é sobre aspas. Existem duas tags diferentes que você pode usar para aspas em HTML. Aspas em linha, nós tratá-lo com um, você também pode realmente usar aspas. Mas se acontecer de você estar em uma cultura que não usa aspas como os americanos tendem a, por exemplo, língua francesa usa um tipo diferente de aspas, mas se você estiver usando uma tag, ela tem dois grandes um deles é que há um atributo cite que pode permitir que você coloque um URL de onde você obteve a cotação para que as pessoas possam acessar esse conteúdo. Ele também permite versatilidade em citações de estilo, particularmente se você precisa de aspas duplas ou guillemet, eu acho que é chamado, que são usados em francês. Você pode fazer essas alterações com CSS em vez de ter que reescrever a página ou alterar a página. Há também aspas de bloco, que tem sua própria tag de <blockquote>, surpreendente o suficiente. Isso é para citações muito longas que vão prevalecer contra os zumbis fedorentos, é claro, e por padrão ele irá definir a citação fora de outros textos, recuando e dando-lhe algum espaço acima e abaixo do texto circundante. Você também pode usar o atributo cite em um blockquote, mas há também cite elemento é que com um blockquote, refere-se a um trabalho criativo e deve incluir tanto o título, o autor, ou a URL desse trabalho. Dito isto, outra agência de padrões web diz que você nunca deve usar o autor no elemento cite, use o seu melhor julgamento. Finalmente, aqui temos dois exemplos de citações, Alice em Zombieland, usando o elemento cite, usando o e é assim que você pode jogar com aspas e realmente começar a marcar os tipos de conteúdo dentro do seu site. 6. Faça uma lista das fraquezas dos mortos vivos: Muito bem, bem-vindos de volta ao Código não é tão assustador como Zombies. Aqui estamos falando de listas e listando as fraquezas dos mortos-vivos, e qualquer outra coisa que você queira listar. Primeiro, organizando zumbis. Portanto, as listas são uma ótima maneira de continuar a tornar seu conteúdo mais desnatável. Eles permitem que você defina algumas coisas, além de tornar mais fácil para as pessoas retirar o conteúdo que é importante. HTML em si tem três tipos de listas. Há uma lista ordenada, e lista não ordenada, e uma descrição, ou forma da lista de definição. Todos eles são compostos de dois ou mais elementos. Descrição lista é composta de três enquanto ordenado e não ordenado são compostos de dois elementos separados. Por exemplo, se estamos fazendo uma lista ordenada, começamos com um ol. Em seguida, temos o nosso primeiro item da lista, nosso segundo item da lista, terceiro, por mais que temos, e, finalmente, terminamos com um ol fechamento. Com a lista de ordens, você pode realmente alterar os números usados, decimais são o padrão, mas você também pode fazer letras minúsculas como a, b, c, d. Você pode fazer algarismos romanos, i, ii, iii, iv, etc. decimais são o padrão, mas você também pode fazer letras minúsculas como a, b, c, d. Você pode fazer algarismos romanos, i, ii, iii, iv, etc. também capitalizam versões desses. Então, um A maiúsculo para o tipo é um alfabético maiúsculo, e maiúsculo I é algarismos romanos maiúsculos. Você também altera o início dos números usando o atributo start, e apenas definindo isso para qualquer valor de número que a lista começa com. Para começar a lista às sete, você teria apenas começar é igual a aspas sete. Você também pode fazer listas não ordenadas, e eles são muito semelhantes à lista ordenada, exceto que eles usam um ul em vez de um ol, mas eles ainda usam o mesmo li. Por exemplo, começamos com um ul aqui, temos nosso item li, assim como fazemos com um ol, e temos tantos daqueles que precisamos, e depois fechamos com um ul. As listas de descrição são um pouco diferentes. Eles têm uma lista de termos e descrições, então você terá duas coisas diferentes que você está ouvindo. Antes do HTML 5, ele era chamado de lista de definição, mas eles mudaram para uma lista de descrição para ampliar seu escopo e você usá-lo para mais coisas. O elemento externo é dl para lista de descrição, o termo designado ou o elemento para o termo é dt, e o elemento para a descrição é dd. Funciona de forma semelhante. Começamos com um dl, temos um dt, temos um dd para qualquer descrição deve ser. Então podemos fazer outro dt, dd, dt, dd, etc e, em seguida, fechar com o nosso dl de fechamento. Vamos dar uma olhada em como isso funcionaria. Primeiro de tudo, vamos olhar para o ol. Então aqui novamente, nós temos o nosso ol, nós temos os nossos li's. Se quiséssemos dizer começar com sete, podemos fazer isso. Deve estar entre aspas que também podem funcionar sem eles, para que você possa ver que começa com sete lá. Eu também poderia fazer tipo igual a i, e você pode ver que eu estou começando às sete e começa com o sétimo numeral romano, ou bem ali. Então temos o ol e temos um começo e tipo, você pode brincar com isso. Em seguida, temos a nossa lista não ordenada, que tem novamente um ul e li. Você também pode alterar o tipo ul. Por exemplo, eu posso colocar em um quadrado e ele faz um quadrado. Disco é o marcador normal, e você pode mudar isso conforme necessário. Passando para listas de definição ou listas de descrição, então temos aqui novamente, nosso dl, dt de um andador, dd do zumbi ainda andar, embaralhar. Se rastreador, sua definição ou descrição e, claro, PFC Wiggins, nosso intrépido amigo, e isso é sobre ele para listas. 7. Uma imagem vale mais do que mil gemidos: Uma das coisas que você provavelmente vai querer colocar em seus artigos e tal são imagens. Em primeiro lugar, as imagens são adicionadas usando a tag de imagem HTML. É uma etiqueta de anulação, por isso não há etiqueta de encerramento. Você usaria o atributo source para dizer ao navegador de onde carregar a imagem. Em seguida, há também atributo Alt que é usado para dar uma descrição do conteúdo, é particularmente grande para leitores de tela e motores de busca, porque eles simplesmente não podem acessar o conteúdo da imagem de outra forma. Mas é importante que você adicione todo o texto para ajudar a torná-lo acessível a qualquer pessoa que tenha pouca ou nenhuma visão. Você tem sua tag de imagem, seu atributo de origem, neste caso é zombie.png. Se estivesse em uma pasta diferente, você começaria com o que quer que seja essa pasta ou o caminho para essa pasta, depois zombie.png. Mas se estiver na mesma pasta, então você pode usar isso. Você também pode puxar algo de outro lugar usando o URL completo se você tivesse isso também, o texto alt vai ser apenas texto sobre a imagem. Neste caso, um zumbi solitário busca por sua horda. Também é importante saber que você não quer dizer como imagem de ou gráfico de porque isso já é inerente em que é uma imagem. Um leitor de tela vai dizer que é uma imagem antes de ler todo o texto. Você faz muitas coisas com tamanho nas imagens. Há atributos de altura e largura que você pode definir para determinar qual o tamanho deve ser. Geralmente é melhor fazê-lo em CSS, que vamos chegar a eventualmente, mas você pode fazê-lo em seu HTML também. Se você tentar aumentar uma imagem, usando o atributo height width, você vai degradar a qualidade porque você está espalhando as informações sobre uma área maior. É como se você tem uma dada resistência, então para esses zumbis e você espalhá-los muito fino ou contra a horda de zumbis, eles não vão ser tão eficazes. Eles não vão fazer tão bem porque estão espalhados muito magros. Você pode tornar a imagem menor e deixaremos a qualidade intacta. O problema ainda será do mesmo tamanho de arquivo. Se você tem uma imagem de 10 meg e a encolhe para baixo, então é apenas como 100 pixels por 100 pixels, ele vai parecer muito pequeno, mas ainda vai levar todo o 10 megs para baixar para parecer certo. Muitas vezes, é melhor ter a altura e a largura exatas da imagem que você está usando para evitar downloads excessivos ou menor qualidade. Se você alterar a altura e a largura apenas aleatoriamente, sem preservar a proporção ou sem fazê-lo tão proporcionalmente, ele vai esmagar ou esticar a imagem, e simplesmente não parece bom. A menos que seja um zumbi, então você pode esmagar e esticá-los o quanto quiser. Como eu disse antes, idealmente, a imagem deve ser seu tamanho natural para obter o melhor equilíbrio entre o menor tamanho de arquivo e a melhor qualidade. Então vamos falar sobre os diferentes tipos de imagens que você pode usar em sites. Em primeiro lugar, há GIF, que significa Graphic Interchange Format. Eu pronuncio GIF. Muitas pessoas na internet diriam que estou errado, mas eu diria que não é jraphic. Então não é JIF, é GIF, mas depende de você, que lado você quer cair nessa luta. Os GIFs funcionam em todos os navegadores. Eles permitem animação, que é uma das razões pelas quais eles ainda estão por perto. Muitas das animações que você vê na web são muitas vezes em GIF particularmente até recentemente. Embora haja um monte de coisas novas acontecendo com CSS e animação que permite que aqueles sejam feitos nativamente em vez de apenas em GIFs. Os GIFs também permitem transparência, o que é útil, mas a transparência nem sempre é tão boa. Às vezes é um pouco crocante ou mostra mais da borda do que você quer. É um formato com perdas, que significa que quando você salva como GIFs, você está perdendo informações. Então não está guardando toda a informação. Então você está degradando a qualidade um pouco. Mas o benefício que você está recebendo é que você obtém um tamanho de arquivo menor, o que leva menos tempo para fazer o download. Portanto, é equilibrado entre alta qualidade ou qualidade da imagem e tamanho da imagem. O GIF funciona particularmente bem com grandes amostras de cores, como logotipos ou arte de linha. JPEG significa Joint Photographic Experts Group. Ele funciona em todos os navegadores, não permite animação, não tem transparência permitida para isso. É também uma compressão com perdas. Mas é super ótimo para fotografias e faz um trabalho muito melhor de compactá-las do que um GIF faz, e por isso realmente brilha em fotografias e outras imagens complexas. PNG, significa Portable Network Graphics. É o mais novo dos padrões, mas ainda funciona e quase todos os navegadores. Você tem que ir muito longe para encontrar um navegador que não funcione. Ele não permite animação, mas permite transparência de alta qualidade. Se você precisar de transparência por trás de uma imagem, você deseja usar um PNG. É uma compressão sem perdas, pelo menos no PNG-24, o PNG-8 com perdas. O que é ótimo nisso é que você está mantendo todas as informações lá. Você apenas comprim-lo em uma caixa menor em vez de se livrar de algumas das informações para que ele se encaixe em caixas menores, por assim dizer. [ inaudível] algoritmos são particularmente bons na mesma coisa em que os GIFs são bons. Coisas com grandes faixas de cor, logotipos, arte de linha, essas coisas, mas pode ser usado em qualquer coisa. SVG é provavelmente o mais novo desses padrões, ou pelo menos os que querem ser padronizados. Significa gráficos vetoriais escaláveis. Ele funciona nativamente na maioria dos navegadores, mas você também pode usá-lo dentro de uma tag de imagem, em navegadores mais antigos, então ele ainda funciona lá também. Você também pode usá-lo como um desmarcado em navegadores mais modernos, mas nativamente às vezes tem benefícios incorporados como acesso a CSS e coisas assim. Ele suporta animação e animação via CSS. Ele também suporta a transparência e aumenta e diminui sem perda de qualidade. Os gráficos SVG são o que é chamado de vetor. Eles são semelhantes novamente, mais arte linha e coisas logotipo. Mas você pode dimensioná-los para cima e para baixo sem qualquer perda de qualidade, porque eles são baseados em matemática e não em pixels. Geralmente um tamanho de arquivo muito pequeno, ele usa tags muito parecidas com HTML, que é quando eu estava falando sobre ele ser nativo. Estou falando sobre usar as tags diretamente em seu HTML em vez importar um arquivo SVG através de uma tag de imagem ou algo assim. Novamente, melhor com arte de linha, logotipos, ícones, essas coisas. Agora há outra tag que às vezes usamos para imagens, não diretamente para imagens, mas geralmente imagens circundantes. Chama-se a etiqueta da figura. É principalmente um elemento de contêiner para gráficos, tabelas, gráficos, todas essas coisas. Deve ser auto-suficiente, mas se relacionar com o conteúdo principal. Quero dizer, isso é particularmente o que você veria com diferentes papéis e coisas em que você teria uma figura que suporta os dados ou mostra os dados ou apoia as conclusões, etc. O elemento figura permite isso. É melhor usado para informações descritivas, suporta o texto ao seu redor. Outro elemento, a legenda da figa, permite que você adicione uma legenda à figura. Aqui está uma etiqueta de imagem ao vivo. Então temos imagem, temos nossa fonte. É daqui que vamos encontrá-la. Nós temos são todos texto. Se quiséssemos colocar isso em uma figura, nós apenas adicionaríamos a tag figura, fechando-a com a figura. Então, se quisermos dizer, adicione uma legenda, podemos fazer o velho Zombie cartola, e então temos uma figura. Vamos passar para o próximo vídeo. 8. Vestindo os zumbis com folhas de estilo em cascata: Agora chegamos ao CSS. CSS significa folhas de estilo em cascata. Em nosso Zombie [inaudível] HTML vai ser o esqueleto e CSS é a carne e roupas. HTML é a estrutura e CSS é a aparência, suas cores, suas fontes, é como as coisas são apresentadas. Estiliza o texto, prevê mudanças estéticas. Ele passa pelos documentos. Folhas de estilo em cascata permitindo que elementos filhos herdem algumas das propriedades de seus elementos pai, para que você possa herdar cores e tamanhos, e algumas dessas coisas. CSS vem em uma lista de regras. Uma regra consiste em um seletor e um bloco de declaração. Os seletores escolhem quais elementos as declarações se aplicam e os blocos de declaração apresentam as alterações ou falam sobre o que deve acontecer. Por exemplo, este não é um seletor CSS real, mas é assim que ele será parecido. Você tem primeiro seu seletor, em seguida, você tem um colchete de abertura, em seguida, você tem a declaração e, em seguida, um valor e, em seguida, um colchete de fechamento. Os dois pontos e vírgula são importantes, por isso certifique-se de incluí-los. Vamos falar mais sobre a seleção. Os seletores vêm em três sabores principais. Você tem classes, identificações, elementos. Você pode combiná-los para criar o que é chamado de seletores descendentes. Estes são descendentes da mesma forma que um filho é o filho ou descendente de um elemento pai. Para as aulas, você vai usar um atributo de classe, para elementos HTML, e em CSS você precisa ter um ponto na frente dele, por exemplo, período zumbie-escola. IDs; você vai usar o atributo ID e só aparece uma vez por página e em CSS, você precisa de uma hashtag na frente deles. Hashtag único-zumbi. Declarações CSS geralmente são palavras-chave ou pares de valores separados por dois-pontos e usam um ponto-e-vírgula para designar o fim. Você pode ter várias declarações por regra e colchetes envolvem o bloco de declaração para mostrar o início e o fim do bloco. Por exemplo, com a tag p, podemos definir a cor para amarelo-verde e, em seguida, isso mudará todo o texto do parágrafo para um verde-amarelo doentio. Aqui temos alguns HTML nos lados, temos apenas tags de parágrafo. O próximo tem aula. classe é, hoity-toity e, em seguida, ID, que é único. Por exemplo, aqui temos a cor de azul claro para o parágrafo. Se mudarmos isso para vermelho, deve actualizar aqui em baixo. A cor é vermelha, hoity-toity está selecionando o meio. Se mudarmos isso para apenas verde normal, vai isso. A razão pela qual ficou vermelho por um pouco antes de ficar verde foi que um p-tag também se aplica ao hoity-toity, p-tag, mas hoity-toity sendo uma classe vai realmente substituir o p-tag porque é mais específico porque não é cada tag p. São apenas aqueles que têm uma classe de hoity-toity e, em seguida, se mudarmos, dizer o único e adicioná-lo. Vamos mudar para azul, então fica azul lá embaixo. Como colocamos CSS e HTML juntos? Há quatro maneiras de fazer isso. Atributo de estilo, tag de estilo, que são os dois principais que vamos falar e, em seguida, há uma folha de estilo externa e importar uma folha de estilo. Mais uma vez, estes são mais complexos do que realmente precisamos. Falaremos sobre os dois primeiros. O atributo style vai em qualquer elemento HTML. Parece semelhante a uma classe ou outros atributos que falamos. Você só precisa da declaração, já que você já está no elemento específico onde estamos selecionando esse elemento para que você não precisa de um seletor, apenas a declaração. O lado positivo é que você pode ser muito específico em como você aplica regras. A desvantagem é que se você definir isso em uma série de elementos, digamos, mudar todos os textos de parágrafo para azul, mas então seu chefe quer mudá-lo para vermelho ou você precisa mudar algo mais tarde, então você tem que editar cada um dos eles. Para ver como o atributo style realmente se parece, aqui temos, tipo p-tag, temos um atributo style com uma cor verde e o parágrafo terá texto verde. Elemental estilo; há um elemento de estilo que é parte do elemento HTML, apenas estilo e você pode colocar CSS entre as marcas de estilo de abertura e fechamento. Neste, você pode definir todos os parágrafos para azul e, em seguida, se você alterar isso, ele irá mudar em todos os lugares. Com a tag estilo, o p, vez que temos um seletor, será aplicado a todas as tags de parágrafo dentro desta página particular e podemos mudar a cor para roxo ou vermelho ou qualquer coisa que queremos alterá-lo apenas alterando este único lugar em vez de ir para cada atributo de estilo e alterá-los lá. Há algumas advertências aqui. Use seus novos poderes sabiamente. As cores e fontes da marca estão lá por uma razão para criar consistência em muitas páginas. Se for contra eles, faça-o por sua conta e risco. Não é minha culpa. Você está fazendo essa escolha. Só estou te dizendo como fazer quando faz sentido. Use seus novos poderes sabiamente. Se você tentar fazer um novo design e aparência por página, essa é realmente a escolha sábia que pode confundir os usuários. Há momentos em que você quer fazer isso, pode ser, por exemplo, se você tem uma figura que você queria, em seguida estilo um pouco diferente do que o resto do site que pode fazer sentido para fazer isso. Consistência é muito importante. Ele ajuda os usuários a saber que eles estão no mesmo site, que eles estão lidando com a mesma instituição e se você constantemente mudar fontes ou cores constantemente mudar isso não vai fazer nenhum sentido e eles vão sair. Eles vão para um local diferente. Há momentos em que você pode e deve ir contra cores e fontes da marca. Eles são raros e se você fizer isso, você deve ter uma boa razão para fazê-lo. Devem ser razões como a forma como você estava mostrando o conteúdo necessário para ter uma fonte e cor diferentes, para que você possa fornecer contraste com a marca, fontes e cores ou algo assim. Deve ser uma boa razão e deve ser uma que você possa articular. Novamente, vá contra marca, cores e fontes por sua conta e risco. Tudo o que disse, porém, seja criativo e ultrapasse os limites. A web é um lugar para jogar e se divertir e se não continuarmos ultrapassando os limites, nunca saberemos o que podemos fazer. 9. Definindo as fontes dos zumbis: Ok. Vamos falar sobre fontes. Você pode usar qualquer fonte que você quiser para sua página da Web. Ficará ótimo no seu computador, mas se outras pessoas não o tiverem, vai parecer vômito de morto-vivo. Além disso, você precisa ter cuidado que mudar a fonte sem uma boa razão irá aumentar o horror, não é uma boa idéia fazer a menos que você saiba o que você está fazendo ou está mudando de algo mais para o tipo de fonte desejado que é usado em outro lugar. Como as fontes não estão disponíveis em todos os sistemas, normalmente você deve escolher várias fontes que serão semelhantes se uma não estiver disponível. Por exemplo, aqui eu tenho uma classe de conteúdo e a regra de font-family é que escolher qual fonte queremos usar. O primeiro que estará disponível é Helvetica ou que esperamos estar disponível é Helvetica. Se isso não estiver disponível, então eu vou com Verdana, e se isso não estiver disponível, então, você também pode alterar o tamanho da fonte. Você pode usar alguns tipos diferentes de unidades, pixels, porcentagens, ems e até mesmo um par de mais. Prefiro EMS porque são uma unidade relativa. Um em é igual ao tamanho padrão da fonte, normalmente há 16 pixels. Em são unidades relativas, o que significa que as tags filho herdarão o tamanho da fonte pai, e o tamanho da fonte do pai se torna o novo tamanho de fonte padrão do filho. Seu um em é baseado no tamanho da fonte do pai. Por exemplo, se o tamanho da fonte de um pai for definido como dois em, e o filho também estiver definido como dois em, se assumirmos que 16 pixels é a base, e o filho também estiver definido como dois em, se assumirmos que 16 pixels é a base, então o tamanho da fonte pai será 32 pixels, mas o tamanho da fonte da criança será 64 pixels porque ele está construindo duas vezes o tamanho padrão de seu pai. O benefício aqui é que as coisas ficam maiores e menores proporcionalmente. Se, por exemplo, um usuário decidir alterar seu tamanho de fonte padrão de 16 pixels para 24 pixels, ou mesmo se eles descem de 16 pixels para 10 pixels ou algo assim, então todos os tamanhos de fonte vão mudar de acordo. Se descêssemos para 10 pixels, por exemplo, o tamanho da fonte do pai seria de 20 pixels, e o tamanho da fonte da criança seria 40 pixels. Eles ainda vão se manter proporcionais ao que foi originalmente definido. Se você os definir com números de pixel específicos, eles não mudariam, e isso não é muito bom para o usuário, porque às vezes os designers podem fazer coisas muito pequenas, o que pode ser difícil de ler. Aqui está um exemplo de uma mudança de font-size. Neste caso, estamos alterando o tamanho da fonte para 1,25 em, então estamos aumentando um pouco para cerca de 20 pixels, assumindo que 16 pixels era o padrão. Aqui temos a versão de pixel, tamanho de fonte de 20 pixels, e você também pode usar porcentagens, tamanho de fonte de um 125 por cento. Pesos de fonte. Você provavelmente está familiarizado com negrito, um peso mais pesado, que a fonte normal. Mas há alguns outros pesos que você pode usar. As fontes vêm em muitos tamanhos e espessuras. A propriedade font-weight permite que você altere isso. Você pode ir de 100-900, incrementos de 100, 400 é normal e 700 é negrito. A maioria das fontes não tem todos os nove pesos. Eu diria que é um número raro de fontes que têm todos os nove. A maioria terá pelo menos 400 e 700, mas pode haver algumas vezes você terá uma luz e algumas dessas coisas. Você também é capaz de usar as palavras-chave normal e negrito para também defini-los sem ter que lembrar a coisa 400 e 700. Qual é o peso zumbi? Aqui temos conteúdo font-weight negrito, você também pode definir o font-weight como normal, e o equivalente em números. Aqui temos o peso da fonte enviado 100, e, finalmente, para 400. Styling. O estilo de fonte é como você itálico ou unitálico o conteúdo do CSS. Nós apenas estilo de fonte itálico define o estilo de fonte para itálico, e normal define de volta ao normal. Por padrão, como tenho certeza que você viu, os links são sublinhados em azul. Às vezes, você vai querer remover o sublinhado ou até mesmo adicioná-lo de volta. Isso é usado para decoração de texto. Decoração de texto, nenhum foi removido. O texto sublinhado ou a criação de sublinhado irá adicioná-lo de volta. Você também pode alterar a cor da fonte, e como mudar a família da fonte, você também quer ter certeza de que você usa isso sabiamente e escolher cores que são agradáveis aos olhos, e não o verde amarelo doente que você Provavelmente vai me ver escolher aqui. Há muitas maneiras de definir cores em CSS. Podemos usar palavras-chave como vimos no último capítulo, como azul e verde, pêssego, sopro, etc Há também uma notação hexadecimal que se parece com isso. Nem sei de que cor é essa. Não se preocupe. Você não tem que saber. Mas se você sabe que esta é uma cor, a hashtag antes de mostrar que é uma cor, então você pode obter qualquer cor que você quiser e um programa gráfico, em seguida, copiar esse valor hexadecimal em seu HTML, a fim de mudar a cor. Embora as palavras-chave sejam úteis, elas não têm quase tantas cores quanto os números hexadecimais permitem, e novamente como eu disse, qualquer programa gráfico deve ser capaz de ajudá-lo a obter o valor hexadecimal que você pode então apenas ligar. Aqui está um exemplo de configuração da cor para verde amarelo, aqui está outro exemplo usando a notação hexadecimal. Observe que a hashtag está lá, e é necessária para fazer números hexadecimais. Vamos dar uma olhada em algum código. Aqui eu só tenho um pequeno parágrafo que eu adicionei um monte de coisas diferentes para. Aqui temos a família da fonte, assassino zumbi sendo uma fonte que realmente não existe. Não vai encontrá-la. Já que existe uma pista no meu computador, vai mostrar-me isto na pista. Se raleway não existem como pode não no seu computador, ele vai escolher helvetica, e se helvetica não está disponível, então ele vai escolher alguma fonte san-serif, provavelmente ariel, mas realmente depende do seu computador e do que você está fazendo. Aqui temos que torná-lo ousado. Então eu fiz essa coisinha ousada para definir a fonte um pouco ousada, texto magro aqui, Zombie. Se você não tem raleway em seu computador, você não vai ver isso entrar em seu texto, porque raleway é uma fonte que tem várias versões ou vários pesos. Então eu fui capaz de mostrar isso como o peso zumbi. Em seguida, temos um texto normal. Então o peso da fonte é normal, texto insanamente grande é essa coisa de cara pequeno. Vou mudar para seis. Você também pode mudar as coisas para muito pequeno. Então, neste caso, eu mudei a palavra site para apenas seis pixels ou realmente sim, eu sinto muito. Isso garante que temos raleway. Então você ainda deve ver Raleway no seu computador mesmo que você não tenha por causa da maneira que eu configurei isso. Voltando ao estilo da fonte, tão itálico, então eu coloquei tudo em itálico, e então no meio aqui eu tenho apenas essa palavra zumbi que eu estou fazendo chato. Então eu estou mudando o estilo de fonte e normal, e ele não é mais itálico. Tudo bem. É isso para esta seção. Vamos para a próxima. 10. Coloque o morto vivo na caixa: o modelo de caixa CSS: A próxima coisa que vamos falar é sobre o modelo de caixa CSS. CSS determina como os elementos são dispostos, como eles interagem uns com os outros. Parece algo parecido com isto. Você tem margem ao redor das bordas. Você tem uma fronteira. Dentro que você tinha estofamento. Então, no centro está o conteúdo. Em geral, no modelo de caixa, a largura é igual à largura do conteúdo, não a largura da borda, como é mais comumente pensado. Há uma maneira de mudar isso usando o que é chamado de border-box, um pouco além deste curso. Mas a largura do conteúdo é geralmente a largura do mesmo, e então você pode adicionar preenchimento e borda e margem para empurrar as coisas ao redor e adicionar espaçamento, etc Largura define a largura do elemento padrão para a largura do conteúdo. Altura define a altura do elemento. preenchimento é o espaço entre o conteúdo em sua borda externa. Borda é a borda externa do elemento. Margem é o espaço entre os elementos. Você também pode usar ems para esses valores também. Você não precisa usar apenas pixels ou porcentagens ou qualquer outra coisa; você pode usar ems também. Encaixar os zumbis. Margem e preenchimento podem ter valores definidos. Um valor para definir todos os lados, como estamos fazendo aqui. Margem de 2em vai colocar, assumindo que 16 pixels é a base, 32 pixels em cada lado do conteúdo, e então outros 16 pixels de preenchimento estarão disponíveis lá também. Mas você também define os lados individualmente usando algo chamado notação de problemas, modo que T, R, B, L é importante. É a ordem em que você coloca os lados. Então, em cima, direita, em baixo, esquerda. É a palavra problema, é como me lembro. Superior, direita, inferior, esquerda porque eles estão na mesma ordem na palavra problema. Margem, estamos definindo 1em no topo, 16 pixels à direita, zero pixels na parte inferior e 5% à esquerda. O preenchimento, estamos definindo 20 pixels no topo, zero à direita, 10% na parte inferior e 2em à esquerda. As bordas exigem que três valores sejam definidos. Primeiro é a largura da borda. Qual é a largura da borda, geralmente em pixels, ems, qualquer uma dessas unidades. Estilo de borda, isso geralmente é sólido, tracejado, pontilhado, todos esses tipos de coisas, e há mais estilos disponíveis também. Nove em cada 10 vezes eu uso sólido e não tracejado ou pontilhado. Mas está disponível para você se precisar usá-lo. Em seguida, também a cor da borda. A cor que você quer que a borda seja. Você pode usar palavras-chave, hexadecimal, etc Aqui está um exemplo. Temos borda com dois pontos, e então a largura é um pixel, sólido é o estilo, e #47D2F3 é a cor. Muitas vezes, se você quiser adicionar uma imagem a um conjunto de textos, muitas vezes se destaca como um humano em uma horda de zumbis. Chamava-se “flutuar”. Veja, você pode flutuar para a esquerda ou direita para enviá-lo para a borda esquerda ou direita do elemento. Como você pode ver aqui, a imagem superior é flutuada para a esquerda, e a imagem inferior é flutuada para a direita. Ao fazer isso, você pode usar a margem ou o preenchimento para adicionar espaçamento em torno dele, de modo que o texto não seja executado diretamente contra a imagem. Aqui temos flutuador, certo. É apenas cólon flutuante direito. Em seguida, margem, estamos definindo cinco pixels no topo, zero à direita, cinco pixels na parte inferior e cinco pixels à esquerda. Estamos fazendo isso zero pixels à direita para que ele possa ser liberado para a borda direita do conteúdo, em vez de ficar em cinco pixels. Nós não queremos que o texto esteja diretamente contra a imagem, então estamos empurrando-o para cinco pixels. Da mesma forma, com o flutuador, à esquerda, uma margem de cinco pixels no topo, cinco na direita, cinco na parte inferior , zero na esquerda, novamente, que possamos colocá-lo à esquerda enquanto flutuamos para a esquerda, e cinco pixels em todos os outros lugares para evitar que o texto vá diretamente contra ele. Nós também fazemos planos de fundo ou alterar a cor de fundo de um elemento com a propriedade background-color. Então algo cor de fundo de vermelho. Se você fizer isso em um elemento que contém texto, certifique-se de adicionar algum preenchimento para que a cor não esteja diretamente na borda do texto. Uma coisa importante a notar, uma das grandes diferenças entre preenchimento e margem é que a cor de fundo de um elemento irá mostrar através de preenchimento, mas não margem. Aqui temos uma grande variedade de maneiras diferentes de fazer preenchimento. Temos um travesseiro acolchoado, espaço pessoal, espaço pessoal no metrô, individualmente, grupo, parede direita. Vamos olhar para estes diretamente. Primeiro, temos como um travesseiro é esse elemento aqui. Temos um estofamento de 2em em todo o lado. Eu poderia colorir o fundo vermelho só para que fosse fácil de ver. Em seguida, temos preenchimento humano, que eu dei preenchimento no topo foi zero, preenchimento à direita foi 1em, preenchimento na parte inferior foi 12.375 em. Talvez o seu preenchimento é diferente, mas o preenchimento à esquerda também foi 1em. Aqui temos estofamento com basicamente nenhum no topo e um monte inteiro na parte inferior. Então temos espaço pessoal onde queremos fazer tanto espaço pessoal quanto possível. Temos margem de 5em, mas como você pode ver aqui, não há preenchimento, então o texto corre até a borda dos elementos, o que não parece muito bom e é difícil de ler. Então, se você estiver no metrô ou no metrô ou o que for, você quase não tem espaço pessoal. Você tem um pouco acima de sua cabeça, talvez um pouco à sua direita. Você está sentado em um assento, então não há margem lá, e talvez um pouco para a esquerda. É onde esta margem está. Então aqui temos estofamento humano. É o mesmo que acima. É só usar uma declaração para definir todas as regras. Espaço pessoal no metrô. A mesma coisa aqui. Mesmos números como acima, mas sendo usado em uma declaração. Com bordas, você pode ter definido individualmente. Então você tem borda de um pixel, sólido, cor de borda de verde, e lá está, cor de borda de verde. Uma nota, apenas esta linha aqui é a partir deste elemento hr, que significa regra horizontal como um elemento HTML que você pode usar para separar as coisas, se necessário. Em seguida, temos agrupados. A borda é agrupada aqui com um pixel, sólido e azul. Em seguida, a parede direita, temos uma borda à direita, 50 pixels, sólido, e preto. Essa é outra forma de fazer fronteiras, etc. Para a próxima. 11. Dê um soco no código zumbi produzido pelo Word: Às vezes, quando você está trabalhando e você criou seu conteúdo no Word, uma maneira perfeitamente normal de criar código, Word tenta ser útil e incluir a fonte exata que você está usando, espaçamento exato que você está usando, e todas as informações que Você realmente não se importa. Você só quer que ele tenha seu conteúdo, talvez com o negrito e itálico e essas coisas intactas, há algumas maneiras que você pode resolver isso. A certa altura recebi uma mensagem maluca. Nem sei por onde começar com muito disto. É apenas estranho. Uma das melhores coisas que você pode fazer é colocá-lo em um editor de código. Neste caso, coloquei aqui na CodePen. Mas você pode usar qualquer editor de codificação de cores que você quiser. Isso realmente lhe dá muita informação ou ajuda a esclarecer o que está acontecendo. Agora você pode ver que tudo isso é apenas de uma tag span e há uma seção em itálico negrito sublinhada aqui, sem motivo, ao que parece. Há um monte de coisas estranhas acontecendo aqui. Agora que você pode ver a codificação de cores, é claro, você pode simplesmente excluir a tag span. Não se esqueça de excluir o outro span ou o span oposto. Muito desse conteúdo, na verdade, nós nem precisamos porque é só para esse cara aqui é o que é chamado de espaço não-quebrando. É equivalente a apenas um espaço, mas tem o benefício de não quebrar a linha. Às vezes é usado como um lugar para as coisas. Mas lá nós temos espaço e nós podemos realmente simplesmente excluir esta seção inteira aqui. Lá vamos nós. Agora temos o código que queríamos e não de toda essa loucura. Essa é uma ótima maneira de fazer isso. Há alguns sistemas de gerenciamento de conteúdo que são melhores para remover isso do que outros. Às vezes, em Drupal eles teriam uma pasta do Word que irá remover um monte de que cruft você não quer deixando o conteúdo que você faz e o estilo que você faz. Outra maneira de se livrar dele é colá-lo como texto simples, então copie o conteúdo em um editor de texto simples. Isso geralmente deve remover toda a formatação, o que nem sempre é ideal. Essa é outra maneira de fazer isso. Além disso, se você tem uma cópia do WordPress acessível, WordPress tende a fazer um bom trabalho de remover um monte de que cruft e excesso de código deixando o material que você deseja manter se você colá-lo no editor visual. Essa é outra ótima maneira de contornar isso. Talvez se você estiver usando WordPress de um lado e Drupal outra coisa que você sempre pode colá-lo no WordPress, em seguida, copiar a partir daí e colar para o outro aplicativo ou a outra coisa que você está fazendo. Há muitas maneiras diferentes de contornar isso, mas colocá-lo em um editor de código que códigos de cores é provavelmente a melhor maneira de manter o conteúdo que você deseja e se livrar do que você não quer. 12. Arranque os “cérebros”: citações: Então algo que você pode querer fazer é criar algumas citações, e eu acho que você tem ferramentas suficientes agora para ser capaz de fazer isso. Então o que vamos fazer é eu vou pegar uma citação desta peça em particular que é uma velha história de Lloyd Arthur Eshbach sobre zumbis, e eu vou apenas puxar algumas palavras para fora e criar uma frase de puxar. Então eu encontrei o conteúdo que eu quero retirar. É esta pequena seção aqui, “Fora da folha de enrolamento da névoa ao luar, rastejou uma estranha e estranha nave.” Tudo bem, então eu vou copiá-lo, e então eu vou colá-lo novamente. Na verdade, o que eu quero fazer é eu quero mover um pouco mais para baixo, eu vou adicionar blockquote, classe é igual a boa classe com pull quote, e eu vou ir em frente e fechar esse blockquote só para eu não esquecer de fazê-lo. Eu posso ver que eu digitei errado alguma coisa lá. Então eu vou adicionar isso de novo aqui. Então, se rolarmos para baixo, devemos ver aqui esta seção novamente como uma citação separada. Então agora eu vou para o meu CSS, e eu vou fazer primeiro de tudo, colocar a classe em, e adicionar algum conteúdo aqui. Então, algumas coisas que eu quero fazer aqui. Eu quero definir uma largura de digamos 200 pixels, e talvez isso seja um pouco pequeno. Vamos tentar 300 pixels, e eu quero aumentar o tamanho, que ele se destaca. Então eu estou indo para o tamanho da fonte de dois em então é um pouco maior. Talvez seja demais. Vamos descer para dizer 1.5. Ainda um pouco grande. Vamos fazer 1,25. Tudo bem, então ainda é um pouco maior, mas não muito grande. Vou flutuar direito. Como você pode ver lá, role um pouco para baixo para que possamos continuar vendo. Vou adicionar uma borda no lado esquerdo. Digamos cinco pixels. Que tal vermelho e sólido? Isso está muito próximo do texto em si, pelo que queremos fazer um pouco de preenchimento. Deixe-me fazer o estofamento à esquerda, e eu não sei, talvez um em. Vamos ver como isso se parece. Isso é provavelmente bom. Acontece que este vermelho é um pouco mais leve do que eu quero, então eu vou colorir eu escolhi um pouco mais cedo. Eu só vou mudar para essa cor. É mais um vermelho profundo que eu acho que se encaixa melhor com o que estamos vendo aqui. Agora, eu só adicionei estofamento à esquerda, mas eu acho que seria bom se nós adicionássemos um estofamento para todos os lados, e o que vai ajudar com isso, vai fazer a borda sair um pouco mais alto também. Então eu mudei o estofamento para um em e a borda está fora um pouco mais. Você sabe o que? Eu acho que eu quero fazer um em, então na parte superior e inferior, eu acho que eu quero fazer.5 em, e então à esquerda e à direita, eu vou fazer um único em, e isso vai então colocá-lo assim. Nós também podemos mudar talvez a cor aqui, talvez nós vamos ficar cinza um pouco. Então, vamos fazer O para fazê-lo puxar para fora um pouco, e lá temos um pull quote. Nós também podemos talvez mover isso um pouco para cima, o que eu acho que pode ser uma boa idéia. Então eu vou apenas cortá-lo e colá-lo, e estar acima neste anterior. Então outra coisa que temos que pensar é que com blockquote vem alguns estilos padrão. Então, se estamos tendo muito espaço em torno dele, que eu sinto que estamos, podemos remover alguma margem e ter certeza de que não estamos tendo muito em cima e em baixo. Mas o que isso fez foi trazer esta informação aqui muito perto, na minha opinião, da fronteira. Então vamos dar um pouco mais de margem. Em vez de zero, vamos fazer 0,5 em. Não é o suficiente. Vamos fazer um “em”. Lá vamos nós. Há um pouco mais de espaçamento. Eu também acho que como nós tornamos isso menor, ele vai parecer um pouco melhor porque nós temos um texto que não está continuando aqui. Sim, acho que fui um pouco longe demais. Vamos ver como fica se eu colocá-lo bem ali. Tudo bem, sim. Isso parece muito bom, e aí você tem sua citação. Você certamente vai fazer variações sobre ele. Poderíamos adicionar uma cor de fundo para dizer vermelho muito escuro, dizer assim. Talvez seja um pouco escuro demais. Vamos subir para dizer assim. É muito brilhante. Há quase a direita. Então podemos fazer algum lugar com algumas coisas assim, podemos tornar a fronteira um pouco maior se quisermos. Pense em como queríamos que a coisa ficasse e como queríamos que ela interagisse com o outro conteúdo. Se estivermos usando essa cor de fundo, acho que vou mudar a cor do texto de volta para branco. Talvez demais. Vamos tentar algo um pouco esbranquiçado, então acho que um pouco menos pronunciado. Mas sim, aí está. Você pode jogar com seus blockquotes e apenas adicioná-los por conta própria sem precisar contratar um designer ou fazer nada mais do que apenas adicionar um pouco de texto e um pouco de CSS. 13. Agradecimentos: Bem, tivemos bons momentos juntos. Você aprendeu HTML, CSS. Você aprendeu o que é uma etiqueta, um elemento. Regras e declarações. Mas agora tenho de me despedir. Obrigado por assistir ao meu curso. Espero que você tenha aprendido muito e possa aplicá-lo ao longo de sua vida. Não se esqueça de incluir seus projetos de diretório, e colocá-los para que Eu possa vê-los, para que outros alunos possam vê-los e apenas mostrar o que você aprendeu. Obrigado novamente por fazer este curso. Espero que você tenha sido capaz de matar alguns zumbis e ter um pouco de diversão ao longo do caminho. Te vejo na próxima vez. 14. Aula bônus 1: crie uma página bunker: Neste vídeo, vamos falar sobre como construir uma página HTML do zero. Vamos falar sobre Doctypes, os elementos de cabeça e corpo HTML, e os elementos dentro da cabeça. Em primeiro lugar, há quatro partes principais para uma página HTML. Primeiro é o DOCTYPE. Isso vai dizer ao navegador que tipo de documento ele está trabalhando. Há o elemento HTML, que está indo apenas para embrulhar todos os outros elementos. Há o elemento head que vai dar informações sobre a página e como renderizar a página, como exibir a página em vez disso, e, em seguida, o elemento body, que vai conter todas as informações que você realmente vê no página. O doctype, novamente, diz ao navegador que tipo de documento é. Quando estávamos trabalhando com XHTML, tínhamos algo assim, o que é super adorável. Tenho certeza que todos vocês já o memorizaram. Infelizmente, com HTML5, eles foram para o outro lado. Não, na verdade é uma sorte porque eu me lembro disso. DOCTYPE HTML diz ao navegador que este é um documento HTML5. O elemento HTML. Vai embrulhar todas as outras etiquetas ou todos os outros elementos. Ele tem uma tag HTML de abertura que se parece com uma tag HTML e uma tag HTML de fechamento. Para uma melhor acessibilidade e otimização do mecanismo de busca, uma das melhores coisas que você pode fazer é adicionar linguagem ao elemento HTML, a tag de abertura. Isso ajuda a garantir que o navegador não só saiba qual idioma de computador estamos usando, que é o que o doctype diz a ele, mas também que linguagem humana ele está usando. Parece algo parecido com isto. Você só tem a tag de abertura HTML, você adiciona um atributo lang e en, neste caso é Inglês, mas você pode usar es, para Espanol e há muitos outros códigos de país e códigos de idioma que você pode usar. O elemento principal vai segurar tudo sobre a página. Nenhum deles realmente renderiza na página ou é exibido na página. São todas as informações sobre como criar a página, como juntá-la, para que você tenha coisas como os arquivos CSS que estão em uso, quaisquer arquivos JavaScript que possam estar em uso, meta informações sobre a página, o título que aparece no nome da janela ou guia e todas as outras informações sobre a página. Não é informação que renderiza na página, mas informação que é sobre a página. Agora também estou enfatizando isso parcialmente, porque a cabeça é semelhante a um par de outras tags, cabeçalho e cabeçalhos. Vamos falar sobre as diferenças mais tarde, mas cabeçalho e cabeçalhos vão no corpo enquanto a cabeça é uma coisa separada, é um filho direto do elemento HTML. Novamente, nada na cabeça será mostrado diretamente na página da web e ele se parece com isso, abertura tag cabeça, fechamento tag cabeça. O corpo. Isso vai conter todas as informações que estão visíveis na página. Tudo o que é realmente exibido, tudo o que você vê na janela do navegador estará no corpo. Todos os textos, cores, imagens, o que mais aparecer, vai diretamente e estritamente no corpo. Temos o nosso elemento corpo de abertura, ou melhor, abertura tag body e nossa tag body fechamento. Agora vamos juntar tudo o que aprendemos. Primeiro temos o DOCTYPE. Felizmente é HTML5 DOCTYPE, então meus dedos não têm uma cãibra escrevendo todo o DOCTYPE. Seguindo isso é a tag HTML de abertura, com um atributo lang para Inglês, uma vez que a página que estamos construindo aqui é em Inglês. Então temos a tag cabeça de abertura, fechamento tag cabeça, abertura tag body, fechamento tag body, fechamento tag HTML. É importante notar que a cabeça e o corpo são os dois únicos elementos que estão diretamente dentro do elemento HTML. Tudo o resto no documento HTML deve ir no elemento head ou no elemento body. Nada mais é diretamente uma criança, por assim dizer, do elemento HTML. Agora eu só quero deixar claro novamente que cabeça, cabeçalho e cabeçalhos são coisas diferentes. A cabeça não é um cabeçalho ou um cabeçalho, mas é a cabeça, é a informação sobre a página. Cabeçalho e h1 a h6, ou os títulos são diferentes. Estes vão para o corpo, não para a cabeça. Cabeça é para informações sobre a página. Cabeçalho e cabeçalho ou h1 a h6 todos aparecem ou são exibidos dentro da página, enquanto cabeçalho é informação sobre a página e não é exibido diretamente. Dentro da cabeça, temos uma série de elementos diferentes. Primeiro de tudo é o título. Isto é novamente, o título da página, também não é exibido diretamente na janela do documento ou na janela do navegador. No entanto, ele é exibido no nome da guia ou na parte superior da janela. Os textos que você veria no nome da aba ou na parte superior da janela, esse é o elemento título. No entanto, não é importante para a otimização do mecanismo de pesquisa porque ele fornece informações sobre a página e também são informações que você veria em um nome de guia, etc, então com um bilhão de guias abertas, pode ser importante ter bons textos lá. Talvez você tenha menos abas abertas do que eu, mas eu provavelmente tenho mais de um bilhão. Você deseja usar palavras-chave descritivas ao escrever seu título é apenas para ajudar a otimizar seu mecanismo de pesquisa e ajudar a deixar claro sobre o que a página é sobre. Aqui está um exemplo de um elemento de título. Meta é informação sobre a página. Como sendo informações sobre a página, você pensaria que ele vai na cabeça e ele faz. É uma tag vazia, que significa que não tem tag de fechamento, então é apenas uma tag de abertura. Na maioria das vezes, ele consiste em um atributo name e um atributo content. Falaremos sobre o que são em um momento. Mas também há um atributo de conjunto de caracteres. Este é o conjunto de caracteres usados pelo site. Isso é importante para a internacionalização e para garantir que qualquer navegador que esteja olhando esta página está codificando ou entendendo corretamente os caracteres que estavam em uso. É uma coisa boa para ter caso contrário o navegador é adivinhar, ele muitas vezes vai adivinhar certo, mas pode não, então tê-lo é útil. Na maioria dos casos, o valor para charset deve ser UTF-8 e será parecido com isso. Meta charset UTF-8. Em seguida, temos o viewport Meta tag. Isso é importante, especialmente para design responsivo. Vamos falar disso um pouco mais tarde. Mas ele diz ao navegador para não diminuir o zoom, mas para mostrar o site em seu tamanho natural. O que acontece muitas vezes com dispositivos móveis se você não tiver essa meta tag viewport no lugar, ele irá diminuir o zoom e tentar mostrar a página inteira de uma só vez. Por um longo tempo, isso foi muito bom porque caso contrário você estava preso zoom em uma página que você mal podia ler e provavelmente não funcionou em seu dispositivo móvel, mas com design responsivo, que vamos entrar em um pouco, ter este Viewport Meta tag permite que você tenha um maior controle como um desenvolvedor web e permite que você crie um site que será mais facilmente visível pelos usuários em seus dispositivos móveis. Não se preocupe se não fizer sentido agora, discutiremos isso de novo. O nome do elemento Viewport Meta é definido como Viewport e o conteúdo é definido para uma largura igual a largura do dispositivo e na escala inicial é igual a 1.0. Geralmente, o que eu tinha lá para conteúdo é tudo o que você vai precisar. Há momentos em que você pode fazer algumas pequenas alterações nisso, mas em geral, esse é o valor do conteúdo que você deseja usar. A meta tag description também está lá para otimização do mecanismo de busca. Vai ser algumas frases que alguns de seu site. Muitos mecanismos de pesquisa mostrarão isso como a descrição que você vê nos resultados da pesquisa, portanto, certifique-se de que ele é claro, conciso, rico em palavras-chave e representa bem o seu site. O atributo name aqui vai ser a descrição, e o conteúdo vai ser qualquer frase ou duas sobre o seu site que você deseja colocar em. Este conteúdo é provavelmente muito curto, provavelmente deve ser cerca de 30-50 palavras. Não muito tempo, mas também não muito curto. O elemento link é uma maneira para você vincular outros tipos de arquivos com seu HTML. Às vezes são os arquivos CSS e às vezes outros documentos relacionados. Vai parecer algo parecido com isto. Você tem o elemento link aqui. Cada atributo ref vai ser o caminho para o tipo específico de arquivo. Neste caso, é um arquivo CSS e rel vai ser a relação para o que é que você está se conectando ao elemento link. Neste caso, é a folha de estilo. Agora vamos ver alguns códigos ao vivo. Aqui temos todos os elementos que acabamos de falar todos juntos em um só lugar. No lado esquerdo aqui eu tenho o código, na mão direita aqui é uma renderização direta dele. A maioria do que falamos foram coisas na cabeça, o que novamente não é exibido diretamente na página, mas eu incluí um cabeçalho e um H1 aqui para ajudá-lo a ver a diferença entre cabeçalho e cabeçalho. Esta é a cabeça, este é um cabeçalho, este é um cabeçalho. Vamos começar a partir de cima aqui. Temos o nosso DOCTYPE. Isso informa novamente ao navegador que é uma página HTML, neste caso, HTML5 por página posterior. Temos nossa tag de abertura HTML com um atributo lang e inglês definido como nosso idioma. Temos a nossa tag cabeça de abertura, e aqui temos uma tag de título que será exibida na janela do navegador. Em seguida, temos o conjunto de caracteres, novamente, UTF-8. Certifique-se de que estamos todos na mesma página aqui. Em seguida, temos a tag meta viewport. Isso será tudo que você precisa fazer. Você pode copiar e colar isso em suas páginas. Você não precisa necessariamente saber mais do que isso. Existem algumas outras opções, mas raramente são usadas. Temos a nossa descrição meta tag, temos o conjunto de conteúdo, temos o nosso link para um arquivo CSS zumbi, e relação é a folha de estilo, temos a nossa cabeça de fechamento. Novamente, todas as informações sobre a página, informações que não serão renderizadas no lado direito aqui, mas informarão como esta página é renderizada, particularmente com zombie.css, mas também informações sobre a página como as palavras-chave e a descrição do viewport. Temos a nossa etiqueta de corpo de abertura, depois temos o nosso cabeçalho, que é um elemento estrutural sobre o qual falaremos mais detalhadamente um pouco mais tarde. Nós temos o nosso cabeçalho H1, que é informação que será exibida à direita aqui como você pode vê-lo bem ali. Então temos o nosso H1 de fechamento, cabeçalho de fechamento. Temos uma etiqueta de navegação que não deveria estar lá. Chegaremos a isso daqui a pouco. Temos o nosso corpo de fechamento e temos o nosso HTML de fechamento. Esse é o fim desta lição sobre como criar sua primeira página HTML. 15. Aula bônus 2: cérebros, corpos e elementos estruturais: Neste vídeo, vamos falar sobre a construção do corpo do documento HTML. O cabeçalho, novamente diferente do cabeçalho e os cabeçalhos, cabeçalho é um elemento estrutural que pode conter seus cabeçalhos. Pode ser um cabeçalho para uma página ou uma seção ou artigo, e vamos falar sobre esses dois em um segundo. Parece algo parecido com isto. Temos a nossa tag de cabeçalho de abertura e temos a nossa abertura h1. Então temos o nosso fechamento h1 e cabeçalho de fechamento. Este é o cabeçalho mais básico. Você também pode incluir outras tags, outros elementos, conforme necessário. Mas esta seria a versão mais básica de um cabeçalho. Nav, main, e aparte são mais três elementos estruturais. O navegador está indo, claro, para encerrar sua navegação. Ele pode ser usado por conta própria ou pode aparecer em um cabeçalho ou em lado, depende se você quer que a navegação seja em cima como seria se ele está no cabeçalho ou ao longo do lado como seria se fosse um lado. Também pode ser por conta própria. Você poderia ter um cabeçalho e, em seguida, ter um nav debaixo dele e de lado de um lado e um nav do outro. Mas eles tendem a trabalhar muito com cabeçalho e lado. Este é o conteúdo principal da página, e é praticamente isso. O lado é para conteúdo relacionado, mas tangencial, maioria das vezes barra lateral, mas pode ser usado para comentários ou conteúdo semelhante. Sim, tipicamente uma barra lateral e é por isso que às vezes o nav entra nela. Rodapé, vem no final da página ou no final de uma seção ou artigo. Ele geralmente contém informações de direitos autorais e links para outras páginas relacionadas ou artigos ou seções. Artigo, é o conteúdo que pode ficar por conta própria. Ele normalmente envolverá postagens de blog ou artigos de notícias, coisas que podem ser retiradas e ainda seriam capazes fazer sentido e ser capaz de ficar por conta própria. Seção, por outro lado, é apenas uma parte de uma página. Não fica por conta própria. É uma parte de um item maior. Vamos dar uma olhada em algum código. Aqui eu tenho tudo preparado para nós. Temos a cabeça e o corpo da última seção. Aqui novamente, temos o cabeçalho e o h1, abaixo que temos um nav. Dentro do navegador, temos uma lista desordenada de três links. Neste caso, estou vinculando a três lugares dentro da própria página. Em seguida, temos o nosso elemento principal. Novamente, o nav está de pé por conta própria, neste caso, separado do cabeçalho e separado do lado, que está aqui em baixo. No nosso principal, temos três artigos. Dentro do artigo, temos duas seções de cada artigo. Temos um h2 que é o título do artigo, e h3 para o título da seção e, em seguida, algum conteúdo lá. Da mesma forma, no próximo artigo, temos um h2 para o título desse artigo, temos uma seção com um h3 para o título lá e novamente para o artigo final. Aqui está a nossa etiqueta principal de encerramento, depois temos o nosso lado. Além disso, temos apenas um pouco mais de conteúdo. Eu usei um h3 lá para torná-lo mais consistente com esta seção. Finalmente, temos nosso rodapé, que tem nossas informações de direitos autorais. Fechando rodapé, fechando corpo, fechando HTML. Encerramento deste vídeo. 16. Aula bônus 3: resposta ao ataque dos zumbis: Neste vídeo, falaremos sobre design responsivo, o que é e porquê. Vamos discutir a meta tag Viewport um pouco mais, e vamos falar sobre consultas de mídia. Em primeiro lugar, design responsivo. Permite que o site se adapte ou responda ao contexto em que é colocado. Seja em um dispositivo móvel, como um telefone ou um tablet, ou em uma tela gigante para o computador desktop. O site é capaz de se adaptar a todos esses dispositivos. As consultas de mídia permitem que você altere o CSS usado com base em uma grande variedade de condições, muitas vezes tamanho da tela ou largura da tela, seja, móvel versus desktop, ou às vezes relacionados a mídia, como impressão versus tela, etc., mas existem muitos tipos de consulta de mídia. Por que precisamos de design responsivo ou o que está acontecendo? muito tempo, telefones e pequenos dispositivos fizeram péssimos com sites. Eles mostrariam basicamente apenas uma parte do site de tamanho de desktop, e eles eram muito difíceis de navegar, muito difíceis de encontrar informações sobre, muito difícil até mesmo olhar para qualquer coisa. Uma inovação que a Apple trouxe quando criaram o iPhone, foi que o Safari iria encolher automaticamente um site para baixo, caber dentro da tela. Embora isso tornasse muitas vezes difícil de ler em tamanhos pequenos, você poderia então muito mais facilmente beliscar e ampliar para encontrar a parte do site em que você está interessado. Isso tornou os sites muito mais utilizáveis porque você podia ver a coisa toda de uma vez e, em seguida, poderia ampliar a parte que você queria ou rolar para baixo para encontrar a peça em que você está interessado. Mas quando o design responsivo surgiu, precisávamos ter uma bandeira ou alguma maneira para o navegador saber se eles deveriam diminuir o zoom ou se deveriam deixá-lo como está. Em vem a meta tag Viewport. A Apple também veio com isso. Tag dá um heads-up para o navegador para não diminuir o zoom como discutimos antes. Ele tem um valor de nome de Viewport e o conteúdo é largura igual a largura do dispositivo, escala inicial de um. Consultas de mídia. O que eles fazem? Eles testam para uma característica, se essa característica for verdadeira, ele executa o CSS dentro dos colchetes. Por exemplo, nós temos, esta é a nossa consulta de mídia, então na mídia, se estamos em uma tela versus na impressão, e a largura máxima dessa tela é 900 pixels, o que significa o tamanho atual da tela ou tamanho do navegador está abaixo de 900 pixels, então nós executaríamos o CSS que estivesse aqui. Isto, claro, é o CSS comentários, por isso não vai ser executado, mas você pode então mudar o layout, fazer todos os tipos de coisas diferentes quando esta media query é verdade. Há muitos tipos diferentes de consultas de mídia. Acabamos de ver um que era largura máxima, o padrão era o caso da área de trabalho e, em seguida, como você ficou menor, ele fez alterações. O resto disso é começar mobile-primeiro, significa que você começa com a menor versão da tela e, em seguida, adicionar ou alterar elementos e CSS à medida que o site fica maior ou como o tamanho da tela fica maior. Um dos benefícios de mobile-first é que há muito menos artesanato, você não precisa removê-lo do site desktop. Você pode editar à medida que avança. Não ter todas essas coisas extras é realmente útil quando você tem uma conexão lenta ou com celular talvez lento, talvez intermitente. Há muitas maneiras diferentes que podem ser problemáticas. Portanto, ter um design móvel em primeiro lugar é uma boa ideia. Você também pode fazer consultas de mídia para impressão ou seja, esta página é destinada a ser impressa, então faça essas coisas diferentes. Por exemplo, você pode remover as imagens de fundo, cores de fundo, remover a navegação porque você não pode clicar na navegação no papel, ou pelo menos ainda não. Mas sim, há muitas coisas que as consultas de mídia podem fazer. Os pontos de interrupção são sempre que a consulta de mídia se aplica. Por exemplo, no último exemplo, tínhamos uma largura mínima de 900 pixels, o ponto de interrupção seria em que 900 pixels. Quantos pontos de interrupção você deve ter? Quantas vezes você deve fazer atualizações no site com base no tamanho do dispositivo em que você está olhando para ele. Isso realmente se resume a quantos você precisa. Você quer ter certeza de que o conteúdo é claro e está olhando para o seu melhor. No entanto, muitas consultas de mídia necessárias para fazer isso são quantas você precisa, mas não mais do que isso. Mais pontos de interrupção significa manutenção mais complicada e pode ser mais difícil adicionar novas coisas e novos recursos. Use quantos precisar e não mais um que isso. Quando você deve definir um ponto de interrupção? É melhor fazê-lo quando o design pede. Se você fizer isso com base no tamanho de telas comuns , você sempre estará perseguindo tamanhos de tela e nunca terá sucesso. Há um novo tamanho de tela sendo criado praticamente todos os dias. À medida que novos dispositivos são criados de novas formas de olhar para eles, não há sentido em perseguir isso. Se você baseou seus pontos de interrupção no design que está implementando, é muito mais provável que você tenha pontos de interrupção suaves e apropriados. Vamos dar uma olhada em algum código. Aqui está minha consulta de mídia. Quando eu estiver acima de 600 pixels, é quando estes serão aplicados, então quando eu estiver acima de 600 pixels, o principal flutuará para a esquerda e terá uma largura de 70%, e o lado flutuará para a direita em uma largura de 28%. Vejamos esse lado, suba um pouco mais alto, aí está. Agora eu flutuei e 70 por cento, flutuei direito e 28 por cento.