Anzeige
Grundlage der Webseitengestaltung mit HTML & CSS

Grundlage der Webseitengestaltung mit HTML & CSS

Webseiten erstellen mit HTML & CSS
➤ HTML:


HTML steht für Hyper Text Markup Language. Mit dieser Sprache werden die Struktur und der Inhalt der Webseite festgelegt. Um die Webseite zu designen, benutzt man die Sprache CSS. Um wirklich Funktionen zu programmieren werden am Meisten JavaScript und PHP verwendet. Während JavaScript vom Browser ausgeführt wird, kümmert sich der Webserver um den PHP Code und ermöglicht so den Zugriff auf andere Dateien, wie z.B. eine Datenbank.
Den HTML-Code einer Website könnt ihr sehen, wenn ihr in eurem Webbrowser einen Rechtsklick macht und dann „Seitenquelltext anzeigen“ wählt. Um eine Webseite zu erstellen, braucht ihr lediglich einen Webbrowser und einen Texteditor. Um ein HTML-Dokument im Webbrowser richtig zu öffnen, müsst ihr das Dokument mit der Dateiendung .html versehen.
Ein HTML-Dokument besteht aus Tags, die den Typ vom Inhalt angeben oder andere Aufgaben übernehmen. Dabei gibt es immer einen Start-Tag und einen End-Tag. Zwischen diesen steht dann der Inhalt. So zum Beispiel bei dem Tag „h1“. Dieser ist für Überschriften da. Ein Tag besteht aus dem Namen, also etwa „h1“ und den Attributen. Diese werden z.B. benötigt um eine Bild einzublenden. Bei dem „img“-Tag wird das Attribut „src“ verwendet, um den Pfad zu dem Bild anzugeben.
Um mit dem Erstellen von Webseiten zu beginnen, braucht man erstmal so ein Grundgerüst. Am Anfang zeigt der „html“-Tag, der den Anfang des Dokuments zeigt. In dem Bereich „head“ stehen wichtige Informationen über sie Seite, Verweise auf Style- oder Codedokumente oder andere Sachen. Auf jeden Fall sollte der Titel, der Webseite, mit dem „title“-Tag, angeben werden. Nach dem „head“ kommt der „body“. Hier steht der Inhalt der Webseite.
Wenn ihr dieses Dokument fertig geschrieben habt, könnt ihr es als .html-Datei abspeichern und in den Browser ziehen. Nun sollte es geöffnet werden und so aussehen.
Mit den Befehlen „table“, „tr“ und „td“ kann man eine Tabelle bauen und mit „ol“ bzw. „ul“ eine Liste. In den Tag „header“, nicht mit „head“ zu verwechseln, schreibt man die Kopfzeile der Webseite, mit „nav“, der Navigation. Für den Hauptbereich benutzt man „main“, „section“ und „article“. Mit „aside“ kann man eine Seitenleiste einfügen und mit „footer“ eine Fußleiste. Um die Elemente richtig zu positionieren braucht man jedoch die Sprache CSS.
Wichtig für eine Webseite ist es außerdem, auf andere Seiten und Dokumente zu verlinken. Mit dem Tag „a“ kann man dies erledigen. Einfach in dem Attribut „href“ die Datei angeben und in dem Tag den Text angeben. Eine neue Zeile fängt man mit „br“ an und mit „p“ einen neuen Absatz.

➤ CSS:


CSS steht für Cascading Style Sheet. Es ist eine Sprache, die das Aussehen von HTML-Elementen angibt. Neben dem Design, welches sich für die Unterschiedlichen Bildschirmgrößen anpassen und individualisieren lässt, ist es auch möglich, einen Übergang zwischen zwei Designzuständen mit oder ohne Animationen zu erstellen.
Um die Sprache CSS zu verwenden benötigt man den „style“-Tag, den man normalerweise in den „head“ schreibt, oder man verknüpft eine externe Datei mit dem „link“-Tag.
Um die einzelne Elemente einer Webseite anzusprechen, benutzt man Class und ID. Diese Attribute werden im HTML-Dokument festgelegt und können dann im CSS-Dokument ein Design bekommen. Während man eine ID nur für ein Element benutzen kann, kann man eine Class mehrmals verwenden. Neben der ID und der Klasse kann man ein Element über den Typ, wie „h1“, ansprechen.
Um eine Element zu gestalten muss man es zunächst ansprechen. Bei einer ID schreibt man „#“ und dann den Namen, bei einer Klasse einen Punkt und den Name und wenn man einen Typ ansprechen will, dann nur den Namen. In den geschweiften Klammern schreibt man nun zunächst den Namen des Attributs und dann, nach einem Doppelpunkt, den Wert. Nach jeder Regel steht eine Semikolon.
Jedes Element erzeugt um sich herum einen Kasten, der eingestellt werden kann. Diese Technik ist als „Boxmodell“ bekannt. Den Abstand zwischen Rahmen und Inhalt kann man mit „padding“ definieren und mit „border“ den Rahmen selber. Außerhalb des Rahmens kann man mit „margin“ festlegen. Die Höhe gibt man mit „height“ und die Breite mit „width“ an. Als Einheit kann man „px“, also Pixel verwenden, oder man bezieht sich mit „em“ oder “%“ auf einen voreingestellten Wert. So ist 1.5em, bei einer Standard-Schriftgröße von 12pt, eine Schriftgröße von 18pt.
Schauen wir uns nun mal die wichtigsten Befehle in CSS an.
Mit „font-family“ kann man die Schriftart ändern und mit „font-size“ die Schrittgröße. Mit „text-align“ kann man die Ausrichtung ändern und den Text mit text-decoration z.B. unterstreichen.
Mit „color“ kann man die Schriftfarbe ändern und mit „background“ die Hintergrundfarbe.

➤ Meine Webseite
Autor
Tech-Essen
First release
Last update
Bewertung
0,00 Stern(e) 0 Bewertungen
Anzeige