Conheça HTML Aprenda conceitos básicos de HTML | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Conheça HTML Aprenda conceitos básicos de HTML

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

19 aulas (1 h 50 min)
    • 1. GettoknowHTML HTML

      1:30
    • 2. 1 Conhecer recursos e ferramentas HTML necessários

      3:54
    • 3. 2 Crie e atualize seu primeiro arquivo HTML

      6:35
    • 4. 3 Crie estrutura HTML básica

      5:07
    • 5. 4 Construa um modelo HTML padrão

      6:31
    • 6. 6 Usando cabeçalho para conteúdo mais legível

      6:36
    • 7. 7 parágrafos e falhas de linha

      6:39
    • 8. 8 Criando listas em HTML

      5:39
    • 9. 10 Hiperlinks e favoritos

      8:53
    • 10. 11 trabalhando com imagens

      5:14
    • 11. 13 criar tabelas

      4:44
    • 12. Estilo de CSS 14 em HTML

      9:23
    • 13. 15 Divs e vãos em HTML para melhor estrutura

      7:13
    • 14. 16 elementos HTML5 semânticos

      4:37
    • 15. 18 formulários HTML

      8:28
    • 16. 20 atributos de formulário

      6:40
    • 17. 21 arquivos CSS

      4:45
    • 18. 22 O que é JavaScript

      5:06
    • 19. Introdução de curso em HTML

      2:51
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

399

Estudantes

--

Sobre este curso

Introdução passo a passo ao HTML Explore codificação HTML e como você pode começar a criar suas próprias páginas de conteúdo da
Web é a base da internet. Aprender a criar código HTML é o ponto de partida para criar suas próprias páginas da Web e criar conteúdo web formatado em HTML.

Guia simples e abrangente dedicado a ajudar iniciantes que desejam aprender HTML e como usá-lo. Este curso orienta você todos os elementos comuns do design de web de ponta e desenvolvimento de web.

Este curso é perfeito para iniciantes à criação de páginas da web. Aprenda a criar código HTML do zero.

Passo no curso e você vai descobrir que HTML é fácil de começar com que fornecemos todos os recursos e links que você precisa. Tudo está incluído para começar rapidamente com você.


Explore tags HTML veja o que eles podem
doLearn como elementos HTML podem ser usados para estruturar e projetar sua
página da
HTMLLearn como criar tabelas, listas, formulários e
morecreate seu próprio modelo HTML
reusable o que é novo com
HTML5HTML5 para
design da web modern imagens e links ao seu conteúdo da
contentThis curso vai ensinar como criar e desenvolver páginas da web.

