Webdesign
HTML und CSS

Jonathan Funk & Jonatan Beste

Html - Allgemeine Informationen



In HTML kommen drei Grundlegende Begriffe vor, Das Element, das Tag und das Attribut. Die Struktur von HTML ist hierarchisch aufgebaut. HTML besteht aus Elementen, die wiederum andere Elemente enthalten können. Jedes Element hat ein Anfang und ein Ende, diese werden durch Tags gekennzeichnet. Das Tag besteht aus dem Elementnamen in spitzen Klammern. Das Ende-Tag enthält zusätzlich zum Elementnamen einen Schrägstrich.

Die Anfangstags von Elementen können zusätzlich mit Attributen versehen werden.

HTML ist eine Beschreibungssprache. Das heißt, mit HTML wird der Inhalt einer Seite beschrieben bzw. strukturiert.
HTML beschreibt nicht, wie die Seite aussieht. HTML beschreibt lediglich, was der Inhalt ist.

Unterschieden wird zwischen Block- und Inlineelementen. Ein Blockelement erzeugt im Textfluss einen Absatz und kann Text, Inlineelemente oder andere Blockelemente enthalten. Inlineelemente erzeugen hingegen keine eigenen Absätze. Sie können Text oder weitere Inlineelemente enthalten.

Html - Grundgerüst

Das Element <!DOCTYPE html> bezeichnet das Dokument als HTML5-Dokument.
Start und Ende der Seite werden mit den <html> und </html> Tags begrenzt.
Das <head>-Element markiert den Seitenkopf und in ihm werden für Suchmaschinen relevante Informationen, CSS-Stylesheets und Java-Script-Dateien eingebunden. Auch der Titel-Tag (<title>) des Dokuments, welcher u.a. oben im Browser anzeigt wird, findet dort Platz.
Der eigentliche Seiteninhalt, also alles, was angezeigt werden soll, befindet sich zwischen dem <body>-Element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> <title></title>
</head>
<body>
</body>
</html>

Html - Container

Das <span>-Element wird zur Markierung von Bereichen genutzt. Es besitzt selbst keine besondere Bedeutung und zeigt bei der Verwendung keine visuellen Auswirkungen. Es dient dazu, gezielt bestimmte Bereiche mit CSS-Stylesheets zu formatieren. Das <span>-Element gehört zu den Inlineelementen.

Das <div>-Element definiert einen logischen Bereich einer Seite oder gruppiert mehrere Elemente zu einer Einheit. Mit ihm kann zum Beispiel die Zugehörigkeit einer Überschrift zu einer Aufzählung dargestellt werden. Das <div>-Element gehört zu den Blockelementen.

<div></div>

<span></span>

Html - Textstruktur

Um auf einer Seite Inhalte auszukommentieren, wird der Inhalt, der nicht dargestellt werden soll, zwischen diese Zeichenfolge gesetzt: <!--INHALT -->.
Die Elemente <h1> bis <h6> definieren die Überschriften und dienen dazu, Hierarchieverhältnisse des Inhalts abzubilden. <h1> ist die höchste, <h6> die niedrigste Ebene. <h>-Tags sind Blockelemente.
Um Texte in logische Abschnitte zu gliedern und Absätze zu erstellen, wird das <p>-Element genutzt. <p>-Elemente sind ebenfalls Blockelemente.
Der <br />-Tag dient dazu, einen Zeilenumbruch zu erzwingen.
Das <b>-Element wird genutzt, um einen Inhalt fett darzustellen. Es gehört zu den Inlineelementen.
Mit dem <img>-Element kann auf der Seite ein Bild dargestellt werden. Das src-Attribut gibt dabei an, wo das Bild gespeichert ist und die height- bzw. width-Attribute geben an, welche Größe das Bild haben soll.
Zusammen mit dem href-Attribut wird das <a>-Element dazu genutzt, um einen Inhalt zu verlinken. Innerhalb des <a>-Elements können auch andere HTML-Tags untergebracht werden, um wie beim untersten Code-Beispiel ein Bild mit einem Link zu versehen.
<!--Das hier ist ein Titel-->
<h1></h1>
<p></p>
<br />
<b></b>
<img src="smiley.gif" height="42" width="42">
<a href="file:///D:/WWW/Funkeste%20Arbeit/index.html">Besuche unsere HTML-Seite!</a>
<a href="file:///D:/WWW/Funkeste%20Arbeit/index.html"><img src="smiley.gif"></a>

