SlideShare ist ein Scribd-Unternehmen logo
Universität zu Köln 
Historisch-Kulturwissenschaftliche Informationsverarbeitung 
IT-Zertifikat der Phil.-Fak.: Advanced Web Basics 
Jan G. Wieners, MA - jan.wieners@uni-koeln.de 
1 / 2 
Grundaufbau eines HTML-Dokumentes <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Name des HTML-Dokumentes</title> </head> <body> </body> </html> 
Nicht vergessen: Geöffnete Tags IMMER schließen (Ausnahme: <meta> im Kopf des HTML-Dokumentes)! 
Referenzierungsarten 
Wenn wir Inhalte einbinden / referenzieren, ist’s wichtig, zwischen relativer und absoluter Referenzierung zu unterscheiden: 
Absolute Referenzierung: Vollständige Pfadangabe 
 Beispiel: <img alt="Luise Adelgunde" src="http://gutenberg.spiegel.de/gutenb/autoren/bilder/gottschl.jpg" /> 
Relative Referenzierung: Hier gehen wir davon aus, dass sich die einzubindende Ressource in der Nähe unserer HTML- Datei befindet. 
 Beispiel: <img alt="Murakami " src="img/murakami.jpg" /> 
Hyperlinks 
Hyperlink auf eine Webressource über einen URL (Uniform Resource Locator): 
 Syntax: <a href="Adresse (URL)">Text, über den auf die Adresse verlinkt wird</a> 
 Beispiel: <a href="http://www.hki.uni-koeln.de">HKI-Homepage</a> 
Hyperlink auf eine lokale Ressource: 
 Beispiel: <a href="einDokument.pdf">Verweis auf ein PDF-Dokument</a> 
Anker 
Mit dem <a> Tag lassen sich Seitenbereiche ansteuern: 
<a href="#seitenbereich">Hier klicken, um zum verlinkten Seitenbereich zu gelangen</a> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<div id="seitenbereich">Ich befinde mich am untersten Seitenrand</div>
Universität zu Köln 
Historisch-Kulturwissenschaftliche Informationsverarbeitung 
IT-Zertifikat der Phil.-Fak.: Advanced Web Basics 
Jan G. Wieners, MA - jan.wieners@uni-koeln.de 
2 / 2 
Metainformationen 
<meta> stellt zusätzliche Informationen über ein HTML-Dokument bereit. Das <meta>-Tag wird im Header des Dokumentes untergebracht und verfügt über kein schließendes Tag. Innerhalb des Tags repräsentieren Attribute und ihre Werte Informationen über das HTML-Dokument – sinnvoll z.B., um die Indizierung durch Suchmaschinen zu beeinflussen. 
<meta name="description" content="Beschreibung des HTML-Dokumentes"> <meta name="keywords" content="HTML, CSS, PHP, MySQL, JavaSript"> <meta name="author" content="Jan Wieners"> 
Vgl. http://de.selfhtml.org/html/kopfdaten/meta.htm 
Cascading Style Sheets (CSS) 
Stylesheets (Formatvorlagen) dienen der einheitlichen und praktikablen Gestaltung von HTML-Seiten. Mit Hilfe von Stylesheets lassen sich Schriftarten, Farben, Hintergründe, […], global für ein HTML-Dokument oder eine Sammlung von HTML-Dokumenten definieren. Um Formatvorlagen zu definieren, bieten sich drei Möglichkeiten an: Inline-Styles, Stylesheets im Dokumentkopf und externe Stylesheets in einer separaten .css Datei. 
Inline-Styles 
Die einfachste Möglichkeit, die Darstellung eines Tags zu beeinflussen: Das style-Attribut wird in das Tag eingefügt: <h1 style="font-family: Arial; color: blue;">Diese Überschrift wird in der Schriftart Arial und blau dargestellt</h1> 
Stylesheetdefinition im HTML-Dokument 
Die im Dokumentkopf definierten Stile haben Auswirkung auf Darstellung und Verhalten aller Tags des HTML- Dokumentes. 
<style type="text/css"> h1 { color: red; font-family: Arial; } h1:hover { color: blue; } </style> <h1>Diese Überschrift wird in der Schriftart Arial und rot dargestellt</h1> 
Externe Stylesheets (eigene CSS-Datei) 
Formatvorlagen können (SOLLTEN) in einer separaten Dokumentdatei (Textdatei) abgelegt und von einem oder mehreren HTML-Dokumenten eingebunden werden. Die Syntax, um eine CSS-Datei einzubinden: 
<html><head><title>Beispiel: Externe CSS Datei</title> 
<link rel="stylesheet" type="text/css" media="all" href="style.css" /> 
</head> […]

