HTML Einsteiger Tutorial

Page 1 of 2 1 2
09/17/2013 15:50 xkap50x#1
Hallo epvper!

Ich habe erst wenige HTML Tutorials hier gesehen und vor allem sehr wenige für Einsteiger!

Erstmal das was sich niemand durchlesen wird:
Was ist HTML?

HTML (=Hypertext Markup Language) ist die (behaupte ich) einfachste art einfache Websites zu erstellen. Es gibt mehrere möglichkeiten ein HMTL Dokument zu bearbeiten. Um anzufangen empfehle ich einen Editor wie zum Beispiel Notepad++ (Freeware).
Man kann das ganze auch mit sogenannten WYSIWYG(=What You See Is What You Get)-Programmen machen, aber man sollte die Sprache schon beherschen. Ich werde in dieser Tutorial Reihe NUR HTML benutzen. (Kein javascript, kein CSS, usw.)

Wie man ein HTML Dokument speichert sollten alle wissen, aber ich sgas trotzdem nochmal: Neues Textdokument erstellen -> Öffnen -> Datei -> Speichern unter... -> Als Endung NICHT .txt sondern .html

Erste Coding Schritte

Wir öffnen das HTML Dokument ggf. mit Notepad++ und sehen eine leere Seite.
Als erstes braucht man das HTML "Grundgerüst"
Code:
<html> 
	<head> 

	</head> 
	<body> 

	</body> 
</html>
Man sieht schon hier wie im Grunde die ganze Sprache aufgebaut ist.
Einen Tag auf:
Code:
<example>
Einen Tag zu:
Code:
</example>
Ein Vollständiger Tag kann z.B. so aussehen:
Code:
<div id="menu" style="margin-top: 10px;">INHALT</div>
Erklärung des Grungerüsts:
  • html: Umfasst das gesammte HTML Dokument wird evtl später wichtig.
  • head: Der Head, also Kopf bereich ist für alle nicht auf der Seite sichtbaren Dinge zuständlich. javascript, irgendwelche Verweise, der Name der Seite und so weiter.
  • body: Der wichtigste Teil ist der Body. Alles auf der Seite Sichtbare muss hier fesgelegt werden.


Die wichtigsten Tags


Die wichtigsten CSS befehle (Style="")

Ich hoffe ihr habt bisher alles verstanden, ich würde mich über ein Thanks freuen wenn es euch gefallen hat.

Bis dann

xKap50x aka kevin Die Seegurke
09/17/2013 17:26 alpines#2
Ein wesentlicher Punkt der aus deinem Code heraussticht sind die Code-Einrückungen.
Ein gut strukturierter Code sieht besser aus und ist besser verständlich, schau dir mal das an:

Das ist doch ein bisschen knapp geworden für eine so umfangreiche Sprache, wesentliche Punkte die fehlen, wäre die Anbindung an Flash / CSS sowie Javascript.

Beispielsweise fehlt die Beschreibung was angezeigt werden soll wenn das Bild nicht da ist (alt= war das glaub ich) sowie der ToolTip der angezeigt wird, wenn man mit der Maus drauf anhält.

Außerdem kann man auch die Schriftart von einem h1/h2/h... ändern, sowie Backgroundcolor und etliche andere Sachen und was bringt denn der <head> Tag wenn man nur Title drin stehen hat? Content-Type oder Charset kann man dadurch auch einstellen, und Stylesheets und Javascripts einbinden.
Tabellen sowie Weiterleitungen (anchor href (a href)) fehlen auch und was überhaupt nicht erwähnt wurde sind die p sowie div tags.

HTML alleine ist nicht so schön wie wenn man es mit CSS verbindet, deshalb finde ich das man auch die Anfänge von CSS ein bisschen erklären sollte.

Wenn man dein Tutorial durchliest müsste man noch andere weiterlesen, weil es nicht weiterführend ist sowie unvollständig ist, du solltest das ganze nochmal durchdenken und erweitern, sowie ein Inhaltsverzeichnis anlegen (letzteres ist nicht ganz wichtig aber schön).

Ich möchte dein Tutorial nicht schlecht reden, aber es verträgt eine Überarbeitung.
09/17/2013 17:58 xkap50x#3
Quote:
Originally Posted by alpines View Post

Außerdem kann man auch die Schriftart von einem h1/h2/h... ändern, sowie Backgroundcolor und etliche andere Sachen und was bringt denn der <head> Tag wenn man nur Title drin stehen hat? Content-Type oder Charset kann man dadurch auch einstellen, und Stylesheets und Javascripts einbinden.
Tabellen sowie Weiterleitungen (anchor href (a href)) fehlen auch und was überhaupt nicht erwähnt wurde sind die p sowie div tags.

