Comece rápido para aprender conceitos básicos de HTML | Laurence Svekis | Skillshare

Velocidade de reprodução


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

Comece rápido para aprender 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

15 aulas (1 h 17 min)
    • 1. Vídeo promocional

      1:26
    • 2. Introdução de curso HTML

      2:36
    • 3. Introdução a HTML

      2:29
    • 4. Editores HTML

      4:13
    • 5. Estrutura de HTML

      3:19
    • 6. Elementos de curso HTML vs tags espaçamento p tags

      4:10
    • 7. Comentários de curso HTML

      2:47
    • 8. Linha de corte HTML desmembrando elementos

      3:18
    • 9. Cabeçalhos de curso HTML

      4:14
    • 10. Hiperlinks de curso HTML

      8:10
    • 11. Curso de HTML como adicionar imagens às páginas HTML

      6:14
    • 12. Tipos de lista HTML

      8:59
    • 13. Divs HTML abrange nova estrutura HTML5

      10:31
    • 14. Curso de HTML usar CSS transformar seu HTML em uma página da Web

      10:42
    • 15. Aplique o que aprendemos no curso

      3:26
  • --
  • 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.

193

Estudantes

--

Sobre este curso

Comece rápido para aprender conceitos básicos de HTML

aaa1b2fb


Exemplo simples de tags HTML e como
use a criar um site do zero com este curso HTML simples direto. Aplique tags HTML comuns que você precisa saber para poder criar sites. Perfeito para iniciantes que são novos no HTML e querem aprender a usar tags HTML comuns para criar sites.

Comece do zero aprenda a criar um site estruturado em HTML5 básico.

Recurso superior para fazer você ir quicklyHTML5 de
estrutura de página da web HTML5 e tagsHTML
HTML
usando
commentsLine de quebra e como aninhar elementsHTML

elementsHTML hiperlinks para conectar contentadd
add conforme
neededhow trabalhar com
listsUsing Divs e varandas em elementos
HTML5

HTMLNew transformar seu código HTML com stylingAll
os principais recursos e código fonte do curso é fornecido para que você possa praticar trabalhando com código direto do curso.

