HTML: Grundlagen (1) |
Ich hatte früher mal Informatik als Grundkurs, allerdings nur ein oder zwei Jahre in der Mittelstufe. Fand es ziemlich interessant, und war zwischendurch auch immer wieder nützlich, z.B. als ich das Layout meines tumblr blogs umgestaltet habe. Die liebe Kira arbeitet momentan an ihrem Projekt "Meet Fashion" und ich hab ihr gestern ein wenig über die Schulter geschaut und jetzt schon wieder Motivaton, mich wieder mit HTML zu beschäftgen. Man kann Websites so schön gestalten... und wir fangen mal mit den Grundlagen an. Habe auch vieles schon vergessen, Auffrischung ist sicherlich ratsam! Daher also eine Blogreihe zum Thema. Vielleicht interessiert es den ein oder anderen ja auch : D H T M L = Hyper Text Marker Language & ist mit dem http-Protokoll die Grundlage des world wide webs. Mit HTML werden die Strukturen einer Website beschrieben, also Dinge wie Kapitel, Unterkapitel, Bilder, Links zu anderen Seten und im Allgemeinen lässt sich mit der Programmiersprache die Struktur einer Seite gestalten. HTML-Dateien können mit jedem Text-Editor erstellt werden (z.b. Editor) - einfacher ist es mit speziellen HTML Editoren, die die Syntax (Sprache) beispielswese farbig markieren oder für Buchstabenkombis schon eine Vorschau geben (z.b. Dreamweaver). HTML-Befehle werden als tags bezeichnet. Diese bestehen fast alle aus einem Start-Tag: <Befehl> und einem End-Tag: </Befehl> Zwischen dem Befehl steht dann zum Beispiel der Text, der angezeigt werden soll. Die Tags selber werden nicht angezeigt, sondern vom Browser ausgeführt. Start- und Endtag sind wichtig, damit das Dokument korrekt angezeigt wird! Das Grundgerüst jedes HTML Dokuments sieht so aus: <html> <head> <title> </title> </head> <body> </body> </html> Wie man sieht, gibt es für jeden Tag einen Start und ein Ende. Jede HTML Datei besteht aus einem Head und einem Body. Im Head werden allgemeine Infos zum Dokument gemacht, hier im Beispiel ist es der Titel (<title> Text hierhin </title> ). Der Titel ist dann das, was der Browser in der Titelleiste anzeigt. Weiterhin kommen in den Head auch oft noch sogenannte Meta-Tags (z.b. keywords), die weitere Informationen für den Browser und den Server bereitstellt und Suchmaschinen hilft, die Seite zu indexieren. Der Body ist platzmäßig der längste Teil in einem HTML Code (daher wohl auch die Bezeichnung Head und Body, wenn man sich das mal figurativ vorstellt). Dort werden Infos eingegeben, die dem Besucher der Website angezeigt werden, Dinge wie Textelemente, Bilder oder Links, also der Inhalt der Seite. Ein wichtiger HTML-Tag ist zum Beispiel der für Absätze, um Texte zu strukturieren. Das ist dann der Befehl <p></p>, wobei p für paragraph = Absatz steht. Der Text, der angezeigt werden soll, steht zwischen Start- und End-Tag. Diese ganzen Text-Tags kommen in den Body der Seite. Die gespeicherte html Datei hat die Endung .html oder .htm - so wie es verschiedene Bilddateien gibt: .gif, .png oder .jpg zum Beispiel. __________________________________________________________________ Wer das selbst mal ausprobieren möchte: 1. HTML Grundgerüst z.b. in den Windows Editor kopieren 2. Beliebigen Titel eingeben (zwischen <title></title> ) 3. Im Body <p>beliebigen Text</p> eingeben, nach belieben noch ne weitere Absatzzeile mit Text einfügen 4. Speichern als .html Datei 5. Öffnen mit einem Brwoser, z.B. Firefox Und schon wird einem der Text angezeigt Weitere grundlegende HTML Befehle zum Ausprobieren: <br> einfacher Zeilenumbruch <i> kursiver Text (italic) <b> fetter Text (bold) <u> unterstrichen (underlined) <sub> tiefgestellter Text <sup> hochgestellter Text Achtung: End-Tags nicht vergessen. : D _______________________________________________________________ _______________________________________________________________ Den nächsten Blog in der Reihe gibt's zum Thema Textarten und weiteren Darstellungsmöglichkeiten von Text. Würde mich über ein Feedback freuen! ^_^ |