HTML alleine ist nicht so schön wie wenn man es mit CSS verbindet, deshalb finde ich das man auch die Anfänge von CSS ein bisschen erklären sollte.

Wenn man dein Tutorial durchliest müsste man noch andere weiterlesen, weil es nicht weiterführend ist sowie unvollständig ist, du solltest das ganze nochmal durchdenken und erweitern, sowie ein Inhaltsverzeichnis anlegen (letzteres ist nicht ganz wichtig aber schön).

Ich möchte dein Tutorial nicht schlecht reden, aber es verträgt eine Überarbeitung.
Aus diesen Gründen habe ich es HTML Einsteiger genannt. Ich werde das ganze nochmal komplett um designen und nur die einleitung lassen. :) Danke für diene Hilfe.
09/17/2013 17:59 alpines#4
Freut mich das ich helfen konnte, dann viel Spaß beim erweitern.
09/17/2013 18:28 xkap50x#5
Quote:
Originally Posted by alpines View Post
Freut mich das ich helfen konnte, dann viel Spaß beim erweitern.
Danke :) Ist es jetzt besser? Für Einsteiger :)

CSS und vor allem Javascript sollte man meiner meinung nach erst machen, wenn man HTML gut kann.
09/17/2013 20:14 alpines#6
CSS ist aber schon Basis in jeder Website, ohne CSS kannst du eine Website nicht so gut gestalten.
09/17/2013 20:26 xkap50x#7
Quote:
Originally Posted by alpines View Post
CSS ist aber schon Basis in jeder Website, ohne CSS kannst du eine Website nicht so gut gestalten.

Erstmal geht es in den divs auch mit style=""
09/17/2013 20:38 Synatex#8
Quote:
Originally Posted by alpines View Post
CSS ist aber schon Basis in jeder Website, ohne CSS kannst du eine Website nicht so gut gestalten.
Es lässt sich vieles auch noch über alte Attribute wie bgcolor und Co. aus Kompatibilitätsgründen verlagern, was in keinem Inline-CSS resultiert und somit auch nicht zwingend notwendig wäre und vor allem nichts in einem HTML Tutorial zutun hat :D
09/17/2013 21:31 alpines#9
Das style Attribut bei div tags ist CSS!
09/17/2013 23:31 Synatex#10
Wenn du meinen Post gelesen hättest, habe ich auch genau dies gesagt :)
09/18/2013 12:26 alpines#11
Dann wäre das ja auch geklärt :D Mal schauen wie das Tutorial noch weiter ausgebaut wird.
09/18/2013 16:15 xkap50x#12
Quote:
Originally Posted by alpines View Post
Das style Attribut bei div tags ist CSS!
Stimmt schon, aber nicht in einer externen Datei und auch nicht mit text/style...BlaBla Eingebettet. Ich mache gleich noch eine Liste mit den wichtigsten CSS befehlen für style="..."
10/12/2013 07:56 .Swek#13
Du solltest als Anfaenger nicht Notepad++ sondern Dreamweaver CS 5.5/CC benutzen, weil man dort beim anfangen des Schreibens der Commands ne komplette Liste davon bekommt, damit man sich diese einpraegen kann. Bei Notepad++ muesstest du ja jede einzelnde Value und Command einzelnd nachschlagen, find ich ueberfluessig.
10/12/2013 15:06 alpines#14
Das ist aber Gewöhnungssache, Leute kommen mit einem SDK / IDE besser zurecht und andere können das ohne viel besser.
10/12/2013 18:20 Synatex#15
Quote:
Originally Posted by .Swek View Post
Du solltest als Anfaenger nicht Notepad++ sondern Dreamweaver CS 5.5/CC benutzen, weil man dort beim anfangen des Schreibens der Commands ne komplette Liste davon bekommt, damit man sich diese einpraegen kann. Bei Notepad++ muesstest du ja jede einzelnde Value und Command einzelnd nachschlagen, find ich ueberfluessig.
Genau andersrum. Jeder sollte das Grundwissen aufweisen können. Wenn man es einmal gelernt hat, kann man sich auch Hilfsmittel dazu nehmen. Genau das gleiche beim Taschenrechner: Du lernst einmal +,-,*,/ aber um dir das Leben einfacher zu machen nutzt du dann ein Hilfsmittel ;)
Page 1 of 2 1 2