c2b_default

Wirtschaftsinformatik

HTML und CSS

HTML und CSS

11
5.0 (1)

Set of flashcards Details

Flashcards 11
Language Deutsch
Category Computer Science
Level University
Created / Updated 18.03.2020 / 03.02.2022
Weblink
https://card2brain.ch/box/20200318_wirtschaftsinformatik
Embed
<iframe src="https://card2brain.ch/box/20200318_wirtschaftsinformatik/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Study

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

Log in to view images.

Kann mit dem DOM-Baum veranschaulicht werden.

Document Object Model

Welche Sonderzeichen müssen speziell kodiert werden.

Log in to view images.

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

Log in to view images.

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

Log in to view images.

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

Study