Lição 2

Conhecer HTML

Com a nossa introdução ao HTML e ao CSS completa, está na hora de ir um pouco mais fundo em relação a HTML e analisar os vários componentes que fazem parte desta linguagem.

Para começar a construir websites, precisamos de aprender um pouco sobre quais são os elementos HTML que são melhores para exibir os diferentes tipos de conteúdo. Também é importante entender como é que os elementos são visualmente exibidos numa página web, bem como o que os diferentes elementos significam semanticamente.

Visão geral semântica

Então, o que é exatamente semânticas? A semântica em HTML é a prática de dar conteúdo no significado e estrutura da página usando o elemento apropriado. O código semântico descreve o valor do conteúdo numa página, independentemente do estilo ou aparência desse conteúdo. Existem vários benefícios para o uso de elementos semânticos, incluindo a possibilidade de computadores, leitores de ecrã, mecanismos de busca e outros dispositivos para ler e entender o conteúdo de uma página Web. Além disso, o HTML semântico é mais fácil de trabalhar, pois mostra claramente sobre o que é cada conteúdo.

Avançando, à medida que novos elementos são introduzidos, falaremos sobre o que realmente significam esses elementos e o tipo de conteúdo que melhor representam. Antes de fazer isso, no entanto, vejamos dois elementos - <div>s e <span>s - que na verdade não possuem nenhum valor semântico. Eles existem apenas para fins de estilo.

Identificar divisões e espaços

Divisões, ou<div>s, e <span>s são elementos HTML que atuam como conteúdo exclusivamente para fins de estilo. Como conteúdos genéricos, eles não possuem nenhum significado abrangente ou valor semântico. Os parágrafos são semânticos em que o conteúdo dentro de um elemento <p>é conhecido e entendido como um parágrafo. <div>s e <span>s não possuem tal significado e são simplesmente conteúdo.

Bloco vs elementos em linha

A maioria dos elementos são elementos de nível em bloco ou em linha. Qual é a diferença?

Os elementos de nível do bloco começam numa nova linha, empilhando um em cima do outro e ocupando qualquer largura disponível. Os elementos de nível do bloco podem ser juntos um ao outro e podem envolver elementos de nível interno. Veremos, com maior frequência, elementos de nível do bloco usados para partes maiores de conteúdo, como parágrafos.

Os elementos de nível interno não começam numa nova linha. Eles caem no fluxo normal de um documento, alinhando-se um após o outro e apenas mantêm a largura do seu conteúdo. Os elementos de nível interno podem ser juntos um ao outro, no entanto, eles não podem conter elementos de nível do bloco. Nós geralmente vemos elementos de nível interno com partes menores de conteúdo, como algumas palavras.

Ambos <div>s e <span>s, são extremamente valiosos ao construir um site na medida em que eles nos dão a capacidade de aplicar estilos direcionados a um conjunto de conteúdo contido.

Um <div> é um elemento de nível de bloco que é comumente usado para identificar grandes agrupamentos de conteúdo e que ajuda a criar o layout e o design de uma página web. A <span>, por outro lado, é um elemento de nível interno comumente usado para identificar agrupamentos menores de texto dentro de um elemento de nível de bloco.

Normalmente, vemos <div>s e <span>s com atributos de classe ou id para fins de estilo. Escolher um valor de atributo de classe ou id, ou nome, requer um pouco de cuidado. Queremos escolher um valor que se refira ao conteúdo de um elemento, não necessariamente a aparência de um elemento.

Por exemplo, se tivermos um <div> com um fundo laranja que contenha links de social media, o nosso primeiro pensamento pode ser dar ao <div> um valor de classe laranja. O que acontece se esse fundo laranja for mais tarde mudado para azul? Ter um valor de classe laranja já não faz sentido. Uma escolha mais sensata para um valor de classe seria social, pois pertence ao conteúdo do <div>, e não ao estilo.

<!-- Division -->