Weitere ähnliche Inhalte

Ähnlich wie IT-Zertifikat: Advanced Web Basics - Handout HTML II

Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenAndreas Kalt
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
Michael Jendryschik
 
Html Und Css
Html Und CssHtml Und Css
Html Und Cssborya
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
Hans Mittendorfer
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Xhtml und Websitegestaltung
Xhtml und WebsitegestaltungXhtml und Websitegestaltung
Xhtml und Websitegestaltungcontrastmedia
 
Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11
Noël Bossart
 
Fachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNWFachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNW
k-webs GmbH - Internet Consulting
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
XHTML & CSS Workshop
XHTML & CSS WorkshopXHTML & CSS Workshop
XHTML & CSS Workshop
holgerrueprich
 
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
frankstaude
 
Semantic Web in Bibliotheken mal praktisch
Semantic Web in Bibliotheken mal praktischSemantic Web in Bibliotheken mal praktisch
Semantic Web in Bibliotheken mal praktischkostaedt
 
BODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang Both
BODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang BothBODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang Both
BODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang BothBerlinOpenDataDay
 
Microformats & COinS
Microformats & COinSMicroformats & COinS
Microformats & COinS
Christian Hauschke
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
Hans Mittendorfer
 
CMS Kurs-Glossar
CMS Kurs-GlossarCMS Kurs-Glossar
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Oliver Hader
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
Claus Brell
 

Ähnlich wie IT-Zertifikat: Advanced Web Basics - Handout HTML II (20)

Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
html grundlagen
html grundlagenhtml grundlagen
html grundlagen
 
Websemantik: Die nächsten Schritte
Websemantik: Die nächsten SchritteWebsemantik: Die nächsten Schritte
Websemantik: Die nächsten Schritte
 
Html Und Css
Html Und CssHtml Und Css
Html Und Css
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
IT-Zertifikat: Advanced Markup & Metadata - Handout XML
IT-Zertifikat: Advanced Markup & Metadata - Handout XMLIT-Zertifikat: Advanced Markup & Metadata - Handout XML
IT-Zertifikat: Advanced Markup & Metadata - Handout XML
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Xhtml und Websitegestaltung
Xhtml und WebsitegestaltungXhtml und Websitegestaltung
Xhtml und Websitegestaltung
 
Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11
 
Fachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNWFachkurs Online Content Management, FHNW
Fachkurs Online Content Management, FHNW
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
XHTML & CSS Workshop
XHTML & CSS WorkshopXHTML & CSS Workshop
XHTML & CSS Workshop
 
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
Ein PHP-Wrapper für die Internet-Suchmaschine ht://Dig oder: „Google selbstg...
 
Semantic Web in Bibliotheken mal praktisch
Semantic Web in Bibliotheken mal praktischSemantic Web in Bibliotheken mal praktisch
Semantic Web in Bibliotheken mal praktisch
 
BODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang Both
BODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang BothBODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang Both
BODDy 2014: Ergebnisse Projektgruppe Open Data - Wolfgang Both
 
Microformats & COinS
Microformats & COinSMicroformats & COinS
Microformats & COinS
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
 
CMS Kurs-Glossar
CMS Kurs-GlossarCMS Kurs-Glossar
CMS Kurs-Glossar
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
 

