HTML-Tags
Beschreibung HTML-Tags Beispiel
Textverarbeitungs- Programm
Windows-Editor, z. B. Notepad.
Speichern unter + *.htm (.htm evtl. manuell eingeben)
die Startseite muss als index.htm gespeichert werden.
Graphiken sind im Ordner images Webseiten im Ordner pages zu speichern.
realschule.htm gymnasium.htm index.htm
Grundstruktur
(Mindest- anforderung) (nur mit Body-Tag)
<html>
<head>
<title>
(erscheint in Browser-Titelleiste)
</title>
</head>
<body text="" bgcolor="">
(hier wird die Page-Hauptinfo eingefügt)
</body>
</html>
(body text=Haupttextfarbe
bgcolor=Background, Hintergrund)
<html>
<head>
<title>Schularten in Bayern</title>
</head>
<body text="orange">
<body bgcolor="gray">
Die Schule ist ein Segen und ein Alptraum zugleich. Auf dieser Seite informiere ich euch über die Realschule und das Gymnasium.
</body>
</html>
Hintergrundgrafik <body background=““>
(kleine Pix werden unendlich oft dargestellt)
<body background=“c:\images\hintergrundbild.jpg“>
Grundstruktur (mit Body- und Meta-Tags) Mit
SEO Tags (Search Engine Optimization) zur
Suchmaschinen- optimierung
<meta name=“description“ content=“Kurzinfo zur Seite hilft beim Navigieren in Suchmaschinen“>
<meta name=“author“ content=“Webautoren Name”>
<meta name=“keywords“ content=“ Dieser Beschreibungstext wird von den Suchmaschinen interpretiert und dient u. a. zur Posititionierung und Auffinden von Webseiten.“>
<html>
<head>
<title>Schularten in Bayern</title>
<meta name=“description“ content=“Pedro May zeigt welche weiterführenden Schularten es in Bayern gibt.“>
<meta name=”author” content=”Pedro May”>
<meta name=“keywords“ content=“Pedro May, Bayern, Realschule, Gymnasium, Realschulabschluss, Abitur“>
<meta name=“date“ content=“29.01.2021 20:22:24“>
<!-- F5 aktualisiert Datum und Uhrzeit, dieser Text erscheint nicht im Front-End --!>
</head>
<body text="orange" bgcolor="gray">
Auf dieser Webseite könnt ihr euch über die Realschule und das Gymnasium informieren.
</body>
</html>
Kommentar <!-- --!>
(wird lediglich im Quelltext angezeigt)
<!—diese Page habe ich mit meinem besten Kumpel Sepp erstellt --!>
Sonderzeichen ä = ä
Ä = Ä
ö = ö
ü = ü
ß = ß
Leerzeichen=
♠ Pik-Zeichen= ♠
♥ Herz-Zeichen= ♥
Schüler wird mit umlaut u geschrieben
Sonstige Zeichen nach ISO 8859-1:
http://de.selfhtml.org/html/referenz/zeichen.htm Textgröße <h6> </h6>
(h6 = kleinste Schrift, h1 = größte Schrift) Fettschrift
Kursiv Laufschrift Diktengleich (Fernschreiber)
<b></b>
<i> </i>
<marquee></marquee>
<tt></tt>
<b>Fette Textdarstellung</b>
<marquee>diesen Text als Laufschrift darstellen</marquee>
<tt>diesen Text diktengleich, also im Telegramm-Schriftstyle darstellen</tt>
Schriftart Schriftgröße Schriftfarbe
<font face=schriftart>
(nur Schriften verwenden die der Browser kennt!)
<font size=>
(nur Zahlen 1 – 8 erlaubt)
<font color=>
(offener Tag,
keine Abschlusstags notwendig!)
<font face=arial>diesen Text in Arial darstellen </font face>
<font size=8> diesen Text in der Größe 8 darstellen
<font color=blue> diesen Text blau darstellen
16 Standard- Farben z. B. für Background, Fonts, etc.
Eingabe der Farbnummer, bzw.
des englischen Farbnamens.
Z. B.
<body text=“#000000“ bgcolor=“#FFFF00“>
Schwarz mit dem Hex-Wert #000000 enthält im RGB Farbraum
0 % Rot, 0 % Gelb, 0 % Blau.
Absatz <p></p> <p> Meine graue graue Welt </p>
Trennlinien <hr>
(keine Abschlusstags notwendig!)
(automatische Anpassung an Browser-Fenster)
<p>Hier ist ein Abschnitt zu Ende.</p>
<hr>
<p>Und hier beginnt etwas Neues</p>
Text/Grafik Zentriert Linksbündig Rechtsbündig Blocksatz
<p align=center></p>
align=left align=right align=justify
<h1>
<p align=center> Realschüler werden häufig gute Handwerker </p>
</h1>
Zeilenumbruch <br> ohne Abschlusstag Leerzeile <p> </p>
Grafik einfügen <img src=““>
(kein Abschlusstag notwendig!) Absoluter
und relativer Verweis Bild/Link einfügen
<a href="“></a>
Relativer Verweis:
- Gehe EINE VERZEICHNISEBENE NACH OBEN, dargestellt durch ../
- dann in den Ordner Images, dargestellt durch images/
- suche dort die Grafik realschule-traunreut- schulgebaeude-sommer_500p.jpg
Absoluter Verweis auf eine Subpage:
<a href="c:\pages\gymnasium.htm“>Klick hier für Gymnasium Infos</a>
Relativer Verweis auf eine Grafik:
<img src=“../images/realschule-traunreut-schulgebaeude-sommer_500p.jpg“>
Grafik-Verweis auf alternative Page (absolut)
<a href=““></a> <a href="home.htm"><img src="c:\images\schulgebaeude.jpg"></a>
Email-Verweis <a href=“mailto:benutzer@domaine.suffix“> <a href=“mailto:pedro.may@it-realschule.de“>Sende mir eine Mail</a>
Linkfarben <vlink=color> Farbe des aktiven Links
<alink=color> Farbe des verbrauchten Links