<div class="social">

<p>I may be found on...</p>

<p>Additionally, I have a profile on...</p>

</div>

<!-- Span -->

<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>

Comentários em HTML & CSS

O código anterior inclui pontos de exclamação dentro do HTML, e está tudo bem. Esses não são elementos, são comentários.

HTML e CSS dão nos a possibilidade de deixar comentários dentro do nosso código, e qualquer conteúdo dentro de um comentário não será exibido na página web. Os comentários ajudam a manter os nossos arquivos organizados, permitem definir lembretes e fornecer uma maneira de nós gerirmos de forma mais eficiente o nosso código. Os comentários tornam se especialmente úteis quando há várias pessoas a trabalhar nos mesmos arquivos.

Os comentários em HTML começam com <! - e terminam com ->. Os comentários do CSS começam com / * e terminam com * /.

Usar elementos baseados em texto

Muitas formas diferentes de media e conteúdo existem online; no entanto, o texto é predominante. Consequentemente, há uma série de elementos diferentes para exibir texto numa página web. Por enquanto, vamos nos concentrar nos elementos mais populares, incluindo títulos, parágrafos, texto em negrito para mostrar importância e itálico para a ênfase. Mais tarde, dentro da Lição 6, "Trabalhando com Tipografia", analisaremos mais de perto o estilo de texto.

Títulos

Os títulos são elementos de nível do bloco, e eles vêm em seis rankings diferentes,<h1> a <h6>. Os títulos ajudam a dividir rapidamente o conteúdo e estabelecer hierarquia e são identificadores de chave para utilizadores que lêem uma página. Eles também ajudam os motores de busca a indexar e determinar o conteúdo em uma página.

Os títulos devem ser usados numa ordem que seja relevante para o conteúdo de uma página. O título principal de uma página ou secção deve ser marcado com um elemento <h1>, e os títulos subsequentes devem usar os elementos <h2>, <h3>,<h4>, <h5> e <h6> conforme necessário.

Cada nível de título deve ser usado onde é semanticamente avaliado, e não deve ser usado para tornar o texto em negrito ou grande - existem outras formas melhores de fazer isso.

Aqui está um exemplo de HTML para todos os diferentes níveis de cabeçalho e a exibição resultante em uma página Web.

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

Título Demo

Paragrafos

Os títulos são frequentemente seguidos de parágrafos de suporte. Os parágrafos são definidos usando o elemento de nível do bloco <p>. Os parágrafos podem aparecer um após o outro, adicionando informações a uma página conforme desejado. Aqui está um exemplo de como configurar parágrafos.

<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>

<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up&ndash;advice which he sincerely took to heart.</p>

Paragrafo Demo

Texto em negrito com forte

Para por o texto em negrito e colocar uma forte importância nisso, usaremos o elemento <strong> em nível de linha. Existem dois elementos que serão em negrito para nós: os elementos <strong> e <b>. É importante compreender a diferença semântica entre os dois.

O elemento <strong> é utilizado semanticamente para dar uma grande importância ao texto e, portanto, é a opção mais popular para o texto em negrito. O elemento <b>, por outro lado, semanticamente significa deslocalizar estilisticamente o texto, o que nem sempre é a melhor escolha para o texto que merece atenção proeminente. Temos que avaliar o significado do texto que desejamos definir como negrito e escolher um elemento em conformidade.

Aqui estão as duas opções de HTML para criar texto em negrito em ação:

<!-- Strong importance -->

<p><strong>Caution:</strong> Falling rocks.</p>

<!-- Stylistically offset -->

<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>

Texto em negrito com forte demonstração

Texto com ênfase em Itálico

Para colocar o texto em itálico, colocando ênfase nisso, usamos o elemento em nível de linha <em>. Tal como acontece com os elementos para texto em negrito, existem dois elementos diferentes que iram por o texto em itálico, cada um com um significado semântico ligeiramente diferente.

