37x Forum  
Zurück  > >

Portal Forum Registrieren Hilfe Alle Foren als gelesen markieren
Alt 14.01.2009, 18:31   Direktlink zum Beitrag - 1 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 19.11.2008
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard


Dies ist ein Tutorial. Sie werden erfahren wie Sie mit HTML Homepages erstellen können, und was HTML überhaupt ist.

Inhaltsverzeichnis:
1. Einführung
2. Was ist HTML?
3. Tags und Elemente
4. Ihre eigene Homepage
5. Tabellen


1. Einführung

Die meisten der zahlreichen Menschen, meinen dass es sehr schwierig ist eine eigene Homepage zu erstellen. Aber das stimmt nicht
Jeder Mensch, der ein Computer zu Hause hat, kann es lernen.

Was benötige ich um eine Homepage zu erstellen?

Sie benötigen nur den Editor und einen Browser der in allen Windows schon vorinstalliert ist.
Mehr auch nicht.
Sie fragen sich nun wahrscheinlich, wie man mit dem Editor eine Homepage erstellt, dies erfahren Sie in diesem Tutorial.
Sie benötigen für das Erstellen einer Homepage keine Programmierkenntnisse!

Selbstverständlich kann ich in diesem Tutorial nicht alles zeigen was man mit HTML machen kann.

Welchen Browser sollte ich am besten nehmen?

Der meist verbreitete Browser ist Internet Explorer doch es gibt auch viele andere Browser wie z.B. Opera oder Mozilla-Firefox.

Wo finde ich den Editor?

Sie finden den Editor hier : Start -> Alle Programme -> Zubehör -> Editor
Damit können Sie jetzt anfangen!

2. Was ist HTML?


HTML (=HyperText Mark-up Language) wurde von dem Wissenschaftler Tim Berners-Lee im Jahr 1990 erfunden.
Eigentlich wollte er nur das Wissenschaftler anderer Universitäten schneller und komfortabler auf Forschungsergebnisse anderer
Wissenschaftler zugreifen können.

HTML ermöglicht es Informationen im Internet zu präsentieren.

Um den Quelltext anderer Homepages zu sehen gehen Sie folgendermaßen vor:

1. Öffnen Sie ihren Browser
2. Besuchen Sie eine Homepage
3. Klicken Sie im Browser auf dem Tab "Ansicht"
4. Klicken Sie auf "Quelltext"

Nun müssten Sie den Quelltext sehen können.

3. Elemente und Tags

Nun beginnen wir mit den Basics von HTML - den (Sprach-)Elementen

Tag?
Diese Tags werden benutzt, damit der Browser erkennt wann ein Element anfängt und zu Ende ist.

Alle Tags haben das gleiche Format: Beginnen tun Sie mit einem Kleiner als Zeichen "<" und enden mit einem Größer als Zeichen ">".

Es gibt den Start Tag <body> und den End Tag </body>. Was ist der Unterschied? Der Slash. Er gibt an das
ein Element zu ende ist.

4. Ihre eigene Homepage

Öffnen Sie den Editor wie im 1. Kapitel beschrieben.

Dies ist der "Grundgerüst" des HTML's:
Zuerst wird ein HTML Tag definiert damit der Browser weiß mit was er es zu tun hat:
<html>
Dann wird ein Head Tag definiert dies ist der "Kopf" des Dokuments. Hier kommt alles rein was der Browser nicht anzeigen soll.
<head>
Diesen können wir gleich schließen
</head>
Dann definieren wir den Body Tag dort kommt alles rein was der Browser anzeigen soll.
<body>
Diesen können wir auch gleich schließen
</body>
Als letztes müssen wir den HTML Tag schließen!
</html>

Also sieht der Grundgerüst so aus:

<html>
<head>
</head>
<body>
</body>
</html>

Wenn wir jetzt das Dokument öffnen sehen wir nichts, da dies im Moment nur Tags sind.

Dann möchten wir doch mal den Text "Meine erste Homepage" als Titel anzeigen.
Um dies zu erschaffen benötigen wir den Titel Tag. Diesen erstellen wir so:

<titel>

Dieser Tag muss im Head Tag geschrieben werden.

Also sieht unser Dokument wie folgt aus:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
</body>
</html>

