Mitschrift HTML. Dateinamen von Bildern: nur Kleinbuchstaben ohne Umlaute und Sonderzeichen BSP: auto.jpg fruehling.jpg bild_01.
|
|
|
- Edith Ritter
- vor 7 Jahren
- Abrufe
Transkript
1 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 der Bildansicht in Prozent und der tatsächlichen Bildgröße. 100% ist immer die wahre Größe. In dieser Größe werden Bilder in HTML gerendert, wenn der OUTPUT des Bildes nicht gesondert definiert ist. GIMP: Bilder in genauen Pixel Größen speichern können. Bild * Bild skalieren: Unter diesem Menüpunkt kannst du die Bildgröße verändern. Beachte die Bildproportionen Arbeiten mit dem Zuschneiden Werkzeug: Möglichkeit, Ausschnitte von Bildern herzustellen Ziel: Speichere 3 beliebige Bilder (Fotos) auf deinem Desktop. Schneide sie entsprechend zu und speichere sie mit der Pixelgröße 500 x 150 PIXEL. HÜ: Speichere 5 Fotos aus dem Internet auf deinem Desktop. Speichere sie unter den Namen 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg Schneide alle Fotos zu quadratischen Bildern zu und setze sie auf eine Größe von 150 x 150 Pixel Seite 1 von 13
2 2. Stunde Aufgabe: Fertige 3 Bilder (200 x 200 PIXEL) quadratisch von 3 verschiedenen Tieren an. Achte auf das Verzerren, schneide die Bilder so zu, dass im Wesentlichen nur das Tier sichtbar ist. Erste Schritte in HTML: Arbeiten im Editor PsPad und Browser (Ansehen und Aktualisieren) Aufbau einer Internetseite Erlernen der ersten einfachen Befehle (TAG s) Mitschrift in Form einer Art Vokabelheft <html> <title> <body> <table> <tr> <td> width <p> html Tag steht zu Beginn jeder Internetseite Definiert den Namen der Seite. Ersichtlich in Browser-Adresszeile Das body Element enthält den gesamten Inhalt eines HTML Dokuments wie Texte, Hyperlinks, Fotos, Tabellen, Listen, Öffnet eine Tabelle Zeile einer Tabelle Spalte einer Tabelle Diese Eigenschaft definiert die Breite eines Elements. Kann in Pixel oder Prozent definiert werden. Bestimmt einen Absatz (Enter Taste) im HTML Dokument HÜ: Mit den kennengelernten Mitteln eine Seite programmieren. Die Seite soll eine Tabelle mit 3 Spalten und mindestens 3 Zeilen beinhalten. Seite 2 von 13
3 3. Stunde Aufgabe: Programmiere eine Seite mit <title> und einer Tabelle mit 2 Zeilen und je 4 Spalten. Füge darauf Fotos ein. Definiere den Rahmen mit der Rahmenlinienstärke 1. Neue TAG s <br> border img src Setzt einen Zeilenumbruch auf die Seite (Shift Enter) Definiert die Eigenschaft eines Rahmens Fügt Bilder oder Fotos ein Struktur und Aufbau einer Tabellenprogrammierung mit Bildereinfügung Aufbau einer Tabelle mit 2 Zeilen und jeweils 4 Spalten: Die Tabelle hat die Zusatzeigenschaft border= 1 und width= 100% border= 1 border= 0 width= 100% bedeutet: Sichtbarer Rahmen bedeutet: kein sichtbarer Rahmen bedeutet eine Bildschirmausdehnung über die gesamte Bildschirmbreite Seite 3 von 13
4 4. Stunde Aufgabe: Programmiere eine Seite in der du externe Hyperlinks einbaust. Neue TAG s a href= align target Definiert einen Hyperlink Definiert die Ausrichtung eines Elements (left, right, center) Definiert, wie die aufgerufene Seite geöffnet wird. Das Beispiel zeigt: einen Hyperlink auf die Seite Außerdem wird der Hyperlink in einem neuen Browser Fenster geladen. Angezeigter Name am HTML Dokument ist ORF target= blank align= center width= 400px bedeutet: Seite wird in neuem Browser Fenster geladen bedeutet: Textausrichtung zentriert bedeutet, dass das Element 400 PIXEL breit dargestellt wird Seite 4 von 13
5 5. Stunde Aufgabe: Programmiere eine Seite in der du interne Hyperlinks einbaust. Beschreibung der Vorgangsweise: Erstelle in einem Ordner 3 HTML-Dateien mit folgenden Namen index.htm freunde.htm schule.htm Programmiere die 3 Dateien. Verwende Tabellen, baue Bilder und externe LINKS ein. Verlinke die 3 Dateien untereinander (interner LINK) index.htm Einfache Tabelle mit 2 Spalten in einer Zeile mit internen LINKS. Die LINKS verzweigen auf die Datei freunde.htm bzw. schule.htm freunde.htm Einfache Tabelle mit 2 Spalten in einer Zeile mit Textinhalt bzw. Anzeige einer Graphik. Darunter ist ein interner LINK definiert, der zur Hauptseite index.htm zurück verweist. Seite 5 von 13
6 Darstellung mit graphischer Erläuterung: freunde.htm index.htm Meine Freunde Das sind meine Freunde, zurück Startseite meine Freunde meine Schule schule.htm Meine Schule Das ist meine Schule zurück Diese 3 Dateien sind intern geschlossen miteinander verlinkt. In den nachfolgenden Kapiteln ist dieses Verständnis die Basis zur Menüerstellung. Hausübung: Programmiere eine Startseite index.htm mit 3 internen LINKS zu selbst definierten Seiten. Du kannst dich auch an folgendem Beispiel orientieren. sport.htm index.htm hobby.htm musik.htm Programmiere in jeder deiner 3 Seiten (sport.htm, hobby.htm, musik.htm) einen zurück LINK auf die Datei index.htm ein. Gestalte deine Seiten mit Tabellen, Fotos, Texten bzw. externen LINKS Seite 6 von 13
7 6. Stunde Aufgabe: LINK auf Graphiken bzw. Textteile setzen können. Den programmtechnischen Unterschied erarbeiten bzw. kennen lernen, einen Hyperlink auf Graphiken oder Textteile setzen können. Das folgende Beispiel zeigt eine Tabelle (1 Zeile 2 Spalten) mit je 2 LINKS. Der erste LINK verweist zur Seite und ist auf die Graphik auto.jpg gesetzt. Der zweite LINK verweist mit dem Wort ORF zur Seite und Übung: Programmiere eine Internetseite (start.htm) in welcher du 3 Bilder einbaust. Auf jedes Bild soll ein Hyperlink programmiert werden, der dich zu einer anderen Seite weiterführt. Verwende dazu 3 externe LINKS. Richtlinien zum Programmieren: Bearbeite die Bilder so, dass sie alle gleich groß sind. (150 x 100 PIXEL) Verwende eine Tabelle (Breite der Tabelle 500 px, Rahmen sichtbar) Erste Spaltenbreite = 200 px Zweite Spaltenbreite = 300 px Richte Fotos und Text zentriert aus Seite 7 von 13
8 7. Stunde Aufgabe: Bereiche in HTML definieren können Einbinden einer CSS Datei für Design. Verständnis der Trennung von Content (Inhalt, Text, Fotos) und Design (Farbgestaltung, Hintergrund, Schriftart, Schriftfarbe, ) Das folgende Beispiel zeigt einen einzelnen Container header, in welchem in einem Absatz Text geschrieben steht. HTML Datei (content) Diese Zeile bindet die CSS Datei main.css zur HTML Seite, damit der Content passend dargestellt wird CSS Datei (design) <br> <div id= header > <p> bedeutet einen Zeilenumbruch innerhalb eines Absatzes definiert einen Bereich (Container) mit dem Namen header definiert einen Absatz. Wird mit </p> geschlossen Seite 8 von 13
9 CSS Anweisungen und Erklärungen: Anweisungen in einer CSS Datei werden in geschwungene Klammern geschrieben und mit einem Strichpunkt abgeschlossen. Als Farbcode empfiehlt es sich stets den Hexadezimalcode (6-stellig) zu verwenden. (Bsp: #FF56A7) HTML CSS <div id= header > #header { } so spreche ich nur den Container header an <body> body { } so spreche ich den gesamten Bereich body an <p> p { } so spreche ich alle Absätze an (egal in welchem Bereich) CSS besteht immer aus einer Eigenschaft und dem passenden Wert dazu. Bsp: Die Eigenschaft font-style: kann als Werte bold (fett), normal oder italic (kursiv) annehmen border : 1px solid red; background: #ffccff; color: #00ff00; font-family: Arial; font-size: 20px; font-style: bold; width: 400px; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; margin: 10px 20px 30px 40px; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; padding: 10px 20px 30px 40px; Rahmen 1 PIXEL stark rundherum in Farbe rot Hintergrundfarbe Schriftfarbe Schriftart Schriftgröße Fettschrift Weite Breite Außenabstand oben Außenabstand rechts Außenabstand unten Außenabstand links so kann in einer Zeile der Außenabstand definiert werden. (Reihenfolge: oben rechts unten links) Uhrzeigersinn!!! Innenabstand oben Innenabstand rechts Innenabstand unten Innenabstand links so kann in einer Zeile der Innenabstand definiert werden. (Reihenfolge: oben rechts unten links) Uhrzeigersinn!!! Seite 9 von 13
10 8. Stunde Aufgabe: Seitenstruktur wie folgt erstellen können. Die Schüler sollen ein Verständnis zum Stylings der einzelnen Bereiche entwickeln. header <body> menu content <div id= all > <div id= header > <div id= container > <div id= menu > <div id= content > In diesem Beispiel werden anschließend in nur 3 Containern Texte, bzw. Fotos erscheinen. header fixer Kopfbereich der Webseite menu Menüpunkte - links content eigentlicher Inhalt in Form von Text und Fotos. Auch Tabellen möglich. Auszug der HTML Datei Diese html Struktur entspricht der Umsetzung von oben gezeigter Graphik. Seite 10 von 13
11 CSS Eigenschaften float: left; Jedes Element, das man floatet, wir dadurch automatisch zu einem Block- Element. Das bedeutet, dass man ihm sowohl eine Breite (width) als auch eine Höhe (height) zuweisen kann. Tatsächlich müssen Floats sogar eine zugewiesene Breite haben. left bedeutet, dass das Element (Container) links von dem Element plaziert ist, die es umfließen. Auszug der CSS Datei body Hintergrundfarbe, Schriftfarbe und Schriftart gelten für alle weiteren Container und Klassen sofern nicht anders gestylt. #all Dieser umfassende Container hat eine Weite von 1000px. Die Außenabstände (oben, rechts, unten, links) sind wie folgt definiert #header Mit roter Rahmenfarbe eingefasst. 1000px Breite wird vom Container all weitervererbt #container Außenabstand oben mit 10 PIXEL definiert #menu Dieser Container benötigt ein float: left, damit er sich unmittelbar an den vorhergehenden Container (container) links anreiht. #content Außenabstand links mit 200 PIXEL. Rahmeneinfassung rot. Definierte Hintergrundfarbe HÜ: Programmiere dieses Beispiel nach. Verändere nach deinen Bedürfnissen Rahmenfarben Hintergrundfarben Abstände Seite 11 von 13
12 9. Stunde Aufgabe: Menüstruktur mit <ul> und <li> und <a href > erstellen können. Die Schüler sollen ein Verständnis zum Stylings eines Menüs bekommen. Sie sollen die verschiedenen link Zustände kennenlernen und diese auch stylen können. Das folgende Beispiel zeigt ein Menü in der HTML Datei: Du kannst nun in der CSS Datei folgende Stylings definieren. #menu { border: 1px solid red; background: #1988DC; width: 190px; float: left; } #menu ul { background: #0F04F6; } #menu ul li { background: #9995EB; } #menu ul li a:link, #menu ul li a:active, #menu ul li a:focus, #menu ul li a:visited { background: #D7CCCB; } #menu ul li a:hover { background: #EC7F74; Seite 12 von 13 } Styling des gesamten Menüblocks Roter Rahmen 190 PIXEL breit Farbe: Styling der ul Einfassung aller Menüpunkte Farbe: Styling der li alle Listenpunkte Farbe: Styling der einzelnen Links in den unterschiedlichen LINK Zuständen Farbe der LINKS: Farbe des Mouse Hover Effekts: LINK (mouse hover):
13 10. Stunde Aufgabe: Menüstruktur in der sogenannten Startdatei fertig stellen. Kopfbereich und Menü fertig stylen. Jeder Schüler entwickelt nun seine eigene individuelle Seite auf Basis der vorgegebenen HTML Struktur (siehe Bsp. oben) Kennenlernen weiterer CSS Befehle für Menüstyling: list-style: none; Stylt die Listenpunkte vor den LINKS square = Quadrate, none = keine display: block; Styling direkt am LINK (a) bewirkt, dass sich der LINK über die gesamte Breite ausdehnt. Er wird zu einem BLOCK Element. padding: 0; margin: 0; Im Menü auf der ul angewandt, bedeutet das, dass der Innenabstand zum <div> 0 ist. Im Menü auf der ul angewandt, bedeutet das, dass der Außenabstand zum <div> 0 ist. text-decoration: none; Styling direkt am LINK (a) bewirkt, dass der LINK nicht unterstrichen dargestellt wird. text-decoration: underline; Styling direkt am LINK (a) bewirkt, dass der LINK unterstrichen dargestellt wird. Seite 13 von 13
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
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...
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:
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
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,
Ü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:
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
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-,
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 ,
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
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
Kennen, können, beherrschen lernen was gebraucht wird
Inhaltsverzeichnis Inhaltsverzeichnis... 1 Tags (Befehle)... 1 Erste Texte im Browser... 2 Das HTML Grundgerüst... 2 Ihre erste echte Webseite... 2 Texte... 3 Textabsatz und Zeilenumbruch... 3 Einen Zeilenumbruch
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
Aufbau einer HTML Seite:
1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,
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
Position von CSS-Stilen. Inline(pro Tag) In Header. Extern in CSS-Datei
CSS CSS-Übersicht Cascading Style Sheets Formatierung 2.0: Anstatt durch Tags und Attribute jedes Mal die Formatierung neu zu gestalten, arbeitet man mit Formatvorlagen Später kann man sämtliche Bereiche
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
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,
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,
<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
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
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:
Format- oder Stilvorlagen
Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen
EasyWeb CSS Editor. EasyWeb CSS Editor IACBOX.COM. Version Deutsch
EasyWeb CSS Editor Version 2.0.1 Deutsch 19.05.2014 In diesem HOWTO wird beschrieben wie Sie mit Hilfe des EasyWeb CSS Editor die Kunden-Anmeldeseite der IAC-BOX bearbeiten. EasyWeb CSS Editor TITEL Inhaltsverzeichnis
DML Befehl: UPDATE II
HTML HTML-Datei HTML-Datei: Textdatei, die tags enthält Die Tags zeigen dem Webbrowser an, wie die Seite anzuzeigen ist Eine HTML Datei muss eine htm oder html Endung haben Eine HTML Datei kann man mit
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
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...
FUNKTIONSBESCHREIBUNG. IFRAME EINBETTUNG VERSION: ab
FUNKTIONSBESCHREIBUNG IFRAME EINBETTUNG VERSION: ab 2016.1.0 Inhaltsverzeichnis 1 Einleitung... 3 2 Schreibweise... 3 3 Zusätzliche Parameter... 4 3.1 Hintergrundfarbe... 4 3.2 Anzeige als Liste... 4 3.3
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
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
Ü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:
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
Kurzanleitung MODx Raum für Wachstum GbR
Kurzanleitung MODx Raum für Wachstum GbR Inhaltsverzeichnis Anmeldung 1 Dokumentenbaum / Seitenstruktur 2 Seiten anlegen oder bearbeiten - Aktuelles Detailseite 3 Seiten anlegen oder bearbeiten - Aktuelles
Formatierung eines Text Ads in CSS
Formatierung eines Text Ads in CSS Damit sich die Text Ads möglichst harmonisch in Ihre Webseite einfügen, haben Sie verschiedene Möglichkeiten Ihr Text Ad über CSS (Cascading Style Sheets) zu formatieren.
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
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
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
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
1 Einführung Die Sprachen HTML und XHTML Struktur einer HTML Seite Webseiten speichern... 2
HTML GRUNDLAGEN 1 Einführung.. 1 2 Die Sprachen HTML und XHTML. 1 3 Struktur einer HTML Seite 1 4 Webseiten speichern.. 2 5 Elemente für die Seitenstruktur 2 6 Seiten und Inhalte verlinken. 4 7 Sonderzeichen
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
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
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
Der Rumpf. Titel Seite 3
Grundzüge des Web-Designs Es gibt verschiedene Elemente der Darstellung, die im Design immer wieder vorkommen Diese sind z.b. Textblöcke, Bilder, Überschriften, Absätze etc. Titel Seite 1 Diese Elemente
Eine Linkliste in Word anlegen und zur Startseite des Browsers machen
Eine Linkliste in Word anlegen und zur Startseite des Browsers machen In dieser Anleitung wird beschrieben, wie man mit Word eine kommentierte Linkliste erstellt und diese im Internet Explorer bzw. in
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
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
Inhalte mit DNN Modul HTML bearbeiten
Einführung Redaktoren Content Management System DotNetNuke Inhalte mit DNN Modul HTML bearbeiten DotNetNuke Version 6+ w3studio GmbH info@w3studio.ch www.w3studio.ch T 056 288 06 29 Letzter Ausdruck: 14.09.2012
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
Dokumentation. Content-Manager
Dokumentation Content-Manager 1 Funktionsweise... 2 2 Dokumentstruktur... 3 3 Aktivieren und Deaktivieren von Artikeln... 4 4 Artikel Editieren... 5 4.1 Textbearbeitung... 5 4.2 Link einfügen... 4-6 4.3
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
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
Joomla-Handbuch Seite 1 von 22 Joomla-Handbuch Stand: Juni 2017
www.tuebinger-umwelten.de Joomla-Handbuch Seite 1 von 22 Joomla-Handbuch www.tuebinger-umwelten.de Stand: Juni 2017 Bei Fragen: MarCo, Tel.: 07572 949-26 Annika Dörr (adoerr@marcoconsulting.de) & Mai Ly
Ü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
Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13
D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................
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
[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort](/thumbs/92/108574680.jpg "[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis. Vorwort")
[Guide] CSS (+ CSS 3!) Vorwort CSS in HTML einbinden HTML mit CSS ansprechen Farben Jetzt geht es los: Normales Stylen Boxen (DIVs) mit dem Boxmodel Fliessende Boxen Links formatieren & Pseudoklassen/Elemente
Webdesign im Tourismus
Ü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.3.
WEBSITE ERSTELLEN mit DREAMWEAVER MX
WEBSITE ERSTELLEN mit DREAMWEAVER MX Inhalt: WEBSITE ERSTELLEN mit DREAMWEAVER MX... 1 Neue Site anlegen... 2 Neue HTML-Seite erstellen... 2 Seiteneigenschaften... 2 Webseite speichern... 2 CSS (Cascading
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
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
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,
Dreamweaver Arbeiten mit HTML-Vorlagen
Publizieren auf dem NiBiS Kersten Feige Nicole Y. Männl 13.11.2002, 8.30-13.00 Uhr 19.11.2002, 8.30-13.00 Uhr Dreamweaver Arbeiten mit HTML-Vorlagen Voraussetzungen zum Arbeiten mit HTML-Vorlagen Starten
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
Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen :
Nachbau der Website http://www.lake-festival.at/ Diese Site gibt es so nicht mehr, daher muss man in der Geschichte wühlen : https://archive.org/web/ dann Erstelle eine neue Bootstrapsite im Ordner lakefestival.
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.
Ergänzungen zum HTML - Grundkurs
Ergänzungen zum HTML - Grundkurs Ein HTML - Dokument besteht grundsätzlich aus zwei Teilen; HEADER (Kopf, enthält allg. Angaben zu Titel und ähnlich) BODY (Körper, enthält den eigentlichen Text mit Überschriften,
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
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
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
HTML-Grundlagen. Die Layout- und Formatierungsanweisungen heißen Tags, z.b.
HTML-Grundlagen HTML (Hypertext Markup Language) -Dokumente sind einfache Textdateien, die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das Dokument von einem Browser auf dem Bildschirm
Web-Publishing mit HTML
Web-Publishing mit HTML Das HTML-Dokument: Jedes HTML 4-Dokument beginnt mit der Deklaration , um diese Version von anderen Versionen zu unterscheiden.
4.8 Das Box Modell, Block- vs Inline-Elemente
4 Formatierung mit CSS Webdesignkurshandbuch:: :: :: :: :: :: :: :: :: :: :: :: Büchli :: Süsstrunk :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: :: : 4.8 Das Box Modell, Block- vs Inline-Elemente
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
Meine erste Homepage - Beispiele
Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir
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
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
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
INDEXHIBIT 1. Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+
INDEXHIBIT 1 Download: www.bgames.ch/hibit.zip Voraussetzung: Serverunterstützung: Linux/Apache server* PHP4+ MySQL 3.23+ Datenbank einrichten: Anleitung zum einrichten einer Datenbank sollten sich auf
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
Der CSS-Problemlöser
Rachel Andrew Der CSS-Problemlöser Über 100 Lösungen für Cascading Stylesheets 2., überarbeitete und aktualisierte Auflage «j dpunkt.verlag Inhalt 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS 1
Probeklausur Besprechung
WiSe 2018/19 Aufgabe 1: Huffman (10 Punkte) 1 Geben Sie für die Nachricht schnelldurchlauf den Zeichenvorrat mit der Wahrscheinlichkeitsverteilung an. 2 Zeichnen Sie den resultierenden Codebaum und beachten
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
realschule.htm gymnasium.htm index.htm <html> <head> <title>schularten in Bayern</title> </head> <body text="orange"> <body bgcolor="gray">
HTML-Tags Beschreibung HTML-Tags Beispiel Textverarbeitungs- Programm Windows-Editor, z. B. Notepad. Grundstruktur (Mindestanforderung) (nur mit Body-Tag) Hintergrundgrafik Speichern unter + *.htm (.htm
Wie in Bootstrap üblich, bestimmen vorgegebene Klassen die Gestaltung.
Bootstrap4 Layout Komponenten Teil 2 Inhalt: 1. Card 2. Accordion 1)cards In der Bootstrap Version 3 gab es die cards noch nicht. Dort wurden noch panels eingesetzt. In Bootstrap 4 wurde die Komponente
Navigationsmenü im Stil von Registern
Navigationsmenü im Stil von Registern Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben
Inhalt. Seite 1 von 14
Seite 1 von 14 Inhalt 1. Php ansprechen... 2 2. html... 3 3. Weitere Formatierungen in html... 5 4. Tabellen mit html... 6 a. Grundstrukturen... 6 b. Tabellen formatieren... 11 Seite 2 von 14 1. Php ansprechen
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
Auf einer Seite werden maximal 10 Einträge angezeigt. Sind viele Einträge vorhanden, werden diese auf mehrere Seiten aufgeteilt.
Die Seitenverwaltung Mit einem Klick auf den Link Seitenverwaltung in der Navigationsleiste auf der linken Seite gelangen Sie zur Übersicht der Einträge in der Seitenverwaltung. Übersicht Auf einer Seite
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
Meine Fakultät. Alumni-Portal HTML-Seiten im Portal Seite 1 von 8
Alumni-Portal HTML-Seiten im Portal Seite 1 von 8 Meine Fakultät Auf Wunsch wird jedem Fachbereich ein eigener Reiter im Alumni-Portal eingerichtet. Diese Seite bzw. die Unterseiten können Sie nach Wunsch
Yootheme Master2 - ein flexibles Template für Joomla!
Yootheme Master2 - ein flexibles Template für Joomla! Yootheme ist ein kostenloses Template für Joomla, das sowohl Anfängern als auch Fortgeschrittenen mit CSS Kenntnissen weitreichende Einstellungsmöglichkeiten
Praktikum 8: CSS-Layout
WEB1 Web-Technologien 1 Praktikum 8: CSS-Layout Gerrit Burkert, 01.11.2014 Ziele In einem früheren Praktikum haben Sie den HTML-Code für eine Reisebüroseite gemacht. Ziel dieses Praktikums ist es, die
IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery
IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery Für unser Miniredaktionssystem, das wir im Laufe der nächsten Wochen / Monate entwickeln werden, verwenden wir eine der Website
Fließlayout. »World of Fish«
Fließlayout 4»World of FishWorld of Fish«stellt ein kleines Informationsangebot zu einem begehbaren Aquarium dar, und dieses Angebot soll von uns umgesetzt werden. Im Vorfeld haben wir wie immer ein Konzept
CSS Cascading Stylesheets
CSS Cascading Stylesheets 1. Einführung Warum denn CSS= Cascading Style Sheets? CSS ist eine Spache, bestimmt für die Formatierung von HTML-Seiten. Sie greift auf die Sprachelemente von HTML zu und verleiht
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