Von Jörg Hambuch, Anna Neovesky und Aline Deicke
Die hier genannten Punkte werden in den oben verlinkten Folien um weitere Ausführungen und Beispiele ergänzt.
HTML = Hyper Text Markup Language
Source: Mozilla Developer Network
<p>Ein Text-Element</p>
<p>Ein <em>verschachteltes</em> Text-Element</p>
Eigenschaften eines HTML-ELements:
<p>
) und closing tag (</p>
) - Ausnahme: Selbstschließende Elemente wie <img>
[Ein Link](# "Demo-Link")
Eigenschaften von Attributen:
title
, id
, class
) und elementspezifische Attribute (z. B. href
)Block-level-Elemente beginnen eine neue Zeile und erstrecken sich über die Breite der kompletten Zeile, während Inline-Elemente keine neue Zeile starten und nur so viel Platz einnehmen wie nötig:
<p>Ein Block-level-Textelement mit einem <em>Inline-Auszeichnungselement</em>.</p>
<!DOCTYPE html>
<html>
<head>
<!-- this is a comment -->
<!-- metadata -->
<title>Sample page</title>
</head>
<body>
<!-- content -->
<h1>Sample page</h1>
<p>This is a [simple](demo.html) sample.</p>
</body>
</html>
<!DOCTYPE html>
: Sagt dem Browser, welche Version von HTML verwendet wird<html>
: Das Wurzelelement (root) eines HTML-Dokuments. Umschließt alle anderen Elemente<head>
: Enthält Metadaten und generelle Informationen über das Dokument, z. B. Autor, Titel und Charakterset, außerdem Verlinkungen zu externen Stylsheets und Skripten.<body>
: Enthält den Inhalt eines HTML-Dokuments, der auf der Webseite angezeigt wird.CSS = Cascading Style Sheets
Stylesheet-Sprache: gibt Anweisungen für die Darstellung eines Dokuments
Anwendbar auf alle Dokumente, die in Auszeichnungssprachen (markup languages) verfasst sind, z. B. HTML, XML, SVG, etc.
“Living standard” des W3C: CSS 2.1 empfohlen, CSS3 in Module aufgeteilt und im Prozess der Standardisierungs → Can I use ___?
Beschreibt Präsentation nicht nur auf dem Bildschirm, sondern auch in anderen Medien, z. B. Print, oder spezielle Regeln für verschiedene Geräte (Smartphone, Tablet, etc.)
Kaskade: Prioritätsgefälle und Vererbung von Eigenschaften
Dateiendung: .css
Source: Mozilla Developer Network
body {
font-family: "Arial", sans-serif;
font-size: 1.6em;
background-color: #eeeeee;
/* This is a comment */
}
<body>
-Elements erben die für <body>
deklarierten EigenschaftenBeispiel eines komplexen Selektors:
#mainnav ul li:first-child a, footer a {
text-decoration: none;
}
a
) innerhalb des ersten Listenelements (li:first-child
) einer ungeordneten Liste (ul
) in dem Element mit der Id “mainnav” (#mainnav
) und alle Links (a
) im Footer (footer
) der Seite sollen keine text-decoration haben.!important
)li a
ist spezifischer als a
)Drei Möglichkeiten:
style
<head>
über das <style>
-Element<link>
-Element im <head>
eingebunden wird<h1 style="font-weight: bold;">Beispiel</h1>
<head>
<style type="text/css">
h1 {
font-weight: bold;
}
</style>
</head>
<head>
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
→ emfohlene Lösung!
folgt
folgt