c2b_default

Wirtschaftsinformatik

HTML und CSS

HTML und CSS

11
5.0 (1)
F. H.
Lernen
F. H.
Diese Lernkartei behandelt grundlegende Konzepte der Wirtschaftsinformatik auf Universitätsniveau, mit Fokus auf Webseitengestaltung. Sie erklärt HTML- und CSS-Strukturen, wie Tags, Attribute, Selektoren und Tabellen, sowie die Kodierung von Sonderzeichen und die Verwendung von DIV-Tags für flexible Ausrichtung. Die Karteikarten sind besonders nützlich für Studierende, die lernen möchten, wie man Webseiten strukturiert und gestaltet, indem sie die Grundgerüste und wichtigsten Tags von HTML verstehen und anwenden.
Karten
11
Lernende
0
Sprache
Deutsch
Kategorie
Informatik
Stufe
Universität
Erstellt / Aktualisiert
18.03.2020 / 03.02.2022
  • 1  / 11

Lernkarten

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

Melde dich an, um Bilder anzusehen.

Kann mit dem DOM-Baum veranschaulicht werden.

Document Object Model

Welche Sonderzeichen müssen speziell kodiert werden.

Melde dich an, um Bilder anzusehen.

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.

< = &lt;
> = &gt;

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

Melde dich an, um Bilder anzusehen.

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

Melde dich an, um Bilder anzusehen.

  • Universalselektor: *
  • Typselektor: element  (h1)
  • Klassenselektoren: .class 
  • ID-Selektoren: #beispiel

Lernen