Wie man sieht habe ich zwischen den <titel> Tag und den </titel> Tag den gewünschten Titel geschrieben.
Speichern Sie dies unter index.html
Wenn Sie das Dokument nun öffnen sehen sie den Titel oben gefolgt vom Browsernamen.

Warum soll ich die Datei index.html benennen?
Wenn der Browser eine Indexseite sieht, dann öffnet er diese zuerst.
Damit der Browser diese Datei als HTML-Datei sieht, muss man dahinter .html schreiben.

Nun möchten wir doch ein Text anzeigen.
z.B. "Ich habe nun erfolgreich meine erste Homepage erstellt."
Diesen Text schreiben wir einfach wie gewohnt zwischen den <body> und den </body> Tag.

Sieht wie folgt aus:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.
</body>
</html>

Um einen Absatz zu erstellen, benötigen wir den

Tag.
Beispiel:


<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>


Ich habe nun erfolgreich meine erste Homepage erstellt.</p>
</body>
</html>

Dies ist nun ein Absatz.

Um einen Zeilenumbruch zu kreieren, benötigen wir wieder den

Tag:
Beispiel:


<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.



Dies ist ein Absatz
</body>
</html>

Um die Schrift fettig zu machen, benötigen wir den [b] Tag
Beispiel

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
Ich habe nun erfolgreich meine erste Homepage erstellt.
</body>
</html>

Um die Schrift zu unterstreichen benötigen wir den <u> Tag
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
<u>Ich habe nun erfolgreich meine erste Homepage erstellt.</u>
</body>
</html>

Um eine Überschrift zu erstellen benötigen wir den <h*> Tag
Dabei ersetzen wir das * mit einer Zahl zwischen 1 und 6
<h1> ist die größte Überschrift und <h6> die kleinste.
Beispiel:

<html>
<head>
<titel>Meine erste Homepage</titel>
</head>
<body>
<h1>Ich habe nun erfolgreich meine erste Homepage erstellt.</h1>
<h2>Ich habe nun erfolgreich meine erste Homepage erstellt.</h2>
<h3>Ich habe nun erfolgreich meine erste Homepage erstellt.</h3>
<h4>Ich habe nun erfolgreich meine erste Homepage erstellt.</h4>
<h5>Ich habe nun erfolgreich meine erste Homepage erstellt.</h5>
<h6>Ich habe nun erfolgreich meine erste Homepage erstellt.</h6>
</body>
</html>

5. Tabellen

Es ist eigentlich ganz einfach eine Tabelle zu erstellen.
Meistens werden auch Tabellen benutzt um professionelle Homepages zu erstellen doch das ist sehr kompliziert.
Um eine Tabelle zu erstellen benötigen Sie den Table Tag Table heißt nichts anderes als Tabelle
Der Table Tag sieht so aus : <table> um es zu beenden </table>
Um eine neue Zeile anzufangen benötigen Sie den TR Tag (tr = Table Row)
In diesen TR Tag benötigen Sie den TD Tag dieser wird benötigt um eine neue Spalte zu erstellen.
Ich habe mal einen Beispiel für euch erstellt. Natürlich kann es auch ganz anders aussehen:

<table>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>

Perfekt! Natürlich kann man die Tabelle dann noch erweitern und z.B. einen dicken Rand machen oder die Hintergrundfarbe wählen...

Fertig! Nun haben Sie ihre eigene Homepage erstellt! Freuen Sie sich wenn Sie das geschafft haben denn von nun an sind Sie
ein HTML-Neuling.

Dies war eigentlich schon alles über die Basics des HTML's
Natürlich können Sie sich auch weitere Tutorials im Web anschauen wenn Sie dies schon gelernt haben.
Es gibt noch eine Menge zu lernen wenn sie professionelle Webseiten erstellen möchten.
Wenn Sie schon alles über HTML wissen dann können Sie auch mit CSS (=Cascading Style Sheet) anfangen.
D_Blade ist offline  

Mit Zitat antworten

Werbung


--
Alt 15.01.2009, 23:53   Direktlink zum Beitrag - 2 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 13.01.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

die html codes kann man immer gebrauchen ich bearbeite nämlich immer sieteb bei myblog.de
wenn man sich gut dmait ausgkennt kommt man da gut klar aber es wäre besser wenn es immer neue html codes hhier vorgestellt werden
ansonsten nochma danke
Fêrbûn ist offline  

