Sítios Web I

<html> Marcação de bloco

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw1 link

Marcação de bloco: <div> e <span>


<div>
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>



<p>My mother has <span style="color:blue">blue</span> eyes.</p>

E agora as novatas (tags) do HTML 5

▼
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
Boa leitura

section

De acordo com a documentação HTML5 do W3C: "Uma seção é um agrupamento de conteúdo temática, tipicamente com um título." 

<section>
<h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

article

Um artigo deve fazer sentido por si só, e que deve ser possível lê-lo de forma independente do resto do site. Segue alguns exemplos:

  • forum
  • post de blog
  • artigo de jornal
<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

header

Especifica um cabeçalho de um documento ou seção e deve ser usado como um recipiente para o conteúdo introdutório.
Pode ter várias <header> elementos em um único documento. 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

footer

Especifica um rodapé de um documento ou seção. 

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

nav

Define um conjunto de links de navegação. 

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

aside

Utilizado para definir o conteúdo secundário, normalmente colocado a uma barra lateral. 

<p>My family and I visited The Epcot center this summer.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

figure e figcaption

imagens e legendas podem ser agrupados na tag figure 

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

Atributos

  • Marcações HTML podem ter atributos
  • Atributos oferecem informações adicionais
  • Os atributos SEMPRE aparecem na tag de abertuda
  • Atributos são escritos com nome / valor. Ex: name="value"

▼

Atributos globais

Attribute Description
class Specifies one or more classnames for an element (refers to a class in a style sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)

Migrando HTML4 para o HTML5

HTML4 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>
▼

Mudar a codificação


<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">-->



<meta charset="utf-8">
<!--<meta charset="iso-8859-1">-->

Código completo - exemplo

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>Estrutura de exemplo em HTML5</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Novidades</a></li>
    <li><a href="#">Contator</a></li>
  </ul>
</nav>

<section>
  <h2>Section</h2>

  <article>
      <h3>Article</h3>
      <p>
          <a href="http://mussumipsum.com/" target="_blank">Mussum ipsum</a> cacilds, vidis litro abertis. Consetis adipiscings elitis. 
      </p>
      <p>
          Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.
      </p>
  </article>

  <article>
      <h3>Article</h3>
      <p>
          Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
      </p>
      <p>
          Manduma pindureta quium dia nois paga.
      </p>
      <p>
          Sapien in monti palavris qui num significa nadis i pareci latim.
      </p>
  </article>
</section>

<footer>
  <p>© 2015 HTML5. Todos os direitos reservados.</p>
</footer>

</body>
</html>

Conteúdos extras de HTML

Links

Cursos

DevTools (F12)

Prova 1 - P1

Escrever um(s) arquivo(s) html pessoal e individual, contendo as informações do seu site pessoal.

O html deve estar validado no W3C Validator, bem formatado e bem nomeado (id e class). Deve conter uma boa quantidade de informações pessoais.

Entrega via moodle

O que tem em um site pessoal?

  • Informação
  • Trabalho
  • Gosto / Hobby
  • Blog
  • Social
  • Contato

Pode ter algo a mais? quero saber?

Principais exemplos

Mais exemplos dos veteranos de TSI:

Alguns links
(para inspirar)

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link