Hi!
Mein Name ist felsi03, und ich möchte dir in diesem Tutorial beibringen, wie du dir deine eigene kleine Webseite erstellen kannst!
Zuerst einmal ist es wichtig zu wissen, was du mit HTML alles so anfangen kannst.
Im wesentlichen programmierst du mit HTML Homepages/Webseiten. Ich werde dir sobald du dieses Tutorial durch hast in meinem erweitertem Tutorial Dinge wie CSS beibringen.
Was kann HTML?
Wie bereits erwähnt erstellst du mit HTML eine Homepage. HTML kann theoretisch alles, was du dir in der Online Welt vorstellen kannst.
In diesem Tutorial wird der Großteil sehr wahrscheinlich nicht gut aussehen, denn hier steht die Funktionalität im Vordergrund.
Das Aussehen bringe ich dir dann im CSS Tutorial bei, welches sich nur um den Style der Webseite kümmert.
Was benötige ich an Software?
Ich benutze bei mir selbst hauptsächlich Notepad++, welches du dir Hier herunterladen kannst. Es verfügt über eine Vielzahl von gut aussehenden Styles für die Programmierumgebung und Coole Plugins.
Wenn du dir das Programm heruntergeladen hast, kannst du sofort loslegen
Vorher solltest du aber noch bei deinem Computer in den Explorer gehen und dort auf Organisieren->Ordner und Suchoptionen->Ansicht gehen und dort den Haken bei "Erweiterungen bei bekannten Dateitypen" rausnehmen. Nun kannst du nämlich die Dateiendungen sehen, das wirst du benötigen.
Bevor du loslegen kannst, solltest du dir nun einen Ordner erstellen, den du wiederfindest.
Ich tue dies meist auf dem Desktop.
In diesem Ordner erstellst du am Besten ein Dokument welches du "index.html" nennst.
Nun startest du Notepad++ und ziehst deine index.html in das aktuelle Programmierfenster.
Grundlagen/Basics
Kommen wir zu den Grundlagen.
Zuerst einmal solltest du wissen, dass in HTML ziemlich alles mit folgenden Klammern umgeben wird: <>
In diesen Klammern stehen dann immer die HTML Befehle. Diese Befehle schließt du wieder, indem du </deinBefehl> hinter deinen Text/Output schreibst.
Fangen wir mit einem kleinem Beispiel an:
In jedem HTML Dokument brauchst du erst einmal eine DOCTYPE Angabe. Diese stellst du in deinem HTML Document folgendermaßen dar:
Nun hast du den Dokumenten Typ des Dokuments festgelegt.
Nachdem du den Doctype angegeben hast, musst du das HTML Dokument eröffnen.
Dies machst du mit <html> und mit </html> schließt du das Dokument.
Das sollte bei dir dann folgendermaßen aussehen:
Nun hast du theoretisch schon eine funktionierende Homepage, leider wirst du darauf aber nichts sehen.
Da du etwas sehen möchtest, zeige ich dir, wie das geht.
Grundsätzlich ist das auch nicht schwer, du musst dafür aber noch wissen, dass die Webseite in 2 Bereiche aufgeteilt ist.
Einmal den sogenannten Head und den body.
Wie du den Head öffnest und schließt, solltest du bereits wissen, ich zeige es dir aber trotzdem noch einmal:
<head></head>
In den Head kommen Sachen wie der Titel der Seite.
Nun kannst du auch schon einen Teil auf deiner Seite anzeigen lassen:
Nun steht in dem Tab oben, solltest du es mit einem Browser öffnen, der Text, welcher zwischen <title> und </title> steht.
Sobald ihr dieses in notepad++ eingegeben habt, könnt ihr die erstellte "index.html" Datei mit einem beliebigen Browser eurer Wahl öffnen.
Nun können wir einen Schritt weiter gehen, und in die Webseite an sich ein wenig Inhalt bringen.
Hierzu gibt es zu sagen, dass es verschiedene Überschriften und ein großes Textfeld gibt.
Um erst einmal eine normale Überschrift zu kriegen, benutzen wir die Überschrift des ersten Grades, welche die wichtigste ist und mit h1 gekennzeichnet ist.
Vorher müssen wir aber erst einmal den Body erstellen, worin alles auf der Homepage an sich enthalten ist.
Dies sieht dann im Code wie folgt aus:
Nun solltet ihr auch eine Überschrift haben, das sieht jetzt alles noch nicht gut aus, das kommt aber wie gesagt im 2. Teil meiner Tutorial.
So sollte es jetzt bei euch aussehen:
Nun können wir direkt mit dem Inhalt der Seite weitermachen, welcher mit p gekennzeichnet ist.
Ich habe direkt mal die Überschrift des 2. Grades eingebaut, die h2.
Mehr kann ich in diesem Anfänger Tutorial nicht sagen, das würde zu komplex werden.
Weiteres, wie die Navigation auf einer Homepage erkläre ich im erweitertem Tutorial.
Ich hoffe ich konnte euch helfen und ihr lernt ein wenig daraus
Falls euch hier etwas fehlt schreibt entweder einen Beitrag hier runter oder schreibt mich Privat per PN an
Falls ihr Hilfe braucht könnt ihr das ebenfalls tun!
MfG
euer felsi
Mein Name ist felsi03, und ich möchte dir in diesem Tutorial beibringen, wie du dir deine eigene kleine Webseite erstellen kannst!
Zuerst einmal ist es wichtig zu wissen, was du mit HTML alles so anfangen kannst.
Im wesentlichen programmierst du mit HTML Homepages/Webseiten. Ich werde dir sobald du dieses Tutorial durch hast in meinem erweitertem Tutorial Dinge wie CSS beibringen.
Was kann HTML?
Wie bereits erwähnt erstellst du mit HTML eine Homepage. HTML kann theoretisch alles, was du dir in der Online Welt vorstellen kannst.
In diesem Tutorial wird der Großteil sehr wahrscheinlich nicht gut aussehen, denn hier steht die Funktionalität im Vordergrund.
Das Aussehen bringe ich dir dann im CSS Tutorial bei, welches sich nur um den Style der Webseite kümmert.
Was benötige ich an Software?
Ich benutze bei mir selbst hauptsächlich Notepad++, welches du dir Hier herunterladen kannst. Es verfügt über eine Vielzahl von gut aussehenden Styles für die Programmierumgebung und Coole Plugins.
Wenn du dir das Programm heruntergeladen hast, kannst du sofort loslegen
Vorher solltest du aber noch bei deinem Computer in den Explorer gehen und dort auf Organisieren->Ordner und Suchoptionen->Ansicht gehen und dort den Haken bei "Erweiterungen bei bekannten Dateitypen" rausnehmen. Nun kannst du nämlich die Dateiendungen sehen, das wirst du benötigen.Bevor du loslegen kannst, solltest du dir nun einen Ordner erstellen, den du wiederfindest.
Ich tue dies meist auf dem Desktop.
In diesem Ordner erstellst du am Besten ein Dokument welches du "index.html" nennst.
Nun startest du Notepad++ und ziehst deine index.html in das aktuelle Programmierfenster.
Grundlagen/Basics
Kommen wir zu den Grundlagen.
Zuerst einmal solltest du wissen, dass in HTML ziemlich alles mit folgenden Klammern umgeben wird: <>
In diesen Klammern stehen dann immer die HTML Befehle. Diese Befehle schließt du wieder, indem du </deinBefehl> hinter deinen Text/Output schreibst.
Fangen wir mit einem kleinem Beispiel an:
In jedem HTML Dokument brauchst du erst einmal eine DOCTYPE Angabe. Diese stellst du in deinem HTML Document folgendermaßen dar:
Nun hast du den Dokumenten Typ des Dokuments festgelegt.
Nachdem du den Doctype angegeben hast, musst du das HTML Dokument eröffnen.
Dies machst du mit <html> und mit </html> schließt du das Dokument.
Das sollte bei dir dann folgendermaßen aussehen:
Nun hast du theoretisch schon eine funktionierende Homepage, leider wirst du darauf aber nichts sehen.
Da du etwas sehen möchtest, zeige ich dir, wie das geht.
Grundsätzlich ist das auch nicht schwer, du musst dafür aber noch wissen, dass die Webseite in 2 Bereiche aufgeteilt ist.
Einmal den sogenannten Head und den body.
Wie du den Head öffnest und schließt, solltest du bereits wissen, ich zeige es dir aber trotzdem noch einmal:
<head></head>
In den Head kommen Sachen wie der Titel der Seite.
Nun kannst du auch schon einen Teil auf deiner Seite anzeigen lassen:
Nun steht in dem Tab oben, solltest du es mit einem Browser öffnen, der Text, welcher zwischen <title> und </title> steht.
Sobald ihr dieses in notepad++ eingegeben habt, könnt ihr die erstellte "index.html" Datei mit einem beliebigen Browser eurer Wahl öffnen.
Nun können wir einen Schritt weiter gehen, und in die Webseite an sich ein wenig Inhalt bringen.
Hierzu gibt es zu sagen, dass es verschiedene Überschriften und ein großes Textfeld gibt.
Um erst einmal eine normale Überschrift zu kriegen, benutzen wir die Überschrift des ersten Grades, welche die wichtigste ist und mit h1 gekennzeichnet ist.
Vorher müssen wir aber erst einmal den Body erstellen, worin alles auf der Homepage an sich enthalten ist.
Dies sieht dann im Code wie folgt aus:
Nun solltet ihr auch eine Überschrift haben, das sieht jetzt alles noch nicht gut aus, das kommt aber wie gesagt im 2. Teil meiner Tutorial.
So sollte es jetzt bei euch aussehen:
Nun können wir direkt mit dem Inhalt der Seite weitermachen, welcher mit p gekennzeichnet ist.
HTML-Quellcode
- <!DOCTYPE html>
- <html>
- <head>
- <title>Meine erste Homepage!</title>
- </head>
- <body>
- <h1>Dies ist die Überschrift des 1. Grades!</h1>
- <p>Ich bin ein Text! Hier kannst du beliebig viel schreiben!</p>
- <h2>Dies ist die Überschrift des 2. Grades!</h2>
- <p>Ich bin der Text nach der 2. Überschrift!</p>
- </body>
- </html>
Ich habe direkt mal die Überschrift des 2. Grades eingebaut, die h2.
Mehr kann ich in diesem Anfänger Tutorial nicht sagen, das würde zu komplex werden.
Weiteres, wie die Navigation auf einer Homepage erkläre ich im erweitertem Tutorial.
Ich hoffe ich konnte euch helfen und ihr lernt ein wenig daraus
Falls euch hier etwas fehlt schreibt entweder einen Beitrag hier runter oder schreibt mich Privat per PN an
Falls ihr Hilfe braucht könnt ihr das ebenfalls tun!
MfG
euer felsi
Bin jede Menge am C#/C++ programmieren für Schule usw. Demnächst mache ich die Reihe mal weiter 
Aber ich weiß in welchem Zusammenhang du das meinst und dort hast du recht. 