HTML 5 und CSS

Medienproduktion :: fabian.egginger.Uni-Linz, 22. Juni 2011, 15:38

 

HTML 5

Dies ist die Einteilung meiner Webseite:

 

<header>

 

<nav>

 

<section>

 

<article>

 

<figure>

 

<footer>

 

Im <header> befindet sich das Logo sowie die Navigation. In <section> befindet sich der Inhaltsbereich. <article> kennzeichnet textuellen Inhalt und <figure> beinhaltet Grafiken, die neben dem Text aufscheinen. <footer> enthält Detailinformationen über Webseite

 

 struktur

<vergrößern>

 

HTML-Code:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Regenerate!</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<header id="banner" class="body">
       
        <img src="regenerate_logo.gif" alt="Regenerate!" />

    <nav><ul>
        <li class="active"><a href="#">Produkt</a></li>
        <li><a href="vertrieb.html">Vertrieb</a></li>
        <li><a href="musik.html">Musik</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul></nav>
</header><!-- /#banner -->   

<section id="content" class="body"><article>
    <figure>
        <img src="dose2.gif" alt="Regenerate!" />
    </figure>
     <hgroup>
        <h1>Lade deine Batterien wieder auf!</h2>
        <h2>Regenerate, der neue Regenerationsdrink!</h3>
    </hgroup>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea

takimata sanctus est Lorem ipsum dolor sit amet.<a href="index.html">...mehr</a>
</p>
</article>
</section><!-- /#content -->

<footer id="contentinfo" class="body">
    <p>Medienproduktion, Fabian Egginger's <a href="http://collabor.idv.edu/0756010/topics/Medienproduktion">Blog</a>.</p>
</footer><!-- /#contentinfo -->
</body>
</html>

 

CSS

Auszug:

body {
    background: #F5F4EF;
    color: #272727;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429em;
    margin: 0; /*Außenabstand*/
    padding: 0; /*Innenabstand*/
    text-align: left;
}

 

/***** Überschriften ******/
h1 {font-size: 1.571em}    /* 22px */
h2 {font-size: 1.429em}    /* 20px */

h1, h2 {
    font-weight: 400;
    line-height: .6em;
}

 

/***** Links ******/

a:link, a:visited {
    color: #ff6b00;
    text-decoration: underline;
}
a:hover, a:active {
    color: #ff6b00;
    text-decoration: none;
    text-shadow: 1px 1px 1px #4b4b4b;
}

 

/**** Nagivationsleiste *****/
#banner nav {
    background: #000305;
    font-size: 1.143em;
    height: 40px; /*Höhe der Navigationsleiste*/
    line-height: 30px; /*Schrift*/
    margin: 0 auto 1.8em auto;
    padding: 0; /* "Rahmen der Navleiste*/
    width: 800px;

    border-radius: 5px;
    -moz-border-radius: 5px; /*Für Mozilla*/
}

 #banner nav a:link, #banner nav a:visited {
    color: #fff;
    display: inline-block; /*erzeugt eine Box, die sich nach Außen wie eine Inline-Box verhält, also den normalen Textfluss mitmacht, im Inneren jedoch eine Block-Box darstellt*/
    height: 30px;
    padding: 5px 2.5em; /*Abstand nach oben, Abstand zwischen den Links*/
    text-decoration: none;
}
#banner nav a:hover {
    background: #ff6b00;
    color: #ffffff;
    
}

 

#content figure {
    float: right;
       margin: 0em 0em 0em 3em; /*top,bottom,right,left*/
    width: 160px;

}

 

Einbinden von multimedialen Inhalten

Audio

Soundcloud bietet die Möglichkeit Audiodateien hochzuladen und diese in die Webseite mittels HTML-Code einzubinden. Des weiteren bieten Soundcloud auch an, den Player farblich frei nach den wünschen des Benutzers zu gestalten.

 

Beispielcode:

 

<object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F16613084"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F16613084" type="application/x-shockwave-flash" width="100%"></embed> </object>  <span><a href="http://soundcloud.com/doeasyrec/rik-moser-chicago-eric">Rik Moser - Chicago (Eric Johnston's 7am Mix)</a> by <a href="http://soundcloud.com/doeasyrec">doeasyrec</a></span>

 

Link zur Webseite

hier

0 comments :: Kommentieren