Html - Aufzählungen

In HTML wird zwischen zwei verschiedenen Listentypen unterschieden, der geordneten und der ungeordneten Liste. Für die die Erstellung einer ungeordneten Liste wird das <ul> Element zusammen mit dem <li> Element verwendet, um eine Aufzählungsliste zu erstellen. Die geordnete Liste wird mit dem <ol> Element und dem <li> Element erstellt.
Die Tags <ol> </ol> und <ul> </ul> begrenzen die Liste.
Einzelne Einträge werden dann mit den <li> </li> Tags begrenzt.
Die ungeordnete Liste listet Einträge lediglich auf, die geordnete Liste nummeriert diese zusätzlich.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

CSS - Allgemeine Informationen



Mit CSS (Cascading Style Sheets) werden das Aussehen der HTML-Elemente und damit das Design der gesamten Website definiert. Ein Vorteil von CSS ist, dass das Aussehen einer Website vom Inhalt getrennt werden kann.

CSS beschreibt nicht, was der Inhalt ist. CSS beschreibt, wie die Seite aussieht.

Auf einer HTML-Seite kann CSS entweder als externes Stylesheet, als eingebettetes Stylesheet oder als inline Style angewendet werden. Wir beschränken uns auf das externe Stylesheet.

Die CSS-Syntax besteht immer aus einem Selektor und der Angabe von Eigenschaften und deren Werten. Der Selektor bestimmt dabei, auf welche Elemente die Eigenschaften angewendet werden. Eigenschaften beschreiben dabei, welche Veränderung bei dem jeweils beschrieben Element vorgenommen werden soll. Da eine Darstellung aller Eigenschaften den Rahmen dieses Vortrags sprengen würde, beschränken wir uns auf einige der vielen Eigenschaften. Einer Eigenschaft kann zusätzlich noch ein Wert zugewiesen werden.

CSS - Externes Stylesheet

Externe Stylesheets werden in einer externen Datei gespeichert und im <head>-Element einer HTMl-Seite verlinkt.
--> Beispiel: <link rel="stylesheet" type="text/css" href="style.css">
Hier sehen wir ein Beispiel, wie CSS in einem externen Stylesheet angewendet wurde.
.page ist der Selektor, der die darunter stehenden Eigenschaften zugewiesen bekommt.
Neben den Eigenschaften wird der Wert dieser angezeigt (z.B. Eigenschaft: 'width:' , Wert: '100%;').
Der Is-Selektor #box weist dem mit der ID=box angegebenen Element im HTML-Code die eingetragenen Eigenschaften und Werte zu.

.page{ /* Dies ist ein Selektor */
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    float: left;
}
#box{ /* Dies ist ein Id-Selektor */
    min-width: 50%;
    margin: 100px 23% auto 23%;
    background-color: #f3f3f3; 
    padding: 1%;
}
Der HTML-Code unten zeigt, wie dann zum Beispiel der Selektor und der Id-Selektor angewendet werden können.
Ein Id-Selektor ist mit einem # gekennzeichnet und darf in jedem HTML-Dokument nur einmal vorkommen.

<div class="page">
<div id="box">
<article> Inhalt </article>
</div>
</div>
In CSS beginnt ein Kommentar immer mit /* und endet mit */. Auskommentierte Inhalte werden beim Lesen des Dokuments vom Browser nicht beachtet.

/* Kommentar */
				

Hier kannst du das Webseiten-Layout runterladen:

Download