Roberts Informatik-Kurs-Unterlagen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: Übersicht » (H) Internet » HTML & CSS » HTML in 30 Minuten
Zuletzt angesehen: • HTML in 30 Minuten

Seitenleiste

internet:html:html_in_30min:start

Inhaltsverzeichnis

HTML in 30 Minuten

Diese Seite soll Ihnen in ca. 30 Minuten einen Einblick in HTML geben, und Ihnen ermöglichen, eine einfache Webseite zu erstellen.

Falls Sie Editor und Browser noch nicht offen haben, beginnen Sie bitte mit:

Sie benötigen 3 offene Fenster übersichtlich nebeneinander am Bildschirm angeordnet:

  1. Editor für das Bearbeiten des HTML-Quelltext (Source Code) der HTML-Datei
  2. Browserfenster für das Anzeigen der HTML-Datei
  3. Browserfenster für das Anzeigen dieses Skriptums

Wichtig: Sehen Sie sich jede kleine Änderung am Quelltext gleich im Browser an!

Textauszeichnung (<b>, <i>)

Seite1.html
<html>
<body>
 
<i>meine</i> <b>erste</b> Seite
 
</body>
</html> 
das ist <b>fett</b> (bold)
das ist <i>kursiv</i> (italic)
das ist <u>unterstrichen</u> (underline)

Unterstrichen ist im Web aber keine gute Idee, weil Links Benutzer berechtigterweise dahinter Links vermuten.

Erinnern Sie sich:
1.) HTML-Tag einfügen (nicht auf das eventuell erforderliche schließende Tag vergessen!)
2.) Speichern (z.B. Strg + S)
3.) Reload (z.B. F5 oder Strg+ R) und im Browser ansehen, was das Tag bewirkt hat.

Tags lassen sich auch verschachteln: 

das ist <b>fett und <i>kursiv</i></b>!

Achten Sie auf die richtige Reihenfolge, d.h. schließen Sie Tags in der umgekehrten Reihenfolge.
Richtig: <b><i></i></b>, falsch: <b><i></b></i>.

Zeilenumbrüche (<br>, <p>)

Zeilenumbrüche im Quelltext werden überraschenderweise völlig ignoriert. 

Zeilenumbrüche
im
Quelltext
werden
ignoriert

Um eine neue Zeile zu beginnen benötigen Sie entweder den Tag <br> (break) oder <p> (paragraph). Die meisten Browser machen nach einem <p> einen größeren Abstand. 

Das ist ein Zeilen<br>umbruch<p>Nächster Absatz.

Wie Sie an diesem Beispiel wieder sehen, sind Zeilenumbrüche im Quelltext nicht entscheidend. Sie könnte auch alles nebeneinander in eine Zeile schreiben, der Browser macht Zeilenumbrüche erst bei <br>, <p>, <h1>, …

Überschriften (<h1>, <h2>, <h3>, ...)

Überschriften bringen Struktur in eine Seite. h steht für heading, es gibt Überschriften 1. bis 6. Ordnung.

Seite1.html
<html>
<body>
<h1>Ich lerne HTML</h1>
<i>meine</i> <b>erste</b> Seite
 
</body>
</html>

Aufzählungslisten (<ol>, <ul>, <li>)

<h2>Aufzählungslisten</h2>
<h3>unordered list (ul)</h3>
 
<ul>
    <li>Äpfel</li>
    <li>Birnen</li>
    <li>Zitronen</li>
</ul>
 
<h3>ordered list (ol)</h3>
<ol>
    <li>PC einschalten</li>
    <li>Einloggen</li>
    <li>E-Mails abrufen</li>
</ol>

Trennline (<hr>)

Mit dem Tag <hr> (horizontal ruler) können Sie eine Trennlinie darstellen lassen. 

Äpfel
<hr>
Birnen

Farben

Farbcodes

Die Farben setzen sich aus Rot-, Grün- und Blau-Anteilen zusammen.
Je nach Anteil (Angabe zwischen 0 und 255Dez = FFHex) können Sie beliebige Farben mischen.

R
Rot-Anteil 		G
Grün-Anteil 		B
Blau-Anteil 		HTML
Farbcode
Farbe
0 0 0 #000000alles auf Null → Schwarz
FF 00 00 #FF0000Rot voll aufgedreht, alle anderen auf Null → Rot
99 00 00 #990000Rot teilweise aufgedreht → Dunkelrot
00 00 FF #0000FFBlau voll aufgedreht, alle anderen auf Null → Blau
FF 00 FF #FF00FFRot und Blau aufgedreht → Magenta
FF FF FF #FFFFFFalle Farben voll aufgedreht → Weiß
Die wichtigsten Farbkombinationen können Sie dieser Grafik entnehmen:
 Falls Sie Inspirationen
