Webdesign im Tourismus

Größe: px

Ab Seite anzeigen:

Download "Webdesign im Tourismus"

Bertold Meyer
vor 6 Jahren
Abrufe

1 Übung Prof. Dr. Markus Landvogt Zur Vorlesung 2.3. Feinheiten in Jimdo 2.4. HTML in Jimdo 03 HTML - GRUNDLAGEN DER ERSTELLUNG VON WEBSEITEN 3.1 Aufbau einer Seite in HTML 3.2 HTML in Jimdo WEB 03 1

2 2.3. Feinheiten in Jimdo Formatierungen in Jimdo 1. Überschriften in Tabelle fett 2. Themen ebenfalls fett 3. Einträge in Tabellen oben und linksbündig 4. Links 1. externe Links (Aida Kreuzfahrten) 2. interne Links 3. Links auf -Adresse 5. Aufzählung verwenden WEB 03 2

3 2.4. HTML in Jimdo HTML Formatierungen in Jimdo 1. Überschriften in Tabellenkopf größer machen 2. Breite in Tabelle auf 15% 50% 35% festlegen 3. Links in HTML anschauen 4. Listentyp disc (positiv) und circle (negative Aussage) verwenden 5. Fügen Sie ein Bild ein und schauen Sie sich den HTML-Code an 6. Weiteres HTML Format verändern WEB 03 3

4 3.1. Erste Schritte in HTML 1. Schnellstart in HTML 2. Webseiten erstellen, speichern und testen 3. Webseiten strukturieren 4. Webseiten mit Bildern und Hyperlinks versehen WEB 03 4

5 Schnellstart in HTML Schnellster Weg, eine HTML Seite erstellen A01: Erstellen Sie ein HTML Dokument für die Kontaktdaten eines touristischen Unternehmens. Lösung: WEB 03 5

6 Schnellstart in HTML Schnellster Weg, eine HTML Seite erstellen 1. MS Word oder MS Excel 2. HTML Editor benutzen 3. Bestehende HTML Datei verändern 4. Kopieren eines HTML Quellcodes und Inhalte ersetzen WEB 03 6

7 Schnellstart in HTML HTML Hypertext Markup Language Auszeichnungssprache für Texte, keine Programmiersprache HTML Tags Bsp: <p>. </p> Zur Auszeichnung von Textpassagen Browser Anzeigeprogramm für HTML Seiten HTML und CSS Formatierung in CSS WEB 03 7

8 Schnellstart in HTML Vorteile von CSS Kleinere HTML Dateien, Formatierung zentral, Übersichtlichkeit, klare Trennung Inhalt und Formatierung. HTML Online-Referenz: CSS Online-Referenz: Anzeige Quelltext Firefox: Strg+U in Firefox, Rechte Maustaste, Extras Webentwickler Seitenquelltext anzeigen IE: Strg+U, Ansicht Quelle WEB 03 8

9 Schnellstart in HTML A02: Öffnen Sie speichern Sie den Quellcode in einem Ordner hotel unter UTF-8 Codierung speichern und öffnen Sie den Browser öffnen. Titel Überschrift 1 Bild Absatz Überschrift 2 Absatz WEB 03 9

10 Schnellstart in HTML A03: Damit ein Bild erscheint, suchen Sie das Bild hotel.jpg und kopieren Sie es in den Ordner. Tags in Paare Anfangstag und Endtag, Bsp. <title>.</title> Selbstschließende Tags, Einzelner Tag, Bsp. <img scr= > Attribut Source scr=, Alternativtext alt= WEB 03 10

11 Webseiten erstellen, speichern und testen A04: Legen Sie ein System von Ordnern als Stammordner an hotel mit Unterordner bilder, text, stylesheets HTML5 Angabe von <!DOCTYPE html> Kopfbereich <head> </head> Inhaltsbereich <body> </body> Umlaute sollen genutzt werden <meta charset="utf-8"> A05: Speichern Sie code.html im Ordner text als index.html. Erhöhen Sie die Lesbarkeit durch Zeilenumbrüche. Aktualisieren Sie die Webseite im Browser nach jeder Veränderung. WEB 03 11

12 Webseiten strukturieren Absätze erstellen Blockelement <p>. </p>. Testen! Zeilenumbrüche erstellen Zeilenumbruch mit <br> (break) zum Beispiel nach Telefonnummer, Faxnummer und Adresse Überschriften erstellen <h1> <h1> ebenfalls Blockelement, Hauptüberschrift h1 nur einmal verwenden. Teste h1 bis h6 WEB 03 12

13 Webseiten mit Bildern und Hyperlinks versehen Bilder in Webseite einfügen <img src= Verzeichnis/Dateiname > Kann im selben Ordner stehen wie HTML Datei oder in einem Unterordner. Testen mit einem weiteren Bild Webseiten mit Hyperlinks verknüpfen <a href= Verzeichnis/Dateiname >Linktext</a> Attribut href hypertext reference Linktext wird standardmäßig unterstrichen und blau hervorgehoben WEB 03 13

14 Webseiten mit Bildern und Hyperlinks versehen Webseiten mit Hyperlinks verknüpfen A06: Erstellen Sie eine Kopie der Datei index.html, indem Sie diese unter einem neuen Namen wegweiser.html speichern. Bezeichnen Sie den Titel mit Hotel Vallora Wegbeschreibung. Ergänzen Sie im <body>-bereich einen Paragraph mit Wegbeschreibung und Überschrift Wegbeschreibung. Löschen Sie den restlichen Text im <body>-bereich Setzen Sie im <body>-bereich von index.html vor dem Bild einen Link zu wegweiser.html. WEB 03 14

15 Webseiten mit Bildern und Hyperlinks versehen Webseiten mit Hyperlinks verknüpfen A07: <p><a href= wegweiser.html >Wegbeschreibung </a></p> wegweiser.html ist im gleichen Ordner wie index.html WEB 03 15

16 5.3. Erwartungen an Fakultätsseite Inhalt Nutzer Design Aufbereitung Gliederung andere Aspekte WEB 03 16

Ähnliche Dokumente

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem