HTML und CSS - Scripte

Heute ist

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]

Lösungen zum Informatik-Unterricht in den Klassen 9₁, 9₂ und 9₃

Thema	Hinweise	Dateien
HTML-Verweise	Lösung für den 17., 18., 19.03.: Klickt auf die Startdatei index.html, von dort aus könnt Ihr über die Links die anderen beiden Dateien öffnen und zwischen den Dateien hin- und her schalten. Klickt Ihr mit der rechten Maustaste auf einen Dateinamen und wählt im Kontextmenü den Befehl "Ziel speichern unter...", dann könnt Ihr die Datei auf Euren Rechner downloaden, dort mit PHASE 5 öffnen und weiter bearbeiten.	index.html theorie.html uebung.html
HTML-Tabellen	Lösung für den 31.03., 01., 02.04.: Klickt auf die einzelnen HTML-Dateien, um Euch die Ergebnisse anzuschauen. Klickt Ihr mit der rechten Maustaste auf einen Dateinamen und wählt im Kontextmenü den Befehl "Ziel speichern unter...", dann könnt Ihr die Datei auf Euren Rechner downloaden, dort mit PHASE 5 öffnen und weiter bearbeiten.	aufgabe1_tab.html aufgabe2_tab.html aufgabe3_tab.html
HTML-Bilder	Lösung für den 21., 22., 23. 04.: Die HTML-Datei anklicken, dann seht Ihr das Ergebnis sofort im Browser. Um die HTML-Datei zu downloaden, dann wieder mit der rechten Maustaste auf den Dateinamen klicken und im Kontextmenü den Befehl "Ziel speichern unter..." wählen. In der Datei Anleitung habe ich Euch eine Schrittfolge zum Erzeugen der Fuchstabelle aufgeschrieben - so könnte die Lösung entstehen...	Anleitung Fuchstabelle.html
CSS in HTML-Dateien	Lösung für den 05., 06., 07. 05.: Die HTML-Datei anklicken, dann seht Ihr das Ergebnis sofort im Browser. Um die HTML- bzw. CSS-Datei zu downloaden, dann wieder mit der rechten Maustaste auf den Dateinamen klicken und im Kontextmenü den Befehl "Ziel speichern unter..." wählen. In der Datei Lösungen.PDF habe ich für Euch die Lösungen zur Aufgabe 1 notiert. Die Datei css_uebung3.html enthält die CSS-Datei mein.css und die Datei css_uebung3_2.html enthält die CSS-Datei mein2.css. ACHTUNG: Farbrausch...	Lösungen.PDF css_uebung3.html css_uebung3_2.html mein.css mein2.css
Frames	Lösung für die Woche ab 25. Mai	Lösung.pdf
Sounds und Videos	Beispiel Hinweis: Die Funktionsweise dieser HTML-Datei lässt sich nur in einem modernen Browser testen (Firefox, Edge, Chrome), da die Tags erst ab HTML 5 erkannt werden. Der interne Browser von PHASE 5 kann das nicht.	video_sound.html

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