HTML Tutorial für Anfänger 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. |
ah danke 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 |
Kein Problem. Mal sehen wie es zeitlich wird hier Tutorials einzustellen^^ |
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! |
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 ;) |
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 ;) |
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 ^^ |
Zitat:
Zitat:
Aber wenn es ein 5 Seitenbeitrag wird, dann mach lieber ein neuen Thread auf. Dann hast du mehr Platz :D Und die Basics sind ja schließlich der Grundbaustein für alles andere ;) |
für das weitere lernen empfehle ich: http://de.selfhtml.org da findet man einfach alles was man brauch! |
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 |
Es heißt <title>, nicht <titel> |
Lol und ich dachte immer dass man dazu tausende Programme braucht... Danke für das TuT ;) |
Alle Zeitangaben in WEZ +2. Es ist jetzt 03:32 Uhr. |
Powered by vBulletin