Baumstrukturmodus | Linearer Modus

***Toasterfraktion***

HTML ist der Grundstein zum Programmierung im Web. Hier möchte ich dir von Grund auf zeigen wie du mit HTML arbeitest. Ein Webspace bzw. Server ist notwendig. Du kannste es aber auch lokal mit xampp ausprobieren. Einfach HTML Seiten kannst du natürlich auch so in deinem Browser aufrufen. Als Editor kannst du einen normalen Texteditor benutzen. Ich empfehle dir das Programm Notepad++. Falls Webspace vorhanden nutze ich FileZilla zum hoch laden.

Du kannst nun den Editor offenen und ein neues Dokument erstellen. Dort kannst du dann einen Beispieltext eingeben und es nun als .html abspeichern. Rufe nun die Datei in deinem Browser auf. Du wirst nun ohne Formatierung g deinen Text sehen. Du hast soeben erfolgreich eine HTML Seite geschrieben.

Ich gebe zu, dass ist zu einfach. Jetzt zeige ich dir ein paar Grundbausteine und Befehle in HTML.

1)Absätze

Absätze mit 

Im Quelltext:

Code:
Das ist ein Beispieltext.<p>Hier geht es weiter.

Im Browser:

Das ist ein Beispieltext.

Hier geht es weiter.

Absätze mit 

Im Quelltext:

Code:
Das ist ein Beispieltext.<br>Hier geht es weiter..

Im Browser:

Das ist ein Beispieltext.
Hier geht es weiter.

Mit dem Tag wird ein Absatz definiert. Das bedeutet, dass am Anfang eines Absatzes steht und am Ende des Absatzes eingefügt wird.
 wird verwandt, wenn eine Zeile umgebrochen werden soll

2) Grundgerüst einer HTML-Seite

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>HTML-Tutorial von www.html-seminar.de</title>
</head>

<body>
</body>

</html>

DOCTYPE-Definition - erste Zeile
Die DOCTYPE-Definition teilt dem Browser mit um was es sich in der Datei handeln kann bzw. was er für befehle erwarten kann.

Bereich html
Hier fängt nun der HTML-Bereich an - den Endtag finden Sie am Ende und diese umklammern den head und den body-Bereich

head-Bereich
Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht sieht (mit Ausnahme von title) und für die Technik und Suchmaschinen da ist

Der wichtigste Eintrag ist der <title>-Bereich. Dort wird eingetragen, was im Internetbrowser-Kopfzeile angezeigt wird.

body-Bereich
Alles was sich in dem Bereich <body> und </body> befindet zeigt der Browser an

3) Texte formatieren (Fett, kursiv, usw)

Fett

Es gibt 2 möglichkeiten einen Text fett auszugeben.

1.) Mit dem Befehl Text
2.) Mit dem Befehl Text

 bedeutet „bold“, bedeutet kräftig, fest

Kursiv

Um einen Text kursiv auszugeben nutz man den code Text wie „italic“

Unterstrichen

Um einen Text kursiv auszugeben nutz man den code Text wie „underline“

4) Hostellen bzw. tiefstellen von Textbausteinen

Code:
<p>Die Formel von Wasser ist H<sub>2</sub>O
</p>
<p>Ein Textverweis kann so aussehen <sup>1</sup></p>

Hier Im Browser:
.html

sup_sub.html (Größe: 105 Bytes / Downloads: 4)

Sub zum tiefstellen
Sup zum hochstellen

5) Text größer und kleiner ausgeben

Man kann einerseits einen text mit Text kleiner darstellen und mit <big>Text</big> größer darstellen.

Du kannst die Befehle auch mehrmals benutzen.
Dazu ein Beispiel:
.html

html_text_Toaster.html (Größe: 51 Bytes / Downloads: 3)

Google · 11-05-2008, 03:40 PM

_MakaaY_ · 27-03-2008, 12:49 PM

Also ich hab da einige Fehler gefunden...

Also:
 gibt es auch als und es steht immer allein und hat keinen End-tag.
zum anderen fehlt die Codierung....
ich hab noch ein etwas ausfühlicheres Tutorial bzw Einführung in html..

ICE TRUCK · 27-03-2008, 12:54 PM

naja schreibt man wegen dem xml standard um zu sagen dass der tag sozusagen sofort wieder geschlossen wird
-> also wenn man nicht nach xml standard geht is in ordnung

und heisst auch nicht mehr als Wink

_MakaaY_ · 27-03-2008, 01:09 PM

Das weiß ich, aber ich wollt es nur sagen, weil, z.b. wenn man mit Dreamweaver arbeitet, wird der Zeilenumbruch als verwendet...

NewbieX · 27-03-2008, 07:29 PM

Hi,
das mit dem ist valdides html so weit ich weiss, ändert aber an der browserausgabe:
Wieso machst du keine verweise auf
http://de.selfhtml.org/
das ist meiner meinung nach gut erklärt Smile

Möglicherweise verwandte Themen...
Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	Welchen HTML-Editor nutzt du?	Toasterfraktion	18	2,339	04-05-2009 08:33 PM Letzter Beitrag: gORDon_vdLg