====== Webdesign – Grundlagen und erste Schritte ====== von Andreas Kalt ~~SLIDESHOW~~ ===== Websites machen ===== Was muss man wissen und können? {{:fortbildungen:webdesign:webpublishing.png?nolink|}}
[[fortbildungen:webdesign:ueberblick|Details zu dieser Abbildung]]
===== Browser – Zentrales Werkzeug ===== |{{ :fortbildungen:webdesign-lernen:firefox-icon.png?nolink |}}|{{ :fortbildungen:webdesign-lernen:chrome-icon.png?nolink | }}|{{ :fortbildungen:webdesign-lernen:safari-icon.png?nolink | }}|{{ :fortbildungen:webdesign-lernen:ie10-icon-strike.png?nolink | }}| | Firefox | Chrome | Safari | Internet Explorer |
Der Browser ist das zentrale Werkzeug zum Testen der selbst gemachten Website. Daher braucht man aktuelle Versionen aller gängigen Browser auf dem eigenen Rechner. Auch wichtige ältere Versionen, die bei Internetnutzern noch weit verbreitet sind, muss man evtl. installiert haben.
===== HTML – Die Web-Sprache ===== HTML: **H**yper**t**ext **M**arkup **L**anguage * **Language:** HTML ist eine **Sprache** mit bestimmten Regeln * **Hypertext:** **Text** mit einer zusätzlichen Bedeutung * **Markup:** **Auszeichnung**, Elemente werden ausgezeichnet = markiert ===== Hypertext ===== {{:fortbildungen:webdesign-lernen:hypertext-model-01.gif?nolink|}} {{:fortbildungen:webdesign-lernen:hypertext-model-02.gif?nolink|}} ===== Markup? ===== {{:fortbildungen:webdesign-lernen:markup-bsp-02.gif?nolink|}} ===== Markup: Auszeichnung ===== Prinzip erkannt? {{:fortbildungen:webdesign-lernen:markup-bsp-02.gif?nolink|}} {{:fortbildungen:webdesign-lernen:markup-bsp-01.gif?nolink|}} ===== HTML Markup Regeln ===== * HTML benutzt so genannten Elemente, um Text eine Funktion zu geben z.B. ''

'' für eine Überschrift 1. Ordnung * Ein Element besteht aus zwei Teilen: **Anfangstag und Schlusstag** ''

'' — das Schlusstag enthält einen Schrägstrich vor dem Tagelement * Tags können auch **verschachtelt** sein, z.B. {{:fortbildungen:webdesign-lernen:nested-tags.gif?nolink|}} ===== Wie wird Text zu Hypertext? ===== Durch (Hyper)-Links. * Das HTML-Element '''' kennzeichnet Links * Bsp: In diesem Satz [[ist dies ein Link]] * Das Markup dazu: ''in diesem Satz ist dies ein Link'' * 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. ''

'' und ''

'' * Dazu manchmal: Attribute und deren Werte {{:fortbildungen:webdesign-lernen:tag-attribut-wert.gif?nolink|}} ===== Wichtige HTML-Elemente (Teil 1) ===== Text wird mit HTML-Tags markiert, beides zusammen heißt „Markup“ * Überschriften: ''

'' bis ''
'' * Textabsätze: ''

'' * deutlich hervorgehoben: '''' (in der Regel fett) * betont: '''' (in der Regel kursiv) ===== Wichtige HTML-Elemente (Teil 2) ===== * Listen: „ungeordnet“ '''' und nummeriert ''
    '' * ''