Projektarbeit: Eigene Webseite


Grundbefehle von HTML und CSS:


Zu den Grundlagen von Webseiten gehört HTML, CSS und JavaScript. Jedoch sollte man beachten, dass JavaScript nur für fortgeschrittene User geeignet ist.

Hypertext Markup Language kurz HTML wird für den Inhalt und die Struktur von Webseiten genutzt. Was z.B. Überschriften, Absätze, Aufzählungen oder Tabellen sind. Deshalb ist HTML eine "Strukturierungssprache" und keine Programmiersprache. Ein HTML Befehlt hat immer (ausser ein paar Ausnahmen) ein Start- und Schlussbefehl. Sprich mit <Beispiel> startet man ein Befehl und mit </Beispiel> beendet man den Befehl.

HTML-Befehle
Bedeutung
Grundgerüst
<!DOCTYPE html> Definiert ein HTML-Dokument
<html></html> Bildet das Rahmengerüst eines HTML-Dokument
<head> </head> Definierter Bereich am Anfang eines Dokuments, in welchem insbesondere der Titel vorkommt.
<title> </title> Benennt einen Titel und muss im Head genannt werden.
<body> </body> Alles, was nicht in den Head kommt, gehört in den Body des Dokuments. Im Allgemeinen alles, was nicht der Titel ist.

Ein beispielhafter Aufbau eines HTML-Dokuments wäre also:


<!DOCTYPE>
<html>
<head>
<title>Dokumententitel</title></head>
<body>Inhalt des Dokuments</body>
</html>

HTML-Befehle
Bedeutung
<h1><h1> Hauptüberschrift
<h2> </h2> bis <h6> </h6> Zwischenüberschriften
<p> </p> Bildet einen Absatz.
<br> Erzwingt einen Zeilenumbruch.
<hr> Erzeugt eine Trennlinie.
<table> </table> Erzeugt eine Tabelle.
<li> </li> Erzeugt einen Aufzählungspunkt, wenn es in einem <ol> oder <ul> Tag drin ist.
Schriftbild
<b> </b> Schrift wird fett angezeigt.
<i> </i> Schrift wird kursiv angezeigt.
<u> </u> Schrift wird unterstrichen angezeigt.
<s> </s> Schrift wird durchgestrichen angezeigt.

CSS auch Cascading Style Sheets ist für die Darstellung von Inhalten entwickelt worden (z.B. für HTML Dokumente). CSS ist eine Gestaltungs- und Formatierungssprache. Sie gehört zu den Standards bei heutigem Webdesign und Layout. Ein CSS Befehl spricht immer ein oder mehrere Elemente an. Ein Element ist z.B. <h1>. Das Element, welches man ansprechen will, steht immer vor der Klammer.

Ein beispielhafter Aufbau eines CSS-Dokuments wäre also:

h1 {
Hier kommen die Befehle hin.
}

CSS-Befehle
Bedeutung
weitere mögliche Angaben
Schrift
font-family Schriftart Arial, Times New Roman, etc.
font-size Schriftgröße numerischer Wert in pt(Punkt) mm oder cm
color Schriftfarbe red, green, white usw. oder HTML Farbangabe
font-weight Schriftgewicht normal, bold, bolder, lighter
Textgestaltung
text-align Textausrichtung left, right, center, justify (Blocksatz)
line-height Zeilenabstand numerischer Wert in pt(Punkt) mm oder cm
text-decoration Textgestaltung underline, overline, line-through, blink
letter-spacing Zeichenabstand numerischer Wert in pt(Punkt) mm oder cm
Seitenränder
margin-left absoluter Abstand zum Seitenrand links numerischer Wert in pt(Punkt) mm oder cm
margin-right absoluter Abstand zum Seitenrand rechts numerischer Wert in pt(Punkt) mm oder cm
margin-bottom absoluter Abstand zum Seitenrand unten numerischer Wert in pt(Punkt) mm oder cm
margin-top absoluter Abstand zum Seitenrand oben numerischer Wert in pt(Punkt) mm oder cm
Links
A:link Link fast alle CSS-Befehle anwendbar
A:visited Besuchter Link fast alle CSS-Befehle anwendbar
A:active Angeklickter Link fast alle CSS-Befehle anwendbar
A:hover Link beim überfahren mit Maus fast alle CSS-Befehle anwendbar
Bilder
background Hintergrundfarbe red, green, white usw. oder HTML Farbangabe
background-image Hintergrundbild none, URL
Ränder
border-top-width Dicke der Rahmenlinie oben thin, medium, thick oder num. Wert
border-bottom-width Dicke der Rahmenlinie unten thin, medium, thick oder num. Wert
border-left-width Dicke der Rahmenlinie links thin, medium, thick oder num. Wert
border-right-width Dicke der Rahmenlinie rechts thin, medium, thick oder num. Wert
border-style Rahmentyp none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color Rahmenfarbe Farbname oder Hex.
padding-top Tabellenabstand oben Prozent oder num. Wert.
padding-bottom Tabellenabstand unten Prozent oder num. Wert.
padding-right Tabellenabstand rechts Prozent oder num. Wert.
padding-left Tabellenabstand links Prozent oder num. Wert.
width Rahmenbreite Auto, Prozent, num. Wert
height Rahmenhöhe Auto, Prozent, num. Wert


Quellen:
https://www.html-seminar.de/html-grundlagen.htm
https://www.heise.de/tipps-tricks/Uebersicht-der-wichtigsten-HTML-Befehle-3908928.htm
http://www.css-lernen.net/css-grundlagen.html