Einstieg in HTML - Part 1

Hallo Leute,

Index:

» Vorwort
» Grundsätzliches
» html Aufbau
» Schrift Formatierung
» Bilder hinzufügen
» Ende des Part1


Vorwort:
Nun werde ich einen kleinen HTML Einsteigerkurs schreiben. :>

Vorab möchte ich sagen dass dies nur ein kleiner & schneller Einstieg werden wird. Womit man seine eigene kleine HP bauen kann aber noch nichts Ausgereiftes erstellen kann. Hierfür kann ich nur http://de.selfhtml.org empfehlen. Das ist einfach am Umfangreichsten.

Zudem möchte ich gleich zuanfang sagen das dies ein Wenig Zeitaufwendig ist. Und wenn man nicht wild dazu entschlossen ist html zu lernen hat es meist keinen sinn. Man darf nicht gleich aufgeben wenn mal etwas nicht funktioniert wie man will. Dafür gibts kumpels/foren oder tutorials. Dies passiert am amfang relativ oft wobei es meistens an banalen Fehler liegt. Aber mit der Zeit bekommt man ein Auge dafür und die Fehler passieren immer weniger und es macht mehr spaß.

Grundsätzliches:
- Um eine html Datei im Browser auszugeben müsst ihr der Datei die Extension "*.html" geben. Am einfachsten lässt sich dies verwirklichen in dem ihr in eurem Windows-Browser die Extension's anzeigen lässt. [ Extras -> Ordneroptionen -> Ansicht -> Dateinamenerweiterung bei bekannten Dateitypen ausblenden (bei win2k an 2ter stelle von oben)].
Nun könnt ihr die Datei einfach umbenennen und z.B. statt *.txt - *.html anhängen.

- Was ich euch noch empfehle ist ein html Editor. Diese sind vor allem, durch die unterschiedliche Farben kenntzeichnung, hilfreich bei der Fehlersuche. Ich selbst benutze "phase5" (dl: http://www.ftp-uploader.de/cgi-bin/download.pl?file=phase52 ) wobei med habe ich gehört auch nicht schlecht sein soll. Phase5 ist Freeware und med gibt?s glaube ich nur ne 30 tage free licence.

- Jeder "Tag" [ Erklärung: ein "Tag" nennt man die befehle in den spitzklammern ( < und > ). Ein Tag wird geschlossen in dem ein Slash (Schrägstrich) am Anfang des Tag's nach dem "<" gesetzt wird. z.B. zur Öffnung <html> und um diesen Tag wieder zu schließen </html>.

- Jeder Tag muss in der Reihenfolge wie er geöffnet worden ist wieder geschlossen werden. z.B.:<html><head></head><body><table></table></body></html>

- Wenn bei html von "Formatierung" gesprochen wird, dürfen sie nicht wie bisher evtl. an einer Festplatten Formatierung denken, diese "Formatierung" gibt das FORMAT von z.B. Text an. Sprich Größe Farbe etc.

- Anführungszeichen sind in Html nie von Nöten. Das einigste wo diese benötigt werden ist bei den styles, und dies zählt eher zum css. Wobei es übersichtshalber nicht schlecht ist die " zu setzen.



#### 1. html Aufbau

Anfangen will ich mit der Standart Aufbau einer HTML Datei.


<html>
<head>
<title> TEXT </title>
</head>
<body>

CONTENT

</body>
</html>


Erklärung:
Die Erste Erklärung ein wenig ausführlicher

<html> - Damit der Browser erkennt das es bei dieser Datei um eine html Datei handelt muss am Anfang der Datei der <html> - "Tag" geöffnet werden.
<head> - Kennzeichnet den "kopf" der Datei, in diesen müssen später verschiedene php befehle rein wie Session oder auch Javascripte werden meist in den Header Platziert.
<title> - zwischen den title tags ( <title> | </title> ) Wird der Text geschrieben welcher ganz am Kopf eines Browsers ausgegeben wird. Sprich in dem Balken in dem auch die Buttons maxi-,minimieren und schlissen sind.
</head> - hiermit wird der "head" - Tag geschlossen.
<body> - Zwischen den Body Tags wird der komplette "content" (Inhalt der Page) geschrieben. Innerhalb des <body> Tags lassen sich generelle Sachen für die Komplette Page wie z.B. die Background color und Schrift Farben und vieles mehr Festlegen. Wobei dies nun zu weit vorgreifen würde.
</html> - am ende jeder html Datei muss der ganz am Anfang geöffnete <html> tag durch </html> wieder geschlossen werden.



#### 2. Schrift Formatierung

Generell:

Wenn Sie nun z.B. eine Überschrift Schreiben möchten groß und Fett Schreiben möchten können sie <h1>Headline-groß</h1> bis <h6>Headline-klein</h6> verwenden. Also h1,h2,h3,h4,h5,h6 wobei h1 die größte und h6 das kleinste ist.

Gefallen Ihnen diese fixierten Settings nicht können wir dies natürlich auch per hand machen.


» Bold/fettgedruckt html: <b> | </b>
» underlined/unterstrichen html: <u> | </u>
» italic/schräg html: <i> | </i>


Nun wollen wir aber ja evtl. auch mal die Schriftgröße, -art und -größe ändern.
Dafür verwenden wir einen <span> - Tag
z.B.

<span style="font-family:Verdana; font-size:10px; color:#333333">test3</span>


Erklärung:

font-family - hier kann man die Schriftart festlegen, wobei der genaue Name benötigt wird, und es ist empfohlen einen Windows-Standart Font zu benutzen, da ansonsten User die eure Seite besuchen diese "costum-fonts" nicht so ohne weiteres angezeigt bekommen in sofern diese diesen Font nicht auf ihrem System installiert haben was sehr unwahrscheinlich ist. Sprich die Seite die bei euch Super mit diesen Font aussieht, sieht bei manch anderen total verzogen und kacke aus da dieser Font mit einen Windows Standart Font ersetzt wird.

font-size - ist denke ich klar das dies die Schriftgröße ist, diese kann in Prozenten in px und in pt angegeben werde.

color - die color bestimmt natürlich die Farbe des Textes. Diese kann in hexcode (6 stelliger code aus zahlen und Buchstaben) oder mit den englischen Farben Namen ("red", "blue". z.B. color:red) bestimmt werden.



#### 3. Bilder hinzufügen

Nun können wir unsere Homepage schon mit schönen anschaulichen Texten ausstatten. Doch ganz ohne Bilder kommt diese Wohl ein wenig Langweilig vor.

der Tag um Bilder hinzu zu fügen heißt <img src=***>

z.B.

<img src=header.jpg>


Hierbei immer drauf achten welche Extension das bild hat, wenn es ein gif ist und ihr es ausversehen *.jpg benennt findet html das Bild nicht.
zudem ist dies einer der wenigen Tags welche nicht mit </img> geschlossen werden muss.
Wenn der Code wie eben genannt benutzt wird, Wird das Bild in voller Größe ausgestrahlt. Aber es lassen sich noch die Größen angeben in diese das bild dann "verkleinert/verzehrt" wird.
Sprich wenn ein bild z.B. ein Seiten Verhältnis von 4:3 hat aber man einstellt das es auf 100x100 Pixel verkleinert werden soll wird es verzehrt.

z.B.

<img src=header.jpg width=1000 height=250>


wobei width die breite und height die Höhe ist. Vorsicht beim schreiben des Wortes "height" ich weiß ja nicht aber ich habe mich an diesem Wort oft verschrieben :))
Wenn das Bild nun z.B. noch einen Rahmen bekommen soll hängt man border=1 an.

