Medienproduktion HTML5 Struktur

stephanie_inken.lankmayer.uni-linz, 22. Juni 2011, 17:50

HTML5 Struktur

Designentwurf-HTML

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Golf Tipps - das Spiel verbessern.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="doc">
  <header id="header">
          <nav id="nav2"><a href="impressum.html">Impressum</a></nav>
          <img src="Bilder/banner.jpg" alt="Banner" name="Banner" width="1024" height="198" class="banner" id="Banner" style="background: #fceeb4; display:block;" />
        <nav id="nav">
        <a href="index.html">Start</a>
        <img src="Bilder/spacer.gif" width="60px" height="1px"alt="spacer" />
        <a href="golfetikette.html">Golfetikette</a>
         <img src="Bilder/spacer.gif" width="59px" height="1px"alt="spacer" />
        <a href="abschlag.html">Abschlag</a>   
         <img src="Bilder/spacer.gif" width="59px" height="1px"alt="spacer" />
        <a href="pitchen_chippen.html">Pitchen und Chippen</a>   
         <img src="Bilder/spacer.gif" width="59px" height="1px"alt="spacer" />
        <a href="bunkerspiel.html">Bunkerspiel</a>
         <img src="Bilder/spacer.gif" width="59px" height="1px"alt="spacer" />
        <a href="putten.html">Putten</a>
        </nav>
  </header>
  <section class="content">
      <article id="artikel">    
  <h1>Golf Tipps - das Spiel verbessern.</h1>
  <div class="textcenter">
  <p>
  Aller Anfang ist schwer, aber nicht mit unserern Tipps zum Golfspiel. Jeder Golfeinsteiger sollte von Anfang an, Freunde am golfen haben. Diese Webseite soll dies unterstützen. Anhand einfacher Tipps können Sie ihr Spiel verbessern. Anhand genauer Beschreibungen zum Bunkerspiel, Putten, Pitchen und Chippen oder zum Abschlag können Sie die wesentlichen Punte ablesen. Zudem kann die geforderte Technik anhand Bilder und einem Video besser veranschaulicht werden.
  <h2>Wir wünschen ein schönes Spiel!</h2>
  </p>
  </div>
  <div class="videopos">
     <video class="video" src="Bilder/golf.mp4" controls="controls"></video>
  </div>
      </article>
 </section>
</div> 
</body>
</html>

 

Style.css

header, section, aside, nav, article { 
    display: block; 
}


body {
  font-size: 15px;
  font-family: Calibri, sans-serif;
  margin: 0 0 0 0;
  padding:0 0 0 0;
}
 
a:link{
    color:#398303;
    text-decoration:none;
}

a:hover{
    color:#333;
    text-decoration:underline;
}
 
#doc  {
  width: 1024px;
  margin: 0 auto;
}

#header {
    margin: 0;
    padding: 0;
    margin-bottom:0;
    height:260px;
    width:1024px;
    background-color:#fceeb4;
}

h1 {
  font-size: 25px;
  color: #398303;
  font-family: Calibri, sans-serif;
  font-style:italic;
  text-align:center;
}

h2 {
  font-size: 18px;
  color: #398303;
  font-family: Calibri, sans-serif;
}

#nav {
    font-size:20px;
    color:#398303;
    margin-top:8px;
    margin-left:67px;
    margin-right:67px;
    text-align:center;
}

#nav2 {
  font-size:12px;
  text-align:right;
  margin-right:70px;
  margin-bottom:2px;
}

.content {
    float:left;
    text-align:justify;
    padding-left:67px;
    padding-right:67px;
    background-color: #fefcf3;
    height:512px;
}

.textcenter{
    text-align:center;
}

.artikel {
    float:left;
}

.aside {
    height:512px;
    margin-left:30px;
    float: right;
}

.video {
  width: 512px;
  height: 288px;
}

.videopos {
text-align:center;
}

 

 

Hier der Link zum Themenvorschlag

Hier der Link zum Designentwurf

Hier der Link zur fertigen Homepage

Hier der Link zur Videobeschreibung

0 comments :: Kommentieren