Estou aqui para ajudar você a aprender e responder a todas as perguntas que você possa ter. Quando você estiver pronto junte-se agora e comece a aprender a criar seus próprios sites.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. GettoknowHTML HTML: html é a base da Internet. Aprender a criar código HTML é o ponto de partida para criar suas próprias páginas da Web e criar conteúdo da Web formatado em HTML. Guia simples e abrangente Dedicado a ajudar os iniciantes que querem aprender mais sobre HTML e querem aprender a usá-lo, este curso orienta você por todos os elementos comuns de cada um para derreter, delineando web design e Web desenvolvimento. Este curso é perfeito para iniciantes. Quer um pouco mais sobre a criação de páginas da Web? Aprenda a criar código HTML do zero. Entre no curso e você verá que HTML é fácil de começar. Nós fornecemos todos os recursos e links que você precisa. Tudo está incluído para começar a explorar rapidamente tags HTML, ver como e o que elas podem fazer. Aprenda os fundamentos dos elementos html C html e como eles podem ser usados para estruturar sua página da Web. Conheça HTML. Saiba como criar tabelas, listas, formulários e muito mais. Crie seu próprio modelo HTML reutilizável. Saiba o que há de novo com o HTML cinco. Html. Cinco está pronto para o design moderno do site. Saiba como você pode adicionar imagens e links em seu conteúdo da Web. Este curso irá ensinar-lhe como criar e desenvolver páginas Web. Estou aqui para ajudá-lo a aprender sobre HTML e pronto para responder a quaisquer perguntas que você possa ter. Então, o que você está esperando? Comece a aprender. Crie suas próprias páginas da Web hoje Aderiu agora. 2. 1 Conhecer recursos e ferramentas HTML necessários: nesta lição, vou fornecer-lhes uma visão geral rápida de alguns dos recursos e ferramentas que vamos usar neste curso para criar código HTML. Então, a coisa boa sobre o código HTML é que ele realmente apenas é executado em seu navegador. Então HTML CSS, que é usado para o estilo de páginas da Web em javascript, que é usado para criar interação dinâmica para páginas da Web. Tudo isso é renderizado para fora e executado através de seu navegador para que você não precisa de nenhuma ferramenta especial a fim de criar e praticar HTML. Então essa é realmente a boa notícia. E, na verdade, desde que você tenha um navegador Chrome, você pode realmente criar uma atualização de seu código HTML diretamente no seu navegador. Então a primeira coisa que precisamos fazer é realmente criar um arquivo HTML, e vamos começar criando index dot html. E este será essencialmente o nosso arquivo padrão que o navegador vai saber para acessar e renderizar um conteúdo dentro da nossa página da Web. Eso Vamos mostrar-lhe como criar a sua própria página de índice na próxima lição. Então, para terminar sobre as diferentes ferramentas que existem lá fora. Então, há muitos editores gratuitos diferentes. Você provavelmente já tem algo em seu computador agora que você pode usar para renderizar e criar código HTML. Se você está procurando um bom editor de texto, que é de código aberto fornecido pela Adobe, então não há custo para ele. E é um editor muito bom quando você está começando e você pode criar Ah, muitas coisas realmente legais com este editor. Então, como você pode ver aqui, você pode escrever algum HTML. Você também pode atualizar sua taxa CSS dentro da linha e muito mais Então isso está disponível entre colchetes Io e eu vou estar usando colchetes. Eu devo minha aplicação colchetes dentro deste curso em swell e outro recurso realmente bom . Algo vai estar usando é caneta de código i o. E a coisa realmente legal sobre Code pen é que ele me permite escrever código html, e eu posso realmente vê-lo renderizado uma taxa dentro da página abaixo ou dentro da área de exibição . E como mencionado anteriormente, CSS e JavaScript também estão disponíveis dentro de caneta de código e qualquer coisa que estamos digitando dentro de nosso CSS. Então, depois de olhar para HTML e você entender os conceitos básicos de HTML, você pode progredir para CSS e sair em algum estilo e, em seguida, é claro, JavaScript para alguma interação dinâmica. E como você pode ver aqui o quê? Estamos focando em HTML dentro deste curso. Então eu tenho alguns html básico lá. Também posso mudar as opiniões aqui. Então, se eu quiser ter uma visão lateral aqui na área de exibição aqui no lado direito, eu posso fazer isso também. Você também pode minimizar o CSS e JavaScript e realmente se concentrar apenas em que html. Então, como você vê, o que quer que você direita aqui fora do lado esquerdo, então você vê sendo exibido aqui dentro do lado direito. Então, qualquer mudança ou qualquer sintaxe HTML E, claro, nós vamos estar cobrindo isso cada um. Então este é o título um eso Existem diferentes tipos de títulos e estes ar apenas pré-estilos para o texto de saída. E como você pode ver uma vez que eu digitar que aqui aparece aqui no lado direito, você também pode salvar aqui na caneta código e isso lhe dá a capacidade de acessar em um ponto posterior . Basta ter em mente se você está usando a versão gratuita que esta é acessível publicamente. Basicamente, estes são os recursos que vamos usar. Então código caneta e colchetes io e nós vamos estar criando fora e também cromo como nosso navegador e essas ferramentas antigas únicas que precisamos para mostrar e demonstrar como você também pode começar a escrever seu próprio código HTML. Então, a próxima lição vamos mergulhar e começar a olhar para a criação de código HTML na criação do nosso primeiro modelo HTML. 3. 2 Crie e atualize seu primeiro arquivo HTML: nesta lição, eu vou mostrar a vocês como criar um modelo HTML, e nós vamos entrar no básico do que HTML é. Então, primeiro de tudo, nós realmente precisamos criar um arquivo a fim de escrever nosso conteúdo em Então eu estou em um computador Windows . Este é o lugar onde eu vou estar criando minha página índice meu índice dot html página eso precisamos criar esse arquivo inicial que vai manter o nosso conteúdo HTML para que possamos ir para esse arquivo através do navegador renderizado para fora e realmente C r html conteúdo visível dentro nossa página. Então você provavelmente já tem as ferramentas dentro do seu computador para criar um arquivo. Se você não fizer isso, então você pode ir em frente e usar colchetes e simplesmente tudo o que precisamos fazer para começar é criar uma marca que você arquivar. Então eu vou apenas criar um novo arquivo, e agora eu vou salvar este arquivo é um arquivo completamente em branco, e eu estou abrindo. Portanto, certifique-se de que você tem o caminho correto lá que você está salvando também. Então eu estou salvando, e uma boa prática para entrar ainda é começar oito e sua página inicial onde você quer que seu site rebocar lançamento deve ser chamado index dot html. Então, especialmente se você estiver fazendo uma página HTML. Este é o lugar onde o servidor vai entender que esta é a página de rota, e se não houver outra página especificada a não ser por padrão, ele irá renderizá-la. Então, isso é para quando o servidor está em execução e ele está procurando um ponto de partida para o seu domínio. Ele vai olhar para esses arquivos de índice, a fim de iniciá-lo, encontrar um ponto de partida para o seu arquivo. Então, agora que criamos isso, podemos ir e podemos acessá-lo dentro do nosso navegador e como vemos não muito acontecendo ainda porque não temos nenhum código HTML ainda dentro da nossa página. Então, como eu disse, existem diferentes maneiras que você pode trabalhar com seu código s para que possamos ir em frente e podemos abrir o editor dela enfraquecer o conteúdo do tipo no editor para que eu possa começar a digitar algum conteúdo aqui. Eu digo que eu poderia ir aqui, atualizá-lo, e eu posso ver meu código HTML recebendo saída dentro da página e você provavelmente está dizendo, Bem, espere um minuto. Este é um código HTML porque tudo o que você fez foi criado um arquivo chamado índice dot html, dada extensão de HTML e apenas digite hello World. Então isso é verdade porque o que a maneira que o navegador realmente funciona é que quando ele vê esta extensão HTML, então ele sabe que ele deve tentar renderizar isso como código HTML. E se não houver nenhum HTML que envolva esse código, então ele só lê isso como texto normal que você deseja saída dentro de sua página da Web. E é por isso que somos capazes de ver Olá Mundo como eu digitei. Então, uma das coisas que eu quero mostrar a vocês também é como você pode realmente atualizar seu código diretamente no seu navegador. Salve esse arquivo para que você tenha a capacidade de ver o que está sendo exibido. Assim como o que vimos Code Pen, onde podemos ver e fazer algumas atualizações, e então podemos apenas atualizá-la para que não tenhamos que sempre virar para trás e para frente entre nosso navegador e nosso editor. Então vá em frente e abra esse arquivo que você criou índice dot html para que ele possa ficar completamente em branco. Abra-o em seu navegador, e espero que você tenha o chrome instalado em seu sistema. E se você não fizer isso, então o chrome é um navegador muito bom para instalar, porque ele lhe dá muita flexibilidade. Eso Vamos em frente e abrir esse arquivo no cromo e dentro do cromo. Temos o que chamamos de ferramentas surdas e você pode abrir isso de novo. Estou em uma máquina Windows, uma mudança de controle I. Mas você também pode abrir isso dentro do Max. Você pode ir para as configurações aqui, e você pode ir em mais ferramentas, e você tem ferramentas de desenvolvedor também. Então, várias maneiras diferentes de acessar esse mesmo console. E quando você clica nessas ferramentas de desenvolvedor, você verá que você tem esse painel de desenvolvedores que se abre e eles têm um número de guias. Aqui no topo, você tem elementos, então basicamente sob elementos, vemos todo o nosso código. Então eu só o fiz maior bem em ordem, então é melhor ver dentro deste curso. Mas dentro de elementos sob a tag elements, você pode ver que você tem todo o código-fonte lá, então é automaticamente como mencionado antes, mesmo que eu não tenha isso no código-fonte, ele está realmente tentando adicionar alguns h dois mil, e eu vou estar explicando isso, bem como nós progredir através do curso ou para nós progredir através da lição. Portanto, há uma série de outras guias realmente importantes aqui dentro das ferramentas do navegador, e outra que queremos ver são fontes, então fontes fornece um caminho completo para onde seu arquivo está localizado. Então, vemos que este arquivo está localizado no meu KK Drive sob a pasta Websites em Folder Course, e é chamado index dot html. Então ele me dá o caminho completo, e a coisa realmente legal sobre o Chrome é que eu posso adicionar uma pasta ao meu espaço de trabalho. Então eu apenas cliquei aqui com o botão direito para que você possa clicar nele e selecionar adicionar pasta ao espaço de trabalho . E uma vez que fizermos isso, então não há necessidade de ter certeza de que especificamos a pasta que eu queria adicionar. Então vamos até a pasta e clique em OK, e ele vai pedir que você dê acesso a ela. Eso novamente Certifique-se de que você não expor uma informação insensível, porque agora isso vai ser comunicado através do navegador. Então eu vou ir em frente e sentar selecione permitir. Agora eu posso ir para baixo para as diferentes pastas que eu adicionei aqui, eu posso selecionar esse arquivo de índice para que este eu possa fechar este aqui porque agora nós podemos trabalhar fora deste, e eu posso ir em frente e fazer uma atualização. Diga isso. Atualize-o e eu tenho minha atualização ao vivo. Então estamos todos configurados e prontos para ir agora para começar a digitar algum código HTML. E, claro, se você quiser trabalhar com seu editor, você pode trabalhar com isso também. Então, na verdade, não importa onde você está colocando seu código HTML porque ele vai ser o mesmo arquivo. Então, isso é apenas maneiras diferentes que podemos acessar o arquivo e digitar nosso código HTML. Então, a próxima lição vamos saltar para iniciar o nosso modelo de página. Então este vai ser um modelo padrão que podemos usar uma e outra vez, e podemos usá-lo para ajudar a estruturar melhor nosso código HTML. Então está chegando na próxima lição. 4. 3 Crie estrutura HTML básica: Na última lição, vimos como podemos acessar nosso arquivo HTML recém-criado, e vimos como podemos começar a atualizar o conteúdo desse arquivo de várias maneiras diferentes e dentro da lição. Dentro das próximas lições, eu realmente vou estar usando meu navegador Chrome para atualizar meu HTML porque desta forma , nós podemos realmente ver o que está acontecendo aqui na página ao vivo s. Oh, isso vai ser uma ótima maneira de fazer isso. Nós realmente não temos que inverter entre o editor e o que nossa saída de código HTML vai ser para torná-lo um pouco maior aqui também, que possamos ter uma melhor visualização do que realmente está sendo exibido aqui para ver que Temos o caminho completo lá. Você também pode usar seu editor aqui. Eso Na verdade não importa porque tudo o que estamos fazendo é escrever para este arquivo HTML. Então, cada bom cada arquivo Mel precisa de algum código HTML. Então vamos começar a criar algum código. E vimos aqui quando olhamos para o código-fonte que o como os navegadores realmente renderizando isso, ele está configurando isso dentro de uma estrutura html Então nós temos este html abrindo html fechamento. Temos essa abertura da cabeça, fechamento da cabeça, abertura do corpo e fechamento do corpo. E isso é o que é Este é o ar o básico do que HTML é. Temos uma Siris de abrir e fechar tags, e está essencialmente construindo uma estrutura. Então todo o nosso conteúdo HTML em todo o código html está indo entre as duas tags HTML de abertura e fechamento que temos ah, seção de cabeça. Assim, a seção de cabeçalho contém meta informações links para algum estilo e assim por diante. Então é aqui que você coloca todas as informações que essencialmente o navegador estaria usando para renderizar o conteúdo da página. E então, na verdade, o conteúdo da página estaria sentado entre o corpo assim entre o corpo de abertura e o imposto sobre o corpo de fechamento . Então esta é a estrutura adequada de cada templo para este mundo olá. Então vamos em frente e atualizar nosso código, a fim de refletir melhor isso e nós não vamos realmente ver nada diferente. Tudo o que vamos fazer é formatar que html do que HTML tags adicionando aqueles em e uma coisa importante a observar aqui com tags HTML. Na verdade, não são sensíveis a maiúsculas e minúsculas, então eu poderia fazer algo como minúsculas. Eu posso fazer maiúsculas, então isso realmente não importa. Mas fora de boas práticas, na maioria das vezes você vai vê-lo como minúsculas porque esta é a melhor maneira de formatar. É para que você não queira ter todos esses caracteres maiúsculos. Então, fique com a minúscula, mesmo que seja, não importa qual caso você está usando. Mantenha-se em minúsculas quando estiver escrevendo seu código HTML. Apenas as melhores práticas. Também aqui vamos colocar o meu corpo, por isso envolva-o com o corpo a fechar. Então o que? A ideia também? Isso é só ter em mente? Sempre que abrir uma etiqueta, certifique-se de que a fecha. Então lá vamos nós. Então agora nós temos essencialmente, nós escrevemos nosso HTML no mesmo formato que nosso navegador está esperando que ele pareça de onde ele está renderizando algum conteúdo aqui no meio para que quando eu atualizá-lo, nós realmente não vemos nada diferente. Se eu entrar no meu editor, vemos que nós o elegemos apropriadamente e uma das coisas sobre editores uma das coisas realmente legais sobre editores é que eles têm algumas funcionalidades adicionais. Então coisas que você não está recebendo dentro do navegador e você vê que nós temos estes Chevron abertura e fechamento que podem abrir e fechar as diferentes tags abertas e fechadas . E esta é uma maneira melhor de dar uma visão geral rápida do HTML. Então vamos cobrir mais uma vez o que cobrimos nesta lição. Sabemos que com tags HTML onde estamos configurando tags e dentro dessas tags onde temos conteúdo e você percebe que temos tags aninhadas em outras tags. Então o HTML é a tag pai, e isso ajuda o navegador a entender que estar esperando algum conteúdo HTML aqui e a primeira coisa que vai olhar para sua cabeça. Então ele vai olhar através de qualquer conteúdo que você colocou dentro da seção principal. Então, se você tem algo aqui, é aqui que você tem o conteúdo da cabeça, e em seguida, ele vai para o corpo. Então, três peças essenciais, um recipiente médio em partes essenciais para uma página HTML e para sua estrutura HTML. Na próxima lição, vamos mostrar-lhe como você pode adicionar algumas informações meta adicionais e também como você pode adicionar algumas informações de cabeça para que o navegador realmente tenha algo mais para consumir e entender melhor o que tipo de documento HTML e o que ele poderia estar esperando para renderizar. Então isto é o que está por vir na próxima lição. 5. 4 Construa um modelo HTML padrão: na lição anterior, apresentamos as tags HTML. Vimos que as tags têm um conteúdo de abertura e fechamento aninhado entre essas tags. Então este conteúdo entre as tags, isso agora é considerado um elemento porque ele tem conteúdo aqui e qualquer coisa dentro aqui é parte desse elemento, de modo que cada elemento pai da equipe L tem várias outras tags aninhadas dentro dele. Então tem algumas crianças aqui, então tem a cabeça, tem o corpo, e esta é a estrutura padrão de qualquer página HTML. E agora vamos adicionar alguns detalhes mais específicos ao conteúdo. Então isso não vai ser algo que é consumido pelo usuário. Mas isso é realmente destinado a ajudar o navegador a entender melhor o que queremos saída e que tipo de conteúdo ele pode realmente estar esperando. Então, normalmente dentro de uma página da Web, você precisa adicionar Tipo de DOC e Tipo de Doc ajuda especificar que tipo de documento é Agora eu sei que nós nevamos que é um documento HTML por essa extensão, mas também DOC Type pode especificar qual versão do HTML o navegador deve ser esperando quando ele está renderizando isso e quando nós especificamos doc tipo HTML este essencialmente, este é o mais recente HTML cinco tipo de documento. Então, basicamente, esta é apenas uma mensagem escondida para o navegador. Quando ele lê o arquivo para dizer, OK, eu sei o que eu deveria estar esperando aqui. Estou esperando html cinco conteúdo. Então, em seguida, vamos para a seção de cabeça, e muitas vezes você vai ver que você tem este tipo de estrutura de árvores onde você tem isso em Dent, onde você tem marcas aninhadas são recuadas entre as tags pai, e assim isso é feito para legibilidade. Então, sempre que temos um monte de conteúdo aqui onde estamos abrindo e fechando as tags, queremos aninhar esse conteúdo aqui e isso é novamente para legibilidade torna muito mais legível e mais fácil de digerir. Especialmente tem um monte de envelheceu-o acorde para que você possa rapidamente olhar sobre ele e dizer, Ok, bem, esta é a cabeça. Aqui está o aberto. Aqui está o fim. Então nós temos isso em que parece meio deitado aqui, então sabemos que qualquer um desses abrindo e fechando o ar com as mesmas linhas que podemos esperar um corpo fechando quando temos o corpo aberto nessa linha. Então, voltando para a cabeça, há também algumas informações meta que eu mencionei e meta informações novamente ajuda o navegador a entender melhor o que esperar. Que tipo de saída esperar. Então sabemos que pode haver conjuntos de caracteres diferentes. Então, como cada tim off code é universal, sabemos que às vezes não estamos escrevendo caracteres ingleses, e é aqui que você pode especificar que tipo de caractere X disse que a página da Web deve estar esperando na saída eso meta informações. Também podemos incluir coisas como uma descrição da página. Podemos incluir chave usa autor e assim por diante, para que você veja que algumas dessas coisas geralmente são incluídas em páginas da Web. Vamos olhar para este aqui? Então nós temos o nosso conjunto de caracteres meta utf oito. Ele também está especificando uma porta de exibição, Então isso é para dispositivos móveis para tornar sua página da Web mawr flexível e responsivo em tamanhos diferentes. Também vemos que temos todas essas meta propriedades, então todas essas informações são meta informações para ajudar no rastreamento de mídias sociais. Então, quando estamos compartilhando a página e Facebook ou Twitter vê a página da Web, eles podem extrair essa informação o conteúdo da página realmente facilmente. Então é por isso que todas essas coisas estão incluídas. Então ele sabe que parece um monte de informações, mas essencialmente é repetitivo, e está essencialmente ajudando a orientar ao longo de qualquer aplicativo que possa estar olhando para sua página da Web . E também vemos que estamos vinculando arquivos externos, alguns arquivos de origem e assim por diante. E essa é a maior parte do que está contido na maioria dos cabeçalhos de qualquer página da Web. E também vemos mais um aqui onde temos o título. E assim título é outra coisa que é realmente importante para incluir dentro de cada site. Repare aqui no canto superior esquerdo. Minha guia só tem o nome do arquivo, e ele está fazendo isso porque nós realmente não definimos um título. Então eu vou dar-lhe um título de html aprendido e vamos fechar isso e dizer isso. E agora, quando eu atualizá-lo, veja o que acontece aqui em cima. Vemos que agora temos aprender html. Embora eu saiba que disse que o conteúdo da cabeça não será visível pelo usuário. O título é a única exceção aqui porque o título também é usado dentro das informações meta . É por isso que fica na cabeça. E é por isso que nós realmente somos capazes de vê-lo porque é um título. Você também pode vê-lo quando os mecanismos de pesquisa estão indexando seu arquivo. Muitas vezes, eles vão configurá-lo e usar esse título para representar essa página. Então, para os propósitos S E O título também é muito, muito importante. Aqueles de vocês que não estão familiarizados com o CEO da S. E. E. O S é a otimização do motor de busca. E, essencialmente, esta é a prática de tentar fazer com que suas páginas da Web se classifiquem melhor nos mecanismos de busca. Então título super importante para S. E. O. Certifique-se de que seu título é significativo Faz sentido com o resto do conteúdo de sua página da Web. Não dê um nome genérico ao título. Certifique-se de que é relevante para o conteúdo da página Web. E a seguir vamos olhar para o corpo. Então, essencialmente, nós já digitamos algum conteúdo corporal aqui, e vemos que temos nosso hello world s. Então isso é o que está sendo processado. Então, a próxima lição vamos saltar para o conteúdo que pode ser transformado para fora no corpo. Portanto, este será aquele conteúdo visível dentro de quatro anos de usuários para que esses usuários consumam esse conteúdo quando visitarem seu site. E é aí que as coisas vão começar a ficar realmente interessantes porque nós vamos realmente mudar o que está recebendo saída na página. Então isso está chegando na próxima lição. 6. 6 Usando cabeçalho para conteúdo mais legível: nesta lição, vamos falar sobre cabeçalhos, então cada boa página da Web, você vai ver que quando você vai a qualquer site, nós temos estrutura de página, então nem todo o conteúdo tem a mesma aparência. Temos algumas palavras que são maiores, algumas palavras que são negrito ID e apenas algumas que realmente se destacam mais do que outros textos. Então, você vê em qualquer página da Web, temos uma variedade de conteúdo, e ele é estruturado de várias maneiras diferentes, a fim de melhor separar esse conteúdo . Portanto, é mais consumível para quem visita o site. Então nós vemos, mesmo aqui, há usos de imagens e assim por diante, e eu vou mostrar a vocês tudo isso e como adicionar imagens à medida que avançamos no curso. Mas a primeira coisa que eu queria mostrar a vocês é como fazer tanques de cabeçalho e cabeçalho para que tags de cabeçalho em html, tags de cabeçalho em html,na verdade haverá seis tamanhos diferentes de cabeçalhos e cabeçalhos são usados a fim de definir partes importantes do seu página da Web e também títulos um realmente importante para s selo ea razão sendo assim, se olharmos para algum conteúdo aqui e temos um pouco mais de conteúdo aqui, logo abaixo. E depois temos o “Olá Mundo” outra vez. E vamos apenas dizer isso e refrescá-lo. Então, qual conteúdo realmente salta para você quando você olha para a página da web, você vê que Olá Mundo salta para você, na verdade é diferenciado do resto do texto, e nós sabemos que isso é realmente importante. Então isso pode representar que tipo de conteúdo está realmente abaixo dele. Isso também pode representar o conteúdo da página da Web e assim por diante. Então, a idéia aqui é que queremos destacar conteúdo importante dentro de suas páginas da Web e também voltar para os títulos de S. E. E. O são super importantes. É para fins de seo. E a razão é que é o CEO. Então os motores de busca estão indo, e eles vão ler todo o seu conteúdo e eles vão ler através. E uma vez que eles acertem estes, cada um deles eles vão saber que cada um deles se destaca do resto do conteúdo. Então isso significa que o conteúdo contido aqui é super importante. É mais importante do que o resto do conteúdo. Então é aqui que você coloca suas palavras-chave para Seo e assim por diante. Eles provavelmente estão dizendo Ok, bem, por que eu não faço tudo para cada um? E a razão é que na verdade não aguentaria um pouco. E também, para melhores práticas, você quer realmente enfatizar em Lee algumas palavras-chave que serão relevantes para o conteúdo da página web. Então você quer fazer coisas que são boas para os usuários que vêm em, bem como bom para os motores de busca como a sua indexação sua página web. Então você tem que pensar que a parte mais importante é que você quer que seus usuários tenham uma boa experiência. Então deixe-me mostrar-lhe alguns tamanhos adicionais para cada tag. Então também há hte. Então eu ia digitar cada um para, e você vai ser capaz de ver a diferença entre H e H dois como nós os salvamos . Então eu tenho que voltar e atualizá-lo para ver que o H dois é um pouco menor. Ele não salta para fora, não se destaca tanto quanto o H 1, e podemos ir até H3. E a ideia aqui é que estamos progredindo cada vez mais pequenos. Então estamos começando com nossas primeiras tags principais. Nossa categoria principal. Nossa informação principal será H 1. E então, à medida que descemos , podemos ter envelhecido também, então podemos ter um número de H dois. E então, então, esses subtítulos de ar fora do cabeçalho principal eso mesmo em vez de chamá-los cada para, Vamos apenas chamá-lo de subtítulo e subtítulo e vemos que agora uma vez que eu salvá-lo. Então agora temos essa quebra do conteúdo e ele está realmente começando a se separar. Vemos o que está sendo enfatizado e como o ar de uso vindo na leitura disso. Sabemos que se este qualquer conteúdo aqui é e subtítulo para se ele está em cada um para e isso chama a nossa atenção do que continuamos lendo, se não estamos interessados neste subtítulo, vamos para o próximo subtítulo grande e assim por diante. E nós estávamos usando H três dedos mais detalhar o conteúdo. Então, normalmente você não vai vê-lo usado desta forma porque teríamos subtítulo e teria algum conteúdo e , em seguida, alguns h três. Então você incrementa progressivamente que cada valor até chegar até seis muitas páginas da Web, você sabe, realmente não vai ver muitos títulos passando talvez quatro no máximo, porque a idéia é que o estrutura é que cada um vai ser o maior título. E então os dois H são usados para separar o resto do conteúdo. E se você quiser, quebrar sobre esses pedaços de conteúdo embaixo de cada terça-feira, então é onde usado oito três e assim por diante. E então o A H três é que você usaria em você separar o conteúdo de cada três h quatro e assim por diante. Então esses seriam subtítulos desta idade três e todo o caminho para baixo. E como você pode ver que eu apenas começar a quebrar isso, você vai ter um texto muito, muito menor, menos texto enfatizado e também, vai ser muito ouvido falar. A menos que tenha um conteúdo tónico e um submarino de Thana para chegar ao H6. Então, use esses cabeçalhos, usou os elementos de cabeçalho tags sabiamente para separar seu conteúdo e representar melhor o seu conteúdo. E como você pode ver aqui quando você está vindo aqui, você pode ver que quando nós inspecionamos este aqui, nós podemos ver que estes ar h dois e esta página tem. Então estes são os dois H, e nós também podemos ver que se há um H três e assim por diante. Então esta página é dividida com H dois h dois e oito três, ar os menores e assim por diante. Então, quando você está olhando para a página, esses saltam mais do que esses são sequencialmente, menos importantes. Mas eles ainda estão sendo enfatizados como áreas diferentes dentro da página da Web. Então, a próxima lição vamos olhar para MAWR estruturando com sua página da Web, parágrafos, parágrafos, quebras de linha e assim por diante. E isso é tudo para representar melhor e tornar seu conteúdo de texto mais digerível para seus visitantes da Web. Então está chegando na próxima lição. 7. 7 parágrafos e falhas de linha: até agora dentro do nosso texto dentro do nosso documento HTML, nós realmente não temos um monte de texto, e é por isso que os cabeçalhos realmente não fazem muito sentido porque nós estamos realmente apenas separando e nós estamos apenas segurando algumas coisas e nós Não tenho nada no meio. Então o que eu quero fazer nesta lição é que em algum texto fictício e texto fictício é realmente importante quando você está projetando sua página da Web, e você realmente queria torná-la adequada e realmente olhar como uma página web riel . Então vamos adicionar um grande pedaço de texto fictício. Divertido texto cego gerador ponto com número diferentes recursos on-line, a fim de gerar algum texto fictício. Então Laura Ipsum é um texto que realmente parece riel. Mas, na verdade, não é a língua inglesa. É apenas texto Laura Mitsu, então é basicamente usado para manter o lugar dentro do design do site. Então vamos em frente, e eu vou me livrar de alguns destes ritmo todo o texto em salvar e atualizá-lo. Então lá vamos nós. Então agora temos nossa página da Web. Temos um grande pedaço de texto e bem, não parece muito bom. Eso alguém entrando neste site. Ah, muitas vezes, se você vê algo assim, você não vai ler através dele porque é apenas muito texto e visitantes da Web, eles não gostam de tipo isso. Você tem menos de cinco segundos para realmente capturar a atenção de um usuário em um site, então sempre certifique-se de que ele não é muito esmagador. Algo assim é esmagador. E é aqui que estruturamos nossa página ainda mais, usando elementos como parágrafos ou tags como tags de parágrafo. Então, essas marcas de abertura e fechamento de ar novamente. E basicamente é apenas quebrar seu conteúdo e torná-lo mais digerível. Então veja aqui que quando eu adicionar em parágrafos imediatamente, I esta primeira frase, parece mais legível, mais apresentável. Na verdade, eu vou pular aqui, e eu vou adicionar as tags de parágrafo aqui porque isso foi muito longo, e eu não quero rolar todo o caminho para cima. Então eu vou desmontar isso em alguns parágrafos e alguns pontos aleatórios aqui, e eu vou mostrar a vocês como eu posso transformar magicamente isso para ser muito mais legível. E também certifique-se de que quando você está abrindo seu também fechamento e parágrafos. Não incluo parágrafos em outros parágrafos, portanto, não aninhe um parágrafo dentro de um parágrafo. Alguns navegadores não aceitam bem isso. Eles vão lançar um erro. Eso às vezes apenas certifique-se de que você está mantendo-os separados. Então agora apenas um pouco mais legível Entre parênteses, você pode embelezar o código, para que ele seja mais legível dentro do código. Então basicamente isso em parágrafos e podemos ver que agora quando eu vou para a página da Web e atualizá-lo, é muito mais digerível para um usuário entrando. E então você coloca alguns títulos. Essa é uma ótima maneira de separar esse conteúdo. E então, se eu tivesse esse conteúdo era talvez algo em relação a olhar para isso e talvez aqui se tivéssemos de site sobre animais de estimação. Se tivéssemos gatos aqui abrindo, fechando, lembre-se sempre de ter aquelas etiquetas abertas e fechadas, e então talvez este parágrafo poderia ser sobre cães e assim por diante. E quando eu atualizá-lo e eu entro no site, ele realmente parece algo que é bastante fácil e simples. Então, se eu estou entrando na página da Web, se eu estou pensando que eu quero olhar sobre gatos, então eu sei onde eu vou imediatamente. E eu posso começar a ler isso em vez de ter que olhar para cima como um enorme bloco de apenas texto normal. Sei onde preciso ir para encontrar o que procuro. Então também, se você notar aqui que com parágrafos estavam realmente quebrando esse conteúdo Então há um pouco de formatação lá onde temos o parágrafo inicial final do parágrafo . Temos um novo parágrafo começando novo parágrafo terminando, e temos esse espaçamento entre nós. E também vemos que aqui enquanto estamos embrulhando o texto, não temos espaçamento. E você pode realmente fazer isso dentro de seu código HTML também. Então, se eu tivesse um parágrafo muito longo aqui, e se eu quiser separá-lo um pouco, eu posso adicionar quebras de linha. Então estas são apenas tags br. E sempre que eu atualizá-lo, vemos que temos essa quebra de linha, que é diferente de um parágrafo, porque não temos formatação ou estilo adicional que está sendo adicionado em tudo o que estamos fazendo é adicionar e retornando o personagem a um novo papel, e isso é tudo o que está fazendo aqui. Portanto, sem formatação adicional. E esta é outra maneira que você pode separar seu texto, torná-lo mais consumível e mais fácil de ler. E uma coisa que notamos aqui com as quebras de linha, não há quebra de linha de fechamento. E isso porque as quebras de linha são um tipo diferente de cada equipe de tag, onde elas estão apenas inserindo, inserindo informações sobre como essa página é renderizada. Então não há realmente nada que você poderia realmente colocar na quebra de linha porque não há conteúdo em uma linha. Quebrá-lo apenas essencialmente, como os navegadores renderizar ganhando fora. É uma quebra de linha. Ele sabe o que fazer. Significa que isso passou para a próxima linha e faz a mesma coisa. Então é essencialmente mais obras, mais como um comando, e permite que o navegador Teoh, renderize esse conteúdo como esperado. E como o desenvolvedor da Web projetou para olhar. Então, a próxima lição vamos olhar para adicionar ainda mais para montagem e estrutura. Então, se você tinha algo onde você tem uma lista de itens em uma lista de conteúdo. Você quer uma lista que conteúdo para fora e ter todo tipo de bloco juntos. Então é aqui que podemos usar um Norden listas e listas dentro HTML. Então aqueles que eu vou te mostrar na próxima lição. 8. 8 Criando listas em HTML: para esta lição. Quero mostrar-lhe e apresentar-lhe listas em listas ordenadas e listas ordenadas. E para esta lição, eu vou estar usando código pin porque eu quero mostrar a vocês Kyle, nós podemos construir uma lista de itens e eu realmente quero me concentrar nesses elementos específicos dentro do HTML. Então lista ordenada está representando uma lista ordenada. É uma etiqueta L antiga. Então, novamente, abrindo lista ordenada de fechamento. E nós temos algum conteúdo aqui, então eu tenho 123 e quatro. Então, enquanto nós salvamos isso, nós vemos Bem, isso realmente não se parece com uma lista porque nós temos um monte de conteúdo aqui e ele nem sequer representa como nós gostaríamos que uma lista representasse. Isso é apenas essencialmente fazer uma linha de código, e é apenas para fora colocar algum conteúdo no meio. E isso não é realmente uma lista. E o que está faltando dentro disso para torná-lo realmente uma lista, você precisa ser capaz de separar cada um desses itens aqui, e nós precisamos ter um ponto de partida e um ponto final para que o navegador saiba qual o conteúdo do lista é assim todos os itens diferentes na lista e é aqui que os itens da lista entram e a tag é L I para um item da lista, e estes novamente estão abrindo e fechando. Então certifique-se de que quando você está esperando que seu fechá-lo e nós vemos que olhar o que está acontecendo aqui. Já estamos recebendo isso por montar chegando. Já está começando a parecer uma lista e os navegadores lançando automaticamente este aqui, e está representando nosso primeiro item da lista. Então vamos ver o que acontece à medida que transformamos o resto destes em itens de lista. Então vemos que ele representa que corta um número dois lá. E agora vamos fazer outro aqui. E o que você acha que vai acontecer quando eu fechar este item da lista? Nós temos o número três e o item da lista número quatro, e vemos que esta é outra semana que podemos extrair conteúdo e torná-lo mais significativo em nossas páginas da Web para visitantes da Web. Então, criando uma lista realmente simples, direta, e você provavelmente está se perguntando, ok, bem, se minha lista E se eu não quisesse esses números aqui? E se eu quisesse outra coisa como se eu quisesse cartas, por exemplo? Então, às vezes, você vê listas com letras, e podemos mudar isso facilmente. As letras fazendo tipo oito e isso é tudo construído com HTML s. Oh, isso é apenas algo que o navegador entende que uma nova lista ordenada tem a capacidade de mudar diferentes tipos de lista, eo que nós temos introduzido agora é um atributo. Então, passando por cima e como estamos especificando um tipo igual a A. Esta é uma informação adicional que está contida na lista ordenada. Então não estamos onde não estamos mais esperando que listas ordenadas padrão, que é o sistema Eric Value que estavam realmente especificando que tipo de lista estavam esperando. E há vários tipos diferentes de listas para que eu possa fazer letras maiúsculas. Posso fazer algarismos romanos. Eso deixa o ar todo mudando, e vemos este ar todo atualizando aqui. Posso até fazer maiúsculas I para os algarismos romanos maiúsculos. Então, dependendo de como você quer que esta lista pareça, você pode fazê-lo de várias maneiras diferentes e você provavelmente está se perguntando, OK , bem, se eu não quiser começar com uma? E se a minha lista começar às cinco, por exemplo? Então este é outro atributo, e nós poderíamos ser realmente específicos onde queremos que esses números comecem. Observe que numeral romano 5678 E aqui é onde podemos especificar como nossa lista está começando. Também podemos voltar às cartas. Podemos iniciá-los no E, que é a quinta letra F g h, e assim por diante. Portanto, note que isso está nos dando muita flexibilidade em nossa produção. Então, há também outro tipo de lista, então às vezes você não quer um pedido. Sua lista. Você quer criar uma lista e você não tem certeza de quantos itens Aaron a lista e assim por diante. Talvez marcadores seja algo que seja bom o suficiente para produzir aqui em vez desses números , e estes são o que é conhecido como listas não ordenadas. Então você l para um ordenado listas, e também precisamos desses itens de lista lá. Então, tudo o que precisamos fazer para criar uma lista ordenada e atualizá-lo para ele um nordeste mudar o velho para au e lá vamos nós. Então transformamos este em uma lista de palavras conhecidas. Não precisamos especificar esses atributos porque já temos nossos marcadores e isso é um padrão para uma nova lista ordenada. Então, se você está criando 900 listas, você só vai estar usando os marcadores. Então, a próxima lição nós vamos olhar para MAWR sobre atributos porque este foi um giro interessante em nossas tags típicas de abertura e fechamento, porque agora nós fomos capazes de obter mais específicos e adicionar informações adicionais sobre como nós deseja que o conteúdo seja emitido. E esse é o propósito dos atributos é ser mais específico dentro desses impostos html. Então, se precisarmos de Todd em detalhes, nós os fazemos por atributos, e vamos olhar mais de perto os atributos na próxima lição. 9. 10 Hiperlinks e favoritos: nesta lição, vamos estar olhando para partes essenciais do que realmente faz a Internet, a Internet, e o que é usado para conectar todas essas páginas juntas? Assim, qualquer página da Web que você acessar, você vê que você tem links clicáveis e links são essencialmente como os navegadores da Web e como os usuários da Web podem navegar de uma página para a outra. Então, se você for a esta página, ela não tem o que você está procurando. Você procura links para clicar e mover para a próxima página é até mesmo motores de busca apenas uma coleção de links, e é assim que nós realmente rastejar através e nós movemos navegar através da web. Portanto, os links são super importantes quando se trata de páginas da Web. Então vamos abrir nosso navegador aqui. Nós temos o arquivo de índice que estávamos trabalhando, e eu vou mostrar a vocês como fazer essencialmente diferentes tipos de links para que você possa realmente vincular dentro de uma página. Então, se eu tenho, tipo, uma tonelada de conteúdo e eu vou realmente copiar algum conteúdo mesmo Mawr aqui, e eu tinha alguns parágrafos aqui, e eu tenho um monte de conteúdo aqui. Agora que eu posso adicionar na minha página web indo para a minha página web, eu vou adicionar isso em. Vou fazer com que pareça agradável. Embelezar. E eu sei que tenho um monte de conteúdo aqui. Então o que eu quero fazer dentro desta página agora é eu quero adicionar em alguns piscar de olhos. Por isso vou fechar este por enquanto. E vamos olhar para a nossa página web. Então eu tenho uma tonelada de palavras aqui e nós precisamos rolar para baixo para encontrar informações adicionais e assim por diante, alguns realmente torná-lo maior. Então, ampliando. Então vemos que precisamos fazer um pouco de rolagem para chegar ao fundo. Eso pode estar no fundo. Podemos ter algo dentro desta página da Web e podemos ter área sobre pássaros. E o que queremos é que o usuário seja capaz de entrar e navegar até a parte da página da Web que ele está procurando. E podemos fazer isso através de links e vamos configurar esses links. Então vamos voltar para nossa página da Web e, idealmente, queremos os links no topo, então links são apenas uma abertura. Fechando A e vamos fazer isso gatos e vamos fazer mais um cachorros. Mas isso não deveria ser cães, mas isso deveria ser uma ligação com cães. Não aquela etiqueta de cachorro, mas uma ligação com cães. E por último, vamos fazer um para os pássaros. E também talvez o que queremos fazer é incorporar o que aprendemos na última lição onde temos em uma lista nórdica e eu vou mudar todos esses itens da lista de dedos para que eles agradável e ordenadamente ser representado na minha página Web. E então eu estou apenas fazendo um policial cópia rápida e colando. Eles estão embrulhando os itens da lista em torno deles, e isso vai embelezar isso. Guarde isso. E agora vamos para nossa página da Web e ver o que temos. Então temos gatos, cães, pássaros e bem listados lá fora. Eso Ele está em linha com o que está dentro da nossa página Web e notar que eu posso clicar thes, e na verdade nada está acontecendo porque voltando novamente para a última lição. O que precisamos dentro deste texto de âncora? Precisamos de informações adicionais, então isso significa que precisamos adicionar atributos nesses atributos dentro de hiperlinks. Isso é o que realmente faz um hiperlink. Hiperligação. Então certifique-se de que você está sentado aqui em cima seu hiperlink e o atributo que estamos usando é H áspero. E isso nos permitirá especificar qual página da Web queremos ir. Então, se eu quisesse criar um link para uma página ou se eu tivesse uma página chamada Cats e eu quisesse fazer um link para ela, vamos voltar e atualizá-la. Vemos imediatamente obtemos que subjacente e este é o padrão em HTML para hiperlinks que temos em sublinhado, conteúdo sublinhado. E agora, em um clique, vamos para os gatos da página da Web. E, claro, não temos essa página ainda. Então é isso que vai para lugar nenhum. Mas, essencialmente, criamos esse hiperlink lá. Então, outro tipo de hiperlink potencialmente seria I link dentro da página para que ou nós poderíamos link para fora para uma fonte externa. Então nós tínhamos algo como http e nós tínhamos algo como, então nós vamos ligar para o Google Dot com e talvez tivéssemos um link para um site de cães ou algo assim Oh, isso vai ligar para esta página. Este ligado para fora para gatos começar html. Isso vai se conectar a uma página externa da Web e lembrar novamente que estamos conectando um monte de sites juntos por esses links externos. E outra coisa a ter em mente com links externos e sempre uma boa prática, porque a idéia de um site é tentar manter as pessoas em seu site, tanto quanto possível . Então, se eu adicionar no google dot com, alguém vem ao meu site cliques, cães fantasmagaram google dot com Bem, eu acabei de perder meu visitante da Web, e é aí que adicionamos em outro atributo para acomodar isso e usamos o alvo. E isso é o que a janela do navegador de destino será quando o usuário clicar neste hiperlink . Então vamos verificar isso. Agora eu vou para a minha página, eu tenho minha página de gatos lá e eu tenho meus cães. Então eu clico em cães. Nós nos abrimos no Google, então ele está abrindo uma nova guia no meu navegador, e eu vejo que eu posso realmente voltar para onde eu comecei de Ah, e também com gatos. Você sempre pode voltar, bem como obter o botão Voltar no seu navegador. Então, por fim, há realmente outra maneira de usar hiperlinks dentro de seu conteúdo da Web. E eu prometo a você, eu não adicionei todo esse texto falso só para confundir o que estamos falando. Eso o propósito disso Waas que se você está entrando em um site, talvez eu queira ir para a seção de pássaros da minha página. Então talvez eu não esteja interessado em gatos. Talvez eu não esteja interessado em cães e eu queira ir direto para os pássaros. E eu quero algo aqui no topo do meu site. Assim, o usuário pode realmente facilmente ir até esse conteúdo para que eles não tenham que ler tudo e eles poderiam apenas clicar porque eles estão recebendo Lembre-se daqueles usuários da Web que eles estão procurando fazer algo. Eles estão procurando Teoh, satisfazer suas necessidades em seu site o mais rápido possível. Portanto, a melhor ideia quando você está projetando sites é representar algo e ajudar esse usuário a encontrar o que ele está procurando. E esta é uma ótima maneira de fazer isso também. Então é abrir nosso editor e pássaros ímpares. Então, da maneira que queremos fazer isso, nós realmente queremos um link para este pedaço de conteúdo específico dentro do nosso site. E como fazemos isso? Então nós sabemos que precisamos adicionar um dedo em um treff. Então precisamos adicionar onde queremos que o dedo do usuário acabe, e isso é o que usamos h refs foram. Mas que tipo de informação colocamos aqui para indicar que queremos enviá-las para esta secção em particular. E é aqui que temos que adicionar outro atributo Então atributos podem ser adicionados a qualquer um desses elementos. Qualquer uma dessas tags temos a capacidade de adicionar e atributos a qualquer uma delas. E um dos atributos que podemos usar e vocês veem isso usado com bastante frequência é o i. D. Então isso nos permite identificar esse elemento em particular no fone de ouvido. Então vamos identificá-lo de pássaros identificá-lo , algo que faz sentido subir aqui. Agora vamos cada árbitro e vamos ligar para os pássaros. Então, usando o hash para indicar que isso está ligado, eu identifiquei elemento dentro da nossa página web, e nós temos pássaros lá. Agora vamos voltar para a nossa página Web, ver o que acontece. Então parece que todos os outros dois hiperlinks, e quando eu clico, olha o que acontece. Derrubamos dois pássaros, e isso é ótimo para o usuário que entra. Eles podem clicar nele e eles podem ver Bem, agora eu estou na seção pássaros da minha página da Web, e esta é uma ótima ferramenta se você tem um monte de conteúdo dentro do seu site, e você quer que os usuários sejam capazes de navegar rapidamente através desse conteúdo . Então a próxima lição, como mencionei o uso de imagens, está por todo o lado. É uma ótima maneira de engajar e satisfazer seus usuários à medida que eles entram em sua página da Web , e eles não são apenas representados com um monte de texto. Ninguém gosta disso. Adicione essas imagens, e eu vou mostrar a vocês como fazer isso na próxima lição 10. 11 trabalhando com imagens: Até agora, temos trabalhado em uma página da Web bastante chato, nós adicionamos e hiperlinks que adicionaram em algo para o nosso site. Mas ao entrar neste site, há apenas um monte de texto e visitantes da Web. Eles querem ser entretidos, eles querem estar noivos. Eles querem algo que chame a atenção deles e você vê isso por todo o lado . Qualquer site há sempre usos de imagens e max misturado com o texto Texas formatado em tamanhos diferentes e assim por diante. E esta lição eu vou mostrar que você pode adicionar em imagens em seu site. Vamos em frente e adicionar uma imagem. Então, talvez antes de tudo, queremos adicionar para gatos que querem adicionar na imagem de talvez alguns animais ou algo assim. Então vamos criar uma nova linha aqui e a tag toe adicionando imagens é I M G. Então, normalmente, o que você pode estar esperando com tags de abertura e fechamento é que talvez você tenha I m g. E então você coloca a imagem lá e então você fecha. Mas, na verdade, isso não faz muito sentido, porque a imagem normalmente ou deve ser representada como um atributo, assim como está dentro dos hiperlinks, porque com uma imagem, é exatamente como as quebras de linha que vimos anteriormente que esta é uma tag auto fechamento. Não precisamos de nenhum outro conteúdo. Só precisamos saber onde essa imagem está localizada. Então vamos configurar uma fonte para essa imagem e igualar a fonte. Assim como o que fizemos com os hiperlinks, precisamos especificar onde esta imagem está localizada. Então, se essa imagem está localizada dentro da nossa pasta raiz pode ser algo como cat dot jp. Mas para esta lição, eu não tenho nenhum conteúdo. Na verdade, imagens configuradas e prontas para ir. Então, onde eu vou me virar para a Internet, assim como eu fiz com o gerador de texto cego? Na verdade, há uma solução para imagens fictícias, e felizmente para nós, temos uma para gatos, então eu posso ir em frente e eu poderia obter uma imagem colorida de um gato. Posso conseguir algo assim e conseguir um caminho para aquele gato. Tudo o que estamos fazendo aqui é eu vou copiar o caminho para o gato ir até aqui e em vez de a fonte ser o gato J. Peg, vamos abrir e criar. Apenas certifique-se de que eu estou especificando um corretamente para gatos e voltar para o meu código Aqui. Salve isso e vamos voltar para nossa página da Web e atualizá-la. E lá vamos nós. Então nós temos alguns gatos lá, e nós também podemos adicionar alguns outros animais também. Então não tenho certeza se vou pegar cães, mas talvez para o próximo parágrafo. Desde os gatos que eu quero adicionar em alguns cães. Não temos cães, mas podemos fazer animais. Por sorte, talvez possamos arranjar alguns cães. A mesma coisa para os pássaros. Vamos fazer algo assim também e fazer alguns animais lá. Agora vamos citar, atualizar nossa página e ver o que acontece. Então, felizmente para nós, acabamos com o cão lá, interagir com o cão nos pássaros. Mas tudo bem, porque nunca sabemos o que estamos esperando quando entramos neste espaço reservado de conteúdo gerado automaticamente dentro do nosso site. Então lá vamos nós gatos, cães e assim por diante. Então outra coisa com imagens é que muitas vezes se alguém está vindo aqui e talvez a imagem não carregue. Ou se eles estão usando um leitor de tela, eles não vão ser capazes de dizer o que está contido nesta imagem. Então, boa prática. prática recomendada com imagens sempre adicionou todas as tags. Portanto, todas as tags são basicamente uma maneira que você pode especificar para os leitores de tela ou no caso de sua imagem não carregar algumas informações adicionais sobre o que o usuário era, o que se destina a estar dentro deste espaço. Então este poderia ser, oh, gato e este seria palheta de cachorro. E estas são apenas todas as etiquetas e novamente especificando Bird, talvez assim, não sei o que realmente está vindo aqui, mas talvez tenhamos um pássaro lá. Então, agora, quando eu o atualizo, eu tenho um gato, uma girafa, e eu tenho uma maneira de especificar se essa imagem não aparece. Eso Vamos apenas misturar este caminho aqui, refrescá-lo. Agora a segunda imagem não vai aparecer, mas temos algo que diz “palheta de cachorro”. E isso é o que está vindo das tags altar, bem como se você está vindo com um leitor de tela , ele vai em vez de re em vez de apenas tentar mostrar-lhe uma imagem. Na verdade, ele vai ler o que o conteúdo dessa imagem deve ser. Então, a próxima lição vamos olhar para maneiras adicionais que podemos separar alguns desses conteúdos. Então talvez queiramos criar uma tabela e queremos ter um monte de informações que eu colocaria para o usuário da Web. E eu vou mostrar a vocês como montar uma mesa nas próximas lições que estão chegando. 11. 13 criar tabelas: Em uma das lições anteriores, olhamos para uma nova lista ordenada e listas ordenadas, e vimos enfraquecer lista de algum conteúdo. Bem, o que acontece se você tem várias colunas de conteúdo, várias linhas e você está listando este conteúdo de forma agradável e ordenada para seus visitantes da Web? E, a fim de fazer isso, temos tabelas tão semelhantes aos itens da lista que temos a tabela de abertura e fechamento. Então, abrindo e fechando tags de tabela E agora precisamos adicionar algum conteúdo dentro da tabela e uma tabela vai realmente ter mais do que apenas uma dimensão. Então, na lista de itens, tínhamos um monte de itens aqui. Nós listamos todos eles. Mas também precisamos considerar que temos linhas e colunas, então haverá duas dimensões aqui, então precisamos construir isso dentro da nossa página da Web e para tabelas. Então, especificamos que para cada estrada especificamos a quebra. Então nós vamos ter um número múltiplo de linhas para que possamos apenas abrir e fechar essas marcas de linha . E agora temos toda a nossa rosa configurada aqui, e não há necessidade de adicionar esse conteúdo. Então, para tabelas, podemos fazer t d. Então eu acredito que é a mesa nos fez. Então, temos um perto do Teddy. E se tivéssemos mais de uma coluna, então teríamos que fazer e teríamos talvez três aqui e assim por diante. Agora você pode ver que já estamos começando a construir alguma estrutura para nossas mesas. Eso para cabeçalhos de tabela. Há na verdade adicional em vez de TD, estamos usando T h de modo que desta forma, a navegação entende que estes títulos de mesa de ar. Então, isso foi, se estivéssemos coletando nomes de um monte de pessoas. Então primeiro nome feche a cabeça da mesa em seguida, indo para a nossa mesa. Você vê, ele fica ousado automaticamente. Então, se tivéssemos perdido o nome, feche a cabeça da mesa e digamos que estamos coletando um monte de números de telefone. Então, se Deus está abrindo e fechando cabeça da mesa, temos essencialmente colunas são listadas e assim por diante. Então, tudo está recebendo saída e representado. E agora, em vez disso, o John faria isso. John Smith lá e vai fazer algum tipo de número completo aqui. Número de telefone inexistente. Copie isso. Então copie esse formato e a próxima pessoa na nossa lista pode ser alguém chamado Mike. Dê um nome a ele. Mike Jones. E então ele tem um número de telefone um pouco diferente. E então o quê? Dessa forma, podemos começar a representar uma saída colocando seu conteúdo de forma mais significativa para nossos visitantes da Web. Então provavelmente olhando para isso e dizendo Ok, bem, parece muito bom, mas a mesa está um pouco apertada aqui. O primeiro nome apelido. É apertado junto com o número de telefone, e não é realmente evidente que mesmo que pareça uma mesa, ele realmente não se parece exatamente com o que nós gostaríamos que nosso dedo do pé de mesa se parecesse. E é aqui que adicionamos atributos. Então nós adicionamos estilo adicional em nossas tabelas e também quaisquer outros atributos que poderíamos adicionar a fim de fazer nossas páginas da Web olhar ah muito melhor ou Web Khan envelheceu-lhe um conteúdo olhar muito melhor. Então, com a adição de estilo em nossas páginas da Web, podemos fazê-lo em linha Riyadh, nos atributos de estilo aqui, então eu vou apenas especificar que isso é 100% e dar-lhe propriedade de com. Então você vê que imediatamente isso muda a forma como a aparência do nosso conteúdo. Nós também podemos adicionar em estilo em um arquivo CSS, bem como onde nós tínhamos adicionado em tags estilo na parte superior da página. É um número de maneiras diferentes de adicionar no estilo dentro das páginas da Web s, então esta é uma maneira de adicioná-lo como um atributo. Então, na próxima lição, eu vou mostrar a vocês como você pode adicionar estilo e atualizar a aparência de seus elementos HTML que estão chegando na próxima lição. 12. Estilo de CSS 14 em HTML: a última lição que olhamos, como podemos construir uma tabela, e introduzimos como podemos adicionar algum estilo. Então, na verdade, personalizar a forma como o conteúdo HTML é emitido dentro da página da Web. Portanto, nem todas as tabelas têm que ter a mesma aparência quando adicionamos atributos. E esta é uma parte emocionante do Web design, porque isso permite que você use atributos para adicionar sua própria rotação, aparência e sensação ao conteúdo de sua saída em sua página da Web. Então vimos que podemos adicionar uma largura de 100%. Nós também podemos fazer coisas para que possamos mudar esses estilos juntos pelo ponto e vírgula aqui. E eu poderia fazer algo como uma fronteira. Então uma borda picareta em fazer aquele porteiro preto sólido. Então, isso está tudo dentro da mesma propriedade, e vemos que imediatamente temos essa fronteira por lá, então faz um pouco mais sentido. Ali. Podemos dizer que este é o conteúdo dessa tabela. Nós também podemos adicionar em estilo e o bom. A coisa legal sobre atributos é que você pode adicioná-los a qualquer um de seus elementos, então se eu quiser adicionar isso aqui. Eu posso adicionar esse mesmo estilo dentro do papel aqui, e nós realmente não. Então, quando eu salvar isso, queria ilustrar como isso vai parecer, então eu realmente não vejo nenhuma mudança lá. E isso porque a função em si que você não pode definir uma largura de 100% na função não faz sentido. E borda de uma escolha de preto sólido novamente. O papel é essa coisa toda aqui. Então não faz muito sentido fazê-lo 100%. Então você tem que cortar isso de volta e aplicar apenas um estilo que realmente faz sentido. E normalmente, para algo assim, você estaria aplicando esse estilo na célula ativa real. Então vemos aqui que o primeiro nome recebe que vemos que o sobrenome é definido e assim por diante, e agora vemos que podemos adicionar em estilo individual para esses elementos individuais. Podemos atualizar isso e mudar a aparência. Mas a desvantagem do que estamos fazendo é que estamos adicionando uma tonelada de código aqui e realmente má prática adicionar esses atributos de estilo, mesmo que seja bom experimentar styling e experimentar todos esses valores diferentes aqui e fazer alguns atualizações como você quer talvez bordas mais grossas. Você pode realmente facilmente brincar com isso e fazer algumas atualizações para ele e ver como eles se tornam e como eles se parecem e assim por diante para que você possa ver que há um monte de atualizações. Enfraquecer fazer aqui fazer algo como eso sólido. Então, há muitas opções diferentes. Mas a desvantagem é que temos que repetir isso colado uma e outra vez se estamos aplicando para cada elemento, que é apenas muito demorado, muito confuso. E se você quiser fazer uma atualização, você tem um monte de código e um monte de atributos para atualizar. Então, se eu quiser atualizar esses cabeçalhos de tabela, eu não gosto de preto. Quero ficar azul. Vai ser muito difícil porque eu tenho que passar por cada um deles. E é por isso que ter estilo para a página no estilo da página, bem como CSS, é super útil neste caso. Então, ele voltou para a nossa página da Web. E vamos ver como podemos estilizar cada um desses elementos aqui. Vamos até o topo da página, e vamos criar uma marca chamada Style. Então abra e feche esse tipo de estilo. Então isso é CSS folhas de estilo em cascata, e essencialmente, isso nos dá a capacidade de remendar em qualquer um de nossos elementos ou um grupo inteiro de elementos e realmente fazer algumas mudanças nesses elementos. E com o estilo, temos várias maneiras de Teoh selecionar esses elementos em nossa página da Web. Então vemos que temos apenas um monte de conteúdo aqui vimos anteriormente como podemos adicioná-los atributos de estilo a cada um desses elementos, mas não realmente eficiente. Então vamos olhar para o nosso rumo e vamos fazer uma seleção de todos os nossos dois títulos. Então H dois colchete e agora todos nós queremos fazer é especificar as propriedades que queremos, um lugar que queremos que cada um segure e como queremos parecer. Então vimos que usávamos o Border antes, então vamos usar esse de novo. Então, uma picareta vermelha sólida. Guarde isso. Volte para a nossa página Web. Refresque-o. E agora vemos que todos os nossos H dois agora têm a mesma propriedade. Então, basicamente, o que fizemos é que pegamos nosso código HTML. Encontramos uma maneira de escolher os diferentes elementos do que tê-los representados e ser capaz aplicar algo a eles. Então você provavelmente olha para isso e diz Ok, bem, se alguns desses h dois eu não quero ter essa borda eu não quero ter essa cor que eu não quero ter essas propriedades para. E é aqui que o estilo nos dá algumas outras opções adicionais. Então, uma das coisas que vimos anteriormente é que podemos encontrar elementos diferentes. E com i DS, não podemos ter vários elementos com o mesmo eu não seria uma boa idéia. Então, mas com idéias foram realmente capazes de especificar que para pássaros, Talvez eu queira algum tipo de cor de fundo específica para apenas este um elemento particular dentro da página web. Então vamos selecionar os pássaros da mesma maneira que fizemos nosso hiperlink. Então o haxixe lá, o nome ou o eu d fora do elemento, e agora nós somos pássaros selecionados. Vamos fazer uma cor de fundo para que possamos fazer cor de fundo e vamos escolher uma cor para o fundo. Guarde isso. Volte para a página, atualize-a, e lá vamos nós. Então, este, nós fomos capazes de escolher de todos os outros elementos usando o ID e aplicar algum estilo a ele. E assim poderíamos facilmente ter ido para cá e estilo. Atributos Azan e adicionou a cor de fundo para que isso funcionasse da mesma maneira. Mas a melhor prática geralmente é manter todo o seu estilo e uma área dentro do seu código HTML , que você possa tê-lo mais legível sempre que precisar fazer atualizações e assim por diante. Muito, muito, muito melhor maneira de representar e atualizar seu estilo de sua página. Então vimos como podemos selecionar diferentes elementos. Podemos até fazer algo onde podemos fazer os itens da lista e realmente atualizá-los facilmente voltar aqui. Vemos todos os nossos itens da lista agora têm essa borda vermelha e assim por diante. Então, tudo o que precisamos fazer é como o nome da tag e podemos aplicar estilo a ele e selecioná-lo de nosso conteúdo. Então, um dos problemas que você provavelmente está pensando Bem, você sabe, você pode selecionar as etiquetas. Podemos selecionar cerca de um elemento individual dentro da nossa página. Mas o que acontece se eu tiver alguns parágrafos onde eu quero adicionar em algum conteúdo de estilo para e talvez tenha, uh, H dois aqui? Eu não vou aplicar esse estilo de vapor. Então, como faço para selecioná-los? Eu quero que isso tenha acontecido várias vezes dentro da página da Web. Talvez um destacado ou algo assim. E eu não consigo, não consigo encontrá-lo. Eu não posso escolher entre as etiquetas e entre o i DS. E há uma outra maneira de selecionar uma representação ímpar para os elementos. E essas são as aulas. Então nós adicionamos outro atributo, e nós fazemos classe. Então talvez faria algo como destaque. Por isso, tenta sempre manter os teus nomes significativos. Eso se eu quiser destacar isso e eu quero destacar meus cães aqui e, em seguida, apenas aqui dentro . Quero destacar também alguns conteúdos que lhes mostro como fazer isso. Uma ondulação. Mas, por enquanto, vamos destacar várias tags diferentes. E com destaques que fazemos para as aulas. É um ponto para representar essas classes, e vamos fazer o mesmo. Um aqui é que fizemos uma cor de fundo e desta vez foi fazer cor de fundo, escola amarela, volta para fora. Atualize-o e podemos ver que podemos destacar qualquer coisa com o atributo, a classe de destaque e destaca. Mas e se quisermos destacar talvez algumas palavras, mas não queremos mudar a forma como nossa saída sobre HTML está sendo representada. Então, queremos apenas na fila de algo. Destaque algumas palavras aqui, ali, e nós não queremos Oh, realce todo o elemento. Nós não queremos criar uma rocha de parágrafo em torno dele e por muito tempo. Portanto, há uma solução para isso. Dentro do HTML, vou mostrar-lhe como fazer isso na próxima lição. 13. 15 Divs e vãos em HTML para melhor estrutura: nesta lição. Quero apresentá-los a babadores e vãos, e o que Gibson spans faz é que eles nos permitem realmente quebrar nosso conteúdo HTML sem adicionar qualquer formatação adicional. Então, digamos que, por exemplo, eu quero destacar esta palavra que eu poderia adicionar em um span em um span essencialmente, é um elemento HTML não vai mudar como meu conteúdo está recebendo saída para que eu possa colocá-los todo o lugar. E quando eu vou para a página da Web, na verdade não vai ser diferente. Eu vou me livrar do meu destaque aqui porque eu quero que eu não quero que todo o parágrafo seja destacado. Eu o atualizo, e na verdade não sabemos onde nossos vãos de ar estão localizados. Mas a coisa legal sobre os vãos é que agora nós podemos adicionar em atributos para que possamos adicionar em que classe de destaque neste span se quisermos ir para este span ou talvez para este span, e talvez este vai apenas manter como ele ISS assim podemos atualizar. Podemos selecionar os vãos assim como fizemos com qualquer outra tag. Quero adicionar uma fronteira por lá. E eu também posso acrescentar, uh, uh, para a turma, o destaque do amarelo. Vamos dar uma olhada e ver como isso parece agora. Então nós vemos que todos os vãos obter a borda em torno dele porque ele está apenas selecionando esse estilo naquela classe em particular. Mas o interessante aqui é que somos capazes de destacar diferentes partes de conteúdo de maneiras diferentes, e podemos realmente separar esse conteúdo. Portanto, há outro essencialmente um recipiente que podemos usar para realmente estruturar nosso código HTML . Muitas vezes você pode tê-lo visto usado, talvez para embrulhar a página inteira. Então, em vez de apenas usar nosso corpo, podemos fazer algo como eu fiz rapper ou algo assim? Feche isso e podemos embrulhar um monte de conteúdo. Você também pode vê-lo sendo usado para e você pode apodrecer. Você pode colocar thes dentro eso dibs dentro de outros mergulhos e assim por diante para que eu possa ter outro div. E talvez esta seja talvez esta área aqui representa o meu cabeçalho. Então eu tenho cada um aqui e assim por diante. Então eu tenho algum conteúdo de cabeça aqui, e eu vou apenas adicionar em algum conteúdo adicional aqui, fechar esse fora e salvá-lo. Faz com que pareça agradável. Embelezar. E agora vamos atualizar e podemos ver que as dibs, eles estão realmente ocupando o bloco completo, mas atender acima de tudo, eles estão nos permitindo nos separar e olhar nosso conteúdo como se estivesse em pedaços. Assim, assim como o que nós olhamos com cabeça e corpo HTML, as quedas nos permitem realmente separar esse conteúdo em seções mais significativas de nossa página web. Então eu tenho um div que envolve este. E agora talvez queiramos ter outro div aqui. Dada a eles, eu d de maldade. Então isso estaria em todo o conteúdo principal aqui. E nós só vamos para baixo para talvez isso tudo esteja dentro do Maine, e eu quero ter outro div aqui e dar um I D off rodapé e apenas para adicionar um pouco conteúdo aqui, fazer com que pareça agradável novamente. Volte para a nossa página. Confira e vemos que basicamente, temos que nos separar para o conteúdo usando esses dibs Dibs começou automaticamente novas linhas. Então, se eu fosse embrulhar este em um div e não vou dar este div em I d eso você não precisa especificar esses atributos. Os atributos de ar não são obrigatórios dentro de mergulhos. E vemos que o que acontece aqui quando este DIV quebra automaticamente inicia uma nova linha lá porque a div realmente ocupa todo esse bloco de código. Então, na verdade, esta é uma pena . Essa é a diferença. Você vê que o div apenas como cada um. Então eles têm as mesmas propriedades que cada um de suas propriedades de estado, parágrafos ocupam todo esse bloco de frio. Então, se eu fosse realmente especificar em vez de lá se eu queria fazer Div para que pudéssemos ver como o DIV se parece em vez de se estender tão rapidamente. Esta ainda é a extensão. Vemos que a extensão Onley contém essa seção específica para que ela esteja em linha não quebra nada. Não parece diferente até aplicarmos um pouco de estilo a ele. Então dê uma olhada no que acontece com os dibs quando o atualizarmos. Vemos que o Dev se move até o fim. Eles ocupam toda a linha de código disponível. Então este Dave aqui está ocupando essa linha completa. O rodapé está ocupando a linha completa. Temos o rapper ocupando a linha completa, o cabeçalho ocupando a linha completa e assim por diante. Então dibs e vãos essencialmente usados para construir essa estrutura dentro de suas páginas da Web e para criar alguma quebra e estrutura mais inteligentes dentro de seu conteúdo de sua página da Web. Eso construindo seu site, construindo sua estrutura. Veja como seções diferentes, peças diferentes usam essas dibs. Usou esses vãos para separá-los e representar melhor esse conteúdo. E especialmente quando você está pensando em aplicar o estilo, certifique-se de ter esses dibs bem dispostos e prontos para ser capaz de acomodar o estilo como você adicionou à página da Web. Então agora uma das coisas aqui que provavelmente estamos olhando e que devemos considerar é que queríamos trabalhar como um HTML cinco páginas eso usando dibs e usando vãos, especialmente dá s Oh, esta é uma maneira mais antiga de pensar. Originalmente, quando estamos projetando nossas páginas da Web, não tínhamos opções adicionais, então nós criativos lhes daria idéias de rodapés. Mas quando o HTML 5 apareceu, eles percebem que os desenvolvedores da Web costumavam fazer a mesma coisa. Estamos dando essas idéias para o dibs, e eles estavam procurando palavras mais semânticas, mais significativas e significativas para separar seu conteúdo. E tudo isso foi trazido com HTML 5. Então, com o HTML cinco, temos um monte de novas tags que podemos utilizar para melhor estruturar nossas páginas da Web e usar todas essas novas páginas semânticas. Muitos deles. Eles funcionam da mesma forma que dibs, mas eles nos permitem ter mais significado quando você está lendo através desse código HTML. Então, vou mostrar-lhe e apresentá-lo aos que estão na próxima lição. 14. 16 elementos HTML5 semânticos: vimos na lição anterior como construímos em nosso site. E quando olhamos para o nosso código HTML, começamos a usar dibs Ah, muito. E com cada um para Mel cinco. Agora temos mais algumas opções e um mecanismo de nomeação melhor dentro do nosso imposto HTML. Então vamos dar uma olhada no que foi introduzido com HTML cinco e é sempre uma boa idéia levar em consideração esses novos elementos. Vemos que temos uma tonelada deles aqui. Temos artigo lá fora e temos Rodapé, Cabeçalho, e temos seção aqui. Temos um monte deles aqui que realmente representam a mesma coisa que estamos fazendo originalmente dentro dos mergulhos. Então, basicamente, do artigo fora e usando qualquer um desses, nós podemos realmente reestruturar nossos H dois machos em vez de ter cabeçalho aqui e Div como cabeçalho , nós podemos atualizar isso e eu vou chamá-lo de melhor. E então isso vai fazer mais sentido quando você está lendo através de sua página web e você pode ver Ok, bem, bem, isso é obviamente um cabeçalho do meu site e às vezes desenvolvedores da Web, eles podem usar apenas o cabeçalho para o seção da cabeça outro. Outras vezes eles podem ter aqui, eles podem ter um cabeçalho. Portanto, este pode ser um cabeçalho para esta seção específica. E é por isso que você ainda precisa manter essa idéia lá, porque você quer ter certeza de que esse cabeçalho também representa diferentes seções dentro do seu conteúdo. Portanto, esteja sempre ciente de que sempre que você estiver usando esses html mais semânticos cinco elementos que eles são realmente reutilizáveis. E se você vai ser risi usá-los em qualquer outro lugar dentro de sua página, certifique-se de manter essas ideias se você quiser ser capaz de diferenciá-las. Então vimos isso mais cedo que nós, quando éramos colecionáveis, conectando ao nosso estilo. Precisamos ser capazes de escolher esses elementos e isolá-los. Então, se quisermos alguns atributos específicos, algum estilo específico ligado a eles, certifique-se de que temos uma maneira de identificá-los. Então, outro que usado é usado com bastante frequência. Rodapé ISS. Então, muitas vezes você pode ver algo como, você tem rodapé de cabeçalho. Se temos uma página web, temos várias colunas. Aqui está para que possamos ter algo onde temos seção aqui. Então esta pode ser uma seção e, em seguida, outra s o para um menu lateral. Podemos ter algo chamado de lado, e então é aqui que nosso conteúdo do menu lateral iria. Então talvez o lado de fora fosse para lá. Esta seria outra seção, e eu vou ter que embrulhar esta aqui, então às vezes você vai ver o artigo ser usado. E então agora este artigo tem duas seções nele sobre nós temos de lado. Então você então talvez aqui você tem em uma lista sem pedidos e você tem um monte de itens de lista . Então agora, vamos Tatum novos produtos e assim por diante. Então vamos dar uma olhada na nossa página web. Agora vamos ver como é. Então nós quebramos sangue, mais inteligente, sexual não parece muito diferente. Mas agora nós configuramos a estrutura e estamos prontos para aplicar nosso estilo para fazer seu site olhar e sentir como nós pretendemos que ele apareça e sinta. Então essa é a principal coisa aqui com os novos elementos semânticos para ter em mente que esta é uma maneira melhor, que para nós representarmos nosso código e torná-lo muito mais fácil quando estamos pensando sobre o código dela , como queremos olhar e como não aplicaremos todos esses diferentes blocos de código quando aplicarmos algum estilo, como queremos parecer. Então, a próxima lição. Vamos dar uma olhada mais profunda no CSS, e também temos formulários chegando. Então, há um monte de informações chegando nas próximas lições sobre como usar HTM fora. Então, na próxima lição, estamos olhando para formulários. 15. 18 formulários HTML: nesta lição. Quero mostrar como você pode adicionar formulários às suas páginas da Web. Assim, formulários são uma parte realmente essencial de qualquer site. Se você quiser que seus usuários possam enviar algumas informações, comunique-se com você, então você precisa adicionar um formulário. Então eu vou dentro deste projeto, eu vou adicionar em um formulário bem na parte inferior com no meu rodapé e eu vou configurar apenas um formulário realmente básico aqui e novamente. Começa com abertura e fechamento de tags de formulário. Então abrir, fechar e o conteúdo aqui dentro é o que vamos utilizar para o formulário. Então talvez se você quiser fazer algo realmente simples, como um boletim informativo ou algo assim. Então você precisa obter algo como o primeiro nome dos usuários. E normalmente o que fazemos para formulários é adicionar forma. Então nós temos um número de diferentes opções de formulário eso entrada. Então esse tipo de entrada e há vários tipos de entrada diferentes. Como você pode ver aqui, colchetes está realmente me dando um monte de sugestões. Tem a caixa de seleção do botão. Temos alguns novos com html cinco para que possamos fazer cor, data e assim por diante. Então este é apenas um texto muito típico. Então abra bem perto. E também precisamos adicionar alguns atributos adicionais aqui. Então, nós especificamos um dos atributos que é um campo de entrada de texto. Também precisamos especificar um nome para isso. E a razão pela qual precisamos especificar um nome é porque precisamos de alguma maneira de realmente pegar essa informação e ser capaz de identificá-la onde quer que ela esteja sendo enviada. Você também pode usar i. D. Então eu d é uma maneira de aplicar estilo a ele e assim por diante. Se você tem algumas idéias JavaScript usado uma ótima maneira de ir para fazer essa conexão entre o conteúdo do formulário. Também temos algumas opções adicionais. Então eu acabei de salvar isso, e vamos dar uma olhada em nossa página da web agora ver como ela se parece, e nós podemos ver lá. Temos o nosso elemento de forma. Então, vamos realmente café tudo isso pop sobre para código Pen e colocar o nosso formulário lá dentro. E a razão pela qual eu quero trazê-lo para Code pen é porque eu quero aplicar um monte de tipos de entrada diferentes aqui, e eu quero ser capaz de mostrar imediatamente como eles se parecem eso Eu vou fazer uma quebra de linha aqui, e você também pode querer algo como o e-mail. Então você quer pegar o endereço de e-mail dos usuários? Então vamos escrever em vez de texto para que pudéssemos fazer texto. Parecia o mesmo. Mas vamos fazer outro aqui chamado e-mail. Então dê-lhe um nome e um e-mail. Então, de novo, você não precisa ser tão específico com isso e se livrar desses porque eu não vou adicionar nenhum estilo a isso. Isto é apenas para fins de demonstração. Então agora temos um e-mail chamado e vemos que podemos digitar algum texto lá e o que está faltando neste formulário. Então nós digitamos em alguns tributados aqui, mas nós realmente não temos nenhum botão para enviar este formulário. Então eu preciso adicionar esse botão e vamos em frente e criar outro tipo. Então, temos várias maneiras de fazer a entrada. Podemos fazer o tipo. E você viu que tínhamos uma opção para botão para que possamos fazer um conjunto de botões de tipo de entrada de valor para enviar ou algo assim e fechá-lo para que ele nos dá um botão para enviá-lo. Mas na verdade não está funcionando porque é apenas o tipo é apenas um botão. E não é realmente ser específico que este é o nosso botão de enviar eso. Precisamos ser capazes de especificar que o que queremos que o nosso botão faça. Queremos que se submeta. Então há uma série de maneiras diferentes de conseguir isso, onde nós concordamos em vez de um botão. O que queremos que isso faça é realmente enviar nosso formulário para que, por padrão, altere para enviar Button. Mesmo se eu fosse para se livrar do valor aqui, vemos por padrão, o navegador sabe que este é um botão enviar para que dar-lhe enviar. Quando eu clico no botão, ele tenta realmente enviar o conteúdo aqui. Eso aqui, vamos atualizar o e-mail, e é aqui que ele fica realmente interessante porque porque eu especifiquei isso como e-mail e eu tento enviá-lo. Recebemos esta mensagem que diz por favor inclua o em no endereço de e-mail e isso é novo com HTML cinco porque isso nos dá estabilidade essencialmente para ver que tipo de entrada estamos esperando. Então ele verifica um ISI é antes de enviá-lo, que certificando-se de que os usuários realmente enviar informações de e-mail lá também temos campos adicionais. Então eu vou apenas fazer um padrão aqui, e nós temos aqueles onde podemos especificar os tipos que poderíamos fazer algo como número, e eu vou me livrar de. Então temos um número aqui. Então, se eu tentar digitar um texto aqui, não vai me deixar ter certeza de que eu sempre tenho um número lá dentro. Eu também posso atualizar esta cor fazer. Então nós temos o seletor de cores aparecendo e estes ar todos novos com html cinco. Vemos que temos um monte de tipos muito legais, legais e diferentes que podemos realmente utilizar. Nós também temos aqueles que anteriormente com HTML cinco, Então nós tivemos alguns. Então eu vou me livrar disso. E tínhamos botões de rádio. Então estes ar os botões de rádio e normalmente com botão de rádio deve ter, também, e outra coisa com botões de rádio é ter certeza de que é assim Se você tem que botões de rádio , certifique-se de que o nome é o mesmo e que nos dá a capacidade de ter este tipo de efeito onde clicamos em um que cantata Gle entre eles. É sempre certificar-se de que temos pelo menos um botão de rádio. Se estamos usando botões de rádio, certifique-se de que você tem alguns deles. Mantenha o mesmo nome para poder alternar entre eles. Temos outro tipo aqui onde podemos especificar que se precisarmos de uma caixa de seleção, há outro tipo aqui tão semelhante aos botões de rádio enfraquece. Mude isso em uma caixa de seleção se quisermos, então temos um número de diferentes. Alguns dos realmente legais aqui com cada equipe de cinco. Temos um encontro. Então temos esse calendário padrão que aparece, e podemos especificar a data, e que a preenche automaticamente. Vimos que poderíamos fazer o número de e-mail que temos você é L. Então este é outro útil, porque se eu tentar Teoh, é digitar algo aqui, então isso não é um U. R L E se eu enviá-lo, recebemos a mesma mensagem de erro que recebemos com o e-mail eso certificando-se de que nosso pato de texto que estamos esperando é realmente o que o usuário está colocando em s um número de outros que você pode ver para que possamos ver texto. Há uma área de texto, e esta vai ser diferente das típicas deles. Temos área de texto aqui, e o conteúdo está realmente sentado entre aqui fazendo tudo, apenas com atributos. Temos conteúdo aqui que temos no meio e vemos que a saída está sendo saída lá. E aqui é onde podemos especificar os nomes. Temos uma área de texto ou o que quisermos chamá-la, e vemos que a saída fica no meio. Então este é outro tipo de entrada onde podemos especificar que temos um monte de conteúdo que queremos puxar para dentro, e assim por diante. Assim, juntamente com toda uma gama de diferentes tags que podemos usar nesses atributos, também temos a capacidade de adicionar alguns atributos mais específicos dentro de nossos formulários HTML. Então eu vou mostrar mais sobre isso na próxima lição 16. 20 atributos de formulário: na lição anterior, vimos todas as coisas realmente legais que podemos fazer com a idade para mull formulários. Portanto, esta lição eu quero obter mais específico sobre os diferentes atributos que estão disponíveis para nós quando estamos criando nossos formulários. Então, com formulários, há muita coisa que você pode fazer com eles. E uma das coisas que você pode fazer é definir alguns valores padrão. Então, se quisermos que o Teoh defina um valor para o primeiro nome, todos que chegarem vejam automaticamente o primeiro nome de Mike, podemos ir. O valor é igual a Mike. É a mesma coisa que fizemos aqui com o botão de entrada. Então, se não quisermos digitar enviar, então faríamos valor, obter isso ou o que você quiser chamá-lo, e vemos que isso muda. Assim, os atributos de valor é usado a fim de alterar o valor da entrada, para Nós também podemos fazer coisas onde talvez queremos desativar isso. Poderíamos fazer deficientes, e isso nos dá a capacidade de não dar ao usuário, não dar-lhes uma oportunidade de realmente atualizar o conteúdo lá dentro. Nós também podemos especificar coisas onde queremos ser quer especificar necessário também. Então este e-mail, talvez queiramos fazer necessário. Então este é HTML cinco eso Quando eu clicar nele, nós temos este pop-up aqui que diz, por favor preencha este formulário. Este outro realmente útil em h 205 onde estamos definindo que necessário. Então, outra coisa aqui, a fim de ter em mente, é o que realmente fazemos com a própria forma. Então, na verdade, não sabemos. Nós não especificamos para onde estamos realmente enviando este formulário, onde, como estamos enviando este formulário ou algo assim. E é aqui que você precisa adicionar alguns atributos dentro do próprio formulário. Então, a ação vai especificar onde estamos realmente enviando o formulário para enviar ancorado. E normalmente você vai fazer algo onde você está enviando-o no servidor e eso que poderia realmente pegar esses dados e utilizá-los. Então, se nos submetermos e agora nós clicamos nele e eu deveria realmente tirar isso necessário fora porque caso contrário eu vou constantemente ter que clicar nisso. Então, se eu clicar, isso foi para salvar isso rapidamente, nós clicamos nele e vemos que nós não temos que você é mais. Temos que voltar lá, e essa é uma das coisas aqui dentro da forma que quando especificamos para onde estamos indo, ele realmente usa o padrão e envia essa página para lá. Há outra coisa que é realmente importante dentro de formulários, e que é especificar o método. Então, com formulários que temos uma opção para enviar, obter método e realmente dentro aqui não foram capazes de ver. Então eu vou criar um novo lugar de página, este capataz aqui e nós vamos apenas dizer que como meu antebraço ponto html E agora eu posso ir para aqui e ir para o meu formulário HTML. Agora vemos que temos este formulário aqui e eu clico nele e vemos então ele está tentando enviá-lo para enviar ponto com. Mas olhe na U. R eu ouvi onde nós realmente especificamos informações que nós inserimos no formulário. Isto é o que eu quis dizer com o que estamos recebendo dentro do formulário e quando usamos obtê-lo, na verdade coloca este conteúdo do formulário em nosso u R l aqui dentro onde estamos enviando os dados. Se usarmos o post, o que vai acontecer. Então, agora, quando eu atualizar isso e agora lembre-se, isso não é mais “começar”. Isto agora é posto. Então, quando eu clico nele, vemos que não recebemos nenhuma dessas informações sendo passadas dentro do Você está certo, e basicamente a diferença entre get e Post Post é onde você envia suas informações seguras . Então, se você tem senhas ou você tem um monte de dados que você deseja evitar de estar dentro do URL que certifique-se de que você está enviando o post em vez de obter porque o convidado não é seguro e não é, não é. A melhor maneira de enviar dados é porque eles são legíveis dentro da U. R I. E se você está pegando isso, você ou eu, se alguém entender isso, você ou eu, então isso pode realmente obter enviado e enviado para o servidor. Então, se o servidor está pegando essas informações, então use post para comunicações seguras ainda, para se você quiser que esses dados estejam dentro da URL, e se você não especificar a página que você está enviando um para alguns voltando aqui atualizá-lo e eu bati. É assim que nós apenas padrão de volta para a página padrão. Ou devo dizer, a página atual que os usuários em para que nós realmente não ir para uma nova página. Voltamos para a mesma página que acabamos de enviar. E uma parte importante desta lição é por isso que especificamos com nomes, porque é assim que pegamos dentro do servidor. Se não especificássemos esses nomes, não teríamos como pegar o conteúdo aqui. Então veja, dentro que você está l lá onde você pode digitar em algum conteúdo lá e claro que precisa ser um ano, Earl. Então vamos criar um euro aqui. E quando o atingimos, não estamos passando nada. E isso é porque não especificamos o nome. Mas se eu mudar isso e se eu adicionar um nome Teoh ao segundo deles, eu chamo de Earl. Volte para fora. Atualize esta página. Agora você está gravando. Você é eu de novo. E agora tenho muitos chás. Então agora vemos que agora é realmente passado dentro do U.R l aqui em cima. Portanto, certifique-se sempre que você especificar o nome neste é como você é capaz de recuperar esses dados na outra extremidade quando você está pegando isso, para que você trabalhe com formulários em HTML. Então, na próxima lição vamos finalizar o curso, vamos rapidamente passar sobre como podemos adicionar estilo, como não podemos em JavaScript e como podemos realmente atualizar nossa página da Web, a fim de torná-la mais eficaz e dinâmica, usando CSS, tornando-o melhor e, em seguida, javascript em orderto interações dinâmicas estranhas que está chegando na próxima lição. 17. 21 arquivos CSS: nesta lição. Eu quero mostrar a vocês Mawr sobre como podemos trabalhar com CSS como não podemos CSS para nossas páginas web e muito mais então anteriormente nós olhamos para o que podemos fazer com formulários, e nós vimos que podemos fazer um monte de coisas realmente legais com formulários. Então eu vou apenas voltar e abrir nossa página de índice original aqui. Então esta é a página original da Web com a qual estávamos trabalhando, e vamos dar uma olhada mais de perto no que estávamos trabalhando com estilo. Então, passando para Code Pen, que também tínhamos olhado dentro do curso, vimos que a caneta de código divide nosso código em HTML, CSS e JavaScript. E também vimos que se eu quisesse, eu poderia conectar a forma. Eu poderia fazer algo como cor de fundo, e eu poderia especificar cor aqui e ver que ele automático Tate tem efeito. Então, o que está acontecendo aqui? E também, se eu quiser incluir algum script java, Aiken, fazer algum JavaScript rápido lá veria que nós temos esta janela pop-up chegando, e como a página renderiza que nós temos nosso javascript disparando. Obtemos nosso CSS e a maneira como isso está trabalhando com CSS. Vimos que podemos incluí-lo na mesma página. Mas também vimos caminho, muito de volta quando estamos olhando para o código-fonte original. Vemos que temos um monte de links para páginas CSS e podemos fazê-lo. E esta é na verdade a maneira mais inteligente de trazer CSS para seus projetos da Web porque isso lhe dá a capacidade de realmente construir um site e vincular um monte de páginas. E então, quando você atualiza esse arquivo CSS, ele atualiza todas as suas páginas da Web simultaneamente porque tudo o que eles são é que eles estão conectando e eles estão recebendo seu CSS ou seus valores de estilo a partir dessa página CSS. Então vamos mostrar como isso funciona. Então, voltando para o nosso código-fonte, vamos remover estão no estilo da página. Salve isso, abra um novo arquivo, cole-o e observe que não estou adicionando nenhum arquivo HTML. Eu não estou abrindo e fechando tags HTML abrindo e fechando porque este vai ser um tipo diferente de arquivo. É um arquivo CSS, então vamos em frente e salvar isso. Vou chamar-lhe estilo. CSS dada extensão de CSS. E agora este é um arquivo CSS real. Vamos mostrar a barra lateral. E agora, sempre que salvamos nossa página de índice, voltamos aqui e voltamos para a página de índice. Refresque-o. Então todo o nosso estilo se foi. Perdemos nosso estilo na página dela, e isso significa que precisamos nos conectar e nos conectar a esse pêssego CSS. E novamente, a parte realmente legal sobre vincular Oh para ver avaliar páginas e por que isso está sendo feito em números de páginas da Web é que agora, se eu tenho o índice, se eu tenho o meu fórum, todos eles estão vinculando para esse arquivo CSS. Se eu atualizar o arquivo CSS, ele atualiza todas essas páginas. Que tal a saída das páginas? Então você poderia, por todos os meios também inclui styling assim por diante estilo de página. Então, se você tem um estilo específico para esta página específica, você pode adicionar isso em, assim como se você tivesse estilo para cada elemento individual, você poderia adicioná-lo como um atributo também. E é aqui que a ordem de onde você está representando o conteúdo que significa entra em jogo, porque se queremos um material justo em sua página da Web depois que o estilo trouxe, colocamos este estilo depois que ligamos para a folha de estilo. Se quisermos fazê-lo antes disso, o que normalmente não é feito, então faríamos isso antes. Então vamos definir este CSS e esta é uma tag auto fechamento, e estamos especificando todos esses atributos da mesma maneira que estavam fazendo links para fora. Estamos usando H ref ligando a uma folha de estilo. Fazemos R E l para especificar que este link é uma folha de estilo. É o que estamos esperando. Volte para a página, atualize-a e nosso estilo está de volta. E agora, sempre que abri isto, posso actualizar o estilo. Eu posso atualizar as cores e podemos ver que quando eu atualizo a página, ela é realmente atualizada e fica refletida em todas as páginas vinculadas a ela. Então, a próxima lição vamos mostrar a vocês e vamos falar brevemente sobre o que é JavaScript e como ele pode ser adicionado em sua página HTML que está chegando na próxima lição. 18. 22 O que é JavaScript: tão parecido com que pudéssemos trazer conteúdo CSS externo em nossas páginas da Web pode trazer JavaScript e da mesma forma que fizemos. JavaScript enfraquecer fazer CSS. Vamos abrir o nosso editor e deixa-me mostrar-te. Então, basicamente, com CSS, nós vinculados para fora a uma folha de estilo Bem dito Opção para usar o nosso atual. Nosso estilo atual na página é a mesma coisa com JavaScript. Então, se eu quiser fazer um link para um arquivo JavaScript, eu poderia fazer script e eu poderia apenas tomar dor. A origem do script. Então, este, curiosamente, funciona como imagens estavam especificando a fonte, ao contrário do estilo que funciona como os hiperlinks. Eso especificar o arquivo fonte e vamos criar um arquivo fonte então vamos chamá-lo de script. Assim, arquivos JavaScript são arquivos Js, e o que JavaScript faz é que ele lhe dá a capacidade de criar interação dinâmica dentro de seu conteúdo Web. Então, quando você olha para sua página da Web, você tem três linguagens fundamentais básicas fundadoras que compõem cada página da Web e que os navegadores renderizam esse conteúdo de Então você tem seu HTML, que é sua estrutura geral e seu conteúdo da página da Web. Então tudo o que é visual e tudo, tudo o que o usuário é capaz de consumir dentro da página da Web. Então temos estilo, o que nos permite personalizar a aparência da nossa página Web. E então temos JavaScript, que nos permite criar conteúdo interativo dinâmico, interagir com seus elementos HTML e muito mais para que possamos trazer ah, arquivo de script e você verá também online. Há uma série de bibliotecas, e isso lhe dá a capacidade de trazer essas bibliotecas para seus projetos e usar JavaScript. Agora, se você quiser usar JavaScript dentro de sua página, você nem sempre tem que vincular para o arquivo de script muito parecido com o que fizemos com CSS Weeks e criar o script tags e, em seguida, dentro daqui podemos fazê-lo. Este é apenas um alerta simples dentro do script Java que faz aquela coisinha pop-up. Eu não vou entrar muito em JavaScript. Eu só quero mostrar a vocês como trazer javascript para suas páginas. E quando você se sentir confortável com HTML, então você passa para CSS como você está confortável, CSS e HTML, em seguida, passar para JavaScript, então é abrir nossa página web e eu vou mostrar como temos JavaScript disparando. E eu também posso criar um novo arquivo javascript. Então, indo até aqui, posso copiar o conteúdo do script para aquela página. E novamente, lembre-se, eu não estou especificando abrir essas tags HTML porque isso em si vai ser um arquivo JavaScript. Então vamos dar-lhe uma extensão JavaScript Js. E agora que estamos vinculados a ele como fizemos com a folha de estilo, vamos atualizá-la. E vemos nosso JavaScript ainda dispara como se estivesse na página. Funciona da mesma maneira, assim como o CSS. Então, o que? Você pode executá-lo e fazê-lo funcionar como se estivesse na página. E novamente, o benefício de vincular este arquivo externo é que você pode realmente facilmente trazer essa funcionalidade em seu site de pneus. Eso não importa quantas páginas você tem. Se você vincular a sensação de script de trabalho para o CSS, você pode utilizá-lo em sua página da Web. Agora, é claro, com HTML com javascript com CSS, é preciso prática. Então eu encorajo você a dar uma olhada no código-fonte. Dê uma olhada através das diferentes lições e abra quer abrir. Arranja o teu próprio editor. Experimente no seu computador. Experimente esses arquivos HTML dentro do seu navegador, ou você pode ir para recursos como Code Pen e experimentar diferentes CSS HTML e JavaScript e ver o que você pode fazer acontecer com esses idiomas e sempre um ótimo lugar para começar é para desenvolver seu primeiro modelo HTML. Comece de novo com apenas aquela estrutura básica. Você tem seu HTML abrindo e fechando. Importe sua cabeça de abertura, fechamento do corpo e abertura e fechamento, e então tente adicionar conteúdo e adicionar mais e mais estruturantes até que você desenvolva seu site como você está esperando que ele apareça e, em seguida, adicione esse estilo para realmente obter isso e sentir e que personalizado, exibição personalizada fora do conteúdo do seu site e, em seguida, depois que você está confortável com HTML e CSS, então você pode olhar para JavaScript e JavaScript é excelente maneira de fornecer funcionalidade para usuários da Web 19. Introdução de curso em HTML: Bem-vindo ao nosso curso introdutório sobre HTML. Meu nome é Lawrence, e vou ser instrutor deste curso. Venho até você com mais de 18 anos de experiência em desenvolvimento na Web, e estou animado para ter a oportunidade de compartilhar meu conhecimento com você. Dentro deste curso, eu vou estar guiando vocês através dos conceitos fundamentais do desenvolvimento de um site. E isso é HTML. Eu estava mostrando como você pode criar páginas HTML da Web de forma muito fácil e rápida. Vamos começar apresentando os conceitos básicos de HTML. E eu vou mostrar-lhe como você pode construir seu próprio modelo HTML, a fim de estruturar cada seu para Mel Cord. E nós vamos também estar indo para a construção de seu próprio modelo HTML cinco, discutindo Maura sobre HTML cinco. O que é, como é usado e como desenvolver conteúdo de forma mais inteligente. Também analisando a estruturação básica do seu conteúdo para que você não tenha apenas um grande blob de conteúdo. Você pode separá-lo com títulos com parágrafos com quebras de linha e assim por diante. Também vamos analisar como podemos usar listas para listar conteúdo, então é mais consumível pelos usuários da Web. Também os principais fundamentos de sites e como podemos usar hiperlinks que ligam para páginas externas as páginas dentro do meu site e também para marcar partes de conteúdo ou seções de meus projetos Web atuais. Também olhando para imagens, as imagens são fundamentais para qualquer site. Os usuários adoram imagens. Vou mostrar-te como trazer essas imagens para as tuas páginas Web. Também olhando para dibs e abrange como podemos estruturar melhor conteúdo, como ele poderia trazer em CSS styling em nossos projetos Web para obter uma melhor aparência e sensação também como html cinco elementos mais semânticos e html cinco como cabeçalhos, rodapés e assim por diante. Além disso, HTML forma todos os diferentes tipos fundamentais fora. HTML forma como podemos aplicar atributos para obter ainda mawr poder fora do alcance dos elementos masculinos e, em seguida, também como podemos construir toda a nossa página Web e como nós construímos Chur nossa página web e nosso conteúdo site. Então, tudo isso e muito mais está incluído neste curso. Além disso, o código-fonte e os recursos têm sido usados dentro deste curso também vão ser incluídos para que você tenha tudo o que você precisa para começar a criar código HTML . Então, quando você estiver pronto, vamos começar a criar algum código HTML e trabalhar através das lições. Além disso, experimente você mesmo e veja o que você pode fazer acontecer com HTML.