9x bewertet

HTML von Anfang an

von Isa_G  |  12.01.2009 um 13:27 h
Html Grundlagen
Typ: Html Grundlagen
Stufe:Einfach
Wichtig!:
In diesem Tutorial möchte ich versuchen totalen Anfängern, die von Hyper Text Markup Language (HTML) noch nie etwas gehört haben, die Sprache etwas näher zu bringen.Vorsicht: Das Tut ist seeehr lang!


1 Allgemein:
  • Zur Strukturierung von Texten und Einbindung von Grafiken
  • Schnittstellen für Erweiterungssprachen wie CSS, XML oderJavaScript
  • Mit Hilfe von SGML (Standard Generalized Markup Language) definiert
    --> als ISO-Norm 8879 festgeschrieben
  • HTML ist ein Klartextformat: Keine bestimmte Software nötig, da Bearbeitung mit beliebigen Texteditor


2 Aufgaben:
  • Wichtige Aufgaben: Verweise ("Hyperlinks") definieren
  • Typische Elemente als solche auszeichnen
  • Elemente haben fest definierbaren Erstreckungsraum
  • Z.B. Überschrift muss angefangen + beendet werden:
    [Überschrift] Text der Überschrift [Ende Überschrift]


3 Befehle:
  • Einrückung: ___ <blockquote>Text</blockquote>
  • Font-Style: ___ <i>Text</i> <em>Text</em> <b>Text</b>
  • Hyperlinks: ___ <a href="URL">Text</a>
  • Textfeld: ___ <div>Text</div>


3.1 Undefinierter Erstreckungsraum, da unnötig:
  • Zeilenumbruch: ___ <br>
  • Bildereinbau: ___ <img src="URL">
  • Bildergröße anpassen:___ <img src="URL" height="?" width="?">


3.2 Befehl-Kombination:
  • Thumbnail: <a href="URL"><img src="URL"></a>
  • " ohne Border:<a href="URL"><img src="URL" border="0"></a>


4 Gerüst:
So wird eine HTML-Datei aufgebaut:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN>
<html>
<head>
<title>TITLE</title>
</head>
<body>
<!-- INHALT -->
</body>
</html>

HTML besitzt einen Head- und einen Bodybereich!
  • Im Headbereich:Alle Definitionen und Anweisungen
  • Im Bodybereich: Alle Ausführungen


5 Cascading Style Sheets:
  • HTML kann nicht angeben wie Elemente aussehen sollen: Größe, Schriftart, Farbe etc.
    --> Aufgabe von Cascading Style Sheets (CSS)
  • Nahtlose Einklingung von CSS
  • Sinn: Dient der Trennung vom Inhalt(Html) und Formatierung(CSS). CSS kann einmalig festgelegt und für vielerlei HTML-Elemente umgesetzt werden.
  • Von CSS definierte Formate können in HTML-Datei niedergeschrieben oder in externe Style-Dateien ausgelagert werden
  • In den Headbereich folgt die CSS-Einbindung
    <head>
    <style type="text/css">
    /* Hier werden die Formate definiert */
    </style>
    </head>

  • Soll eine externe style.css-Datei eingebunden werden, platziert man an der selben Stelle folgendes:

    <link rel="stylesheet" type="text/css" href="style.css">


5.1 CSS Anweisungen:
Ähnlich wie in C etc. werden bei CSS Elementen Blöcke mit geschwungenen Klammern gebildet:
h1 {
Inhalt
}

- h1 = Selektor
- h1 = Überschrift 1. Ordnung (groß! Mit steigender Ziffer= sinkende Größe. h1 = groß, 2= kleiner, 3= klein, 4=mini etc..)

Ebenso wird eine Anweisung/Definition in CSS mit einem Semikolon beendet:
h1 {
color: red;
font-size: 12px;
}

- Definitionen: Eigenschaft (color) + Wert (red)
- Anwendung: <h1>Text</h1>

5.2 Formatierungen:

5.2.1 Formatierung- Schrift:
  • Font-family: arial; -> Art
  • Font-size: 12pt; -> Größe
  • Font-variant: small-caps; -> Variante (Kapitälchen)
  • Font-weight: bold; -> Gewicht (dick)
  • Font-Style: -> (normal, italic, oblique, bold, underlined)
  • Color: #000; -> Farbe (schwarz)
  • Line-height: 15px; -> Zeilenhöhe
  • Letter-spacing: 2px; -> Zeichenabstand
  • Text-transform: uppercasen; -> Transformation (Großbuchstaben)
  • Text-align: center; -> Textausrichtung (zentriert)