Mehr von Institute for Digital Humanities, University of Cologne

Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Institute for Digital Humanities, University of Cologne
 
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Institute for Digital Humanities, University of Cologne
 
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Institute for Digital Humanities, University of Cologne
 
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Institute for Digital Humanities, University of Cologne
 
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-13_ki-in-games
Bit sosem 2016-wieners-sitzung-13_ki-in-gamesBit sosem 2016-wieners-sitzung-13_ki-in-games
Bit sosem 2016-wieners-sitzung-13_ki-in-games
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-visionBit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-11_bild-iii-filter
Bit sosem 2016-wieners-sitzung-11_bild-iii-filterBit sosem 2016-wieners-sitzung-11_bild-iii-filter
Bit sosem 2016-wieners-sitzung-11_bild-iii-filter
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationenBit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-09_bild-i-kompression
Bit sosem 2016-wieners-sitzung-09_bild-i-kompressionBit sosem 2016-wieners-sitzung-09_bild-i-kompression
Bit sosem 2016-wieners-sitzung-09_bild-i-kompression
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-08_semantic-web
Bit sosem 2016-wieners-sitzung-08_semantic-webBit sosem 2016-wieners-sitzung-08_semantic-web
Bit sosem 2016-wieners-sitzung-08_semantic-web
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-iiBit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikationBit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conwayBit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-04_theoretische-informatik
Bit sosem 2016-wieners-sitzung-04_theoretische-informatikBit sosem 2016-wieners-sitzung-04_theoretische-informatik
Bit sosem 2016-wieners-sitzung-04_theoretische-informatik
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-03_algorithmen
Bit sosem 2016-wieners-sitzung-03_algorithmenBit sosem 2016-wieners-sitzung-03_algorithmen
Bit sosem 2016-wieners-sitzung-03_algorithmen
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-02_datenstrukturen
Bit sosem 2016-wieners-sitzung-02_datenstrukturenBit sosem 2016-wieners-sitzung-02_datenstrukturen
Bit sosem 2016-wieners-sitzung-02_datenstrukturen
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-01_auffrischung
Bit sosem 2016-wieners-sitzung-01_auffrischungBit sosem 2016-wieners-sitzung-01_auffrischung
Bit sosem 2016-wieners-sitzung-01_auffrischung
Institute for Digital Humanities, University of Cologne
 
Bit sosem 2016-wieners-sitzung-00_themenueberblick
Bit sosem 2016-wieners-sitzung-00_themenueberblickBit sosem 2016-wieners-sitzung-00_themenueberblick
Bit sosem 2016-wieners-sitzung-00_themenueberblick
Institute for Digital Humanities, University of Cologne
 
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung IIBit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Institute for Digital Humanities, University of Cologne
 

Mehr von Institute for Digital Humanities, University of Cologne (20)

Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
 
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
 
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
 
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
 
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
 
Bit sosem 2016-wieners-sitzung-13_ki-in-games
Bit sosem 2016-wieners-sitzung-13_ki-in-gamesBit sosem 2016-wieners-sitzung-13_ki-in-games
Bit sosem 2016-wieners-sitzung-13_ki-in-games
 
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-visionBit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
 
Bit sosem 2016-wieners-sitzung-11_bild-iii-filter
Bit sosem 2016-wieners-sitzung-11_bild-iii-filterBit sosem 2016-wieners-sitzung-11_bild-iii-filter
Bit sosem 2016-wieners-sitzung-11_bild-iii-filter
 
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationenBit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
 
Bit sosem 2016-wieners-sitzung-09_bild-i-kompression
Bit sosem 2016-wieners-sitzung-09_bild-i-kompressionBit sosem 2016-wieners-sitzung-09_bild-i-kompression
Bit sosem 2016-wieners-sitzung-09_bild-i-kompression
 
Bit sosem 2016-wieners-sitzung-08_semantic-web
Bit sosem 2016-wieners-sitzung-08_semantic-webBit sosem 2016-wieners-sitzung-08_semantic-web
Bit sosem 2016-wieners-sitzung-08_semantic-web
 
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-iiBit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
 
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikationBit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikation
 
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conwayBit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
 
Bit sosem 2016-wieners-sitzung-04_theoretische-informatik
Bit sosem 2016-wieners-sitzung-04_theoretische-informatikBit sosem 2016-wieners-sitzung-04_theoretische-informatik
Bit sosem 2016-wieners-sitzung-04_theoretische-informatik
 
Bit sosem 2016-wieners-sitzung-03_algorithmen
Bit sosem 2016-wieners-sitzung-03_algorithmenBit sosem 2016-wieners-sitzung-03_algorithmen
Bit sosem 2016-wieners-sitzung-03_algorithmen
 
Bit sosem 2016-wieners-sitzung-02_datenstrukturen
Bit sosem 2016-wieners-sitzung-02_datenstrukturenBit sosem 2016-wieners-sitzung-02_datenstrukturen
Bit sosem 2016-wieners-sitzung-02_datenstrukturen
 
Bit sosem 2016-wieners-sitzung-01_auffrischung
Bit sosem 2016-wieners-sitzung-01_auffrischungBit sosem 2016-wieners-sitzung-01_auffrischung
Bit sosem 2016-wieners-sitzung-01_auffrischung
 
Bit sosem 2016-wieners-sitzung-00_themenueberblick
Bit sosem 2016-wieners-sitzung-00_themenueberblickBit sosem 2016-wieners-sitzung-00_themenueberblick
Bit sosem 2016-wieners-sitzung-00_themenueberblick
 
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung IIBit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung II
 

IT-Zertifikat: Advanced Web Basics - Handout HTML II

  • 1. Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung IT-Zertifikat der Phil.-Fak.: Advanced Web Basics Jan G. Wieners, MA - jan.wieners@uni-koeln.de 1 / 2 Grundaufbau eines HTML-Dokumentes <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Name des HTML-Dokumentes</title> </head> <body> </body> </html> Nicht vergessen: Geöffnete Tags IMMER schließen (Ausnahme: <meta> im Kopf des HTML-Dokumentes)! Referenzierungsarten Wenn wir Inhalte einbinden / referenzieren, ist’s wichtig, zwischen relativer und absoluter Referenzierung zu unterscheiden: Absolute Referenzierung: Vollständige Pfadangabe  Beispiel: <img alt="Luise Adelgunde" src="http://gutenberg.spiegel.de/gutenb/autoren/bilder/gottschl.jpg" /> Relative Referenzierung: Hier gehen wir davon aus, dass sich die einzubindende Ressource in der Nähe unserer HTML- Datei befindet.  Beispiel: <img alt="Murakami " src="img/murakami.jpg" /> Hyperlinks Hyperlink auf eine Webressource über einen URL (Uniform Resource Locator):  Syntax: <a href="Adresse (URL)">Text, über den auf die Adresse verlinkt wird</a>  Beispiel: <a href="http://www.hki.uni-koeln.de">HKI-Homepage</a> Hyperlink auf eine lokale Ressource:  Beispiel: <a href="einDokument.pdf">Verweis auf ein PDF-Dokument</a> Anker Mit dem <a> Tag lassen sich Seitenbereiche ansteuern: <a href="#seitenbereich">Hier klicken, um zum verlinkten Seitenbereich zu gelangen</a> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="seitenbereich">Ich befinde mich am untersten Seitenrand</div>
  • 2. Universität zu Köln Historisch-Kulturwissenschaftliche Informationsverarbeitung IT-Zertifikat der Phil.-Fak.: Advanced Web Basics Jan G. Wieners, MA - jan.wieners@uni-koeln.de 2 / 2 Metainformationen <meta> stellt zusätzliche Informationen über ein HTML-Dokument bereit. Das <meta>-Tag wird im Header des Dokumentes untergebracht und verfügt über kein schließendes Tag. Innerhalb des Tags repräsentieren Attribute und ihre Werte Informationen über das HTML-Dokument – sinnvoll z.B., um die Indizierung durch Suchmaschinen zu beeinflussen. <meta name="description" content="Beschreibung des HTML-Dokumentes"> <meta name="keywords" content="HTML, CSS, PHP, MySQL, JavaSript"> <meta name="author" content="Jan Wieners"> Vgl. http://de.selfhtml.org/html/kopfdaten/meta.htm Cascading Style Sheets (CSS) Stylesheets (Formatvorlagen) dienen der einheitlichen und praktikablen Gestaltung von HTML-Seiten. Mit Hilfe von Stylesheets lassen sich Schriftarten, Farben, Hintergründe, […], global für ein HTML-Dokument oder eine Sammlung von HTML-Dokumenten definieren. Um Formatvorlagen zu definieren, bieten sich drei Möglichkeiten an: Inline-Styles, Stylesheets im Dokumentkopf und externe Stylesheets in einer separaten .css Datei. Inline-Styles Die einfachste Möglichkeit, die Darstellung eines Tags zu beeinflussen: Das style-Attribut wird in das Tag eingefügt: <h1 style="font-family: Arial; color: blue;">Diese Überschrift wird in der Schriftart Arial und blau dargestellt</h1> Stylesheetdefinition im HTML-Dokument Die im Dokumentkopf definierten Stile haben Auswirkung auf Darstellung und Verhalten aller Tags des HTML- Dokumentes. <style type="text/css"> h1 { color: red; font-family: Arial; } h1:hover { color: blue; } </style> <h1>Diese Überschrift wird in der Schriftart Arial und rot dargestellt</h1> Externe Stylesheets (eigene CSS-Datei) Formatvorlagen können (SOLLTEN) in einer separaten Dokumentdatei (Textdatei) abgelegt und von einem oder mehreren HTML-Dokumenten eingebunden werden. Die Syntax, um eine CSS-Datei einzubinden: <html><head><title>Beispiel: Externe CSS Datei</title> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> </head> […]