#3 Video Tutorial – HTML/CSS Erste Schritte II

Jetzt wollen wir einmal versuchen ein paar gängige HTML und CSS Elemente zu benutzen. Wir fügen ein Bild in unsere Seite ein, schreiben eine Liste und beschäftigen uns noch ein wenig mit formattierung. Falls noch nicht geschehen, seht euch das erste Videotutorial noch einmal an, damit Ihr alle Grundlagen habt, die für dieses Video Tutorial benötigt werden. Wer mag, kann gerne Kommentare hinterlassen und fragen stellen.


Get the Flash Player to see the wordTube Media Player.

html Code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>
		<title>Seite 2</title>
		<link rel="stylesheet" href="style.css" media="screen">
	</head>

	<body>

		<div class="divbox nummer1">
			<h1>Seite 2</h1>
			<p>Das ist einfacher Text. Hier geht es <a href="index.html">zur&uuml;ck</a></p>
			<ul>
				<li>Erstes Listenelement</li>
				<li>Zweites Listenelement</li>
				<li>Drittes Listenelement</li>
				<li>Viertes Listenelement</li>
			</ul>
		</div>

		<div class="divbox nummer2">
		         <div class="zentriert"><h1>Hallo, das ist ein Test</h1></div>
		         <p>Das ist einfacher Text.</p>
		         <div class="zentriert"><img src="bild.jpg" alt="ich in Vegas" /></div>
		</div>

	</body>

</html>

css Code

h1 { color: red; font-size: 19px; }

p {	color: #666; }

a {	color: black; }

.divbox { background-color: yellow; margin: 0px auto;
	width: 500px; padding: 10px; border: 1px solid black; }

.nummer1 { background-color: grey; }

.nummer2 { margin-top: 15px; }

.nummer1 p { color: white; }

.nummer1 h1 { color: yellow; }

.nummer1 ul { margin-left: 60px; }	

.nummer1 ul li { color: white;	list-style-type: none;
	font-size: 12px; padding: 5px 3px 3px 3px;
	width: 120px; background-color: black;	}

.zentriert { text-align: center; }

Kommentar schreiben