Wirtschaftsinformatik
HTML und CSS
HTML und CSS
Fichier Détails
| Cartes-fiches | 11 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Université |
| Crée / Actualisé | 18.03.2020 / 03.02.2022 |
| Lien de web |
https://card2brain.ch/box/20200318_wirtschaftsinformatik
|
| Intégrer |
<iframe src="https://card2brain.ch/box/20200318_wirtschaftsinformatik/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Wie sieht das Grundgerüst einer HTML Seite aus.
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>
Welche drei Sprachen sind für die Gestaltung einer Webseite nötig.
HTML (Hypertext Markup Language): Beschreibe der Seitenstruktur und der Inhalt
CSS: (Cascading Style Sheets): Layout und Design der HTML-Elemente
JavaScript: Das Verhalten der Webseite, gestalten von Interaktionen und Algorithmen
Wie sieht die Datenstruktur von HTML-Seiten aus
Kann mit dem DOM-Baum veranschaulicht werden.
Document Object Model
Welche Sonderzeichen müssen speziell kodiert werden.
Grundsätlich reicht es wenn man im <head> Teil den <meta> tag UTF-8 einfügt. Damit können alle Sonderzeichen erkannt werden. Jedoch muss das grösser und kleiner Zeichen speziell geschrieben werden, da sie beide fürden Syntax des HTML notwendig sind.
< = <
> = >
Wenn der Unicode UTF-8 nicht aktiviert ist, dann schreibt man die Sonderzeichen wie folgt:
Was sind die wichtigsten tags
<i>: kursiv
<b>: fett
<u>: unterstrichen
<h1>-<h6>: Überschrift in Grösse
<p>: Textabsatz
<span>: Text
<br>: Zeilenumbruch -> Standalone-tags
<hr>: Trennlinie
tags und ihre Attribute
Attribut der Farbe: <p style="color:green;">
Grafiken: <img src="Verzeichnis/datei.gif" alt="Grafik"> (Standalone)
Links: <a href="(Verweis)" target="(Zelfenster festlegen)">, <a name="(Verweis innerhalb einer Seite)">
target: siehe Bild
Tabellen: <table border="Rahmengrösse" cellpadding="Absatnd zw. Zellenrand und Inhalt" cellspacing="Abstand der Zellen zu anderen Zellen">
Tabellen
<table>
<tr>Zeile</tr>
<th>Kopfzelle</th>
<td>Datenzelle</td>
</table>
Attribute:
colspan="Kolonen zusammennehmen"
rowspan="Reihen zusammennehmen"
align="Horizontale Ausrichtung"
valign="Vertikale Ausrichtung"
nowrap="ohne Zeilenumbruch"
DIV tag
Der DIV tag ist praktisch, weil diese tags mit Hilfe der CSS kodierung beliebig auf der Seite plaziert werden können.
Eigenschaften von CSS
Ergänzungssprache zu HTML
HTML-Elemente formatieren:
- Überschriften näher beschreiben
- Textabsätze, Tabellen, Listen layoutieren
- Akustische Wiedergabe
- Cursor-Steuerung
- Grafik-Effekte
Zentarle Formate definieren
- HTML-Dateien werden kleiner
- Änderungen für das ganze Projekt schnell umsetzbar
Wie ist eine CSS Kodierung aufgebaut
<style></style>
Selektor: Beschreibt wofür folgende Definitionen gelten
Definitionen: {} was angepasst wird (color, font-size, place)
Selektoren
- Universalselektor: *
- Typselektor: element (h1)
- Klassenselektoren: .class
- ID-Selektoren: #beispiel
