Aufbau einer HTML Seite:

Größe: px

Ab Seite anzeigen:

Download "Aufbau einer HTML Seite:"

Irmela Abel
vor 8 Jahren
Abrufe

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 {...

css Datei, Schlüsselwörter und Autor etc. einzufügen ist nicht mehr notwendig, da die Webseiten nach anderen Kriterien durchsucht und gelistet werden.

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

.. <body></body> Beinhaltet alles was gesehen wird (unterteilt in Boxen in denen diverser Inhalt ist) Strukturgebende Tags HTML5: <h1>.

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;

"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 {

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)

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

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=" dies ist ein Link auf eine Website im www</a> <a href="mailto:vornamenachname@hotmail.com"> 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>

Bei der layout.css Datei schreibe:.container, header, nav, article... <html> <head> <title>meineseite</title> <link rel="stylesheet" href="layout.

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;

"utf-8"; body { font-size: 100%; background: #42413C; margin: 0; padding: 0; color: #000;.container { width: 960px; background: #FFF; margin: 0 auto;.

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:

30%.footer { background: #00C; clear: both Farben nach Wahl einsetzen Wichtige

Ähnliche Dokumente

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