Tag 14 HTML & CSS
HTML ist eine Auszeichnungssprache (keine Programmiersprache)
- Alle HTML-Dokumente müssen mit einer Dokumenttyp-Deklaration beginnen:
<!DOCTYPE html> - Das HTML-Dokument selbst beginnt mit
<html>und endet mit</html> - Der sichtbare Teil des HTML-Dokuments liegt zwischen
<body>und</body> - Mit dem Titel definieren wir den Namen unserer Website:
<Title>Website</Title>
(dieser wird im Reiter des Tabs angezeigt) - Der Title wird im Head und über den Body geschrieben
- Die Headings werden in den Body geschrieben und können mit
<h1>Überschrift 1</h1>bis<h6>Überschrift 6</h6>definiert werden
- Die Headings dienen nicht nur als Überschriften, sondern sind auch für den Googlebot relevant, der die Website in den Google-Suchergebnissen anzeigt.
Aufbau
!DOCTYPE html>
<html>
<head>
<Title>Website</Title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<h2>My second Heading</h2>
<p>My second paragraph </p>
</body>
</html>
*Alle Tags findet ihr unter AllTheTags
*(mit <a href="https://allthetags.com">AllTheTags</a> könnt ihr Hyperlinks einfügen)
- Wir gehen auf File -> new Project, und wählen dort ein "empty Project"
- danach erstellen wir uns eine index.html-file
- über die Icons können wir in IntelliJ direkt unsere Seite aufrufen
- mit einem Rechtsklick untersuchen und rufen wir den Quellcode der Website auf
- Im Code oben links finden wir das Dev-Tool für die Endnutzergeräte
- hier können wir die Geräte auswählen und das Seitenverhältnis per Mausklick anpassen
- am besten keine align =center/rights/left dazuschreiben oder Farben auswählen
- all das machen wir mir CSS
- CSS erlaubt HTML zu designen und zu verändern
- CSS beschreibt das Design
- Auch CSS ist keine Programmiersprache
- Elemente können z.B. durch ihren Typ, Klassennamen, oder durch eine ID refrenziert werden.
- lemente können durch CSS beliebig verändert werden
<link rel="stylesheet" href="css/style.css" />
- wählen 1 oder mehrere Elemente aus und wenden darauf verschiedene Rules an.
- Selektoren können verknüpft werden um präzise Auswahl zu treffen.
p, div { /* Alle p und alle div Elemente */
border: 1px solid red;
}
div .box { /* Klasse box innerhalb eines divs */
width: 100px;
height: 100px;
}
p:nth-child(2) { /* Jedes 2. p Element */
background-color: #a0a0a0;
}
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
Jeder CSS-Selektor hat seinen Platz in der Spezifitätshierarchie.
- Inline styles - Example:
<h1 style="color: pink;"> - IDs - Example: #navbar
- Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
- Elements and pseudo-elements - Example: h1, ::before
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
- Standardisiertes Layout das alle Browser unterstützen.
- Simple Regeln um Boxen zu positionieren, unabhängig von Bildschirmgröße.
- Flexboxen sind inkompatibel zu anderen Positionierungsangaben.
- Passt sich dynamisch an Bildschirmgrößen an.
- Layout anhand eines fixen Gitternetzes
- Passt sich nur bedingt an die Bildschirmgröße an
- Gut für App-Layouts