O elemento <em> é usado semanticamente para colocar uma ênfase stressada no texto; é, portanto, a opção mais popular para o texto em itálico. A outra opção, o elemento <i>, é usada semanticamente para transmitir texto em uma voz ou tom alternativo, quase como se fosse colocado entre aspas. Mais uma vez, precisamos avaliar o significado do texto que queremos em itálico e escolher um elemento em conformidade.

Aqui está o código HTML para itálico:

<!-- Stressed emphasis -->

<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->

<p>The name <i>Shay</i> means a gift.</p>

Texto Itálico com Emphasis Demo

Esses elementos de nível de texto são bastante úteis para dar vida ao nosso conteúdo. Além disso, existem elementos estruturalmente baseados. Enquanto os elementos baseados em texto identificam títulos e parágrafos, elementos estruturais identificam grupos de conteúdo, como cabeçalhos, artigos, rodapés e por adiante.

Estrutura de construção

Durante a maior parte do tempo, a estrutura de uma página web foi construída usando divisões. O problema era que as divisões não fornecem valor semântico, e foi bastante difícil determinar a intenção dessas divisões. Felizmente HTML5 introduziu novos elementos estruturalmente baseados, incluindo os elementos <header>, <nav>, <article>, <section>, <aside> e <footer>.

Todos esses novos elementos visam dar sentido à organização das páginas e melhorar a semântica estrutural. Todos eles são elementos de nível do bloco e não têm nenhuma posição ou estilo implícito. Além disso, todos esses elementos podem ser usados várias vezes por página, desde que cada uso reflita o significado semântico apropriado.

Vamos dar uma olhada.

Cabeçalho

O elemento <header>, é usado para identificar o topo de uma página, artigo, secção ou outro segmento de uma página. Em geral, o elemento <cabeçalho> pode incluir cabeçalho, texto introdutório e até navegação.

<header>...</header>

<header> vs. <head> vs. <h1> através <h6> elementos

É fácil confundir o elemento <header> com o elemento <head> ou os elementos do título, <h1> a <h6>. Todos eles têm diferentes significados semânticos e devem ser usados de acordo com seus significados.

O elemento <header> é um elemento estrutural que descreve o cabeçalho de um segmento de uma página. É dentro do elemento <body>.

O elemento <head> não é exibido numa página e é usado para descrever metadados, incluindo o título do documento e links para arquivos externos. Cai diretamente no elemento <html>.

Navegação

O elemento <nav> identifica uma secção de principais links de navegação numa página. O elemento <nav> deve ser reservado somente para secções de navegação primárias, como a navegação global, um índice de conteúdo, links anteriores / próximos ou outros grupos de links de navegação dignos de nota.

Mais comum, os links incluídos no elemento <nav> serão vinculados a outras páginas dentro do mesmo site ou a partes da mesma página da Web. Diversos links únicos não devem ser envolvidos dentro do elemento <nav>; eles devem usar o elemento âncora, <a>, e o elemento âncora sozinho.

<nav>...</nav>

Artigo

O elemento <artigo> é usado para identificar uma secção de conteúdo independente e autónomo que pode ser distribuído ou reutilizado de forma independente. Muitas vezes, usaremos o elemento <artigo> para marcar publicações de blog, artigos de jornal, conteúdo enviado pelo utilizador e outros.

Ao decidir se deseja usar o elemento <artigo>, devemos determinar se o conteúdo dentro do elemento pode ser replicado noutro lugar sem confusão. Se o conteúdo do elemento <artigo> fosse removido do contexto da página e colocado, por exemplo, dentro de um email ou trabalho impresso, esse conteúdo ainda deveria ter sentido.

<article>...</article>

Secção

O elemento <section> é usado para identificar um grupo temático de conteúdo, que geralmente, mas nem sempre, inclui um título. O grupo de conteúdo dentro do elemento <section> pode ser de natureza genérica, mas é útil identificar todo o conteúdo como relacionado.