für weitere Farben suchen,
finden Sie diese
vielleicht in folgender

Farbtabelle

style-Attribut

Hier ein paar Beispiele, wie Sie mit dem style-Attribut Farbe in Ihre HTML-Seiten bringen können:

Wenn Sie style="background-color:#......" in den vorhandenen body-Tag einbauen (es kann nur einen body-Tag in der Datei geben!), können Sie dem ganzen body-Bereich, also der ganzen Seite, eine Hintergrundfarbe geben. 

<body style="background-color:#CCFF99">

Sie 'können style="color:#......" in einen vorhandenen Überschriften-Tag einbauen, wie im Beispiel in <h2>. 

<h2 style="color:#006600">Studium an der BOKU</h2>

Falls Sie einen Bereich im Text einfärben möchten, können Sie den Tag Sie span verwenden, und style="color:#......" oder style="background-color:#......" einbauen. 

das ist <span style="background-color:#FFFF00">wichtig</span>!

Hier ein Link zu einer externen Adresse: 

Hier geht es zur 
<a href="http://www.boku.ac.at">BOKU</a>

Wenn Ihr Webauftritt aus mehreren HTML-Seiten besteht, die sich alle im gleichen Ordner befinden, können Sie folgendermaßen darauf verlinken: 

Zu meinem <a href="lebenslauf.html">Lebenslauf</a>

Hier ein Download-Link für eine PDF-Datei: 

<a href="Lebenslauf_MUSTERMANN_Max.pdf">Download als PDF</a>

Bilder (<img>)

Bilder befinden sich immer in separaten Dateien. Der Browser wird mit dem Tag <img> (image) angewiesen, diese Bilder auf der Seite darzustellen. Dazu ist natürlich auch die Angabe des entsprechende Dateinamens erforderlich, diese Angabe kommt ins Attribut src (source). 

<img src="Urlaub.jpg">

Es ist sehr praktisch, wenn die Grafikdatei im selben Ordner steht wie die HTML-Datei, dann kann eine Pfadangabe entfallen (= relative Pfadangabe!). Das ist deshalb wichtig, weil sich Pfadangaben unter Windows und auf Linux- Webserver unterscheiden können.

Grafikdateiformate

Im WWW werden vor allem folgende Grafikdateiformate verwendet:

  • GIF: geeignet für Grafiken mit maximal 256 Farben und großen Flächen gleicher Farbe. Typische Anwendungsfall sind Logos, Diagramme etc., GIF ist für Fotos nicht geeignet; Transparenz möglich;
  • JPG: geeignet für Bilder mit sehr vielen Farben, typisch für Fotos; keine Transparenz möglich;
  • PNG: Moderner Ersatz für das GIF-Format; Transparenz möglich;

Wenn eine Grafikdatei in einem anderen Format vorliegt, muss sie mit Hilfe eines Grafikprogramms (z.B. IrfanView, Paint) in PNG, GIF, JPG konvertiert werden, wenn man sie im Web verwenden will. Im Zweifelsfall speichern Sie in mehreren Formaten und schauen nach, welches weniger Speicherplatz (und damit Übertragungszeit) erfordert.

Bildgröße, Bildausschnitt

Wenn das Bild zu groß ist oder der Bildausschnitt nicht passt, muss die Grafikdatei mit Hilfe eines Grafikprogramms (z.B. IrfanView) bearbeitet werden.

Bilderquellen

Bilder können von jeder Webseite folgendermaßen kopiert werden: Bild mit rechter Maustaste anklicken, speichern mit 'Grafik speichern unter …' / 'Save Image As …'. Achtung, Urheberrecht! Nur weil es technisch möglich nicht, heißt das noch lange nicht, dass eine Weiterverwendung auch erlaubt ist!

Layout

HTML ist nicht für millimetergenaues Layout konzipiert. Ganz anders als beispielsweise bei PDF, wo Sie z.B. für eine A4-Seite mit den Maßen 210 mm × 297 mm layouten, können Sie beim Erstellen einer HTML-Seite nie wissen, wie groß das Fenster des Betrachters ist (vielleicht hat er einen kleineren Bildschirm als Sie, vielleicht einen größeren, vielleicht hat er das Browserfenster auf Vollbild, …). Versuchen Sie daher unbedingt, Ihre Seite so zu gestalten, dass sie auch auf kleineren Bildschirmen (z.B. Netbooks, Smartphones) gut aussieht bzw. lesbar ist.

