topics Erstmalige Anwendung von HTML5

claudia.reich2.uni-linz, 22. Juni 2011, 17:53

Im Rahmen von HTML5 wurde auf folgende (neue) Funktionen zur Erstellung der Homepage zurückgegriffen:

Tags

  • <section>
  • <nav>
  • <article>
  • <video>
  • <header>
  • <footer>
  • <img>
  • <h1> bis <h4>

 

HTML5-Auszug aus der Website:

<body>

<div class="container">
  
  <header>
  	<a href="Index.html"><img src="Bilder/Home_01.jpg" width="700" height="213" 
 alt="Reifenwechsel selbst gemacht"></a>
  	<h3>Selbst ist die Frau</h3>

  	<h1>Radwechsel leicht gemacht</h1>
  </header>
  
  <nav class="sidebar">
      <ul>
      	<li class="menu"></li>
      	<li class="menu" id="active">1</li>
      	<li class="menu"><a href="Schritt2.html">2</a></li>

      	<li class="menu"><a href="Schritt3.html">3</a></li>
      	<li class="menu"><a href="Schritt4.html">4</a></li>
      	<li class="menu"><a href="Schritt5.html">5</a></li>
      	<li class="menu"><a href="Schritt6.html">6</a></li>
    </ul>
  </nav>
  
  <article class="content">

  	
    <section class="navigation">
   	  <a href="Index.html">Schritt zurück</a>
    </section>
  	
    <section class="step">    	
       	<h4>Wo liegt was?</h4>
        <p>Finden von Reserverad und Werkzeug im Auto</p>
    </section>
    
    <section class="description">

    	<video width="320" height="240" controls>
          <source src="videos/werkzeugfinden.webm" type="video/webm"></source>
          <source src="videos/werkzeugfinden.ogg" type="video/ogg"></source>
          <source src="videos/werkzeugfinden.mp4" type="video/mp4"></source>
        </video>
    </section>
    
    <section class="description">
    	Öffnen Sie den Kofferraum Ihres Fahrzeugs und heben Sie den Kofferraumboden.<br/>

    	Es müsste ein Reifen und/oder ein Reparaturset zum Vorschein kommen.<br/>
        Entnehmen Sie jegliches dort befindliches Werkzeug und das Reserverad.<br/><br/>
        Ebenso im Kofferraum - teilweise seitlich, teilweise am Kofferraumdeckel innen - finden Sie ein Warndreieck,
        welches Sie im Fall einer Panne aufstellen sollten, um nachfolgende Autofahrer zu warnen. Um optimale Sichtbarkeit zu gewährleisten ziehen Sie sich dazu auch eine Warnweste über.<br/>
        Im Optimalfall haben Sie sogar Handschuhe und einen Knieschutz im Fahrzeug bzw. zur Hand.
    </section>
       
    <section class="navigation">
    	<a href="Schritt2.html">Schritt vorwärts</a>

    </section>	    
  </article>
  
  <footer> 
 	<a href=#id="impressum">Impressum</a>
   <img src="Bilder/footer.jpg" width="700" height="150" alt="Fußzeile">
  </footer>

</div>
</body>

 

 

CSS

Jegliche Formatierungen und Designs werden mit CSS vorgenommen.

Auszug aus der Website:

 

h1 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: xx-large;
	font-style: italic;
	padding-bottom: 0px;
	position: absolute;
	left: 245px;
	top: 150px;
	color: #6BAFEE;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	line-height: 30px;
	text-align: center;
}
h2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: large;
	padding: 0px;
	vertical-align: 0%;
	margin: 0px;
}
h3 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: large;
	position: absolute;
	left: 150px;
	top: 70px;
	color: #F4F4E7;
}
h4 {
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: medium;
	line-height: 25px;
}

.container {
	width: 700px;
	margin: 0 auto; 
	background-color: #f4f4e7;
	padding: 0;
}

header {
	background-color: #f4f4e7;
	width: 700px;
	position: relative;
}

.sidebar {
	float: left;
	padding-bottom: 0px;
	background-color: #f4f4e7;
	position: relative;
	width: 150px;
	height: 700px;
}
nav ul {
	list-style: none;
	font-size: 30px;
	font-style: italic;
	color: #6BAFEE;
	margin: 0px;
	line-height: 80px;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-weight: bold;
}
.sidebar a:hover {
	font-size: 1.3em;
	color: #70B2EF;
}

.content {
	width: 550px;
	float: right;
	margin: 0px;
	padding: 0px;
}
.description {
	padding-top: 30px;
	padding-right: 50px;
}
video {
	position: relative;
	left: 95px;
}

footer {
	background: #f4f4e7;
	position: relative;
	clear: both;
	height: 150px;
	width: 700px;
}

 

zurück

0 comments :: Kommentieren