z.B.

<img src=header.jpg width=1000 height=250 border=1>


Nun hat das Bild einen 1pixel schwarzen Rand bekommen. Die Zahl nach border= bestimmt die Pixelbreite des Rahmens.

Nun noch ein Wort zur Pfad Angabe
Von was ich nur abraten kann sind absolute-Pfade z.B.: " E:gfx utownheader.jpg "
Da wenn ich diese html nun hochladen wollen würde, würde das Bild nicht angezeigt werden. Deshalb sollte man stets relative Pfade verwenden. (../header.jpg)
Der ein oder andere oldschooler welcher noch mit Dos herumhantiert hat fällt dieses evtl. einfacher.
Also:
Wenn das bild im selben Ordner liegt wie diese Datei schreibt man einfach nur <img src=bild.jpg>. Bei kleinen Pages ist dies Vertretbar, doch wenn es viele Bilder gibt wird dies unübersichtlich. Also wenn man nun z.B. ein "image" Ordner anlegt muss es <img src=images/bild.jpg> heißen. Um einen Ordner zurück zu gehen schreib man "../" vor dem Bild Namen z.B.. <img src=../bild.jpg>.

Die Ausrichtung der Bild und Texte und die erstellung der ersten Website kommt in Part-2



#### 4. Ende des Part1

Es wird definitif einen 2ten part geben.

Ich hoffe ich habe so manchen neu Einsteiger schon ein Wenig geholfen.
und denke das dies ein schneller ein Stieg ist aber das wir am ende des Workshops eine HP erstellen können. Dann heisst es dran bleiben, weiter Homepages bauen und dann kommt alles mit der zeit.

Ich entschuldige mich für meine Rechtschreibfehler und evtl auch wenn ich falsche ausdrücke verwendet habe, der html pro bin ich nicht aber ich denke soweit müsste alles stimmen,

mfg, azz

Kommentare

azz
azz am Dienstag, 15. März 2005 um 23:21

ohoh, irgendwas in dem tut hat wohl einiges zerschossen, werde ma schauen was das ist und kuckn ob ichs repairen kann

azz
azz am Dienstag, 15. März 2005 um 23:24

ahjo jetzt passts : )

malo
malo am Donnerstag, 17. März 2005 um 16:41

Kommentar gelöscht (vorgänger) , recht "sinnvoll" (Ironie von heute :) )

Schön geschriebenes Tut ich habs nicht, ganz durchgelesen aber die Auflistungen und der die Inhhaltiche Form ist gut. Der Aufbau ist sauber ;)

Also weiter so, über solche Tutorials freue ich mich, und man kann auch mal mehr Webpoints geben ;)

Stoke

azz
azz am Donnerstag, 17. März 2005 um 21:27

hehe loel, da könnts mir immer 0 geben, ich mach das ja nicht der webpoints wegen ... ^^