Unterrichtsmaterialien in digitaler und in gedruckter Form. Auszug aus: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung von Internetseiten
|
|
|
- Jesko Acker
- vor 7 Jahren
- Abrufe
Transkript
1 Unterrichtsmaterialien in digitaler und in gedruckter Form Auszug aus: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung von Internetseiten Das komplette Material finden Sie hier: School-Scout.de
2 Gestaltung von Internetseiten mit HTML5 und CSS3 Autoren: Petra Entzian Dr. Alexander Entzian
3 Hinweise Art Unterrichtseinheit zu HTML5 und CSS3 für Anfänger Inhalt Kopiervorlagen en, Tests und Lösungen zusätzlicher Inhalt zum Herunterladen Typ: Schülerarbeitsheft und Lehrerkopiervorlage Umfang: 51 Seiten Verlag: School-Scout Autoren: Petra Entzian, Dr. Alexander Entzian Auflage: 2015 Fach: Informatik Klassen: 9 12 Schultyp: Realschule, Gymnasium Inhaltliche Voraussetzungen: keine Dauer: mehrere Wochen - Monate Alle verwendeten Grafiken wurden selbst erstellt. Dieses Arbeitsheft besteht aus 11 Kapiteln und stellt eine umfassende Aufgabensammlung zur Erstellung von Internetseiten mit HTML5 und CSS3 dar. In Einzelschritten werden die theoretischen sowie praktischen Grundlagen für die am Ende erfolgende komplexe geschaffen. Die Arbeitsblätter sind nach steigendem Schwierigkeitsgrad sortiert. In verschiedenen Abständen erfolgen Tests zur Selbstkontrolle des Lernfortschritts. Diese können ebenso als Leistungskontrolle eingesetzt werden. Beim vorliegenden Material handelt es sich um ein Schülerarbeitsheft, welches durch die Vorgabe der Quelltexte sowie von einfachen Erklärungstexten für die Tags und CSS3-Befehle den Schülern ein eigenständiges Arbeiten gestattet und so jedem Schüler sein individuelles Lerntempo ermöglicht. Dies gewährleistet Binnendifferenzierung ohne gesonderte Aufgabenstellung. Die Ergebnisse sind in einer Browseransicht als Erwartungsbild vergleichbar. Diese mehrjährigen praxiserprobten Kopiervorlagen können umgehend im Unterricht eingesetzt werden. Legende Fettgeschriebener Quellcode entspricht neueingeführten Elementen, Tags, Attributen, Dateinamen, welche in der Fußzeile zu finden sind, entsprechen bei en dem zu verwendenden Dateinamen der aktuellen. Bei Tests und Hilfen sind es die Dateinamen, unter welchen die Tests bzw. Hilfen als extra Dateien in den mitgelieferten Materialien zu finden sind. Leere Anführungszeichen ("") dienen als Platzhalter für Zahlen oder Text, wobei die Anführungszeichen den Inhalt weiterhin einschließen müssen. 2
4 Inhalt Kapitel 1 Hallo Welt HTML... 5 Kapitel 2 Test Erweiterte Welt Aufgabe... 6 Lösung... 7 HTML... 8 CSS... 9 Kapitel 3 Adresse HTML...10 CSS...11 Kapitel 4 Test Zusatz Schnecke Aufgabe...12 Lösung...13 Aufgabe...14 Hilfe Hilfe Hilfe Aufgabe...19 Lösung...20 Kapitel 5 Test Grundwissen Aufgabe...23 Lösung...25 Kapitel 6 Webseitenbereiche HTML...28 CSS...29 Kapitel 7 Grafik HTML...30 CSS
5 Inhalt Kapitel 8 Einfügen von mehreren Grafiken Schnecke mit Bild HTML...32 CSS...33 Test Aufgabe...35 Lösung...36 Kapitel 9 Verlinkung HTML...38 CSS...39 Kapitel 10 Verlinkung Maus HTML...41 CSS...42 Hilfe...43 Kapitel 11 Test Komplexe Aufgabe...44 Lösung
6 HTML5 - Hallo Welt Die Browseransicht zeigt die erste einfache. Lege in deinem HTML-Editor eine.html-datei an. Den zu verwendenden Dateinamen findest du in der Fußzeile. Zur Betrachtung benötigst du einen Browser. Hier wurde Firefox verwendet. Beachte! Lege zur besseren Übersicht einen Ordner mit dem Namen _01 an. Fett formatierte Wörter sind neu in einer und werden im Textfeld erklärt. Dies gilt auch für die nachfolgenden Arbeitsblätter. In HTML werden Befehle Tags genannt. Die meisten Tags besitzen einen öffnenden (bspw. <html>) und einen schließenden (bspw. </html>) Tag. Bei ihnen steht im End-Tag der / (slash) nach der öffnenden eckigen Klammer. Einige Tags kommen ohne End-Tag aus. Dort wird der slash nach dem Befehlswort und einem Leerzeichen bzw. vor die schließende eckige Klammer geschrieben (bspw. <br />). Hallo Welt! <!DOCTYPE html> <html> <head> <title>erster Schritt</title> </head> <body> Hallo Welt! </body> </html> Element, Attribute, Attributwerte und ihre Bedeutung <!Doctype html> zeigt die HTML-Version an, HTML5 <html></html> Wurzelelement des Dokuments <head></head> enthält die Kopfdaten des Elements <title></title> Dokumentenname <body></body> enthält den Inhalt des eigentlichen Dokumentes <! > HTML Kommentaranfang... HTML Kommentarende (wird nicht im Browser angezeigt) Dateiname: 01_ue_html5_grundgeruest.html 5
7 HTML5 - Erweiterte Welt Mit dieser wird es bereits schwieriger, denn für die Umsetzung dieser Aufgabe brauchst du eine Html- und eine CSS-Datei. Setze diese Aufgabe praktisch am Computer um. Beachte! Lege zur besseren Übersicht einen Ordner mit dem Namen _02 an. Nutze zum Erstellen der Quelldateien einen HTML-Editor, wie beispielsweise Notepad++. Zur Betrachtung benötigst du einen Browser. Hier wurde Firefox verwendet <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>zweiter Schritt</title> <link rel = "stylesheet" href = "02_ue_css3_grundgeruest_erweitert.css" type = "text/css" /> </head> <body> <span class = "fett">hallo</span> <span class = "rot">welt!</span> </body> </html> Element, Attribute, Attributwerte und ihre Bedeutung <meta charset = "UTF-8" /> <link /> rel = "stylesheet" href = "Dateiname.css" type = "text/css" <span></span> class Buchstabencodierung verknüpft das Dokument mit zusätzlichen Informationen (Gestaltungsvorlagen ->.css; Javascript ->.js); besitzt keinen schließenden Tag stellt eine logische Beziehung zur Gestaltungsvorlage her verweist auf den Dateipfad der Datei, die geladen werden soll gibt das Dateiformat an Container-Inline-Element, fließender Text; wird verwendet, um einzelne Wörter in einem Text zu formatieren jedes Element kann dieses Attribut enthalten; verweist auf eine bzw. mehrere (getrennt durch ein Leerzeichen) definierte Formatierungen in der.css-datei und wendet diese an; wird in der CSS-Datei mit einem Punkt (".") markiert; Klassen können im Dokument beliebig häufig verwendet werden Hallo Welt! Dateiname: 02_ue_html5_grundgeruest_erweitert.html 8
8 Hilfe - 2 Schnecke Nun wird das Dokument für die CSS-Datei vorbereitet. Fügt dafür zuerst die zwei div -Elemente ein. Sie werden durch das id-attribut eindeutig identifizierbar. Das Container-Blockelement div bewirkt gleichzeitig einen Zeilenumbruch zwischen der Überschrift und dem Autor. Innerhalb des Textes könnt ihr das Element span mit dem Klassen-Attribut verwenden <body> <div id = "ueberschrift"> Die Schnecke </div> <div id = "autor"> Paul Keller </div> <hr /> <br /> <p> Eine Schnecke, die an einem Bahndamm wohnte, ärgerte sich alle Tage über einen Schnellzug, der vorbeisauste und sie durch sein ungeschlachtes Benehmen in ihrem behaglichen Geschäft störte. </p> <p> <span class = "kursiv">"das will ich ihm austreiben"</span>, sagte die Schnecke zu sich selbst, stellte sich zwischen den Gleisen auf und streckte drohend die Fühler aus, als sie den Zug in der Ferne auftauchen sah. "Niederstoßen werd' ich ihn!", sagte sie voll grimmigen Mutes. </p> Betrachtet das Zwischenergebnis im Browser. Korrigiere auftretende Fehler. Da es noch keine.css-datei gibt, sieht der Quelltext im Browser weiterhin unformatiert aus. Die Schnecke Paul Keller Eine Schnecke, die an einem Bahndamm wohnte, ärgerte sich alle Tage über einen Schnellzug, der vorbeisauste und sie durch sein ungeschlachtes Benehmen in ihrem behaglichen Geschäft störte. "Das will ich ihm austreiben", sagte die Schnecke zu sich selbst, stellte sich zwischen den Gleisen auf und streckte drohend die Fühler aus, als sie den Zug in der Ferne auftauchen sah. "Niederstoßen werd' ich ihn!", sagte sie voll grimmigen Mutes. Dateinamen: 04_ue_html5_schnecke_hilfe2.pdf 16
9 05 - Test - Aufgabe - Grundwissen 3. Setze die richtigen Code-Bausteine in die CSS-Datei ein, damit die dargestellte Browseransicht stimmt. body { div {.Zeile1 {.Zeile2 {.Zeile3 { Erst überlegen - dann entscheiden! font-size: 3.5em; font-size: 0.4em; font-style: italic; font-weight: bold; text-decoration: underline; color: #0000ff; color: #00ff00; color: #ff0000; background-color: #ffffff; text-align: center; font-family: calibri; 4. Welche Erklärung passt zu welchem Tag. Ordne richtig zu. background-color <div></div> Schriftgröße font-size Container- Blockelement kursiv text-align Textausrichtung underline Hintergrundfarbe des Dokumentes unterstrichen italic 5. Wozu benötigt man in HTML 5 eine.css Datei? 6. Ordne die Schritte für das Erstellen einer Seite der Reihenfolge nach. Text schreiben und im Browser betrachten, HTML5-Grundgerüst erstellen, nun schrittweise Formatierungen vornehmen, Quelltextprogramm Notepad++ öffnen und HTML5-Datei speichern, Ordner anlegen, CSS-Datei anlegen und speichern, wiederholend im Browser mit der Taste F5 den Programmierfortschritt aktualisieren Dateiname: 05_t_html5_grundwissen.pdf 24
10 05 - Test - Lösungen - Grundgerüst 1. Finde die Fehler in diesem Quellcode. Erkläre, wie sie korrigiert werden müssen <!FILETYPE html><!doctype html> <html> <head> <meta charset = "UTF-8" /> <title>fehlertext<title></title> <link rel = "stylesheet" href = "css" type = "text/css" />Dateiname.css </head> </body>tag entfällt an dieser Stelle. <body> <html> Tag entfällt an dieser Stelle. <div id = "Aufgabe"> <p>finde die Fehler in diesem Quellcode. Erkläre, wie sie korrigiert werden müssen.<\p></p> <p>das ist ein Textbaustein.<div></p> </div> </html> Tag entfällt an dieser Stelle. </body> </html> 2. Welche Browseransicht gehört zum Quelltext? Begründe deine Entscheidung. Musterschule Musterweg Musterstadt ( ) HTML5-Quellcode Musterschule Musterweg Musterstadt ( ) Musterschule Musterweg Musterstadt ( ) X <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>anschrift</title> <link rel = "stylesheet" href = "Aufgabe_2.css" type = "text/css" /> </head> <body> <div> Musterschule Musterweg Musterstadt <hr /> ( ) ) </div> </body> </html> CSS-Quellcode body { background-color: #777777; div { color: #ffffff; font-family: calibri, arial, sans-serif; font-size: 1.8em; text-align: center; color: #ff0000; Dateiname: 05_l_html5_grundwissen.pdf 25
11 CSS3 - Grafik Das Layout für die HTML-Seite wird in der CSS-Datei festgelegt. Für unsere Grafik-Seite findest du den passenden Code hier. Setze diese Aufgabe praktisch am Computer um. Beachte! Diese Datei wird nur vom Browser verwendet, wenn sie im Ordner _07 abgespeichert wird body { background-color: #000000; color: #ffffff; font-family: calibri, arial, sans-serif; font-size: 1.8em; margin: 5%; padding: 0em; Kongo Rosenkäfer bei der Nahrungsaufnahme Element, Attribute, Attributwerte und ihre Bedeutung body{ font-family margin padding Grundformatierung für den Body Schriftarten, mit Komma werden alternative Schriftarten angeboten, sollte die erste Schriftart nicht angezeigt werden können Außenabstand, ist der erzwungene Abstand des Elements zum Eltern- bzw. Nachbarelement; ein Wert gilt für alle Seiten; bei zwei Werten gilt der erste Wert für oben und unten und der zweite Wert für rechts und links; bei drei Werten steht der Erste für oben, der Zweite für rechts und links und der Dritte für unten; bei vier Werten steht der Erste oben, der Zweite für rechts, der Dritte für unten und der Vierte für links Innenabstand, ist der erzwungene Abstand zwischen dem Inhalt des Elements und seinem eigenen Rand; Bedeutung der einzelnen Werte siehe margin Dateiname: 07_ue_css3_grafik.css 31
12 HTML5 - Verlinkung Maus Du hast gelernt, zwischen verschiedenen Seiten zu navigieren. Wende dein Wissen auf dieses Beispiel an. Nutze vorhandene Quelltexte aus Vorübungen. Erstelle die noch fehlenden HTML-Quelltexte für die Seiten 2 und 3. Nutze dafür die unten dargestellten Bilder. Arbeite so rationell wie möglich. Erarbeite dir anschließend schrittweise die passende CSS-Datei. Beachte! Für dieses Beispiel sollen drei Seiten dargestellt werden. Lege in deinem Verzeichnis einen Ordner _10 an. Im mitgelieferten Ordner _10 befinden sich die notwendigen Grafiken. Alle Grafiken sollen zentriert angeordnet werden. Übernimm den Quelltext für die erste Seite. Den Dateinamen für die CSS-Datei verrät dir der vorliegende Quelltext <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>verlinkung- Maus</title> <link rel = "stylesheet" href = "10_ue_css3_verlinkung_maus.css" type = "text/css" /> </head> <body> <section> <header> <h1>eine kleine neugierige Maus...</h1> </header> <p> <figure> <img src = "Maus1.jpg" alt = "" title = "" /> </figure> </p> <p> <nav> <a href = "10_ue_html5_verlinkung_maus_2.html">... verlässt ihr Haus!</a> </nav> </p> <footer> Wie könnte es weiter gehen? </footer> </section> </body> </html> Verlässt ihr Haus Eine kleine neugierige Maus Kommt wieder nach Haus schaut raus! huscht wieder rein! verlässt ihr Haus! Wie könnte es weiter gehen? schaut raus! Wo ist die Maus?! Wie könnte es weiter gehen? Wie könnte es weiter gehen? Dateinamen: 10_ue_html5_verlinkung_maus_1.html, 10_ue_html5_verlinkung_maus_2.html, 10_ue_html5_verlinkung_maus_3.html
13 11 - Test - Aufgabe - Komplexe Seite 3 Kontakte Reisebüro "Lange Ferien" Hauptseite Angebote Kontakt Lange Ferien Musterweg Musterstadt ( ) Diese Seite wurde von Max Mustermann am Musterdatum erstellt. Zu verwendende Dateinamen Seite 1 Hauptseite: 11_ue_html5_komplexe_uebung_1.html Seite 2 Angebote: 11_ue_html5_komplexe_uebung_2.html Seite 3 Kontakt: 11_ue_html5_komplexe_uebung_3.html CSS3: 11_ue_css3_komplexe_uebung.css Verwendete Farbtöne Body-Hintergrundfarbe: #ffc Schriftfarbe: #000 Fußteil-Hintergrundfarbe: #eee Grafik-Rahmenfarbe: #000 Link-Farbe: #630 Link-überfahren: #bbb rot: # blau: #0000ff dunkelblau: # orange: #ffa500 Grafikgrößen Gleitflug: width = "25%" height = "25%" Azoren: width = "25%" height = "25%" Ozean: 100% Sonnenuntergang: 100% Rundblick: 100% Verwendete Links Seite 1: Wörter: Angebote und Kontakt-Seite Seite 2: Wörter: 2x Kontakt-Seite Bei allen Seiten sind die Wörter Hauptseite, Angebote und Kontakt Links Dateinamen: 11_t_html5_komplexe_uebung_1.pdf, 11_t_html5_komplexe_uebung_2.pdf, 11_t_html5_komplexe_uebung_3.pdf 45
14 Unterrichtsmaterialien in digitaler und in gedruckter Form Auszug aus: HTML5 und CSS3 - Unterrichtsreihe zur Gestaltung von Internetseiten Das komplette Material finden Sie hier: School-Scout.de
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...
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
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
Ü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:
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
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
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:
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
HTML. HyperText Markup Language. von Nico Merzbach
HTML HyperText Markup Language von Nico Merzbach Kapitel 1 Was ist HTML? Was ist HTML? Einführung: HTML ist eine (Hypertext-)Auszeichnungssprache. Mit Hilfe von HTML strukturiert man Inhalte wie Text,
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:
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
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.
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
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,
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.
Probeklausur. Grundlagen der Medieninformatik. Wintersemester 2018/19
Wintersemester 2018/19 Hinweise: Die Bearbeitungszeit beträgt 80 Minuten. 1 Punkt entspricht ungefähr einer Minute. Hilfsmittel sind keine erlaubt außer einem nicht programmierbarem Taschenrechner. Verwenden
<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
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
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
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.
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,
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 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
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
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
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
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
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...
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........................
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr HTML Definition ˆ HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache (engl. markup language) zur Strukturierung digitaler Dokumente
Ü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
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
Ü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
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
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
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
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:
HTML5. Wie funktioniert HTML5? Tags: Attribute:
HTML5 HTML bedeutet Hypertext Markup Language und liegt aktuell in der fünften Fassung, also HTML5 vor. HTML5 ist eine Auszeichnungssprache mit der Webseiten geschrieben werden. In HTML5 wird festgelegt,
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
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
Information und ihre Darstellung: XHTML & CSS
Information und ihre Darstellung: XHTML & CSS PL Speyer Daniel Jonietz 2011 XHTML Extensible Hypertext Markup Language Unter besonderer Berücksichtigung von XHTML 1.1. Was ist XHTML? Textbasierte Auszeichnungssprache
HTLM und CSS. Eine erste Einführung. Karlheinz Zeiner. Inhalt
HTLM und CSS Eine erste Einführung Karlheinz Zeiner Inhalt 1 Vorbereitung 1 1.1 HTML und CSS 1 1.2 Werkzeuge 1 1.3 Quellen 1 2 Erstes HTML-Dokument erstellen 2 2.1 Website, Webpage 2 2.2 Struktur einer
HTML. Hypertext Markup Language
HTML Hypertext Markup Language Begriff Markup Begriff aus Druckindustrie: Layouter fügt Anmerkungen/Markierungen (Tags) hinzu Markup-Languge (ML) = Auszeichnungssprache Beispiele a) das Wort wird fett
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
HTML GUI 1 index.html 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
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
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 ,
1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner.
Kapitel 1 Grundlagen von Phase 5 Seite 1 1 Grundlagen von Phase 5 Installiere das Programm Phase 5 auf dem Rechner. 1.1 Projekt anlegen Bevor du das Programm Phase 5 startest, musst du einen Ordner anlegen,
Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger
Grundlagen zu HTML Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger Folie: 1 Gliederung Folie: 2 Was ist HTML Die Sprache HTML Aufbau von HTML-Tags Das HTML-Grundgerüst Hintergrundformatierungen
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
Ü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
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
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
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
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
Übung: Überschriften per CSS gestalten
Übung: Überschriften per CSS gestalten Teil 1: Umsetzung eines Layouts mit zwei Überschriften mit zwei verschiedenen Hierarchieebenen, ergänzt durch einen beschreibenden Textabsatz. Teil 2: Wie Teil 1,
HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5
Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem
Seminar DWMX DW Session 002
Seminar DWMX 2004 DW Session 002 Mit Dreamweaver starten (1) Coder oder Designer eine Frage der Einstellung Bearbeiten/Voreinstellungen Kategorie Allgemein Arbeitsbereich ändern Bedienfelder und Bedienfeldgruppen
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
HTML - Grundbegriffe. Informatik 1 für Nebenfachstudierende Grundmodul. Kai-Steffen Hielscher Folienversion: 23. November 2016
Informatik 1 für Nebenfachstudierende Grundmodul HTML - Grundbegriffe Kai-Steffen Hielscher Folienversion: 23. November 2016 Informatik 7 Rechnernetze und Kommunikationssysteme Inhaltsübersicht Kapitel
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
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.
HTML5 & SCC3. PC-Treff-BB VHS Aidlingen. Lothar R. Krukowski. Ein Überblick
HTML5 & SCC3 Ein Überblick 13.10.201 Agenda Neue Strategie HTML5 CSS3 Besonderheiten Anwendungen Beispiele - ( how to start? ) Literatur Neue Strategie Letzte Version von HTML und CSS HTML5 Erstellen der
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
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
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
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
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
Schiller-Gymnasium Hof 20.12.2004
Erstellen eines HTML-Dokumentes Zum Erstellen einer Homepage benötigen wir lediglich einen Editor. Zum Ansehen der fertigen Site benötigen wir wir natürlich auch einen Browser, z.b. Firefox oder Netscape
Clubsite4Fun Administration:
Clubsite4Fun Administration: Farben und Schriftarten ändern Unser Fansite-Projekt macht Fortschritte: die Site präsentiert sich bereits mit neuer Kopfzeilengraphik und einem eigenen Logo. Irgendwie passt
Was ist CSS? Info: https://css-tricks.com/
Was ist CSS? Info: https://css-tricks.com/ www.w3schools.com www.css4you.de Eberhart 1.css.einstieg.docx 1 CSS: Ist eine vom W3C deklarierte Sprache zur Ausgabeformatierung von strukturierten Dokumenten
Erstellung eines Webshops für Hak-T-Shirts und Hak-Pullis
Erstellung eines Webshops für Hak-T-Shirts und Hak-Pullis Version: Bootstrap 4, jquery-plugins Inhalt: 0)Brainstorming 1)index.html mit nav, brand und fixed-top 2)carousel 3)cards (card decks) gleiche
1. Briefing zur Übung IT-Systeme
1. Briefing zur Übung IT-Systeme - Einführung in HTML, CSS und JavaScript Einführung, 17.10.2016, HS 4 17. Oktober 2017 Stand und Ausblick Einführung: 17.10.2017, 12.00 Uhr (c.t.), HS 4 Fragestunde: 06.11.2017,
Informationsverarbeitung: Anleitung zu NVU Autor: Oberländer 2006
Webseiten Erstellung mit dem NVU Composer Das Boxenmodell Inhalt Das Boxen Modell... 2 Einleitung... 2 Vorgehen... 3 Planung... 3 Die Außenbox... 4 Änderung der Anweisungen in ... 6 Die weiteren
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
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
Übung zur Vorlesung Digitale Medien. Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013
Übung zur Vorlesung Digitale Medien Sarah Tausch Alice Thudt Ludwig-Maximilians-Universität München Wintersemester 2012/2013 1 Pfadangaben (1) Pfadangaben sind relevant für Bilder, Verweise, Medienobjekte
index.html schwerpunkt HTML und Informationssysteme 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
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-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
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
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
Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik. Hypertext Markup Language
Die Bilder in diesen Folien sind urheberrechtlich geschützt. Medientechnik Hypertext Markup Language About Daniel Mies Computervisualisitik, Diplom E-Mail: ugotit@uni-koblenz.de Folien & more: http://uni.ugotit.de
Ü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:
HTML Tutorial Part I - Einführung und erste Texte schreiben
HTML Tutorial Part I - Einführung und erste Texte schreiben Hallo und Herzlich Willkommen auf meiner Seite. Hier dreht sich alles um das Thema HTLML Programmierung. Das ganze beginnt bei den einfachsten
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-,
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets Rechenzentrum Universität Stuttgart Maria Vass 26. April 2005 Gliederung: CSS Grundlagen CSS praktisch einsetzen CSS in HTML einbinden Schriften / Texte formatieren Listen,
33 CSS in HTML einbinden
D3kjd3Di38lk323nnm 256 33 CSS in HTML einbinden Damit CSS auf HTML wirken kann, muss eine Verknüpfung hergestellt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung, die in diesem Kapitel beschrieben
HTML Programmierung. Aufgaben
HTML Programmierung Dr. Leander Brandl BRG Keplerstraße - A-8020 Graz Universität Graz - Institut für Experimentalphysik Fachdidaktik der Physik http://w4.brgkepler.asn-graz.ac.at 1. Die erste Web-Seite
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
Übung: Projekt Europa mit Bootstrap
Übung: Projekt Europa mit Bootstrap Erstelle eine Datei index.html und befülle diese mit dem vorgegebenen Basic Template von der Website www.getbootstrap.com (oder www.holdirbootstrap.de) durch Kopieren
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
12. Jgst. 3. Kursarbeit Datum: Fach: Informationsverarbeitung (Leistungskurs) & )!!*+,!- -.!-
12. Jgst. 3. Kursarbeit Datum: 26.03.2007 Klasse: GY 05 c Fach: Informationsverarbeitung (Leistungskurs) Themen: XHTML; CSS Name: Bitte speichern Sie Ihre Ergebnisse regelmäßig. Punkte:!" # Note: 8 $ %!&'(