O elemento <section> é comum usa-lo para dividir e fornecer hierarquia para uma página.

<section>...</section>

Decidir entre <artigo>, <secção> ou <div> Elementos

Às vezes, torna-se bastante difícil decidir qual elemento - <artigo>, <section>, ou <div> - é o melhor elemento para o trabalho com base no seu significado semântico. O truque aqui, como com cada decisão semântica, é olhar para o conteúdo.

Ambos os elementos <article> e <section> contribuem para a estrutura de um documento e ajudam a delinear um documento. Se o conteúdo estiver a ser agrupado apenas para fins de estilo e não fornece valor ao contorno de um documento, use o elemento <div>.

Se o conteúdo adiciona ao esboço do documento e pode ser redistribuído ou sindicado independentemente, use o elemento <artigo>.

Se o conteúdo adiciona ao esboço do documento e representa um grupo temático de conteúdo, use o elemento

De lado

O elemento <de lado> contém conteúdo, como barras laterais, inserções ou explicações breves, que está tangencialmente relacionado ao conteúdo que o rodeia. Quando usado um elemento <artigo>, por exemplo, o elemento <de lado> pode identificar o conteúdo relacionado ao autor do artigo.

Podemos instintivamente pensar no elemento <lado> como um elemento que aparece no lado esquerdo ou direito de uma página. No entanto, devemos lembrar que todos os elementos estruturais, incluindo o elemento <de lado>, são elementos de nível do bloco e, como tal, aparecerão numa nova linha, ocupando a largura total disponível da página ou do elemento que eles são juntos dentro, também conhecido como o elemento pai.

<aside>...</aside>

Vamos discutir como mudar a posição de um elemento, talvez colocá-lo à direita ou a esquerda de um grupo de conteúdo, na Lição 5, "Posicionando Conteúdo".

Rodapé

O elemento <footer> identifica o fecho ou o fim de uma página, artigo, secção ou outro segmento de uma página. Geralmente o elemento <footer> é encontrado na parte inferior do seu elemento pai. O conteúdo dentro do elemento <footer> deve ser uma informação relativa e não deve divergir do documento ou secção em que está incluído.

<footer>...</footer>

Com elementos estruturais e elementos baseados em texto sob nossos cintos, o nosso conhecimento em HTML está realmente a começar a crescer. Agora é um bom momento para rever o nosso site da Conferência Styles e ver se podemos fornecer uma estrutura um pouco melhor.

Na prática

Atualmente, o nosso site da Conferência Styles não possui estrutura real e conteúdo para esse assunto. Vamos demorar algum tempo a expandir nossa página inicial um pouco.

1. Usando nosso arquivo index.html existente, vamos adicionar um elemento <header>. Nosso elemento <header> deve incluir o elemento <h1> existente; Vamos também adicionar um elemento <h3> como um slogan para suportar o elemento

   .

<header>

<h1>Styles Conference</h1>

<h3>August 24&ndash;26th &mdash; Chicago, IL</h3>

</header>

1. Após o nosso elemento <header>, vamos adicionar um novo grupo de conteúdo, usando o elemento <section>, que apresenta a conferência. Vamos começar esta secção com um novo elemento <h2> e terminá-lo com o parágrafo existente.

<section>

<h2>Dedicated to the Craft of Building Websites</h2>

<p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>

1. Após a introdução à conferência, vamos adicionar outro grupo de conteúdo que usaremos nalgumas das páginas que iremos adicionar, especificamente as páginas de speakers, agendamento e local. Cada uma das páginas que estamos a usar também deve residir dentro da sua própria secção e incluir texto de suporte.

Vamos agrupar todos os teasers dentro de um elemento <section>, e cada provocador individual também será envolvido dentro de um elemento <section>. Ao todo, teremos três elementos <secção> dentro de outro elemento <secção>.

<section>

<section>

`<h5>Speakers</h5>`

