HTML - Beginnerkurs 1 - Fangen wir an

1. offizieller Beitrag
    • Offizieller Beitrag

    HTML 5 Beginner Kurs - Grundlegende Infos


    Ich weiß, HTML (5) ist öde und lahm, aber bietet durchaus einige Möglichkeiten, sich daran auszuprobieren. Da HTML Dateien direkt vom Browser gelesen werden können, benötigt man so keinen Webserver (Apache, oder IIS). Somit kann man seine "Homepage" direkt auf dem PC bauen und ansehen und testen. Finde ich selbst schonmal sehr angenehm und einfach. HTML5 ist durchaus Dynamischer geworden und kann jetzt auch PHP verarbeiten bzw. PHP kann eingebunden werden. Einige neue HTML5 Tags sind dazu gekommen. Es bietet somit also genug Spielraum um sich auszutoben.


    Dieser Kurs soll von ganz vorn beginnen und euch Stück für Stück weiterführen. Da ich wohl ein schlechter Lehrer bin, werde ich mir dennoch die größe Mühe geben, um euch das HTML5 beizubringen. Und das schönste ist, ihr benötigt dazu keine Vorkenntnisse. Wir starten bei 0. (Wie mit meinem IQ :uwixx: )


    Was benötigen wir überhaupt, um mit HTML5 zu arbeiten? Das ist Gott sei dank sehr einfach. Im Prinzip benötigt ihr nur Notepad von Windows. Man kann aber auch Note++ oder meinen liebling nehmen, Atom. Diese Editoren zeigen die jeweiligen Tags in Farbe. Das macht Notepad von Windows z.b. nicht. Das Highlighten hat aber sehr große Vorteile. Daher empfehle ich euch, entweder Notepad++ zu nehmen oder den Atom. Beide befinden sich ier im Anhang zum Download.


    Ich denke, die erste Zeit sieht es für einige wohl "Chaotisch" aus, wenn man sich die HTML Tags (oder auch den Zeilencode selbst) ansieht. Aber mit der Zeit werdet ihr merken, dass es doch recht easy ist. Wichtig ist, keine Angst zu haben, etwas falsch zu machen. Fehler passieren und das ist auch völlig OK. Daher macht euch deswegen keinen Kopf. HTML5 ist eine schöne Sache, wenn man z.b. eine kleine Website bauen will, die jetzt nicht als CMS oder Firmenwebsite genutzt werden soll.


    Ich selbst nehmen HTML gern für kleine Intranet Seiten, die Inforamtionen enthalten. Also einfache Dinge. Aber man kann auch einiges damit machen, in zusammenarbeit mit PHP und CSS. Ich werde versuchen, euch alles hier zu zeigen und beizubringen.


    Atom Editor:

    AtomSetup-x64.zip


    Notepad ++

    npp.8.1.4.Installer.zip


    Inhalt des Kurses:



    PS: Warum HTML? Nun, damals im Jahr 1999, zu Zeiten der Berufsfachschule hatten wir in unserem EDV Kurs das Thema HTML. Da wir dort HTML von Anfang an gelernt haben und mir diese Art sehr gefallen hatte, habe ich in den Jahren darauf viel mit HTML gemacht. Auch später folgten eigene Homepages, welche ich selbst erstellt & gewartet habe. Es ist eine Leidenschaft. Daher möchte ich dies gern mit euch teilen.

    • Offizieller Beitrag

    HTML 5 Beginner Kurs - HTML 5

    So, beginnen wir nun mit den ersten Schritten zum Thema HTML5. Wichtig zu Wissen ist, dass die Tags mit "<" geöffnet werden und mit ">" geschlossen werden. Ähnlich wie andere Programmieresprachen. Merken wir uns also, Tags (Tägs ausgesprochen) müssen geöffnet und geschlossen werden. Macht man dies nicht, herrscht Chaos und das HTML Dokument sieht aus wie Kraut und Rüben.


    HTML5 folgt einer Vorgabe, wie man ein HTML Gerüst aufzubauen hat. Das ist wichtig, so wird der Standard eingehalten und alle Browser wissen, was man vom ihm will.


    Grundgerüst:

    Das ganze sieht doch schonmal gut aus. Was sehen wir hier? Wir sehen hier das Grüst, welches HTML5 definiert. Dieses Gerüst wird uns helfen, unsere Idee umzusetzen.



    Tag Bezeichnung
    		Tag Bedeutung
    <!DOCTYPE html>
    		Defeiniert die Datei / Daten als HTML
    <html lang="de">
    		Kennzeichnung der Sprache "de" = Deutsch
    <head>Kopf-Tag eröffent die Darstellung der Header Infos
    <meta charset="utf-8">Sorgt für die Umsetzung von Sonderzeichen, wie u.a. ä,ö,ü,ß usw
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Breite / Höhe
    <title>Titel</title>Schriftzug im Browser Fenster (Tab-Überschrift)
    </head>Schließt den Head Tag
    <body> </body>Öffent/Schließt den Body (Hier werden Texte, Tabellen usw. sichtbar angezeigt).
    </html>Schließt den HTML Tag ab. Dokument ist geschlossen für weitere Tags.


    Wie man sieht, alles halb so schlimm. Die Tags sind wichtig und diese lernt man auch mit der Zeit mehr oder weniger Auswendig. Daher macht euch darum jetzt erstmal keine Gedanken.


    Öffent euren Editor und kopiert den Quellcode in den Editor. Speichert eure Datei z.b. auf dem Desktop ab. Wichtig ist, beim speichern auf alle Dateien geht.


    Hinweis!

    Wenn man die Datei ohne <meta charset="utf-8"> abspeichern würde, würde diese auch über den Browse angezeigt. Nur mit dem Unterschied dass keine Umlaute und Sonderzeichen angezeigt werden können.


    Sodass ihr euer Dokument mit dem Namen: index.html abspeichert!


    Download der Datei: index.html

    index.zip


    Online ansehen:

    index.html



    Man kann das Dokument mit der Endung .html oder .htm speichern. Beides ist möglich, aber wichtig ist zu wissen ist, dass man dann alle weitere Dateiendungen ebenfalls so nennt. Nicht das am Ende Chaos herrscht.


    Umlaute wie ö,ä suw. sollten in den Dateinamen vermieden werden. Am besten diesen dann ausschreiben. Die Datei könnt ihr nun direkt öffnen, euer Webbrowser wird euch die Datei anzeigen. Allerdings ist da zur Zeit alles weiß. Das werden wir im nächsten Schritt ändern!

    • Offizieller Beitrag

    HTML 5 Beginner Kurs - HTML 5 und es geht weiter


    Nun, in der letzten Lektion haben wir uns eine .html Datei erstellt. Diese beinhaltet nun den HTML Body. Unser Gerüst steht. Beim öffnen der Datei sieht man zwar noch nichts auf der Seite selbst, aber der Titel steht oben im Browser Fenster. Das heißt soweit ist alles OK.


    Grundlegend hat eine Homepage ein Menü, den Content (Inhalt) und meist auch einen Footer (Fußzeile). Die grundlegende ist aber euch überlassen. Ich selbst baue gern ein Table-Layout welches via Tabellen erstellt wird. Sprich, die Tabelle liefert sozusagen Kästchen, in denen wir arbeiten. Ich zeige euch mal eine Grafik dazu:


    So könnte das Layout z.b. aussehen.


    Hier hat man wirklich viel Spielraum um seine Ideen umzusetzen. HTML5 bietet ja zu dem, die Einbindung von PHP sodass man, hier z.b. das Menü verlinken kann, ohne dieses auf jede Unterseite immer manuell einbinden zu müssen. Denn, würde sich ein Link ändern, müsste man somit jede Unterseite bearbeiten. Und wir faul sind werden wir uns mit Hilfe von PHP diesem Problem entledigen.


    Ebenso werden wir den Footer via PHP einbinden. Das spart sehr viel Zeit und Nerven.


    Da HTML5 weitaus besser geworden ist, als wie z.b. 3 oder 4. Somit können wir hier viel mehr machen. Aber bevor wir richtig los legen, ein paar Basics um z.b einen Link zu erstellen. Wir wollen ja auch später hin und her springen auf unserer Website, oder?


    Wir machen einen Hyperlink:

    Code
    <a href="impressum.html">Impressum</a>
    HTML TAGBedeutung des TAGs
    <a href = "XXX">TEXT</a><a href </a> öffent bzw. schließt einen Hyperlink
    <a href = "seitename.html">TEXT</a> = "seitenname.html">TEXT - Wert des TAGs, welches den Weg bestimmt. Somit ist seitenname.html das gewünschte Ziel. TEXT ist die Bezeichnung des Hyperlinks und wird als dieser anzeigt.



    Was ist das denn nun schon wieder, fragen sich einige? Das ist unser Wegweiser zwischen den ganzen Seiten später. Im Prinzip wird jetzt auf unserer index.html ein Link angezeigt, welcher "Impressum" heißt. Klickt man jetzt auf diesen Link, kommt Error 404 - nicht gefunden. Und warum? Weil es die Seite "Impressum.html" noch nicht gibt.


    Fügt nun diesen Code in eure HTML Datei ein.


    Seht euch die Datei nun an. Was seht ihr? Genau, einen Link auf der Seite. Wie oben schon erwähnt, würde der Link jetzt noch ins nichts führen. Aber klickt mal darauf. Passieren kann nichts :2:


    Hyperlinks



    Nun erstellen wir uns die impressum.html


    Dazu öffnet ihr wieder den Editor - Kopiert den Quellcode:



    Euch sollte aufgefallen sein, das statt Titel nun "Impressum" im Titel seht. Und das Link anders ist, dieser führt zurück zur Startseite. Probiert es mal aus :bbeer:


    Download: index.html und impressum.html

    index.zip

    impressum.zip


    Online ansehen:

    index.html


    Online ist jetzt die index.html und impressum.html - Glückwunsch, du hast bis jetzt zwei Seiten untereinander Verbunden. Somit kann man hin und her Navigieren. Hyperlinks sind sozusagen die Verknüpfungen innerhalb und außerhalb der oder einer Website. Somit verbindest du Seiten miteinander. Ziemlicher krasser Shit oder? :niko: