Webseiten – HTML Gliederung 1.Einführung in HTML 2.Aufbau einer einfachen Webseite.

Präsentation zum Thema: "Webseiten – HTML Gliederung 1.Einführung in HTML 2.Aufbau einer einfachen Webseite."—  Präsentation transkript:

1 Webseiten – HTML Gliederung 1.Einführung in HTML 2.Aufbau einer einfachen Webseite

2 1. Einführung in HTML ● Die Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache) ist eine Auszeichnungssprache zur Strukturierung von Inhalten (Texte, Bilder, Hyperlinks) in Dokumenten. ● HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. ● Das HTML-Dokument enthält – die vom Browser als Webseite darzustellenden Inhalte (mit Formatierungen) und – Metainformationen (Dokumenttyp, Autor,...).

3 1. Einführung in HTML ● Dem Text wird durch Auszeichnungen mit Tags ( Text ) eine Struktur verliehen. ● Die Tags sind von englischsprachigen Begriffen abgeleitet, z.B.: – Absatz – part: Text des Absatzes – Überschrift – Headline: ● Überschrift 1. Ordnung ● Überschrift 2. Ordnung – fett – bold: fetter Text – kursiv – italic: kursiver Text – unterstrichen – underlined:...

4 2. Aufbau einer einfachen Webseite Dokumenttyp Beginn und Ende des HTML-Dokuments Kopfbereich mit Metainformation en Körper, der vom Webbrowser interpretiert und dargestellt wird Nur was in diesem Bereich steht, ist auf der Webseite zu sehen!

5 – Welche Software? – HTML-Quelltext kann mit jedem Texteditor erzeugt werden. Komfortabler sind allerdings HTML- Editoren, mit denen man die Grundstruktur des Dokuments und wichtige Tags per Mausklick erzeugen kann. Viele HTML-Editoren verfügen auch über Assistenten (z.B. für Framesets) und integrierte Parser, die das Betrachten der Webseite ohne zusätzlich geöffneten Webbrowser erlauben. Syntax-Hervorhebung und Zusatztools zum Erzeugen von Stylesheets sowie Unterstützung für Skriptsprachen (z.B. Java-Skript) komplettieren das Bild. Es folgt eine kleine Auswahl kostenloser Editoren...

6 – Welche Software? – ● Quanta Plus (http://quanta.kdewebdev.org/) wurde für die Arbeitsoberfläche KDE geschrieben und läuft auf Linux und Unix-Systemen. ● Quanta bietet komplexes Projektmanagement und unterstützt HTML, XHTML, XML, Java, PHP und JavaScript. ● Eine Anleitung zur Benutzung findet man unter http://spielwiese.la-evento.com/quanta2/index.php. Editoransich t Vorschauansicht

7 – Welche Software? – ● Bluefish (http://bluefish.openoffice.nl/) läuft auf Linux, FreeBSD, Solaris und Mac OS X. Seit Version 1.3.7 (unstable) steht auch eine Windows- Version zur Verfügung. ● Bluefish bietet Syntaxhervorhebung für HTML, PHP, Java, Perl, Python, Ruby, C und Pascal an.

8 – Welche Software? – ● Phase 5 (http://www.phase5.info/) ist ein für den Privatgebrauch oder Schulen kostenloser HTML- Editor für Windows. ● Er unterstützt u.a. auch PHP, JavaScript, Java, Perl, C++, Object-Pascal, Python und Visual Basic. ● Eine eingebaute Vorschau, ein Debugger (Linktester) und ein Werkzeug zum Erstellen von Tabellen vervollständigen das Bild. ● Weitere HTML-Editoren siehe Wikipedia: ● http://de.wikipedia.org/wiki/Liste_von_HTML-Editoren

9 2. Aufbau einer einfachen Webseite Aufgabe Starte den HTML-Editor Quanta und erzeuge eine einfache Webseite mit Überschriften, Textabsätzen, nummerierten und unnummerierten Listen und einer Tabelle. Nutze die Vorschau- Ansicht! Schnellstart- Assistent