Aufbau einer HTML Seite:

Größe: px
Ab Seite anzeigen:

Download "Aufbau einer HTML Seite:"

Transkript

1 1 Aufbau einer HTML Seite: Grundstruktur: <!doctype html> <html> <head></head> <body></body> </html> Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße, Link zur.css Datei, Schlüsselwörter und Autor etc. einzufügen ist nicht mehr notwendig, da die Webseiten nach anderen Kriterien durchsucht und gelistet werden. Charset: darunter versteht man die Zeichenkodierung jedes Zeichen wird in Computersprache übersetzt. Welches Zeichen zu welcher Bitfolge gehört, wird in Codetabellen gespeichert. UTF-8 kennt nahezu alle Zeichen. Zuweisen eines Favicons (erstellen gratis bei http: Das Aussehen der Seite wird mittels css definiert. Im Headbereich wird ein Link auf die externe dateiname.css Datei erstellt. (.css Informationen können auch im Head Bereich zwischen <style></style> stehen) Einige Beispiele: Seitentitel: Link zur Stylesheet Datei: Zeichenkodierung: Für ältere Browser: Favicon: <title>meine Seite</title> (Mein Seitentitel) <link rel="stylesheet" href="layout.css" type="text/css"> <metacharset="utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> Body Bereich: "sichtbar"...alles was im Browser gesehen werden soll ; alle Inhalte sollten in Containern oder Boxen... sein. Es gibt verschiedene Möglichkeiten die Boxen zu benennen - HTML5 bietet einige Tags (zum Erstellen der Boxen) wie: header, nav, aside, article, section, footer, adress die auch ineinander verschachtelt werden können. Es kann auch untereinander gemischt werden html5, class, id Erstellen der Struktur der Website -Boxen, Inhaltscontainer: Das Aussehen, Verhalten wird in der externen layout.css definiert Möglichkeit 1: HTML 5: <header>...</header> CSS: header{... Möglichkeit 2: <div id= header >... CSS: #header {... Möglichkeit 3: <div class= header >... CSS:..header {...

2 2 Einige HTML Tags: Tag...alle Tags werden mit / und Tag wieder geschlossen (Ausnahme:<br>, <hr>) <html></html> Umschließt alle anderen Tags - <head></head> Nicht sichtbar: Metainformationen, title, Links zu layout.css... <body></body> Beinhaltet alles was gesehen wird (unterteilt in Boxen in denen diverser Inhalt ist) Strukturgebende Tags HTML5: <h1>...-<h6> <p> <ul>, <ol>, <li> <table>, <tr>, <td> <div> <header> <nav> <aside> <article> <section> <footer> Textauszeichnungstags: <br> <hr> <mark> <span> Überschriften Absätze Listen, Aufzählungen Tabelle, Tabellenspalte, Tabelleninhalt, Bereiche: Tags mit denen im body Boxen erzeugt werden können Kopfbereich Menüleiste..wie sidebar - Kurzfassung Inhalt, Werbung, Smalltalk Geschlossener Abschnitt (wie Buch: Kapitel) Abschnitt (wie Teil eines Kapitels) Autor, Urheberrecht, Link zum Impressum Zeilenumbruch - braucht kein Endtag Horizontale Linie Highlighten (wie Leuchtstift) Bereich Weitere Tags und Multimedia und Grafiken: <a href=" "></a> Hyperlink <img src=" "> Bild einbinden braucht kein Endtag <iframe> Andere Inhalte, Seiten einbinden youtube, Google maps <video> Filme einbinden <audio> Sound einbinden

3 3 LAYOUT (dateiname.css) z. B. layout.css Generell: Dateinamen klein schreiben, keine Umlaute Sonderzeichen, Leerzeichen.. 1. Universal Selektor : HTML: gilt für jedes HTML Element CSS: * { font-size = 12px; 2."Typ -Selektor": Für jedes HTML Element kann ein Typ-Selektor festgelegt werden: HTML: Gilt für jedes <h1>, gilt für jedes <p> CSS: Tags werden ohne Punkt geschrieben: h1 h1 { color: red; p { background: green; 3."Class-Selektor:" ist auf jedes HTML Element anwendbar, der Name der Klasse ist frei wählbar HT ML: gilt für jedes Element z. B. <p class="wichtig>...</p> oder <div class= "banner">... CSS: Eigene erstellte Klassen werden mit Punkt voran geschrieben:.wichtig.banner{ width: 960px; height: 240px; background: blue;.wichtig{ background: red; 4."Id Selektor": wird frei definiert, kann nur einmal angewendet werden HTML: gilt für jedes Element<div id="nav">... CSS: Erstellte id werden mit Raute voran in der layout.css definiert: #banner {background: red; 5."Pseudo-Klassen" HTML: gilt für jedes <a> Element CSS: Damit wird der Zustand eines Elementes definiert: a:hover a:hover {color: green;

4 4 Einige CSS Beispiele: Schrift/Text font-family, - size, - style, -weight; textalign p {font-size: 12px; text-align: center; Farben/Hintergrund color, background-color, -image,- attachement, - repeat, -position Layout/Rahmen display float, height, width, border clear margin padding.banner { background: black; color: white; text-align: center; padding:5px; inline, (nebeneinander) block (untereinander) li {display: inline float: left; oder right oder none oder clear: both - Das Bild oder die Box schwebt links und wird rechts von anderen Elementen umgeben.sidebar { height:300px; width:100px; float: left; padding:5px; border: solid 1px red; both : in der unteren Box einstellen, (float deaktiviert) Der Außen-Abstand vom Rand des Absatzes zum nächsten Element soll oben-rechts-unten-links sein: p {margin: 20px 5px 5px 15px Der Innen-Abstand vom Inhalt zum Rand des Absatzes soll oben-rechts-unten-links sein: p {padding: 20px 5px 5px 15px Viele Eigenschaften werden mit Größenangaben und Einheiten festgelegt: Einheiten relativ px, em, % p {font-size: 12 px; (relativ zur Bildschirmgröße) h3 {font-size: 1.2 em; (relativ zur Normalgröße).content {width: 70%; Einheiten absolut: cm, mm, in (zoll) in (1 inch = 2,54 cm)), pt (1pt= 1/72 inch), pc (1 pc=12pt)

5 5 Datei: index.html Beispiel : Die "Boxen" werden erzeugt mit: divs die mit class definiert werden; class Namen klein, frei nach Wahl (keine Leer-, Umlaut- und Sonderzeichen) Mit div`s und vorgegebenen HTML 5 Tags; Bei der layout.css Datei schreibe:.container, header, nav, article... <html> <head> <title>meineseite</title> <link rel="stylesheet" href="layout.css" type="text/css"> </head> <body> <div class= container"> <div class= banner"> <img src = "banner.jpg"> <div class= navigation"> <ul> <li><a href="index.html">home</a></li> <li><a href="seite1.html">seite1</a></li> <li><a href="seite2.html">seite2</a></li> </ul> <div class= container > <header> </header> <nav> </nav> <div class= content"> <article> <p> Hier schreibe ich alle hinein was auf der jeweiligen Seite an Informationen stehen soll. Überschriften, weiters Bilder, Links mit, Listen, Tabellen Links Wiederholung: <a href="index.html"> dies ist ein Link auf die eigene Website index.html Seite</a> <a href="http://www.w3.org"> dies ist ein Link auf eine Website im www</a> <a sende das Mail</a> <a href="index.html"><img src="smili.png"></a> </article> <div class= sidebar > <aside> <p> Hier kommen diverse Informationen über alles Mögliche hinein eventuell auch Werbungen, Links... </p> </aside> <div class= footer > <footer> <p> Hier haben Adresse, Kontaktdaten, Impressum oder Link dorthin, Copyright... Platz </p> </footer> </body> </html>

6 6 Datei: layout.css Wähle Farben aus nach Wahl. Beachte: Bei vordefinierten HTML Elementen ist kein Punkt davor, bei mit class definierten Elementen ist ein Punkt davor, bei id`s ist ein "utf-8"; body { font-size: 100%; background: #42413C; margin: 0; padding: 0; color: #000;.container { width: 960px; background: #FFF; margin: 0 auto;.banner { background: #03C;.navigation { background: #FF0;.container.navigation ul { text-align: center;.container.navigation ul li { display: inline;.container.navigation ul li a { text-decoration: none; background: #93C; border: 2px solid #C3C; padding: 5px;.container.navigation ul li a: hover { background: #96F;

7 7.content { background: #0F0; float: left; width: 70%; padding: 10px 0px 10px 0px;.sidebar { background: #090; float: left; (oderbeizweispalten: right) width: 30%.footer { background: #00C; clear: both Farben nach Wahl einsetzen Wichtige Links:

Aufgabenbereich 3: Layoutgestaltung mit CSS

Aufgabenbereich 3: Layoutgestaltung mit CSS Aufgabenbereich 3: Layoutgestaltung mit CSS Wichtige Begriffe und Zusammenhänge: Website: Gesamtheit eines Internet-Auftrittes (alle Webseiten, die dazu gehören) Webseite: Eine einzelne Seite, ein HTML-Dokument

Mehr

E-Mail- Viren (Würmer) Internet und Webseiten-Gestaltung. Vorlesungsinhalte

E-Mail- Viren (Würmer) Internet und Webseiten-Gestaltung. Vorlesungsinhalte E-Mail- Viren (Würmer) Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-04-29 Dipl.-Inf. (FH) T. Mättig Neue Tricks der Viren-Programmierer: E-Mails mit Absender Immatrikulationsamt

Mehr

D a s B e g l e i t s c r i p t z u m

D a s B e g l e i t s c r i p t z u m H T M L f ü r A n f ä n g e r D a s B e g l e i t s c r i p t z u m K u r s Von Konrad Weidmann Im Wintersemester 2005/2006 Inhaltsverzeichnis 0. Einführung...3 1. Bedeutung...3 2. Benutzung...4 a) des

Mehr

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 12. Mai 2004 Dipl.-Inf. T. Mättig 2004-05-12 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:

Mehr

Dokumentation für Popup (lightbox)

Dokumentation für Popup (lightbox) Dokumentation für Popup (lightbox) Für das Popup muss eine kleine Anpassung im wpshopgermany Plugin vorgenommen werden und zwar in der Datei../wp-content/plugins/wpshopgermany/controllers/WarenkorbController.class.php

Mehr

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015

Einführungskurs HTML-CSS ohne Buch Von Norbert Willimsky Stand: 01.11.2015 Einführungskurs HTML-CSS ohne Buch Von Stand: 01.11.2015 Inhalt Grundlegendes... 2 Einführung in HTML... 4 Übung1: HTML und einfaches CSS anwenden... 5 Einführung in CSS... 6 Übung2: CSS anwenden... 8

Mehr

HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten.

HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten. HTML HTML ist eine Auszeichnungssprache / Seitenbeschreibungssprache, mit der es möglich ist Internetseiten zu gestalten. Hierfür bedient man sich sog. Tags zur Darstellung und Beschreibung einer Internetseite

Mehr

Das Grundgerüst für ein HTML-Dokument sieht so aus:

Das Grundgerüst für ein HTML-Dokument sieht so aus: Schuljahr 2013 2014 Projekt im Mathematisch-Naturwissenschaftlichen Profil Geschichte der Mathematik HTML - Internetpräsentation Klasse 8B M.Reuß Das Grundgerüst für ein HTML-Dokument sieht so aus:

Mehr

HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache

HTML. HyperText Markup Language. Die Programmiersprache des WWW. Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache HTML HyperText Markup Language Die Programmiersprache des WWW Keine eigentliche Programmiersprache, sondern eher Seitenbeschreibungssprache systemübergreifend, plattformunabhängig (im Idealfall) HTML-Text

Mehr

C:\~Temp\Rolf\GaM\anfrageauftritt.php Sonntag, 26. Januar 2014 08:41

C:\~Temp\Rolf\GaM\anfrageauftritt.php Sonntag, 26. Januar 2014 08:41 /* Formular Stylesheet */ body, textarea, table { font-family: Verdana,

Mehr

Stichpunkte zum Aufbau einer HTML-Website

Stichpunkte zum Aufbau einer HTML-Website Stichpunkte zum Aufbau einer HTML-Website Aufbau eines HTML-Dokumentes: HTML = Hyper Text Markup Language Texteditor zur Befehlseingabe oder im Browser (MIE) Ansicht Quellcode Tags = HTML-Befehle - immer

Mehr

Templates für CMSMadeSimple

Templates für CMSMadeSimple 1. EINLEITUNG Templates für CMSMadeSimple Original von Jan Czarnowski piratos@coftware.de modifiziert von Andreas Just cyberman@gmx.ch Templates für CMSMadeSimple sind zur Zeit nur spärlich vorhanden.

Mehr

Kurzeinführung in HTML

Kurzeinführung in HTML Kurzeinführung in HTML (Grundlage: SelfHTML: http://de.selfhtml.org/) Autor: Jan-Willem Waterböhr (webmaster-geschichte@uni-bielefeld.de) Stand: 23.12.2011 Inhaltsverzeichnis Kurzeinführung in HTML...1

Mehr

1. Bilder aus img Ordner importieren

1. Bilder aus img Ordner importieren Oxid Eshop Design - Modifikation Promoslider / Slideshow "Anythingslider" vom Azure Template integrieren im Basic Template: 1. Bilder aus img Ordner importieren 2. Slider Code in der _header.tpl einbinden

Mehr

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen

Seitengestaltung mit HTML und CSS. Stefan Rothe, Thomas Jampen Seitengestaltung mit HTML und CSS Stefan Rothe, Thomas Jampen 2013 09 12 Rechtliche Hinweise Dieses Werk von Stefan Rothe steht unter einer Attribution-NonCommercial-ShareAlike 3.0 License. Zudem verzichtet

Mehr

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen.

Zeile 3-7: Der Kopf der HTML-Datei. Hier werden unsichtbare Einstellungen für das ganze Dokument vorgenommen. Inhalt: Grundgerüst, Tags, Zeichensatz, Meta-Tags, Farben 1 2 3 4 titel der Datei 5 6

Mehr

HTML und CSS. Eine kurze Einführung

HTML und CSS. Eine kurze Einführung HTML und CSS Eine kurze Einführung Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett

Mehr

Webdesign-Multimedia HTML und CSS

Webdesign-Multimedia HTML und CSS Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente

Mehr

Das HTML-Element