`<h3>World-Class Speakers</h3>`

`<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>`

</section>

...

</section>

4 .Por fim, vamos adicionar os direitos de autor dentro do elemento <footer> no final da nossa página. Para isso, vamos usar o elemento <small>, que semanticamente representa comentários laterais e impressões pequenas, perfeitas para os direitos de autor.

Geralmente, o conteúdo dentro do elemento <small> será renderizado como, bem, pequeno, mas o reset CSS impedirá que isso aconteça.

<footer>

<small>&copy; Styles Conference</small>

</footer>

Agora, podemos ver a página inicial a começar a ganhar vida.

Codificar Carateres Especiais

O elemento <h3> dentro do elemento <header>, bem como o elemento <small> no nosso elemento <footer>, têm algumas coisas interessantes. Especificamente, alguns caracteres especiais dentro desses elementos que estão codificados.

Os caracteres especiais incluem vários sinais de pontuação, letras acentuadas e símbolos. Quando escrito diretamente em HTML, eles podem ser mal interpretados ou confundidos com o caracter errado; portanto, eles precisam ser codificados.

Cada carater codificado começará com um & , e terminará com um ponto-e-vírgula; O que cai entre o e comercial e o ponto e vírgula é a codificação única de um carater, seja um nome ou codificação numérica.

Por exemplo, codificamos a palavra "resumé" como resumé. Dentro do nosso cabeçalho, codificamos nos en e nos traços, e dentro do nosso rodapé codificamos o símbolo de direitos de autor. Para referência, uma longa lista de codificações de caracteres pode ser encontrada em Copiar Colar o carater.

Com a página inicial ganahdno forma, vamos dar uma olhadela na criação de hiperlinks para que possamos adicionar páginas adicionais e construir o resto do nosso site.

Criar Hyperlinks

Junto com o texto, um dos principais componentes da Internet é o hiperlink, que fornece a capacidade de se conectar de uma página Web ou de um recurso para outro. Os hiperlinks são estabelecidos usando a âncora, <a>, elemento no nível de linha. Para criar um link de uma página (ou recurso) para outra, é necessário o atributo href, conhecido como referência de hiperlink. O valor do atributo href identifica o destino do link.

Por exemplo, clicar no texto "Shay", que está envolvido dentro do elemento âncora com o valor do atributo href de http://shayhowe.com, levará os utilizadores ao site.

<a href="http://shayhowe.com">Shay</a>

Criar Hyperlinks Demo

Elementos de nível do bloco com âncoras

Por natureza, o elemento âncora, <a>, é um elemento em linha e, de acordo com os padrões da web, elementos no nível de linha podem não conter elementos de nível do bloco. Com a introdução do HTML5, no entanto, os elementos âncoras especificamente têm permissão para envolver os blocos, inline ou outros elementos de nível. Esta é uma interrupção da convenção padrão, mas é permitido para permitir que blocos inteiros de conteúdo numa página se tornem links.

Caminhos relativos e absolutos

Os dois tipos mais comuns de links são links para outras páginas do mesmo site e links para outros sites. Esses links são identificados pelos seus valores de atributo href, também conhecidos como seus caminhos.

Links apontandos para outras páginas do mesmo site terão um caminho relativo, que não inclui o domínio (.com, .org, .edu, etc.) no valor do atributo href. Como o link está apontando para outra página no mesmo site, o valor do atributo href precisa incluir apenas o nome do arquivo da página que está a ser vinculada a: about.html, por exemplo.

Se a página estiver vinculada para residir dentro de um diretório diferente ou pasta, o valor do atributo href precisará refletir isso também. Diga que a página about.html reside no diretório das páginas; o caminho relativo seria então páginas / about.html.

Vincular a outros sites fora do atual exige um caminho absoluto, onde o valor do atributo href deve incluir o domínio completo. Um link para o Google precisaria do valor do atributo href de http://google.com, começando com http e incluindo o domínio, .com neste caso.