Mit Zitat antworten
Alt 16.01.2009, 17:26   Direktlink zum Beitrag - 3 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 19.11.2008
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Kein Problem. Mal sehen wie es zeitlich wird hier Tutorials einzustellen^^
D_Blade ist offline  

Mit Zitat antworten
Alt 25.02.2009, 10:34   Direktlink zum Beitrag - 4 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 24.02.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Sehr hilfreiches Tutorial!
Einige Dinge daraus kannte ich noch nicht und bin froh das du es so schön und übersichtlich verfasst hast!
Herzlichen Dank!
Pump ist offline  

Mit Zitat antworten
Alt 25.02.2009, 23:38   Direktlink zum Beitrag - 5 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 19.11.2008
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Kein Problem

Nur ist evt. das "siezen" etwas komisch ?( . Sollte ich es vllt doch zu einem duzen oder ähnliches umändern?

Naja, es ist eben neutral geschrieben und soll auch andere Leute, die vllt zufällig über Google kommen mit ansprechen
D_Blade ist offline  

Mit Zitat antworten
Alt 26.02.2009, 11:24   Direktlink zum Beitrag - 6 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 24.02.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Also an deiner Stelle würde ich auf die "Du" Form umsteigen..
liest sich einfach leichter und viel schöner meiner Meinung nach...
Klingt persönlicher
Pump ist offline  

Mit Zitat antworten
Alt 06.03.2009, 21:56   Direktlink zum Beitrag - 7 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 06.03.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

soll ich die tage mal sowas machen wie der erste in diesem post ? wird aber dann ein knapp 5 seiten beitrag xD

das was bis jetzt hier drin steht sind ja nur Grundtags später wirds interessanter ^^
Rollstuhlfahrer ist offline  

Mit Zitat antworten
Alt 06.03.2009, 22:11   Direktlink zum Beitrag - 8 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 19.11.2008
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Zitat:
Zitat von 'Pump',index.php?page=Thread&postID=602681#post602 681
Also an deiner Stelle würde ich auf die "Du" Form umsteigen..
liest sich einfach leichter und viel schöner meiner Meinung nach...
Klingt persönlicher
Das habe ich mir auch schon gedacht, aber es kommen auch mal einige aus Google her und bei älteren Herrschaften würde das "Sie" professioneller klingen, glaube ich ^^
Zitat:
Zitat von 'Rollstuhlfahrer',index.php?page=Thread&postID=602 858#post602858
soll ich die tage mal sowas machen wie der erste in diesem post ? wird aber dann ein knapp 5 seiten beitrag xD

das was bis jetzt hier drin steht sind ja nur Grundtags später wirds interessanter ^^
Ja, das darfst du ruhig machen. Damit könntest du bestimmt auch noch anderen helfen =)
Aber wenn es ein 5 Seitenbeitrag wird, dann mach lieber ein neuen Thread auf. Dann hast du mehr Platz
Und die Basics sind ja schließlich der Grundbaustein für alles andere
D_Blade ist offline  

Mit Zitat antworten
Alt 05.04.2009, 18:14   Direktlink zum Beitrag - 9 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 05.04.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

für das weitere lernen empfehle ich:
http://de.selfhtml.org

da findet man einfach alles was man brauch!
Weber ist offline  

Mit Zitat antworten
Alt 08.04.2009, 15:02   Direktlink zum Beitrag - 10 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 07.04.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Super Tutorial. Gute Idee die Codes gleich mit-einzubinden. http://de.selfhtml.org kann ich ebenfalls sehr empfehlen, dort findet man alles was man so braucht.

lg Mike
mpvie85 ist offline  

Mit Zitat antworten
Alt 07.05.2009, 18:22   Direktlink zum Beitrag - 11 Zum Anfang der Seite springen
zufällig hier
Gast
 
Beiträge: n/a
Standard

Es heißt <title>, nicht <titel>
 

Mit Zitat antworten
Alt 06.06.2009, 01:09   Direktlink zum Beitrag - 12 Zum Anfang der Seite springen
Neuer Benutzer
 
Registriert seit: 03.03.2009
Beiträge: 0
Abgegebene Danke: 0
Erhielt 0 Danke für 0 Beiträge
Standard

Lol und ich dachte immer dass man dazu tausende Programme braucht...
Danke für das TuT
FoRuM2fReAk ist offline  

Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are aus
Pingbacks are aus
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 16:01 Uhr.


Powered by vBulletin