Für Layout-Aufgaben wird CSS (Cascading Style Sheets) eingesetzt, auf das in dieser kurzen Einführung aber nicht näher eingegangen wird.

Umlaute, Sonderzeichen

Da HTML-Seiten auf ganz verschiedenen Betriebssystemen mit verschiedenen Zeichensätzen gelesen werden sollen, sollten Sonderzeichen (dazu gehören auch ö,ä,ü,ß) besonders codiert werden, wenn man sichergehen will, dass diese auch auf nichtdeutschsprachigen oder exotischen Betriebssystemen korrekt dargestellt werden:

ä: &auml; ö: &ouml; ü: &uuml; Ä: &Auml; Ö: &Ouml; Ü: &Uuml; ß: &szlig;

Weitere Zeichen siehe z.B.: http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz#Unicode-Tabellen

Tabellen (<table>, <tr>, <td>)

Tabellen eignen sich für tabellarische Darstellung Die Tags <table>…</table> umschließen die ganze Tabelle. Jede Zeile (table row) wird mit <tr>…</tr> umschlossen, die Zellen mit Inhalt (table data) mit den Tags <td>…</td>. Das macht das händische Erstellen von Tabellen ein bisserl zu einer Denksportaufgabe. Sehen Sie sich daher nebenstehendes Beispiel samt Ergebnis gut an: 

<table border="1">
<tr><td>Nachname:</td><td>MUSTERMANN</td></tr>
<tr><td>Vorname:</td><td>Max</td></tr>
</table>

Tabellen mit unsichtbarem Rahmen (Attribut border="0") lassen sich auch für Layout-Aufgaben missbrauchen: 

<table border="0"> 
  <tr>
     <td>Nachname:</td>
     <td><b>MUSTERMANN</b></td>
  </tr> 
  <tr>
     <td>Vorname:</td>
     <td><b>Max</b></td>
  </tr> 
</table>

Natürlich können Sie auch Bilder in Tabellen einbauen: <td><img src="..."></td>.

Kopf (<head>, <title>)

Vermutlich haben Sie sich gefragt, wozu es einen eigenen <body>-Tag gibt. Tatsächlich gibt es auch einen Kopf dazu: <head>. Im <head> können eine Menge Angaben stehen, auf die wir in dieser 30-Minuten-Einführung aber nicht eingehen, wichtig ist allerdings der <title>-Tag.
Fügen Sie bitte den <head>…</head> vor dem <body>…</body> ein. Der <title>-Tag steht innerhalb des <head>, und weil dieser erfahrungsgemäß immer mit <h1> verwechselt wird, kommt er in dieser Einführung erst jetzt zur Sprache.
Probieren Sie es aus, und finden Sie heraus, wo im Browser der Text angezeigt wird, den Sie zwischen <title>…</title> eingegeben haben! 

<html>
   <head>
      <title>Max Mustermanns HTML-Übungen</title>
   </head>
 
   <body>
   ...
   ...
   ...
   </body>

Grundgerüst einer HTML5-Datei

HTML hat nun seit 1992 auch schon einige Entwicklungsschritte hinter sich. Seit 2014 ist HTML5 aktuell. Falls Sie vorhaben, eigene HTML-Seiten ins Web zu stellen, laden Sie bitte folgendes Grundgerüst als Vorlage für alle neuen Seiten herunter.

Das Attribut lang (language) legt die Sprache fest: de .. Deutsch, en .. English etc.: <html lang="de">

Die Zeichencodierung <meta charset="utf-8"> vermeidet Probleme mit Zeichen wie ä, ö ü, ß. Achten Sie beim Speichern darauf, dass der Editor auch in UTF-8-Codierung speichert (nähere Erklärungen im Kapitel "Bits & Bytes").

Auf CSS wird erst im nächsten Kapitel eingegangen.

HTML5-Vorlage.html
<!doctype html>
<html lang="de">
 
  <head>
    <meta charset="utf-8">
    <title>Grundgerüst einer HTML5-Seite</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style>
       <!--- Platz für CSS -->
    </style>
  </head>
 
  <body>
     Dieser Text wird im Browserfenster angezeigt.
  </body>
 
</html>

Weiterführende Informationen

internet/html/html_in_30min/start.txt · Zuletzt geändert: 2018-05-07 19:11 von Robert Wiedermann

Seiten-Werkzeuge

Robert Wiedermann, Institut für Statistik (STAT), Universität für Bodenkultur Wien