Aqui, clicar no texto "Sobre" abrirá a página about.html dentro do navegador. Ao clicar no texto "Google", por outro lado, abrirá http://google.com/ no navegador.

<!-- Relative Path -->

<a href="about.html">About</a>

<!-- Absolute Path -->

<a href="http://www.google.com/">Google</a>

Ligação a um endereço de e-mail

Ocasionalmente, podemos querer criar uma hiperligação para o nosso endereço de e-mail - por exemplo, texto de hiperlink que diz "Email Me", que quando clicado abre o cliente de e-mail padrão de um utilizador. No mínimo, o endereço de e-mail para o qual o e-mail está sendo enviado é preenchido; Outras informações, como uma linha de assunto e texto corporal, também podem ser incluídas.

Para criar um link de e-mail, o valor do atributo href precisa começar com mailto: seguido do endereço de e-mail ao qual o e-mail deve ser enviado. Para criar um link de e-mail para [email protected], por exemplo, o valor do atributo href seria mailto: [email protected].

Além disso, o assunto, o texto do corpo e outras informações para o e-mail podem ser preenchidas. Para adicionar uma linha de assunto, incluiremos o assunto = parâmetro após o endereço de e-mail. O primeiro parâmetro que segue o endereço de e-mail deve começar com um ponto de interrogação,?, Para vinculá-lo ao caminho de hiperlink. Múltiplas palavras dentro de uma linha de assunto exigem que os espaços sejam codificados usando %20.

A adição de texto do corpo funciona da mesma forma que a adição do assunto, desta vez usando o parâmetro body = no valor do atributo href. Como estamos a vincular um parâmetro a outro, precisamos de usar o &, para separar os dois. Tal como acontece com o assunto, os espaços devem ser codificados usando %20 e as quebras de linha devem ser codificadas usando %0A.

No total, um link para [email protected] com o assunto "Reaching Out" e o texto do corpo de "How are you" exigiria um valor de atributo href de mailto: [email protected]? Subject = Alcançando% 20Out & body = How% 20% 20você.

Aqui está a queda total:

<a href="mailto:[email protected]?subject=Reaching%20Out&body=How%20are%20you">Email Me</a>

Abrir links numa nova janela

Um recurso disponível com hiperlinks é a capacidade de determinar onde um link abre quando clicado. Normalmente, os links abrem na mesma janela a partir da qual são clicados; No entanto, os links também podem ser abertos numa nova janela.

Para desencadear a ação de abrir um link numa nova janela, use o atributo de destino com um valor de _blank. O atributo de destino determina exatamente onde o link será exibido e o valor _blank especifica uma nova janela.

Para abrir http://shayhowe.com/ numa nova janela, o código ficaria assim:

<a href="http://shayhowe.com/" target="_blank">Shay Howe</a>

Ligação para partes da mesma página

Periodicamente veremos hiperlinks que se ligam a parte da mesma página em que o link aparece. Um exemplo comum desses links da mesma página são links "Voltar ao topo" que retornam um utilizador para o topo de uma página.

Podemos criar um link na página, estabelecendo primeiro um atributo id no elemento ao qual desejamos vincular e, em seguida, usando o valor desse atributo id dentro do atributo href de um elemento de âncora.

Usando o link "Voltar ao topo" como um exemplo, podemos colocar um valor de atributo id de topo no elemento . Agora, podemos criar um elemento de âncora com um valor de atributo href de #top, sinal de libra e tudo, para ligar ao início do elemento .

O código para este link da mesma página seria o seguinte:

<body id="top">

...

<a href="#top">Back to top</a>

...

</body>

Os hiperlinks são incrivelmente úteis e revolucionaram a forma como usamos a Internet. Até agora, cobrimos como vincular a outras páginas ou sites, bem como criar links de e-mail e links para partes da mesma página. Antes de avançarmos, vamos criar alguns links.

