Introdução ao HTML: crie um site de portfólio

1. Trailer: Nesta aula introdutória, faremos um website de portfólio de quatro páginas com alguns dos aspectos mais comuns um portfólio on-line que pode ser usado para uma infinidade de diferentes assuntos e profissões. Vamos analisar o conteúdo necessário em cada página e como isso é traduzido para o nosso código HTML. No final de nossa aula, teremos um site clicável com quatro páginas com uma página inicial, uma página de trabalho e sobre página, e uma página de contato. Se você não escreveu uma linha de HTML ou se você precisa de um HTML de atualização, esta classe é perfeita para você. Estaremos cobrindo HTML desde o início, então nenhum conhecimento prévio é necessário. Seja em um Mac ou PC, todos são bem-vindos. Vou orientá-lo por todas as etapas para que possamos desde a instalação de um editor de texto até salvar nossos arquivos e aprender o básico de HTML. Nós não vamos ficar muito loucos com um jargão de computador hip, mas eu vou me certificar de destacar terminologia importante que você deve saber e como solucionar seu próprio trabalho e encontrar respostas para perguntas comuns quando esta aula terminar. 2. Damos as boas-vindas ao curso!: Oh oi. Eu não te vi lá. Não se importe comigo. Estava lendo um pouco tarde sobre um dos meus assuntos favoritos, o Computador Pessoal. Mas já que estás aqui agora, deixa-me guardar isto e vamos começar a falar HTML. Nesta aula introdutória, vamos construir um portfólio online de quatro páginas. O site será HTML apenas o que significa que os estilos bonitos e cores virão em um dia mais tarde, mas nesta classe, vamos construir uma base forte e robusta que irá apresentá-lo ao maravilhoso incrível mundo de HTML. No final de nossa aula, teremos esse site clicável de quatro páginas com uma página inicial, uma página de trabalho, uma página sobre e uma página de contato. Vamos falar um pouco sobre os elementos comuns que estarão em cada uma dessas páginas e como você pode usá-los para criar seu próprio site de portfólio. Vamos fazer o site para Jon Arbuckle. Então, vamos falar sobre como começamos. 3. Definindo nosso conteúdo do projeto: Ao longo deste curso, criaremos HTML para um site de portfólio de quatro páginas, apresentando alguns dos aspectos mais comuns de um portfólio on-line que pode ser usado para uma infinidade de assuntos e profissões diferentes. Vamos detalhar o conteúdo necessário em cada página e como isso se traduz em código HTML. Acho que é melhor ao criar um novo site ter uma ideia, algum conteúdo e uma direção para o que estamos construindo, possamos trabalhar em direção a um objetivo. Vamos construir nosso site para um cliente fictício usar como base para cópia e estrutura. Então, hoje, nosso cliente é John Arbuckle. Aqui estão algumas coisas que sabemos sobre John. Ele é um cartunista. Ele possui um gato e um cão, e John juntou-se a muitas redes sociais para atender conexões profissionais e pessoais. John veio até nós porque ele quer um portfólio on-line para mostrar seu trabalho de ilustração e quer estender seu alcance social fornecendo algumas informações sobre ele e suas redes sociais. A primeira coisa que vamos querer fazer é descobrir quais páginas vão precisar para o nosso site. Vamos fazer isso criando um mapa de site simples. Se você não viu um mapa antes, tudo bem. Parece um pouco com isto. Cada caixa representa uma página no site. Então, você pode ver que eles têm uma home page, e sobre a página ou o que há de novo página, e algumas outras páginas abaixo dessas páginas. O mapa do site ajudará a nos guiar à medida que construímos nosso site para garantir que todas as nossas páginas sejam cobertas. Você pode criar um mapa do site em um programa de diagramação como no Amigraph ou no Photoshop, ou mesmo com uma caneta e um papel. Para este site, vamos configurar uma amostra usando o Gliffy. Este é Gliffy.com e ele só vai nos dar uma maneira rápida de começar a desenhar. Então, vamos começar a desenhar agora e ele vai carregar isso. Então, a primeira coisa que vamos querer em nosso site é uma página inicial. Então, vamos arrastar isto até aqui e dizer “casa”. Nós também vamos precisar de uma página para mostrar todo o trabalho de John, para as coisas que as pessoas vão querer contratá-lo para, então teremos uma página de trabalho. Em seguida, vamos querer compartilhar um pouco sobre a personalidade de John, e um pouco mais sobre como ele é como pessoa. Então, vamos fazer uma página sobre. Por fim, se pessoas como John e seu trabalho, teremos uma maneira de as pessoas entrarem em contato com ele, então vamos querer ter uma página de contato. Vamos pegar esta pequena ferramenta aqui para fazer uma conexão com cada um, e a página de contato. Isso é um pouco desigual e às vezes não me preocupo com isso. Então, lá vamos nós. Nosso mapa do site está tudo pronto. Estas serão as quatro páginas que construiremos para o website do John. Em seguida, vamos definir qual conteúdo será em cada página, e vamos fazer isso criando um contorno de conteúdo. Por conteúdo, estou falando de coisas como texto, imagens e vídeos ou qualquer coisa que vai aparecer em todas as quatro páginas do site. Vou abrir um editor de texto para fazer isso. Mas novamente, se você só quiser pegar um pedaço de papel e uma caneta ou qualquer bloco de notas que você gostaria, qualquer coisa que funcione melhor para você. Então, é claro que vou precisar da home page que mencionamos, e a home page vai servir de boas-vindas aos visitantes e uma rápida apresentação de recursos do portfólio de John. Nós vamos precisar do que vamos chamar de conteúdo de herói, e o conteúdo de herói vai ter algo como um breve lançamento de elevador ou um forro rápido que as pessoas que vêm ao site vão saber do que se trata. Então, neste caso, Jon Arbuckle, um ilustrador freelancer e autor. E então nós também vamos ter algum tipo de imagem grande, talvez de uma história em quadrinhos ou talvez de outra coisa que descreva John. Uma maneira que através do visual com o campo do elevador, nós realmente fazer com que os usuários saibam imediatamente o que o site é tudo sobre porque as pessoas valorizam seu tempo. Então, vamos deixá-los saber imediatamente o que é. Em seguida, vamos querer ter uma seção sobre os quadrinhos web do John. Então, talvez tenhamos apenas um título e uma descrição do texto para que as pessoas saibam que John escreve quadrinhos. Também teremos um link para saber mais sobre os quadrinhos. E não é assim que se escreve quadrinhos, então vamos consertar isso. Ei, lá vamos nós. John também gosta muito de poker e ele tem um CD de poker à venda, então nós vamos querer uma imagem disso, um nome do CD, e um link para a Amazon para comprar, para garantir que todos possam obter sua correção de poker em. Também queremos que os visitantes saibam que John está no Twitter, então teremos um link para a página do Twitter de John. Nós também vamos querer mostrar um depoimento de cliente, para as pessoas saibam que John é realmente incrível para trabalhar com ele. Então, vamos manter este aqui do Dr. Luiz Wilson sobre como é trabalhar com John, e nós também vamos querer ter uma ligação de chamada à ação lá. Então, algo como, “Contrate um John para suas necessidades de retrato de estimação. Entre em contato.” Nós também vamos querer o que eu estou chamando de conteúdo de cabeçalho, e conteúdo de cabeçalho são coisas como o logotipo e navegação do site. O conteúdo do cabeçalho aparecerá em todas as páginas porque queremos sempre que as pessoas saibam em que site estão, e sempre queremos dar às pessoas uma maneira de chegar a outras páginas em todo o site. Então, isso manterá nossa navegação no site. Semelhante ao conteúdo do nosso cabeçalho, vamos para o conteúdo do rodapé, e isso aparecerá no final de cada página. Nesse caso, teremos informações de direitos autorais sobre o conteúdo do site. Em seguida é a página de trabalho, e na página de trabalho, nós também vamos incluir esse conteúdo de cabeçalho e rodapé, e nós também vamos ter o título da página, neste caso, trabalho. Aqui é onde vamos mostrar os quadrinhos do John. Neste caso, ele tem dois quadrinhos que ele quer mostrar no site, as Lasanha Chronicles e Cat Town, e cada um deles terá uma imagem, provavelmente como o primeiro quadro de um quadrinhos para mostrar aos usuários como é, e também ligado ao site externo de onde vivem esses quadrinhos. John não faz apenas quadrinhos, então ele também faz retratos. Então, queremos ter certeza de que as pessoas saibam sobre isso. Então, vamos incluir um exemplo de dois retratos que ele fez para seus clientes. Por último, não podemos esquecer os engarrafamentos de John, então vamos ter certeza de manter seu CD lá, que é o melhor de Johnny Arps, juntamente com a imagem do CD, e um link para comprá-lo na Amazon. Em seguida, temos a página sobre e novamente terá o conteúdo do cabeçalho, o conteúdo do rodapé, outra página intitulada, desta vez sobre. Vamos colocar uma imagem do John lá para que as pessoas saibam que ele é um cara de aparência amigável. Teremos alguns parágrafos de texto descrevendo John, algo acolhedor e feliz, um pouco sobre talvez seus hobbies e seu processo ao criar retratos e comentários. Vamos também incluir uma lista de habilidades e serviços profissionais que John oferece. Finalmente, teremos nossa página de contato. Novamente, conteúdo do cabeçalho ou rodapé, o conteúdo do título da página. Teremos o endereço de e-mail de John, as pessoas possam entrar em contato com ele, para queas pessoas possam entrar em contato com ele, e também manteremos uma lista de links aqui para a presença de John nas redes sociais, as pessoas possam segui-lo ou gostar dele ou qualquer outra coisa que as pessoas fazem na Internet com as mídias sociais das pessoas nos dias de hoje. Você pode ver a estrutura aqui não vai apenas trabalhar para o portfólio de John Arbuckle especificamente, mas de quase todos os profissionais, mesmo se você não tem CDs de poker. Então, se você quiser tentar usar suas informações pessoais em vez de John durante esta aula, vá em frente. Se você gosta de acompanhar mais de perto o que eu estou fazendo no vídeo, então use os arquivos de classe aqui e, mais tarde, você pode tentar algo em sua própria informação. 4. Reúna as ferramentas: Um editor de texto é um tipo de programa usado para editar arquivos de texto simples. Podemos escrever HTML com qualquer editor de texto lá fora. Então, se quiséssemos ir em frente e usar algo como o Bloco de Notas, e salvá-lo como um documento HTML, poderíamos. Há também o que é conhecido como editores HTML. Editores HTML são editores de texto semelhantes, mas adicionam funcionalidade extra. A funcionalidade que eles adicionam é específica para coisas como desenvolvimento da Web com itens como realce de sintaxe, atalhos de teclado, completação automática e muito mais. Você tem muitas opções dos editores HTML lá fora, e eu sugiro que depois desta aula, você as veja, veja se há alguns que você gostaria mais do que outros. Alguns são pagos, outros são gratuitos. Muitos deles têm testes gratuitos, então confira antes de pagar por eles. Para este curso, eu recomendo começar com Sublime Text 2. Eu gosto muito do Sublime Text porque ele pode ser baixado e avaliado gratuitamente e também, ele está disponível para Mac e PC. Este é Sublime Texto 2. Atualmente, eles também têm uma versão do Sublime Text 3, mas isso está em Beta. Então, vamos em frente e apenas usar 2 por enquanto, e então você vai querer escolher com base em qual sistema operacional você está usando. Acontece que eu estou usando OSX, então eu vou clicar sobre isso, e o download vai em frente e começa. Quando terminar, abrimos e instalamos. Uma vez baixado, você quer abrir isso e, nesse caso, eu estou em um Mac, então nós apenas arrastamos isso para a pasta de aplicativos para instalar. Instruções de instalação semelhantes devem ser seguidas em um PC. A próxima coisa que precisamos em termos de ferramentas para o desenvolvimento da Web é, um navegador moderno. Embora você possa usar qualquer navegador, eu recomendo o uso do Google Chrome. Vou usar o Chrome nesta classe, portanto, se você quiser acompanhar exatamente, recomendo baixar esse. Ele tem algumas grandes ferramentas que podemos usar ao criar nosso HTML. Outro grande navegador é o Firefox. Então, se você quiser também dar uma chance ao Firefox, isso tem coisas semelhantes, recursos realmente adicionados como o Chrome tem, mas eu vou usar o Chrome para o resto desta classe. Se você não gosta de qualquer um desses, sinta-se à vontade para usar o Opera, Safari ou Internet Explorer, e você pode ter que fazer alguns googles extras para encontrar algumas ferramentas para usar. A última coisa que vamos precisar para começar nesta classe é, vamos criar uma pasta para armazenar todos os nossos arquivos de classe. Não queremos ver as coisas por todo o lado e perdê-las todas. Então, vamos nos certificar de que mantemos as coisas boas e organizadas. Então, por agora, eu só vou fazer isso no meu desktop, e eu vou chamá-lo jon-arbuckle-site. Se você quiser salvá-lo em sua área de trabalho, você pode fazer isso. Outros locais comuns seriam em seus documentos ou, se você tiver uma pasta de sites, esses são provavelmente locais mais apropriados para mantê-la. Por enquanto, durante esta aula, eu vou mantê-lo na área de trabalho e, em seguida, movê-lo para um lugar mais apropriado depois. Você vai notar que eu nomeei meu site de jon-arbuckle-site. Gosto muito de usar hífens para separadores de palavras. Outras pessoas usam espaços ou sublinhados. Os espaços podem ficar um pouco complicados porque, às vezes, os navegadores ou o seu sistema operacional podem ler tão engraçado. Se você já viu aqueles como 20% em URLs, isso pode acontecer. Outras coisas, outras pessoas gostam de usar sublinhados. Os sublinhados são muito legais. Às vezes tenho dificuldade em lê-los porque parecem um espaço. Então, por causa disso, para minhas convenções de nomenclatura, eu costumo usar hífens, e mantenho as coisas todas em minúsculas. Se algo funciona melhor para você, certamente fazê-lo, mas eu recomendaria aderir a uma sintaxe quando você está nomeando coisas. Isso só mantém as coisas um pouco mais organizadas, e se você já trabalhou com outra pessoa, você será capaz de dizer qual é a sua convenção de nomes para que eles sigam isso. Então, todos trabalharão na mesma página. Depois que eu criar esta pasta para armazenar todos os meus arquivos, eu vou abrir isso, e uma coisa que eu sei que eu vou ter no meu site vai ser algumas imagens. Então, eu vou seguir em frente e também fazer outra pasta para imagens. Vou chamar esta pasta de img. Estou chamando de img porque é um pouco mais curto do que digitar a palavra completa para imagens e ainda é muito fácil ler o que é isso. Se você ver IMG, você saberá que estou falando de imagens. Eu provavelmente não vou chamá-lo de algo complicado. Se você chama “I “, alguém pode não saber o que é isso. Se você nomear algo como Fotos Ir Aqui, isso é muito longo, e você não quer digitar isso o tempo todo. Então, é bom manter sua pasta nomeando curto e doce, mas também para ter certeza de que ela é legível para você e outras pessoas para que você saiba facilmente o que vai dentro dessa pasta. Neste ponto, se você acha que terá vídeos em seu site, você também pode criar uma pasta para vídeos. Então, para lá, eu posso chamar vídeos. Se você sabia que queria incluir um PDF, talvez queira criar uma pasta para PDFs ou para outros tipos de mídia, essas são todas sugestões possíveis. Agora, só vou ter imagens. Então, dentro da minha pasta jon-arbuckle-site, eu vou ter a nossa pasta IMG images. Então, isso conclui nossa primeira lição. Depois disso, você vai querer ir em frente e criar a inscrição para o seu site contendo as páginas que vão formar o seu portfólio, criar um esboço de conteúdo para o texto e mídia que aparecerão em cada página. Lembre-se, se você quiser tentar fazer um site para si mesmo em vez de Jon Arbuckle, totalmente ir para ele ou tentar ambos ao mesmo tempo , o que você se sentir mais confortável com. Eu também quero reunir ativos para o projeto. Isso inclui todas as palavras, imagens, vídeos, tudo o que você gostaria de incluir em nosso site de portfólio. Por fim, queremos baixar todos os softwares e aplicativos necessários para criar nossas páginas HTML. Então, uma vez que tenhamos tudo feito, podemos simplesmente ir em frente e começar a escrever HTML. Quando acabares com tudo isso, vamos começar a lição dois. 5. O que é HTML?: O que é HTML? Bem, HTML significa linguagem de marcação de texto hiper. HTML é a principal linguagem de marcação para a criação páginas da Web que são exibidas em nossos navegadores da Web. Da mesma forma que alguns de nós lêem inglês ou espanhol, é da mesma forma que os navegadores podem ler e decifrar a linguagem do HTML. HTML se originou com Tim Berners-Lee no CERN como uma forma de pesquisa compartilhar artigos e informações uns com os outros. Agora podemos fazer isso e todos os vídeos de gatos com os quais poderíamos sonhar. HTML é muitas vezes emparelhado com coisas como JavaScript e CSS, ou folhas de estilo em cascata, a fim de fazer uma experiência completa na web, aplicativo web, página web na Internet. Então, HTML é a base para nossas páginas e o que vamos usar para criar todos os nossos sites. O tipo do que vamos chamar de regras de HTML são definidos pela especificação HTML. A especificação HTML é criada pelo W3C. W3C é um grupo de pessoas inteligentes que dizem aos navegadores como eles devem estar lendo HTML. Então, especificação HTNL 4 é algo que você pode ter ouvido falar e se tornou uma recomendação em 1999, há algum tempo, mas tem permanecido forte e verdadeiro. Basicamente, ele diz, cada elemento como o navegador deve lê-lo. Você deve ter ouvido algo chamado HTML5. HTML 5 é uma espécie de novo rascunho de HTML 4. Ele adiciona alguns novos elementos e novos significados para esses elementos. HTML 5 está cheio de coisas realmente legais que constroem sobre a base forte que HTML 4 nos deu. Uma coisa a ter em mente é que o HTML 5 não está finalizado atualmente. Então, se você estiver dando uma olhada no site HTML 5 aqui, você verá que este é um trabalho em andamento. checkout do rascunho do editor. Então, se formos em frente e olhar para o rascunho HTML para isso. Então, esta é a página para o rascunho HTML 5 e você notará que aqui está em vermelho dizendo que, “Cuidado, isso é apenas um rascunho”, o que significa que não é final e que as coisas podem mudar. Então, o que isso significa é que algo que um elemento pode significar agora, em um ano, alguém pode decidir que deve ser algo diferente até que ele se torne um documento finalizado. A boa notícia é que aprender o que aprenderemos como parte do HTML 4 nunca será um desperdício. Tudo o que vamos cobrir no HTML 4 também está incluído no HTML 5, que significa que você precisa aprender todos os elementos que vamos discutir e então você ainda será capaz de usá-los se você decidir usar HTML 5 ou quando ele se tornar um documento finalizado. HTML é parte do que comumente nos referimos como desenvolvimento front-end. Se você procurar desenvolvimento front-end, você encontrará algumas respostas diferentes para o que exatamente isso significa. Muitas vezes, você verá front-ends emparelhados com coisas como HTML, sobre as quais falaremos hoje, CSS e JavaScript, e você pode ver isso em algumas dessas imagens elegantes que as pessoas fazem lá fora. Você também pode ver que às vezes nos referimos a isso como marcação, estilo e funcionalidade ou conteúdo, apresentação e comportamento. Então, essas são coisas que geralmente são faladas quando se trata de fazer o front-end de um site, e o front-end como mencionado é baseado na marcação HTML que vamos criar. Então, como é o HTML? Bem, uma das coisas que é realmente legal sobre HTML é que nós somos capazes ver a fonte de qualquer site lá fora e ver como seu HTML se parece. Então, o que isso significa é, nós o chamamos de fonte HTML ou código-fonte da página e isso é o que compõe o conteúdo ou HTML de um site e podemos ver isso para praticamente qualquer coisa. Então, aqui no HuffPost Celebrity, se quiséssemos ver uma fonte desta página, poderíamos ir para “View”, “Developer”, “View Source”. Quando eu clicar nisso, você verá que esse código aparece e agora, pode parecer um pouco confuso, mas você verá que isso é código HTML. Podemos fazer isso para outros sites, como, stuffonmycat.com. Podemos dizer: “Pergunto-me qual é o código-fonte disto? Então, novamente podemos ir para “View”, “Developer”, “View Source” no Chrome, que também é um Command-Optionon-U para um atalho. Você pode ver que isso é definitivamente um pouco difícil de ler. O código é uma espécie de minimizado juntos, então não podemos realmente ver os espaços, mas este é o código HTML. Ou se clicarmos sobre o Reddit, poderíamos ver a mesma coisa para o Reddit. Então, novamente, se eu estiver usando um Mac no Chrome, posso fazer Comando+Opção+U e visualizar a fonte e, novamente, aqui está a fonte para isso. Eu posso ir em frente e abrir qualquer uma dessas páginas como um bebê liger brincando com sua mãe adotiva. Sim, por favor. Então, aqui, eu posso ver as fotos ou eu posso ser como, “Wow, eu me pergunto onde eles conseguiram essas fotos. Deixe-me ir em frente e olhar para a fonte.” Então,” Exibir”, “Desenvolvedor”, “Exibir código-fonte”. E aqui, podemos ver que este está começando a ser o HTML para a página. Também temos uma ferramenta chamada Inspetor da Web, e como usamos isso é clicando com o botão direito do mouse em seu controle, clicando em “Elemento”, e você verá esse menu de contexto aparece, e você verá aqui, ele diz, “Inspecionar Elemento”. Então, eu vou seguir em frente e escolher isso e então você verá esse quadro aparecer. O que este quadro faz é que nos mostra todo o HTML na página, assim como quando vimos o código-fonte, mas podemos passar por e expandir e recolher essas seções e dar uma olhada no que HTML está sendo escrito para obter este elemento na página que estamos olhando. Se você estiver usando o Firefox, há uma ferramenta semelhante. Então, aqui estou eu no Firefox, e a mesma coisa, e eu posso controlar ou clicar com o botão direito do mouse, e novamente, você verá inspecionar elemento. Então você verá um navegador muito semelhante, um pouco diferente, Chrome aqui, este é cinza escuro, mas além disso, você pode ver que este é o HTML que está sendo escrito para escrever isso e é destacado com este pequena linha pontilhada. Se você estiver usando algo como o Safari ou o Internet Explorer, eles também têm ferramentas de desenvolvedor para você usar, e se não, novamente, aqui está o Firefox, e então aqui, ele está no Chrome. No próximo vídeo, vamos dar uma olhada mais profunda no que exatamente todo esse HTML significa e ver como o navegador está realmente lendo ele. 6. Tags HTML e elementos comuns: Na última lição, demos uma olhada em como podemos visualizar o código-fonte. Vamos fazer isso novamente aqui, então este é JennLukas.com e este é o meu site e você verá que há uma imagem grande, alguns textos, e mais texto, um formulário de contato, e algumas colunas cheias de links, e você também verá as informações de direitos autorais na área do rodapé. Vamos ver a fonte para isso, alguns deles podem parecer disparates agora, e alguns deles realmente podem parecer bastante legíveis. Você pode ver coisas como este alto, afinado, amante de padrões, desenvolvedor front-end, e dizer, “Espere que parece familiar, eu vi que aqui Oi, afinado, amante de padrões, desenvolvedor front-end.” Então você pode ver que eles começam a coincidir, você pode notar que este texto é encaixado entre esses tipos de colchetes com mais palavras neles. Estes são o que chamamos de tags, tags descrevem o conteúdo do nosso documento. Vamos falar um pouco sobre tags HTML, tags HTML geralmente vêm em pares e têm uma tag de abertura e fechamento. Também às vezes chamado de tag de início e fim. O início é um colchete de ângulo aberto com o nome da marca seguido pelo colchete angular de fechamento. A tag de fechamento é um colchete angular aberto e, em seguida, temos a adição de uma barra juntamente com o mesmo nome de tag que a abertura, seguido novamente por que ângulo de fechamento colchete. Então você pode ver aqui, abertura, nome da tag, algum conteúdo entre ele e, em seguida, um nome de tag de fechamento, e, claro, vamos substituir esse nome de tag palavra por tags HTML reais. Vamos substituir o nome da tag para obter elementos HTML reais. Elementos HTML referem-se à tag de abertura e fechamento e também ao texto contido entre as tags. Neste exemplo, estamos mostrando uma tag p, p é para parágrafo. Assim, as tags p manterão quaisquer parágrafos de texto que temos em todo o nosso site. Em seguida, vamos ver o H1, e H1 significa título de nível um, eo H1 é o cabeçalho mais importante em nossa página. Vamos dar uma olhada mais profunda nas rubricas um pouco mais tarde. Por último, você verá algumas coisas lá em baixo e nós temos uma UL e dentro dela há alguns elementos LI. Chamamos isso de aninhamento, as LIs são aninhadas dentro da UL, e UL significa lista não ordenada, e lista não ordenada contém um monte de outros elementos chamados de LI, que significa item de lista. Esses são itens de lista contidos na mesma lista não ordenada, portanto, se você tinha dois itens de lista em uma lista, então você verá dois elementos LI como o que vemos aqui. Se você tivesse cinco, 10 ou 20, você iria apenas continuar listando essa quantidade de LIs com o conteúdo de cada um desses itens da lista. Nós também vamos dar uma olhada na lista e outros tipos de listas além de uma lista não ordenada um pouco mais tarde. Também temos elementos vazios ou às vezes chamados de autônomos, como a tag BR, que significa Break, a tag break é usada para quebras de linha rígida dentro do nosso texto. Também temos uma tag de imagem que é um elemento vazio, e você verá isso no segundo exemplo, onde diz img, que significa uma imagem. Estes são chamados de elementos vazios porque não há uma coisa como texto ou outro conteúdo dentro deles, então, ao contrário de ter uma tag de abertura e uma tag de fechamento, nós apenas temos uma tag de abertura e isso é tudo o que precisamos. Vamos dar uma maior olhada na tag de imagem e que o texto que vai junto com ele na próxima seção, spoiler, eles são chamados atributos. 7. Atributos HTML: Na última lição, vimos a tag de imagem e vimos algum tipo de texto adicional além de apenas nosso nome de tag. Esses são o que chamamos de atributos HTML. Quando usados, os atributos são sempre especificados na tag de abertura. O atributo fornece informações adicionais sobre a tag que estamos usando em nosso documento. O formato para ele se parece com isso, tagname, espaço, o nome do atributo que estamos definindo no sinal de igual e, em seguida, o valor para o atributo entre aspas. Em seguida, você terá seu conteúdo regular entre esses dois e seu nome de tag de fechamento. Neste exemplo de imagem, você verá que realmente temos dois atributos para este elemento. Temos SRC e ALT. SRC significa fonte, então você verá fonte igual e, em seguida, o que se parece um URL para talvez uma página web que você realmente verá no final do seu URL ele says.jpg. O que isso está fazendo, é apontar para um arquivo na Internet que é a fonte da imagem. SRC significa fonte, e aqui é onde nós definimos onde nosso navegador deve procurar a imagem que ele deve exibir dentro do nosso navegador Chrome. Neste caso, estamos dizendo ir para o site de sobrecarga bonito e pegar uma foto deste famoso animal 018.jpg e mostrá-lo em nosso site. ALT é para alt, e alt é texto alternativo. Texto alternativo serve alguns propósitos aqui. Para começar, se a imagem não carregar, este texto é o que será exibido. Isso está apontando para uma imagem de Socks Clinton, o gato. Então, o que acontece aqui é, se por algum motivo a imagem não for exibida, o navegador mostrará Socks Clinton. Por que uma imagem não é exibida? Há algumas razões, é possível que onde quer que você esteja procurando possa mover o arquivo, talvez você tenha tido um erro de digitação no nome, também às vezes os visitantes do seu site podem estar usando leitores de tela. As pessoas com deficiência visual costumam usar leitores de tela para ler o texto do nosso site, pois talvez não consigam ver as imagens que você deseja mostrar. Neste caso, deixamos que nossos visitantes que estão usando leitores de tela sejam capazes de saber que a imagem está realmente mostrando uma imagem de Socks Clinton. O texto Alt também pode ser pesquisável, o que é importante, e o Alt é um atributo obrigatório para incluir na tag de imagem. Então, lembre-se, falamos sobre a especificação HTML e o W3C. Bem, o W3C que vem com as regras de HTML disse que para cada tag imagem que você tem você também tem que ter a fonte para dizer palavra é, um Alt para fornecer texto alternativo. Você pode deixar o texto alt em branco para que ele possa apenas dizer, Alt é igual a aspas, e isso ainda será HTML válido, mas se ele precisar de um texto para dizer aos usuários o que é que é importante colocar isso em. Bem, então agora, nós abordamos uma introdução um pouco melhor aos elementos HTML e um pouco sobre atributos e nós temos informações suficientes para começar. Vamos abrir nosso editor de HTML, e começar a escrever algum HTML. 8. Estrutura da página HTML: Então, estamos prontos para começar a escrever nosso HTML. Então, para começar, queremos ir em frente e abrir o Sublime Text 2, nosso editor de HTML. Então, isso está em minhas aplicações e eu vou ir em frente e abrir isso. Agora, uma vez que tenhamos isso aberto, veremos que temos uma tela praticamente em branco, ou uma para a linha um, e podemos começar a digitar. A primeira coisa que aparece em nossa página é o que é chamado de doctype. Você escreve assim, colchete aberto, exclamação, doctype, espaço HTML, colchete. Uma sintaxe simples requer que um doctype seja declarado para que, quando um navegador se deparar como arquivo, ele terá certeza de renderizar corretamente no modo de padrões apropriado. Então, você vai querer incluir este doctype no topo de cada uma de suas páginas. Aqui está a boa notícia. Em HTML5, introduzimos este novo tipo de doctype, que é o que vemos aqui e é realmente curto e doce. Se você der uma olhada em como as coisas costumavam ser, costumava ser um pouco mais louco. Aqui estão alguns exemplos de como os doctypes se pareciam no passado. Você verá um aqui e, em seguida, descendo, aqui estão alguns outros exemplos. Você pode ver que costumava ser muito mais texto do que o que estamos escrevendo agora, mas agora podemos sair impunes escrevendo apenas esta linha. Então, quando um navegador se deparar com esse arquivo, ele verá esse doctype e saberá que tipo de HTML você está servindo. Em seguida, é o nosso elemento html. O elemento html representa a raiz do nosso documento HTML. Como muitos de nossos outros elementos, ele também tem uma tag de fechamento. Então, eu vou escrever isso agora mesmo, para que eu não possa fechá-lo mais tarde. Depois de abrir uma tag, é recomendável fechá-la, para que você não esqueça e deixe o texto aberto. O doctype é um exemplo de uma de nossas tags autônomas, onde ele não precisa de uma tag de fechamento. O elemento HTML deve sempre ter um atributo com ele também. Esse atributo é o atributo lang. Os atributos lang especifica a linguagem primária para o conteúdo do nosso elemento. Por exemplo, podemos fazer lang="pt”. Isso significa que vamos servir inglês, você pode fazer coisas como fr para francês e muito mais. Se você precisa de uma lista de outros códigos de país, é uma maneira simples de pesquisa do Google para pesquisar códigos de país HTML e você terá uma lista completa de possibilidades. Após o nosso elemento HTML, vamos ter com o elemento cabeça. Novamente, eu vou ir em frente e fechar isso, então eu me lembro de abrir e fechar o elemento principal. O elemento principal vai representar uma coleção de metadados para o nosso documento. Coisas como títulos de páginas ou referências de folhas de estilo, é isso que vai entrar na nossa cabeça. As coisas que escrevemos na cabeça do nosso documento não serão vistas no cromo do nosso navegador. Depois disso, teremos o elemento body e que tem uma tag body de abertura e uma tag body de fechamento. O corpo contém o conteúdo principal do nosso documento, então o que quer que escrevamos no corpo seja isso ou coisas legíveis reais como esta é uma frase, isso é o que vai aparecer dentro do nosso navegador web. Qualquer coisa dentro do corpo será impresso na página. Uma vez que você cria documentos como este, a boa notícia é que você pode tipo de salvá-lo como um shell em seu computador local e usar isso como basicamente uma cópia e colar e tê-lo como um shell reutilizável para todos os seus documentos HTML. Neste ponto, nosso arquivo ainda não é salvo e eu sou um grande crente de salvar muitas vezes. Existem algumas maneiras diferentes de salvar seu documento. Um deles é ir para Arquivo, Salvar. A outra maneira, como você pode ver aqui no lado direito, que mostra são atalhos para Salvar. Então, Command S em um Mac ou Control S em um PC salvará seu documento. Você vai fazer isso muitas vezes. Não há nada que cheira mais do que quando você está escrevendo um monte de código e, de repente algo acontece como um computador falha ou um gato passa pelo teclado e exclui tudo. Portanto, as práticas recomendadas são salvar seus arquivos com frequência. Então, eu vou em frente e salvar. Agora, vou ser solicitado a salvá-lo como um nome de arquivo específico porque ainda não o salvamos. Eu vou navegar para a minha pasta jon-arbuckle-site que está na minha área de trabalho e bem aqui, eu vou mudar isso, certifique-se de ir em frente e mudar isso. Ele vai para o padrão para a primeira linha do seu documento, que é que doctype html. Não queremos salvá-lo assim. Então, você quer mudar isso, para que ele diga class.html. The.html é realmente importante porque é isso que vai definir isso como um arquivo HTML. Assim como temos a.mp3 para arquivo de música or.psd para arquivo photoshop or.txt para texto, .html diz que o que estamos escrevendo aqui é um arquivo HTML. Então, vou clicar em Salvar e estamos todos salvos. Agora, você pode ver outra coisa meio louca aconteceu. De repente, temos este rosa fluorescente e é sempre um cenário incrível que eu tenho que faz as coisas cores da AB quando eu salvo coisas. O que isso é, é um tema em Texto Sublime e isso é o que chamamos de Destaque de Sintaxe. Então, como falamos antes, há uma pequena diferença entre um editor de HTML e um editor de texto. Neste editor HTML, o que ele faz é reconhecer isso como arquivo a.html porque é assim que nós o salvamos. Então, ele começará a destacar elementos e nomes de tags que reconhece. Então, ele sabe que se html cabeça e corpo são coisas comuns e ele sabe, que é um elemento, então ele se torna rosa. Todos os atributos agora estarão neste verde brilhante e quaisquer valores de atributo estão nesta cor amarela. Se estas cores fluorescentes brilhantes não são sua xícara de chá, você também pode mudar isso em Sublime Text. Eles têm uma seção de Preferências, em Esquema de Cores e você pode ir em frente e verificar alguns diferentes que eles têm. Talvez esse seja mais do seu estilo. Eu sou realmente um grande fã deste rosa brilhante, isso me faz feliz, então eu vou deixar assim. Mas se quiser outra coisa, fique à vontade para verificar isso. Então, agora estamos todos definidos com o nosso arquivo salvo e este é o shell para o resto do HTML que estaremos escrevendo. Em e no próximo vídeo, vamos dar uma olhada em nosso elemento principal. 9. Elemento head: Então, uma das primeiras coisas que eu vou documentar é o nosso elemento head e o elemento head representa uma coleção de metadados para o documento que estamos escrevendo. A coisa que colocamos na cabeça não será vista no navegador Chrome, mas eles fornecem informações adicionais ao nosso documento. Uma das coisas que podemos colocar dentro do elemento principal é o nosso título. Então, começamos a escrever o título e o título desta página será o Portfólio de John Arbuckle. Então, como a maioria dos nossos elementos, temos que fechá-lo. Então, para dizer que este título acabou, vamos em frente e fechamos a tag. Então, qualquer coisa entre a tag de título, este conteúdo será o nosso título. Vocês devem ter notado que algo começou a acontecer quando escrevi isto, certo? Se eu apagar isso e começar com minha tag de abertura, de repente eu recebo esse popup agora. Isso começou a acontecer depois que eu salvei como a.html. Uma das outras coisas que os editores HTML têm é a capacidade de oferecer auto-completar. O programa começa a procurar maneiras que podemos preencher este texto e ele está procurando um elemento. Então, se eu começar a digitar t, ele vai listar todos os elementos que ele poderia escrever aqui no início com um t. Neste caso, uma vez que eu comecei a escrever título, você pode ver título aparece. Se eu apertar “Enter” agora, ele irá preencher automaticamente isso para mim e também fechar o final da tag. Auto-completar é um recurso super útil. Ele salva você digitando e também se lembra de fechar tags para você quando você pode esquecer. Às vezes, pode ser um pouco difícil ter isso acontecendo enquanto você está aprendendo algo pela primeira vez, então, se você não quiser completar automaticamente, você pode desativar isso. Eu vou desligá-lo por enquanto e eu vou fazer isso indo para as minhas preferências. Sublime Text tem uma coisa chamada User Settings e aqui, o seu provavelmente está em branco agora. Estas são algumas configurações que eu adicionei à mente. O que você vai querer fazer é adicionar este texto. Então, o que você vai fazer é digitar “auto_complete”: e em vez de verdadeiro, vamos escrever falso e então eu vou salvar isso. Você também pode definir coisas como seu esquema de cores está aqui, seu tamanho de fonte está aqui, word rap, há um monte de preferências que você pode definir para atender às suas necessidades de texto Sublime. Se você está interessado em ver o que mais você pode fazer, você só quer ir, não google isso, apenas google “sublime text 2 preferências”. Clique sobre a documentação e eles têm um monte de informações sobre suas configurações. Se há algo que você está procurando, como dizer que você não poderia se lembrar qual era a preferência pelo preenchimento automático, você pode simplesmente pesquisar “sublime text 2 auto complete”, aqui vamos nós. Procure por isso, clique sobre isso e agora você vai ver aqui, ele vai dizer-lhe como desativar auto complete. A coisa boa sobre isso é que uma vez que você sabe o que procurar, ele torna seu googling muito mais fácil. Então, sempre que você estiver se perguntando se o texto sublime pode fazê-lo, basta fazer uma busca rápida por “texto sublime 2" e, em seguida, seja o que for que você está procurando. Não se esqueça de salvar suas preferências quando terminar com elas. Arquivo, Salvar ou Ctrl+S ou comando S para o atalho. Agora, quando eu voltar aqui e começar a digitar, auto complete agora está desligado e então agora cabe a mim lembrar o que fazer. Então, vamos dar uma olhada nisso em ação e vamos voltar para o meu site em JennLukas.com, e se eu ir em frente e ver a fonte para isso, então Developer, View Source, você pode ver que essa coisa deve começar a parecer um pouco mais familiar. Você vai ver que temos este doctype html e, em seguida, temos o elemento cabeça eo elemento cabeça de fechamento aqui em baixo. Então, estas são todas as coisas que eu coloquei dentro do elemento principal do meu site. Você vai ver que temos esse título lá. Então, título Jenn Lukas Front-end Development, e como dissemos quando voltamos aqui, isso não está escrito em qualquer lugar até esta página mas onde está escrito está nesta área de aba. Você verá Jenn Lukas Front-end Development, esse valor é recebido da nossa tag título e, em seguida, exibido na guia. O outro lugar em que nossa tag de título vem é nos resultados da pesquisa. Então, se eu vou procurar Jonn Lukas, você verá Jenn Lukas Front-end Development. Esse valor está sendo capturado da tag de título do HTML dessa página. Assim, os resultados da sua pesquisa no título da sua guia dependerão dessa tag de título como sendo preenchida. Se voltarmos para a fonte, você verá que há algo mais aqui e esse meta charset é igual a UTF-8. Essa meta tag é usada junto com o atributo charset para definir a codificação de caracteres usada pelo documento. Então, vamos querer adicionar isso aos nossos sites também. codificação de caracteres define o tipo de caracteres que estamos usando em nossas palavras dentro de nosso documento HTML. UTF-8 é a maneira mais utilizada de representar texto unicode em páginas web. Se você quiser saber mais sobre isso, eu recomendo verificar codificações de caracteres para iniciantes em w3.org. Ele vai realmente em profundidade sobre o tipo de coisas que codificação de caracteres manipula e como isso pode afetar suas páginas. Se você acha que não precisa de tantos detalhes, lembre-se de incluí-los em todas as suas páginas. A meta tag com o atributo charset e a tag title são as duas coisas necessárias que você coloca em seu elemento head. Mas há outras coisas que você pode colocar lá também. Se voltarmos a olhar para a fonte de jennlukas.com, você verá que há definitivamente alguns outros dados aqui. Então, uma coisa que temos é outra meta tag, neste caso o atributo aqui é nome e o valor é descrição. Na descrição, temos outro conteúdo de atributo. Conteúdo diz Desenvolvedores front-end, orador, escritor e consultoria. Você notará que isso aparece nos meus resultados do Google. Desenvolvedor front-end, orador, escritor e consultoria. Então, esse é um lugar onde sua meta-descrição pode aparecer. A meta tag com o nome do atributo e o valor das palavras-chave é emparelhada com o conteúdo. Este conteúdo é uma lista de valores separados por vírgulas para palavras-chave que você espera que ajudem a indexação do mecanismo de pesquisa. Qualquer um de vocês que já fez qualquer SEO pode saber que Google tem uma fórmula muito secreta para que ninguém exatamente certeza de quanto isso ajuda o resultado do seu motor de busca, mas certamente não pode machucar. Então, lá estão as palavras-chave meta nome. O viewport meta nome começa a entrar em coisas que precisamos para design responsivo e o tamanho da tela quando carregado em outros dispositivos. O próximo que vemos aqui é a tag link e você verá ícone de atalho com este image.ico e favicon.ico é um link para o nosso favicon. O favicon é este pequeno avatar que aparece nas abas de suas páginas. Então, o Google tem um aqui, este é o favicon para o Google. Aqui está o da Jenn Lukas. Se eu fui para um site como cabeça de peixe cão, você vai ver que eles têm um favicon aqui também como talvez é como um copo de cerveja pouco e até mesmo em um site como jello.com, você vai ver um lá. Se você nunca especificar seu favicon, você só vai obter aquele pequeno ícone de documento padrão que veremos um pouco mais tarde. Você também pode especificar itens como ícones do Apple Touch e isso é para quando você estiver em um dispositivo móvel Apple e salvar uma página da Web em seu telefone, é isso que ele aparecerá para o ícone lá. Assim, você pode ver que, embora ele não seja exatamente exibido dentro do nosso navegador normal Chrome, os metadados do nosso documento podem fornecer muitas coisas úteis. No próximo vídeo, vamos dar uma olhada nas coisas que aparecem no meio da nossa página e isso está em nosso elemento corporal. 10. Elemento body: No último vídeo, falamos sobre nosso elemento principal e o que não aparece em nossa página. Agora, vamos falar sobre o que faz, isso é qualquer coisa que escrevemos dentro dos elementos do corpo. Então, qualquer coisa que digitamos entre nossa tag corpo de abertura e fechamento aparecerá em nossas páginas. Se olharmos para trás em johnlucas.com, você verá qualquer coisa que esteja na etiqueta de corpo é impresso dentro da área do navegador. Vamos dar uma olhada em outro site. Este é o superest.com. Vamos usar esse elemento inspetor de novo. Quando olhamos aqui para baixo, agora podemos ver, também vemos o corpo e a cabeça. Então, se eu recolher isso por um minuto, e olhar para o elemento principal, veremos algumas coisas que aprendemos no último vídeo, como o título e as metatags. Então, vemos quando passamos o mouse sobre o corpo, toda a seção aqui foi destacada em azul, porque essa é toda a informação dentro do nosso elemento corporal. Se eu abrisse isso para poder ver o que está dentro, tudo no corpo está sendo impresso na página. Então, novamente, lembre-se que podemos inspecionar os elementos, e ver que todas essas coisas vivem dentro do corpo, e depois são impressas na página. Qualquer coisa no elemento cabeça não é impresso nesta página. Então, qualquer coisa que escrevemos em nosso contorno de conteúdo, vamos querer escrever dentro do nosso elemento de corpo porque é isso que será impresso na página. Então, vamos em frente e abrir isso de volta. Então, aqui está o contorno do conteúdo novamente. Sabemos que queremos que Andres Arbuckle, um ilustrador freelance e autor apareça em nossa página. Então, vou copiá-los daqui. Você pode clicar em Editar, Copiar ou o atalho para os teclados é o comando C em um Mac ou controlar C em um PC. Então, eu vou copiar, e eu vou voltar aqui, e você faz Editar, Colar. O atalho para Colar é o controle V ou o comando V, então cole. Parece que esqueci o “eu “, então vamos escrever isso lá. Sabemos que qualquer outra coisa que queremos em nossa página, é aqui que vamos escrevê-lo. Então, eu vou salvar isso agora, Arquivo, Salvar. Em seguida, em nosso próximo vídeo, veremos como isso fica assim que abrirmos em nosso navegador. 11. Criando e visualizando a nossa primeira página: Nós temos algum texto em nossa página, e vamos continuar e salvar este documento novamente. Você pode dizer que um arquivo não é seguro se na guia, você vê este pequeno círculo aqui em cima. Se eu ir em frente e salvar o arquivo, esse círculo mudará para o X. Então, class.HTML é salvo, mas agora queremos ir em frente e visualizá-lo em um navegador. É uma boa prática examinar nossos arquivos em um navegador com frequência para garantir que as coisas fiquem como esperamos. Então, eu vou pressionar o class.HTML no meu computador, que está na minha pasta jon-arbuckle-site e class.HTML, e clicar duas vezes nele para abrir. Então, aqui está, aberto no Chrome. Nossa primeira página HTML, ou pelo menos o início dela. Então, este é class.HTML, e agora vemos, “Eu sou Jon Arbuckle, um ilustrador freelance e autor”, dentro do nosso navegador. Qualquer coisa na etiqueta do corpo está sendo impressa aqui. Temos o nosso título aqui, e podemos ver a fonte, e ver tudo o que temos escrito dentro do Sublime Text. Então, agora eu quero um pouco mais de cópia nesta página. Quero ver outras coisas que podemos colocar dentro da etiqueta do corpo. Às vezes, talvez você não tenha certeza de todos os seus direitos autorais longe, e assim algumas pessoas usam o que é chamado de Lorem Ipsum. Lorem Ipsum é basicamente texto de espaço reservado grego para nós usar dentro do nosso documento para imprimir alguns textos sem você ter que escrever coisas como esta. É um pouco mais legível. Então, há um monte de Lorem Ipsum diferentes por aí. Se dermos uma olhada em geradores Lorem Ipsum, então resultado superior é 56 único gerador Lorem Ipsum. Então, como você pode ver, há um monte deles, 101. Então, há um monte de coisas na internet. Vamos dar uma olhada em alguns dos que temos, Cupcake Ipsum, essa é uma boa. Picksum, Lorizzle, Samuel L. Ipsum, Fillerati, Bacon Ipsum, Atum Ipsum, Veggie Ipsum e Queijo. Então, eu vendi o Cheese Ipsum, então vamos com isso por enquanto. Então, aqui está Cheese Ipsum. Todo mundo adora um pouco de queijo, não é verdade ou o quê? Vamos dizer quantos parágrafos, e vamos clicar em Gerar queijo. Então, você verá aqui. Temos alguma cópia e algum texto que podemos copiar e colar em nosso documento. Isso só nos dará algum texto para usar. Então, nós não ficamos presos em escrever textos, e então apenas colocar nossos direitos autorais lá fora para ver como ele fica. Então, vou salvar isso de novo. Eu vou voltar para a guia do navegador, e então eu posso atualizar a página clicando aqui, ou Comando, ou Controle R. Agora, como você pode ver, toda a cópia que eu escrevi agora está impressa na página. Algo parece um pouco estranho, certo? Tudo aqui está misturado. Se eu expandir e recolher a janela do navegador, você pode ver que basicamente o texto está se encaixando em qualquer espaço que ele tem. Enquanto que quando olhamos para ele em nosso editor de HTML, ele é formatado, de modo que é muito mais fácil de ler com espaços. É muito importante ressaltar que dentro do HTML, ele não lê espaços em branco. O único espaço em branco que será lido é um espaço, que é o espaço que precisamos para separar palavras. Mas, não importa se você faz isso, e tem um monte de espaços lá. Quando eu salvar isso e atualizar, ele ainda vai ter apenas um espaço aqui. espaço em branco será ignorado pelo navegador e essa é outra razão pela qual usamos a formatação HTML para separar nossos elementos semânticos. Então, vamos fazer isso com a cópia que temos. Bem, primeiro, vamos nos livrar do nosso [inaudível] não desenhado por enquanto, e apenas ter um rumo para todo esse queijo. Então, Lista de queijos que eu amo, este vai ser o título para a nossa página. Aprendemos um pouco sobre um exemplo de título em nosso vídeo anterior, e esse era o elemento H1. O elemento H1 é o cabeçalho mais importante na página, e você escrevê-lo fazendo um colchete aberto, H1, colchete fechado. Então, vá até o final da frase, e vamos querer colocar a etiqueta de fechamento. Então,, e agora temos um cabeçalho para a nossa página. Seguindo em frente, estes são um monte de textos de parágrafo. Eu sei que antes, demos uma olhada em algo que pode marcar parágrafos. Nós olhamos brevemente para que você não se lembre do que era. O que acontece se você puder lembrar o que era? E se pensarmos que talvez seja parágrafo, mas não temos certeza, ou foi chamado de “Pará”? Eu não tenho certeza. Uma das coisas que eu gosto de fazer é muitas vezes consultar um site de referência. Um dos sites que eu realmente gosto de usar é um site chamado htmldog.com. Não, não está cheio de um monte de cachorros bonitos adoráveis, apenas um no logotipo, mas é um site de referência muito bom. Eu sugiro fortemente marcar isso e voltar para ele, basta olhar para as tags comuns que você vai usar. Você verá no lado esquerdo esta seção de referências e, em seguida, este link aqui para tags HTML. Então, vamos em frente e verificar isso. O que podemos fazer é então digitalizar a página para ver quais elementos HTML estão disponíveis para nós e como combinar o conteúdo que temos. Então, há alguma estrutura, e nós já vimos alguns desses antes como o HTML, a cabeça, o corpo. Todos devem ser familiares ou DOCTYPE e meta. Nós vimos isso, isso está sob meta-informação. Mas, o que queremos agora são elementos que são usados para texto. Você verá que o primeiro elemento listado aqui é uma tag P. Isso provavelmente deve despertar a memória de mais cedo, onde P tag é como fazemos referência a um parágrafo. No caso de você esquecer, basta clicar nele, e então você verá a tag HTML P, e ele nos permite saber que é para um parágrafo. Então, mais tarde, eles nos darão um exemplo aqui em baixo. A coisa incrível sobre escrever HTML é que você costuma escrever história sobre um computador. Eu vou supor que você poderia fazer isso em um pedaço de papel uma máquina de escrever, mas se você quiser processo, você vai querer isso dentro do computador. O que é legal sobre isso é basicamente, desde que você tenha uma conexão com a internet, então o Google está ao seu alcance. Então, você é capaz de verificar o tempo todo para ter certeza de que você está lembrando a sintaxe adequada para escrever coisas. Eventualmente, tenho certeza que você memoriza tudo isso. Mas não é uma competição, e não é nada que você tem que memorizar logo no início, porque você tem as ferramentas imediatamente para ser capaz de procurar qualquer coisa que você pode esquecer. Não se preocupe muito em pesquisar no Google, ninguém vai saber, e mesmo que soubéssemos, ninguém iria julgar. Então, a qualquer momento que talvez você esteja em uma perda para o que a tag é, basta vir para htmldoc.com ou você pode fazer uma pesquisa do Google como tag de parágrafo html, e imediatamente, você pode começar a vê-lo dentro dos resultados da pesquisa de seu título tags. Então, agora que sabemos que escrevemos uma tag de parágrafo apenas com a letra P, vamos em frente e mudar isso. Vamos adicionar uma tag de parágrafo em torno de todos estes parágrafos de texto: <p> tag, </p> tag, <p> tag, </p> tag. Vamos fazer isso por enquanto. Eu posso excluir isso para este exemplo, e agora, nós temos isso. Vamos guardar três parágrafos e um título. Vamos atualizar e ver como isso parece agora. Ei, olhe para isso. Isso é muito mais fácil de ler, certo? Então, agora você verá assim que adicionamos esses elementos ao redor de nosso texto, de repente, a formatação começou a acontecer. Estes pedaços de texto tornaram-se separados uns dos outros. Você também notará que o nível de cabeçalho um tornou-se mais ousado e maior do que o resto do texto na página. Então, por padrão, um navegador se deparará em H1, e dirá: “Isso é importante. Vamos torná-lo em negrito e maior do que outros textos.” Para o texto parágrafo vai ser um tamanho legível relativamente normal. Agora, à medida que expandimos e colapsarmos o navegador, ele ainda caberá em linha da esquerda para a direita, mas temos essas quebras de linha entre cada uma de nossas tags de parágrafo. Essas quebras acontecem depois do que chamamos de elementos de bloco. Coisas como H1 e P, isso é o que chamamos de elemento de bloco. O que isso significa essencialmente é que eles ocupam seu próprio pedaço de linha, e então haverá um espaço depois de outro elemento. Vamos dar uma olhada em elementos de nível de bloco mais em profundidade um pouco mais tarde. Mas, por enquanto, vamos terminar esta lição criando este novo arquivo HTML. Adicionando estrutura desnecessária à página. Vá em frente e adicione alguns metadados se quiser tentar adicionar algumas dessas outras coisas, como palavras-chave ou descrições. Vá em frente, e faça isso também, em seguida, adicione alguns elementos HTML ao corpo. Tente adicionar um título, talvez mais alguns parágrafos, e depois que terminar com isso, salve-o e visualize-o dentro de um navegador. Volte para a lição três e começaremos a procurar mais detalhadamente nos cabeçalhos e outros elementos das nossas páginas. 12. Converter o nosso conteúdo em marcação HTML: Aprendemos um pouco sobre o que precisamos para escrever a estrutura do documento para nossas páginas HTML, e aprendemos um pouco sobre a tag de cabeçalho e a tag de parágrafo. Em seguida, vamos aprender a combinar tipos de conteúdo com nossos elementos HTML. Então, fizemos um esboço de conteúdo, e o que queremos fazer é olhar para isso, e tipo de ver quais elementos HTML podemos usar para obter o conteúdo que temos em nossa página. Então, por exemplo, vamos dar uma olhada em nossa página inicial. Sabemos que vamos querer chamá-la de página inicial, e a página inicial provavelmente aparecerá dentro da nossa etiqueta de título. Às vezes, o que eu gosto de fazer é apenas imprimir um pedaço de papel e bem ao lado dele, que elemento vai estar em HTML. Às vezes, quando você faz isso, é preciso um pouco de pressão para olhar para ele com um editor de HTML, mas fazer o que funciona para você. A próxima coisa na nossa página, temos o Conteúdo de Herói. Temos o título que diz: “Eu sou Jon Arbuckle, um ilustrador freelance e autor”, e sabemos que esse será o cabeçalho principal da nossa página. Em nossa página inicial, isso vai dizer a todos o que Jon faz, e por que esse site existe. Então, eu considero que o cabeçalho mais importante em nossa página. Então, vamos chamar isso de H1, como o que vimos antes. Nós também vamos ter uma grande imagem de uma banda desenhada. Então, vamos usar a tag de imagem para isso, que é img. A próxima seção é a banda desenhada do Jon. Então, vamos ter um título e uma descrição para isso, certo? Então, talvez nesta descrição, provavelmente teremos um título. Neste caso, vai ser o segundo título mais importante porque não é o mais importante, então isso vai ser um h2, e nós vamos ter texto. Então, vai ser algumas tags de parágrafo. Vamos ter um link para saber mais sobre os quadrinhos. Ainda não olhamos os links. Então, se eu não tenho certeza sobre o que seria um link, eu agora quero voltar para o site HTML doc, e ver se eu posso encontrar qualquer coisa que pareça ser o elemento para fazer um link. Então, olhando para este site de referência, lembra? Nós temos a meta informação, algum texto, e então felizmente eu vejo links aqui, e estes realmente não fazem muito sentido para mim agora. Mas se eu clicar nesta tag A, vejo tags HTML A, Âncora. Principalmente, use o texto do hiperlink. O link feito para outra página, ou parte de uma página, ou qualquer outro local na web. Ótimo, é exatamente o que estou procurando. Então, ainda não sei exatamente o que é uma tag A, mas deixe-me marcar por agora que isso vai ser um A. Não se preocupe se parecer confuso, vamos aprofundar o que isso significa em vídeos posteriores. Então, para a próxima seção, isso deve parecer um pouco familiar na imagem. Já sabemos o que é isso. O nome do CD, provavelmente vai ser um título também. Então, também vamos chamá-lo de H2 por enquanto, e outra coisa que acabamos de aprender. Então, vamos dizer, uma conta do Twitter de Jon vai ser vinculada à sua página do Twitter, que também será um A para um link. Um depoimento de cliente. Então, depoimento de clientes, também estou um pouco inseguro sobre isso. Vamos voltar para este site de documentos HTML, e verificar isso, e eu sei que não é uma lista. Não é uma imagem de um objeto. Não é uma cauda em um formulário, mas é texto. Vamos voltar para a seção de texto. P, H1, Forte, em, abbr. Isso não parece certo. Espere, olhe, isso parece o que estamos procurando, certo? Às vezes, em inglês simples, ele vai coincidir exatamente com o que estamos procurando por um HTML. Blockquote - uma cotação grande. Ei, perfeito. Então, por enquanto, vou escrever blockquote. Vamos cobrir isso um pouco mais tarde. O logotipo vai ser uma imagem. Digamos, a navegação é um pouco complicada. Sabemos que são ligações. Então, definitivamente precisamos de um A, mas vamos voltar a isso mais tarde, e então as informações de direitos autorais serão um parágrafo. Então, isso está definitivamente no ar, e vamos cobri-lo, mas temos nossos elementos básicos para o conteúdo que descrevemos. Então, vamos rever esses elementos e o que eles realmente significam em nossos próximos vídeos, começando com títulos. 13. Elementos de cabeçalho (H1-H6): Até agora, demos uma olhada em um tipo de direção e esse é o H1. Sabemos que o H1 é o título mais importante da página e só pode haver um por página. Sabemos que o H1 é o título mais importante na página e realmente deve haver apenas um por página. Existem outros níveis de títulos, também porque provavelmente vamos ter mais de um nível de cabeçalho. Há H1 a H6, isso significa que há um H2, um H3, um H4, um H5. É quando eu começo a ficar paranóico sobre o quão alto eu digito e um H6. Desculpe. Aqui estão nossos níveis de direção, H1 até H6. H1 é o mais importante, H6 é menos importante. Não há H7. Eu não tenho certeza de quem uma vez sentou em uma sala e decidiu que eles deveriam subir para seis níveis de títulos, mas alguém fez. Então, H7 não existe, mas H1 a H6 existe. Vamos examinar um pouco mais sobre os títulos. Então, se abrirmos um arquivo de bloco de notas, vamos falar um pouco mais sobre cabeçalhos. Pense em títulos como você faria um esboço de um trabalho escolar ou um esboço para um currículo. Digamos que temos um currículo. Então, vamos fazer o currículo de Jon Arbuckle. Qual é a coisa mais importante que está no currículo de Jon Arbuckle? Bem, o nome de Jon Arbuckle porque sem ele como você saberia de quem era o currículo. Então, o título mais importante ou o nosso H1 seria Jon Arbuckle. Depois disso, o que mais vai em currículos? Bem, que tal o objetivo dele? Então, estamos de ponta a ponta porque esse é o próximo nível abaixo e vamos dizer, o objetivo, e isso vai ser um H2. Vamos colocar isso entre parênteses depois, um pouco mais fácil de ler. O que mais vai em um currículo? Nos objetivos do mesmo nível, provavelmente temos experiência, educação, contato. Estes são todos H2 porque eles são o mesmo nível de importância um do outro e o segundo nível mais importante de título. Sob o objetivo, você provavelmente vai ter alguns textos, então provavelmente não teremos nenhum outro título sob isso. Com experiência, você provavelmente vai querer listar todos os trabalhos que Jon teve. Então, digamos, que Jon trabalhou no The Daily Chronicle e, em seguida, descreveremos depois que as datas em que ele trabalhou lá, suas responsabilidades no trabalho, então Daily Chronicle também é um título. Neste caso, será o nível três. Ele também costumava trabalhar na US Bizarre Weekly e vamos chamar isso de outro H3 porque está no mesmo nível que este outro trabalho no The Daily Chronicle, e também será o caminho para outras coisas como sua descrição do que ele fez no US Bizarre Weekly. Tenho certeza que foi muito bizarro. Em educação, vamos listar onde ele estudou e diremos que ele estudou na Universidade de Indiana e isso é um H3. Depois disso, isso também é um título porque descreveremos o que ele estudou lá, bem como os anos em que esteve lá. Então, para o contato, talvez queiramos ter um título de telefone, então isso é um H3 e um endereço de correspondência também estará em H3. Talvez ele tenha se formado na Universidade de Indiana. Então, precisamos de mais alguns títulos para descrever seus cursos principais. Então, digamos que ele se formou em ilustração e música. Esses serão títulos adicionais por baixo, porque descreverão seus estudos um pouco mais sob isso. Então, esses vão ser H4. Se tivermos mais níveis de direção do que este, é onde nós chegaríamos a H5s e H6 s. Então, talvez sob a música, ele queira descrever todas as aulas que ele fez, isso provavelmente seria estranho colocar em um currículo, mas isso poderia ser um H5. Então, você pode ver que isso é um pouco como os cabeçalhos funcionam. Esboços muito semelhantes que tivemos, então pense neles assim quando estiver criando seus cabeçalhos para sua página. Então, se voltarmos aqui e começarmos a adicionar algum texto, neste caso temos listas de queijos que eu amo. Então, talvez em vez disso vamos mudar isso para, lista de alimentos que eu amo e então eu vou fazer outro título que diz, sobremesas, e eu também vou querer falar sobre lanches. Aquele recebe uma exclamação e aqui eu quero listar as sobremesas que eu gosto e falar um pouco sobre elas. Talvez eu diga, torta de limão e então talvez eu tenha um parágrafo sobre por que eu amo torta de limão. Então, eu amo a KLP porque é muito delicioso. Boa história. Se vamos ter um título, provavelmente queremos outro, então vamos adicionar outra sobremesa. Eu também amo arroz krispy guloseimas e eu tenho um parágrafo. É a melhor maneira de usar manteiga, apenas três ingredientes. Este é o tipo de cópia que escrevo. Então, a mesma coisa vale para lanches. Então, lanches, podemos escrever um pouco sob lanches como purê de batatas. O purê de batatas é um lanche? Provavelmente não. Não é assim que se soletra batatas. Vamos fazer isso direito e talvez em vez disso eu queira fazer batatas e eu vou falar sobre isso. Eu gosto deles purê, Eu gosto deles tater totted, etc Então, como você pode ver, aqui está outro exemplo de como nós usaríamos cabeçalhos em nossa página. Se tivéssemos outro, talvez eu quisesse falar sobre coberturas e eu poderia dizer, coberturas salgadas e então talvez ter um parágrafo descrevendo as coberturas salgadas que eu gosto em batatas fritas, como ketchup, mostarda e então talvez talvez coberturas doces. Eu tenho que confessar para vocês agora, eu realmente nunca como coberturas doces em minhas batatas fritas. Mas digamos que sim, talvez eu queira colocar molho de maçã neles ou talvez eu queira colocar xarope de chocolate nisso. Soa completamente apetitoso. Molho de maçã provavelmente seria muito bom. Ok, então há alguns exemplos dos títulos que temos. Novamente, eu digitei-os agora só para que pudéssemos ver o contorno, mas na verdade eles estão no mesmo nível de nidificação. Então, gostaríamos de colocar isso de volta para fora. Então, eu só vou limpar isso um pouco, e eu vou salvar e então eu quero pré-visualizar esse backup. Então, vamos abrir nosso arquivo class.HTML novamente, pode abrir no navegador e agora você pode ver aqui estão meus títulos e você pode ver que o H1 era o maior, então o H2, então o H3 e então chegamos ao H4, o H5 e o H6. Assim, por padrão, o navegador irá torná-los menores, o cabeçalho de nível inferior deixá-lo ir. Isso é tudo para os títulos agora. Nossa página está parecendo um pouco chata. Então, no próximo vídeo, vamos falar sobre como adicionamos imagens. 14. A tag Image e caminhos de arquivo Absoluto/Relativo: Então, você pode se lembrar quando olhamos para as imagens anteriormente, que as imagens eram um elemento autônomo, que significa que elas não têm uma marca de fechamento. Mas eles têm alguns atributos necessários. Então, para começar, fazemos nosso suporte aberto e, em seguida, para imagem, escrevemos IMG. Em seguida, vamos clicar em espaço e, em seguida, vamos começar a digitar os temas do nosso atributo. Nosso primeiro atributo será a fonte. A fonte vai dizer-nos onde vive a nossa imagem. Então, src=” "e nós vamos preencher isso com o valor de onde o caminho do arquivo é para a nossa imagem. A outra coisa que precisamos é o atributo alt e o alt vai carregar se por algum motivo a imagem não pode carregar ou vai dizer aos leitores de tela o que é a imagem. Então, vamos encontrar uma imagem para usar em nosso site. Eu vou em frente e eu gostaria de colocar uma imagem de uma preguiça porque as preguiças são adoráveis. Então, eu vou em frente e clique sobre as tags de imagem do google image. Não estou à procura da Preguiça dos Goonies, embora goste muito dos Goonies. Estou à procura de um destes pequeninos adoráveis. Então, eu vou encontrar a URL da imagem para isso clicando na imagem vista e, em seguida, quando isso carrega eu vou copiar o URL aqui em cima que termina em ponto JPEG. Isso vai ser o arquivo de imagem para o que eu vou usar dentro da fonte. Então, eu vou selecionar que tudo e fazer cópia de arquivo ou controle C ou comando C. Então, eu vou voltar para Sublime Text 2. Vou encontrar minha tag de imagem e passar para o atributo fonte e, em seguida, no valor, eu vou colar. Então, eu vou colar esse URL que termina em ponto JPEG e que é o caminho para o nosso arquivo de imagem. Um erro comum que eu vi às vezes é colar o URL da imagem fora das aspas duplas e isso não funcionará. Quando você está colando em apenas certifique-se de que ele está entre a citação para que ele funcione como o valor para o atributo. Então, esse valor aqui é o que nos referimos como o caminho absoluto do arquivo. Está a apontar para onde esta imagem vive na Internet. Chamamos isso de nosso caminho absoluto de arquivo porque ele faz a localização absoluta de onde a imagem vive. Então, ele vive em http://static.ddmcdn.com/gif/2-_sloth_in_bowl.jpg e terminando nesse ponto JPEG dizendo: “Se você colocar esse URL em uma janela do navegador, você encontrará essa imagem vivendo lá. Próximo passo, também temos que adicionar ou alt texto que qualquer pessoa que não possa ver a imagem saiba que é preguiça. Yehey, preguiça. Queremos salvar isso e, em seguida, vamos ver como ele fica dentro do nosso navegador. Outra maneira de ver nosso arquivo além de clicar duas vezes é clicando no arquivo aberto de dentro do nosso navegador Chrome. Então, agora temos nosso arquivo de classe aberto e hey, olha! Aí está a nossa preguiça. Nossa página é um pouco mais brilhante e feliz. Mas e se você quiser uma imagem que seja local para o computador e não na Internet? Bem, podemos salvar esta imagem agora mesmo na pasta do nosso site em nossas imagens e usá-la como referência. Ou se você estiver acompanhando os arquivos de classe, você verá que na pasta de imagens já temos sete imagens para escolher. Então, vamos incluir este arbuckle-bio.jpg em nosso site. Então, uma maneira fácil de ver onde nossos arquivos estão localizados é visualizando a barra lateral. Então, em Exibir, Barra Lateral, Mostrar Barra Lateral dentro de Texto Sublime, vamos obter um painel de janela adicional e isso nos permitirá ver quais arquivos estamos trabalhando com. Então, agora vemos class.html e essa é a guia que está aberta. Mas e se quisermos ver os outros arquivos e pastas que estão em nosso site Jon Arbuckle? Podemos fazer isso simplesmente pegando nossa pasta e vamos arrastá-la diretamente para a barra lateral. Então, clique e arraste e agora você verá essas pastas aparecerem conforme ocorreu. Então, vamos ver Jon Arbuckle site e vamos ver class.html e esse é o arquivo que estamos trabalhando aqui. Em seguida, podemos ver facilmente todas as imagens que estão dentro da nossa pasta de imagens. Deixe-me passar por isso mais uma vez com você. Outra maneira que você pode obter a barra lateral aberta em seu texto Sublime é apenas clicando em Arquivo, Abrir e navegando para sua pasta, então Jon Arbuckle site. Em seguida, quando você clicar em Abrir, ele irá mostrar automaticamente a pasta com todos os arquivos. Sublime Text 2 faz essa coisa estranha onde ele abre duas janelas então basta fechar a outra e certifique-se de que você está trabalhando dentro de seus arquivos de classe. Então, agora podemos ver que temos o nosso class.html novamente. Eu vou abrir isso e você vai ver quando eu cliquei duas vezes, ele aparece aqui e na barra lateral. Se eu apenas clicar uma vez, então Sublime Text 2 me dará uma prévia rápida. Mas assim que eu digitar aqui ou clique duas vezes, ele vai realmente abri-lo como uma guia. Então, à medida que eu digito, ele abre o arquivo. Esta é apenas uma maneira que você pode navegar rapidamente através de seus arquivos sem realmente abri-los. Mas, certifique-se de ter clicado duas vezes e ter o class.html novamente aberto. Então, agora vamos adicionar nossa imagem na página. Vamos duplicar a tag de imagem porque queremos salvar nosso exemplo absoluto de caminho de arquivo. Então, novamente vamos escrever img source = "alt=” e, em seguida, fechar nossa tag. Então, sabemos que queremos chegar ao nosso arquivo logo.png que está dentro da nossa pasta de imagens. Mas como exatamente chegamos lá? No nosso exemplo de caminho de arquivo absoluto, tínhamos a URL que terminava em preguiça no ponto de tigela JPEG. Então, sabemos que queremos incluir o tipo de referência de imagem a ele. Então, sabemos que vamos precisar de logo.png aqui com certeza. Então, vamos tentar adicionar esse logo.png porque esse é o nome do nosso arquivo de imagem. Claro, vamos adicionar texto alt, bem assim, vamos chamá-lo logo por enquanto. Então, vamos salvar esse arquivo e ver o que acontece quando o abrimos em nosso navegador. Então, eu atualizei a página e eu vou rolar para baixo e como você pode ver, nós temos a preguiça do nosso caminho de arquivo absoluto, mas aqui com o nosso caminho de arquivo relativo, nada aparecendo. Temos este ícone de imagem quebrada indicando para nós que a imagem não tem o caminho correto do arquivo para ela. Então, passamos o mouse logo.png aqui, nada aparece. Você pode ver se eu fizer a mesma ação em cima do caminho absoluto do arquivo, nós temos uma pequena visualização da imagem preguiça. Mas aqui não temos nada. Então, algo está errado. Então, vamos dar outra olhada em como podemos fazer com que o nosso logo.png apareça. Então, temos que descobrir onde o arquivo é relativo ao nosso arquivo class.html. Aqui estamos no arquivo class.html e este arquivo está na mesma raiz que a pasta de imagem. Então, essencialmente o que temos que fazer é dizer ao navegador que estamos no class.html agora mas precisamos ir para a pasta de imagem e, em seguida, uma vez que estamos dentro da pasta de imagem. Nós vamos estar procurando por um arquivo chamado logo.png. Então, vamos fazer isso digitando IMG porque queremos ir para aquela pasta com imagem e, em seguida, para entrar dentro de uma pasta. Usamos o caractere de barra. Isso diz encontrar a pasta de imagem, em seguida, a barra diz ir dentro dela e, em seguida, dizemos procurar logo.png. Vamos salvar isso, voltar para o nosso navegador e dar uma atualização. Ei, olha ali está o nosso logótipo. Então, é assim que atravessamos nossos caminhos de arquivo e conseguimos colocar nossas imagens relativas ao nosso documento na página. Então, é assim que entramos em uma pasta, mas e se tivermos que voltar e achar um arquivo? Bem, para a próxima parte eu só quero que você acompanhe enquanto eu faço isso e não copie e cole isso em seus arquivos. Mas o que eu vou fazer é fazer uma nova pasta e esta nova pasta vai conter o nosso arquivo class.html. Então, diretamente no texto Sublime, eu posso clicar em Nova pasta e eu vou apenas nomeá-lo classe. Então, agora como você pode ver, temos uma nova pasta de classe em nossa pasta de site Jon Arbuckle. Vou fechar o arquivo com o qual estava trabalhando, abrir minha janela do Finder. Por agora, apenas para mostrar a você, vou arrastar o arquivo class.html para a pasta da classe. Vou reabrir esse arquivo e mostrar o arquivo class.html que agora vive dentro disso. Vamos abrir isto no navegador. Agora, nós rolamos para baixo e você pode ver que nosso caminho de imagem está quebrado novamente. Nosso caminho de imagem está quebrado novamente porque vamos revisitar nossa fonte. Estamos essencialmente à procura de uma pasta de imagem com um arquivo PNG de logotipo dentro dela dentro de nossa pasta de classe. Porque lembre-se que é relativo a onde está o nosso ficheiro. Então, nosso arquivo class.html diz, “Bem, onde está uma pasta de imagens aqui?” E não é porque é um nível acima. Então, precisamos fazer é descobrir como podemos obter a partir de backup HTML classe para a rota da pasta do site Jon Arbuckle e, em seguida, de volta para a pasta de imagem para encontrar o logo.png. Então, podemos fazer isso também dentro do Sublime Text e dentro do nosso arquivo HTML. O que temos que fazer é voltar a um nível. Para subir um nível, nós digitamos ponto barra e isso diz de onde eu sou class.html, subir um nível, em seguida, procurar uma pasta de imagem e, em seguida, encontrar o arquivo logo.png. Então, vamos salvar isso. Volte para um navegador, atualize e veja lá está ele novamente. Nosso caminho absoluto de arquivo está demorando um pouco mais para carregar, mas isso aparecerá momentaneamente. Ei, olha lá está. Então, agora temos ambos os arquivos em nossa página novamente e fizemos isso correto fazendo a barra ponto ponto para ir nível superior e encontrar a imagem correta. Se você foi aninhado algumas pastas profundas, você pode continuar subindo níveis por apenas - você apenas manter digitando ponto barra. Então, agora isso iria subir um, dois, três, quatro níveis se fôssemos quatro pastas de profundidade. Claro que não estamos, então vamos nos livrar disso. Então, é assim que atravessamos nossos arquivos obter caminhos de arquivo relativos. Agora, vamos definir tudo de volta como era e mover nosso arquivo class.html de volta para a raiz para que possamos voltar a como as coisas foram organizadas antes. Quando movo arquivos assim, quero ter certeza de que estou trabalhando nos arquivos certos no Sublime Text. Então, agora ele ainda está olhando para o arquivo class.html que estava em uma pasta de classe que não existe mais. Então, eu quero ter certeza de que eu fecho isso, não salvar e abrir backup do meu arquivo real. Então, é assim que colocamos imagens em nossas páginas com caminhos de arquivo absolutos e relativos. No próximo vídeo, vamos dar uma olhada nos elementos da lista e ver como podemos começar a adicionar diferentes tipos de listas à nossa página. 15. Elementos de lista: Então, em seguida, estamos olhando para List Elements. Eu só vou excluir alguns desses parágrafos para nos dar um pouco mais de espaço e assim uma lista que nós temos, que vimos um pouco antes era a Lista Unorder que nós digitamos por escrito <UL> e, em seguida, vamos ter certeza de fechá-lo por também colocando a tag de fechamento do </UL>. Então, UL é para itens de lista não ordenados e podemos usar lista não ordenada para uma variedade de coisas diferentes. Talvez, se estivéssemos cozinhando uma receita e precisávamos obter ingredientes, Lista Unorder seria ótimo para ingredientes, porque se estamos indo comprar comida, Não importa exatamente a ordem que compramos e contanto que acabamos de obter Tudo na lista. Então, um de nossos exemplos poderia ser algo como o que precisaríamos para assar. Então, digamos que precisamos de algo como farinha, açúcar e pedaços de chocolate. Então, se nós salvarmos isso agora e visualizá-lo em nosso navegador vamos atualizar a página e então vamos ver farinha, açúcar e pedaços de chocolate lá, mas eles estão todos sentados na mesma linha que um do outro. Então, essencialmente eles não estão realmente aparecendo como itens de lista, tanto quanto eles são apenas texto de parágrafo. Sempre que usamos uma Lista Não Ordenada ou qualquer outro tipo de Lista, não podemos simplesmente colocar o contêiner de uma UL. Precisamos também de incluir um elemento LI. O elemento LI significa Item de lista e separa cada item que pertence à lista. Nesse caso, a lista não ordenada. Fazemos isso digitando <Ll> e, novamente, teremos nossa tag de fechamento para um. Vamos cortar este texto uma farinha e vamos colá-lo dentro do LI para comercializar como um item LI. Faremos a mesma coisa pelo açúcar e também cercaremos pedaços de chocolate porque esse é o terceiro item da lista em nossa lista. Vamos nos livrar do espaço aqui e, em seguida, vamos salvar este arquivo novamente e ver agora como isso parece dentro do nosso navegador. Vamos atualizar a página e agora, como você pode ver, isso parece bem diferente. De repente, agora temos uma lista com marcadores de três Itens da lista não solicitados. Assim, farinha, açúcar, pedaços de chocolate e, por padrão, se você estiver usando uma Lista Não Solicitada, o navegador adicionará este ponto ou marcador a cada um dos nossos Itens da Lista. Itens de lista pode conter outros tipos de texto também, além de apenas texto simples, podemos realmente colocar elementos HTML dentro dele. Então, se quiséssemos colocar um monte de textos de parágrafo com dentro de um item da lista, poderíamos. Então, temos uma tag aninhada dentro de nosso LI, aninhada dentro de nossa UL e podemos escrever um parágrafo aqui como comprar farinha de trigo integral e podemos fechar isso e se quisermos isso é HTML totalmente semântico, bem assim você pode ter um par de parágrafos que descrevem cada item da lista. Outra coisa a observar é que você não pode simplesmente colocar um parágrafo dentro de uma UL. Ele sempre tem que ser uma UL seguida por um LI e qualquer outro texto adicional dentro dela, a fim de ter um item de lista válido. Então, vamos colocar nosso texto de volta em como era e lembre-se de salvar porque é importante salvar com frequência, mas e se a ordem importasse. E se não quiséssemos apenas uma Lista Não Ordenada, mas uma Lista Ordenada. Bem, podemos fazer isso com um OL. OLs pareciam exatamente como uma UL, exceto que vamos usar OL, mas dentro teremos Listar Itens novamente. Sempre um OL com LIs aninhadas dentro. Uma das razões pelas quais podemos querer uma Lista Ordenada é se estamos realmente falando sobre as instruções para assar algo. Então, é aí que a ordem das operações é mais importante, então vamos querer usar uma Lista Ordenada para algo como, despeje uma xícara de farinha em uma tigela, misture o açúcar, coma as lascas de chocolate porque este é um Receita realmente legítima. Eu realmente não acho que alguém deve seguir isso em casa, mas vamos fingir que os passos são importantes aqui e assim que seria uma Lista Ordenada. Vamos salvar isso e vamos dar uma olhada em um navegador. Então, você pode ver para uma Lista Ordenada por padrão o navegador, coloca números na frente dele. Então, um, dois, três na frente de cada passo em oposição à lista com marcadores na lista não ordenada. Temos mais um tipo de lista que vamos cobrir e isso é um pouco diferente e essa é a Lista de Definição. Lista de definições é marcada com um DL. entanto, não temos itens de lista dentro deles. Para a lista de definição vamos realmente definir um termo de definição e uma descrição de definição. Então, nosso termo de definição pode ser algo como banana e então nós vamos querer fazer a Descrição de Definição. Então, para banana podemos dizer que a Definição é algo como uma deliciosa fruta amarela e então vamos fechar essa definição fechando-a com uma etiqueta. Vamos adicionar outro termo. Então, se queremos ter vários termos dentro de nossas Listas, então digamos que esta é uma lista de frutas. Nós vamos definir o que é um kiwi com o DT e então nós também temos que dar uma Descrição, então no DD nós vamos escrever algo sobre kiwis então algo como frutas verdes estranhas com fuzz e gosto atraente e, em seguida, vamos fechar essa definição. Eu vou expandir isso um pouco, porque ele estava indo para a próxima linha então nós não tínhamos espaço suficiente e, em seguida, nós temos uma lista de definição final. Então, vamos ver como isso parece dentro do nosso navegador. Nós vamos salvar nosso arquivo e depois vamos atualizar e aqui você pode ver que é um pouco diferente. Em nossa Lista de Definição, nosso termo é à esquerda e, em seguida, a Descrição de Definição é recuada para a direita. Então, estes são os padrões do navegador para mostrar uma Lista de definições dentro da tela. Parece que eu não sei soletrar delicioso, então vamos consertar isso e com isso nossa Lista de Definição está pronta. Na próxima lição, vamos dar uma olhada no que faz da Internet uma das melhores coisas que existe e que é Links. Então, volte para o próximo vídeo. 16. Links: Até agora, nós realmente tivemos apenas conteúdo estático em uma página, mas o que torna o HTML diferente de outras linguagens de marcação como SGML é o recurso para hipertexto e documentos interativos discretos. Um link é uma conexão de uma página para outra e eles são super incríveis. Então, como quando estamos assistindo um vídeo do YouTube e ele termina, e é como, você assistiu este lindo vídeo de gato aqui está um link para outro vídeo bonito gato e você é como, isso é incrível ou quando você escreve uma nova história e você clica em um link para Outra nova história. Links são como nos contornamos. Então, vamos falar um pouco sobre como fazemos links. Link essencialmente tem duas extremidades; uma âncora e, em seguida, também tem uma direção. Então, como escrevemos uma tag link é essencialmente estamos escrevendo uma tag âncora. Então, vamos rolar para baixo e encontrar algum espaço, e a fim de escrever nossa tag âncora, vamos escrever A para âncora e, em seguida, a próxima parte que é super importante é o atributo href. O atributo href é a direção para onde queremos que o link vá. O valor para isso é essencialmente a fonte da URL que queremos que nossos visitantes visitem depois de clicarem neste link. Então, dentro você pode escrever algum texto como “clique aqui” e, em seguida, vamos fechar nossa tag âncora com o fechamento A. Dentro de nosso href, vamos colocar esse URL de onde a página deve ir. Isso pode ser uma página em nosso site ou pode ser uma página externa, então talvez algo como cuteoverload.com é para onde queremos enviar nossos visitantes. Então, vamos salvar isso e ver como isso parece dentro de nossa página. Então, vamos dar uma atualização antiga e agora podemos ver que temos um link “clique aqui”, então por que não? Vamos clicar aqui. Então, eu vou clicar nesse link e quando eu fizer isso, eu vou estar levando para cuteoverload.com e eu posso ver rapidamente que essa foi uma decisão muito inteligente porque olhar para todo o bonito que está nesta página. É uma cobaia Merino? Isso é muito bom. Olha para aquele leãozinho. Isso é um gato leão? Eu não sei o que é isso, mas está comendo uma girafa e eu gosto muito disso e olhe para o elefante. Ok, agora estou oficialmente me distraindo, então vamos voltar para nossas tags de link. Então, há o nosso clique aqui tag link e eu devo dizer que clique aqui é um texto link terrível para ter. É terrível porque clique aqui quero dizer que eu cometi esse erro na internet antes, certo? Então, quando estamos escrevendo descritores de link queremos ter certeza de que é um texto mais claro. Então algo como, “ver animais adoráveis”, e então eu sei que quando eu clicar nesse link eu vou ser levado para animais adoráveis. Então, este é um texto de link muito melhor que irá apontar para uma sobrecarga fofa e torná-lo mais claro para seus visitantes para onde eles vão quando eles clicarem nesse link. Isso encerra nossas âncoras. Então, vamos dar uma olhada nas citações de blocos em nosso próximo vídeo. 17. Blockquote: Em nosso esboço de conteúdo, falamos sobre incluir uma citação de um dos clientes de Jon. Para fazer isso, vamos usar o elemento blockquote. O elemento blockquote representa uma seção codificada de texto. Então, vamos encontrar algum espaço para colocar isso. Fazemos isso escrevendo colchete aberto, livro de bloco, colchete fechado, e então, é claro, temos que fechar nossa tag. Então, vamos colocar uma citação aqui. Então, eu vou colocar uma citação aqui de um dos meus letristas favoritos e vou escrever, “Acorde de manhã, sentindo-se como P Diddy.” Somente blockquotes realmente profundos estão indo para o nosso site hoje, pessoal. Então, essencialmente, quando olhamos para este texto, não é apenas texto simples. Este é, na verdade, um parágrafo porque Kesha só escreve parágrafos muito inteligentes em suas letras. Então, vamos cercar nosso texto por um parágrafo. Então, agora nosso parágrafo está aninhado dentro do nosso blockquote. Vamos visualizar isso no navegador, e você verá aqui. Aqui está o nosso blockquote e por padrão do navegador, ele vai ser recuado do lado esquerdo da nossa página para representar que ele é um pedaço de texto citado. Um blockquote também é conhecido como um elemento de bloco. Até agora, temos realmente usado um monte de elementos de bloco em nossa página, e elementos de bloco que você pode dizer pela quebra de linha dura após cada elemento, modo que é esse espaço em branco entre os nossos elementos. No próximo vídeo, vamos falar sobre elementos inline, que também serão partes de nossas páginas web. 18. Elementos inline: Até agora, usamos principalmente elementos de nível de bloco, e os elementos de nível de bloco têm um espaço em branco depois de cada vez que eles estão na página. No entanto, textos dentro de um cabeçalho de parágrafo ou outros elementos de nível de bloco também podem ser marcados de várias maneiras. Então, talvez queiramos adicionar ênfase ou destacar texto, bem, podemos fazer isso dentro de coisas como nossos parágrafos ou nossos elementos de bloco em uma página. Então, um exemplo de um elemento inline é o elemento ABBR ou uma abreviação. Então, se você usar uma abreviatura, na verdade já uma vez, e isso é para Q e pie. Nós dissemos: “Eu amo a KLP porque é muito delicioso. Então vamos dizer às pessoas o que é isso que é uma abreviatura dentro do nosso texto. Então, o que podemos fazer com um elemento inline é colocá-lo dentro de um elemento de nível de bloco. Então vamos digitar a tag ABBR e, em seguida, fechá-la com uma tag ABBR de fechamento e que diz que KLP é uma abreviação para que você veja que este elemento embutido está aninhado dentro do parágrafo. Também podemos adicionar um atributo aos nossos elementos ABBR e vamos adicionar o atributo title. O atributo title é diferente da tag title, pois está descrevendo o ABBR e não apresentando esse texto de tabulação em nossa página. Então o título aqui vai ser o que essa abreviatura representa, que é Q, I e pie. Isso diz aos motores de busca e aos leitores de tela o que é KLP, e também quando salvarmos e visualizarmos no navegador você verá que poderemos vê-lo em outra área. Então agora parece praticamente a mesma coisa, mas se pegarmos nosso mouse e passar o mouse sobre, você pode ver que agora temos uma dica de ferramenta que diz o atributo título da nossa tag ABBR que diz, torta de limão chave. Então o ABBR é um elemento inline e você verá que não há quebra de linha dura depois. Ele só aparece em linha com o resto do texto. Então isso é o que é conhecido como um elemento inline. Há outros elementos em linha que podemos usar, HTML nos fornece duas maneiras de ter ênfase em nosso texto. Uma das maneiras é através da tag M. Podemos adicionar ênfase comum, colocando a tag M em torno do bloco de texto. Neste caso, vamos enfatizar a mussarela porque merece ser enfatizada. Outro nível de ênfase é a ênfase forte. Podemos adicionar isso à nossa página usando a tag forte. Então vamos nos divertir fazer como sendo texto forte aqui. Todos esses elementos em linha são aninhados dentro do nosso parágrafo e quando atualizamos e rolamos para baixo para verificar que você pode ver que por padrão ênfase é realmente renderizado em itálico e nossa tag forte é na verdade por parafuso renderizado padrão. Portanto, estes são alguns exemplos dos elementos inline que temos. Há outros elementos em linha lá fora também, lembre-se que você pode verificar o site de documentos HTML e ver o que mais está lá. Então, se dermos uma olhada em nossa seção de texto aqui você pode ver algumas das coisas que acabamos de discutir como a tag forte ou a tag M. Algumas outras coisas aqui são elementos inline, bem como a tag DFN ou a tag delete. Nós também olhamos para outro elemento inline, direita o elemento link. Então, sempre que temos um link em nossa página que é outro elemento inline onde não é um nível de bloco. Podemos adicionar um link dentro do texto do nosso parágrafo, bem como ele não precisa ficar sozinho. Então, se quisermos fazer algo como um sorriso brega um link, podemos fazer isso. Nós apenas colocar nosso cursor direito no texto e, em seguida, em torno do texto que queremos estar no link, nós vamos escrever nossa tag A. Então A href é igual a e então nós vamos ter o nosso valor de atributo, vamos colocar isso em depois, vamos fechar nossa tag primeiro e então vamos voltar e onde quer que isso vá, ele pode ir. Então vamos dizer que queremos sorriso brega 2.2. Vamos fazer cheese.com Eu tenho certeza que é um site adorável que vai fazer você sorrir sobre queijo. Então, é assim que podemos adicionar um link embutido em nosso texto de parágrafo e agora você pode ver o link aparece e não há quebras de linha antes ou depois porque é um elemento embutido. Você também notará que há uma diferença de cor aqui, se os links foram visitados, ele aparece como roxo por padrão e se ainda não clicamos em um link, ele aparece como azul. Então isso encerra links. Em nosso próximo vídeo vamos falar sobre entidades HTML e como adicioná-las à nossa página. 19. Entidades HTML: Às vezes precisamos de mais do que textos simples dentro de nossos documentos HTML. Caracteres reservados em HTML devem ser substituídos por entidades de caracteres. Então, coisas como símbolos de direitos autorais ou marcas registradas, é para isso que usaremos entidades HTML. Vamos ver alguns exemplos disso. Vamos fazer um novo parágrafo aqui para usar como exemplo para entidades. Então, vamos apenas dizer que este é o nosso parágrafo de entidade. E então, vamos tentar adicionar uma entidade. Como você escreve uma entidade em uma página segue a mesma sintaxe. Ele sempre começa com um e comercial, e então nós vamos escrever o nome da entidade. Neste caso, vamos escrever uma cópia para direitos autorais, e depois termina com ponto e vírgula. Então, e comercial, cópia, ponto e vírgula. Vamos salvá-lo, atualizar, e lá você pode ver que há o nosso símbolo de direitos autorais. Essa é uma entidade HTML. É muito legal. E há um monte lá fora que podemos escrever. Podemos fazer outro, se quisermos colocar uma entidade de centavo lá, podemos, e-vírgula centavo comercial. Ou que tal se quisermos colocar Euros podemos fazer e comercial, Euro, ponto e vírgula. Se quando você quiser uma marca comercial que seria comercial e, comércio, ponto e vírgula. Alguns deles são muito fáceis de ler ou adivinhar e então podemos ver quando atualizamos a página lá eles estão todos. Mas e se quisermos um “e “comercial “? Bem, nós podemos fazer isso também, nós fazemos e comercial, amplificador, ponto-e-vírgula, e agora olhe há um site muito comercial em nossa página. Não se preocupe, você não precisa memorizar tudo isso, se você fizer uma busca por entidades HTML, você encontrará muitas referências a todas as entidades que você pode usar lá fora. Aqui está um site que mostra um monte e, como você pode ver, há um monte deles. Então, não se preocupe em memorizá-los, sempre que você estiver procurando uma entidade, basta fazer uma pesquisa rápida no Google para que você possa encontrá-la. Você provavelmente vai memorizar alguns que usam mais do que outros, mas se você esquecer, ele apenas faz uma busca rápida por um copyright de entidade HTML, e você provavelmente vai obter como 3,7 milhões de resultados nas inter-webs sobre como para te dizer para fazeres isso. Então, não se preocupe se esquecer. No próximo vídeo, vamos dar uma olhada na formatação de código e algumas práticas recomendadas. 20. Formatação de código: Então, conversamos um pouco sobre espaço em branco e formatação de código, mas eu só quero revisar algumas práticas recomendadas. É muito importante mantermos o nosso código limpo. Isso vai poupar dores de cabeça se você voltar ao seu código em uma semana ou um ano e você não se lembrar exatamente dele. Também irá poupar dores de cabeça se você trabalhar dentro de uma equipe. É melhor se todos concordarem em como formatar seu código. Tecnicamente, como espaços em branco são ignorados, você pode escrever seu código HTML assim. Pode ser basicamente um desleixado como você quer e o navegador vai tipo de corrigir isso para você. No entanto, é muito difícil ler isso. Então, sempre mantenha a espécie de espaçamento de linha agradável que torna mais fácil para você analisar. Você também verá que o Sublime Text tem aqui o que eles chamam de minimapa e o minimapa permite que você navegue seus textos, então, se você está procurando por um pedaço específico de HTML que você escreveu. Neste momento, nosso documento é muito curto, então isso pode não ser necessário, mas se o seu projeto ficar longo, você pode querer usá-lo. Por enquanto, podemos esconder o minimapa e isso não bloqueará nenhum imóvel na nossa esquina. Outra coisa que queremos evitar é o que é chamado de sopa de etiquetas. Então, podemos escrever h1 em minúsculas como fizemos ou podemos escrevê-lo em maiúsculas. Isso também será lido pelo navegador. Você também pode fazer algo muito legal como isso, T maiúsculo, I minúsculo, T maiúsculo, L maiúsculo Você entende o ponto. Isto é, se você quiser reviver 1996 dias de hackers e você quer ser zero legal, mas realmente não é muito legal em tudo. Então, este será HTML válido que pode ser lido, mas apenas dói os olhos para olhar. Então, eu recomendo não fazer isso. É muito bom manter seu código limpo e arrumado. Então, vamos definir isso de volta para todas as letras minúsculas. Então, sempre que você trabalha com uma equipe, você pode criar um documento de formatação para como todos devem estar escrevendo seu HTML. É realmente uma boa prática a seguir e vai mantê-lo limpo e honesto com o seu código. Outra ferramenta que temos à nossa disposição são os comentários HTML. Então, digamos que queríamos escrever uma pequena nota para nós aqui. E se eu quisesse adicionar mais desertos mais tarde e não quisesse esquecer? Vou escrever um bilhete que diz: “Não se esqueça de adicionar mais desertos.” Ótima. O problema é, porém, que qualquer coisa que escrevermos em nosso corpo será impresso na página. Então, se eu atualizar aqui, então, claro, vamos ver a nota que escrevi para mim mesmo para a página. Então, como podemos evitar que isso aconteça? Bem, podemos usar comentários HTML. Então, para comentários HTML eles se parecem com isso, exclamação de colchete aberto, hífen, hífen e, em seguida, no final do comentário, vamos fazer outro hífen duplo e o colchete de fechamento. Você pode ver Sublime Text está fazendo essa cor cinza para nos informar que é um comentário. Agora, quando eu salvar e ir para o navegador, ele fica oculto da vista. Então, comentários HTML podem ser realmente super úteis. Uma coisa que eu quero salientar, porém, é só porque nós não podemos vê-lo nesta visualização do navegador aqui não significa que ele não está em sua fonte. Então, se alguém visse sua fonte, olhe aqui está o nosso comentário. Digo-te isto porque não quero que escrevas nada do tipo: “Odeio o meu chefe.” Em seus comentários porque é definitivamente possível que alguém possa vê-lo. Então, lembre-se disso. Embora os comentários em HTML não sejam impressos na página, ainda é possível que alguém possa ver o que você está escrevendo lá. Comentários HTML podem ser super úteis apenas para manter o controle de qualquer coisa que queremos. Então, talvez nas notas de aula eu queira dizer o que é esta seção. Então, aqui aprendemos sobre títulos. Então, aqui está um comentário HTML que diz, “Cabeçalhos”. Então, aqui em baixo eu vou ler os comentários e este vai dizer imagens porque aqui é onde nós aprendemos sobre imagens. Eu posso copiar e colar isso para torná-lo um pouco mais simples para mim escrever. Então, aqui nós aprendemos sobre blockquotes. Então, eu vou mudar o texto para blockquotes. Aqui aprendemos sobre links. Então, deixe-me adicionar neste cabeçalho para links. Aqui estava o nosso parágrafo e o nosso exemplo de elemento inline. Temos nossas listas não ordenadas, nossas listas ordenadas e nossa lista de definição. Então, esses são comentários HTML e algumas notas sobre formatação de código. Então, lembre-se, sempre tente manter seu código agradável e limpo, use suas guias para recuar e mostrar aninhamento, e certifique-se de fazer todas as letras minúsculas para que seja um pouco mais fácil de ler. Aprendemos muito nestes últimos vídeos e acho que agora estamos prontos para voltar ao nosso esboço de conteúdo e começar a traduzir nosso conteúdo para HTML para nossa página inicial. 21. Marcando nossa página inicial: Vamos sair do nosso arquivo class.html por agora para fazer nossa página inicial. Então, vamos selecionar Arquivo, Novo Arquivo, e vamos fazer um novo documento para trabalhar. Nós vamos adicionar em nosso shell HTML, você possa copiar e colar isso se quiser, mas por enquanto, vamos fazê-lo do zero. Então, precisamos do nosso doctype HTML, e isso é uma tag autônoma. Em seguida é o nosso elemento HTML, e não se esqueça que vamos colocar esse atributo Lang lá e defini-lo para Inglês. Vamos fechar nossa tag HTML porque tudo será aninhado dentro disso. O próximo é o nosso elemento principal. Lembre-se, nossa cabeça segura todos os metadados para nossa página. Depois disso, nosso elemento corporal. O elemento corpo contém todo o conteúdo que será mostrado na tela. Nós vamos salvar nosso arquivo, e para a página inicial de todos os nossos sites, nós realmente vamos nomear este index.html. O arquivo HTML de índice é o que o servidor web procurará quando eles forem para a raiz do seu documento HTML. Index.html indica que esta é a página inicial e a primeira página que deve ser carregada quando os visitantes chegam ao seu site. Então, vamos salvar isso e você vai notar que uma vez Sublime Text sabe que este é um arquivo HTML, ele vai começar a fazer realce de sintaxe colorido baseado em tags HTML. Vamos abrir novamente nosso esboço de conteúdo e dar uma olhada no que temos para nossa página inicial. Então, nós sabemos que nós vamos querer que a tag título na tag título deve dizer a informação para o que esta página inicial é, que vai para o nosso elemento principal porque é metadados. Vamos adicionar nossa etiqueta de título, e aí dentro, vamos escrever o que queremos que apareça, que será O Portfólio de Jon Arbuckle. Não se esqueça que a outra coisa necessária que precisamos em nossa cabeça, é uma meta tag com o atributo do conjunto de carros. Vamos definir isso para UTF 8. Vamos salvar isso, porque lembre-se que sempre queremos salvar muitas vezes. Em seguida, vamos começar a adicionar o conteúdo ao nosso corpo, então, se visualizarmos isso agora, é claro, nada estará na página porque ainda não colocamos nada em nosso elemento body, mas veremos nossa tag título exibida dentro de a guia do navegador. Além disso, nunca definimos um ícone favorito, então aqui está o ícone padrão do documento que mencionei anteriormente. Vamos começar a adicionar coisas ao corpo da página para que ela realmente apareça no navegador. Temos o nosso campo de elevador que irá atuar como o nosso H1. Eu vou copiar esse texto, então eu vou criar o elemento H1. Eu vou colar o texto em e, em seguida, eu vou fechar o elemento H1 e agora, nós temos o nosso título Nível 1 para a nossa página. Será o título mais importante que será exibido em nossa página. Se verificarmos isso, lá vamos nós, e lembre-se, por padrão, ele se torna maior e mais ousado do que o resto do texto em nossa página. Você pode notar que o apóstrofo em I'm está realmente exibindo como uma citação encaracolada que é o que queremos. Isso está acontecendo porque copiamos e colamos de um documento do Word. No entanto, se você estava apenas digitando texto dentro deste editor, você notará que quando eu fizer o I apóstrofo M e eu atualizar a página. Então não é o apóstrofo encaracolado que realmente queremos. Jason Santa Maria tem um ótimo artigo sobre isso: “Não seja burro você inteligente”, e é tudo sobre ter certeza de que você está realmente usando citação encaracolada, e não descrever coisas como polegadas ou pés. Então, como garantimos que isso aconteça? Bem, podemos voltar a usar nossas entidades HTML que conhecemos. Na verdade, há uma entidade HTML para isso e é ' e que significa aspas direitas. Então, quando soltarmos essa entidade HTML, você verá que ela está agora corrigida para a aspa direita. Em seguida, vamos querer incluir essa imagem grande que descrevemos. Neste caso, Jon ainda não sabe o que ele quer colocar lá. Sabemos que vamos precisar da tag de imagem com a fonte e todos os atributos. Mas qual será o valor em nossa fonte? Bem, ainda não temos certeza, então o que fazemos para não ter certeza? Bem, lembre-se que falamos sobre o texto Lorem Ipsum mais cedo, e que havia geradores Lorem Ipsum que podemos usar. Há também basicamente o equivalente para Lorem Ipsum de imagens. Meu favorito é placekitten.com. Aqui está placekitten e o que você faz é que você pode pegar este URL que está listado aqui, placekitten.com/200/300. Nós vamos copiá-lo, e nós vamos colocar isso em nosso valor fonte. O 200 e 300 significa largura e altura, para que você possa ajustá-los ao tamanho que você precisa. Aqui estamos mostrando 200 pixels de largura e 300 pixels de altura. Queremos que isto seja mais uma imagem vertical, vamos mudar isso para um 1000 para a largura e tem sido refrescante, oh, olha, há uma pequena cara de gato. Você pode ajustar isso para o que você está procurando, e basicamente coloca um espaço reservado de uma imagem de gatinho para você. Lá vamos nós, Se os gatos não são sua praia, há muitos outros serviços lá fora também que você pode usar. Um deles é, nicenice.jpg, o serviço de espaço reservado Vanilla Ice, ou eles são Preencher Murray, que é imagens de Bill Murray. Você também pode verificar placebear se você gosta de ursos mais do que gatos. Há também um mais simples, aqui está o dummyimage.com, e isso apenas nos dá uma imagem com as dimensões escritas no topo. Isso pode ser um pouco mais elegante para algumas coisas que você está procurando, talvez não tão divertido, mas provavelmente mais direto ao ponto, talvez, melhor para entregas do cliente, dependendo do seu cliente. Então, vamos ajustar isso aqui. Então 900 por 300, e então o 0001 e fff representam as cores, então 000 significa preto e o fff é branco para o texto que está sentado em cima. Então, lá vamos nós, agora temos o nosso H1, temos a nossa imagem de herói. Não temos a certeza do que vai ser. Então, por enquanto, estamos apenas usando essa imagem de espaço reservado. Essa imagem que definimos com um caminho de arquivo absoluto. A seguir, queremos colocar algumas informações sobre os quadrinhos do Jon. Queremos um pouco de uma descrição para garantir que eles saibam que Jon realmente escreve web quadrinhos. Então, os quadrinhos da web, se pensarmos de volta ao nosso esboço, é o título de segundo nível sob que Jon Arbuckle faz trabalho freelance então vamos fazer outro título, desta vez um H2 e configurá-lo para Web Comics, então vamos deseja adicionar esse texto de descrição que falamos sobre qual estará em uma tag de parágrafo. Para o parágrafo, vamos apenas escrever um texto bem simples aqui. Podemos sempre voltar e nos ajustar. Desta vez, vamos dizer, acompanhe as aventuras alimentares de Jon no Lasagna Chronicles. Este texto, por si só, faz muito bem. Queremos que as pessoas aprendam mais. Então, vamos nos certificar de incluir um link aqui. O link irá para a nossa página de trabalho. Vamos definir isso um pouco mais tarde e vamos ter o texto vinculado a dizer algo descritivo, porque lembre-se que queremos que as pessoas saibam para onde elas vão e então vamos dizer, vejam os quadrinhos de Jon. Também queremos falar sobre a carreira musical muito proeminente de Jon. Então, vamos colocar em outro título porque isso vai viver sob o que ele faz, e isso vai ser em H2 com o texto da música. Se nos referirmos de volta ao nosso esboço, podemos ver que queríamos falar sobre seus CDs populares para venda e incluir uma imagem dele. Então, vamos adicionar nossa tag de imagem com nosso atributo fonte e nosso atributo alt, e vamos descobrir qual imagem queremos. Bem, nós vamos querer isso, imagem pokeaholic.jpg para aparecer. Então, lembre-se porque estamos vinculando a uma imagem dentro de nosso próprio site, vamos usar uma URL relativa em vez de um caminho absoluto. Então, vamos para a pasta de imagens. Então, fazemos isso digitando img, porque está no mesmo nível que o nosso index.html. Em seguida, para ir dentro da pasta vamos escrever barra, e então vamos digitar o nome do arquivo que é polkaholic.jpg. Para qualquer um que não possa ver isso, queremos ter certeza de que fornecemos texto alternativo, possamos escrever algo como polkaholic lá. Nós realmente não vamos precisar disso neste exemplo e aqui está o porquê. No seguinte título, o nosso cabeçalho H3, porque está aninhado debaixo do nosso esboço musical, vamos escrever polkaholic. Então, se nós realmente colocássemos um texto alternativo ele diria, polkaholic, polkaholic. Então, vamos manter esse texto dentro do H3. Agora que as pessoas sabem que há um CD, é claro, eles vão querer comprá-lo. Então, vamos colocar um link para o CD na Amazon.com. Então, colocamos nosso texto âncora pelo CD, e não se esqueça de definir seu href para o URL que você deseja ir. Em seguida, queremos tentar fazer com que as redes sociais do Jon funcionem. Então, vamos garantir que as pessoas saibam que ele está no Twitter e que podem segui-lo até lá. Isso vai ser outro nível de cabeçalho dois porque ele está aninhado sob o nosso título de nível superior. Então, sendo H2 Jon no Twitter, vamos colocar em algum texto de parágrafo aqui que espero que as pessoas queiram acompanhar as últimas músicas e ilustrações de Jon. Então, teremos um link para a página do Twitter do Jon. Então, algo como twitter.com/jonarbs. Eu não sei se essa é uma conta real do Twitter. Se for, espero que seja bom. Em seguida, colocaremos o @jonarbs para o texto do link porque isso indicará às pessoas que este é o perfil do Twitter ao qual estamos vinculando elas. Em seguida, vamos querer incluir o depoimento do cliente. Então, a Dra. Liz Wilson foi simpática em escrever algumas palavras gentis sobre o Jon. Então, vamos querer incluir isso, e como incluímos as citações? Com o elemento blockquote. Então, vamos digitar blockquote aqui. Eu vou mover isso para cima para que você possa ver um pouco mais. Abrimos e fechamos nossas tags, e lá vamos colar nesse texto dentro de uma tag de parágrafo. Nós queremos o “de quem é” nas próximas linhas, então nós vamos realmente fazer dois parágrafos dentro desta citação de bloco. Então, o primeiro parágrafo é o texto real e o segundo parágrafo é quem o disse. Agora lembre-se, nós falamos sobre as aspas encaracoladas anteriormente. Então, vamos voltar e certificar-se de que limpá-los adicionando as entidades HTML adequadas para que ele apareça corretamente. Aqui, temos uma aspas duplas que é muito semelhante à aspas simples. Só vamos trocar essa entidade um pouco. Então, em vez de dizer escrever aspas simples, queremos aqui é comercial e, em seguida, L para esquerda, D para duplo, e então o quo novamente para citação. Então, ldquo é esquerda aspas duplas. Então, para a citação de encerramento, vamos precisar de rdquo para aspas duplas direita. Nós vamos querer copiar esse rsquo para aqui para ter certeza de que tudo será exibido corretamente, e então há realmente mais uma entidade que temos nesta página. Isto deve ser um traço. Há uma leitura interessante sobre traços em versos en traços e o que usá-los, se você quiser aprender mais sobre isso. Mas por enquanto, vamos apenas fazer isso um mdash para que no &mdash com um ponto-e-vírgula, e agora nossa citação de bloco esteja definida. Depois que as pessoas lerem esta citação, provavelmente vão querer contratar o Jon, certo? Então, vamos nos certificar de colocar algum texto de parágrafo para fazer com que as pessoas contratem Jon para necessidades de retratos de animais de estimação, e agora queremos fazer esse 'entrar em contato texto', um link para realmente ir para a página de contato do nosso site. Então, vamos envolvê-lo com a tag âncora, mas vamos definir o href mais tarde, uma vez que realmente temos uma página de contato para vinculá-lo. Em seguida, vamos querer a informação do rodapé. Para o nosso rodapé, vamos ter apenas um pouco de texto de direitos autorais. Então, algo como todo o conteúdo copyright Jon A. 2014 e, em seguida, fechar o parágrafo. Talvez queiramos adicionar a entidade de direitos autorais para que possamos fazer isso escrevendo © e nosso conteúdo de rodapé é definido. A última coisa que precisamos é que o conteúdo do cabeçalho que inclui um logotipo, que vai ser uma imagem e, em seguida, um monte de navegação do site assim, uma lista de links para outras páginas em nosso site. Vamos voltar para o topo aqui, e é aqui que eu vou começar a adicionar em meus comentários HTML. Então, aqui está a minha informação de cabeçalho. Só vou marcar isso. Este é o conteúdo da página aqui, então vou marcar isso. Mais uma vez, quando eu voltar a esta página mais tarde, isso vai tornar mais fácil para mim encontrar as informações que eu estou procurando e lembrar, onde todo esse conteúdo está. Então, aqui está minha informação de rodapé abaixo disso. É apenas uma ferramenta para manter as coisas organizadas. Então, de volta ao nosso cabeçalho, sabemos que queremos os logotipos que vão ser imagem. Então, fazemos fonte img igual a, e então nosso logotipo está localizado em nossa pasta de imagem. Então, vamos dizer, vá para a pasta de imagem, então novamente isso é img, barra para ir para dentro, logo.png. Então vamos querer definir o texto todo aqui e o texto todo será Jon Arbuckle porque esse é o texto que aparece dentro do nosso logotipo. Então, queremos que as pessoas saibam que é isso que diz, caso não vejam isso. Em seguida, precisamos dessa lista de links para ir para as três outras páginas do nosso site , porque queremos sempre que as pessoas sejam capazes de chegar ao trabalho, a página Sobre e a página de Contato. Então, algo que eu gosto de fazer às vezes para descobrir como eu quero marcar as coisas em HTML, é meio que dizer em voz alta. Então, eu sei que estes são links e eu estou dizendo aqui são três links que nós temos. Se estou dizendo a palavra link, sei que vou precisar de uma etiqueta âncora. Isso é fixe. Mas o que mais eu disse? Eu disse, vamos precisar de uma lista de links. Oh, listas, então essas são soam familiares. Quando falamos de lista de navegação, isso é, na verdade, outra lista não ordenada. Então, podemos fazer a marca até nossa lista de links está usando lista desordenada. Então vamos fazer isso digitando ul. Vamos fechar isso e então vamos querer que esses links vivam dentro de nossa ul, mas o que precisamos dentro de um ul, precisamos de nossos elementos li para representar cada item. Sabemos que temos três páginas, então vamos precisar de três links aqui. Em seguida, dentro de todos esses itens da lista, haverá a tag de link que vincula à página do site. Então, o primeiro será nossa página de trabalho, nosso segundo link irá para nossa página sobre, e nosso último link irá para nossa página de contato. Agora, é claro, nós ainda não criamos estes, então vamos voltar e preencher esses valores href assim que essas páginas forem criadas. Vamos dar uma atualização a isso. Ouvimos muito conteúdo acontecendo aqui. Temos o nosso logotipo, temos a nossa lista de links, temos o nosso h1, que diz para quem é este site e o que é tudo sobre, temos uma imagem de espaço reservado que será a nossa imagem de herói, que irá agarrar atenção dos visitantes, temos uma série de h2s, sub conteúdo para sob nosso cabeçalho principal. Então, nós temos quadrinhos, nós temos um parágrafo, nós temos um link para ver quadrinhos de Jon, nós temos um h2 de música, nós temos outra tag imagem com um URL relativo, nós temos um h3 porque isso é um título aninhado sob música, temos um link para comprar o CD em outro site, voltamos ao nosso h2 porque Jon no Twitter está no mesmo nível que nossas outras categorias, temos um parágrafo para descrever isso e um link, temos nossa citação em bloco com dois parágrafos dentro dele. Também estamos usando entidades HTML para garantir que nossos curlicues parecem agradáveis. Temos um parágrafo adicional e dentro disso, temos o nosso link em linha para entrar em contato, que irá vincular à nossa página de contato. Por último, temos o nosso parágrafo de rodapé. O parágrafo de rodapé tem algum texto, bem como nossa entidade de direitos autorais. Agora, nossa página inicial é semântica e incrível e pronta para ir. Então, isso encerra a Lição 3. Criamos uma nova página e index.html para salvar nossa página inicial, adicionamos novo bloco em elementos inline, seguimos nossa linha de conteúdo para garantir que todo o nosso conteúdo foi marcado corretamente para o nosso html, nós também seguiram boas práticas de formatação. Então, certifique-se de ter um tempo agora para voltar e corrigir qualquer uma dessas coisas se talvez você estivesse digitando um pouco rápido. Acontece com todos nós, mas aproveite o tempo, certifique-se de que as coisas estão boas e limpas, salve-o, certifique-se de que fica bem no navegador, e, em seguida, na próxima lição, vamos olhar para as nossas outras três páginas, e certifique-se de que podemos obter toda essa cópia do conteúdo para elementos html. 22. Identifique os tipos de conteúdo restantes como elementos HTML: Então, agora que temos a página inicial sob o nosso cinto, vamos passar para as três páginas restantes. Em seguida, temos nossa página de trabalho. Aqui, temos o contorno de conteúdo que fizemos para a nossa página de trabalho. Então, vamos começar a colocar isso em Sublime Text. Vamos abrir o backup do Sublime Text, e agora temos o nosso arquivo class.html e o nosso arquivo index.html, mas vamos precisar de uma página para a nossa página de trabalho. Ou clique com o botão direito do mouse ou Controle clique e faça Novo arquivo ou podemos fazer Arquivo, Novo arquivo. Aqui, estamos definidos com nosso novo arquivo. Agora, eu mencionei anteriormente a idéia de economizar algum tempo copiando e colando, e nós certamente podemos fazer isso com nosso arquivo anterior. Então, se voltarmos para nossa página de índice para nossa página inicial, uma das coisas que podemos fazer é alterar o texto aqui para trabalhar em nossas outras páginas. Vamos para Seleção e, em seguida, Selecionar Tudo. O atalho de teclado para isso é Comando A ou Controle A e agora você notará que tudo está realçado. Vamos Editar, Copiar e, em seguida, vamos para o nosso novo arquivo que ainda não fizemos nada e colar. Ótimo. Então, agora todo o nosso código é copiado para aqui. O que queremos fazer agora é fazer ajustes para que seja realmente para a nossa página de trabalho. Então, primeiro, vamos em frente e salvar isso para que não percamos nenhum de nosso progresso, e vamos chamá-lo de work.html. Certifique-se de que você está salvando dentro do seu jon-arbuckle-site. Você já deve ver seu arquivo de classe de indexação lá e clique em Salvar. Então, agora, temos que trabalhar o arquivo HTML salvar, mas ele tem todo o nosso conteúdo da página inicial. Então, o que sabemos que precisamos em uma página de trabalho? Bem, temos algum conteúdo diferente da nossa página inicial, mas temos duas coisas iguais. Esse é o conteúdo do cabeçalho e o conteúdo do rodapé. Então, o que nós vamos fazer é você vai ver que nós temos esses comentários handy-dandy que nos dizem que este é o cabeçalho, aqui está o conteúdo da página, e aqui está o nosso rodapé. Então, nós realmente sabemos que queremos manter o cabeçalho e rodapé, e então o que vamos fazer a seguir é simplesmente excluir todo o conteúdo que está no conteúdo da nossa página. Então, selecione-o e exclua-o. Então você vê que temos nossas informações de cabeçalho da primeira página ou rodapé informações da primeira página e agora tudo que você precisa fazer é colocar o conteúdo personalizado para o nosso conteúdo de página no meio. Esta é uma maneira muito fácil de criar todo o resto de suas páginas. há outra coisa que está faltando, e é que temos que atualizar o título. Então, vamos deletar isso. Agora o que temos aqui é essencialmente o shell para o resto de nossas páginas. Vamos começar a criar nosso outro conteúdo. Esta é a página de trabalho, não a página inicial mais, então digamos “Trabalho”. Então ainda deixamos as pessoas saberem que é o portfólio de Jon Arbuckle, então “Trabalho: O Portfólio de Jon Arbuckle”, ou “Trabalho - O Portfólio de Jon Arbuckle”. As pessoas ainda vão saber que estamos olhando para o portfólio, mas isso é especificamente nós estamos na página de trabalho. Então, nosso título agora foi atualizado. Vamos até o conteúdo da nossa página. No conteúdo da nossa página, vamos querer escrever HTML específico para a nossa página de trabalho. Então, voltando ao nosso contorno de conteúdo, fizemos o título da página, mas também precisamos de outra coisa. Precisamos do H1, certo? Então, vamos fazer h1, e o cabeçalho desta página também é chamado de “Trabalho”. A seguir, queremos falar sobre os quadrinhos da Web que Jon tem. Então, se nos lembrarmos de nossos contornos de cabeçalho, dissemos que este era o nosso h1, o que significa que os quadrinhos da Web estarão em h2. Vemos que há outras coisas no mesmo nível que os quadrinhos da Web sob nosso trabalho, certo? Então, Retratos e Música estarão no mesmo nível, então aqueles também serão h2s. Então, dentro de quadrinhos da Web, temos dois tipos diferentes de quadrinhos com informações por baixo disso, então vamos fazer esses h3s. Nós também temos um título de um CD, então nós vamos fazer isso em h3, bem como porque é o cabeçalho para as outras informações sobre o CD. Então, vamos voltar ao Sublime Text, e vamos trabalhar com nossa seção de quadrinhos da Web. Então, temos nosso segundo nível, o h2, e isso será chamado de “Web Comics”. Então os H3s serão o título dos quadrinhos, então o primeiro é o “Lasanha Chronicles”. Também queremos ter uma imagem das Crônicas da Lasanha e um link para um site externo para isso. Então, vamos incluir a imagem aqui, então img src é igual e a imagem para Lasagna Chronicles está novamente em nossa pasta Image, lasagna-chronicles.jpg. Vá para dentro da nossa pasta Imagem. Para entrar nele, o /lasagna-chronicles.jpg. Então vamos querer ligar as pessoas para ir para o URL externo da Lasagna Chronicles Web Comic, então vamos fazer uma tag âncora. Digamos que isso vive em algo como lasagnachronicles.com. Queremos um texto de call-to-action que descreva para onde as pessoas estão indo, então algo como, “Leia as Crônicas da Lasanha”. Então vamos seguir este mesmo formato para a próxima Web Comic, que é Cat Town. Então, H3, Cat Town. Mova isso um pouco para que possamos ver um pouco melhor. Vamos ter nossa tag de imagem novamente, então img src é igual a “img/cat-town.jpg”. Esqueci o texto alternativo, então vamos nos certificar de que temos o alt, que ficará em branco. Então, novamente, queremos o link para o site, então talvez cattowncomic.biz, Leia Cat Town. Ok. Então agora, nossa Web Comics está definida. A próxima seção sob o trabalho de Jon são seus retratos. Então, isso vai para o título de segundo nível porque ele está aninhado em Trabalho, então Retratos. Então, para os Retratos, vamos ter apenas duas imagens, uma de um gato e outra de um cão para que as pessoas saibam que retratos estão disponíveis. Então, vamos fazer a tag de imagem novamente, então img src é igual, e vamos ter o texto alt, e vamos dizer retrato de gato, cat-portrait.jpg, mas algo já está errado aqui, certo? Quando eu acabei de fazer cat-portrait.jpg, ele vai estar procurando isso no mesmo nível. Então lembre-se, nós temos que ir para a nossa pasta de imagens, então image/. Então eu posso simplesmente copiar e colar isso se eu quiser, então Editar, Copiar, Editar, Colar. Posso actualizar isto para que só diga “retrato de cão”. É um bom atalho para pegar, então não temos que digitar tudo. Então agora, temos nossos retratos aqui. A próxima seção do nosso esboço de conteúdo foi a nossa Música. Então, vamos adicionar outro h2 porque ele está no mesmo nível que Retratos e Web Comics. São todos tão importantes no trabalho. Então, Music, h2 e o nome do CD é “The Best of Jonny Arbs” então isso vai ser outro título. Este é outro título porque se o caso em que Jon escreve mais música, ele tem uma longa lista de CDs diferentes que ele tinha e a descrição deles, então ele pode acabar tendo mais h3s eventualmente assim que ele nos agraciar com mais de seus Gênio polka. Então, temos “O Melhor de Jonny Arbs”. Nós vamos querer a imagem do CD e o link para comprar na Amazon. Então, novamente, vamos usar nossa tag de imagem, e esse é o CD Polkaholic, então img/polkaholic.jpg. O alt aqui vai ser Polkaholic. Também esquecemos de colocar nosso texto alternativo aqui, então vamos dizer algo como “Retrato de um gato” e “Retrato de um cão”. Ok. Desculpe, de volta à nossa música, e depois novamente o nosso link para a Amazon. Então, um href=” http://amazon.com/polkaholic”. Lá dentro, vamos dizer: “Compre este CD.” Esse será o texto do link que as pessoas verão e quando virem “Compre este CD”, eles podem clicar nele e obter esse gênio musical. Então, é isso para a nossa página de trabalho, e você pode ver que ela se encerra com nosso conteúdo adicional, que já tínhamos quando copiamos e colamos. Então, vamos salvar esse arquivo e ver como ele fica em nosso navegador. Aqui está a nossa página de trabalho. Então, novamente, nós temos nosso logotipo e nossos links de navegação, então nós temos nosso título de trabalho. Temos a seção de quadrinhos da web e primeiro, aprendemos um pouco sobre as Crônicas da Lasanha juntamente com o link para ler as Crônicas da Lasanha. Temos Cat Town com nossa imagem da Cidade dos Gatos e nosso link para ler a Cidade dos Gatos. Temos a seção de retratos para que possamos ver que temos o retrato do gato e o retrato do cão para que possamos saber que eles estão disponíveis e parte do trabalho de Jon. Temos a seção de música com The Best of Jonny Arbs vivendo sob isso e esse é o CD polkaholic e o link para comprar o CD na Amazon. Então terminamos com o nosso conteúdo de rodapé. Então, agora que nossa página de trabalho está pronta, vamos em frente e fazer nossa página Sobre. Nós vamos fazer “File”, “New File” e novamente, podemos copiar e colar de nossos outros projetos se quisermos ou podemos digitar as coisas para que possamos dizer doctype html e então vamos precisar do nosso elemento HTML com o nosso “lang” atributo. Vamos fechar isso, nosso elemento “head” para manter nossos metadados, nosso elemento “body” para manter nossa cópia para a página. Precisaremos dos elementos meta para defini-lo como utf-8. Vamos precisar de uma etiqueta de título para a nossa página, neste caso, vamos dizer “Sobre” e depois queremos manter com a sintaxe que estamos usando para os outros títulos, então vamos dizer “The Portfolio of Jon Arbuckle” e vamos colocar Isso aí dentro. Vou salvar meu arquivo e vamos salvá-lo é about.html e salvá-lo vai me obter essa sintaxe de cores novamente para que eu possa ter certeza de que estou digitando as coisas corretamente. Agora, vamos para a seção do corpo. Então, lembre-se, vamos querer ter nosso conteúdo de cabeçalho. Eu posso pegar tudo isso daqui e dizer “Editar”, “Copiar”, “Editar”, “Colar”, as informações de conteúdo da página, e eu vou querer terminar com o rodapé que eu também vou copiar e colar desta outra página para ter certeza de que é o mesmo. Tudo pronto. Agora, vamos adicionar nosso conteúdo Sobre. Voltando ao nosso contorno de conteúdo, já fizemos nosso conteúdo de cabeçalho e nosso conteúdo de rodapé. Atualizamos o título da página, mas agora, vamos também torná-lo o h1 da página. Então, <h1> sobre. Talvez queiras dizer “Sobre o Jon”. Então vamos querer incluir uma imagem de Jon, alguns parágrafos descrevendo Jon, e algumas de suas habilidades e serviços profissionais oferecidos dentro de uma lista. Temos a imagem do Jon com a nossa etiqueta IMG. Vamos fazer isso com o arquivo arbuckle-bio.jpg, então img/arbuckle-bio.jpg, então vamos ter alguns parágrafos sobre Jon. Eu não tenho certeza do que isso vai ser ainda então, por enquanto, eu vou apenas usar o gerador Lorem Ipsum. Você vai se lembrar que eu posso fazer isso apenas olhando para o gerador lorem ipsum e eu vou apenas pegar a partir daqui que é o Lipsum e eles vão dizer cinco parágrafos gerar, isso é muito, eu só vou fazer dois parágrafos. Então eu vou selecionar tudo isso, “Editar”, “Copiar”, voltar para o meu texto Sublime e “Editar”, “Colar”. Isso é muita mensagem. Vamos recuar isto para que corresponda ao recuo do resto do nosso documento. Então vamos adicionar as tags de parágrafo em torno desta cópia. Então, abrindo p tag e, em seguida, vamos fechar a tag p. O mesmo aqui em baixo, perto. Depois disso, teremos a lista de coisas que Jon oferece para seus serviços. Talvez queiramos adicionar um título para esta lista porque se começarmos a colocar os itens da lista para baixo, as pessoas podem não saber o que é essa lista. Então, vamos adicionar um título. Agora, estamos em um h1 e ainda não tivemos um h2 na página, então vamos fazer h2 e depois dizer “Serviços Profissionais”, e fechar o h2. Agora, neste caso, os itens da lista de Jon para sua lista de serviços, basicamente, não estão classificados um sobre o outro, então podemos usar uma lista desordenada. Então, abra nossa ul e, em seguida, certifique-se de fechá-lo e, em seguida, lembre-se, nós precisamos de nossos itens da lista. Talvez algo como “Desenho”, “Ilustrações”, “Aquarelas”, “Casamentos”, para sua banda quando eles querem tocar casamentos ou talvez ele faça caricaturas lá também. Aqui estão alguns exemplos dos serviços profissionais que ele oferece. Se você quiser adicionar mais alguns itens de lista, você certamente pode adicionar quantos quiser, então sinta-se livre para fazer isso. “ Aulas de dança”, “Consultoria Sudoku”. Esses são os serviços profissionais do Tom e isso é tudo na nossa página Sobre. Então, vamos salvá-lo e ver como ele fica. Agora, vemos nossa página Sobre. Então, novamente, temos o nosso cabeçalho, mas agora temos o nosso h1 é Sobre Jon. Temos esta imagem de Jon parecendo feliz e acolhedor. Este texto de espaço reservado agora será para sua biografia. Algo como: “Olá, sou o Jon. Trabalho em ilustração desde 1965. Adoro fazer retratos de animais e gosto de tocar meu acordeão com minha música polca”, et cetera. Toda essa cópia pode estar entrando aqui. Então temos um título, nossos serviços profissionais estão em h2 e esse título é para esta lista desordenada aqui, muitos deles eu tenho que digitar. Mas este título é para aqui e nós temos uma lista não ordenada com seis itens de lista nele. Lembre-se, podemos usar nosso inspetor para ver como estão as coisas. Vamos dar uma olhada nisso. Podemos ver que esta é uma imagem, que temos uma lista desordenada. Posso abrir isso e ver cada um deles como um item de lista. Então, à vista disso, temos um elo de âncora. Aqui está o nosso h1 para Sobre Jon. Movendo-se para baixo, aqui está a nossa imagem e ela se destaca quando eu passar o mouse sobre ela. Aqui está um parágrafo. Eu posso ser como, “Eu me pergunto o que é isso.” Lembre-se, podemos clicar diretamente sobre ele, Inspecione elemento, e podemos ver que estes são “Li” s dentro da ul que escrevemos. Parágrafo, o fim do nosso corpo e o fim do nosso HTML. Essas são algumas das maneiras que você gostaria de usar o Inspetor para ver como as coisas estão em uma página em seu site ou em sites de outras pessoas. Temos mais uma página para ir e essa é a nossa página de Contato. Vamos fazer um novo arquivo. “ Arquivo”, “Novo Arquivo”. Começaríamos a guardar isto desde o início assim que o abrirmos. Podemos dizer contact.html, certifique-se de que estamos salvando no lugar apropriado. Vou usar a página Sobre como um modelo para isso então vou para “Seleção”, “Selecionar tudo”. Vou copiar isto e vou colá-lo. Lembre-se, eu quero atualizar as coisas dentro Conteúdo da Página todo o caminho até o rodapé então eu vou colocar meu cursor lá e, em seguida, enquanto eu segurar Shift, eu vou selecionar aqui para baixo que irá selecionar o texto entre esses dois lugares, e, em seguida, vou apenas clicar em Excluir. Também quero atualizar nossa etiqueta de título. Em vez de dizer “Sobre Jon”, acho que vamos dizer “Contate Jon”. Em seguida, vamos querer colocar as informações de contato aqui. Para a página de contato de Jon, teremos nosso h1 como contato, o endereço de e-mail de Jon, e uma lista de links para sua presença nas redes sociais. Esta vai ser uma página bem básica. Teremos o nosso H1 que diz “Contate o Jon”. Então vamos ter um pouco de texto de parágrafo para descrever o que você está fazendo. Algo como, “Jon vai adorar ouvir de você.” e-mail para jon@jonarbs.com. Agora, para o jon@jonarbs.com, nós realmente queremos que você seja capaz de clicar nele para enviar um e-mail, tenho certeza que vocês já viram isso na Internet antes. Como fazemos isso? Como fazemos outras coisas quando temos que clicar nelas? Usamos um link de âncora. Vamos colocar um elo de âncora em torno disso. Então, a href= "”, este é o texto do nosso link. Vamos fechar essa âncora em torno disso. Abra isso para ver isso. Para criar um link de e-mail em vez de vincular a um site, o que vamos fazer é escrever “mailto:” e, em seguida, o endereço de e-mail de onde você gostaria que o link fosse. Isso enviará para jon@jonarbs.com. Se você achar que você está recebendo um monte de spam de alguém como este em seu site, você pode querer olhar para algo como woohoo.com que oferece formulários de contato e também apenas validação para você tentar evitar spam. Mas, por enquanto, vamos mantê-lo assim. Em seguida, queremos também ter os links de Jon nas redes sociais. Então, vamos fazer outro título porque vamos fazer uma lista de links e queremos que as pessoas saibam o que é essa lista. Nós vamos dizer “Em outro lugar na Interwebs”, e isso será links para Jon em outro lugar nas interwebs. Então, vamos usar essa lista desordenada novamente. Nós vamos ter um item da lista e nós vamos ter um link para Jon em outro lugar. Então, isso irá para sua página no Twitter, twitter.com/jonarbs, e vamos colocar uma citação de encerramento aqui no jonarbs. Talvez Jon também tenha uma página no Facebook, então vamos dar-lhe um link no Facebook, /jonarbs. Talvez digamos algo como Jon, vamos usar uma entidade lá, então rsquo para citação certa singles, página de fãs do Facebook do Jon. Feche o link e, em seguida, lembre-se também de fechar o Li. Então talvez Jon também esteja no Pinterest porque ele gosta de fixar sua arte. Então, vamos dizer pinterest.com/jonarbs, então Jon no Pinterest e, em seguida, feche esse item da lista. Então, há seus links para as mídias sociais em outro lugar na internet. Vamos salvar isso e, em seguida, vamos ver como nossa página Contato se parece. Lá está, curto e doce, mas exatamente o que as pessoas precisam em uma página de contato. Então, nós temos nosso cabeçalho novamente, nosso h1 para entrar em contato com Jon, um pouco de texto de parágrafo com nosso link inline apontando para seu endereço de e-mail, você verá “mailto jon@jonarbs.com”. Se eu clicar nisso, você verá que ele abrirá meu programa de e-mail. Eu não uso correio com muita frequência neste computador, então cancele fora disso. Então temos outro lugar na Interwebs que, neste esboço de conteúdo, vive sob Contact Jon, e temos seu Twitter, seu Facebook e sua página do Pinterest. Então terminamos com o rodapé. Então, aí está, o HTML para quatro páginas do nosso portfólio. Estamos parecendo muito bem agora, mas podemos realmente ir de uma página para outra sem abrir o arquivo separadamente. Então, no próximo vídeo, falaremos sobre como vincular as páginas. 23. Vincular as páginas separadas: Então, agora temos todas as quatro páginas, mas não há como ir de uma página para outra. Então, vamos querer voltar para nossa navegação e adicionar o valor apropriado para onde esses links de texto devem ir. Então, vamos começar de onde paramos pela última vez que foi com nossa página de contato. Na nossa página de contato, para chegar à nossa página de trabalho, precisamos encontrar o arquivo work.html. Então, nossos valores href aqui seguem a mesma lógica que nossas fontes de imagem fizeram. Podemos colocar em um valor absoluto ou relativo. Então, aqui em baixo, quando vinculamos ao Twitter, isso é um caminho absoluto para a conta do Twitter John Arbs no twitter.com. Vimos a mesma coisa quando fizemos imagens. Eles começam com o HTTP e, em seguida, eles fazem o endereço completo de onde o arquivo ou link está localizado. Neste caso, vamos querer usar URLs relativos porque estamos indo para uma página dentro do nosso próprio site. Então, assim como nós nos vincularíamos a uma imagem, vamos vincular ao arquivo the.html, neste caso, para um vincular ao arquivo work.html. Como a página de contato está no mesmo nível de trabalho, não precisamos subir um nível ou em uma pasta. Está no mesmo. Então, ao contrário de entrar em algo como pages/work.html, estamos no mesmo nível, então podemos simplesmente ir para work.html. Mesma coisa para about.html e contact.html. Vamos salvar isso. Agora, se levarmos nossa página de contato de volta para cima, você verá que o trabalho sobre em contato agora está vinculado e podemos dizer isso a partir dos sublinhados e da cor. Então, se quisermos ir para a página de trabalho, podemos clicar em “trabalhar” se quisermos ir para a página Sobre, temos um problema que não adicionamos no texto para isso ainda. Vamos apenas apertar o botão “Voltar” agora e da página de contato onde nós adicionamos os links certos e vamos clicar em “Sobre” e isso nos leva para a página sobre. Claro que já estavam na página de contato. Então, esse está tudo pronto. Então, o trabalho e o contato estão agora dentro, mas estamos faltando uma outra página. Certo? E sobre a página inicial? Às vezes as pessoas podem querer voltar para onde começaram. Temos duas opções aqui uma, poderíamos adicionar outro link em nossa lista de links para casa. A outra opção que você verá muitas vezes é fazer do logotipo um link para a página inicial. Então, vamos fazer isso em vez disso. Vamos voltar para a nossa página de contato e queremos essencialmente fazer desta imagem um link. Lembre-se que às vezes é fácil dizer em voz alta o que estamos tentando fazer. Então, eu quero fazer a imagem um link como qualquer outro link onde colocamos texto dentro dela também podemos colocar uma imagem dentro de uma tag âncora. Então, nós vamos cercar esta imagem que estará agindo como o link para a página inicial nós vamos cercá-la com uma tag âncora. Então, um href é igual a incluir que agora vamos fechá-lo no final e agora isso faz este link de imagem e onde queremos que isso vá? Para a página inicial e qual é a nossa página inicial? Index.html. Então, bem aqui nós vamos vincular a isso vamos salvar este voltar para nosso navegador e agora você vai ver quando eu mouse sobre isso o cursor muda para este ponteiro indicando que é um link. Então, quando eu clico nisso eu estou de volta na página inicial. Ainda não atualizamos a página inicial, então você verá que isso permanece como um cursor porque ainda não é um link mas se voltarmos a nossa página de contato agora tem todos os links corretos. Então, o que podemos fazer? Bem, podemos simplesmente copiar toda a nossa seção de cabeçalho e substituí-la em todas as nossas páginas. Então, edite colar. Essa é a nossa página sobre vamos salvar isso. Vamos para a nossa página de trabalho e fazer a mesma coisa substituir toda esta seção de cabeçalho. Você pode ver como é fácil encontrar o que estamos procurando por causa de nossos comentários HTML. Guarde isso, volte para a nossa página inicial e apenas para rever mais uma vez lembre-se que embrulhamos uma âncora em torno da nossa imagem porque podemos fazer disso um link. Fizemos um link para index.html e, em seguida, adicionamos os caminhos relativos corretos para essas páginas; portanto, work.html, about.html e contacts.html. Você pode ver aqui por que a nomeação inteligente como Trabalho, Sobre e Contato para nossas páginas tornou muito fácil lembrar as páginas que estávamos vinculando sem ter que revisar nada em nosso painel lateral. Então, agora todas as nossas páginas têm links. Na verdade, tivemos mais algumas, nesta página inicial, certo? Vê os comentários do Jon? Isso vai para a página work.html. Então, vamos salvar isso, e acho que estamos prontos para isso agora. Para cima, não, mais um. Lembre-se que queremos contratar o Jon e vamos contratar o Jon. Vamos enviá-los para a página de contato para entrar em contato. Então, vamos fazer isso ir para contact.html. Agora salve o arquivo. Tudo bem. Então, agora estamos em nossa página de contato, e agora olhe. Não importa qual página eu vá, temos um site totalmente clicável. De volta à página inicial, podemos vir aqui e dizer ver os quadrinhos do Jon. Sim. Você pode ver quando vamos para a página de trabalho, há quadrinhos do Jon. Se eu voltasse para a página inicial e realmente quisesse apenas entrar em contato com Jon, eu poderia entrar em contato na página de contato, e eu sei que posso enviá-lo por e-mail ou encontrá-lo na internet. Então, agora temos nosso site de portfólio de quatro páginas totalmente clicável. Aprendemos muito sobre nosso html em nossas páginas nesta lição. Concluímos o resto de nossas páginas marcando nosso conteúdo com base em nosso esboço de conteúdo. Você pode ver como criar esse contorno de conteúdo no início realmente ditou para onde estamos indo. Com a ajuda do sitemap e do conteúdo que tínhamos uma direção, tínhamos um objetivo. Às vezes pode ser realmente assustador quando você está apenas olhando para um novo arquivo e dizendo, “Eu não sei o que colocar nesta página.” Se você tiver essa sensação, pegue um pedaço de papel, pegue uma caneta, abra algum tipo de programa de computador, abra o TextEdit, abra o Photoshop, abra um de muitos arquivos, e comece a digitar informações que você conhece você quer estar em seu site. É um ótimo lugar para começar e, em seguida, lhe dá um objetivo a alcançar. Quando você começar a olhar para o seu conteúdo, você pode visitar sites como HTML Dog e descobrir que tipo de elementos você vai querer marcar seu conteúdo como. Então, certifique-se de que você completou suas quatro páginas. Adicione todo o conteúdo no. Se você estiver usando seu próprio conteúdo, certifique-se de que também está marcando isso. Em seguida, por último, adicione links para que seja um site totalmente clicável e ninguém nunca fica preso em um beco sem saída dentro do seu site. Só temos mais uma lição. Vamos rever algumas coisas como solução de problemas e as próximas etapas. 24. solucionar problemas: Agora, tudo em nosso site funciona muito bem e isso é incrível. No entanto, odeio ser o portador de más notícias, mas isso nem sempre vai acontecer. Você vai encontrar erros e bloqueios e é importante cobrir algumas maneiras de corrigir isso. A primeira maneira é pegar um amigo, às vezes ter olhos separados em um projeto que você está olhando por um tempo pode realmente ajudar. Erros de digitação em documentos HTML podem gerar muitos erros e, por isso, às vezes, apenas alguém olhando por cima do ombro e dizendo: “Oh, olha, você esqueceu de fechar uma etiqueta” é realmente útil. Às vezes, nem sempre temos isso e por mais que deseje que os meus gatos me ajudem a resolver problemas, não têm. Então, em vez disso, temos que procurar outras maneiras de fazê-lo, eu vou voltar para um de nossos documentos, nossa página de contato e eu vou apenas fazer algo aqui como esquecer de fechar essa tag 'a'. Quando você está digitando muito rápido, isso acontece muito, então, é definitivamente possível que você vai encontrar algo assim. Vou salvar este arquivo e depois vou pré-visualizá-lo novamente em nosso navegador. Quando eu atualizar esta página imediatamente, eu posso ver que há algum conteúdo quebrado aqui. O que eu vou fazer primeiro é inspecioná-lo e dizer, “Ei, o que é isso?” Eu posso perfurar e ver que logo após essa fonte de imagem, é essa pequena imagem aparecendo que não é suposto. Então, para mim isso identifica que o problema está vindo logo após o logotipo da nossa imagem, que me permite voltar e depois dizer, 'logotipo da imagem' e então eu posso dizer, “Oh, olhe para isso, eu esqueci de fechá-lo”. Outra maneira que eu poderia identificar como o problema é através da sintaxe de cores do nosso editor HTML, então, como podemos ver, todos os nossos elementos são geralmente um colchete aberto branco e, em seguida, um nome de guia rosa. Se eu descer aqui, eu posso ver que este 'a' é na verdade em branco, mostrando que ele não é renderização como a tag adequada. Essa é outra maneira de eu identificar que eu tenho um problema nesta vizinhança geral, e então eu geralmente posso ver, “Oh, olha, eu esqueci de fechá-lo”. Então, eu posso fazer isso. Nós conversamos sobre isso um pouco antes, mas às vezes nós esquecemos de fechar uma citação, algo assim acontece muitas vezes e você pode ver que todos os meus atributos são verdes, mas eu vejo que este é amarelo, então, que identificará que em algum lugar entre aqui e aqui algo deu errado. Quando está verde, tudo estava bem, quando está amarelo, em algum lugar, algo deu errado. Uma maneira de eu descobrir o que está errado é apenas passar e dizer, fonte é igual a aspas, aqui está a minha coisa, “Oh, olha, estou a perder uma citação.” Às vezes, você simplesmente não pode vê-lo e eu acho que é melhor no ponto, apenas reescrever a coisa toda, então, apenas reescrevê-lo novamente, fonte é igual, certifique-se de escrever seu formulário shell no início então, você tem todos os seus aspas e, em seguida, coloque o texto de volta aqui para image.logo.png. Só tenho que desfazer isso para voltar atrás, e vamos consertar a citação. Se isso não está funcionando, nós também temos o validador W3, o validador W3 é incrível. Nós colocamos em nosso código e ele vai e verifica se há erros. Então, vamos deletar isso e dar um erro, o que eu vou fazer é salvar isso. Eu vou selecionar todos e, em seguida, você pode marcar esta página, mas se você esquecer que basta olhar para cima, validador W3. Vou clicar no primeiro, o W3C Markup Validation e, em seguida, você pode validar por URI, que significa que você pode colocar em um endereço web aqui. Você pode fazer o upload do seu arquivo, ou nós vamos apenas fazer a validação por entrada direta. Aqui, vou colar todo o meu código e depois vou clicar em 'verificar'. Eu tenho este vermelho no topo que me diz que algo está errado e ele diz que há seis erros encontrados. Se você rolar para baixo a página um pouco, Ele vai dar-lhe os seus erros. Então, erros, produzem seis erros e diz, “Linha 13, Coluna 52: Sem espaço entre atributos E eu digo, “Ha! O que é isso?” Eu olho para isso, e talvez isso não esteja exatamente fazendo sentido para mim, mas eu sei, agora que estou procurando a linha 13 então, se eu voltar para o meu editor de texto. Com certeza linha 13 Eu já identifiquei onde está o problema, o que torna mais fácil descobrir que estou perdendo essa citação. Então, uma vez que eu percebi que eu tenho isso corrigido, eu posso salvar meu documento novamente, eu vou para Control-A ou Comando+A para selecionar tudo, Comando+C, Control-C e agora eu quero reexecutar isso. Então, o que eu posso fazer é, selecionar tudo isso, colar meu novo código e então há essa revalidação aqui e hey, agora está tudo bem. Você vai notar que ele realmente disse seis erros no último, isso é porque uma vez que você tem um erro ele pode fazer uma série de outros erros. Então, é melhor começar pelo primeiro, descobrir esse e ver se isso corrige tudo. Há dois avisos aqui, você pode ignorar avisos por enquanto, que tem a ver com o uso do tipo de doc HTML5 que estamos usando. Os validadores são realmente útil maneira de ver quaisquer problemas em seu código. Se as coisas estão ficando ruins, às vezes o que eu gosto de fazer é criar um novo arquivo. Então, aqui está um novo arquivo e eu vou selecionar tudo, movê-lo lá e então eu vou voltar para o meu arquivo antigo, isso vai parecer muito tedioso, mas o que eu faço é basicamente eu começar a ir uma linha de cada vez. Então, eu guardo isso, volto ao meu navegador e digo: “Está bem, está bem.” Depois coloco a próxima linha e digo: “Está bem, ainda está bem.” Então você basicamente vai até que você possa identificar especificamente onde o problema está, esse é um tipo de último recurso, mas às vezes você vai precisar dele. A boa notícia é que, quanto mais tempo você escrever HTML, mais fácil será para você identificar os problemas comuns ou problemas comuns que você pode encontrar, coisas como erros de digitação, coisas como atributos não citados, coisas como esquecer de fechar uma etiqueta. Eles acontecem a todos nós e meio que acontecem bastante. Felizmente temos essas ferramentas e prometo que quanto mais escreverem isso, mais fácil se tornará. Eu recomendo que o W3C procure mais coisas se você estiver procurando informações como o validador W3 e também um recurso confiável muito bom para encontrar informações sobre HTML. De alguma forma, pode ser um pouco seco e chato, mas é um recurso muito bom para ter, então certifique-se de marcar isso. Vou definir nossa página de contato de volta para o que era, copiando tudo isso e salvando. Então, agora temos um site, mas se você notar que a única maneira que você vê este site é em seu próprio computador. Mas parte do brilho da web é ser capaz de salvar nossas páginas com outras pessoas, a fim de compartilhar, vamos precisar fazer upload nosso conteúdo e vamos cobrir isso no próximo vídeo. 25. Fazendo upload de conteúdo em um servidor Web: Então, a fim de colocar suas páginas na web, você vai precisar de hospedagem na web. Há um monte de serviços de hospedagem web lá fora. Basicamente, o que isso faz, é um computador que contém todos os seus arquivos, e depois servi-lo para a Internet. Isso foi muito tempo explicando isso. Se você quiser ir em profundidade, você pode simplesmente fazer uma pesquisa para web hosting para descobrir um pouco mais. Mas, eu quero que você saiba as partes necessárias do que você vai precisar. Então, você precisará de um serviço de hospedagem na web. Alguns são mais caros do que outros, muito disso é baseado em quantos visitantes você tem para o seu site. Você pode conferir comentários de hospedagem diferente também, que é um muito bom para verificar antes de decidir qual deles você vai usar. Então, basta fazer uma busca por comentários. Podemos ver o que Techcrunch tem a dizer, e este está revisando ReviewSignal, que aparentemente nos diz um pouco sobre a comparação de hospedagem na web, então essa é uma opção. Depois de decidir qual hospedagem você deseja, você vai se inscrever para uma conta e, em seguida, você também precisará de um nome de domínio. Então, o nome de domínio é algo como techcrunch.com é o nome de domínio, jennlukas.com é o nome de domínio. Você vai decidir qual nome de domínio você quer. Você também vai se certificar de que está disponível. Domize.com é um site que você pode usar, então se eu queria registrar jonarbs. Vai procurar e dizer Jonarbs azul, então Jonarbs está disponível. Em seguida, você precisa registrar seu nome de domínio. Você também tem opções de onde você pode registrar seu nome de domínio. Então, basicamente, você quer procurar um registro de URL. Então, você pode procurar o registro de URL e encontrar um lugar. Há um monte de recursos diferentes, então certifique-se de fazer sua pesquisa antes de decidir sobre um. Uma vez que você tem um URL e uma vez que você tem hospedagem na web, a próxima coisa que você quer fazer é obter seus arquivos do seu computador para o seu host web. Você faz isso através de um programa FTP ou protocolo de transferência de arquivo. Então, eu uso um programa chamado Transmissão e Transmissão está no Mac, mas certamente há muitos programas de FTP lá fora também. Vocês notaram um padrão, há muitas opções que vocês têm. Essencialmente, o que você vai fazer é que você vai configurar suas informações de FTP, e você vai obter isso de sua hospedagem web quando você assinar isso. Então, você vai colocar seu servidor, seu nome de usuário, sua senha. Depois de ligar ao servidor, poderá arrastar a pasta do site da área de trabalho ou do computador onde quer que a tenha guardado, para as informações de FTP. Uma vez que tudo isso é feito, se alguém vai para o seu URL que você registrou como jonarbs.com, ele vai procurar um arquivo index.html em seu host web. Quando ele encontrá-lo, ele irá então exibi-lo para os usuários em sua página. Muitos desses hospedagem na web e registro de nome de domínio oferecem muito suporte ao cliente. Eu também recomendo investigar isso porque se você tiver problemas, é ótimo ter um número de telefone para ligar, um e-mail ou um chat ao vivo. Vamos perguntar a alguém como ajudar e muitas vezes eles estão realmente dispostos a fazê-lo. Então, é assim que você obtém seu conteúdo do computador para o site. Por último, vamos falar um pouco sobre os próximos passos depois disso. 26. Próximos passos: Então agora temos um site de portfólio de quatro páginas e todo o HTML é semântico. Nós validamos isso. Nós nos certificamos de que tudo está bem, e isso começa como nossa base para construir um site completo. Então agora temos todo o conteúdo na página e isso é ótimo. Não importa o tamanho da tela que você tem, ele se ajustará à sua tela, desde que as imagens não transbordem, e é muito fácil para as pessoas lerem o que está acontecendo aqui. Nós temos que aprender as coisas sem graça, a fim de chegar às coisas mais bonitas embora. Então, depois de ter seu HTML, você vai querer aplicar estilos. Você vai querer cores, texto tamanhos imagens de fundo. Você provavelmente vai adicionar largura às coisas. Vai ser realmente incrível. Eu prometo. Então, o próximo passo é aprender CSS ou folhas de estilo em cascata. Folhas de Estilo em Cascata são a camada de apresentação do seu site. Um bom exemplo de como CSS pode afetar seu site está no site CSS Zen Garden. CSS Zen Garden foi baseado no conceito de que há um arquivo HTML, e todo mundo agarra esse arquivo HTML, mas, em seguida, enviou diferentes arquivos CSS para o site. Então, se verificarmos a exibição de todos os designs, então aqui está um site e está no CSS Zen Garden, e você pode ver que ele tem conteúdo e, enquanto você rola, o plano de fundo permanece fixo. É muito legal. Vamos dar uma olhada por aqui. Isto parece muito diferente, certo? Então, aqui está outro exemplo. Legal. Aqui está outro site, e aqui está mais um. Todos estes três parecem muito diferentes, certo? Aqui está o que é incrível. Se visualizarmos a fonte de todos estes, eles são todos iguais menos uma pequena alteração de JavaScript aqui, que tem a ver com carregar as fontes. A idéia do CSS Zen Garden é que todo o HTML na página é o mesmo em todos os sites. Então você verá aqui, nós temos lixo um roa sombrio e sombrio, espalhando a estrada escura e sombria. Todos os HTML para essas páginas são os mesmos. Mas você pode ver com CSS, você pode fazer seu site olhar como você quiser. Mas com todas essas páginas têm em comum é que eles têm uma forte base semântica com o HTML que foi escrito. Bem, isso encerra a nossa introdução ao HTML. Espero que tenha se divertido muito. Eu certamente fiz. Eu acho que HTML é muito divertido, e eu espero que você continue com ele. Junte-se a mim na próxima vez na minha introdução de acompanhamento à classe CSS, e deixe-me saber sobre o que você está fazendo. Mal posso esperar para te ver na Internet.