HTML Grundlagen
|
|
|
- Gert Kerner
- vor 7 Jahren
- Abrufe
Transkript
1 Inhalt: 1 HTML Grundlagen Aufbau einer HTML-Seite: Wichtige HTML-Tags HTML-Dateien: Links: Bilder: Listen Tabellen: Cascading Stylesheets ( CSS ) Übersicht über die wichtigsten CSS Textformatierungen (Auswahl) Farbnamen: Auf dem Bildschirm platzieren (z.b. für Bilder oder <div> - Blöcke). Maßangaben in Pixel, Prozent oder em Hintergrund Rahmen: Verwendung von Stylesheets Wohin werden CSS-Deklarationen geschrieben? Externe CSS-Datei CSS-im Head-Bereich CSS innerhalb eines HTML-Tags CSS-Klassen Eigene CSS-Klassen CSS-Klassen innerhalb von HTML-Tags <div> - Blöcke formatieren Pseudoklassen Kontextselektoren Die totale Freiheit - position: absolute Struktur einer Webseite spaltiges Layout Aufbau HTMl - Code des Beispiels CSS - Datei des Beispiels
2 - 2 - Wichtige Webseite zu HTML: Aufbau einer HTML-Seite: 1 HTML Grundlagen Jede Webseite muss zumindest aus einem minimalen HTML-Gerüst bestehen. Die meisten Befehle verlangen ein Start - und ein Ende - Tag: z.b. <p>... </p>. Beide zusammen bildet ein sog. Element. Viele Tags können zusätzliche Angaben enthalten (sog. Attribute mit "Werten"), z.b. <img width="350">: "img" = Tag, "width" = Attribut, "350" = Wert. Elemente ohne Ende-Tag können mit Schrägstrich vor der schließenden Klammer geschrieben werden: <br />. Der eigentliche sichtbare Bereich liegt zwischen den beiden body Tags. Groß-/Kleinschreibung ist in HTML egal (für die Dateinamen dagegen nicht! s.u.). <!DOCTYPE html>... <html> <head>... <title>paris</title>... <meta charset="utf-8">... <meta name="keywords" content="paris, Frankreich"> </head>... <body>... </body>... </html>... Als erste Zeile die Doctype-Definition (hier für HTML 5), hilft dem Browser bei der Interpretation der Seite <html> = Beginn einer HTML-Seite <head> = Beginn des Kopfbereichs <title> = Titel der Seite (muss nicht identisch mit dem Dateinamen der Seite sein). Wird von Suchmaschinen ausgewertet <meta> = Die Meta -Tags enthalten u.a. die Standard-Zeichenkodierung (hier utf-8 = Unicode ) und Stichwörter (für Suchmaschinen) </head> = Ende des Kopfbereichs <body> = Beginn des Hauptbereichs. Innerhalb des body -Bereichs steht der eigentliche Text, der auf der Seite angezeigt werden soll) </body> = Ende des Hauptbereichs </html> = Ende der HTML-Seite 1.2 Wichtige HTML-Tags <p>... </p> Absatz mit anschließender Leerzeile <br /> Neue Zeile ohne Leerzeile <h1>... </h1> Überschrift (erzeugt dahinter neuen Absatz), möglich sind h1 bis h6 <em>... </em> kursiv 1 <strong>... </strong> fett HTML-Dateien: Für jedes Projekt unbedingt einen eigenen Ordner anlegen! Für Dateinamen sollte man nur Kleinbuchstaben und keine Sonderzeichen wählen (auch keine Leerzeichen! Stattdessen sind Bindestrich oder Unterstrich möglich: z.b.: "paris-metro.html" oder "paris_metro.html"). Die Startseite der Homepage heißt normalerweise index.html. Als Erweiterung sind sowohl ".htm" als auch ".html" möglich. 1 2 eig. nur: hervorgehoben - die Browser können dieses Hervorheben umsetzen wie sie wollen. Derzeit interpretieren alle Browser <em> als kursiv eig. nur: stark hervorgehoben - die Browser interpretieren <strong> als fett
3 1.4 Links: <a href="seite2.html">zur Seite 2</a> Link zu einer anderen Seite (eigenes HTML-Dokument). Nur der Text zwischen den Tags wird angezeigt (blau unterstrichen) <a href="#details">siehe weiter unten</a> Link zu einer bestimmten Stelle auf der gleichen Seite (diese Stelle zuvor mit <a name="details"></a> oder mit id = "abc" markieren, z.b. <p id="details"> ) <a href="seite2.html#details">details</a> Link zu einer bestimmten Stelle auf einer anderen Seite <a href="mailto:podh@gymnasium-eisenstadt.at">schreib mir!</a> Link zu einer Mailadresse <a href=" target="_blank">suche</a> Link zu einer Adresse im Internet (vollständige Adresse angeben. Mit dem Attribut target = "_blank" wird sie in einem neuen Tab geöffnet) 1.5 Bilder: <img src="..." /> mit diesem Tag werden Bilder eingefügt. In Anführungszeichen steht der genau Dateiname des Bildes (inkl. Erweiterung) und der Ordnername, falls es sich nicht im selben Ordner befindet wie die Seite, in die es eingebaut werden soll. Es gibt für <img> kein Ende -Tag. Beispiel: <img src="mein-bild.gif" /> <img src="bilder/mein-bild.gif" /> 3 weitere Attribute sollten außerdem immer hinzugefügt werden: fügt das Bild mit dem Namen mein-bild.gif ein Bild, das sich in einem anderen Ordner befindet alt="eiffelturm" (Beschreibung - für den Fall, dass das Bild nicht angezeigt werden kann) width="300" height="250" (= Größe des Bildes. Der Browser kann damit schon während des Seitenaufbaus den benötigten Platz reservieren, bevor die Bilder vollständig geladen wurden. Wenn sich die Angaben für Höhe und Breite von den tatsächlichen Werten des Bildes unterscheiden, wird es entsprechend vergrößert bzw. verkleinert. Aus Geschwindigkeits- und Qualitätsgründen sollte immer die Originalgröße angegeben werden) Bilder können auch für Links verwendet werden: <a href="grossesbild.gif">zum großen Bild</a> Link zu einer Grafik (z.b. um von einem kleinen Vorschaubild zum großem Originalbild zu wechseln) <a href="geschichte.html"><img src="b-geschichte.gif"></a> Statt dem blau unterstrichenen Text reagiert hier eine Grafik auf Mausklicks 1.6 Listen Für Aufzählungen gibt es die Tags <ul> (= "unordered list") und <ol> ("ordered list") <ul>... </ul> <ol>... </ol> für unsortierte Listen (keine Ziffer, sondern Bullets ) für sortierte Listen (Ziffern) Innerhalb dieser Elemente befinden sich die eigentlichen Aufzählungspunkte, jeder von <li>... </li> eingerahmt (s.beispiel unten) Verschachtelte Listen sind möglich (jeder neue Block beginnt wieder mit <ol> bzw. <ul>). Direkt neben <ol> geschriebener Text wird ohne Nummer gedruckt, aber gleich weit eingerückt, wie die Listeneinträge darunter.
4 Beispiel für zwei verschachtelte Listen: <ol> <li>das Julisch-Claudisches Kaiserhaus</li> <ul> <li>augustus</li> <li>tiberius</li> <li>caligula</li> <li>nero</li> </ul> <li>flavisches Kaiserhaus</li> <ul> <li>vespasian<li> <li>titus</li> <li><domitian</li> </ul> </ol> 1.7 Tabellen: Grundstruktur: <table><tr><td>... </td></tr></table> Jede Zeile wird mit <tr> eingeleitet, jede Zelle (Spalte) innerhalb dieser Zeile mit <td> oder <th> (th erzeugt eine größere Schrift, gedacht für Überschriften). Der eigentliche Inhalt steht zwischen den <td> -Tags. Zellen können auch verbunden werden: wenn hinter td die Anweisung "colspan=2" steht, werden 2 Zellen nebeneinander verbunden, "rowspan=2" verbindet 2 Zellen untereinander.: Die Breite und Höhe der Zellen passen sich an die Größe des Textes an. Zwar gibt es das Attribut "width", doch sollten solche Formatierungen mit Stylesheets (s.u. S.5) durchgeführt werden Beispiel: Daten in der 1.Spalte der 1. Zeile Daten der 2.Spalte der 1.Zeile Beginn der Tabelle Beginn der 1.Zeile Beginn der 2.Zeile Ende der Tabelle <table> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td> </td></tr> </table> Ende der 1.Zeile Ende der 2.Zeile Daten in der 1.Spalte der 2. Zeile (die 2.Spalte daneben ist leer: " " = geschütztes Leerzeichen ("non breaking space"). Völlig leerlassen darf man sie nicht
5 - 5-2 Cascading Stylesheets ( CSS ) Während HTML nur die Gliederung des Textes übernimmt (Überschrift - Text - Tabelle, etc.), sind Stylesheets für die Formatierung vorgesehen. Sie haben etwa die gleiche Funktion wie Formatvorlagen in Word: das Erscheinungsbild des gesamten Webauftritts kann einheitlich gestaltet und schnell verändert werden. Stylesheets bestehen aus einem "Selektor" (z.b. dem Tag, den man formatieren möchte), einer "Eigenschaft" (z.b. "color") und einem "Wert" (für die Farbe z.b. "red"), abgeschlosen durch Strichpunkt Eigenschft + Wert bilden eine "Deklaration". Ein Selektor kann mehrere Deklarationen (durch Strichpunkt getrennt) besitzen. Alle werden von geschwungenen Klammern zu einem "Block" zusammengefasst. Hier zwei Beispiele (der Absatz-Tag "p" wird mit einer Deklaration formatiert, der Überschriften-Tag "h1" mit zwei): p { color: red; } h1 { font-size: 1.5em; font-weight: bold; } 3 Übersicht über die wichtigsten CSS Befehl Beschreibung Beispiel 3.1 Textformatierungen (Auswahl) font-family font-family: Arial; font-family: 'Times New Roman'; font-family: sans-serif; font-family: Carleton, Arial, sans-serif; font-size Größe ("px" = Pixel, em =relative Größe) font-size: 1.2em; font-size: 14px; font-weight bold (fett) oder normal font-weight: bold; font-style italic (kursiv) oder normal font-style: italic; color Textfarbe color: red; background-color Hintergrundfarbe background-color: yellow; text-align horizontale Textausrichtung (left/right/center/justify) text-align: center; vertical-align vertikale Ausrichtung (baseline/sub/super/bottom/top) vertical-align: top; line-height Zeilenabstand (als Komma-Zeichen einen Punkt verwenden!) line-height: 1.5; white-space Zeilenumbruch verhindern ( nowrap ) white-space: nowrap; 3.2 Farbnamen: Schriftart (Hochkomma notwendig, wenn mehr als ein Wort) Statt einem genauen Namen ist auch einer der Grundtypen (sog. generische Schriftarten) möglich: "serif" (z.b. Times New Roman), "sans-serif" (z.b. Arial), "cursiv" (z.b. Comic Sans), "fantasy" (z.b. Tempus Sans ITC) und "monospace" (z.b. Courier). Es können auch mehrere (durch Beistrich getrennt) angegeben werden black, silver, gray, white, maroon (= dunkelrot), red, purple, fuchsia (= lila), green, lime (= Hellgrün), olive, yellow, navy (= dunkelblau), teal (= türkis), aqua (=hellblau) Es gibt natürlich viel mehr Farben. Um sie verwenden zu können, benötigt man die entsprechende Farbnummer ( Code ), beginnend mit einem Kreuz ( # ). Dahinter die Farbanteile für Rot, Grün und Blau in hexadezimler Schreibweise: color: #FFFFCC; (erzeugt ein helles Beige). Stattdessen sind mit dem Zusatz "rgb" auch Prozentangaben oder der Wert der einzelnen Bytes in dezimaler Schreibweise möglich: color: rgb(100%,0%,27%); color: rgb(255,0,112); Die Transparenz (z.b. für Hintergrundfarben) kann mit dem Zusatz "rgba" bestimmt werden (in Klammern die Prozentsätze bzw. Werte für RGB + den Wert für Transparenz zwischen 0 und 1: 0 = vollständig durchsichtig, 1 = Vollfarbe ohne Transparenz, als Dezimaltrennzeichen den Punkt verwenden!): background-color: rgba(255,0,112,0.5); (= halb durchsichtig)
6 3.3 Auf dem Bildschirm platzieren (z.b. für Bilder oder <div> - Blöcke). Maßangaben in Pixel, Prozent oder em float Texfluss ums Bild ( left oder right ) float: left; width Breite width: 128px; height Höhe height: 50%; margin-top Abstand zum oberen Element margin-top: 32px; margin-bottom Abstand zum unteren Element margin-bottom: 12px; margin-left Abstand zum links befindlichen Element margin-left: 20%; margin-right Abstand zum rechts befindlichen Element margin-right: 48px; 3.4 Hintergrund background-image: url(...) Dateiname einer Hintergrundgrafik in Klammern background-image: url(bild.jpg); background-color Hintergrundfarbe background-color: teal; background-attachment Hintergrund scrollt mit dem Text mit ( scroll ) oder bleibt stehen ( fixed - sog. Wasserzeichen ) background-attachment: fixed; background-position background-repeat 3.5 Rahmen 3 : border-style für waagrecht und senkrecht, beide durch Leerzeichen getrennt ( left/top/center/bottom oder Zahlenangabe) als Kachel ( repeat ), nur waagrecht ( repeat-x ), nur senkrecht ( repeat-y ) oder als Einzelbild ( no-repeat ) Art des Rahmens ( solid =durchgehend, dotted =punktiert, dashed =gestrichelt, double =doppelt, none =keiner, ridge =3D-Effekt) background-position: center center; background-position: 10% 20%; background-repeat: no-repeat; border-style: dotted; border-width Dicke des Rahmens border-width: 2px; border-color Farbe des Rahmens border-color: blue; border-bottom-width Auch für einzelne Seiten können Rahmen erzeugt werden (hinter border-bottom-width: 1px; border eine der 4 Seiten einfügen: -top-, -bottom-, border-top-color: #CCFFCC; -right-, -left- ) padding Innenabstand des Inhalts zum Rahmen (alle 4 Seiten). Normalerweise Pixel ( px ). Möglich außerdem: Prozent ( % ) oder relative Werte ( em ) padding: 10px; padding-top Innenabstand nur zum oberen Rahmen padding-top: 0.5em; padding-bottom unteren Rahmen padding-bottom: 1em padding-left linken Rahmen padding-left: 10%; padding-right rechten Rahmen padding-right: 1.2 em; 3 damit in allen Browsern Ränder sichtbar sind, müssen border-style und border-width angegeben werden
7 Wohin werden CSS-Deklarationen geschrieben? Externe CSS-Datei 4 Verwendung von Stylesheets In großen Web-Projekten möchte man gewöhnlich alle Seiten einheitlich formatieren. Zu diesem Zweck stellt man alle Stylesheets in eine eigene (leere!) Datei. In diesem Dokument werden die Formatanweisungen eingetragen: zuerst die HTML-Tags, für die das Stylesheet gelten soll, danach in geschweiften Klammern die Formatierungsbefehle: h1 {font-size: 16px; color: white; background-color: red;} p {font-family: Tahoma; text-align: justify;} img {border-width: 0px;} Diese Stylesheet-Datei wird mit der Erweiterung.css gespeichert (z.b.: standard.css ) und im head -Bereich jeder Seite mit dem Tag <link> in die Seite eingebunden: <head><link rel="stylesheet" type="text/css" href="standard.css"></head> CSS-im Head-Bereich Wenn einzelne Seiten abweichende Stylesheets enthalten sollen, können diese mit dem html-tag <style type="text/css> im "head"-bereich eingefügt werden. Der Ende-Tag dieses Bereichs muss natürlich vor dem Ende-Tag des head -Berechs stehen. Im folgenden Beispiel wird zuerst die Standard-CSS-Datei eingebunden, andschließend für zwei Tags (Überschrift h1 und Absatz p ) eine eigene Formatierung definiert, die nur für diese Seite gilt: <head> <link rel="stylesheet" type="text/css" href="standard.css"> <style type="text/css"> h1 {font-family: 'Tahoma'; font-size: 1.2 em; color: red;} p {font-family: 'Times New Roman';} </style> </head> Auf dieser Seite werden wir diese beiden Tags mit den von der Standard-CSS-Datei abweichenden Formatierungen sehen: <h1>diese Überschrift erscheint rot und 1.2 mal größer als normaler Text</h1> <p>dieser Absatz erscheint in der Schriftart "Times New Roman"</p> Ergebnis im Browser: CSS innerhalb eines HTML-Tags Stylesheets können auch im body-bereich direkt in den Tag, den sie formatieren sollen, geschrieben werden (sog. "Inline-Styles). Sie beginnen mit dem html-attribut "style=". Wird freilich nur selten Sinn machen. Um einzelne Buchstaben oder Wörter für eine solche Formatierung zu markieren (nur innerhalb eines Absatzes) gibt s den Tag <span>... </span>:
8 a) einzelne Buchstaben oder Wörter: <span style="color: red;">oha!</span> b) ein ganzer Absatz: <p style="font-size: 1.8em;">bla bla bla</p> c) eine Überschrift: <h1 style="background-color: teal;">bla bla bla</h1> 4.2 CSS-Klassen Eigene CSS-Klassen Nicht nur HTML-Tags können in der Stylesheet-Datei formatiert werden. Es sind auch eigene Klassen möglich (sie beginnen mit einem Punkt und einem frei wählbaren Namen):.frei {background-color: blue; border-style: ridge; padding: 0.5em; color: white;} Diese Klassen lassen sich in der HTML-Seite mit dem Schlüsselwort class= jedem beliebigen Tag zuweisen: <p class="frei">ein blauer Absatz mit Rahmen</p> <p>jetzt ein ganz normaler Absatz</p> <p>innerhalb dieses normalen Absatzes befinden sich <span class="frei">einige Wörter</span> mit blauem Hintergrund</p> CSS-Klassen innerhalb von HTML-Tags Klassen können auch (durch Punkt getrennt) hinter Tags definiert werden. Sie stehen danach nur diesen Tags zur Verfügung. Im folgenden Beispiel wird zuerst der "img"-tag formatiert, anschließend werden mit den Klassen "rechts" und "links" zwei 2 Varianten des img -Tags erstellt. Diese übernehmen alle Formatierungen des Tags img (in unserem Beispiel: Rand = 0, Abstand zum Text oben und unten je 10 Pixel), erhalten aber zusätzlich Anweisungen für den Textfluss und die Abstände links bzw. rechts: img {border-width: 0px; margin-top: 10px; margin-bottom: 10px;} img.rechts {float: right; margin-right: 0px;} img.links {float: left; margin-left: 0px;} Der Aufruf im <body> - Bereich ist identisch mit "normalen" Klassen (wie oben beschrieben): <img class="rechts" src="bild 1.jpg" /> <img class="links" src="bild 2.jpg" /> <div> - Blöcke formatieren Um Blöcke (die mehrere Absätze, HTML-Tags oder Bilder etc. enthalten) zu formatieren, benötigt man den <div> - Tag (sog. Block-Level-Element - sie erzeugen stets neue Absätze wie z.b. <p> oder <h1> - im Gegensatz zu den Inline-Elementen wie <span> oder <img>, die keinen neuen Absatz erzeugen):
9 - 9 - Der Tag <div>... </div> umrahmt einen (fast) beliebigen Bereich, der aus mehr als einem HTML-Tag bestehen kann. Im folgenden Beispiel werden zwei Absätze mit einem Bild zu einem Block zusammengefasst und mittels CSS-Klasse formatiert und positioniert. Zuerst die Definition der Stylesheet-Klasse in der CSS-Datei:.fabelwesen { background-image: url(papyrus.jpg); border-style: ridge; padding: 10px; width: 50%; left: 10%; padding:1em; text-align: justify; font-family: 'Brush Script Std'; font-size: 1.4em; } In der HTML-Seite (die diese CSS-Datei eingebunden hat) wird diese Klasse einem <div> zugewiesen: <div class="fabelwesen"> <img src="einhorn.gif" /> <h1>fabelwesen</h1> <p>bild und Text (Überschrift + Absatz) innerhalb eines Rechtecks mit Rahmen und gekachelter Hintergrundgrafik. Das Rechteck füllt 50% der Fensterbreite, Abstand links 10% der Fensterbreite, Innenabstand 1 Zeichenbreite ("em").</p> </div> Das Ergebnis: Für die Struktur einer Webseite (Kopf, Navigation, Hauptbereich) gibt es eigene Tags, die in gleicher Weise wie <div> mit CSS formatiert werden können
10 4.3 Pseudoklassen Links verändern bekanntlich ihr Erscheinungsbild, wenn man mit der Maus darüberfährt (von blau auf rot). Dieser Effekt wird durch sog. Pseudoklassen gesteuert: vier solche Pseudoklassen sind definiert und werden durch Doppelpunkt vom Link-Tag ( a ) getrennt angegeben: <head><style type="text/css"> a:link {color: blue;} a:link bezeichnet den normalen Link (üblicherweise blau) a:visited {color: gray;} a:visited = bereits besuchter Link (meist grau) a:hover {color: red;} a:hover = Link, über dem sich gerade die Maus befindet a:active {color: red;} a:active = Link, auf den gerade geklickt wird </head> Wenn man Pseudoklassen mit CSS neu formatieren möchte, sollten man immer alle vier und in dieser Reihenfolge definieren! 4.4 Kontextselektoren Stylesheets können auch abhängig vom umgebenden Element gesetzt werden. So könnte z.b. der Tag <strong>, d.h. fett gedruckter Text, in einer bestimmten Schriftart oder -farbe erwünscht sein, falls er sich innerhalb einer Liste befindet. Dazu wird der Tag strong, durch Leerzeichen getrennt, hinter dem Tag notiert, innerhalb dessen er sich befinden muss, um die gewünschte Wirkung zu besitzen: Im folgenden Beispiel erzeugt <strong> roten Text, aber nur, wenn dieser Tag innerhalb einer Liste (<ul>... </ul>) aufscheint. Standardmäßig wird <strong> von allen Browsern fett ausgegeben. Da wir nur in die Schriftfarbe geändert haben, bleibt die Schriftauszeichnung "fett" erhalten: ul strong { color: red; } <p>dieses <strong>"strong"</strong> steht außerhalb der Liste, daher wird es standardmäßig formatiert (schwarz, fett)</p> <ul><li>dieses <strong>"strong"</strong> steht innerhalb einer Liste, daher erscheint es so, wie in der CSS-Deklaration bestimmt (rot, fett)</li></ul>
11 4.5 Die totale Freiheit - position: absolute Das Stylesheet position: absolute erlaubt die freie Platzierung von Elementen auf der Seite. Damit sind unter Anderem auch Überlappungen möglich. Besonders interessant ist dieses Stylesheet natürlich für Bilder, aber prinzipiell auch auf jedes andere Element anwendbar. Die Koordinaten stehen in den Positionsangaben top und bottom. Beispiel: acht Bilder und ein Absatz: <!doctype html><html><head><title>beispiel</title> <style type="text/css">.o { position: absolute; top: 20px; left: 150px; }.ro { position: absolute; top: 66px; left: 250px; }.lo { position: absolute; top: 66px; left: 45px; }.r { position: absolute; top: 150px; left: 280px; }.l { position: absolute; top: 150px; left: 20px; }.ru { position: absolute; top: 220px; left: 250px; }.lu { position: absolute; top: 220px; left: 45px; }.u { position: absolute; top: 260px; left: 150px; }.txt { position: absolute; top: 110px; left: 144px; font-family: 'Times New Roman', serif; text-align:center; font-size: 2em; color: #006600; } </style></head> <body> <img class="o" src="suppe.gif"> <img class="u" src="salatteller.gif"> <img class="r" src="fisch.gif"> <img class="l" src="obstschussel.gif"> <img class="ro" src="grillteller.gif"> <img class="ru" src="weintrauben.gif"> <img class="lo" src="lachsteller.gif"> <img class="lu" src="nudeln.gif"> <p class="txt">guten<br>appetit!</p> </body></html> In den meisten Fällen wird man auf einer Webseite zumindest drei Bereiche finden: 5 Struktur einer Webseite Kopf (Titel, Firmenlogo,...) Navigation (enthält die Links zu anderen Seiten) Hauptbereich (der eigentliche Inhalt der Seite) Für diese Bereiche können <div> - Blöcke verwendet werden. Es gibt aber seit HTML 5 auch eigene Tags dafür:
12 Kopf: <header> Navigation: <nav> Hauptbereich: <main> spaltiges Layout Ein einfaches Layout teilt die seite in drei Bereiche: oben der Header, links die Navigation, rechts daneben der Hauptbereich: Damit Navigation und Hauptbereich nebeneinanderliegen und sich nicht überlappen, benötigt a) der Navigationsbereich eine bestimmte Breite (am besten in em, damit sich Größe automatisch anpasst) b) der Navigationsbereich die CSS-Formatierung float:left c) der Hauptbereich ( main ) die CSS-Formatierung margin-left (Wert = Breite der Navigation + Padding der Navigation) Für die Links der Navigation wird bevorzugt der Listen-Tag (<li>) verwendet, weil er viele Design-Möglichkeiten eröffnet Aufbau Die drei Blöcke: <div class="header">die sieben Weltwunder</div> Kopfzeile für Logo, etc <div class="navig">home</div> Navigationsbereich links <div class="main"><h1>die Pyramiden von Gize</h1></div> Hauptbereich, rechts neben Navigation Die css-klassen:.header { height:5em; background-color:#ffc; } Kopfzeile: über ganze Seitenbreite, daher keine Breitenangabe.navig { width:8em; float: left; padding:0.5em; background-color:#ff6; } Navigation links, 8em breit + 2x0.5 em padding.main { margin-left:9em; padding:0.5em; background-color:#fc0; } Hauptteil, 9em Abstand links (= 8em navig + 2x0.5 em padding) Die Links als Liste im Navigationsbereich: <ul> <li><a href="#" class="aktuell">home</a></li> <li><a href="garten.html">hängende Gärten</a></li> <li><a href="pyramiden.html">pyramiden von Gise</a></li> <li><a href="koloss.html">koloss von Rhodos</a></li> <li><a href="leuchtturm.html">leuchtturm</a></li> </ul> Damit die Links wie gewünscht angezeigt werden und funktionieren, sind einige CSS-Formatierungen notwendig: Liste ohne Aufzählungspunkt ( list-style: none ) Automatische Einrückung der Liste unterbinden ( margin: 0px; padding: 0px ) Wenn die Links eigene Hintergrundfarben besitzen sollen: die einzelnen Listeinträge mit geringem Padding-Bottom versehen, damit Hintergrundfarbe zwischen ihnen durchscheint - Trennung der einzelnen Einträge ( padding-bottom: 1px ). Nur Padding-bottom, weil sich sonst top und bottom zu doppeltem Padding addieren
13 Links in dieser Liste auf ganze Listbreite ausdehnen ( display: block ) Padding des <a> Tags hat keinen Einfluss auf Zwischenraum der Links (dieser durch Padding von <li> bestimmt), sondern nur auf Größe des Links selbst HTMl - Code des Beispiels <!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="std.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>die sieben Weltwunder</title> </head> <body> <div class="header">kopfzeile</div> <div class="navig"> <ul> <li><a href="index.html">home</a></li> <li><a href="garten.html">hängende Gärten</a></li> <li><a href="pyramiden.html">pyramiden von Gise</a></li> <li><a href="koloss.html">koloss von Rhodos</a></li> <li><a href="leuchtturm.html">leuchtturm</a></li> </ul> </div> <div class="main"> <h1>die sieben Weltwunder</h1><p...</p> </div> </body></html> CSS - Datei des Beispiels Zur deutlichen Unterscheidung der Bereiche wurden unterschiedliche Hintergrundfarben verwendet.navig { width: 11em; float: left; padding: 0.5em; background-color:#ccffff; }.main { margin-left: 12em; padding: 0.5em; background-color: #CCCCCC; }.footer { clear: both; padding: 0.5em; background-color: #33CC33; }.header { padding: 0.5em; background-color: #9999FF; }.navig ul { list-style: none; margin: 0px; padding: 0px; }.navig ul li { padding-bottom: 1px; padding-top: 0px; }.navig a { text-decoration: none; background-color: white; padding: 3px; display: block; }.navig a:hover { background-color:#000099; color: white; } h1 { margin-top: 0px; padding-top: 0px; }
1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...
CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...
Inhaltsverzeichnis. Florian Bauer CSS Seite 2 von 10
CSS Inhaltsverzeichnis Gestaltung mit CSS... 3 CSS einbinden... 3 On the fly... 3 Im Header... 3 In einer externen Datei... 3 Aufbau einer CSS Anweisung... 4 Wichtige CSS Eigenschaften... 4 Pseudoelemente...
Allgemeine Technologien II Sommersemester Mai 2011 CSS
Allgemeine Technologien II Sommersemester 2011 02. Mai 2011 CSS Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts -basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden
Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS
Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,
Grundlagen-Beispiel CSS
Grundlagen-Beispiel CSS Öffne im Ordner 2.css.uebung die vorhanden Dateien index.html und erstelle eine neue CSS-Datei mit dem Namen bildschirm.css. Füge im Bereich folgende Verlinkung ein:
Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.
1. Stunde Mitschrift HTML Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Verstehen des Unterschiedes
CSS Cascading Style Sheets
XML light CSS Cascading Style Sheets Jörn Clausen joern@techfak.uni-bielefeld.de Übersicht Wieso Cascading Style Sheets? HTML und CSS XML und CSS Ausblick XML light CSS Cascading Style Sheets 2/24 Probleme,
Übung zur Vorlesung Digitale Medien. Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012
Übung zur Vorlesung Digitale Medien Doris Hausen Ludwig-Maximilians-Universität München Wintersemester 2011/2012 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL:
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP
jetzt lerne ich Webseiten programmieren und gestalten Einfache Beispiele mit HTML, CSS, Javascript, ASP und PHP CHRISTIAN WENZ TOBIAS HAUSER KAPITEL 3 CSS anwenden jetzt lerne ich Style-Sheets sind heute
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde,, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016, 12.00
4. Briefing zur Übung IT-Systeme
4. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 18.12.2017, PC Pool Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017, 10.15
Übung: Bootstrap - Navbar
Übung: Bootstrap - Navbar Angaben befinden sich im Ordner: 5_Übung_nav. Darin befinden sich die Bootstrap-Ordner und die dazu passende index.html, die bereits die Links zu den Ordnern enthält. Aufgabe:
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
Introduction to Technologies for Interaction Design. Stylesheets
Introduction to Technologies for Interaction Design Stylesheets Syntax Selektor und Eigenschaften Selektor bezieht sich auf ein HTML-Element ID-Selektoren dürfen in jeder HTML-Datei nur einmal vorkommen
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
Umsetzen einer skalierbaren horizontalen Navigation:
Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer
HTML & CSS. GIMP > Bild > Bild skalieren Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen
Übung 1 HTML & CSS Bildbearbeitung in Hinblick auf HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.jpg Lehrziel: Bilder auf Ansichtsbasis
CSS - Cascading Stylesheets
CSS - Cascading Stylesheets Alfred Beringer HTBLVA für Textilindustrie und Datenverarbeitung Alfred Beringer 1 Überblick Kurze Einführung Deklarationen Selektoren Beispiele Alfred Beringer 2 CSS Formatierungssprache
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde: 09.11.2016,
Abgabetermin: , 23:59 Uhr
HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo
E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 3: Webdesign mit CSS Stand: Übung WS 2015/2016. Benedikt Schumm M.Sc.
Übung WS 2015/2016 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 3: Stand: 30.10.2015 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt
Beschreibung Tags Schlüsselwort. Schriftart. Die Liste ist keineswegs erschöpfend. <p><h1...6 > <li><td> <body> 'Arial','Helvetica','Tahoma','Verdana'
Die Liste ist keineswegs erschöpfend. Beschreibung Tags Schlüsselwort Werte Schriftart font-family: 'Arial','Helvetica','Tahoma','Verdana' serif = eine Schriftart mit Serifen,
CSS-Tutorial. Grundlegende CSS-Kenntnisse
2008 CSS-Tutorial Grundlegende CSS-Kenntnisse Dieses Tutorial gibt Ihnen verschiedene CSS-Kenntnisse mit an die Hand, damit Sie Ihre Webseite ansprechend gestalten können. Webmasterparadies.de Vertraulich
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) CSS sind eine unmittelbare Ergänzung zu HTML. Es handelt sich um einen firmenunabhängigen, offen dokumentierten und frei verwendbaren Standard. Es ist eine Sprache zur Formatierung
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Zeichen formatieren... 1 Physische Formatierungen... 1 Zitate auszeichnen... 2 Schrift ändern... 2 Die Schriftgröße einstellen... 2 Die Schriftart einstellen...
Online-Publishing mit HTML und CSS für Einsteigerinnen
Online-Publishing mit HTML und CSS für Einsteigerinnen Dipl. Math. Eva Dyllong, Universität Duisburg Dipl. Math. Maria Oelinger, spirito GmbH IF MYT 07 2002 CSS-Einführung Vorschau CSS Was ist das? Einbinden
Inhalt. Hintergrund HTML CSS. JavaScript und das Document Object Model
Andreas Heß Inhalt Hintergrund HTML CSS JavaScript und das Document Object Model Netz-Protokolle Schichtenmodell OSI DoD Beispiele 7 Anwendung 6 Darstellung 5 Sitzung Anwendungen HTTP, HTTPS, SMTP,
ANWENDUNGSSOFTWARE CSS
ANWENDUNGSSOFTWARE CSS NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit ,
CSS. Cascading Stylesheets
CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische
Praktikum im Grundstudium
Praktikum im Grundstudium Teil 2: Layout mit CSS Zweck von Stylesheets Ergänzung zu XHTML XHTML legt Struktur des Dokuments fest Definiert Formateigenschaften Trennung von Inhalt und Layout Stylesheet
Selektoren in CSS. HTML/CSS 21. November 2013 E1. 1. Beispiel: Kinder und Enkel
Selektoren in CSS 1. Beispiel: Kinder und Enkel universal Selektor body { font family: sans serif; color : #666; div { border:
CSS. Cascading Style Sheets
CSS Cascading Style Sheets Was ist CSS? CSS... steht für Cascading Style Sheets... definiert die Darstellung (Farben, Fonts,... ) von (HTML) Dokumenten auf Web-Seiten.... spart viel Aufwand, da Format-Regeln
CSS in HTML-Elementen. Syntax und Grammatik von CSS
CSS Grundlagen CSS3 - Cascading Stylesheets CSS-Dokumente in HTML einbinden CSS kann auf 3 Arten eingebunden werden: - in einer separaten CSS-Datei - im Kopfbereich des HTML-Dokuments - im einzelnen HTML-Element
Cascading Stylesheets (CSS)
Cascading Stylesheets (CSS) Cascading Stylesheets trennen Webdesign vom eigentlichen Inhalt. Die Vererbung, sprich Kaskadierung, von festgelegten Stilen wird allerdings erst bei fortgeschrittenen Programmierkenntnissen
Seiten gestalten mit CSS. Die wichtigsten HTML-Elemente. ,CSS gestaltet dynamisch die HTML-Elemente (Boxen)
Wichtige Grundlagen Cascading Style Sheets, gestaltet dynamisch die HTML-Elemente (Boxen),Mit legen Sie Schriften und Farben einheitlich fest,über das Box-Modell layouten Sie die Seite,Navigation und Effekte
IT- und Medientechnik
IT- und Medientechnik Vorlesung 4: 2.11.2015 Wintersemester 2015/2016 h_da, Lehrbeauftragter Teil 1: IT- und Medientechnik Themenübersicht der Vorlesung Hard- und Software Hardware: CPU, Speicher, Bus,
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
Vorlesungsinhalte. Internet und Webseiten-Gestaltung. Ausblick. Entwicklungsschritte
Vorlesungsinhalte Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 2005-05-13 Dipl.-Inf. (FH) T. Mättig Stylesheets (CSS) Das CSS Box-Modell Fotos, Bilder, Grafiken Tabellen 2005-05-13
Einführungskurs HTML-CSS mit Buch
Einführungskurs HTML-CSS mit Buch Von Stand: 01.11.2013 Arbeitsblätter Blatt1: Grundlegendes, Software einrichten Blatt2: Link-Arten Blatt3: Wichtige HTML-Elemente Blatt4: Einführung CSS Blatt5: Wichtige
Introduction to Technologies. Stylesheets mit CSS
Introduction to Technologies Stylesheets mit CSS HTML-CSS enthält den Inhalt HTML- Datei *.html CSS- Datei *.css enthält die Layoutangaben ist austauschbar Darstellung des Seiteninhaltes im erstellten
Publizieren im Internet
Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund Webseite mit einen Bild als Hintergrund
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 Cascading Style Sheets HTML beschreibt nur den logischen Aufbau eines Dokuments. Die Gestaltung
Aufbau eines Klassen-Selektors: selektor.klasse { css-eigenschaft1:wert1; css-eigenschaft2:wert2;...}
Cascading StyleSheets (CSS) Allgemein CSS (aufeinander aufbauende Stilvorlagen) wurden 1996 vom W3C standardisiert. dienen der Ergänzung strukturierter Dokumente wie HTML oder XML. Ermöglichen die Trennung
ALLGEMEINES WOMIT KANN ICH WEBSITES ERSTELLEN?
HTML AG INHALT Allgemeines... 2 Womit kann ich Websites erstellen?... 2 Grundgerüst von HTML... 3 Tags und Attribute... 3 Links... 4 Links auf andere Seiten... 4 Bilder... 5 meta-tags... 5 Webseiten mit
Tutorial zum erstellen einer Webseite
Tutorial zum erstellen einer Webseite 2. Teil das Aussehen mit CSS bestimmen Vorbereitungen: Die HTML Grundlage anpassen, Änderungen sind fett geschrieben. Ab sofort werden wir mit zwei Dateien arbeiten,
HTML - Die Sprache des Internets. Grundlagen und Kurzprojekt
- Die Sprache des Internets Grundlagen und Kurzprojekt aus der Presse: Definition : Hypertext Markup Language Sprache des WWW definiert: Text- und Absatzformate Links Bild- und Tonelemente Farben offener
Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache
Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie
Veranstaltung Systementwicklung. HTML und CSS. Uwe H. Suhl und Chris Bizer SS 2008
Veranstaltung 10033013 Systementwicklung HTML und CSS Uwe H. Suhl und Chris Bizer SS 2008 HTML - Hypertext Markup Language HTML ist eine Auszeichnungssprache für Web-Dokumente Auszeichnungssprachen Auszeichnen
Eine Schnelleinführung in CSS
Eine Schnelleinführung in CSS Michael Dienert 11. September 2013 Inhaltsverzeichnis 1 Was ist CSS? 1 2 Verwenden der CSS-Stylesheets 2 3 Struktur eines CSS-Stylesheets 2 4 Selektoren im Detail 3 4.1 Verwandschaftsbeziehungen:
Übung zur Vorlesung Digitale Medien. Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015
Übung zur Vorlesung Digitale Medien Hanna Schneider Ludwig-Maximilians-Universität München Wintersemester 2014/2015 1 Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!doctype html> <html lang="de"> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) <!DOCTYPE HTML> <html> <head>
Grundaufbau eines HTML5-Dokumentes (Grautöne visualisieren die Zwiebelstruktur des Dokumentes) name Ihres HTML-Dokumentes
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
GRUNDLAGEN HTML + CSS
GRUNDLAGEN HTML + CSS Bitte beachten Sie mein Urheberrecht. Keine Veröffentlichung auch nicht in Auszügen - oder Weitergabe an Dritte ohne mein Einverständnis. alle Rechte vorbehalten: BüroSmart, Michaela
Richtlinien für das Design der KML Webseite. KML TP2, Informationsdienste
Richtlinien für das Design der KML Webseite KML TP2, Informationsdienste Inhaltsverzeichnis 1. Einleitung...1 2. Textgestaltung...1 2.1. Absätze...1 2.2. Überschriften...2 2.3. Grafiken...2 3. Besondere
Textverarbeitung 1. 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung
Informatik - Text / HTML 1 Textverarbeitung 1 1. Textentwurf 2. Texterfassung 3. Textumformung 4. Textgestaltung 5. Textverwendung Leistungsmerkmale Textverarbeitung ist Standardsoftware - nutzerorientiert,
HTML & CSS. Beispiele aus der Praxis
HTML & CSS Beispiele aus der Praxis Übungsblatt 2 http://www.uni-koblenz.de/~ugotit Fragen? Wiederholung Beispiele von.../~ugotit/test/index.htm zu.../~ugotit/test2/html/index.htm Absoluter Pfad relativ
CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG
CAS WEBDESIGN UND WEBPUBLISHING KURS 1 / TAG 2: GRUNDLAGEN DER WEBENTWICKLUNG Von Markus Stauffiger / 4eyes GmbH STRUKTUR UND ZIELE DES HEUTIGEN TAGES Repetition CSS Grundlagen CSS Eigenschaften Wie komme
Cascading Style Sheets II (CSS)
Cascading Style Sheets II (CSS) CSS ist ein Befehlssystem, das die Erscheinungsform von HTML-Elementen regelt. Bei modernen Websites ist der Inhalt der Site unabhängig vom Layout. HTML übernimmt den Inhalt,
Crashkurs HTML und CSS
Crashkurs HTML und CSS HTML und CSS Hinweis: Dieser Crashkurs liefert einen Überblick und Kriterien für die sachgerechte Verwendung von HTML und CSS. Zum Lernen, Nachschlagen und Ausprobieren verweise
Internet und Webseiten-Gestaltung
Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 5. Mai 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail:
Computergrundlagen HTML Hypertext Markup Language
Computergrundlagen HTML Hypertext Markup Language Axel Arnold Institut für Computerphysik Universität Stuttgart Wintersemester 2014/15 Ausgabemedien und Beschreibungssprachen Papier: L A T E X feste Seitengröße
Um CSS-Formatierungen in einem HTML-Dokument einzubinden gibt es 3 Möglichkeiten.
CSS-SCHULUNG TEIL A: ALLGEMEINE EINFÜHRUNG IN CSS TEIL B: CSS IM LOKALEN INFORMATIONS-SYSTEM Dozentin: Dipl. Ing.(FH) Nicole Hartmann Rhoen-Saale.net GmbH Oktober 2009 TEIL A: ALLGEMEINE EINFÜHRUNG IN
Einführung in die Webentwicklung
Einführung in die Webentwicklung Mit HTML5 und CSS3 auf dem Weg zur eigenen Website Kerstin Blumenstein EXPOSEE Dieses Script beinhaltet alle in dem Kurs durchgenommenen - Teile mit Erklärungen von Tag
3. Briefing zur Übung IT-Systeme
3. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Fragestunde, 30.11.2016, PC Pool Stand und Ausblick Einführung: 18.10.2016, 12.00 Uhr (c.t.), HS 4/PC Pool Fragestunde:, 12.00
CSS zur Gestaltung von HTML-Seiten nutzen
CSS zur Gestaltung von HTML-Seiten nutzen Handbuch und Literatur Handbuch des RRZNs: CSS Cascading Style Sheet; Level 2 Charles Wyke-Smith: Stylin with CSS; Addison-Wesley Tommy Olsson & Paul O'Brien:
Wert. { color: blue; }
CSS im Überblick HTML wurde vom W3C entwickelt, um die Inhalte einer Webseite zu gliedern und zu strukturieren. In HTML wird festgelegt, ob ein Textinhalt bspw. dies ist eine Überschrift oder
1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel
Inhalt 1. Einstieg 2. Selektoren 3. Schriften 4. Strukturen 5. Zwischenräume, Abstände 6. Bilder 7. Farben 8. Beispiel Einstieg - Eine Formatvorlage besteht aus mindestens einer Anweisung. - Eine Anweisung
<html> <head> <title> Die Welt der Bäume </title> </head> <body> Hier ensteht eine Seite über Bäume. </body> </html> Abb. 2
Dieser html-kurs soll die Informatik-SchülerInnen meines Info-Kurses auf den Info-Quali vorbereiten. Das Werkzeug html soll einen in die Lage versetzten, die Programmierung von Web-Seiten zu verstehen
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente
Einführung in HTML. Tutorium. Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker
Tutorium Einführung in HTML Präsentation der Sitzung vom 2./9. Juni 2004 Martin Stricker martin.stricker@rz.hu-berlin.de Programm Grundlagen von HTML Objekte, Elemente, Tags Grundaufbau eines HTML-Dokuments
Wir studieren HTML-Tags
Abb. 1: Word-Dokument Abb. 2: Das Dokument aus Abb. 1 mit einem Editor betrachtet Wir studieren HTML-Tags Wenn man ein Word-Dokument wie in Abb. 1 mit einem Editor anschaut, erkennt man den Quelltext des
Die wichtigsten HyperTextMarkupLanguage tags 1(6)
Die wichtigsten HyperTextMarkupLanguage tags 1(6) HTML ist entgegen vielen Gerüchten keine Programmiersprache, sondern lediglich ein Hilfsmittel um Text und Bild zu formatieren, welche in einem Browser
Digitale Medien. Übung
Digitale Medien Übung Pfadangaben Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte per URL: Protokoll : / lokalernetzwerkname / Hostname : Port / Pfad http://www.mimuc.de/ http:/arbeitsgruppe/www.mimuc.de:8080
Tabellenfreies Layout in HTML
Tabellenfreies Layout in HTML 0. Inhaltsverzeichnis Philipp Wahle 12.12.12 2 von 40 Seiten 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau
Hyper. Text. Markup. Language
Hyper Text Markup Language Dateiname und-endung Wir schreiben mit dem Editor eine HTML-Quelldatei, diese endet immer auf Punkt html, also beispielsweise: hello-world.html Wir verwenden in unseren Dateinamen
Navigation für Internetpräsenzen
Navigation für Internetpräsenzen Gestern und heute 2016 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben
HTML: Text und Textstruktur mit CSS gestalten
Tutorium HTML: Text und Textstruktur mit CSS gestalten Martin Stricker martin.stricker@rz.hu-berlin.de 23. Juni 2004 Schriftarten und generische Schriftfamilien Schriftarten werden mit font-family definiert
HTML-Grundlagen. Eine Einführung in HTML für Informatik TG 11
HTML-Grundlagen Eine Einführung in HTML für Informatik TG 11 HTML-Grundlagen Kapitel 1: Grundlegendes Benötigte Software Einen Texteditor, z.b. Microsoft Notepad WHYSIWY Editoren (Macromedia( DW) Einen
Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:
1 2 Fach: Klasse: Datum: Web BW1 16.05.2019 (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel
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
Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen.
CSS3 Erstelle eine neue Datei unter dem Namen stylesheet.css und speichere es im selben Verzeichnis, in dem auch die vier HTML-Dokumente liegen. Klicke auf Menü Datei und dann Neu. Wähle CSS und dann erstellen
<link href=" Roboto" rel="stylesheet"> <li><a href="ergebnis.html"> Ergebnis </a></li>
Index.html er-modell
Inhalt: 1)Das Box-Modell
Inhalt: 1. Das Box-Modell 2. Reset-CSS 3. CSS-Eigenschaft: position (static, relative, absolute) 4. CSS-Eigenschaft: float, clear 5. Übung 6. Die Seite zentrieren mit margin:auto 1)Das Box-Modell Die Box
3 XML, HTML und XSL die Ausgabe
3 XML, HTML und XSL die Ausgabe XML und VBA lernen ISBN 3-8273-1952-8 Nun, nachdem eine wohlgeformte oder eine gültige XML-Datei erstellt worden ist, stellt sich die Frage, was mit ihr geschieht. Die Anzeige
Übung zur Vorlesung Digitale Medien. Ludwig-Maximilians-Universität München Wintersemester 2010/2011
Übung zur Vorlesung Digitale Medien Ludwig-Maximilians-Universität München Wintersemester 2010/2011 1 Über den Studiengang und das Forschungsgebiet Medieninformatik informieren Studenten, Interessenten
HTML-Grundlagen (X)HTML:
HTML-Grundlagen (X)HTML: < > beginnender HTML Tag schließender HTML Tag < /> leere HTML Elemente Attribute und Werte &.; Sonderzeichen, HTML Entities Aufbau einer Datei Ein
Digitale Medien. Übung
Digitale Medien Übung HTML Heute Hyper Text Markup Language Beschreibungssprache von WWW-Seiten: Enthält die Struktur eines Dokuments und teilweise die Darstellung. ich bin eine Überschrift
Web-basierte Anwendungssysteme XHTML- CSS
Web-basierte Anwendungssysteme XHTML- CSS Prof. Dr. Sergej Alekseev (alekseev@fb2.fra-uas.de) Prof. Dr. Armin Lehmann (lehmann@e-technik.org) Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen
Nachbau der Website 1.)Hintergrundbild einfügen eigene CSS-Datei
Nachbau der Website http://www.lake-festival.at/ Erstelle eine neue Bootstrapsite im Ordner lakefestival. Es soll alle Ordner bereits enthalten, back für diverse backgrounds, img mit vielen Bildern usw.
HTML Grundgerüst. html> head> <title> Einführung </title> </head. body> <h1> Willkommen </h1> <p> Es war einmal </p> </body.
HTML - Kurs HTML Grundgerüst Einführung Willkommen Es war einmal Textformatierung Überschriften größ
Inhaltsverzeichnis. Florian Bauer HTML Seite 2 von 10
HTML Inhaltsverzeichnis HTML Grundlagen... 3 Was ist HTML... 3 URL... 3 HTTP... 3 WWW Funktionsweise... 3 HTML Grundgerüst... 4 Grobes Grundgerüst... 4 Feines Grundgerüst... 4 HTML-Elemente... 5 Tags...
EasyHTML v1.0. Eine vereinfachte Seitenbeschreibungssprache
EasyHTML v1.0 Eine vereinfachte Seitenbeschreibungssprache Stand: August 2002 EasyHTML 1.0 Inhaltsverzeichnis 1. Systemvoraussetzungen a. Server b. Client 2. Struktur der Sprache, Einbindung 3. Funktionen
CSS-Boxen. Hans Gell Schulungen & Dienstleistungen Übersicht der Schulungsinhalte
CSS-Boxen Übersicht der Schulungsinhalte Das Web ist nicht aus Papier enttäuschte Erwartungen Autor hat keine Kontrolle Webseiten sehen immer anders aus Webseiten sind flexibel - Papierseiten sind starr
Cascading Style Sheets
CSS Cascading Style Sheets von Carsten Euwens CSS Vortragsgliederung Grundlagen Bedeutung Wie binde ich CSS überhaupt ein Wie weise ich Styles den einzelnen Elementen zu Was kann man damit machen Text
Literatur. Webtechnologien WS 2018/19 - Teil 4/CSS I
Literatur [4-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [4-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [4-3] Münz, Stefan: . Addison-Wesley, 2005 [4-4]
HTML-Kurzübersicht 1. Die wichtigsten Elemente. HTML-Kurz-Übersicht
HTML-Kurzübersicht 1 Alle HTML-Elemente können wie Kästen (little boxes) gedacht werden. Sie werden mit einem Etikett (tag) aufgemacht und mit einem Etikett desselben Namens geschlossen. Der