Na prática

É hora de levar a Conferência Styles de um site de uma única página para um site completo com várias páginas, todas as quais serão vinculadas usando hiperlinks.

1. Começamos por fazer o texto "Conferência de estilos" dentro do elemento <h1> no nosso link de elemento <header> para a página index.html.

Porque já estamos na página index.html, isso pode parecer um pouco estranho e, com razão, mas como o cabeçalho é replicado noutras páginas, o link para a página inicial fará sentido.

Styles Conference

1. Para navegar em todas as diferentes páginas, vamos adicionar um menu de navegação, usando o elemento <nav>, no nosso elemento <header>. Estaremos a criar páginas de speakers, agendamento, local e registro para entrar com nossa página inicial, então devemos criar links para todos.

<header>

...

<nav>

`<a href="index.html">Home</a>`

`<a href="speakers.html">Speakers</a>`

`<a href="schedule.html">Schedule</a>`

`<a href="venue.html">Venue</a>`

`<a href="register.html">Register</a>`

</nav>

</header>

1. Vamos também adicionar o mesmo menu de navegação do nosso elemento <header> para nosso elemento <footer> por conveniência.

<footer>

...

<nav>

`<a href="index.html">Home</a>`

`<a href="speakers.html">Speakers</a>`

`<a href="schedule.html">Schedule</a>`

`<a href="venue.html">Venue</a>`

`<a href="register.html">Register</a>`

</nav>

</footer>

1. Dentro do elemento <section> que apresenta a nossa conferência, logo abaixo do nosso cabeçalho, também devemos incluir um link para registar a conferência. Colocar um link abaixo do parágrafo funcionará perfeitamente.

<section>

...

<a href="register.html">Register Now</a>

</section>

1. Não podemos esquecer de adicionar links para todas as secções que provocam as outras páginas. Dentro de cada secção, vamos embrulhar ambos os elementos <h3> e <h5> dentro de um elemento âncora vinculando-se à página apropriada.

Queremos garantir que façamos isso para cada secção conforme.

<section>

<section>

`<a href="speakers.html">`

  `<h5>Speakers</h5>`

  `<h3>World-Class Speakers</h3>`

`</a>`

`<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>`

</section>

...

</section>

1. Agora precisamos de criar algumas páginas novas. Vamos criar os arquivos speakers.html, schedule.html, venue.html e register.html. Esses arquivos devem estar dentro da mesma pasta que o arquivo index.html, porque os estamos a manter dentro da mesma pasta, todos os links devem funcionar como esperado.

Para garantir que todas as páginas sejam iguais, asseguremos que todos esses novos arquivos tenham a mesma estrutura do documento e os elementos <header> e <footer> como o arquivo index.html.

É oficial, não estamos mais a trabalhar com uma única página, mas sim um site completo.

Demo & Source Code

Abaixo, pode visualizar o site da Conferência Styles no seu estado atual, bem como fazer o download do código-fonte do site no seu estado atual.

Sumário

A semântica, conforme discutido nesta lição, é essencial para fornecer ao nosso HTML com estrutura e significado. Avançando, apresentamos periodicamente novos elementos, todos os quais virão com seu próprio significado semântico. É o significado de todos esses elementos que proporcionará o nosso conteúdo com maior valor.

Mais uma vez, nesta lição cobrimos o seguinte:

• Quais são as semânticas e porque são importantes?
• <div> s e <spanans> s, e a diferença entre os elementos do nível do bloco e do nível interno
• Quais os elementos baseados no texto que melhor representam o conteúdo de uma página
• Os elementos estruturais HTML5 e como definir a estrutura e organização do nosso conteúdo e página
• Como usar hiperlinks para navegar entre páginas da web ou sites

Espero que esteja a começar a sentir se muito bem em HTML. Ainda há um pouco para aprender, mas a base está no lugar. De seguida, vamos dar uma olhada mais profunda no CSS.