HTML 5 - Semantisiche Codierung meiner Homepage

sonja.kainrad.uni-linz, 22. Juni 2011, 18:07

HTML 5 Struktur

 html5 tags index.html

index.html:

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vivace - online piano lessons</title>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>

<body>
    <div id="wrapper">
        <header id="header">
        <img id="imageheader" src="header.gif" alt="header" />
        <h1>online piano lessons</h1>
          </header>

      <nav id ="nav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="grundlagen.html">Grundlagen</a></li>
        <li><a href="power.html">Power Lektionen</a></li>
        <li><a href="vivace.html">Vivace</a></li>
      </ul>
    <img src="klavier.gif" width="178" height="321" alt="klavier_menu" />
       </nav>
  
       <section class="content">
      <h2>Online Klavier spielen lernen</h2>
      <p><b>Tauchen Sie ein in Ihr neues oder wieder liebgewonnes Hobby!</b></p>
      <p>Hier bei <i>online piano lessons</i> lernen Sie anhand von Videos, Bildern, Beschreibungen und Notensätze mit Hörbeispielen alles, was Sie zum schnellen Erlenen des Klavierspielens benötigen. Ob Notenlehre, generelle Information zum Thema Klaviermusik oder Übungen - hier finden Sie es. Versuchen Sie doch auch unsere eigens für Sie zur Verfügung gestellten Power Lektionen. Eine Übung dauert nur 15 Minuten, in denen Sie effektiv Ihre Kentnisse im Notenlesen, Ihre Fingerfertigkeit, Ihr Rhythumusgefühl und Ihre Spieltechnik verbessern können.</p>
   
    <video class="video" controls="controls">
        <source src="vivace.mp4" type="video/mp4" />
        <source src="vivace.ogg" type="video/ogg" />
    </video>
   
     </section>
 </div>
</body>
</html>

 

css.css (Auszug):

.content {
  width: 816px;
  height: 517px;
  float: left;
  background: #d8dcdb;
  padding: 0 15px;
  margin: 0 0 0 0;
  border:0;
  overflow:auto;
}

.content h2 {
  font-size: 16px;
  color: #d41b23;
  font-family: Verdana, Arial, sans-serif;
}

.artikel {
    margin-bottom:50px;
} 

 

Nicht auf den Bildern enthalten, aber verwendet: figure, figcaption (innerhalb der articles)

html5 tags grundlagen.html

 

Link zur Homepage: online piano lessons

0 comments :: Kommentieren