[HTML] Einsteiger Tutorial

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

      [HTML] Einsteiger Tutorial

      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:

      Quellcode

      1. <!DOCTYPE html>

      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:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. </html>


      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:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <title>Meine erste Homepage!</title>
      5. </head>
      6. </html>

      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:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <title>Meine erste Homepage!</title>
      5. </head>
      6. <body>
      7. <h1>Dies ist die Überschrift des 1. Grades!</h1>
      8. </body>
      9. </html>

      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

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <title>Meine erste Homepage!</title>
      5. </head>
      6. <body>
      7. <h1>Dies ist die Überschrift des 1. Grades!</h1>
      8. <p>Ich bin ein Text! Hier kannst du beliebig viel schreiben!</p>
      9. <h2>Dies ist die Überschrift des 2. Grades!</h2>
      10. <p>Ich bin der Text nach der 2. Überschrift!</p>
      11. </body>
      12. </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 ;)
      Bilder
      • Ordner.png

        90,7 kB, 558×544, 28 mal angesehen
      • Programmierumgebung.png

        54,93 kB, 1.366×728, 27 mal angesehen
      • Title.png

        34,94 kB, 610×128, 24 mal angesehen
      • Überschrift.png

        28,59 kB, 718×187, 26 mal angesehen
      • fertigeHomepage.png

        47,46 kB, 913×516, 27 mal angesehen

      Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „felsi03“ ()

      Hallo,
      nettes Einsteigeetutorial :)

      Wenn du sagst "html kann theoretisch alles, was du dir in der Online-Welt vorstellen kannst": Das ist nicht ganz richtig :)
      Ein Änderungsvorschlag:

      HTML = Hyper Text Markup Language -> HTML dient in der Grundlage dazu, Dinge zu formatieren und dem Browser zu sagen, was er anzeigen soll. Man kann also beliebige Websiten designen, jedoch nur designen. Wenn dann Logik gefragt ist, ist es mit HTML schnell zu Ende. Da sollte man dann vielleicht auf PHP oder JS verlinken :)

      Sonst ein schönes Tutorial :)

      Lg

      freundchen2 schrieb:

      Hallo,
      nettes Einsteigeetutorial :)

      Wenn du sagst "html kann theoretisch alles, was du dir in der Online-Welt vorstellen kannst": Das ist nicht ganz richtig :)
      Ein Änderungsvorschlag:

      HTML = Hyper Text Markup Language -> HTML dient in der Grundlage dazu, Dinge zu formatieren und dem Browser zu sagen, was er anzeigen soll. Man kann also beliebige Websiten designen, jedoch nur designen. Wenn dann Logik gefragt ist, ist es mit HTML schnell zu Ende. Da sollte man dann vielleicht auf PHP oder JS verlinken :)

      Sonst ein schönes Tutorial :)

      Lg


      Dadurch, dass man Java Script ganz einfach in eime Webseite via html einbauen kann, ist sogut wie alles möglich ;)

      MfG

      felsi03 schrieb:

      freundchen2 schrieb:

      Hallo,
      nettes Einsteigeetutorial :)

      Wenn du sagst "html kann theoretisch alles, was du dir in der Online-Welt vorstellen kannst": Das ist nicht ganz richtig :)
      Ein Änderungsvorschlag:

      HTML = Hyper Text Markup Language -> HTML dient in der Grundlage dazu, Dinge zu formatieren und dem Browser zu sagen, was er anzeigen soll. Man kann also beliebige Websiten designen, jedoch nur designen. Wenn dann Logik gefragt ist, ist es mit HTML schnell zu Ende. Da sollte man dann vielleicht auf PHP oder JS verlinken :)

      Sonst ein schönes Tutorial :)

      Lg


      Dadurch, dass man Java Script ganz einfach in eime Webseite via html einbauen kann, ist sogut wie alles möglich ;)

      MfG
      Es geht nur darum, kein falsches Bild von HTML zu vermitteln. HTML ist für die Struktur, CSS für das Design, andere Dinge sind für die Logik.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „freundchen2“ ()

      Smilecraft_65. schrieb:

      Also ich kann auch mit dem stinknormalen Editor html programmieren. Oder zur Hilfe ist der HTML Editor gut


      Falls das eine Frage war: es gibt für viele Programmiersprachen IDEs, die schnelleres und leichteres Programmieren bezwecken sollen. Java ist ohne IDE oder einen guten Editor heut zu Tage fast undenkbar, weil es einfach unheimlich schnell geht mit Autocomplete und vor allem Live-Compiling sodass man sofort die Errors sieht.

      Bei HTML ist der Bedarf an einem guten Esitor / einer IDE jedoch nicht so hoch. Sie kann dir zwar Tags automatisch closen, jedoch wirst du oft nicht bei Fehlern gewarnt und es gibt jetzt auch nicht so viel zum Auto-completen. Reine HTML/CSS Projekte kannst du also mit nicht vielen Einbußen in jedem Esitor schreiben, bei JavaScript lohnt sich eine IDE aber vielleivht dann doch.

      freundchen2 schrieb:


      Bei HTML ist der Bedarf an einem guten Esitor / einer IDE jedoch nicht so hoch. Sie kann dir zwar Tags automatisch closen, jedoch wirst du oft nicht bei Fehlern gewarnt und es gibt jetzt auch nicht so viel zum Auto-completen. Reine HTML/CSS Projekte kannst du also mit nicht vielen Einbußen in jedem Esitor schreiben, bei JavaScript lohnt sich eine IDE aber vielleivht dann doch.

      Als Berufsprogrammiere möchte ich niemals auf meine IDEs verzichten, egal in welchen Programmiersprachen. Auch HTML/CSS ist für einen professionellen Programmierer ohne IDE grausam ;)

      vMief | Der_Schlumpf schrieb:

      freundchen2 schrieb:


      Bei HTML ist der Bedarf an einem guten Esitor / einer IDE jedoch nicht so hoch. Sie kann dir zwar Tags automatisch closen, jedoch wirst du oft nicht bei Fehlern gewarnt und es gibt jetzt auch nicht so viel zum Auto-completen. Reine HTML/CSS Projekte kannst du also mit nicht vielen Einbußen in jedem Esitor schreiben, bei JavaScript lohnt sich eine IDE aber vielleivht dann doch.

      Als Berufsprogrammiere möchte ich niemals auf meine IDEs verzichten, egal in welchen Programmiersprachen. Auch HTML/CSS ist für einen professionellen Programmierer ohne IDE grausam ;)
      Glaubst du ich programmier in der Arbeit ohne IDE? xDDD

      Aber es geht hier denke ich um ein einfaches HTML Projekt und da is es ned so schlimm.

      Edit: Natürlich programmiere ich auch daheim alles mit IDEs aus dem Hause Jetbrains, nicht nur in der Arbeit ;)

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „freundchen2“ ()

      felsi03 schrieb:

      Im wesentlichen programmierst du mit HTML Homepages/Webseiten.

      Autsch.
      Vielleicht bin ich einfach nicht gebildet genug aber ich habs noch nicht vollbracht in HTML zu programmieren.
      Have you ever accidentally peed on the toilet seat instead of your girlfriends face?
      Me neither!

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „mauriLi“ ()

      Das ist schön und ich hoffe mein Beitrag ist nicht allzu bösartig angekommen, auch wenn er so formuliert war.
      Wichtig wäre nur, dass du selbstkritischer wirst, was fachliche Korrektheit angeht. Man "programmiert" nicht HTML und auch solltest du JavaScript und HTML getrennt von einander sehen. Die Aussage "HTML kann theoretisch alles, was du dir in der Online Welt vorstellen kannst." ist ziemlich pauschal und ich würde sie nicht im Ansatz unterschreiben, passender wäre eher: "HTML kann fast nichts, was man sich in der Online Welt vorstellen kann, aber das was es kann, kann es gut." Auch wenn HTML es ziemlich einfach macht mit JavaScript zu interagieren, ist das dann kein HTML mehr. Viel wichtiger wäre hier zu zeigen was HTML kann und was nicht anstatt zu behaupten es könnte alles. Das würde auch dem Beginner ein besseres Verständnis und einen besseren Überblick über HTML geben.

      Ich würde vorschlagen bevor du die Reihe erweiterst, solltest du dein jetzigen Thread bearbeiten und eventuell ergänzen! :)
      Viel Erfolg,
      mauri
      Have you ever accidentally peed on the toilet seat instead of your girlfriends face?
      Me neither!

      vMief | Der_Schlumpf schrieb:

      mauriLi schrieb:

      "HTML kann fast nichts, was man sich in der Online Welt vorstellen kann, aber das was es kann, kann es gut."

      Man sollte aber nicht unterschlagen, dass ohne HTML in der Online Welt nichts geht ;)
      Dann haben wir zwei unterschiedliche Auffassungen was die Online Welt ist. ^^ Aber ich weiß in welchem Zusammenhang du das meinst und dort hast du recht.
      Have you ever accidentally peed on the toilet seat instead of your girlfriends face?
      Me neither!