Niveau:
Meilensteine - Sir Tim Berners-Lee und das World Wide Web
HTML Einführung - HTML 1
Schau dir den Quelltext genauer an (Version 1)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<!-- Das ist der Kopf der Seite. Hier werden verschiedene Sachen definiert, wie die Sprache, Beschreibung, Suchworte etc. -->
<head>
<title>Hier steht der Titel der Homepage</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="language" content="de" />
<meta name="description" content="Hier eine Beschreibung des Inhalts der Seite" />
<meta name="keywords" content="Homepage, nicht, wichtig" />
<meta name="robots" content="index" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print_style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />
</head> <!-- Der Kopf wird mit einem Tag beendet.-->
<body> <!-- Hier beginnt der "Körper" der Seite. Ab hier gestaltest du deine Seite. -->
<h1>Meine erste Homepage</h1>
<p>Das möchte ich der <i>ganzen Welt</i> mitteilen.</p>
<h2>Meine Familie</h2>
<p>In diesem Absatz lernt ihr <b>meine Familie</b> kennen. </p>
<h2>Meine <u>Haustiere</u></h2>
<p>Ich habe ... </p>
<h2>Was ich gerne mag. </h2>
<p> Hier ist es einfacher eine Liste zu erstellen. </p>
<ul> <!-- Mit ul beginnt man eine ungeordnete Liste-->
<li> Wasser</li>
<li> zu Schule gehen :) </li>
<li>...</li>
<li>...</li>
<li> Weihnachten</li>
</ul>
<h2> <font color=red> Meine Tag </font> </h2>
<p> Ich möchte euch kurz meinen Tagesablauf erklären. </p>
<ol> <!-- Mit ol beginnt man eine geordnete Liste (nummeriert).-->
<li> Der Wecker klingelt. Motiviert springe ich aus dem Bett. </li>
<li> Nach einem </li>
<li>...</li>
<li>...</li>
<li> Der Tag endet ...</li>
</ol>
<h2> Mein Tipp für euch </h2>
<p> Wenn ihr im Internet etwas zum Thema Mathematik sucht, <br>dann geht am besten auf diese Seiten.
<ul>
<li>Zum üben kann man den <a href="https://mathe.aufgabenfuchs.de/konzept.shtml" >Aufgabenfuchs</a> nutzen.</li>
<li><a href="https://www.schlaukopf.de/" target="_blank" >Auch auf Schlaukopf kann man üben.</a></li>
<li>...</li>
</ul>
</body>
</html>
Schau dir den Quelltext an (Version 2)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<!-- Das ist der Kopf der Seite. Hier werden verschiedene Sachen definiert, wie die Sprache, Beschreibung, Suchworte etc. -->
<head>
<title>Hier steht der Titel der Homepage</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="language" content="de" />
<meta name="description" content="Hier eine Beschreibung des Inhalts der Seite" />
<meta name="keywords" content="Homepage, nicht, wichtig" />
<meta name="robots" content="index" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print_style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />
</head> <!-- Der Kopf wird mit einem Tag beendet.-->
<body> <!-- Hier beginnt der "Körper" der Seite. Ab hier gestaltest du deine Seite. -->
<h1>Meine erste Homepage</h1>
<p>Das möchte ich der <i>ganzen Welt</i> mitteilen.</p>
<h2>Meine Familie</h2>
<p>In diesem Absatz lernt ihr <b>meine Familie</b> kennen. </p>
<h2>Meine <u>Haustiere</u></h2>
<p>Ich habe ... </p>
<h2>Was ich gerne mag. </h2>
<p> Hier ist es einfacher eine Liste zu erstellen. </p>
<ul> <!-- Mit ul beginnt man eine ungeordnete Liste-->
<li> Wasser</li>
<li> zu Schule gehen :) </li>
<li>...</li>
<li>...</li>
<li> Weihnachten</li>
</ul>
<h2> <font color=red> Meine Tag </font> </h2>
<p> Ich möchte euch kurz meinen Tagesablauf erklären. </p>
<ol> <!-- Mit ol beginnt man eine geordnete Liste (nummeriert).-->
<li> Der Wecker klingelt. Motiviert springe ich aus dem Bett. </li>
<li> Nach einem </li>
<li>...</li>
<li>...</li>
<li> Der Tag endet ...</li>
</ol>
<h2> Mein Tipp für euch </h2>
<p> Wenn ihr im Internet etwas zum Thema Mathematik sucht, <br>dann geht am besten auf diese Seiten.
<ul>
<li>Zum üben kann man den <a href="https://mathe.aufgabenfuchs.de/konzept.shtml" >Aufgabenfuchs</a> nutzen.</li>
<li><a href="https://www.schlaukopf.de/" target="_blank" >Auch auf Schlaukopf kann man üben.</a></li>
<li>...</li>
</ul>
</body>
</html>
Fragen zum Quelltext (Version 2)
- Wie unterscheiden sich die Tags am Anfang und am Ende?
- Womit kann man den Aussehen des Textes ändern?
- Welche verschiedenen Listen gibt es?
- Wie kann man Internetseiten verlinken?
- Was muss ich tun damit der Text nur im Quelltext zu sehen ist aber nicht auf der Internetseite?
Deine erste Seite (Version 2)
- Kopiert euch den Quelltext in einen Editor und verändert ihn.
- Verändert das Aussehen des Textes, baut Links ein, ...
- Wenn ihr es als .html Datei speichert, könnt ihr es im Brwoser überprüfen.
- Speichert eure Seite in eurem Ordner und eine Version schickt ihr mir per Email.
Fragen zum Quelltext
- Wie unterscheiden sich die Tags am Anfang und am Ende?
- Womit kann man den Aussehen des Textes ändern?
- Welche verschiedenen Listen gibt es?
- Wie kann man Internetseiten verlinken?
- Was muss ich tun damit der Text nur im Quelltext zu sehen ist aber nicht auf der Internetseite?
Deine erste Seite
- Kopiert euch den Quelltext in einen Editor und verändert ihn. Verändert das Aussehen des Textes, baut Links ein, ...
- Wenn ihr es als .html Datei speichert, könnt ihr es im Brwoser überprüfen.
- Speichert eure Seite in eurem Ordner und eine Version schickt ihr mir per Email.