Webdesign-Multimedia HTML und CSS
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Webdesign-Multimedia
HTML und CSS
Thomas Mohr
HTML
Definition
HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache
(engl. markup language) zur Strukturierung digitaler Dokumente wie Texte mit
Hyperlinks, Bildern und anderen Inhalten.
HTML-Dokumente werden durch HTML-Tags beschrieben.
– Die meisten Tags müssen in HTML wieder geschlossen werden.
Inhalt
– Es gibt jedoch Ausnahmen bei Tags ohne Inhalt. Einige Beispiele:
*
Verknüpfung zu CSS- oder Javascript-Dateien
*
Metadaten des HTML-Dokuments
*
Zeilenumbruch
1Struktur
Jedes HTML-Dokument braucht eine passende Struktur, damit euer Browser den Inhalt
korrekt darstellen kann. Die Struktur besteht aus den folgenden Elementen:
DOCTYPE
An dieser Stelle muss ich meine Aussage aus der Vorlesung korrigieren, dass HTML5-
Dokumente dieses Element nicht mehr benötigen. An sich werden HTML5-Dokumente
ohne dieses Element durchaus angezeigt, jedoch kann es zu Fehler beim Darstel-
len der Inhalte kommen. Deshalb empfehle ich euch, dass ihr dieses Element am
Anfang des Dokuments einfügt.
Beschreibt das HTML-Dokument.
Beinhaltet Informationen über das HTML-Dokument, wie z.B. den Titel oder den
Zeichensatz.
Beschreibt den sichtbaren Inhalt des HTML-Dokuments.
Jedes euer HTML-Dokumente sollte demnach die folgende Grundstruktur beinhalten,
damit euer Browser den Inhalt korrekt darstellen kann:
< ! DOCTYPE html >
< html >
< head >
< meta charset= " utf-8 " >
< title > Seitentitel < / title >
< / head >
< b ody >
< ! -- Inhalt -- >
< / b ody >
< / html >
2Elemente
Überschriften
Es gibt sechs verschiedene Überschriften, die in der Größe absteigend dargestellt werden:
< h1 > Ü berschrift 1 < / h1 >
< h2 > Ü berschrift 2 < / h2 >
< h3 > Ü berschrift 3 < / h3 >
< h4 > Ü berschrift 4 < / h4 >
< h5 > Ü berschrift 5 < / h5 >
< h6 > Ü berschrift 6 < / h6 >
Textabschnitte
Textabschnitte (engl. paragraphs) ermöglichen es gewisse Teile eures Textes in einen
Abschnitt zusammenzufassen.
< p > Dies ist ein Textabschnitt. < / p >
< p > Dies ist ein weiterer Textabschnitt. < / p >
Listen
Listen können entweder sortiert () oder unsortiert () sein und jeweils wieder
Unterlisten beinhalten. Listen können beliebig viele Listenelemente () enthalten.
< ol >
< li > Das erste Element einer sortieren Liste < / li >
< li > Das zweite Element einer sortieren Liste < / li >
< li > Das dritte Element einer sortieren Liste < / li >
< / ol >
< li > Das erste Element einer unsortieren Liste < / li >
< li > Das zweite Element einer unsortieren Liste < / li >
< li > Das dritte Element einer unsortieren Liste < / li >
Links
Links ermöglichen euch Über Texte oder Bilder auf eine andere HTML-Seite weiterge-
leitet zu werden.
< a href= " http: // www.google.de " > Hier geht es zu Google < / a >
< a href= " picture_02.jpg " > < i mg src= " picture_01.jpg " > < / a >
3Bilder
Bilder ermöglichen euch Bilddateien auf eurem PC oder direkt aus dem Internet auf euer
HTML-Seite darstellen zu lassen.
Ich empfehle bei Bildern das Attribut ”alt” zu verwenden, dass die Beschreibung des
Bildes für die folgenden Anwendungsfälle liefert:
Das Bild konnte nicht geladen werden.
Der Nutzer ist sehbehindert.
Suchmaschinen
< i mg src= " image.jpg " alt= " Beschreibung " >
Div
Div-Elemente werden genutzt um bestimmte Inhalte eures HTML-Dokuments zu grup-
pieren. So wollt ihr bspw. in einem Blog jeden Artikel durch eine Überschrift, ein Bild
und einen passenden Text erweitern. Wenn ihr nun diese drei Elemente in ein Div-
Element packt, könnt ihr diesen Artikel wesentlich leichter positionieren und/oder op-
tisch verändern.
< div class= " article " >
< h1 > Neuer Blog-Artikel < / h1 >
< i mg src= " a r t i c l e 1 _ p i c t u r e 0 1 . j p g " >
Lorem ipsum dolor sit amet
< / div >
Weitere Elemente
Es gibt noch weitaus mehr HTML-Elemente, welche den Rahmen dieser kurzen Einführung
sprengen würden. Für weitere Informationen empfehle ich euch die folgenden Internetsei-
ten:
w3schools Element Referenz
selfthtml Übersicht
4CSS
Definition
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die bspw. den Inhalt
eines HTML-Dokuments verschieden darstellen kann.
Es gibt drei verschieden Möglichkeiten HTML-Elemente durch CSS optisch zu
verändern:
– Ihr könnt einzelnen Elementen direkt CSS-Style Optionen zuweisen.
< b ody style= " b a c k g r o u n d - c o l o r : b l u e " >
– Ihr könnt ein einzelnes HTML-Dokument durch CSS optisch verändern:
...
< head >
...
< s tyle >
body {
bac kgroun d-colo r: blue;
}
< / s tyle >
...
< / head >
...
– Ihr könnt mehrere HTML-Dokumente durch CSS-Dateien optisch verändern:
...
< head >
...
< li nk rel= " stylesheet " href= " main.css " >
...
< / head >
...
5Selektoren
Es gibt drei verschienden Arten von Selektoren:
Element-Selektor
p {
font-size: 10 px;
}
Element Selektoren verändern die Optik eines HTML-Elements. Dies ist hilfreich,
falls ihr alle Textabschnitte in eurem Dokument in der Größe von 10 Pixeln (oder
anderen Größeneinheiten) darstellen möchtet.
Klassen-Selektor
. blau {
color: blue;
}
Klassen-Selektoren sind hilfereich, wenn ihr mehreren Objekten eures HTML-
Dokuments die gleiche Optik verpassen möchtet.
HTML-Elemente könnt ihr wie folgt Klassen zuordnen:
< p class= " blau " > Blauer Text < / p >
ID-Selektor
# besondere Ü berschrift {
font-size: 300%;
text-decoration: underline;
}
ID-Selektoren sollten ihr nur dann verwenden, wenn ihr einem einzigen Element
eine bestimmte Optik verpassen möchtet.
< h1 id= " besondere Ü berschrift " > Ich bin ganz wichtig < / h1 >
6Zudem ist es möglich Selektoren zu verschachteln. So könnt ihr bspw. Listenelemen-
ten, die Teil einer ungeordneten Liste in einer ungeordneten Liste sind eine bestimmte
Optik verpassen. Somit werden alle anderen Listenelemente von diesem Selektor nicht
beeinflusst.
ul > ul > li {
color: red;
}
Auch CSS hat zahlreiche Attribute, die den Rahmen sprengen würden, deshalb verweise
ich auf die folgenden Seiten:
selfhtml CSS Übersicht
w3schools CSS Tutorial
7Sie können auch lesen