Estou aqui para ajudar você a aprender HTML e pronto para responder a quaisquer perguntas que você possa ter. Tenho mais de 15 anos de experiência de desenvolvimento de web do mundo real, que vou compartilhar consigo neste curso.
HTML é uma habilidade na demanda e usado em todos os lugares.
Nada a perder, há um reembolso de 100% se você não
lose, saber mais, o que você está esperando dar o primeiro passo. Junte-se agora para começar a aprender HTML hoje.

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. Vídeo promocional: aprenda a criar um site a partir do zero com o curso HTML simples e direto perfeito para iniciantes que são novos em HTML e querem aprender mais sobre como usar tags HTML comuns para fazer seus sites começar do zero. Saiba como criar recursos básicos de discussão de sites estruturados em HTML para ajudá-lo a trabalhar rapidamente . Cada equipe de cinco estrutura de página da Web discutiu HTML tags elementos espaçamento como usar comentários, quebras de linha, como fazer aninhamento de elementos, cada dois mil títulos criando hiperlinks para conectar conteúdo. Como adicionar imagens, como trabalhar com listas Quais dibs spans são usados para HTML e novos elementos HTML. E, finalmente, como transformar seu código HTML usando styling em um site real. Todos os principais recursos e fontes pontuadas para este curso são fornecidos para que vocês dois possam praticar o trabalho com o código fornecido dentro do curso. Estou aqui para ajudá-los a aprender cada um com Mel e pronto. Responda a quaisquer perguntas que você possa ter com mais de 15 anos de experiência em desenvolvimento na Web no mundo real , que eu estou aqui para compartilhar com você neste curso, HTML é uma habilidade em demanda. É usado em todos os lugares que você não tem nada a perder. Há garantia de 100% do dinheiro de volta. Quer saber mais? O que você está esperando? Dê o primeiro passo. Juntou-se agora para começar a aprender html hoje. 2. Introdução de curso HTML: bem-vindo à nossa introdução de início rápido ao HTML, apresentando todos os HD Mel B seis que você precisa saber para criar um site como este. Então este vai realmente ser o produto final de todos os diferentes códigos HTML que vamos olhar e vamos aprender ao longo deste curso. Meu nome é Lawrence, e serei seu instrutor para este curso. Sou desenvolvedor da Web há mais de 15 anos. Trabalhei em centenas de sites e desenvolvi muitas aplicações Web também. Então eu vou estar guiando você através de como começar a criar sites usando HTML e, em seguida aplicar alguns dedos CSS, realmente obter uma boa aparência e sensação para o seu conteúdo HTML. A primeira parte deste curso irá apresentar-lhe a estrutura HTML. Então, como configurar e estruturar sua página HTML básica, incluindo tags HTML título tags introduzi-nos também onde colocar informações de estilo , e então vamos falar sobre todos os diferentes elementos que estão disponíveis em todas as tags diferentes que estão disponíveis no HTML. Então vamos olhar para todas as diferentes tags comuns que estariam usando regularmente tudo, desde parágrafos a quebras de linha, como incluir imagens, como configurar cabeçalhos para o seu site e seu conteúdo web. Além disso, vamos discutir hiperlinks como configurar hiperlinks tinha incluí-los em seu código, como criar listas em listas ordenadas e listas ordenadas. E também, nós vamos estar olhando para como aplicar estilo e aplicar vários atributos para HTM um tribunal . Então vamos olhar para extensões e dibs, e vamos olhar para a nova estrutura HTML cinco páginas Web onde estamos usando cada uma específica para derreter tags para conter informações de conteúdo e ajudar a estruturar nossas páginas da Web melhor . E então, por fim, estaremos aplicando CSS para tudo o que aprendemos, a fim de criar um site completo e completo. Todo o código-fonte e recursos estão incluídos neste curso. A fim de ajudá-lo a percorrer melhor e aprender o conteúdo que está sendo apresentado no curso. Então, quando você estiver pronto, vamos começar a criar e escrever alguns códigos HTML juntos 3. Introdução a HTML: Bem-vindo ao nosso curso de introdução ao HTML. HTML significa linguagem de marcação de hipertexto, e é a linguagem da Web. Então, aqui temos um exemplo de como o código HTML padrão se parece. E dentro deste curso, eu vou estar correndo através de como você pode escrever código HTML, bem como criar páginas da Web e como estruturar suas páginas da Web para que elas sejam adequadamente estruturadas para serem lidas através navegadores. Essencialmente, desde a sua criação, tem havido cinco orações diferentes de HTML. E se você for para w três dot org, então este vai ser o consórcio principal que controla HTML. Eso neste tem todas as informações diferentes aqui sobre HTML. O que está acontecendo com HTML? O que está acontecendo a seguir? Eso Eles têm algumas entradas ah blawg aqui e têm um monte de informações sobre HTML e como ele funciona dentro da Web. E também, este será um bom ponto de referência se você quiser saber mais sobre HTML, bem como experimentar e certificar-se de que você é compatível com HTML. Então, haverá algumas opções aqui, a fim de fazer alguns testes e descobrir mais sobre os diferentes padrões que estão acessíveis on-line. Se você quiser saber mais sobre o histórico de HTML, eles têm um bom histórico aqui sobre como HTML foi iniciado. Eles têm aqui o fundador, que é a primeira natureza do chá, Tim Berners Lee. E ele é essencialmente um dos fundadores do ou o inventor da World Wide Web. Então, há mais informações sobre ele aqui em Swell. E então ele tem toda a história do HTML e trazê-lo todo o caminho até onde estamos hoje e também, alguns exemplos sobre como escrever HTML, que vamos discutir nas próximas lições. Na próxima lição, vamos olhar para ferramentas comuns para escrever HTML e como criar essas páginas HTML . Ponha-os na Internet, e tudo isso é o que vamos passar nas próximas aulas. 4. Editores HTML: Se você acessar qualquer página da Web, você pode abrir e verificar a fonte diferente que está disponível na página. Então, em um computador Windows, ele está controlando você, e podemos ver que ele é composto de todo esse código. E este código é o que é lido pelo navegador. E o navegador interpreta esse casaco e entende como enviá-lo em um formato mais legível para usuários da Web. Então é isso que é o cartão? Que é o conteúdo de uma página da Web e você pode ver? Predominantemente? É HTML. Há também algum JavaScript e também algum estilo, então nós vamos estar indo para cima e cobrindo a parte HTML do código da página da Web dentro deste curso. E uma das primeiras perguntas que as pessoas sempre fazem é Ok, então eu entendo o que HTML é. Mas como faço para criar esse código html como realmente entrar em uma página da Web? E há algumas ferramentas comuns. Portanto, uma das ferramentas mais comuns em máquinas Windows é usar o bloco de notas plus. Este é um editor de código aberto para download que você pode baixar e criar código-fonte com e também. Há muitos editores diferentes por aí, então você provavelmente tem algo em seu computador agora que você pode realmente escrever código-fonte. Então, quando você precisa de um lugar para escrever seu código HTML, você pode olhar para nenhum pad plus. E para Max, um dos editores mais populares será o Wrangler. Então estes ar tanto de código aberto e livre para baixar. Ah, e você poderia baixá-los em seu computador e ir imediatamente com eles. Eles são realmente fáceis, simples, instalações e o que é. É essencialmente um editor de texto. É muito simples. Eu tenho bloco de notas aberto porque eu estou em uma máquina Windows e vemos que é uma configuração muito típica onde você tem essas guias aqui no topo quando você abre novas páginas e você tem a capacidade de escrever algo e, em seguida, salvar este arquivo. Então agora eu criei uma página padrão. Eu chamei isso de índice dot html. Então, quando se trata de encontrar um ponto de partida para a sua Internet, então se você apenas ir para um domínio como nota, bloco de notas, dash plus start ou ele tem que ter realmente uma página inicial Então, provavelmente é uma coleção de arquivos aqui no diretório raiz e no servidor. A maneira que ele interpreta é que ele entende que o índice dot html é uma página inicial padrão para o seu domínio, então você não precisa especificar essa página inicial. O servidor é inteligente o suficiente para ser capaz de servir até que página inicial índice dot html. Às vezes você também pode vê-lo como padrão dot html. Então, normalmente, índices usados com mais freqüência. Se você estiver usando linguagens de script, você pode ver algo como índice de ponto PHP ou algo assim para indicar a página inicial . Mas já que estamos escrevendo código HTML, vamos nomeá-lo index dot html. E a coisa boa sobre páginas HTML é que elas podem renderizar diretamente dentro do seu navegador, então você não precisa realmente ter nenhuma máquina de hospedagem. Máquina de servidor em execução sem remo que você tem que fazer é ir executar e selecionar o navegador que você deseja iniciá-lo em e podemos ver que nós lançamos para fora essa página de índice e ele renderiza fora no navegador, assim como faria no servidor, porque novamente, isso vai ser HTML e HTML CSS e JavaScript. Então estas são as três línguas front-end. Eso todos eles renderizam através do navegador, e eles não precisam de um script do lado do servidor, e vamos dar uma olhada no Wrangler também. Então mande mensagem para Wrangler. Então, é muito semelhante à forma como o bloco de notas funciona. E novamente, você poderia apenas ir até o site e baixá-lo e começar a criar algum código HTML , que nós estaremos executando na próxima lição. 5. Estrutura de HTML: As páginas HTML são estruturadas com seção de cabeça, seção e corpo, e todos os conteúdos, incluindo cabeça e corpo, ficam contidos dentro dos tanques HTML. Então o que é, é uma Siris de tags abrindo e fechando tags, bem como de auto fechamento tags, que também vamos olhar mais tarde no curso. E é assim que HTML é essencialmente estrutura. Então eu vou em frente e abrir meu editor e rever a estrutura básica de uma página HTML . Então, essencialmente, temos uma tag HTML de abertura e fechamento. Então estas são as diferentes tags HTML. E porque estamos criando um documento HTML e temos conteúdo HTML aqui, indicamos que iniciando com HTML e fechando html e então a idéia é que qualquer coisa entre aqui, isso vai ser parte desse documento HTML. Uma coisa que precisamos fazer e o que é sempre bom fazer é especificar o tipo de documento. Então agora, com o HTML cinco, eles realmente simplificaram a capacidade de definir o tipo de documento especificado. Tudo o que temos que fazer é doc type html, e isso vai deixar o navegador saber que este não é html cinco documento e ele será capaz de tratá-lo como tal. Agora com navegadores. Na verdade, eles vão ser inteligentes o suficiente para renderizar, ah, página da Web ou documento HTML e renderizá-lo como conteúdo visível real dentro do seu navegador. Então isso, mesmo que eles sejam inteligentes o suficiente para fazer isso, é sempre uma boa idéia estruturar o seu site dentro deste tipo de formato. Então, se eu fosse apenas remover tudo isso e se eu digitar Olá, um pouco de mundo, salvar isso e eu sair para a minha página da Web que eu tinha criado e uma atualizá-lo, vemos que Olá mundo realmente é renderizado para fora. Então, mesmo que seja capaz de renderizar esses oito, esta não é uma maneira adequada de formatar e estruturar nosso site. Então precisamos voltar ao que tínhamos antes, onde tínhamos essas tags HTML de abertura e fechamento e , em seguida, temos a seção adiante aqui, e é aqui que todo o conteúdo do cabeçalho é colocado para sua página HTML e, em seguida, também corpo e corpo é tipicamente onde todo o conteúdo visual vai. Então, se eu quiser digitar Olá mundo eu deveria colocá-lo dentro do corpo assim, salvá-lo voltar e refrescá-lo. E vemos que não há realmente nada diferente que está sendo processado. Mas quando vamos para a fonte da página, podemos ver que ela está estruturada corretamente. E eso esta é uma estrutura de documento HTML típico onde novamente declaramos o tipo de documento . Temos abertura e fechamento HTML abrindo e fechando cabeça. Então isto contém todo o conteúdo da cabeça que vamos analisar na próxima lição. E então esta parte contém todos os corpos de todos os conteúdos visíveis que você realmente quer que os usuários venham ao site para ser capaz de ver. 6. Elementos de curso HTML vs tags espaçamento p tags: Então, quando nos referimos ao HTML, falamos sobre elementos. Falamos de etiquetas. Então eu só quero explicar rapidamente a diferença entre elementos e tags. E, essencialmente, vai ser a mesma coisa. Então tag é algo como P e, em seguida, fechando tags p. Então, esses ar vai ser tags de parágrafo e ele realmente se torna um elemento quando ele engloba uma tag de abertura, tag de fechamento e conteúdo. Então tudo isso, junto com o conteúdo no meio, isso vai ser um elemento. E, em seguida, estes veem as etiquetas para esse elemento. Então essa é a diferença entre elementos e tags. Muitas vezes você vai ouvi-los sendo usados de forma intercambiável. Portanto, há uma diferença sutil, mas não muito de uma diferença. Então, quando eu me refiro a tags como tags de parágrafo e essencialmente, é assim que você cria uma tag de parágrafo, tags de parágrafo são tags realmente populares. Dentro do HTML, eles se acostumam com muita frequência, e lá eles têm pico de abertura e fechamento p e, em seguida, o conteúdo no meio. Isso é o que é aplicado a essas dicas de estilo predefinidas de tags e qualquer coisa no meio. Aqui está o que se aplica a isso. Então, se eu realmente fizer. , parágrafo Parágrafo, parágrafo, parágrafo. Eu saio e uma atualização minha página. Eu vejo que eu tenho três parágrafos aqui e eu tenho alguma formatação padrão que vem junto com este parágrafo. Em primeiro lugar, quando olho para o código, vejo isso. Ok, bem, é só Olá mundo, e eu não tenho nenhum conteúdo ao lado de lá. Mas embora esteja ocupando um espaço totalmente novo, uma nova linha, eu tenho espaçamento no meio lá, não um em cima do outro, mesmo que eu não tenha nenhum espaçamento entre aqui, e isso é todos provenientes do tipo de parágrafo. Mesmo que eu faça algo assim e o atualize, o resultado será a cena. E isso é outra coisa. Coisa importante a observar sobre HTML. E quando você está escrevendo suas páginas HTML, todo esse espaço em branco que estou incluindo agora. Então, mesmo que pareça realmente horrível aqui dentro do meu editor, quando eu atualizá-lo, não vemos nada muda. E isso é porque a maneira que o navegador processa o código html para que ele não veja o espaçamento, ele usa o padrão deste dedo um espaço. Não lê o espaçamento entre as etiquetas. Então, se não há espaçamento aqui entre lá, não vai fornecer o espaçamento adicional . E se seu espaçamento dentro das tags dentro do elemento, ele só irá predefinir para um espaço em branco e também, além disso, ele não verá nenhuma dessas coisas quebrar linha. Então, se eu tiver algo assim, se eu tiver algo assim, você acha que isso vai ser diferente agora quando olharmos para ele, eu vejo que eu tenho uma quebra de linha eu tenho Olá. Eu não tenho espaço e eu tenho mundo aqui no final. Então este, eu acredito, é o segundo elemento S O Você acha que este vai mudar? Você acha que eu vou perder meu espaço aqui? Você acha que ele vai manter um espaço lá quando eu refrescá-lo? Então, quando eu o atualizo, vemos que, de fato, ele mantém um espaço. Assim, bem como padrão para todo esse espaço adicional em de espaçamento, padrão em Lee dedo do pé um espaço, o que quer que você faça uma quebra de linha iniciar uma nova linha. Ainda é padrão que esse espaçamento lá, então vemos que sempre que eu arrastá-lo para baixo, ele adiciona nesse espaço, mesmo que eu não possa realmente selecionar esse espaço. E quando eu voltar, não há espaço lá por padrão. Ele ainda está adicionando esse espaçamento dentro do navegador quando ele está renderizando o arquivo html . 7. Comentários de curso HTML: quando você está escrevendo código HTML. Ocasionalmente você precisa adicionar alguma documentação, alguns comentários dentro do código. Então, quando você voltar e você faz referência a isso mais tarde, você pode entender melhor por que seu código está definido assim. Então, se eu voltei para este código e eu vejo que eu tenho Hello World listado três vezes então talvez seis meses abaixo da linha, eu poderia estar olhando para este arquivo HTML particular e eu posso estar me perguntando, Por que eu escrevi Hello World três vezes? Isso não faz nenhum sentido agora. Então, o que você pode fazer dentro do HTML é adicionar no Commons. Então vemos aqui que dentro do estilo, nós adicionamos em um comentário que adicionamos em JavaScript. Adicionamos um comentário para que possamos fazer a mesma coisa com em nosso código HTML, e isso realmente ajuda a documentar o que você está fazendo e por que você está fazendo isso no momento em que você está fazendo isso e permite que você seja capaz de referenciá-lo, bem como permite que outros desenvolvedores para dar uma olhada nisso e fácil entender por que certas coisas são feitas de certas maneiras e como enquanto comentar é realmente bom. Se você quiser adicionar algo mais tarde como um espaço reservado ou algo assim, e comentários realmente não serão vistos dentro do navegador. Assim, o navegador não renderiza comentários e comentários podem ser colocados em qualquer lugar dentro do seu código HTML. Então vou escrever. Este é um cometa e eu apenas direito, porque e então para fechar isso fora, nós fechá-lo fora da mesma maneira, os dois sinais de menos e o sinal maior que. Então, abrimos o comentário oclock com a explicação menos de sinal. Marque dois traços. Nós direito em nosso conteúdo de comentários aqui e adicionalmente, se temos várias linhas aqui, então às vezes você vai ver comentários escritos como este. Ah, e novamente, isso é para legibilidade. Procurar eso, no entanto, funciona melhor para você que parece melhor dentro do seu código é como você pode estruturar e escrever. Seus comentários e comentários podem ser feitos tão pouco ou tanto quanto necessário. E, essencialmente, é outra maneira de adicionar algumas informações adicionais não para os usuários que estão chegando, mas para os desenvolvedores ou qualquer um que está lendo o código para ser capaz de entender melhor o propósito desse tribunal. Nesse ponto, 8. Linha de corte HTML desmembrando elementos: na lição anterior, nós olhamos para parágrafos e esta lição eu quero olhar para o que se você simplesmente quisesse trazer o mundo para uma nova linha E você não quer ter toda essa formatação padrão para um novo parágrafo. Então você essencialmente, você quer escrever Olá mundo, e talvez eu vou apenas café um pouco de conteúdo aqui e nós atualizá-lo. Vemos que está tudo na mesma linha, mas eles estão separados por parágrafo. Agora vamos dizer que eu quero trazer este mundo Olá para baixo aqui, mas eu não quero começar um novo parágrafo para que você possa fazer isso fazendo o que é chamado de quebra de linha . E esta é outra dessas tags auto-contidas nas quais você não contém nenhum conteúdo . É assim que tudo o que é é ajudar o navegador a entender como você deseja estruturar o conteúdo da sua página da Web . Então agora, essencialmente, quando ele passa por aqui lê através do parágrafo, ele vê linha quebrar aqui, e ele sabe que este é o momento de fazer outra quebra de linha. Então, quando eu atualizá-lo, vemos que agora esta linha em particular foi para uma linha completamente nova. Então, mesmo quando eu o redimensionar, ele sempre vai estar sentado em uma nova mentira. E isso é o que a quebra de linha faz. Estruturação, ajudando a estruturar seu site e como ele está indo um pouco de saída e renderizado para fora no navegador. Agora também é importante notar que o que fizemos aqui é colocar uma tag dentro de um elemento, e também podemos fazer elementos dentro de elementos. E podemos continuar a aninhar oito todos estes elementos dentro deles e estes ar vão conter o seu próprio conjunto de propriedades. Então, esse parágrafo pai inicial vai conter seu conjunto de propriedades e estilo. Estes parágrafos dentro daqui vão reter um estilo de parágrafo adicional que vai ser contido dentro desse parágrafo pai. Então, quando eu atualizá-lo, vemos que não há muita mudança com o que está sendo produzido aqui. Mas a diferença virá quando aplicarmos um pouco de estilo a ele, ou se eu quiser escrever outra seção aqui, é completamente a mesma coisa. E vemos que isso agora é o pai, esses parágrafos aéreos dentro do pai e temos nossa linha quebrar lá, é claro, e então esses ar vão ser separados por parágrafo. Então, se estamos usando tags HTML diferentes que os parágrafos, provavelmente veremos uma diferença maior aqui e semelhante a se estamos usando as quebras de linha. Então, se eu tivesse algo, uma quebra de linha e eu tinha um, e quando eu atualizá-lo, vemos que o estilo do parágrafo é aplicado. Então ele tem esse buffer aqui no buffer inferior aqui no topo, por padrão. E mesmo quando é um aninhado dentro de outro parágrafo ou dentro de outro conjunto de tags dentro um elemento, podemos ver que ele ainda está armazenando em buffer aquela parte superior e inferior. Portanto, estas são as dicas de estilo padrão para parágrafos. 9. Cabeçalhos de curso HTML: Então, quando estamos olhando para sites típicos, para que não tenhamos apenas todo o conteúdo do mesmo tamanho, alguns deles você pode ver que é Boulder. Alguns são maiores se destacando. Então vemos que temos esses títulos que se destacam mais do que o resto do texto, e nos ajuda a entender melhor o usuário. Compreender melhor? Certo, bem, isso tem a ver com site, Web, Web design e aplicativos. Esta é a rede de dispositivos, e quando eu olho para o código-fonte aqui deste elemento em particular, vemos que é um H para marcar. Então, essas etiquetas de direção de ar. E se formos até aqui, vemos que isso é um grande sucesso. Este deve ser um H para marcar também. Então, todos estes são o que é chamado H duas tags em. E vemos a estrutura básica da página da Web que qualquer coisa que é destacada, uh, nós temos nosso principal título aqui é Hum. E a partir daí, temos os subtítulos aqui que são H dois. Então, inicialmente, podemos ver que esta página da Web quer que os padrões se destacem mais, e então estes não são tão importantes quanto os padrões, mas vemos que há alguma importância para esses padrões. Portanto, existem essencialmente 36 níveis diferentes de cada tanque de etiquetas de cabeçalho, e cada um desses níveis diminui o tamanho do texto e faz com que ele se destaque cada vez menos, indo todo o caminho de um ser o mais alto, o maior tamanho, e depois indo todo o caminho para baixo h dois, h três e assim por diante. Então, se eu tivesse alguns subtítulos aqui embaixo, eu os configuraria como H três. E então se eu tivesse subposições debaixo das portas lá embaixo, eu iria H quatro e assim por diante e assim por diante. E essa é a forma como estruturamos conteúdo importante dentro da nossa página web. E normalmente você vai ver para fins Seo e maneira padrão de estruturar conteúdo da página da Web é que você tem o seu título aqui e, em seguida, também na página. Você realmente destaca esse título bem, com as etiquetas H um. Essa é uma maneira típica de adicionar tags de cabeçalho. E esta é uma daquelas coisas que é sempre uma boa idéia destacar certos pedaços de conteúdo. E então é assim que você seria capaz de fazê-lo dentro do seu tribunal HTML, então não exagere. Você não precisa destacar tudo. Você só quer que alguns pedaços de texto sejam capazes de se destacar e se tornem mais visíveis. Então eu vou direto na direção um. E então este vai ser um elemento típico onde eu tenho minhas tags H de abertura e fechamento. E digamos que eu tenho alguns títulos abaixo aqui, então indo para e então este seria um H dois. E, claro, podemos ir até o fim, se quisermos. Então este também vai ser um h dois e apenas mostrar-lhe como é. Então, quando eu atualizo a página, vemos que ela tem incrementalmente menor do que H dois s o título um realmente se destaca porque este seria o conteúdo principal da nossa página da Web, e, em seguida, ir para seria o cabeçalho para este seção e assim por diante. Isso seria para esta seção em particular. E só para ilustrar a diferença entre todos os títulos à medida que avançamos para baixo alguns que estão fazendo uma cópia rápida e colar lá e eu vou mudar isso para três, mudar para quatro e podemos ir até seis. Então seis sendo a menor das tags de cabeçalho e você vai descobrir que qualquer coisa realmente abaixo de três muito raramente é usado. Você vê muito poucas páginas da Web que vão além dos três primeiros títulos. Mas no caso de querer saber, esta vai ser a diferença entre os títulos e os tamanhos. Então eu nos forço a voltar a 100%. Podemos ver que podemos entender melhor como o ar títulos sendo apresentado dentro de nosso conteúdo da página da Web . 10. Hiperlinks de curso HTML: Outra tag popular que quase todas as páginas da Web conterão será links. Assim, links são essencialmente o que a Internet é tudo sobre. Você pode ir a qualquer site, qualquer página da Web, e tudo que você vê é um monte de links diferentes e links são exatamente isso. Eles realmente vincularam todas as diferentes páginas da Web para criar um novo site inteiro, e é assim que os usuários que estão vindo para o site têm a capacidade de navegar através do site clicando nos links e chegando à próxima página que é sugerido aqui dentro do código HTML e para criar links dentro do seu código HTML, nós usamos a tag A, então isso também é conhecido como a tag âncora ou a tag hyperlink eso se eu quiser hiperlink uma parte específica do meu código HTML. Então vamos dizer que eu quero hiperlink um desses mundos Olá, e eu quero um link para outra página da Web. Comecei pela etiqueta âncora e fechei a etiqueta âncora. Então este é outro. Agora ele se torna um elemento porque estamos abrindo e fechando, e a diferença aqui é que haverá duas informações que poderiam ser necessárias para este hiperlink. Então, não só precisamos saber qual texto estava hipervinculado, como também precisamos saber o que deveria acontecer com esse hiperlink. E é aí que entra o árbitro H. H ref vai ser para onde queremos enviar o usuário. Então este vai ser o Conde da página da Web ou o site ou o link para o qual queremos enviar nosso usuário quando eles clicarem em Hello, World. Então estes podem ser links internos ou externos, então você pode vincular a algo como http Google. E agora sempre que o usuário clicar neste link, ele irá trazê-los para este site ou podemos vincular Teoh um link interno. Então eu dou a vocês um exemplo disso no link aqui embaixo, e eu vou apenas ligar para a mesma página da Web. E agora, quando eu saio em uma atualização, vemos que eu tenho esses hiperlinks aqui, então eles realmente são sublinhados e algo deu errado lá. Então, eu vou rapidamente dar uma olhada nisso e ver eso. Eu realmente não fechei esse hiperlink. É por isso que eu tenho aquele subjacente embaixo de todo aquele texto adicional que eu tinha lá. Então eu só queria inicialmente o hiperlink sob este único ponto. Mas quando eu não fechei que uma tag, em seguida, o que aconteceu é que o navegador pensou automaticamente que l Este texto precisa ser hiperligado para índice dot html e tentou corrigir esse erro, selecionando automaticamente tudo como Hlinka ble. Então eu vou atualizar isso e isso parece um pouco melhor. Onda também enfraquecer aviso também que hiperlinks por padrão. Então, se você não tem nenhum estilo padrão para eles, eles ficam sublinhados por padrão. Eles vão ficar azuis. E se for um link ao qual estivemos e se o visitarmos, lembre-se que este está ligando volta para a mesma página de índice. Se é um link que já clicamos ou visitamos, então vai ser essa cor púrpura. Então, quando eu clicar neste e vamos para o site que ele vai trazer dois, que vai ser Google Now, quando eu atualizar esta página, a próxima vez que o link vai ser roxo porque agora que nós visitamos atualize a página eso em que já clicamos nela. E a razão pela qual isso não está ficando roxo é porque ainda estamos trabalhando fora deste arquivo local, então não está descontando isso. Mas normalmente, se você tivesse essa página da Web carregada e você clicar no comprimento e ela ficaria roxa, nada adicional a isso. Às vezes nem sempre é o dedo ideal. Abra-o na mesma janela, como neste caso em que eu clico. E então eu tive que clicar de volta para ir para a mesma página que eu comecei com eso. Você tem algum controle sobre isso quando está digitando seu código HTML. Este é apenas colchetes que eu tenho aberto também abriu para a mesma página. Este é outro exemplo de outro editor em, e é um pouco mais colorido. Ele tem muito mais opções aqui, e nos permite, uh, código html e várias outras línguas também. Então este é colchetes I Oh, este é um editor gratuito para download e como uma alternativa para usar bloco de notas ou qualquer um desses editores de texto típicos, é uma alternativa muito boa, Mas tipicamente você pode querer de branco quando você está começando usando algo como suportes porque ajuda você a definir o frio. Ele faz thes abertura e fechamento das tags por padrão. Você considera fazer isso automaticamente, e é essencialmente ele o guia ao longo do código. E a desvantagem disso é, claro, que você não tem. Na verdade, eu tenho que tirar um tempo para fazer isso corretamente, para fechar tudo, como você faz dentro da nota. Pad eso. Essa é uma das desvantagens, porque pode realmente ser um obstáculo para aprender eso se você está aprendendo e começando . Geralmente é melhor ficar com os editores de texto realmente simples até você se sentir confortável com o código e você quer melhorar e aumentar sua velocidade com a escrita do código. E você poderia mudar para algo como colchetes nos hiperlinks para que eu possa ir até aqui. E eu tinha que mostrar um exemplo entre parênteses. Então agora podemos entrar em nossos hiperlinks e podemos especificar onde o alvo vai estar. O alvo Eso vai nos ajudar a indicar o que queremos fazer com o link então quando o Hello World for clicado, o que queremos que aconteça? E tipicamente Então, por padrão, o link vai para si mesmo. Isso só significa que sempre que clicarmos no link, ele vai recarregar o novo conteúdo, a nova página da web dentro da mesma janela aberta no navegador. Mas se quisermos abrir uma janela nova, indicaríamos em branco. E o que isso vai fazer é abrir uma janela totalmente nova? Então, tipicamente, a maneira que fazemos isso sempre que temos links externos, nós ligamos em branco para eles O. Isso abre nossa nova janela. E ele não tira o usuário da sua Web, do seu próprio site e do seu próprio conteúdo da Web. Mas dentro de sua página da Web. Então, se estamos vinculando internamente, geralmente mantemos isso porque queremos que os usuários possam navegar pelo site sem ter várias abas abertas. Então só te mostrar qual será a diferença aqui quando eu atualizá-lo. E se eu clicar em Olá mundo. Vemos que vamos automaticamente para o Google, e se eu clicar no link, o hiperlink em si, ele vai tentar. Ele vai simplesmente recarregar a página de índice, e não vai abrir uma nova janela. Mas, alternativamente, se eu configurar em branco aqui, que eu posso fazer muito rapidamente e atualizá-lo agora, toda vez que clicarmos em hiperlink, vamos abrir uma janela totalmente nova. E, como podemos ver, isso não é ideal se você estiver tentando manter as pessoas dentro de sua mesma página da Web. 11. Curso de HTML como adicionar imagens às páginas HTML: tão adicional aos hiperlinks. Outra coisa que é muito comum em sites é o uso de imagens, então podemos vê-lo aqui no W 3 ou temos uma imagem ali, e se formos inspecionar isso, podemos ver que está usando essa tag de imagem. Tem a fonte lá. Tem uma largura e uma altura, por isso tem alguns atributos adicionais. Então, nesta lição, vamos cobrir atributos, bem como imagens e adicionar imagens ao seu código-fonte . Vai ser relativamente fácil e imagens e a tag de imagem vai ser outra tag auto fechamento . Então, todas as informações que precisamos saber quando o navegador precisa saber em ordem, Rend escreveu, Rend escreveu, que essa imagem vai estar contida dentro de I M. G. Então, como vemos lá, não há abertura e fechamento da imagem. É auto-fechamento, e então ele leva sua informação tipo de como o que aconteceu aqui no hiperlink onde nós temos nosso árbitro H onde nós realmente estamos indo. Mas precisamos listar uma fonte para a imagem, e isso é o que temos aqui, e então a altura e a largura, e o Ault são todos atributos adicionais que estão disponíveis. Então eu vou até Loren Pixel e isso me dá. Este é um site que permite que você crie caminhos de imagem fictícia ou obtenha imagens fictícias para que eu possa usar algo assim como um espaço reservado para o meu site, e eu poderia simplesmente copiá-lo para fora. E isso me permitirá definir imagens fictícias essencialmente como Laura, texto, texto, mas com imagens. E se você não está familiarizado com o texto da Lauren, é um texto da Lauren novamente. É uma mensagem de suporte da polícia. Quando você está projetando seu site, você normalmente não quer ter ou você quer que o lugar ocupe a formatação padrão . Então aqui eu só tenho escrito em um texto falso. Mas se eu não queria passar pelo processo de escrever neste texto fictício, eu não quero todo esse mundo Hello e copiar e substituir. E se eu realmente quisesse se parecer com texto real, algo diferente em minha página da Web, eu usaria algo como texto da Lauren, a fim de colocar esse texto em espera. Então vamos voltar para nossas imagens e eu estou apenas olhando agora onde podemos adicionar uma imagem então eu vou aninhá-la logo abaixo dentro dessas tags de parágrafo. E como podemos ver, o formato é I M G. E é uma etiqueta de fechamento automático, e então precisamos listar uma fonte. Então eu vou usar a mesma fonte que eu acabei de copiar para fora e fornecer isso como uma fonte para a minha imagem. E agora, quando eu sair aqui e atualizá-lo, devemos ter uma imagem em nossa página, o que temos agora. Vimos isso por padrão ou não por padrão, mas é sempre uma boa prática incluir todas as tags. E todas as tags são tributo Anat que você define dentro de sua imagem, e isso vai ser algo que vai aparecer se essa imagem não renderizar ou se alguém está usando um leitor de tela e obviamente não pode ler o que o conteúdo da imagem são. Mas ele pode ler o que os atributos todos marcam fora. A tag de imagem vai conter, e a partir daí ele vai ser capaz de decifrar melhor o que está contido nessa imagem . Então, na maior parte, sempre use todas as tags, e também vemos que temos alguns atributos adicionais lá, então você pode definir isso via styling também. Ou você pode defini-lo como um em linha atributos padrão para imagens que podemos definir o nosso com e altura, modo a definir uma largura. Então isso vai ser baseado no número de pixels que vai atravessar ESO por padrão foram 400 por 200. Então, se eu quisesse configurá-lo para ser menor, eu posso definir esse padrão com o B 300 agora. O interessante sobre HTML é que se você quiser manter essas mesmas dimensões, você não é realmente necessário. Precisa especificar a altura porque desde que você especifique a largura ou se você deseja especificar a altura e tem o com dinâmico, você pode fazer isso também. E os navegadores são inteligentes o suficiente para saber que você deseja manter essas mesmas dimensões. E essencialmente, é apenas apenas recontar Lee que essas dimensões devem ser para caber naquelas dimensões que estavam especificando lá Então ele vai levar a largura de 300 ele irá calcular a altura para 150.286 E, claro, se entrarmos em nosso editor e se definirmos ah, altura. Então, se definirmos uma altura de 300, irá distorcer as dimensões da imagem. Mas ele será capaz de definir e forçá-lo a ir para ser 300.300. Então você vê agora dentro do nosso Dev Cônsul aqui, nós temos 300 por 300. Essas são suas opções para quando você está definindo imagens e é assim que adicionar atributos e atributos adicionais. Nós já os usamos antes também aqui na meta tag, onde estávamos definindo atributos de nome e conteúdo. Então, todas essas tags diferentes podem conter seu próprio conjunto de atributos e atributos podem ser qualquer coisa, desde o estilo de duas informações adicionais que seriam necessárias ou típicas para que essa tag contenha e também vimos isso no hiperlink, onde temos dois atributos que estavam configurando para definir o que você é l que queremos visitar quando o link é clicado e bem como como queremos que o navegador Teoh renderizá-lo esse link. Então, se é uma nova página ou dentro dessa mesma página, 12. Tipos de lista HTML: nesta lição. Quero mostrar-lhe como fazer listas em listas ordenadas e listas ordenadas em HTML. Então vamos em frente e abrir nossa página HTML e, em seguida, dentro da seção de corpo. É aqui que vamos criar a nossa primeira lista. E o primeiro tipo de lista que vamos criar vai estar em uma nova lista ordenada . Portanto, existem dois tipos diferentes de listas, e este seria um exemplo de uma lista errada do Nord e a maneira como você pode criar listas que você começou pela primeira vez com a tag UL. E isso indica que o conteúdo entre a abertura U. L e toda a tag de fechamento é onde você vai conter seus itens de lista e criar itens de lista. Você cria itens de lista com a tag L I e, em seguida, o conteúdo fora desse elemento específico. Então eu vou criar uma lista. Talvez comece com primeiro e depois feche a etiqueta do aliado. Então esses elementos aqui vão se tornar os itens da lista. Então eu tenho Ally um 1º 2º 3º e podemos continuar a adicionar itens na lista conforme necessário. Então vamos para nossa página da Web, então eu tenho que simplesmente atualizar nossa página html do índice, e nós podemos ver isso automaticamente. A lista ordenada usa marcadores, e lista todos os itens da lista que listamos aqui e você verá que normalmente lista listas de listas Norden são usadas para menus de navegação. Eles têm estilo, a fim de torná-lo mais parecido com um menu de navegação. Mas você vai encontrar listas são usadas com bastante frequência dentro de HTML. Então você também tem algumas opções quando se trata de estilizar e estilizar seus itens de lista. Então, se eu quisesse estilizá-lo, então eu vou adicionar no estilo atributos. Então este é CSS que eu estou adicionando aqui, e eu posso configurar o tipo de estilo de lista. E então aqui eu indico que tipo eu quero. Então, um monte de menus de navegação você vai ver que nenhum está sendo usado. Você também tem uma opção para o padrão para o círculo ou o disco. Você também pode fazer quadrado também. Então você tem algumas opções diferentes para os diferentes estilos de seus itens de lista para seus marcadores. Então, agora, quando eu atualizar que nós vemos que nós temos agora itens quadrados dentro da nossa lista. Então também, junto com uma nova lista ordenada, temos o que é chamado de listas ordenadas. Agora, listas ordenadas vão permitir que você liste itens em uma função numérica, alfabética, usando algarismos romanos. Então, várias opções diferentes para diferentes maneiras de apresentar listas ordenadas. Então eu vou abrir nosso editor novamente, e eu vou criar uma nova lista ordenada, então isso vai ser diferente da lista ordenada. Mas ele ainda vai conter os mesmos itens da lista nesse tipo de moda semelhante e configurar tão semelhante ao que fizemos com a lista encomendada da ONU. Vou configurar uma etiqueta para a lista ordenada e etiqueta de fechamento para a lista ordenada. E aqui dentro é onde vamos listar todos os itens da lista. Então, a mesma coisa que fizemos aqui, vou pegá-los e listar o 1º 2º e o terceiro. Então esta vai ser apenas uma lista ordenada padrão. Vamos voltar e atualizar sua página, e podemos ver que nossos itens de lista estão sendo numerados com números físicos reais em vez dos marcadores que tínhamos na lista ordenada. Então, isso é essencialmente o que as diferenças entre o uso de listas erradas Nord e listas ordenadas é que nós temos a capacidade de definir as informações da lista ordenada em vez de apenas apontar pontos marcadores e listá-los para fora tão adicional ao padrão tipo, que é numerada com números, podemos listar um tipo e notar que este é um atributo padrão na lista ordenada, enquanto que uma lista nem fez nós realmente tivemos que usar atributos de estilo, que nós poderíamos nos usar bem para o sem fronteiras para que pode essencialmente ativar a lista ordenada e para um formato semelhante ao de uma nova lista ordenada. Quando eu atualizo isso, vemos que agora eles parecem iguais. E esta é uma das coisas realmente legais sobre o uso de CSS que você tem todas essas diferentes opções maravilhosas para ajustar a forma como você é elementos são apresentados em sua página da Web . Então, para este exemplo, eu também quero mostrar que lista ordenada tem os atributos padrão do tipo e dentro tipo. Por padrão, vai ser um. Então isso vai significar que estamos começando com, por padrão, no número um e listando a partir de então. Então este é o nosso padrão, e nós também temos a capacidade de usar alfabética para que possamos usar minúsculas A, B, C, C, e assim por diante. E também podemos usar uma maiúscula A e isso irá apresentá-lo com letras, letras maiúsculas e além de que dentro dos tipos padrão, também temos a capacidade de fazer algarismos romanos. E isso é indicado com em I eso novamente, poderia ser maiúscula ou minúscula I. E quando atualizamos, vemos que automaticamente eles tomam essas propriedades desses itens da lista. Então, na verdade, se eu fosse duplicar isso em nosso conteúdo dentro desses itens da lista, então não vai ser isso não vai ser incriminatório aqui porque nós não configuramos isso. Mas nós vamos ser capazes de representar todos os diferentes algarismos romanos indo todo o caminho para cima e continuamente incremental. E também, quando se trata de listas ordenadas, enfraquecer especificar o número que vai começar com, e nós fazemos isso indicando início. Então, se eu quiser começar às cinco, eu poderia fazer isso também, e eu poderia mudar isso de volta para a América se eu quisesse, e assim por diante. Então agora vemos isso porque estamos começando com o numeral romano cinco e somos incrementais todo o caminho para 10 11 12 e 13. Assim, com os itens da lista, também temos opções para o estilo. Então eu mostrei aqui como podemos aplicar algumas listas de estilo Teoh a Norden, e se quiser aplicar estilo a ele, podemos indicar UL para selecionar essa tag específica e, em seguida, aplicar o estilo a ela. E podemos trazer todo esse estilo para cima em sua. Então, isso é apresentado de uma forma muito mais limpa. E o que isso fará é que isso irá definir o tipo de estilo de lista lista A Nordling no CSS. Então, quando atualizamos, ainda estamos olhando para a cena configurada e também, mencionei que normalmente você verá uma nova lista ordenada usada nos menus de navegação . E se olharmos para esta semana e dissermos: Bem, Bem, isso não parece um menu de navegação porque eu tenho todos esses marcadores e é horizontal. Então o que nós faríamos é quem indicaria que temos o tipo de estilo de lista para definir isso como nenhum . Defina um novo item de lista de lista ordenada. Nós temos que ter certeza de que temos nossos seletores trazidos corretamente, e se você tem isso dentro de um menu de navegação, sempre certifique-se de que você está selecionando não apenas os itens de uma lista ordenada, mas você também está selecionando que elemento dentro do seu HTML. Então nós definimos como estamos fazendo a exibição, e isso é indicado por display, e nós poderíamos definir isso para estar em linha. Então, agora, quando eu sair e atualizá-lo, vemos que agora seria mais parecido com itens de menu. E, além disso, poderíamos continuar atualizando isso onde poderíamos adicionar algum preenchimento por lá também e atualizá-lo novamente. Então agora ele está começando a parecer mais e mais como itens de menu. 13. Divs HTML abrange nova estrutura HTML5: dentro desta lição. Quero falar sobre David e Spans. Então deixe-me dar um exemplo do que são dibs e quais são os vãos aqui em baixo. Então eu vou me livrar dessa lista ordenada, e eu estava indo para criar um mergulho básico. Assim, mergulhos são usados como contêineres dedo segurar conteúdo dentro dele. E então a idéia é que, com o estilo CSS, nós anexamos estilo a essas dibs particulares que reunimos. Dê-lhes em I D ou uma aula. E então é assim que estruturamos nosso site. Então, normalmente, antes de você ter algo como eu d igual cabeçalho. Então nós adicionamos esse atributo de cabeçalho e, em seguida, isso iria no topo aqui. E então nós teríamos outro aqui para navegações teria um eu d valete ou algo assim, dependendo do que nós queríamos chamá-lo, e então aqui embaixo então nós teríamos outro div e este poderia conter nosso conteúdo. Então poderíamos chamá-lo de algo como contêiner ou algo assim. E, finalmente, teríamos outro div aqui no fundo chamado Rodapé. Então, quando html cinco veio junto nós realmente doou com um monte desses diferentes tipos de dibs que usamos para estruturação. E agora temos tags reais que são usadas para substituir essa marcação. Então, em vez de ter um cabeçalho div I d, nós simplesmente teríamos uma tag de cabeçalho e então aqui teríamos uma tag de valete, e então aqui teríamos, ah, uma etiqueta de foto e, em seguida, os contêineres também. Agora, houve algumas mudanças com isso. Então, isso é novamente dependendo do que suas preferências quando você está criando suas páginas da Web. Então, essencialmente, o que um diff faz é que ele age de forma semelhante ao que um parágrafo faz é que ele nos permite separar o conteúdo. Então, se eu for para minha página da Web e eu atualizá-la agora e eu vou apenas passar para um gerador Laura um ipsum eso este é o texto padrão que você pode usar quando você está criando um site, então torná-lo mais autêntico, para que você não tenha apenas um monte de espaçamento em branco. Ele permite que você Teoh entender melhor o que seu site e como o layout vai ser. Então isso é o que eu estou adicionando aqui, e eu deveria separar o juramento por parágrafos também. Então alguns desses geradores, eles dão a você a capacidade de pegá-lo como código html e outros não. Então agora ele está separado como um parágrafo, e eu vou adicionar em algum texto adicional aqui dentro da área de rodapé, e eu vou adicionar mais um pouco de texto dentro da área de cabeçalho. E então essencialmente, isso irá simular muito meu site e meu layout de texto do site. E agora podemos entender melhor o que os mergulhos vão fazer. Então eu vou trazê-lo de volta para 100% e nós vemos a maneira que o dibs funciona. Eso eles funcionam de forma semelhante à forma como os parágrafos funcionavam, onde eles ocupam toda essa linha de conteúdo capturado e, hum, eles têm algum espaçamento acima, e abaixo dele, em ordem, gravado, capaz de diferenciar entre os diferentes mergulhos. Então aqui temos nosso título aqui temos nossa área de conteúdo principal, e então aqui, é claro, temos nossa seção de rodapé e para o seu conteúdo. Então, se você quiser aplicar estilo a ele, vai ser muito fácil de fazer porque agora, neste ponto, tudo o que temos que fazer é ir para I d header. E então, é claro, podemos aplicar algum estilo para que eu possa fazer uma cor de fundo ou algo assim e atualizá-lo e podemos ver que podemos selecionar essa definição específica. Então, e se nós realmente quiséssemos sentar conteúdo selecionado aqui? E daí se eu quiser destacar esse texto em particular, mas eu não queria destacar a coisa toda. Então é aqui que usamos vãos e vãos são mais uma dessas tags HTML que podemos usar para poder aplicar e selecionar determinados pedaços de conteúdo. Aplique estilo a isso. Então eu estou apenas procurando onde esse está localizado. E digamos que queremos aplicar algum estilo para que pudéssemos fazer span e tipicamente com vãos, muito tempo estaria usando classe. Então talvez eu possa chamá-lo de algo como destaque ou algo assim. E então qualquer texto que eu queira destacar, eu aninharia dentro desse elemento particular, o elemento span, e então eu iria até o meu estilo e eu faria destaques e poderia fazer cor de fundo e eso amarelo. Não, quando eu atualizá-lo, podemos ver que está amarelo agora. E a coisa com vãos é que percebemos que ele o mantém dentro da linha dentro do texto para que ele não aplique nenhum estilo adicional a ele. Portanto, não há realmente um estilo padrão aplicado a ele, e ele funciona diretamente dentro do nosso texto. Então agora com o advento do HTML 5, estamos agora seccionando todas essas dibs. Eles realmente fizeram uma pesquisa de todos os diferentes milhões e bilhões de páginas da web, e eles encontraram as diferentes idéias que estavam sendo usadas dentro das dibs mais comumente. E eles os tiraram, e em html cinco, eles os introduziram como imposto separado. Então, essencialmente, eles funcionam da mesma forma que um div. Eles vão pegar as mesmas propriedades de um diferencial. Mas nós apenas temos melhor layout e estruturação de nossas páginas da Web. Então agora podemos indicar, em vez de dar-lhe um I d definir uma div com um I d. Tudo o que fazemos agora é definir cabeçalho aqui. Agora nós podemos definir isso para valete Então isso é típico que cada site teria um menu de navegação e nós apenas costumávamos configurar isso como agora e agora com contêineres. Então contêineres é um daqueles que em debate porque há diferentes tipos de conteúdo que é representado aqui. Eso Você pode ou não precisar usar o contêiner, sec, sec, tags de contêiner ou contêiner i d dentro. Normalmente, os contêineres não têm seu próprio conjunto de tags como cabeçalhos e rodapés e knaves. Mas temos a opção de fazer algo como a seção. Nós também podemos fazer artigo e assim por diante. Então, normalmente, uma seção abrangeria toda a área de contêiner. E novamente, isso é representativo do conteúdo que você está fornecendo dentro desta área s. Então é por isso que estamos mantendo essas idéias porque nós normalmente teríamos talvez uma seção como um divisor para a estrutura. E então teríamos seções adicionais. Ou talvez teríamos artigos e assim por diante o que, representando a estrutura de conteúdo diferente que temos dentro do nosso código HTML. Então eu só vou ajustar este 1/2 rodapé agora e agora quando eu atualizá-lo. Então, é claro que eu tenho que atualizar meu CSS, bem como para representar o novo cabeçalho seção eso novamente com isso, você tem que ter muito cuidado porque normalmente dentro da seção você pode ter você pode estar reutilizando cabeçalho Você pode estar reutilizando rodapé uma e outra vez. E se esse for o caso, então é claro que você tem que ser mais específico com seu seletor. Mas porque eu estou apenas usando cabeçalho desta vez dentro do meu código HTML, Eu posso ficar longe de não ser específico. Mas quando se trata de CSS, você tem que ter muito cuidado com seus seletores e ter certeza de que você está selecionando seus elementos corretamente e certificando-se de que você está recebendo aqueles que você quer, mas também não incluindo partes de seu Código HTML que você não deseja incluir em seu. Então, se eu fosse selecionar algo como valete, mas então eu tinha outro lugar eu tinha alguma navegação adicional. Então, talvez navegação menor. Eu não quero que a minha barra de navegação estilo Teoh ser implementado em quaisquer áreas de navegação adicionais . Ou talvez eu faça de novo. Depende do que e como você está configurando seu site. Então agora eu vou voltar e atualizá-lo, e agora nós vemos que o cabeçalho mais uma vez é vermelho. Então, mais uma vez, vamos descobrir que não estamos usando. Dá tanto, mas eles ainda têm o seu lugar. Então, se você quiser aplicar estilo Teoh que toda a página Web você pode querer considerar usar um div e, em seguida, fechá-lo aqui antes de terminar o corpo. E isso nos dá a capacidade de aplicar estilo em toda essa área de conteúdo para que não tenhamos que necessariamente vincular o estilo ao corpo. Podemos fugir conosco, chocá-lo até hoje, que é apenas um rapper, caso não queiramos aplicar estilo a um corpo particular. Então tudo o que temos de fazer é não incluir este “rapper eso”. Agora eu posso acessar Rapper e eu posso definir algum estilo para rapper eso se eu quiser selecionar uma página com a qual vamos mostrar como fazer isso na próxima lição. Eso se quisermos fazer isso e queremos definir Ah, com desta página, com desta página, poderíamos fazer isso simplesmente selecionando este def para que eles ainda tenham seu lugar, a fim aplicar styling mesmo agora, dentro de HTML cinco 14. Curso de HTML usar CSS transformar seu HTML em uma página da Web: nesta lição. Eu quero olhar um pouco mais fundo para realmente criar um site real de todo esse código HTML que temos visto nas lições anteriores. Então eu vou atualizar cabeçalho e eu só vou escrever algo como o nome da minha empresa. E então isso é o que vai ficar contido dentro do cabeçalho. E então, é claro, nós temos nossa seção de navegação e eu vou me livrar dessa cor de fundo para eles e eu vou atualizar as cores um pouco melhor. Então talvez eu mantenha esse destaque. Vá votar e atualizar a página. Então temos o nome da nossa empresa. Temos a nossa barra de navegação. Temos todo o nosso conteúdo aqui e, em seguida, as nossas informações de rodapé. Então eu vou atualizar isso para ser mais típico fora de um site. Então talvez algumas informações de direitos autorais, e então eu vou adicionar alguns links da Piper aqui, e eu não vou fazê-lo ir a lugar algum ainda s para que possamos atualizar isso conforme necessário sempre que adicionarmos essas páginas. Então isso vai manter haxixe em branco. Há oh, isso vai recarregar a página e, em seguida, fechar essa. E então agora isso se parece mais com uma estrutura de página da Web real. Então, é claro, poderíamos adicionar conteúdo adicional também. Então talvez possamos gerar algum texto adicional de Laura Mo. E eu vou apenas copiar e colar um pouco deste texto recém-gerado em nosso conteúdo aqui. E eu tenho que adicionar em todos esses parágrafos e parágrafos finais, tags e também quero voltar e pegar uma imagem aqui. Então eu vou simplesmente adicionar nesta imagem padrão que nós olhamos antes. Então, talvez eu adicione isso aqui na área de texto superior e atualize seu para ver nossas páginas se parecem agora. Então agora temos mais texto. Temos uma imagem. Temos um rodapé claro, navegação e área de direção. Então agora podemos ir em frente e aplicar um pouco de estilo a ele. Eso tipicamente dentro do nosso menu de navegação eso estes seriam comprimento Então estes seriam hiperlinks. Então todos atualizá-los como tal E também nós provavelmente temos sobre seção. Chamem isso de barco e perdemos Lee, provavelmente temos algo como contato ou algo assim. Isso é típico para sites, então esses provavelmente seriam três itens de navegação típicos. Aqui está, então isso é mais uma barra de navegação. Então agora temos que aplicar algum estilo adicional. Então, já examinamos como estamos aplicando dentro do tipo de lista, então basta voltar para isso e dar uma olhada em nossa UL. Então o tipo de lista Ul é nenhum. Temos também de actualizar essas margens e o preenchimento. Então isso seria margem apenas para ter certeza de que não temos nenhum estilo persistente da lista ordenada porque eles notaram que aqui por padrão, nós temos uma margem. Temos um pouco de enchimento quando removemos isso. Isso é essencialmente retirando que Anno ordenou lista completamente de suas margens padrão e poundings. Então a outra coisa que precisamos fazer é que precisamos Teoh exibi-lo dentro de um formato de bloco, e quando olhamos para ele, já temos em linha. Então eu vou apenas atualizar isso para estar no bloco de linha. Isso é melhor formatação para nossos itens de lista e, em seguida, adicional a isso, eu posso realmente definir uma largura aqui ou algo que eu quero usar e eu vou atualizar para apenas os hiperlinks para incluir esse preenchimento para que ele vá diretamente em torno desse hiperlink eso Este será um com de toda a célula do item da lista. Então, agora, quando eu atualizá-lo, podemos ver a data espacial um pouco melhor. E então logo abaixo disso, eu vou atualizar esses itens da lista que têm ah, hiperlink. E então aqui dentro, eu vou fazer um bloco de exibição para ter certeza de que ele realmente é exibido como um bloco. E eu vou dar a ele um texto no centro da linha para ter certeza de que meu texto é um centro de linha. Quero remover os sublinhados. Então, decoração de texto nenhum. E eu quero definir uma cor de fundo porque eu também quero atualizá-lo quando ele fica pairado sobre. Então eu vou apenas defini-lo como grande, e eu vou dar-lhe uma cor de branco, a cor do texto de branco. Então veja como isso se parece. Então agora ele começa a parecer mais como uma barra de navegação real. E, claro, agora tudo o que precisamos fazer é adicionar nesse efeito de pairar para que possamos adicionar isso por item de lista aliado e adicionar e passar o mouse, e sempre fazer agora é atualizar o plano de fundo. Então, sempre que ele fica pairado sobre, eu posso atualizar a cor de fundo. Então talvez eu transforme-o em bloco. Então você vê que nós temos esse destaque lá. E então, é claro, podemos atualizar a barra de navegação real completamente para que possamos pegar algo como uma tão errada lá. Então é só ah, nós podemos talvez colocar alguma linha negra em toda a coisa onde podemos fazer algo assim também. E agora podemos selecioná-lo selecionando nav em si e dar-lhe que pai para que possamos dar-lhe uma cor de fundo. Podemos ter certeza que é com 100% e dar uma olhada e ver como isso parece de vez em quando. Por último, eu quero voltar aqui porque na verdade, eu deveria adicionar em alguns potting, então eu vou adicionar em batendo apenas para a parte superior e inferior, e eu não vou ter nenhum preenchimento na esquerda e direita eso agora que nós temos um barra de navegação completa, mais estilizada, então algumas outras peças que devemos atualizar também. Então agora que temos um conjunto de rapper. Então, se quiser realmente definir um padrão com, poderíamos definir algo como Max com eso. Isso vai torná-lo mais responsivo. Sempre que re tamanho, ele irá automaticamente para 100% para que pudéssemos fazer algo como largura máxima de 11 40 pixels. E então, é claro, precisamos centralizá-lo na maneira que centramos nosso conteúdo é dar-lhe Ah, margem de zero top e bottom, um auto esquerda e taxas. Então agora, quando eu atualizá-lo foram realmente centrado para o nosso conteúdo e nós também devemos atualizar nosso cabeçalho. Então atualizar ou cabeçalho, talvez possamos adicionar alguma cor de fundo adicional ou estilo em torno disso. Então, vou fazer o fundo. Então faça algo assim para o fundo e devemos deixar esse texto branco. E devemos adicionar um pouco de estofamento lá. Talvez eu possa fazer 25 picaretas e assim como tamanho lutado de 24 picaretas. Então atualize isso e veja como isso parece começar mais parecido com um site. E, claro, devemos fazer algo com essa imagem porque queremos que ela seja alinhada com o texto que nós. Bem, então vamos voltar para a nossa fonte. Então vamos fazer, vamos flutuar para a esquerda. Então isso vai puxar essa imagem para a esquerda de qualquer conteúdo. E, claro, devemos ter uma margem em torno disso, filho. Isso vai participar. Escolha, margem, atualize. Está à nossa imagem flutuar à esquerda. Aqui temos a nossa margem em torno dele. E por último, agora só precisamos atualizar nosso rodapé. E com o rodapé, eu vou fazer também definir uma cor de fundo. E eu vou fazer um pouco de enchimento lá também. Então, ele se destaca um pouco mais no centro. E agora podemos ver que temos um site mais estilizado e mais típico para o nosso código HTML. Então é assim que você atualiza seu código HTML e realmente o transforma em algo que se parece mais com um site usando CSS e estilo 15. Aplique o que aprendemos no curso: Então eu quero terminar este curso HTML aplicando as diferentes tags que tínhamos falado ao longo do curso. Então nós também tínhamos falado e olhado para tags de cabeçalho. Então, se notarmos aqui que nossa página na verdade não tem um título e nós devemos realmente incluir algumas informações de cabeçalho aqui para que possamos começar com um H uma tag e normalmente isso seria semelhante ao que está contido no meu título. Então, se eu tivesse curso HTML aqui do que eu poderia muito bem colocar H um tags aqui com h curso html . E então, é claro, se eu tivesse seções diferentes aqui dentro, então se eu tivesse minha primeira seção ou algo assim, então eu vou adicionar algumas seções adicionais e eu vou fechar essa seção e eu estou vai ter uma seção de uso cerebral e depois, é claro, fechou essa seção para que eu esteja sempre abrindo e fechando, certificando-se de que eu tenho todos esses elementos. Então, em última análise, eu poderia querer puxar esse para fora e configurar tags hte. Então, se eu tivesse alguma nova informação de subtítulo lá e, em seguida, se eu estou fazendo meu site olhar dentro desse tipo de moda. Então eu quero usar esses dois H dentro aqui também, que eu tenha um bom, tipo de estrutura semelhante ao meu site. E você pode ver que agora eu tenho cada um deles. Eu tenho meus dois h configurados e tudo está pronto para entrar no meu conteúdo web. Então, embora eu talvez devesse ajustar esta imagem porque agora que eu tenho esta nova seção, esta imagem realmente não se encaixa muito bem com o fluxo do site. Então, é claro, às vezes você deve fazer alguns ajustes. O que eu vou realmente fazer é eu vou atualizar o código, e eu vou adicionar em algum texto adicional lá para que esta primeira seção seja mais longa e eu vou conter mais informações lá, então isso vai fazer com que pareça mais apresentável e mawr em conformidade com as outras subposições. Então, eles são uma das coisas que você precisa ter certeza e ter certeza de que você está assistindo ao criar esses tipos de cabeçalhos. O Eso. Outra coisa sobre a qual falámos é como criar quebras de linha. Então, talvez aqui, eu só vou adicionar uma quebra de linha. Começando isso, se isso fosse você, uh, nova informação, talvez nós queiramos começar em uma nova linha. Eso nós falamos sobre hiperlinks adicionando em imagens eso também, se quisermos configurar comentários eso tipicamente talvez eu queira adicionar em um comentário aqui e dizer um logotipo algum ponto ou algo assim para que eu saiba que eu tenho esta nota aqui que eu definitivamente quero estar adicionando um local, talvez uma sub-linha abaixo lá ou algo Mawr para ser mais descritivo sobre esta página em particular . Então agora quando eu atualizar, é assim que agora temos todos os elementos típicos que você veria usados dentro de páginas HTML e nós apresentamos tudo agradável e limpo, agradável e ordenadamente estilizado usando CSS