5.2.2 Formatierung- Links:
Links besitzen in CSS folgende Selektoren:
  • A:link -> Normaler Link
  • A:visited -> Besuchter Link
  • A:active -> Aktiver Link
  • A:hover -> Link beim Mouseover

Man könnte sie also folgendermaßen definieren:
A:link, A:visited, A:active {
font-family: verdana;
color: #000;
font-size: 11px;
text-decoration: none;
}
A:hover {
color: #66a;
text-decoration: none;
cursor:crosshair;
}

5.2.3 Formatierung- Bodybereich
Im Bodybereich kann man z.B. die Formatierung der Schrift, sowie des Hintergrunds, den Cursor oder auch die Scrollbar festlegen:
body{
cursor: url(seite.de/name.cur);
scrollbar-face-color: #000;
scrollbar-highlight-color: #66a;
scrollbar-3dlight-color: #FFF;
scrollbar-darkshadow-color: #000;
scrollbar-shadow-color: #66a;
scrollbar-arrow-color: #FFF;
scrollbar-track-color: #FFF;
overflow-x: hidden;
background-color: #FFF;
color: #000;
}

- Wir haben nun im Bsp. eine weiße Seite mit schwarzen Text, einer weißen Scrollbar mit schwarzer Leiste und einigen weißen Licht- sowie blauen Schatteneffekten erzeugt. Ebenfalls haben wir einen eigenen Cursor generiert und die waagerechten sowie senkrechten Scrollbalken im Browserfenster deaktiviert!
(Scrollbars sind nicht valide ("gültig") -> Bedeutet: Sie können nur im Internet Explorer formatiert angezeigt werden. Im Firefox zB nicht.

5.3 Klassen
Auch in CSS lassen sich Klassen definieren. So kann man neben der h1-Überschriftmethode auch z.B. P-Classes verwenden:
.title {
color: #000;
font-family: verdana;
font-size: 12px;
background-color: #FFF;
}

  • Wir haben in dem Bsp. eine Klasse namens title definiert, die eine schwarze Verdana-Schrift und einen weißen Hintergrund aufweist
  • Anwendung <p class=title>Text</p>

Selbiges lässt sich auch bei Textfeldern o.Ä. anwenden:
.beispiel {
font-family: Georgia;
font-size: 12px;
color: #FFF;
border:1px #FF0000;
background-color:#000;
}
  • Wir haben eine schwarze Box mit einer weißen Georgia-Schrift und roter Umrandung erstellt
  • Anwendung:

<div class=beispiel>
<b>Das schaut dann so aus!</b><br>
text
</div>



7 Kommentare




Mario

Ich würde noch erwähnen, dass die Scrollbar nur im IE funktioniert und nicht valide ist.
am 12.01.2009 um 21:38 Uhr


Nani

Sehr schönes Tutorial :)
am 13.01.2009 um 17:08 Uhr


Kritiker

Hallo, Isa_G!
Dein Tutorial ist sehr gut aufgebaut.
Ich gebe ihm die VOLLE Punktezahl!
Da steckt sicher sehr viel Arbeit drin.
Die Rechtschreibung ist auch immer beachtet worden. Vielen Dank für dieses Tutorial!
am 14.01.2009 um 13:04 Uhr


Isa_G

Danke Mario, habe ich editiert :)

Vielen Dank an Kritiker und Nani
am 15.01.2009 um 09:48 Uhr


Dafür das es für komplette Anfänger sein soll, finde ich sind manche Dinge noch nicht ausreichend erklärt z.B was es mit P-Classes und der h1 Überschriftmethode auf sich hat. Ich hab selber noch keine eigene Website erstellt und somit auch keine Erfahrung und wüsste jetzt nicht was das bedeutet. Sollte man vllt noch erklären
am 20.01.2009 um 03:18 Uhr


Isa_G

Danke Flowerbomb, keine schlechte Idee. Wenn man sich damit schon etweas auskennt, nimmt man vieles einfach für selbstverständlich und "einfach" wahr.
am 20.01.2009 um 09:27 Uhr


Caro_x3

toll!!! <3
am 16.05.2010 um 01:14 Uhr