Heute ist
SiteMap Abitur-Notenrechner Pruefungskomplexe Interaktive Karteikarten Studientipps Intranet BvC-Gymnasium Unterrichtsprojekte Lazarus-Programme ClassPad-Update eMail
TurboPascal
Delphi
Lazarus
OOP
HTML und CSS
JavaScript
PHP
XML
Grafik
Datenbanken
SQL
MS LOGO
Prolog
Kara
Wissen/Spiele
Unterrichtsprojekte
Tools
Info-Links
HTML und CSS - Scripte

[Startseite] [Homepages] [Scripte] [Tools] [Links]

Übungen - Hausaufgaben

  • Hausaufgaben für Klasse 9: Es sind eine Überschrift und zwei Absätze mit HTML nach zu bauen. Siehe Lehrbuch Mathematik Klasse 9, Seite 114 oben: Überschrift: Das Wichtigste auf einen Blick, Erster Absatz: Der Graph..., Zweiter Absatz: Eine Funktion..., Das Bild rechts und die Randbemerkungen links brauchen nicht berücksichtigt werden.

Termin der HA ist der 07.03.2017. Die HTML-Datei bitte per eMail an KadenFrank@t-online.de

Tutorials

Hier werden Tutorials für das Erlernen von HTML angeboten. Diese Scripte sind nur für schulinterne Fortbildungen geeignet und passwortgeschützt. Auf Wunsch wird das Passwort ehemaligen Kursteilnehmern bzw. Leitern von SCHILF mitgeteilt. Die in den Scripten verlinkten HTML-Beispieldokumente werden ebenfalls auf Wunsch (eMail-Anfrage) bereitgestellt.

  • Grundkurs 1, 1. Präsentationen – Varianten und Ziele, 2. Werkzeuge – Browser, HTML-Editor, Dateiarbeit, Bilder, Farben, Texte, 3. HTML-Grundlagen, 4. Listen, 5. Verweise
  • Grundkurs 2, 6. Tabellen, 7. Bilder
  • Aufbaukurs 1, 1. Wiederholung HTML-Tags (Seitenaufbau, Listen,Verweise, Tabellen, Bilder) 2. Formatierungen mit CSS, 3. Webseitenlayout, Corporate Design, 4. Einweisung in die Intranetstruktur, FileZilla, 5. Hinweise zum Textdokumentenformat PDF, 6. Frames (Rahmen)

Schnelleinstieg

Für Einsteiger bietet sich der folgende Schnelleinstieg in HTML an. Tippe dazu den folgenden HTML-Quelltext (in der linken Spalte) in den Texteditor von Windows Zeile für Zeile ein und verstehe dabei das Sprachprinzip von HTML. Alle Tags werden hierbei in ihrer Grundversion verwendet. Formatierungen, Farben usw. bleiben erst einmal unberücksichtigt. Das kann man sich dann später in den obigen Tutorials anlesen. Nach der Tipp-Arbeit die Datei z.B. unter dem Namen seite1.html speichern und mit einem Webbrowser betrachten.

HTML Erklärung
<html> Beginn einer HTML-Datei
<head> Beginn des HTML-Kopfes
<titel>Regenwald</titel> Hier wird der Tittel der HTML-Seite eingetragen, dieser steht dann später in der Kopfzeile des Browserfensters
</head> Ende des HTML-Kopfes, innerhalb des Kopfes werden später noch weitere Tags stehen
<body> Beginn des HTML-Körpers, innerhalb des Körpers erscheinen alle Inhalte der Webseite, die Reihenfolge des Inhalts ist dabei völlig dem Webmaster überlassen
<h1>Was ist ein Regenwald?</h1> In unserem Beispiel beginnen wir mit einer Überschrift, der h1-Tag erzeugt dabei die größte Schriftgröße, von h2 bis h6 werden die Überschriften immer kleiner, sie werden aber immer fett dargestellt.
<p>Obgleich die Begriffe Dschungel und Regenwald oft gleichgesetzt werden, bezeichnen sie doch unterschiedliche <b><i>Phänomene</i></b>. Unter Dschungel versteht man einen Wald, der oft von Wüstenabschnitten unterbrochen wird wie in Indien. Ein Regenwald ist ein feuchter, tropischer Wald wie der in Amazonien oder Südostasien.</p> Innerhalb des p-Tags steht normaler Text, hierbei handelt es sich um einen Absatz. Nach einem Absatz wird automatisch eine Leerzeile erzeugt.
Das Wort Phänomene wird durch den b-Tag fett gedruckt und durch den i-Tag zusätzlich kursiv dargestellt.
<ul>
<li>Dschungel</li>
<li>Regenwald</li>
<li>Tundra</li>
</ul>
Der ul-Tag erzeugt eine ungeordnete Liste, Die li-Tags enthalten dabei die einzelnen Listenzeilen. Es kann beliebig viele Zeilen geben. Setzt man statt des ul-Tags einen ol-Tag, wird eine geordnete Liste erzeugt.
<table border="1">
<tr>
<th>Waldformen</th>
<th>Eigenschaften</th>
</tr>
<tr>
<td>Regenwald</td>
<td>feucht, tropisch</td>
</tr>
<tr>
<td>Dschungel</td>
<td>trocken, Wüstenabschnitte</td>
</tr>
</table>
Der table-Tag baut eine Tabelle auf mit einem Rahmen (border) der Dicke 1. Jeder tr-Tag steht für eine Zeile, die th- bzw. td-Tags erzeugen Tabellenzellen, hier sind es jeweils zwei Zellen pro Zeile. Der th-Tag erzeugt zentrierte und fett gedruckte Zelleninhalte. Diese Tabelle besteht also aus drei Zeilen und zwei Spalten.
<a href="http://www.xyz.de">xyz</a>
<a href="seite2.html">Seite2</a>
Hier werden die beiden am häufigsten gebrauchten Verweise gezeigt, so genannte a-Tags. In der Eigenschaft href steht das Verweis-Ziel, im ersten Beispiel ist das Ziel eine (fiktive) Webseite im Internet, im zweiten Beispiel erfolgt ein Verweis auf eine (ebenfalls fiktive) lokale Webseite (hier seite2.html). Diese Verweise können überall im HTML-Quelltext stehen, innerhalb einer Liste, eines Absatzes oder in einer Tabellenzelle.
<center>
<img src="bild1.jpg" />
</center>
Mit dem img-Tag wird ein Bild (hier fiktiv Bild1.jpg) auf der Webseite angezeigt. Dieser Tag besitzt keinen schließenden Tag, deswegen der Schrägstrich am Ende. Der center-Tag ist nur dazu da, um das Bild mittig auf der Webseite darzustellen.
</body> Ende des HTML-Körpers
</html> Ende der HTML-Datei