HTML Tutorial Nr. 1

vom 23.05.2008, 17:07 Uhr

Nun der erste Teil in meinem HTML-Tutorial. Gehen wir davon aus, ihr wollt eine Website machen. Zunächst öffnet ihr den Editor: =>Start =>Zubehör =>Editor

Als erstes kommt ein Code, der sehr wichtig ist. Man kann sich vorstellen, dass HTML Wie ein Körper aufgebaut ist. Also fangen wir an.

1. Grundgerüst: Das Grundgerüst ist aufgebaut in:

TobiHobi hat geschrieben:<html>
<body>
Hier kommen später die Codes rein (nachfolgende Tutorials)
</html>
</body>


Ich erkläre euch jetzt das Muster:

<html> : Anfang (Kopf)
<body> : nach <body> kommen die HTML Codes in den anderen Turorials (Körper)

</bodyl>: (Ferse)
</html> : (Fuß)

Jetzt ist euer Vorstellungsvermögen gefragt. HTML ist also wie ein Körper aufgebaut.

Bild: http://80.190.202.79/pic/t/tobihobi/html.jpg

WCIHTIG: An den letzten beiden <html> und <body> habt ihr doch bestimmt schon was gesehen, und zwar die Schrägstriche: "/"
Diese Schrägstriche beenden immer einen Code! Dies werdet ihr auch in den nächsten Tutorials merken.

Damit ihr das, was ihr bis jetzt gelernt habt auch umsetzen könnt, machen wir jetzt einen kleinen Workshop. Ihr folgt einfach meinen Anweisungen.

Workshop: 5 Minuten Homepage

So, als erstes öffnet ihr ein neues Editor-Dokument.
=>Start =>Zubehör =>Editor

Dann schreibt ihr:

<html>
<body>

Dann könnt ihr einen kleinen Text schreiben , z.B. : "Meine erste HTML-Homepage" oder so was halt!

Das ganze sieht dann so aus:

<html>
<body>

Meine erste HTML-Homepage


Aber ihr wisst ja schon, dass noch etwas fehlt. Richtig, der Schluss!

Der sieht dann so aus:

<html>
<body>

Meine erste HTML-Homepage

</hmtl>
</body>


Wenn ihr das fertig habt, dann speichert es ab:
Also, oben auf =>Datei =>Speichern unter => Bei Dateiname: (eigentlich müsste „.txt“ dastehen, aber wir nennen es MeineHTMLHomepage.html
Alle Dateien von HTML werden unter „.html“ abgespeichert
als letztes noch bei Dateityp =>Alle Dateien
Am besten ihr speichert es auf dem Destkop, da habt ihr immer gleich zugriff darauf.

So, wenn ihr jetzt die gespeicherte Datei öffnet, müsstet ihr so was erhalten:

http://80.190.202.79/pic/t/tobihobi/screen2.jpg

Das war der erste Teil in meinem HTML-Tutorial, weitere folgen.

» TobiHobi » Beiträge: 45 » Talkpoints: 0,11 »



Da ist dir doch glatt ein Fehler unterlaufen: Du hast den <head> -Tag vergessen. Dieser ist schließlich wichtig für die Seite. Falls es in einer deiner folgenden Tutorials kommen sollte, finde ich es nicht sehr gut, dies sollte gleich im ersten erwähnt werden.
Das Grundgerüst einer HTML-Seite sieht so aus:

Code: Alles auswählen
<html>
  <head>
    [<title>Hier kommt euer Seitentitel rein, der oben im Fenster zu sehen ist</title> ]
  </head>
  <body>
    Hier kommt euer Code für die Homepage rein
  </body>
</html>

Das was in eckigen Klammern gefasst ist (<title>), ist nicht unbedingt notwendig gehört aber mehr oder weniger doch zum Grundgerüst.

Ansonsten habe ich jetzt keine weiteren Fehler gefunden.

Benutzeravatar

» redrob » Beiträge: 495 » Talkpoints: -1,97 » Auszeichnung für 100 Beiträge


Eigentlich ein gutes Einstiegstutorial nur beim letzten Code-Zitat heißt das End-Tag </html> und sollte nicht </hmtl> heißen (ist aber glaube ich nur ein Tippfehler), aber ansonsten wird es wahrscheinlich mehreren Usern hier helfen. Ich ringe im Moment auch mit dem Gedanken ein paar Tutorials reinzustellen.

» MattiS.D-Sign » Beiträge: » Talkpoints: Gesperrt »

Zuletzt geändert von Gio am 01.09.2013, 17:42, insgesamt 1-mal geändert. Zeige Beitragsversionen


Hallo,

ist zwar nicht böse gemeint, aber warum machst du die die Arbeit, ein Tutorial zu schreiben? HTML ist "allgemein" bekannt und nichts neues. Demnach findet man unzählige Tutorials (ich empfehle de. selfhtml. org) dazu, die weit besser und ausführlicher sind und auf nahezu alle möglichen Fragen eingehen.

Ich würde Tutorials zu Themen begrüßen, die es so noch nicht gibt oder nur wenig behandelte Themen behandeln. Dadurch könntest du bestimmt mehr User ansprechen ;)

