Codifique seu primeiro site: HTML + noções de CSS

1. Introdução da aula: Ei, meu nome é Rich Armstrong de tapkaboom.com. Eu tenho projetado e construindo sites desde 2007, e nesta classe, eu vou mostrar a você como descodificar seu primeiro site do zero usando HTML e CSS. Para mim, ser capaz de escrever meu próprio HTML e CSS é mais do que apenas codificação. É uma maneira moderna de criar e me expressar de forma digital. Um site é uma coisa real que centenas de pessoas visitam, usam e interagem, e ser capaz de codificar tudo sozinho dá uma vantagem incrível. Você não precisa confiar em outras pessoas, em modelos compactados ou em aplicativos complexos para dar vida às suas ideias. Codificação também é super divertido e gratificante. Durante a aula, eu vou levá-lo passo a passo através da criação site simples de uma página para seus heróis de desenhos animados favoritos ou personagem de filme. Eu explico tudo de uma maneira acessível e deixo de fora as coisas que você não precisa saber. No final da aula, você terá feito seu primeiro site que você pode compartilhar com o mundo. Você saberá os conceitos básicos de HTML e CSS. Seus amigos ficarão com ciúmes, sua mãe ficará super orgulhosa, e você terá uma base sólida para construir. Então, se você é um novato absoluto ou já envolveu em algum web design e desenvolvimento antes, venha assistir a esta aula. Tudo o que você precisa é de um computador e uma conexão com a internet. Vejo você no próximo vídeo. 2. O que baixar: Para facilitar a codificação, você precisará baixar e instalar algumas coisas, um editor de código e um navegador de desenvolvimento e uma maneira de fazer backup do código e publicar um site. A primeira coisa que você precisa é de um editor de código. Eles fazem sugestões, completam seu código e tornam partes de seu código cores diferentes. Basicamente, eles ajudam você a codificar mais rápido e com menos erros. Há toneladas de editores de código para escolher. Nesta aula, eu vou usar Sublime Text. Você pode usá-lo gratuitamente e uma licença comercial custa apenas US $80. Outro editor de código incrível é o código Visual Studio da Microsoft. É livre e de código aberto. Em última análise, você deve escolher um editor de código que se sinta certo para você, para o que você precisa dele. A segunda coisa que você vai precisar é de um bom navegador de desenvolvimento. Cada navegador tem um monte de ferramentas que ajudarão você a desenvolver sites. Mas o Google Chrome é o melhor. Com isso, podemos detectar erros, entender por que certas coisas estão acontecendo e até mesmo fazer um pouco de design no navegador. Você sabe, apoiar seu trabalho é uma boa idéia, certo? Bem, a maioria dos codificadores usa um sistema chamado Git para fazer backup de seus projetos. Com o Git você armazena as alterações feitas em seu projeto em seu computador. Isso é ótimo, mas se algo acontecer com seu computador, você perde todo o seu código. Aqui é onde Github, entra. Ele permite que os codificadores sincronizem seu código e as alterações que eles fazem com uma versão online. Github também permite que você publique sites simples e eles criaram um aplicativo chamado GitHub Desktop, que torna o uso do Git super fácil. Vá baixar e instalar essas três coisas agora. Nos recursos da classe você pode visualizar um PDF contendo editores de código alternativos e navegadores de desenvolvimento. Depois de baixar e instalar essas três coisas, você pode pular para a próxima lição e aprender sobre HTML. O resto desta lição, mostrarei como baixar e instalar o Sublime Text, Google Chrome e o GitHub Desktop. Abra seu navegador padrão, algo como Safari ou Internet Explorer, e digite “sublimetext.com”, Lá vamos nós, e então você deseja baixar o para o seu sistema operacional. Para mim, é download para Mac, se você não vê um para o seu sistema operacional, clique no botão de download ali, e então você pode ver OS X, Windows, Linux, o que for. Vamos para OS X, enquanto isso está baixando nossa pesquisa pelo Google Chrome. Google Chrome, lá vamos nós, google.com/chrome. Você verá algo assim. Esta página muda de tempos em tempos. Em seguida, você clica neste download Chrome para Mac. Lá vamos nós. A próxima coisa que precisamos baixar é GitHub Desktop, github desktop e aqui está, desktok.github.com. Em seguida, faça o download para Mac OS se estiver no Mac ou faça o download para Windows se estiver no Windows. Já baixará o GitHub Desktop. Uma vez terminado o download, podemos abrir nossa pasta Downloads. Vou arrastar e soltar ou aplicativo GitHub Desktop em aplicativos. Vou clicar duas vezes em “Google Chrome”. Vou clicar duas vezes em “Sublime Text”, ambos serão abertos. Vou arrastar o Google Chrome para a pasta de aplicativos. Temos um texto sublime e arrastá-lo para a pasta Aplicativos também. Você pode fechar essas duas janelas quando elas terminarem e você pode simplesmente ejetar essas duas DMGs assim. Em seguida, você vai para a pasta de aplicativos e vamos para “g-o” para o Google Chrome e clique duas vezes nisso. Este é um pop-up de segurança que aparece no Mac, perfeitamente bem. Você pode clicar em “Abrir” e lá vamos nós. Você tem o Google Chrome instalado. Fantástico. Vamos voltar ao finder e vamos abrir o GitHub Desktop e novamente podemos pressionar “Abrir”. Esta é a nossa página inicial que veremos. Então, finalmente, queremos abrir o Sublime Text. Vamos para Finder pressione “S-U” em nosso teclado e clique duas vezes nisso. Mais uma vez, abra isso e Sublime Text abrirá atrás de uma janela do Finder. Você tem o que precisa para se desenvolver como um ninja. Vamos ver o que é HTML. Vejo você no próximo vídeo. 3. O que é HTML?: O que é HTML? Bem, dizer que HTML significa Hypertext Markup linguagem, pode não ser tão útil, mas o que eu acho útil, é explicar que HTML é uma linguagem de codificação simples usada para exibir informações. É escrito por humanos e entendido por navegadores. HTML estrutura o conteúdo da página web em um monte de caixas, na maioria das páginas da web, há caixas dentro de caixas. A caixa que contém todas as outras caixas é a nossa janela do navegador, isto é o que eu gosto de chamar de teoria da caixa HTML. Dentro de cada caixa, pode haver mais caixas, texto, uma combinação de caixas e texto, ou nada. Com base no nome da caixa, o navegador irá exibi-lo e seu conteúdo de forma diferente de outros tipos de caixas, existem caixas para listas, parágrafos, títulos, rodapés, imagens, links e muito mais. Por padrão, a maioria das caixas são tão altas quanto seu conteúdo, e tão largas quanto a caixa lá dentro, outras caixas são tão altas e tão largas quanto seu conteúdo. A maioria das caixas que tão longe para a esquerda e tão longe para o topo quanto eles podem, então como podemos codificar uma caixa HTML? Bem, a maioria das caixas HTML tem uma tag de abertura e uma tag de fechamento. Uma tag de abertura é composta por um símbolo menor que, o nome da tag e um símbolo maior que. Uma tag de fechamento é composta por um símbolo menor que, uma barra, o nome da tag e um símbolo maior que. Entre essas duas tags, você pode colocar outra caixa HTML, alguns textos, uma combinação de caixas e texto, ou deixá-la em branco. A caixa HTML inteira, em seguida, é composta da tag de abertura, o conteúdo e a tag de fechamento, e tudo isso é chamado de elemento HTML. Por padrão, um navegador exibirá elementos HTML, da parte superior do documento em direção à parte inferior, assim como estão no arquivo HTML. Isso é tudo, você pode estar perguntando? Não exatamente, há mais uma coisa, atributos HTML. Atributos são pedaços secretos que dão ao navegador mais informações sobre um elemento HTML, como como exibi-lo e qual funcionalidade adicionar. Nós escrevemos atributos na tag de abertura de um elemento HTML, usamos atributos para elementos de estilo para dizer ao navegador para onde ir quando você clica em um link, qual arquivo um elemento de imagem deve exibir, e muito mais. Um atributo é composto por um nome, um símbolo de igual e um valor, que é envolvido em aspas simples ou duplas. Você os usará o tempo todo ao escrever HTML. Ok, você entende HTML em teoria agora, no próximo vídeo, você vai começar a escrevê-lo. 4. Como escrever em HTML: O que é uma página web? Simplificando, é um documento que contém uma mistura de linguagens de codificação HTML, CSS e JavaScript. Um navegador interpreta essas linguagens e exibe algo visual e interativo para os seres humanos. Um site, então, é uma coleção de páginas da web que são muitas vezes relacionadas umas com as outras. Vamos criar nossa primeira página web e escrever algum HTML. Veremos o que nosso editor de código pode fazer, do que o Chrome é capaz e como funciona o Git e o GitHub. Vamos começar indo para o GitHub desktop e criando nosso primeiro repositório. Um repositório é onde guardamos todos os nossos arquivos para um projeto de codificação. É basicamente uma pasta que o GitHub gerencia e assiste. Para criar um, vá para Arquivo e clique em “Novo repositório”. Vamos chamar um repositório ou repo, herói de desenho animado. A descrição pode ser, “meu herói favorito dos desenhos animados”. Mais tarde, vamos começar a adicionar nossos arquivos HTML e CSS para o nosso herói de desenho animado ou personagem de filme. Agora, o caminho local é onde você deseja armazenar este repositório em seu computador. Vou instalar o meu na minha área de trabalho, mas você pode escolher onde quiser. Você pode optar por inicializar o repositório com um README ou não. Você não precisa e você não precisa se preocupar com gitignore ou opções de licença. Vamos criar este repositório. Você verá que agora temos uma pasta de heróis de desenho animado em nossa área de trabalho. Esta é a nossa pasta do repositório. Depois de criar seu repositório, você pode começar a escrever alguns HTML. A maneira mais fácil de fazer isso é ir para o repositório e selecionar, Mostrar no Finder e, em seguida, arrastar esta pasta de heróis de desenho animado para texto sublime. A primeira coisa que eu vou fazer é fazer esta janela um pouco maior, então eu vou segurar “Alt Option” e clicar no “Green Button”, então eu vou começar a escrever meus elementos HTML. O primeiro que vou escrever é o meu título um elemento. Vamos escrever a etiqueta de abertura. Vou escrever algum conteúdo, “Ei. Eu sou um grande título”, e então vamos escrever a etiqueta final. Você deve ter notado que sublime não fez nada extravagante. A razão para isso é que ele ainda vê o que estamos escrevendo como texto simples. Você pode ver aqui no canto inferior direito que diz, “texto simples”. A maneira mais fácil de fazê-lo reconhecer que estamos escrevendo HTML é salvar o arquivo como um arquivo HTML. Vá para Arquivo e selecione “Salvar como”. Vou salvar isso como test.html, que o torna um arquivo HTML. Vou pressionar “Salvar”, e então você verá que há alguma cor no documento. Quando escrevermos nosso próximo elemento, que vai ser um elemento de parágrafo, você verá que à medida que eu digitar p, um monte de opções aparecem. Estas são as sugestões que sublimado nos dá. Você pode pressionar “Down”, você pode pressionar “Up” e, em seguida, quando você pressionar “Return”, ele escreve o resto da tag de abertura e a tag de fechamento e coloca o cursor exatamente onde ele precisa estar. Aqui eu posso dizer, “Ei. Sou um elemento de parágrafo. Legal, huh” Tudo bem. O próximo elemento é elementos de ligação, ou o que chamamos de elementos âncora, então vamos escrever isso. Eu aperto “Return” e texto sublime vai fazer um monte de coisas para nós. Uma das coisas que ele faz é que nos dá um atributos href. Isso é realmente importante quando se trata de elementos de ancoragem. Isso significa que podemos especificar onde um usuário deve ser levado quando eles clicam no link. Podemos ir para o Google https://google.com e, em seguida, o conteúdo pode ser, “clique em Eu, Eu sou um link”. Tudo bem. Temos agora três elementos. Vamos salvar o arquivo ou você pode pressionar “Command S” ou “Control S”, e vamos ao nosso localizador e arraste a página HTML de teste para o Google Chrome para visualizá-lo. Agora, esta é a nossa página web, o que é muito fixe. Você verá que o h1, esse parágrafo e o elemento âncora parecem muito diferentes. Isto é o que o navegador faz quando começamos a escrever HTML. É fantástico. Agora, o melhor do Chrome são suas ferramentas de desenvolvedor. Agora, uma das coisas que podemos usar é o elemento e o espectro. Vá para Exibir, Desenvolvedor e selecione Ferramentas do desenvolvedor. No lado direito, e às vezes na parte inferior, você verá seu inspetor de elementos. Ao passar o mouse sobre um elemento, você verá que ele foi destacado no lado esquerdo. Ele mostrará a largura, a altura, e lhe dará algumas informações sobre suas margens. O que é ótimo sobre isso é que você pode clicar duas vezes em um nome de tag e, em seguida, você pode especificar um novo. Assim, aperte “Return”. No lado esquerdo, sua página da Web será atualizada. Você também pode clicar duas vezes no conteúdo e editar isso, o que é fantástico. Você também pode clicar em um elemento e pressionar “Backspace”, e ele se foi, ele é excluído. Agora você pode fazer isso em qualquer página da web que você gosta. Você pode inspecionar os elementos, você pode editá-los, você pode excluí-los, mas não se preocupe, ele só faz alterações na versão do navegador dessa página. Quando você atualizar, tudo voltará a ser como era. Este teste deste link realmente funciona. - Sim. Lá vamos nós. Leva-nos ao Google. Mas para voltar à página, tenho que pressionar o botão Voltar. Como abrimos em uma nova guia? Vamos voltar ao texto sublime, e podemos adicionar um novo atributo aqui chamado target. Se especificarmos um valor de _blank, ele abrirá em uma nova guia. Vamos salvar isso e voltar para o Chrome, atualizar e, em seguida, clicar nesse link, e ta ta ta, ele se abre em uma nova guia. Agora você pode fechar isso e então estamos de volta ao nosso site. Outro grande atributo que podemos adicionar a um elemento âncora é o atributo title. Quando você escreve o título e dá um valor, algo como, “Vamos ao Google.” Ele dá ao usuário algumas informações quando ele passa o mouse sobre ele. Vamos para o Chrome, vamos atualizar e passar o mouse sobre esse link. Você verá aquele pequeno pop-up que diz, “Vamos ao Google.” Isso ajuda com a experiência do usuário. Agora, nós fizemos um pouco de codificação HTML. Vamos voltar ao GitHub e ver o que aconteceu aqui. Percebemos que criamos um novo arquivo. O que vamos fazer aqui é dizer criar test.html. Então vamos enviar isso para o mestre, e o que acabamos de fazer é pedir ao GitHub para lembrar o que mudamos. Você pode ver todas as alterações na guia Histórico. Agora, vamos selecionar a guia Alterações novamente e fazer um pouco mais de codificação HTML. Vamos voltar ao texto sublime. Quero que esta palavra de parágrafo seja ousada. A maneira como fazemos isso é envolvê-lo com elementos em negrito, e um nome de tag de elementos em negrito é apenas b. Se salvarmos isso e voltarmos para o Chrome e atualizar, você verá que a palavra de parágrafo agora está em negrito. Se você clicar com o botão direito do mouse em qualquer página de qualquer maneira, você será capaz de inspecioná-lo, que então irá detalhar até esse elemento no inspetor de elementos, e ele irá realçá-lo. Se, em seguida, clicar duas vezes na tag grande e mudarmos isso para I, que significa itálico ou itálico e pressionar “Return”, você verá que o parágrafo está agora em itálico. A razão pela qual estou mostrando isso é que você não precisa saber um monte de CSS para fazer com que as coisas sejam ousadas, para que as coisas sejam cabeçalhos, para que as coisas pareçam um pouco diferentes em uma página HTML. A próxima coisa é um elemento de imagem. Vamos voltar para Sublime Text e adicionar um elemento de imagem. Para escrever um elemento de imagem, nós digitamos img, eu vou pressionar “Return”, e Sublime Text vai me dar um atributo fonte para preencher. Também não vai me dar uma etiqueta final, e esta é uma exceção à regra. Um elemento de imagem não tem uma tag de fechamento porque você não pode colocar nada dentro dele. Agora, o que é esperado para dar a imagem é um arquivo para exibir no atributo fonte. De onde tiramos esse arquivo? Bem, vamos ao Chrome e vamos baixar uma imagem. Vamos abrir uma nova aba, vamos procurar por gato, porque a internet é tudo sobre gatos. Vamos para a guia Imagens e vamos clicar nesta imagem aqui. Agora, se clicarmos com o botão direito do mouse e dissermos “Abrir imagem em nova guia”, o que temos aqui são duas opções diferentes para exibir essa imagem. A primeira opção é que podemos clicar com o botão direito do mouse e dizemos “Salvar imagem como”, então criamos uma nova pasta chamada img. Então, dentro desta pasta img, salvamos isso como cat.jpeg, salve. Muito obrigado. Vamos fechar isso e dentro do texto Sublime, no atributo fonte, vamos digitar img/cat. JPEG. Vamos salvar isso, voltar ao Chrome, voltar à nossa página HTML de teste, atualizaremos aqui. Há a nossa imagem de gato, vem do nosso sistema de arquivos local, e isso é chamado de URL relativa. A outra maneira de fazer isso é com uma URL absoluta. Se voltarmos a essa guia, você verá que há esse URL muito longo. Este é um URL absoluto. Se escrevermos isso de novo, ele nos levará a essa imagem, e essa imagem será armazenada em algum lugar na internet. Nós copiamos este URL e vamos para Sublime Text e, em seguida, colá-lo em nossos atributos de origem. Salve isso, volte para o Chrome, volte para nossa página de teste e atualize, nada terá mudado. Mas você verá que o atributo fonte agora tem essa imagem que está localizada em algum lugar na internet. Essas são as duas maneiras de fornecer um arquivo para um elemento de imagem, aplicará a mesma teoria a alguns outros elementos mais tarde na classe. Agora, o que eu quero tentar fazer aqui é mudar este test.HTML em algo diferente. Como é que fazemos isso? Bem, nós realmente precisamos escrever um elemento de título e colocá-lo nos elementos de cabeça de nossa página. Você pode ver no lado direito do elemento em espectros que há um elemento 'html', elemento 'head', e o elemento 'body', mas não escrevemos nenhum desses. Para verificar isso, posso mostrar o que o navegador está vendo. Vamos para View Developer e View Source, e isso é o que ele tem. Não está vendo um HTML, um corpo, ou um elemento de cabeça. O que está acontecendo aqui? Vamos fechar isto e voltar a este inspetor de elementos. Esses elementos HTML, cabeça e corpo são comprados pelo Chrome porque os deixamos de fora. É muito inteligente e muito legal. Mas é melhor prática colocar esses elementos em nossa página HTML. Vamos fazer isso. Dentro do Sublime Text, a primeira coisa que eu vou fazer é realmente escrever o doctype, e isso diz ao navegador exatamente qual versão do html estamos escrevendo. Vamos para menor que, um ponto de exclamação, digite DOCTYPE em maiúsculas e, em seguida, especifique o que o doctype é e é HTML. Então vamos fechá-lo. O que estamos dizendo aqui é que estamos escrevendo um HTML 5, que é o mais recente e melhor HTML. Acontece que também é muito curto, o que é ótimo para nós. A próxima coisa que eu vou fazer é escrever o meu elemento HTML. Agora, se eu pressionar “Return” aqui, ele faz muito trabalho para mim. Vou pressionar os comandos aqui e escrever tudo isso um pouco mais manualmente. Agora, eu vou escrever a tag de fechamento para HTML, que sublime nos ajudou com um pouco, então eu vou escrever meus elementos de cabeça. O elemento principal é onde armazenamos todos os elementos invisíveis em nossa página e um deles é os elementos de título. Podemos mudar isso para página de teste, e esta é a única coisa que eu vou colocar no meu elemento cabeça. O próximo é os elementos do corpo. Agora, o elemento do corpo é onde armazenamos todo o conteúdo visível acima. Vou cortar esta tag de fechamento e vou colá-la pouco antes da tag HTML de fechamento. Então eu vou selecionar todo o conteúdo e pressionar tabulação e densa, ea razão que eu faço isso é porque é mais fácil de ler e é mais fácil de entender. Você pode entender quais caixas vão dentro de quais caixas. Vamos salvar isso e vamos para o Google Chrome e atualizar novamente, e você verá que nada mudou aqui, mas agora temos um título em nossa guia da página de teste. Fantástico. Em seguida, selecionamos View Developer e View Source novamente, você verá que agora ele tem um monte de mais elementos para trabalhar, o que é fantástico. Vamos fechar isto e deixa-me mostrar-te outro elemento. Este elemento é um elemento de quebra de linha. Deixe-me demonstrar isso em Texto Sublime. Logo acima da imagem, vou criar outra tag de parágrafo, e dentro desta tag de parágrafo eu vou dizer, “Meu nome é”, mas eu quero colocar isso em uma nova linha. Você pode esperar que você pode pressionar return e digitar o nome do gato. Gatinho, bastante original. Vou pressionar “Salvar” e, em seguida, voltar para o Chrome, Atualizar. Temos a etiqueta de parágrafo, mas não há quebra de linha. Por que isso não funcionou e como vamos fazê-lo funcionar? A razão pela qual ele não funcionou é porque todos os espaços em branco, quaisquer retornos, espaços, eles são todos vistos como um espaço em HTML. Para obtê-lo em uma nova linha, precisamos inserir um elemento de quebra de linha. Vamos para Sublime Text e onde há uma quebra de linha aqui, nós apenas digitar em um br elementos. Novamente, esta é uma exceção à regra, não há nenhuma tag de fechamento porque você não pode colocar nada dentro dela. Vamos salvar isso, vamos voltar para o Chrome e Atualizar e lá vamos nós. Está em uma nova linha. Fizemos um monte de mudanças. Agora podemos voltar ao GitHub Desktop, e você verá que o arquivo test.html tem esse ponto amarelo nele, e este cat.jpeg tem essa vantagem verde nele. No test.html, você pode ver que ele está tirando algumas linhas e, em seguida, adicionando um monte mais linhas. Quando você confirmar um arquivo e obter, ele lembrará o que você está removendo e lembrará o que você está adicionando. O resumo ainda não foi preenchido neste momento. O que vamos fazer é dizer “Adicionado imagem de gato e mais alguns elementos.” Você pode adicionar uma descrição se você quiser, mas eu só faço isso se houver muitas mudanças e eu realmente preciso ser explícito sobre o que eu acabei de fazer. Então vamos nos comprometer com o mestre. Você pode ver o histórico de alterações novamente acessando a guia Histórico. O original foi nossos commits iniciais, então criamos o arquivo test.html e, em seguida, adicionamos uma imagem de gato e mais alguns elementos. Agora, o que também é ótimo sobre isso é que, no Texto Sublime, se você começar a fazer mudanças como “Eu sou um grande título, olhe para mim”, e então você salva isso, você verá que há esses pequenos pontos que aparecem. O que isso significa é que o arquivo foi modificado e sublime pega isso porque ele está trabalhando com o Git para notificá-lo sobre essas mudanças. Você acabou de escrever seu primeiro pedaço de HTML. Eu sugiro que você sobe o ar ou solte, próximo é publicá-lo on-line para todo o mundo ver. 5. Coloque seu site online: Fizemos alguns comandos e isso é fantástico. Mas, se algo acontecer ao nosso computador, como um raio, derramamos cerveja de gengibre nele, então nosso computador será destruído, todo nosso código será perdido. O que precisamos fazer é sincronizar nosso código e commits com GitHub.com para que o nosso código seja feito online. Enquanto estamos nisso, publicaremos nosso site para que o mundo veja. - Sim. Vamos para o Chrome e configurar uma conta do GitHub. Eu abro uma nova guia, vou para GitHub.com e aí você pode se inscrever. Eu vou para TTKB como meu nome de usuário, e meu e-mail pode ser richplus1@taptapkaboom.com, minha senha vai ser um segredo. Em seguida, clique em Inscrever-se no GitHub. A primeira coisa que você precisa fazer é verificar sua conta. Vamos fazer isso e você precisa fazer isso direito. Lá vamos nós. Este processo pode mudar de tempos em tempos. Se não é exatamente assim quando você se inscrever, não se estresse. Eu sou um up para uma conta gratuita, eu ainda uso uma conta gratuita para mim. Role para baixo. Não preciso de ajuda para configurar uma organização e não quero atualizações do GitHub. Vou pressionar Continuar, e vou rolar de volta para o topo. Qual é o seu nível de experiência em programação? Novo na programação? que você planeja usar o GitHub? Aprendendo a codificar? - Sim. Publicar um projeto? - Sim. Criando um site com o GitHub Pages? - Sim. Então posso pular meus interesses e depois me submeter. Este passo é realmente importante. Você precisa verificar seu endereço de e-mail. Na sua caixa de entrada, você verá algo assim. Basta tocar no botão de verificação do endereço de e-mail. Lá vamos nós. Vai dizer que o seu e-mail foi verificado. Então você deve receber um e-mail de boas-vindas ao GitHub. Bem-vindo ao GitHub, TTKB. Então ele tem um monte de coisas que você pode clicar. Fantástico. Se você chegou até aqui, você configurou sua conta do GitHub 100% corretamente. Depois de se inscrever no GitHub.com e verificar seu endereço de e-mail, volte para o GitHub Desktop, clique em GitHub Desktop e vá para Preferências. Em seguida, você deseja entrar no GitHub.com. Digite seu nome de usuário ou endereço de e-mail e digite sua senha. Em seguida, clique em Entrar. Depois de fazer login, você pode clicar em Publicar repositório. Passar por este processo irá sincronizar o seu código e as suas alterações com o GitHub.com. O nome parece certo, a descrição parece certa. Mas, não queremos manter esse código privado porque mais tarde queremos publicar nossos sites como uma página do GitHub para todo o mundo ver, e não podemos fazer isso se for privado. Depois de verificar duas vezes essas informações, clique em Publicar repositório. Lá vamos nós. Você deve estar sincronizado com o GitHub.com. Agora, para verificar novamente, vá para o Chrome, vá para GitHub.com. Verifique se você atualizou a página. Você deve ver seu relatório no lado esquerdo. Vamos clicar nisso e você será apresentada com sua página de relatório do GitHub. Tem muita coisa acontecendo aqui. Mas o que eu quero que você faça é ir até a guia Configurações e role para baixo até chegar ao GitHub Pages. Em seguida, selecione sua origem e selecione a ramificação mestre. Isso atualizará a página. Em seguida, role para baixo até Pages do GitHub novamente. Você verá que ele diz que seu site está pronto para ser publicado neste URL. Em seguida, clique nesse URL e você deve encontrar uma página 404. Isto é normal e está perfeitamente bem. A próxima coisa é digitar, test.html após sua URL. Então pressione Return e lá vamos nós. Você deveria ver sua página de teste com o Sr. Gatinho. Agora você pode compartilhar esse URL com o mundo inteiro. O que é realmente legal é que quando você voltar para texto sublime e atualizar algum HTML, como hey, “Eu sou um cabeçalho gordo grande” e você salva isso, então você volta para o GitHub desktop, você verá as mudanças que cobrimos mas, em seguida, você adiciona seu resumo. Você se compromete a dominar, e então você empurra para a origem novamente. Quando você envia para a origem, isso atualizará automaticamente a página online para que todos vejam. É muito, muito legal e poderoso. Você acabou de publicar seu primeiro site para o mundo ver e ele está sincronizado de forma segura com o GitHub.com. Toda vez que você atualizar seu código e enviar origem no GitHub, seu site será atualizado. Você está a caminho de tomar conta da internet. O próximo é aprender tudo sobre CSS. 6. O que é CSS?: Escrevemos um pouco de HTML, mas não parece bonito. É aqui que o CSS entra. Basicamente, o CSS que escrevemos faz com que o nosso HTML pareça bom, substituindo estilos padrão chatos fornecidos pelo navegador. Nós escrevemos CSS para dizer ao navegador como elementos HTML deve olhar. Para fazer isso, escrevemos um nome de propriedade e valor separados por dois pontos e terminando com ponto e vírgula. Podemos estilizar um elemento com tantos pares de propriedades como nós gostamos. Há toneladas de propriedades que você pode escrever para mudar a aparência e a sensação de um elemento. Propriedades como largura, altura, cor de fundo, família de fontes, tamanho de fonte e muito mais. Agora, existem dois métodos de escrita CSS. A primeira é usando estilos em linha, onde nós estilizar um elemento usando seus atributos de estilo. A segunda é usando conjuntos de regras, onde selecionamos elementos para Estilo, seguido pelas propriedades CSS e valores para esses elementos. Vamos cobrir esses dois métodos na próxima lição. 7. Como escrever em CSS: Nesta lição, abordaremos a escrita de CSS com estilos em linha e conjuntos de regras. É melhor explicar entrando em código. Então, em texto sublime, vamos criar um novo arquivo e, em seguida, vamos salvar este arquivo como um novo arquivo HTML. Vou chamá-lo de style-test.html e, em seguida, eu vou salvar isso. Como Sublime sabe que é um arquivo HTML, eu vou começar a escrever minha tag HTML e, em seguida, pressione return quando ele sugere para mim. Escreveu um monte de HTML para mim, o que é fantástico. Vou dar a este documento um título de teste de estilo e, em seguida, vou entrar no meu corpo e começar a escrever alguns elementos HTML. Eu vou começar com um par de h um elementos, e eu vou chamá-los de cabeçalho um - um e então eu vou copiar isso e colá-lo duas vezes, dirigindo um - dois, um - três e então o que eu vou fazer é criar um h dois e fazer o mesmo coisa aqui. Rubrica dois - um, direção dois - dois, direção dois - três. Vou salvar isso e vou entrar no meu localizador e arrastar o teste de estilo para o Google Chrome. Isto é o que parece por padrão, três Cabeçalhos um e três Cabeçalhos dois. Agora vou começar a estilizá-los. Então, dentro do texto Sublime no meu primeiro h um elementos, eu vou adicionar um atributo de estilo, e dentro daqui, eu posso começar a adicionar meu nome de propriedade e pares de valor. Então a primeira coisa que eu vou fazer é ir para um tamanho de fonte, então tamanho da fonte, pressione retorno. Vamos para algo como 30 pixels, e então eu quero adicionar uma cor, então eu vou para cor e é escrito do jeito americano. Tudo em HTML e CSS é escrito da maneira americana, só para você saber, dois pontos, o que é um valor de cor? Bem, há algumas maneiras de fazer cores em CSS, vou mostrar a vocês dois nesta lição. Então vamos ao Google Chrome. Vamos abrir uma nova guia e digitar htmlcolorcodes.com. Neste site existem algumas maneiras de obter cores. Vamos rolar um pouco para baixo e aqui temos um seletor de cores muito bom. Parece muito com um seletor de cores que você encontrará no Photoshop ou aplicativo de design. Então, se você estiver confortável usando o Photoshop ou algo assim, use-o lá, se quiser. Agora, esta é a maneira mais fácil de selecionar uma cor. Quando estiver satisfeito com a cor que você tem, você pode clicar duas vezes e copiar esse valor. Você pode voltar ao Sublime Text e colá-lo. Lembre-se de colocar um ponto-e-vírgula depois, e você verá que este é um valor de código hexadecimal e ele tem este símbolo de hash antes deste número. Então, quando salvarmos isso e voltarmos para o Google Chrome, podemos atualizar e você verá que nosso título um - um agora tem uma cor e um tamanho de fonte. Outra maneira de fazer cores em CSS é usar nomes de cores. Agora, se você voltar para o site de códigos de cores HTML e rolar um pouco para baixo até chegar a esses nomes de cores, role um pouco mais adiante e clique em navegar na lista completa. Em seguida, role para baixo novamente e o que você verá aqui é que há alguns nomes que foram atribuídos valores de cores diferentes, e às vezes estes são muito mais fáceis de lembrar do que valores de código hexadecimal. Então, se eu me lembro de salmão e eu estou em Sublime Texto, e em vez dessa cor, eu apenas digitei salmão e eu salvo, em seguida, voltar para o Google Chrome e, em seguida, atualizar aqui, você verá que a cor aparece, que é muito prático. Então eu vou usar esses nomes de cores neste vídeo apenas para mantê-lo realmente simples. Agora, de volta ao Sublime Text, o que eu quero fazer é que eu quero estilizar todos esses títulos da mesma maneira. Então o que eu vou fazer é selecionar os atributos de estilo eu vou copiá-lo, e então eu vou colá-lo novamente e novamente e novamente e novamente e novamente e novamente e novamente. Então vou salvar. Vou voltar para o Chrome e atualizar aqui, e lá vamos nós, todos os nossos títulos agora parecem exatamente iguais. Isso é muito legal porque isso significa que nosso título um, que são feitos para ser realmente grande, agora também pode ser o mesmo tamanho que o nosso cabeçalho dois. Agora eu quero estilizar minha posição dois é um pouco diferente. Então eu vou para Sublime Text e, em seguida, meus h dois, vamos mudar o tamanho da fonte para cerca de 20 pixels e a cor, eu vou para o rosa quente. Então o que eu vou fazer é selecionar esses valores aqui e eu vou copiá-los e colá-los sobre os outros h dois elementos. Em seguida, vou salvar isso, voltar para o Chrome e atualizar. Agora eu posso ver que o título dois elementos são ligeiramente diferentes. Agora, se você ainda não pegou, no Sublime Text, copiar e colar esses valores várias vezes pode parecer um pouco repetitivo. Além disso, há um monte de CSS aqui, comparado com a quantidade de HTML e quanto conteúdo está realmente aqui e você começa a obter todas essas diferentes quebras de linha acontecendo homem, é um pouco confuso. Então, o que eu gostaria de fazer aqui é mudar de estilo in-line para estilo de conjunto de regras. Uma das maneiras que podemos fazer isso é criar um elemento de estilo dentro do elemento de cabeça. Vamos criar um elemento de estilo e você verá que Sublime nos dá um atributo do tipo CSS texto. Nós não precisamos necessariamente disso, mas novamente, é muito bom ser específico. Agora, dentro deste elemento de estilo, podemos começar a fazer algum estilo CSS. Então o que eu vou fazer primeiro é estilo meu h um elementos e como eu faço isso é selecionando todos os elementos h um e, em seguida, declarando que todos os elementos h um devem ter um tamanho de fonte de 30 pixels. Então eu faço outra declaração que todos os homens devem ter uma cor de salmão. Agora este é o equivalente a este atributo e seu valor em todos os três do h um elementos. Então eu vou remover esses atributos assim. Agora, o que isso é chamado é um conjunto de regras. Esta é a sua instrução seletor que visa um monte de elementos para estilo. Em seguida, dentro dessas chaves é o seu bloco de declaração, e cada linha é chamada de uma declaração com uma propriedade de declaração e um valor. Vamos salvar isso e, em seguida, vamos para o Google Chrome e atualizar, e nada aconteceu. Mas veja isso, se clicarmos com o botão direito do mouse e inspecionarmos esses elementos, você verá agora que há esse painel inspetor de elementos, e então há um monte de propriedades CSS na parte inferior aqui. Você verá que este h tem um tamanho de fonte de 30 pixels e uma cor de salmão. Então, se quiséssemos alterar o tamanho da fonte, clicaríamos no valor do tamanho da fonte e mudaríamos para algo como 50 pixels, mudaria todos eles. Agora, se você clicou neste h dois elementos e você quer mudar seu tamanho de fonte, você pode mudar isso para 50 pixels, mas apenas um deles mudaria. Assim, você pode ver as diferenças entre o estilo em linha e o estilo do conjunto de regras aqui. Agora, quando atualizamos nossa página, tudo volta ao normal. Então, se voltarmos para Sublime Text e queremos mudar nossa cor para talvez algo como azul-petróleo. Você pode ver o quão rápido isso foi comparado com copiar e colar entre os diferentes elementos. Então, vou salvar isso e voltar para o Chrome e atualizar. Agora vamos começar a styling é h dois com conjuntos de regras também. Então o que eu vou fazer é criar outro conjunto de regras. Vou selecionar todos os h dois elementos e, em seguida, eu vou fazer uma declaração que todos os h dois elementos devem ter uma cor de vermelho. Então eu vou salvar. Então vamos voltar ao Chrome e atualizar, e o que aconteceu aqui? Essa é uma pergunta muito boa. Então, se inspecionarmos este elemento h dois, você verá que o estilo h dois está passando, mas está riscado e, em vez disso, essa cor de rosa quente está tomando precedência. Por que isso acontece? Bem, a idéia chave aqui é que o estilo mais específico terá precedência. Então o que está acontecendo aqui é que nós estamos dizendo todos os h dois, nós queremos que você tenha uma cor de vermelho. Mas o que está acontecendo nos elementos reais, é que estamos dizendo aos elementos que ele tem uma cor de rosa quente, que significa que é mais específico porque só este elemento vai ter uma cor de rosa quente. Então isso significa que se desmarcarmos a cor do rosa quente, ele terá uma cor de vermelho, o que é bastante interessante. Se voltarmos para Sublime Text e rolar para baixo e remover todas as declarações de cores dos estilos in-line, então o que você acha que vai acontecer? Vamos voltar ao Chrome, vamos atualizar e lá vamos nós. Todos os nossos cabeçalhos dois agora são vermelhos, mas eles ainda têm um tamanho de fonte de 20 pixels. Então, quando você faz estilo in-line e estilo de conjunto de regras, eles combinam, eles não escrevem sobre o outro a menos que haja um conflito. Quando houver um conflito, lembre-se de que o estilo mais específico terá precedência. Agora vamos voltar para Sublime Text e tirar esse tamanho de fonte de 20 pixels e colocá-lo no h dois conjunto de regras, e então podemos remover todos esses atributos de estilo. Agora, eu posso ver claramente o que está acontecendo. É muito, muito melhor. Agora, quando eu mencionei conflitos, eu estava falando sobre estilos de versos embutidos estilo conjunto de regras. Mas o que acontece se houver um conflito dentro do estilo do conjunto de regras? Se eu escrever outro H_2 aqui e definir uma cor verde, o que vai acontecer? Vamos guardar isto e descobrir. Vou atualizar aqui, você verá que o tamanho da fonte ainda é o mesmo, mas agora está verde. O que aconteceu é que se há dois estilos que têm a mesma especificidade, então o que foi escrito por último tem precedência. Você pode ver aqui que diz teste de estilo linha HTML 16. Este foi o teste de estilo linha HTML 11. O que foi escrito por último tem precedência. Mas agora, e se quisermos que alguns desses elementos sejam diferentes? Uma maneira de fazer um ou mais elementos diferença é dando a um elemento atributos de classe e, em seguida, estilizar elementos com essa classe de forma diferente. Vamos entrar no Sublime Text e fazer isso. Se formos para este H1 no meio e dar-lhe uma classe de grande, e então copiamos e colamos este estilo para este H_2 e o último H_2, salvamos isso, voltamos para o Chrome, atualizamos. Não aconteceu nada. Então, a classe dos grandes não faz nada. O que precisamos fazer é escrever alguns estilos para esta classe. Vamos voltar para Sublime Text e logo abaixo deste H_2, vamos escrever nosso seletor para todos os elementos com uma classe de grande. A maneira como fazemos isso é colocando um ponto final e, em seguida, colocando o nome da classe. O que isso significa é que estamos dizendo todos os elementos com uma classe de grande, eu declaro que você deve, e o que vamos fazer? Bem, vamos definir o tamanho da fonte para algo como 60 pixels. Em seguida, vamos salvar isso, voltar para o Chrome e atualizar. Você verá aqui que apenas os elementos com uma classe de grande tinham esse tamanho de fonte enorme. Não importa se é um elemento H_1 ou H_2. Agora, se voltarmos ao texto sublime e colocarmos uma classe no primeiro de maiúsculas, e então eu copio isso, e eu coloco neste H_2 aqui, e então se eu copiar maiúsculas e adicioná-lo ao primeiro H_2, o que significa que terá duas cláusulas, uma de grande e uma de maiúsculas e, em seguida, salvar. Então eu escrevo um seletor para maiúsculas e, em seguida, um bloco de declaração e dar-lhe text-transform de maiúsculas, e salvar isso, voltar para o Google Chrome, e atualizar, você verá que todos os elementos com uma classe de maiúsculas são agora maiúsculas. Se selecionarmos este elemento H_2 com a classe de grande e maiúscula, podemos ver que porque ele tem uma classe de maiúsculas, ele tem um text-transform de maiúsculas. Então, porque tem uma classe de grande, tem um tamanho de fonte de 60 pixels. Este H_1, porque tem uma classe de maiúsculas, tem uma transformação de texto de maiúsculas. Este H_1, porque tem uma classe de grande, tem um tamanho de fonte de 60 pixels. Isto é muito poderoso. Agora, o que é ainda mais poderoso é em Sublime Text, ou seu editor de código, você pode dizer todos os elementos com uma classe de grande e maiúscula, Eu declaro que você deve ter uma cor de marinha. Vamos ver o que isso faz. Salvamos, voltamos ao Chrome e atualizamos, e você verá que apenas um elemento mudará de cor porque é o único elemento que tem uma classe de maiúsculas e grandes. A idéia de seletores é realmente poderosa e pode ficar muito complexa. Agora, deixe-me dar-lhe outro exemplo de um seletor muito legal. Dentro do meu primeiro H_1, eu tenho este título de palavra. Como eu faria essa direção de uma cor diferente? O que vamos usar é um elemento span. Uma extensão é como uma caixa em branco por padrão. Ele não tem estilos padrão e herda os estilos de texto do elemento que ele está dentro do. Vamos escrever span, e depois de bater um, vamos então colocar esse span. Vou salvar aqui, voltar para o Google Chrome e atualizar, e nada terá mudado. Agora, vamos voltar para Sublime Text e vamos escrever outro span apenas fora daqui e colocar no elemento span. Vou salvar isso, voltar para o Chrome e atualizar. Será texto padrão. Não vai ter nada de especial nele. Você verá que este espaço, parece o cabeçalho que está dentro, e você verá que este espaço, não se parece com nada. Confira isso. Se formos estilizar todos os elementos de extensão, e dizer todos os elementos de span, eu quero que você tenha uma cor de violeta. Vamos salvar e voltar ao Chrome e atualizar. Você vai ver que este elemento span e este span elementos agora são ambos violeta, o que faz sentido. De volta ao texto Sublime, se fôssemos dizer, todos os elementos span dentro de um H_1 ser cor violeta, podemos escrevê-lo assim: espaço H_1. Então nós salvaríamos. Voltaríamos ao Chrome e atualizávamos, e só a extensão dentro do H_1 seria violeta, que é muito, muito legal. O que vimos aqui é super poderoso. De volta ao Sublime Text, eu achei um bastante frustrante ter que rolar entre meus estilos e meu HTML. Se eu quisesse criar várias páginas, eu teria que copiar os elementos de estilo com todos os estilos nele e colá-lo em cada página que eu quero ter a mesma aparência. Então, se eu fizesse uma mudança, eu teria que copiar e colar em todas as outras páginas novamente. Como é que resolvemos isto? Bem, veja isso. Vou criar um novo arquivo, e vou salvá-lo como um arquivo CSS. Vou criar uma nova pasta chamada CSS. Dentro da pasta CSS, eu vou salvar este arquivo como ponto de teste CSS. Então eu vou salvar isso, e você verá que o Sublime reconhece isso como um arquivo CSS. Então eu vou pegar todos esses estilos dentro dos elementos de estilo, eu vou cortá-los, eu vou colocá-los em CSS teste, eu vou colá-los. Em seguida, selecionarei a maioria deles e, em seguida, pressione Shift e Tab para um recuo e, em seguida, salvo este arquivo. Então eu vou voltar para o teste de estilo de HTML. Vou salvar esse arquivo, voltar ao Chrome e atualizar. Você verá que todos os estilos desapareceram agora. Isso é muito legal porque, uau, eu posso realmente ver todo o meu HTML e não tenho que continuar rolando para cima e para baixo. Mas como vamos agora chegar ao arquivo estilo a ser aplicado a este arquivo HTML? Como fazemos isso é, em vez de ter os elementos de estilo, agora teremos um elemento de link. Vamos começar a digitar link assim, e assim, Sublime Text irá preencher o resto para nós. Estes atributos de linha significa relação. Estamos dizendo, vamos vincular a este arquivo, e a relação é folhas de estilo, e o tipo vai ser texto CSS. Este href se parece muito com uma âncora tags href. Podemos usar um URL absoluto, tudo um URL relativo. O URL absoluto pode estar localizado em qualquer lugar da Internet, mas temos um arquivo CSS que acabamos de criar. Eu vou dizer CSS barra, e nós chamamos isso test.CSS. Vamos verificar isso. Lá vamos nós. Test.CSS. Fantástico. Eu vou salvar isso, e depois voltar para o meu navegador, atualizar. Todo o nosso CSS está de volta agora. Isso é ótimo porque em nosso editor de código, eu posso apenas ler meu HTML. Eu não tenho que continuar rolando para cima e para baixo, alterando CSS e alterando HTML, e isso significa que posso criar várias páginas que fazem uso do mesmo arquivo CSS. Agora, vamos fazer mais uma coisa antes de terminarmos esta lição. No meu arquivo test.CSS, vou dar ao corpo uma cor de fundo. Vamos para o elemento do corpo, e eu quero a cor de fundo. De que cor eu quero que seja? Bem, vamos tentar um cinza claro. Algo assim. Refresque. Lá vamos nós. Não é muito bonito, mas agora você aprendeu outra propriedade CSS. Se você tocar no corpo e tocar nesse valor, talvez possamos encontrar algo que seja um pouco mais colorido. Vou digitar amarelo, amarelo-verde, verde-amarelo. E quanto ao amarelo dourado claro ou amarelo claro? Amarelo dourado claro soa incrível. Esse pode ser um dos nomes de cores mais fantásticos que encontrei. Finalmente, precisamos voltar para GitHub desktop e precisamos confirmar nossos arquivos. O que nós fizemos? Criamos um teste CSS, página HTML e um arquivo CSS. Que tal isso para um resumo? Comprometem-se a dominar, e então o que faremos é empurrar a origem. Isso irá sincronizá-lo com o GitHub.com. Então podemos voltar ao nosso navegador, abrir uma nova guia, ir para ttkb.github.io/cartoon-hero, e em vez de testar HTML, vamos para style-test.html. Se não for encontrado imediatamente, pode levar um pouco de tempo para que ele apareça. Vamos atualizar aqui, atualizar novamente, atualizar novamente. Lá vamos nós, finalmente vivemos. Agora, você sabe o básico do CSS. No próximo vídeo, falaremos sobre planejamento. Sei que parece chato, mas vai te ajudar a se tornar um ninja codificador. 8. Como planejar seu site: Eu sei que você não quer ouvir isso, mas planejar é essencial quando se trata de criar um site, mesmo um simples. Sem um plano, poderíamos estar programando desnecessariamente por dias e não queremos fazer isso. Para começar, escolha um personagem para fazer um site simples. Vou fazer um site para o Ralph Demolidor. Planejar é uma obrigação. Eu normalmente faço alguns esboços rápidos para ver como eu quero que meu site seja parecido. Em seguida, eu crio o que eu gosto de chamar de uma caixa wireframe. É onde eu desenho os elementos HTML como caixas, dou nomes a eles e indico quais caixas contêm outras caixas. Eu não tento planejar tudo de uma só vez e muitas vezes desenhar uma seta de uma caixa e preencher os detalhes mais tarde, em uma parte separada da página ou mesmo em uma nova página. Para mim, planejar é como olhar para um labirinto de cima e esboçar uma rota. É um guia. Codificar é como correr por aquele labirinto enquanto segue o guia. Então acho complicado planejar e programar ao mesmo tempo. Para esta classe, eu fiz uma caixa wireframe para o meu site de personagens. Ele inclui um elemento de cabeçalho contendo o nome do meu personagem e imagem de perfil, e elementos principais contendo títulos, parágrafos, listas e uma imagem e, por último, um elemento de rodapé contendo uma pequena quantidade de texto. Agora é hora de criar sua própria caixa wireframe. Você não precisa saber nada sobre design ou estilo para criar um. Tudo o que você precisa saber é que HTML é um monte de caixas dentro de caixas. Incluí minha caixa de arame nos recursos da classe para você conferir. Você pode usá-lo como uma referência, se quiser. Depois de concluir sua caixa wireframe [inaudível] parte um, você pode começar a criar seus sites de personagens. Se quiser, publique seu planejamento na galeria do projeto. 9. O HTML do seu site: Vamos ficar nerd e escrever o HTML para a página web do nosso personagem. Você pode consultar os elementos HTML comuns PDF nos recursos de classe ao escrever seu HTML. Vou passar por cima de cada elemento HTML como eu escrevê-lo. Agora, a única coisa que mudou na minha pasta “Cartoon-hero” desde que eu estava no ano passado, é que eu agora tenho um “box-wireframe.pdf”. Eu vou abrir isso e referir-me a ele como eu código meu HTML. Você pode ver que eu tenho um elemento de cabeçalho, eu tenho um elemento principal, e um elemento de rodapé todo o caminho na parte inferior. O que eu vou fazer é codificar meu HTML de cima para baixo e consultar este documento enquanto eu for. Vamos entrar no Sublime Text. Vou criar um novo arquivo, então vou salvar esse arquivo como index.html. A razão pela qual estou fazendo isso é porque o navegador procura esse arquivo primeiro, e ele o carrega automaticamente. Se você for para tapkaboom.com, você não precisa digitar “index.html” ou “bar.html”. Ele carrega automaticamente o arquivo index.html primeiro. Vamos salvá-lo. Então eu posso escrever meus elementos HTML. Vou pressionar Enter. Darei à minha página um título de “Demolidor de Ralph “, e depois vou até ao corpo. A primeira coisa que vou fazer é escrever meus elementos de cabeçalho. Agora, um elemento de cabeçalho diz: “Ei, é sobre isso que a página é, é para onde os cabeçalhos vão, é para onde as imagens grandes vão.” Não é realmente o conteúdo do site, mas normalmente é grande e ousado. Vamos escrever nossos elementos de cabeçalho. Dentro do nosso elemento de cabeça vamos escrever, um elemento de imagem que vai ser o nosso avatar. Depois escrevemos os nossos elementos h1 e colocamos o Wreck-It Ralph lá dentro. Agora, para o nosso avatar, vou precisar de uma imagem. Vamos ao Google Chrome. Nesta aba eu posso procurar por Wreck-It Ralph. Lá vamos nós. Vamos às imagens. Vou procurar algo que seja como um avatar, preferência quadrado para não ter que cortá-la. Vamos rolar um pouco para baixo. Este parece muito bom, 440 por 450. Isso parece ótimo. Clique com o botão direito nele. Vamos abrir a imagem em uma nova guia. Em seguida, vou clicar com o botão direito do mouse novamente e “Salvar imagem como”. Dentro da minha pasta de imagens, vou guardá-la como avatar ralph-, e depois guardá-la. Ralph-avatar.jpeg. Vou fechar isto e fechar isto, e também posso fechar isto. Então, dentro do atributo fonte, eu posso escrever img/ralph-avatar.jpeg, e esse é o nosso elemento de cabeçalho por enquanto. O que eu acho que um grande práticas especialmente quando você está aprendendo a codificar, é usar comentários HTML. Não te ensinei isto até agora, por isso ouve-me. Logo acima do meu cabeçalho, o que eu vou fazer é escrever um comentário para mim mesmo apenas para deixar bem claro o que este próximo elemento é. Para escrever um comentário, você vai para um símbolo inferior, um ponto de exclamação, dois traços, e eu vou ver tudo abaixo deste ficar cinza, e isso significa que está comprometido. O navegador não consegue entender isso, ele não o lê. Aqui dentro, eu vou dizer, “elementos de cabeçalho”. Em seguida, para fechar os comentários, eu vou fazer um traço de traço, e então um símbolo maior que. Lá vamos nós. É uma maneira fácil de deixar anotações. Eu vou economizar agora, e é uma boa idéia salvar regularmente o seu trabalho. Vamos nos referir ao documento de planejamento dentro da visualização. Vamos então escrever o nosso elemento principal com um h2, um parágrafo e uma imagem para começar. De volta ao Sublime, vamos criar um novo comentário. Agora, em vez de digitar isso, há um atalho. Eu posso pressionar “Command” ou “Control” e barra de frente. Lá vamos nós. Eu não tenho que lembrar como escrever um comentário HTML. Vou digitar “elemento principal”. Então, depois, que podemos escrever nossos principais elementos. Agora, o nosso elemento principal é onde as partes principais da sua página web vão. É bastante auto-explicativo. Então temos um h2 e depois do nosso h2, temos um parágrafo, e depois do parágrafo temos uma imagem. Dentro do H2, o que era? Sobre o Ralph e um pouco sobre ele e uma imagem. Vamos dizer “Sobre o Ralph”. Agora vamos escrever um pouco sobre ele. “ Ralph é incrível. Ele é um cara mau de jogos de vídeo de 8 bits que viaja o comprimento do fliperama para provar que ele é um cara bom.” Então, por baixo disto, temos uma imagem. Vou salvar e depois procurar outra imagem. Vamos voltar ao Chrome e procurar o Ralph Demolidor. Vá para “Imagens” e, em seguida, em “Ferramentas”, selecionarei uma imagem grande. Lá vamos nós. Agora quero um com ele e seus amigos. Desça um pouco para baixo. Lá vamos nós. Isso parece muito bom. O que acontece se houver algo um pouco melhor? Esse também parece muito bom. Vou clicar neste. Botão direito. Vamos abrir em uma nova guia. Clique com o botão direito novamente, “Salvar imagem como”. Em seguida, dentro da nossa pasta de imagens, eu vou dizer “ralph-bhig.jpeg”. Guarde isso. Podemos fechar isto, fechar isto. Então, dentro de Sublime, podemos digitar “img/ralph-big.jpeg”. Aqui, você pode ver que eu soletrei errado. Vou colocar um “h” aí. Nós realmente temos um “h” aqui, ralph-avatar, ralph-big. Isso parece bom. Agora colocamos alguns elementos em nosso elemento principal. O que vem a seguir? Vamos para “Preview”, role um pouco para baixo. Temos um parágrafo, um H2, e depois uma lista ordenada. Vamos escrever esta etiqueta de parágrafo, e aqui está uma legenda. Direi: “Ralph e seus amigos.” Vou soletrar amigos corretamente. Então criaremos uma lista ordenada. Agora, o que é uma lista ordenada, é basicamente uma lista com números no lado esquerdo. É muito legal porque seu navegador criará esses números para você. Vamos para um ol para a lista ordenada. Dentro desta lista ordenada, haverá um par de itens da lista. Vamos para um item da lista. Então, dentro deste item da lista, podemos dizer : “Ele tem mãos grandes.” Podemos criar outro li e podemos dizer: “Ele é tratado como durão.” Em seguida, o terceiro podemos dizer, “Ele está tentando ser o mocinho.” Lá vamos nós. Acho que havia outro elemento aqui, talvez um H2. Vamos voltar para as características de visualização. Vamos colocar esse h2 e digitar “Características do Ralph”. É pressão cheia quando você está digitando na câmera. Todo mundo está olhando para sua ortografia. Vou guardar isso. Vamos voltar para “Preview” e ver o que vem a seguir. Fizemos o ol com os itens da lista. Depois há um H2 para amigos, um parágrafo e uma lista desorganizada. Vamos voltar para Sublime. Aqui eu posso escrever outro “H2", “Amigos do Ralph”. Então vamos para um elemento de parágrafo. Agora podemos escrever um pouco sobre isso, “Ralph tem uns amigos incríveis. Acho que o melhor amigo dele é o Vacilão. Ela é incrível.” Então, se voltarmos para “Preview”, você verá que coloquei “& links”. Quero que esses itens da lista sejam links. Dentro do Sublime Text, talvez eu possa dizer, “Clique nos links abaixo para ler mais sobre eles.” Algo assim. Eu vou salvar isso e então vamos criar uma lista não ordenada, ul. Isto é diferente de uma lista ordenada. Em vez de números, eles estarão [inaudíveis] do lado esquerdo. Seu primeiro amigo é Pac-Man. Agora quero transformar Pac-Man em um elo. Talvez eu possa cortar isso, escrever meus elementos de âncora e, dentro dessas duas etiquetas, eu possa colar “Pac-Man”. Então quero ir a algum lugar. Onde Pac-Man vai me levar? Vamos para o Chrome. Vamos procurar o Pac-Man, algo assim. Desça um pouco para baixo. Aqui vamos nós. Talvez você possa ir ao artigo da Wikipédia. Eu vou copiar este URL, ir para Sublime novamente e colar isso. Então eu vou copiar este item da lista, colá-lo duas vezes mais. Seu segundo amigo será Mario, ou talvez Mario Brothers. Ou talvez possa ser Mario e o próximo pode ser Luigi. Luigi, lá vamos nós. Então, no Chrome, vou procurar Mario. Vamos descer um pouco, Mario Nintendo, Super Mario. Talvez possamos ir para este. Lá vamos nós. Vou copiar esse URL, voltar ao Sublime e colá-lo ali. Então, vamos procurar por Luigi, rolar para baixo uma e outra vez, vamos para a Wikipédia. Então eu vou copiar esse URL, eu vou voltar para Sublime e colá-lo lá dentro. Então seu último amigo obviamente deveria ser Vanellope von Schweetz. Então vamos digitar, Vanellope von Schweetz. Lá vamos nós. Quando procuramos Vanellope von Schweetz, lá vamos nós. Vamos para este primeiro link. Aceite os cookies. Lá vamos nós. Não parece haver muita informação aqui. Oh, lá vamos nós. Há um vídeo. Vamos pausar isso. Vamos copiar este URL, vamos voltar ao Sublime e colá-lo aqui. Talvez possamos dizer também conhecido como Vacilão”. Eu vou salvar isso e talvez o que nós podemos fazer aqui é, colocar um pouco de comentários logo acima desses h2. Então eu vou pressionar a barra de comando para comentários e eu vou colocar em um amigo e aqui, eu vou pressionar Tab e então barra de comando novamente e eu vou copiar e Cole essa palavra. É muito longo e difícil de soletrar. Sobre o Ralph, está tudo bem. Acho que não preciso colocar um comentário lá. Então temos feito o nosso elemento principal, agora, vamos fazer o nosso elemento rodapé. Então eu vou criar um novo comentário, elemento rodapé, e, em seguida, escrever o nosso elemento rodapé. Agora, elemento rodapé é algo que deve existir em quase todos os sites, quase todas as páginas da web, e deve ter apenas alguns links ou um pouco de informação sobre o site. Talvez haja um novo conjunto de assinaturas, links, um símbolo de direitos autorais, essas coisas. Então, dentro deste rodapé elementos, vou escrever meus elementos de parágrafo. Aqui, podemos dizer que este site foi criado durante uma classe TaptaPkaBoom. Depois disso, podemos escrever nosso símbolo de direitos autorais mesmo que não tenhamos direitos autorais sobre o conteúdo, mas ainda é divertido de fazer. Então, a maneira como fazemos isso é usando uma entidade HTML. A entidade HTML para um símbolo de copyright, é assim. Digite um símbolo e comercial e, em seguida, ir, copiar e, em seguida, colocar um ponto-e-vírgula depois disso. Você deve ver que fica roxo ou cor diferente. Então você pode colocar seu nome depois disso. Em seguida, classe TaptaPkaBoom, Eu quero que este para ir para o meu site. Então eu vou colocar uma tag de elemento âncora de abertura e depois disso, eu vou fechá-la. Podemos colocar um href e aqui e dizer-lhe para ir para https://taptapkaboom.com e então eu vou salvar isso. Agora, nós realmente fizemos tudo isso sem dar uma olhada no que parece. Isso é bom, tem sido tão simples processo HTML, mas agora podemos ir e dar uma olhada se tudo está funcionando. Então, vamos abrir o Finder e arrastar index.html para o Chrome. Podemos fechar essa primeira guia e depois dar uma olhada na aparência do nosso site. Temos nossa imagem de avatar, temos nosso h1, temos um h2, Ralph é incrível, temos isso em um parágrafo, então temos uma imagem muito grande, uau, isso é enorme. Então vamos rolar um pouco mais, Ralph e seus amigos, essa é a legenda. Outro h2, e lá vamos nós. Temos uma lista ordenada. Você pode ver que tem os números do lado e temos os amigos do Ralph para o parágrafo. Em seguida, temos um monte de itens de lista em uma lista não ordenada. Você pode ver que tem esses discos no lado em vez de números. Então finalmente temos a etiqueta de rodapé. Isto parece fantástico. O que é realmente importante aqui é que, se você não tem estilo em sua página, as coisas fazem sentido. É assim que um motor de busca verá a sua página. Então, se faz sentido para você sem qualquer estilo, é deve fazer sentido para um motor de busca. Agora só quero verificar se tudo está onde deveria estar. Então eu vou clicar em Exibir, ir para Desenvolvedor e abrir minhas ferramentas de desenvolvedor. Vamos rolar até aqui dentro do nosso corpo, temos nossa cabeça, isso parece bom. Dentro de nossos elementos principais, temos todas essas coisas principais. Depois o nosso rodapé, lá vamos nós. Fantástico. Você pode ver que os comentários também estão aqui, mas o Chrome não presta atenção neles. Vamos ver se esses links funcionam. Se eu clicar em Pac-Man, vai para Pac-Man e o que eu quero que isso faça é abrir em uma nova aba. Então vamos voltar para Sublime Texto e vamos colocar em target_blank. Vou copiar isto e colá-lo em todos os outros elementos de âncora. Há um aqui em baixo também. Tudo bem, eu guardo isso. Vamos voltar ao Chrome e atualizar. Você vê agora quando eu clico Pac-Man, lá vamos nós, abre Pac-Man. Se eu clicar em Mario, abre Mario. Luigi, lá vamos nós. Finalmente, Vanellope von Schweetz, lá vamos nós. Fantástico. Vamos fechar isso. Então nossos links funcionam, as coisas estão indo bem. A última coisa que eu quero fazer é, eu quero um pequeno ícone de tabulação. Eu sei como isso é chamado por talvez você não saiba. O que vou mostrar a vocês agora é como procurar algo no Google. Acho que pode ser chamado de ícone de tabulação. Então eu vou procurar por isso. Abra uma nova guia e vá ícone da guia do navegador, HTML, talvez. Agora você pode começar a procurar os resultados. Stack Overflow é muito bom, vamos verificar isso. Como adicionar um ícone de guia do navegador, favicon, que é uma boa palavra para saber para sites. Vamos rolar um pouco para baixo. Muitas vezes o que acontece é, alguém vai fazer uma pergunta sobre Stack Overflow e um monte de pessoas vai dar respostas. Então você procura um carrapato verde, e esta é muitas vezes a resposta certa. Basta adicionar o seguinte código para o elemento de cabeça. Lá vamos nós. Vamos copiar isto. favicons PNG são suportados pela maioria dos navegadores, exceto pelos navegadores que são IE menores ou iguais a 10. Para compatibilidade com versões anteriores, você pode usar favicons ICO. Não faço ideia do que é isso. Bem, eu sei, mas você provavelmente não. Então vamos copiar isso. Vamos para Sublime e rolar para o topo e vamos colocá-lo em nosso elemento cabeça. Não, nós não copiamos. Então vamos voltar para o Chrome, copiar isso, e depois ir para Sublime e colá-lo. Isso se parece muito com um link com uma linha de folhas de estilo, mas obviamente diferente porque tem uma linha de ícone e tem um href. Então vamos mudar o href e precisaremos fornecer uma imagem muito provavelmente. O que eu quero fazer é usar a mesma imagem que usamos para o nosso avatar. Então eu vou copiar isso e colá-lo aqui, então eu vou salvar. Vamos voltar ao Chrome e atualizar aqui e lá vamos nós. Temos agora uma dessas coisas que se chama favicon. Agora, se você não tem uma imagem quadrada para seu personagem ou seu herói de filme, procure algo como redimensionador de imagem. Lá vamos nós. ResizeImage.net, que vai funcionar muito bem. Redimensionador de imagem simples, PicreSize. Todos esses sites provavelmente farão um ótimo trabalho. Experimente-os, recorte sua imagem e baixe essa imagem e coloque-a em seu HTML. Vamos fechar isso e podemos fechar esta guia também. Então, isso está parecendo muito bom. Agora está pronto para ser estilizado, que vamos cobrir no próximo vídeo. Mas primeiro, vamos entrar no nosso código. Vamos para GitHub Desktop. Sim, adicionamos uma caixa wireframe, adicionamos duas imagens e um arquivo index.html. Então vamos escrever um resumo de escreveu o nosso ou talvez possamos dizer, adicionou arquivo index.html do nosso personagem e algumas imagens. Talvez para a descrição podemos dizer escreveu o HTML e adicionou um favicon. Então vamos nos comprometer com o mestre. Depois de ter feito isso, podemos então empurrar a origem e quando isso for feito, bem, então vamos para o nosso navegador, abrir uma nova aba, abrir uma nova aba, digite o seu nome de usuário do GitHub, o meu é tt e kb.github/cartoon hero e, em seguida, em vez de teste, poderíamos usar index.html ou poderíamos simplesmente deixá-lo em branco. Então, vamos tentar deixar em branco, pressionando Return. Lá vamos nós. Agora parece muito melhor na escrita index.html ou barra HTML ou teste HTML após a barra final. Mas se você quiser, você pode fazer isso também. Mesma coisa. Neste ponto, você pode estar muito orgulhoso de si mesmo. Você acabou de escrever o HTML para sua página web de caracteres. Eu acho que você deveria se dar um alto cinco. Sim. 10. O CSS do seu site: Agora vem a parte divertida do nosso site de personagens, o CSS.O que é incrível sobre CSS é que com ele, você pode fazer o mesmo grupo de HTML olhando muito diferente. Tente fazer seu site de heróis corresponder a sua personality.I'm indo para trabalhar de cima para baixo da página e alterar o nosso HTML um pouco enquanto escrevemos o CSS. Explicarei tudo à medida que for. Mas se você quiser tentar algo diferente, vá em frente, simplesmente google ou dê uma olhada nas propriedades CSS comuns pdf nos recursos da classe. Esta é a aparência da nossa página web sem qualquer CSS. Agora, vamos ter um pouco de diversão. Eu vou me referir ao meu quadro de caixa de arame pdf novamente durante esta lição. A primeira coisa que vou fazer é abordar este cabeçalho. Eu quero que ele seja realmente largo e eu vou dar-lhe uma cor laranja. Para o avatar, quero fazer disso um círculo com uma borda e quero que a imagem e o H1 estejam no meio. Vamos chegar a ele. Dentro do Sublime Text vou criar um novo arquivo, e este vai ser o meu arquivo CSS. Eu vou salvar isso como, herói dot CSS, dentro do meu CSS folder.Lá vamos nós. Em seguida, dentro do meu arquivo de índice , eu vou escrever, elemento in-link , pressione retorno, eo atributo de função vai ser Stylesheet.O tipo é texto CSS eo HRF vai ser CSS barra herói ponto CSS.Eu vou salvar Isso. Então dentro do meu herói CSS, eu só quero ter certeza de que tudo isso está funcionando. Vou escrever alguns estilos para o elemento do corpo e a cor de fundo, eu só vou dizer vermelho por agora apenas para verificar se ele está funcionando. Voltarei ao Chrome e atualizarei. Está funcionando. Vamos voltar ao Sublime Text. Vamos tirar isso. A primeira coisa que vou fazer é definir a minha margem para zero. Quando eu salvar isso e voltar para o Chrome, você verá isso na esquerda e no topo, e espero que na direita e na parte inferior, não há mais margem no corpo. Agora, vamos fazer um pouco de estilo de cabeçalho. Abaixo daqui, vamos para o nosso elemento de cabeçalho. O que eu quero fazer primeiro é adicionar uma cor de fundo. Minha cor que eu memorizei é D14635. Esta é uma cor laranja. Vamos salvar isso. Vamos voltar para o Chrome e refrescar. Lá vamos nós. É o Demolidor Ralph laranja. Bem, eu acho que é um Ralph Orange.Então o que eu quero fazer é, eu quero fazer o título, bem, H1 dentro do cabeçalho branco. Então eu vou dizer H1 dentro do cabeçalho, cor Eu quero que você seja branco. Lá vamos nós. Então o que eu quero fazer é, eu quero centralizar a linha H1 e a imagem. Uma maneira de fazer isso é definir a propriedade text align como centro. Isso então alinhará a imagem e o H1 no meio. Vou salvar isso, voltar para o Chrome e atualizar.Lá vamos nós. Isso está muito bom. Agora, eu quero que minha imagem seja um círculo. Vamos para Sublime Text e dizer “hey, imagem dentro do header.I quero que você seja um círculo”. A maneira como fazemos isso é, é dizendo “border-raio”. Você vai vê-lo aqui em baixo, raio de fronteira, e podemos dizer algo como 150 pixels. Isso fará um canto arredondado muito agradável. Se eu salvar isso, vamos voltar para o Chrome e atualizar. Sim, isso parece muito bom. Mas agora eu vou inspecionar esses elementos e eu quero torná-lo um círculo. Temos um raio limite de 150. Mas se eu definir a largura para 300 pixels, lá vamos nós, as coisas ficam circulares. Vou copiar este estilo e voltar para Sublime Text e colar sobre isso. Lá vamos nós. Agora, quando eu voltar para o Chrome e eu atualizar, é circular.Fantástico.Então eu quero adicionar uma borda. Vamos para uma fronteira. Esta propriedade de fronteira é, na verdade, um atalho. O valor vai ter três coisas diferentes para ele. Vamos ver o quão grande ele vai ser. Eu vou para dez pixels e, em seguida, vai definir o estilo de borda, que vai ser sólido. Então eu vou definir a cor que vai ser, #483A94, que é esta cor roxa muito legal. Talvez eu possa mudar os 10 pixels para algo como 20 pixels.Lá vamos nós, isso parece muito bom. Mas você vai começar a ver agora que não é mais circular. Isso é por causa do modelo da caixa. Esta palavra extravagante. Mas o que você pode ver no lado direito aqui é que eu tenho 300 por 300 pixels, então eu tenho um preenchimento de nada, e então eu tenho uma borda de 20 pixels à esquerda e 20 pixels à direita, o que o torna 340 pixels de largura e 340 pixels de altura. Isso significa que preciso aumentar meu raio de fronteira de 150 para 170. Como isso parece? Muito bom. Vamos copiar isso novamente.There vamos. Vamos voltar ao texto Sublime e colar this.There vamos . Irei salvar isso. Voltar ao Chrome e refresh.Fantastic. Agora, eu quero um pouco de espaço acima desta imagem e abaixo do H1. O que eu vou fazer é em Sublime, eu vou adicionar uma coisa chamada estofamento. Podemos ir para o preenchimento superior e eu vou para cerca de 50 pixels, e eu posso ir preenchimento inferior 50 pixels também. Vamos salvar, vamos voltar para o Chrome e refresh.Lá vamos nós . Isso parece muito bom.Embora eu não sei se eu sou um grande fã da borda roxa. Talvez eu possa mudar isso para branco. Vou voltar para Sublime. Vamos mudar a cor da borda do roxo para branco. Salvar e atualizar. Sim, eu gosto muito disso. Agora, este Ralph Demolidor neste tipo de fonte, não parece muito bom. É muito fácil mudar sua família de fontes em Sublime em nosso cabeçalho como você escreve em font-family e, em seguida, dar-lhe um valor. Agora, há um par de fontes padrão que funcionarão em seu computador e computador do usuário, mas se você especificar uma fonte que está apenas no seu computador. Não vai funcionar no computador de outra pessoa. O que você precisa fazer aqui é aplicar algumas fontes que funcionarão se a anterior não funcionar. O que vou fazer é escrever Helvetica. Se eles não têm Helvetica, então podemos usar Arial. Se eles não têm Arial, podemos usar sans-serif. Agora, uma fonte serif é uma dessas que temos atualmente, e tem esses pezinhos e pequenos braços. Sem serif significa que não tem estes pés e braços. Agora, você também pode escrever Helvetica com citações em torno dela, e Arial com aspas ao redor, se você quiser, mas não é realmente necessário. Lembre-se de colocar o ponto-e-vírgula depois disso. Se salvarmos isso e voltar para o Chrome, atualizar, isso ficará muito melhor. Mas e o resto do nosso site? Bem, talvez vamos mudar tudo de uma só vez. O que eu vou fazer é cortar esta declaração de família de fontes e ir para meu conjunto de regras de corpo e colar feature.Then eu vou salvar, voltar para o Chrome e atualizar. Agora, todo o nosso site terá esta fonte aplicada a ele. Fantastic. Vamos apenas verificar se ele realmente tem essa fonte. Vou clicar com o botão direito do mouse, inspecionar, então, no lado direito aqui, eu vou rolar para baixo, família de fontes Helvetica, Arial, sans-serif. Se o seu computador não tiver Helvetica e não tiver Arial, ele usará qualquer fonte de sensor que esteja no computador. Agora, para os meus títulos, quero usar algo um pouco mais especial. Eu vou para o Google Fonts e encontrar uma fonte muito legal para usar. Estes são chamados de fontes web. Isso funcionará se um usuário tem a fonte em seu computador ou não. Vamos abrir uma nova guia, vá procurar Google Fonts.Clique neste primeiro link. Então aqui você pode enlouquecer. Procure algo que corresponda ao seu personagem. Eu sei que a fonte que eu quero é chamado Press Start 2p. Aqui vamos nós. Depois de encontrar sua fonte, você pode então pressionar este botão de adição. Depois de ter uma família selecionada, clique nesta barra preta. Então, há duas maneiras de colocar essa fonte em seus estilos. A maneira padrão é a mais fácil. Vamos copiar isso e vamos voltar para Sublime, ir para o nosso índice e antes do arquivo CSS, vamos colar este elemento de link. Você pode ver que é aproximadamente o mesmo.É apenas em uma ordem diferente. Ele tem um HRF de costurado ele tem um atributo de papel de folha de estilo e isso é tudo que precisamos. Então vamos voltar para o Chrome. Em seguida, digamos especificar em CSS. Use as seguintes regras CSS para especificar essas famílias. Família divertida, pressione Start 2P. Se não tiver isso, o padrão é cursivo. Vamos copiar isso. Vamos para Sublime e seu, salvar este arquivo HTML índice, e então em nosso CSS herói, o que eu vou fazer é aplicar esse estilo a todos os H1s e, todos os H2s. Este é outro tipo de seletor. Em vez de escrever uma regra para H1s e depois outra para H2s, podemos simplesmente dizer, hey, todos os elementos H1 e todos os elementos H2, eu declaro que você deve ter essa família de fontes. Vamos salvar isso e vamos para o Chrome agora.Chegou à nossa primeira guia e atualize. Isso parece muito bom. Agora parece um jogo de vídeo. Sim, eu gosto. Nosso cabeçalho está olhando muito bom, mas eu não tenho certeza se eu especifiquei um tamanho de fonte para o meu h1. Nós dissemos branco, mas eu quero o tamanho da minha fonte, font-family não, tamanho da fonte lá foram ir, para ser 50 pixels. Salve isso e faça uma atualização novamente. Isso é bem grande, mas tudo bem. No momento, temos o nosso inspetor de elementos aqui. Se fecharmos ou, se nos movermos para baixo e rolarmos para cima, sim, parece muito melhor. Fantástico, mas vou voltar para o lado porque é mais fácil ver o que estamos fazendo. Agora comece a estilizar os principais elementos e o conteúdo dentro dele. Vamos voltar ao texto sublime. O que podemos fazer aqui é adicionar um par de linhas e, em seguida, escrever principal e escrever algumas declarações para os nossos principais elementos. A primeira coisa que eu quero fazer é definir uma largura máxima de 800 pixels. Então 800 pixels de largura. Isso é para que, se houver um navegador maciçamente amplo. Não parece que você tem que rolar os olhos da esquerda para a direita. É muito fácil de ler. Vou salvar isso, voltar para o Chrome, clicar em Atualizar. Então eu vou fechar isso por enquanto e você vai ver isso. Parece que só sobe até lá, o que acontece. Mas você não tem certeza disso. Vamos clicar com o botão direito do mouse e inspecionar isso, e podemos tornar isso um pouco menos amplo. Então, quando passarmos o mouse sobre o principal, e você pode ver onde o destaque azul está, isso é o quão grande ele é. Diz que tem 800 pixels de largura. Mas agora por que essa imagem é tão ampla? O que faremos sobre isso? Dentro do texto Sublime, o que eu vou fazer aqui é eu vou dizer todas as imagens dentro do nosso elemento principal, eu quero que você tenha uma largura máxima de 100 por cento. A razão pela qual eu faço isso é porque se eu mudar a largura máxima do nosso elemento principal, então a largura máxima deste ainda será a mesma que o elemento principal. Eu vou salvar isso, vamos voltar para o Chrome e atualizar, lá vamos nós. O que é realmente legal sobre apenas definir a largura é que a altura é dimensionada proporcionalmente. Você terá notado isso com a nossa imagem de Avatar e com esta grande imagem. Agora o que estou vendo é que todo o nosso conteúdo está sentado para o lado esquerdo. Eu não quero isso, eu quero estar no meio. Vamos tentar um alinhamento de texto. Vamos dizer centro de alinhamento de texto. Eu vou salvar e, em seguida, voltar no Chrome eu vou atualizar. Tudo isso fez, é o nosso centro de alinhamento de texto, o que você pode querer, mas eu não quero. Vamos voltar ao sublime. Vamos desfazer isso, e o que vou fazer aqui é adicionar uma margem. Para o valor, eu vou dizer 0, que significa valores superior e inferior, você é zero e, em seguida, eu definir os valores esquerdo e direito para auto. Este é um atalho muito bom para centralizar itens. Vou guardar isso, voltar para o Chrome, atualizar. Agora meu texto está alinhado à esquerda novamente e todo o nosso conteúdo está no meio. Isso significa que se eu fechar meu inspetor de elementos, lá vamos nós, isso é muito bom. Mas agora se eu abrir isso de novo, então vamos inspecionar alguns elementos, e eu tornarei isso um pouco mais amplo. Você verá que todo o conteúdo fica exatamente à esquerda e exatamente à direita. Quero que haja um pouco de estofamento à esquerda e à direita. Vamos voltar ao sublime e adicionar um pouco de estofamento. Agora, poderíamos adicionar preenchimento à esquerda e ao preenchimento, direita, ou o que poderíamos fazer, é usar o atalho. Então, para preenchimento, eu poderia dizer que é zero e que iria sentar todo o preenchimento para zero, ou eu poderia apenas ir para cima e baixo com seu primeiro valor e, em seguida, esquerda e direita. Eu poderia ir para algo como 20 pixels. Então, se eu quisesse continuar o atalho, eu poderia então definir o valor inferior para zero ou talvez até 20 pixels também e então eu posso definir o valor da esquerda se eu quisesse. Se definirmos isso para algo como 100 pixels, será realmente evidente o que isso faz. Vou salvar isso, voltar para o Chrome e atualizar. Você verá que quando eu selecionar meu elemento principal, não há preenchimento no topo, mas há um estofamento maciço à esquerda, um pouco de estofamento à direita. Se descermos, verá que há um pouco de estofamento na parte inferior. Se eu mudar isso para, vamos avançar 20 pixels. Você verá que o preenchimento muda ou ao redor, o que é ótimo. Em seguida, se eu definir o primeiro valor para zero, colocar um espaço na parte superior e inferior terá zero preenchimento e, em seguida, a esquerda e direita para ter um preenchimento de 20 pixels. Isso é exatamente o que eu quero. Vamos voltar ao sublime e vamos fazer com que seja assim. Fantástico. Vou salvar isso, voltar para o Chrome e atualizar. Você pode ver que estamos indo e voltando entre o navegador e nosso CSS. Eu realmente gosto de fazer isso porque eu estou basicamente projetando no navegador. Agora vou estilizar meus H2s. Vamos inspecionar esse cara. Qual é o tamanho da fonte? Na verdade, não estabelecemos um. Vamos voltar ao sublime, e vamos mudar isso, eu vou dizer, todos os elementos h2, eu quero que você tenha um tamanho de fonte de 35 pixels. Quero que a cor seja e70c19. Vou guardar isto e rolar um pouco para baixo. Vamos voltar ao Chrome e atualizar. Sobre o Ralph, as características do Ralph, os amigos do Ralph. Eles podem ser um pouco grandes. Volte para sublime e altere isso para 30 pixels. Vamos ver como isso se parece. Ok, isso parece muito bom. Agora, os elementos do parágrafo, não fizemos muito sobre isso. Vamos definir isso explicitamente. Eu vou dizer, todos os elementos de parágrafo, Eu quero que você tenha um tamanho de fonte de 20 pixels. Eu vou salvar isso e atualizar; ok, isso está parecendo muito grande, mas nossa lista ainda tem o tamanho da fonte antiga. Em vez de escrever estilos para a nossa lista ordenada e nossa lista não ordenada, o que vou fazer é aplicá-la ao corpo. Vou cortar isso da nossa etiqueta de parágrafo, ir para os elementos do corpo e colar isso lá e vamos guardar isso. Vamos voltar ao Chrome e atualizar, e lá vamos nós. Isso parece muito melhor. A próxima coisa que eu queria fazer sobre os elementos do corpo é definir uma altura de linha. Isso só torna o texto um pouco mais legível. Vou configurá-lo para cerca de 30 pixels para ver o que isso faz. As coisas estão um pouco mais fáceis de ler agora, isso parece muito bom. A próxima coisa que eu quero fazer é estilizar esses links. Vamos voltar para Sublime rolar um pouco para baixo e em vez desses elementos de parágrafo, eu vou usá-lo para estilizar todos os meus elementos de âncora. Vou pressionar escape para se livrar das sugestões e a cor que vamos para vai ser a mesma que o nosso hash h2, e7 lá vamos nós. Vamos salvar isso, vamos voltar ao Chrome e atualizar. Lá vamos nós. Agora como eu passar o mouse sobre ele e queria mudar de cor. A maneira de escrever uma pseudo-classe em um elemento âncora é escrever um e seguida, dois pontos e, em seguida, passar o mouse e esta é uma pseudo-classe hover. O que estamos fazendo aqui é declarar que quando você passa o mouse sobre qualquer elemento, queremos mudar a cor e então vamos dizer cor e vamos para aquela cor roxa que escrevemos um pouco mais cedo. Hash 483a94. Vamos guardar isso. Vamos voltar para o Chrome, atualizar você ver que quando eu passar o mouse, ele não é roxo. Nós também podemos nos divertir com isso, então se formos para Sublime Texto e mudamos isso para uma cor de fundo em vez disso, e mudar a cor para branco e então eu vou apenas recuar isso. Vamos ver como isso se parece. Sim, isso parece muito bom. Super. A última coisa que temos dois estilo é o nosso rodapé. Eu vou voltar para texto sublime e vamos colocar em nosso elemento rodapé e eu quero que ele seja o mesmo laranja que o nosso cabeçalho. Eu vou rolar um pouco aqui e eu vou copiar isso e eu quero que o texto alinhe para ser central bem e eu vou colá-lo em nossos elementos de rodapé. Vamos salvar isso, vamos voltar ao Chrome e atualizar. Agora isso está parecendo um pouco estranho, então vamos resolver isso. Eu quero que a cor toda para ser branco e, em seguida, eu quero que os elementos a dentro do rodapé para ter uma cor de branco também. Vamos guardar isso e ver como isso se parece. Então, se eu passar o mouse sobre ele, ele vai ter esta cor de fundo roxo, que eu não tenho certeza se eu realmente quero. Vamos voltar para Sublime, e vamos copiar e colar isso e colocar uma pseudo-classe sobre esses elementos âncora e dizer, bem, quando você passar o mouse sobre isso, eu quero que a capacidade seja 0,5, e eu quero que a cor de fundo seja transparente, vamos salvar isso. Volte para o Chrome, atualize. Lá vamos nós. Parece muito bom. Agora, a única coisa que resta a fazer com o meu rodapé é livrar-se do espaço na parte inferior e dar-lhe um pouco de preenchimento. Vamos fazer isso. Agora eu quero que meu preenchimento e meu rodapé sejam cerca de 50 pixels e eu quero ter certeza de que a tag de parágrafo não tem margem. Eu digo, todos os elementos de parágrafo dentro do rodapé, você pode ter uma margem de nada. Vamos guardar isso. Volte para o Chrome e atualize. Lá vamos nós. Está parecendo muito, muito bom. Vamos fechar este inspetor de elementos e dar uma olhada em como nosso site seria parecido para a maioria das pessoas. Sim, acho que parece muito bom, talvez possamos adicionar um pouco de estofamento no topo do nosso elemento principal e talvez na parte inferior também. Dentro de Sublime, vamos voltar para os nossos principais elementos e em vez de 0, vamos dizer 20 pixels. Talvez possamos fazer tudo com 20 pixels. Eu salvarei lá. Volte para o Chrome e atualize. Sim, isso parece muito bom. Eu acho que este Ralph e seus amigos podem ser realmente precisa olhar como uma legenda em vez de apenas um elemento de parágrafo regular. Então vamos lidar com isso a seguir. Dentro do meu index.html, vou rolar para baixo até este parágrafo agora vou dar-lhe uma classe de legenda. Vou guardar isso. Vá para o meu herói CSS. Role um pouco para baixo e, em seguida, na parte inferior eu vou dizer todos os parágrafos com uma classe de legenda Eu quero que você tenha uma cor de cinza. Vamos ver como isso se parece. Refresque. Isso ainda não é tão cinza claro, então vamos voltar ao sublime e ele muda para algo como 999999. Vamos economizar e sim, isso parece muito bom. Agora quero que seja em itálico. Poderíamos colocar um elemento I em torno do texto, mas porque é uma legenda, podemos realmente fazer isso em CSS. Vamos para fonte, estilo, e vamos dar-lhe um valor de itálico, vai salvar, voltar para o Chrome e atualizar. Agora está em itálico, mas ainda tem essa margem acima, então vamos mudar isso. Vamos dizer margem superior, e vamos dar-lhe um valor de 0. Depois, quando salvarmos isso, volte para o Chrome e atualize. Sim, parece muito melhor. Agora, a única coisa que eu ainda quero fazer é colocar um pouco de espaço entre os h2s e os elementos acima deles. Vamos voltar ao texto sublime. Role para cima até chegar a um h2 e, em seguida, podemos definir uma margem de digamos, 40 pixels no topo, à esquerda e à direita será 0 e, em seguida, abaixo podemos dizer dez pixels. Vou salvar isso, vamos voltar ao Chrome e atualizar. Sim, isso parece muito bom. Tudo em todas as nossas páginas olhando fantástico. Agora tudo o que precisamos fazer é comprometê-lo. Vamos para o GitHub desktop e para o nosso resumo, podemos dizer, "Escreveu o CSS para nosso website de personagens e alterar algum HTML.” Então você se compromete a dominar e empurrar a origem. Fantástico. Agora, podemos voltar ao Chrome. Podemos fechar fontes do Google, abrir uma nova guia, digitar nosso nome de usuário do GitHub e lá vamos nós. Vá ao herói dos desenhos animados e pressione “retorno”. Seu site de personagens, você tem um URL que você pode compartilhar com o mundo. A última coisa que você pode achar bastante útil é como escrever um comentário em CSS. É um pouco diferente do HTML. Dentro de seu editor de código, tudo que você precisa fazer é digitar uma barra e Asterisco. Escreva seus comentários, algo como, estilos de cabeçalho e, em seguida, escreva um asterisco e uma barra de novo. Lá vamos nós. Então, novamente, se você quiser fazer isso com um atalho, tudo que você precisa fazer é pressionar Command ou Control e Forward barra e, em seguida, escrever seus comentários aqui. Bem, a página do Raphl parece esmagadora. Eu acho que ele se encaixa muito bem, e eu estou esperando que o seu parece incrível e se encaixa no seu personagem também. Se você está se sentindo bem, compartilhe com o mundo, conte para compartilhe com o mundo, sua mãe, seus amigos, os caras com quem trabalha. Deve deixar todos super orgulhosos ou insanamente ciumentos. O que é ainda mais legal é que toda vez que você confirmar e sincronizar seu código, esta página será atualizada. Tada mágica. 11. Depuração + erros comuns: Pessoal, não importa quem sejam, mesmo que sejam codificadores super ninja, vão cometer erros quando programarem. Eles são chamados de insetos e há frustrantes. Como você lida com eles e faz com que eles desapareçam? Vamos cobrir um erro de exemplo juntos. Se você quer que esta imagem pareça um avatar e não é, o que você deve fazer? A primeira coisa a fazer é relaxar. Deve haver uma razão lógica para não funcionar. Respire fundo e anote o que está acontecendo. Ele não tem nenhum dos estilos de avatar que eu escrevi para ele, e parece uma imagem padrão. Então eu vou rever as coisas que vão para fazer essa coisa funcionar. Neste caso, tudo o que vai para fazer uma imagem, um avatar. Vou entrar em texto sublime. Então, dentro do meu índice, vou rolar até onde escrevi este avatar. A imagem parece correta. Agora, eu vou para o meu CSS e rolar para baixo até onde eu escrevi os estilos para este avatar. Então eu vou dizer todas as imagens dentro dos elementos de cabeçalho. Já posso ver o meu erro. Você vê que aqui, eu coloquei um ponto, e aqui estou dizendo todas as imagens dentro de um elemento com uma classe de cabeçalho. Isto não é o que eu quero. Vou remover isto e depois remover este período. Em seguida, salvarei e voltarei para o Chrome e atualizarei. Lá vamos nós. Os insetos são muito simples de ver em retrospectiva. Quanto mais você codifica, melhor você se torna em detectá-los. Durante esta aula, você pode enfrentar alguns bugs comuns. O primeiro e maior bug é erros de ortografia. Assista [inaudível], são os pequenos insetos que muitas vezes causam as maiores dores de cabeça. Sugiro copiar e colar onde puder. O segundo é a sensibilidade dos casos. Se suas imagens não estão chegando ou não há CSS quando você visualiza seu site online, há uma boa chance de que seja porque você está tentando acessar um arquivo que não existe. No seu computador, acessar o avatar JPEG pode funcionar porque o avatar JPEG e Avatar JPEG são vistos como a mesma coisa porque o sistema de arquivos do seu computador não diferencia maiúsculas e minúsculas. Mas o GitHub os vê como arquivos separados porque o GitHub diferencia maiúsculas e minúsculas. Portanto, verifique os nomes reais de arquivos e pastas em comparação os que você escreveu em seu HTML e CSS. Para evitar que isso aconteça, escolha uma maneira padrão de nomear seus arquivos e fique com ela. Prefiro nomear tudo em minúsculas e usar traços em vez de espaços. Isso se chama kebab-case. Um terceiro problema comum é esquecer um período antes de um nome de classe ao escrever seletores CSS. Então, se seus elementos não estão recebendo os estilos que você escreveu, este pode ser o problema. Se você está batendo a cabeça em sua mesa porque algo não está funcionando, faça uma pausa, uma volta, olhe pela janela, ou explique o problema para outra pessoa, mesmo que ela não saiba como codificar. Se conseguir ajuda de alguém que codifica, peça a ele. Mas somente depois que você tentou depurar o problema sozinho. Agora, se você quer minha ajuda, eu vou dar com prazer. Mas para me ajudar a ajudá-lo, envie seu código e sincronize-o com GitHub.com. Diga-me em que lição você está preso. Descreva o que está acontecendo. Descreva o que você acha que deve estar acontecendo, e então me diga o que você vai conseguir algum nome de usuário é. Então vou tentar te ajudar. 12. Seu próprio site: Se você quer ser chique e ter seu próprio site com seu próprio URL especial, você precisa comprar um nome de domínio e hospedar seus arquivos em um servidor. Você pode usar o Github para hospedar seus arquivos e apontar seu domínio para o Github. Ou você pode usar uma empresa de hospedagem de site que oferecerá a capacidade de comprar um domínio e hospedar o site com eles. Achei que esta era a opção mais fácil. Não vou conversar mais sobre hospedagem durante esta aula, mas incluí alguns links e maneiras de colocar seu site online nos recursos da turma. Há poucos descontos lá também. 13. O fim (festa): Este é o fim da aula, mas espero que seja apenas o começo da sua jornada de codificação. Espero que tenha se divertido. Espero que tenha aprendido muito, e espero que aceite mais do seu lado nerd a partir de agora. O que esta classe está dando a você é uma base sobre a qual aprender mais sobre. Há muito mais para aprender e pode ser muito divertido criar sites para si mesmo, para amigos e para clientes. Agora, se você ainda não fez, você vai precisar comemorar. Você acabou de criar um site. Oi cinco você mesmo, deixe sair um grito, dançar, saltar para cima e para baixo, correr por aí como uma pessoa louca. Bem feito. Se você não compartilhou seu site de personagens em seu espaço de projeto de compartilhamento de habilidades, faça-o. Eu adoraria ver o site que você criou. Se você gostou desta aula, por favor deixe um comentário. Significa muito para mim, e não se esqueça de me seguir e se juntar ao fã-clube tapkaboom em taptapkaboom.com. Se você gosta da maneira que eu ensino, eu tenho um monte de aulas sobre uma variedade de tópicos e muito mais a caminho. Isso é tudo para mim, tchau por agora. 14. Bônus: URLs absolutos + relativos: Como um navegador sabe qual imagem exibir ou qual arquivo CSS usar para estilizar nosso site ou para onde nos levar quando clicamos em um link. Nesses casos e muitos mais, damos ao navegador um endereço web do arquivo que queríamos acessar. Agora, o nome correto ou o nome correto para o endereço web é U-R-L, que significa Universal Resource Locator. Parece muito futurista e complicado, mas não é tão ruim. O que é um URL? Bem, eu gosto de pensar nisso como um conjunto de instruções que podemos dar ao navegador sobre onde encontrar um arquivo. Há duas maneiras de fazer isso. Um é com um URL absoluto e dois é com um URL relativo. Qual é a diferença entre um URL absoluto e relativo? Imagine que estamos na casa de um amigo e você me pergunta, onde você mora? Eu poderia dizer 22 ruas longas, 1701CA, Amsterdã, Holanda. Isto é como um URL absoluto, nunca muda e é sempre o mesmo. Eu também poderia dizer, bem, você sai pela porta da frente e vira à esquerda, você continua andando até chegar na rua Long, depois vire à direita, e então eu sou o número 22. Isto é como uma URL relativa. As direções mudam com base na sua localização atual. Com uma URL absoluta, começamos com o domínio onde o arquivo está localizado, como tapkaboom.com. Em seguida, dizemos ao nosso navegador qual conjunto de pastas olhar dentro de. Cada nome, seguido de uma barra corresponde à pasta no servidor ou sistema de arquivos. Finalmente, terminamos com o nome do arquivo e extensão. Com um URL relativo, começamos automaticamente a partir do endereço em que o navegador está atualmente, sem ter que dizer isso explicitamente. Em seguida, adicionamos uma combinação de componentes de caminho relativo que diz ao navegador em que pasta ou arquivo está. Então terminamos com um nome de arquivo e extensão. Agora, o que são esses componentes de caminho relativo? Vamos entrar nisso agora. O primeiro é um corte. Se começarmos com uma barra, ele diz ao navegador para iniciar na pasta de nível superior ou URL base do domínio atual. Isso pode ser útil se você tiver algumas pastas profundas e quiser acessar um arquivo próximo à pasta de nível superior. Os segundos componentes de caminho relativo é barra de ponto. Quando usamos isso, ele diz explicitamente ao navegador para usar a pasta atual. O navegador faz isso por padrão, então eu quase nunca usar ponto barra. Os próximos componentes do caminho é ponto, ponto barra Usamos isso para dizer ao navegador para subir um nível de pasta. Eu uso isso o tempo todo, é muito comum. Os componentes finais do caminho é um nome de pasta seguido por uma barra. Isso direciona o navegador para uma pasta com esse nome. Isto é super comum. Com um caminho para um nome de arquivo, podemos combinar vários pontos, barras de pontos e nomes de pastas juntos para dar as direções do navegador para o arquivo. Quando usamos URLs absolutos e quando usamos URLs relativos? Você não precisa usar um URL relativo para nada, mas eles geralmente são muito mais rápidos de escrever e muito mais curtos, que torna seu código muito mais fácil de ler e escrever. Normalmente, uso URLs relativas quando o arquivo está localizado no mesmo domínio, especialmente se estiver a apenas uma ou duas pastas de distância. Se você quiser que o navegador acesse um arquivo em outro servidor ou domínio, você terá que usar uma URL absoluta. Por exemplo, se você quiser carregar um arquivo CSS a partir de fontes do Google ou navegar para um arquivo HTML em outro site, será necessário usar um URL absoluto. Se você tiver uma escolha entre usar um URL relativo e um URL absoluto, pergunte a si mesmo qual será mais fácil para mim e minha equipe ler e escrever, e qual deles vai causar menos bugs e menos problemas. Esses são dois fatores muito importantes a considerar. Vamos abordar alguns exemplos agora. Neste exemplo, eu quero criar um link de index.html para about.html dentro da pasta Pages. Então eu quero criar um link dentro do about.html e, em seguida, links para index.html. Vamos entrar no Sublime Text. O que temos aqui é um elemento de tinta ou um link. Quando eu clico nele, o navegador me leva para alguma página. Dentro dos atributos href, eu vou para Pages, depois about.html. Eu poderia ir para Dot Slash aqui, mas isso é desnecessário. Vou desfazer isso, salvar isso e, em seguida, ir para o Google Chrome. Então esta é a minha página index.html. Vamos chegar à imagem quebrada, mas vou atualizar isso e clicar na página Sobre. Lá vamos nós. Ele nos leva para a página sobre. Você verá que a URL muda, agora tem pages/about.html. Vamos voltar ao Sublime Text e abrir about.html. Agora eu quero visitar a página inicial. O que eu preciso fazer aqui é ir ponto, ponto barra, e isso vai abrir a pasta anterior. Eu poderia então escrever index.html. Vamos ver como isso funciona e voltar para a atualização do Chrome. Clique na página inicial. Lá vamos nós. Ele me leva de volta para index.html, e isso me leva de volta para about.html. Neste exemplo, o que vamos fazer é encontrar um arquivo para colocar no atributo fonte. Dentro do meu Finder, eu tenho esse silly-face.jpeg, incrível, eu sei. Então, dentro da minha pasta de imagem, eu tenho este frog-face.jpeg, outra imagem incrível. Eu sei. O arquivo em que estamos no momento é o nosso index.html, e isso está nas raízes de fora do local. Aqui estamos, index.html, e agora eu preciso encontrar uma imagem para este elemento de imagem. Eu vou para silly-face.jpeg, e eu estou apenas digitando isso. Pressione Return. Vou guardar isto. Vou ao meu navegador e atualizo aqui. Lá vamos nós. Aí está a minha única imagem facial. Se voltarmos para Sublime Text e entrarmos na pasta Image, o que podemos fazer aqui é digitar um IMG, que é o nome da pasta e, em seguida, barra, que significa que ele vai olhar dentro da pasta Image, e em vez de cara boba, vamos usar sapo face.jpeg. Não quero tudo isso de novo. Vou salvar isso e voltar para o Chrome, atualizar, e lá vamos nós. Cara de sapo está lá. Isso é muito legal. Usamos um nome de pasta e, em seguida, o nome do arquivo com uma extensão. Isso muda um pouco quando voltamos ao sublime e entramos em páginas e vamos para a nossa página about.html. Vou abrir isto e aqui, o que queremos fazer é aceder à cara boba mais uma vez. Eu vou para ponto, ponto barra, que vai uma dobra para cima, e, em seguida, digite face.jpeg tolo e salve isso. Vamos para o Chrome. Refresque. Vou para a página Sobre. Lá vamos nós. Você tem minha cara boba. Então, se quisermos acessar a cara de sapo, o que precisamos fazer é ir ponto, ponto barra e, em seguida, voltar para dentro da pasta Imagens. Fomos uma pasta para cima e agora vamos para dentro da pasta de imagens para o rosto de sapo. Lá vamos nós. Vou guardar isso. Volte para o Chrome e atualize. Lá vamos nós, lá está a minha cara de sapo. Você pode ver aqui em sublime que usamos diferentes componentes de caminho relativo para acessar as mesmas imagens porque começamos a partir de um arquivo diferente. Neste exemplo, eu quero usar um Google Fonts no meu site. Encontrei uma grande fonte chamada “Bangers”. Vou clicar nisso. Eu vou então dizer selecione o estilo, e então eu vou pressionar este botão aqui. Vou selecionar tudo isso. Eu vou copiar isso, ir para Sublime Text, e então eu vou colar isso assim, super. Você pode ver aqui que ele diz https://e este URL longo. Agora que é uma URL absoluta e não há nenhuma maneira que não podemos usar uma URL absoluta para isso. Lá vamos nós. Dois exemplos de URL relativos e um exemplo de URL absoluto. Esse é o fim deste vídeo. Para mais coisas como esta, e para subir de nível seus superpoderes criativos para esse tapkaboom.com.