fortbildungen:webdesign-lernen:ueberblick-erste-schritte
Dies ist eine alte Version des Dokuments!
Inhaltsverzeichnis
Webdesign – Grundlagen und erste Schritte
von Andreas Kalt
~~SLIDESHOW~~
Websites machen
Was muss man wissen und können? – Details zu dieser Abbildung
Browser – Zentrales Werkzeug
Firefox | Chrome | Safari | Internet Explorer |
HTML – Die Web-Sprache
HTML: Hypertext Markup Language
- Language: HTML ist eine Sprache mit bestimmten Regeln
- Hypertext: Text mit einer zusätzlichen Bedeutung
- Markup: Auszeichnung, Elemente werden ausgezeichnet = markiert
Hypertext
Markup?
Markup: Auszeichnung
Prinzip erkannt?
HTML Markup Regeln
- HTML benutzt so genannten Elementen, um Text eine Funktion zu geben z.B.
<h1></h1>
für eine Überschrift 1. Ordnung - Ein Element besteht aus zwei Teilen: Anfangstag und Schlusstag
<p> </p>
— das Schlusstag enthält einen Schrägstrich vor dem Tagelement - Tags können auch verschachtelt sein, z.B.
Wie wird Text zu Hypertext?
Durch (Hyper)-Links.
- Das HTML-Element
<a>
kennzeichnet Links - Bsp: In diesem Satz ist dies ein Link
- Das Markup dazu:
in diesem Satz <a href="/pfad/zur/datei.html">ist dies ein Link</a>
- Ein Hyperlink braucht neben dem einfachen Tag noch eine weitere Angabe: Das Ziel des Links
Aufbau eines HTML-Elements
- Das eigentliche Tag mit Anfang und Schluss: z.B.
<p>
und</p>
- Dazu manchmal: Attribute und deren Werte
Wichtige HTML-Elemente (Teil 1)
Text wird mit HTML-Tags markiert, beides zusammen heißt „Markup“
- Überschriften:
<h1></h1>
bis<h6></h6>
- Textabsätze:
<p></p>
- deutlich hervorgehoben:
<strong></strong>
(in der Regel fett) - betont:
<em></em>
(in der Regel kursiv)
Wichtige HTML-Elemente (Teil 2)
- Listen: „ungeordnet“
<ul></ul>
und nummeriert<ol></ol>
<ul>
und<ol>
umfassen alle<li>
<ul> <li>erster Listenpunkt</li> <li>zweiter Listenpunkt</li> </ul>
Übung: Plaintext-Dokument auszeichnen
Wende nun das Gelernte an.
- Speichere die Datei
{{:fortbildungen:webdesign:india-unformatiert.txt|}}
lokal auf Deinem Rechner und benenne sie inindia-formatiert.html
um. - Formatiere den Inhalt der neuen HTML-Datei so, dass die Struktur und die Darstellung im Browser der Datei
{{:fortbildungen:webdesign:india-formatiert.pdf|}}
entsprechen. - Öffne die Datei lokal im Browser, um das Ergebnis beständig zu überprüfen. Wenn Du Änderungen durchführst, muss Du die Darstellung im Browser jeweils neu laden (z.B. durch Drücken von F5 (Windows) oder ⌘ R (Mac).
Du kannst den HTML-Spickzettel als Hilfe benutzen.
fortbildungen/webdesign-lernen/ueberblick-erste-schritte.1443560621.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)