Ansonsten würde ich auch noch Bilder verwenden, da diese einfach oftmals mehr ausdrücken, als zehn Zeilen Text.

» UNIX » Beiträge: 6 » Talkpoints: 0,00 »



Hallo,
Ich wollt fragen was bringt mir jetzt die obere Beschreibung? Ich meine, bekomme ich dann so ein Bild wie http://80.190.202.79/pic/t/tobihobi/html.jpg hier oder erstelle ich damit eine eigene Homepage oder eine Header also Ich bin kein erfahrener Computeruser und kann mit der angegebenen Anleitung nichts anfangen.

Könnte mir jemand das ganze etwas genauer erklären da ich mich in diese ganzen Computersachen etwas mehr vertiefen will um es zu verstehen.

Benutzeravatar

» kingglouki » Beiträge: 87 » Talkpoints: -0,42 »


@kingglouki: Es geht beim ganzen Thema um die Auszeichnungssprache HTML. Dieser Beitrag soll dir helfen, die Grundlagen von HTML zu erlernen. Wofür du das später gebrauchen kannst (sobald ein paar mehr Teile da sind jedenfalls vielleicht)? Damit kannst du nachher Webseiten selber "coden". Warum selber coden und nicht einen Baukasten oder ein WYSIWYG-Editor (fertig-Prorgramm) benutzen? Da man bei diesen häufig auf Grenzen stößt, das manche Sachen sich damit nicht so wie man es gern hätte realisieren kann. Und dann freut man sich, wenn man den Code einfach selbst schreiben kann.

Also: Ja, mit HTML kann man Webseiten selbst bauen, sofern man es beherrscht.

Benutzeravatar

» Taline » Beiträge: 3594 » Talkpoints: 0,75 » Auszeichnung für 3000 Beiträge


title ist notwendig. Genauso ist ein doctype notwendig. Wenn man so anfängt, kann man alles weglassen. Denn grundsätzlich wird zur Anzeige garnichts benötigt. Ich könnte euch mit Unterrichtsmaterial zuwerfen. 3 Jahre Informatik LK ;) Stoff aus der Uni geht bestimmt bischen zu weit. Besonders, da man ich da eigentlich nicht mit Webprogrammierung beschäftigt. Aber das sieht mir eher nach "Schau mal was ich evtl. schon kann" aus.

Wer sowas ernsthaft lernen will, arbeitet sich in bestehende System ein. Kauft sich Bücher. Erkundigt sich bei einer Volkshochschule. Oder bei privaten Lehreinrichtungen. Natürlich sollte das für html wirklich nicht nötig sein. html hat sogar eine sehr überschaubare Anzahl an tags(Befehlen)

» sapperlot » Beiträge: 12 » Talkpoints: 0,00 »



Ähnliche Themen

Weitere interessante Themen

^