HTML gute Tutorials für den kompletten Neueinsteiger

[DLSBlocky]

Schönen guten Tag,

kennt jemand von euch gute Tutorials, indem man diese Programmiersprache ganz gut lernen und verstehen kann? Ich finde meistens nur welche, wo kaum Sachen ganz gut erklärt werden, sondern es wird einfach nur gezeigt und kopieren möchte ich es auch nicht.

Ich habe mir hier die https://www.youtube.com/watch?v=5IROawWXJNc&list=PL562F708A8BBC2739 ersten 4 Videos angesehen und gemerkt das, dass doch eher alte Schule ist oder? Ich konnte auch auf jeden Fall was von diesen Videos mit nehmen aber mir wärs ehrlich lieber wenn mir vielleicht jemand der sich in dieser Matiere sehr gut auskennt, bessere Tutorials empfehlen kann.

Gruß Max

 

[Bruzla]

SelfHTML!

 

[DLSBlocky]

Danke, reicht der Editor fürn Anfang oder sollte man sich eventuell doch ein kostenloses Programm holen? Die vereinfachen das ja nur richtig?

 

[Madman1209]

Hi,

SelfHTML +1, Notepad++ reicht vollkommen für den Einstieg.

Und nur als Ergänzung: HTML ist keine Programmiersprache!

VG,
Mad

 

[DLSBlocky]

Danke, solche seiten wie Facebook Youtube oder auch Computerbase wurden nicht alleine durch html erstellt. Was hat man denn genau für solche Seiten verwendet? Css? Wird das Layout einfach mit Photoshop gemacht und eingefügt in den Code?

 

[smallwall]

Selfhtml. Kopieren geht über studieren. Du musst immer gleichzeitig das ausprobieren was erklärt wird/du machen möchtest. Der Weg ist das Ziel und Du bist erst am Anfang.

Ergänzung (6. Juli 2014)

CSS ist für das Layout, PHP+JavaScript für die Funktionen und HTML für die Struktur. Anfangen mit HTML, dann CSS, dann PHP/JavaScript. Mit Photoshop erstellt man Grafiken, die man dann in HTML einfügen kann. Für eine einfache Seite braucht man aber kein Photoshop, das bekommt man mit HTML uns CSS hin.

 

[DLSBlocky]

Ich probiers einfach und zeigs hier dann mal

 

[smallwall]

Als Editor nimmst Du Notepad++ oder Phase5. Phase5 hat Syntax Highlighting und Autocomplete, das ist ganz nützlich.

 

[DLSBlocky]

Bei SelfHTML, soll ich da die Wikiseite benutzen oder die Vorgängerseite?

 

[Daaron]

Was hat man denn genau für solche Seiten verwendet? Css? Wird das Layout einfach mit Photoshop gemacht und eingefügt in den Code?

Wie man das Layout macht ist dem Designer überlassen. Der Trend geht WEG von Photoshop (bzw. GIMP. Kann dasselbe, teilweise sogar mehr, und ist Open Source). Das Problem an Layouts, die man mit Bildbearbeitungswerkzeugen macht: Sie sind absolut statisch. Sind Seiten statisch? Nein, sind sie nicht, zumindest nicht die guten. Gute Layouts reagieren auf Display- bzw. Browsergrößen, auf die Pixeldichte des Bildschirms, auf die Art des Eingabegerätes,... und natürlich haben gute Layouts noch flexible Animationen. Gute Layouts sind vierdimensional. Ja jetzt mach DAS mal in Photoshop...

HTML ist keine Programmiersprache, HTML ist eine Auszeichnungssprache. HTML macht keine Logik, HTML macht kein Layout. HTML macht einzig und allein SYNTAX, SYNTAX, SYNTAX. Wenn du HTML für was anderes als reine Strukturierung deiner Daten verwenden willst, dann verwendest du HTML komplett falsch.

Für alles, was die Optik angeht, also das Layout, ist in erster Instanz CSS zuständig. Nur wenn sogar CSS3 keine Antwort kennt greift JavaScript beim Layout unter die Arme.
Die Logik verteilt sich auf eine Server-Sprache (z.B. PHP) und JavaScript. Wenn die Logik rein auf Clientseite laufen soll, dann ist JS gefragt. Alles, was irgendwie system- und sicherheitsrelevant ist, macht hingegen die Server-Sprache. Bei JS kannst du dir nie sicher sein, dass es nciht manipuliert wird oder überhaupt korrekt abläuft.

Also ja: Computerbase besteht aus einem PHP-Backend, HTML, CSS und JS. Dazu gehört noch ne SQL-Datenbank, höchstwahrscheinlich MySQL.

Es bringt dir also GAR NICHTS, nur HTML zu lernen. Du musst mindestens die Heilige Dreifaltigkeit aus HTML, CSS und JS beherrschen, um ein brauchbares Layout umsetzen zu können. Willst du dann noch tiefere Funktionalität, dann musst du noch PHP, Perl, ASP.NET, Ruby,... lernen.
Und am Ende? Am Ende hast du IMMER noch kein gutes Layout, denn ein ENTWICKLER kann keine guten Layouts entwerfen. Ich hab noch niemanden getroffen, der gleichzeitig gute Layouts entwerfen und sie dann auch noch anständig implementieren konnte. Du brauchst immer 2 Leute, einer mit Feeling für die Optik und einer, dessen Herz für die Logik schlägt.

 

[smallwall]

Ich habe es vor etlichen Jahren von der Webseite gelernt. Ich denke für den ersten Einstieg ist die Seite besser. Aber wie dort schon steht, die ist nicht mehr up-to-date deshalb solltest Du irgendwann ins Wiki wechseln. Spätestens wenn Du verstanden hast, wie das HTML Dokument aufgebaut ist, wie Tabellen funktionieren, wie Formulare funktionieren und wozu <div> gut sind.

 

[Daaron]

Der einzige Fehler an der SelfHTML - Seite ist, dass es noch auf HTML4/XHTML1 setzt. Man muss sich dazu halt die Neuerungen von HTML5 erarbeiten. Das Zeug ergänzt HTML4 aber nur.

 

[DLSBlocky]

Ja wie gesagt, ich beschäftige mich erst mal damit und dann kann man ja weiter sehen. Ich hats mir eigentlich ganz anders vorgestellt. Also dient HTML eigentlich nur zur Formatierung, Strukturierung und allgemeinen Text bearbeitung? Soweit ich weiß hat man halt früher mit den Tabellen Layouts gemacht was aber ja seid längerem nun viel einfacher geht. Außer das in die html.datei dann alle codes reinkommen.

 

[Daaron]

HyperText Markup Language...
HTML macht ausschließlich Strukturierung, keinerlei Formatierung. Lediglich bei Elementen wie <b> und <i> könnte man sich streiten. Schaut man hingegen <strong> und <em> an, so haben diese Elemente neben ihrer optischen Wirkung tatsächlich auch eine semantische. <em> steht z.B. für "emphasis", also Betonung. Schreibe ich etwas in <em> so möchte ich es vom umliegenden Inhalt <em>hervorheben</em>.

Und nein, Tabellen sind keine Layout-Elemente. Das war vor 10-15 Jahren mal so, aber wenn du sowas heute noch bringst, dann wirst du dafür hoffentlich gesteinigt, gekreuzig, gevierteilt und deine Asche in alle 4 Winde verstreut.
<table> ist ein nützliches (bzw. das einzig korrekte) Element, wenn du tabellarischen Inhalt hast. Ein Produktdatenblatt wäre z.B. ein korrekter Einsatz für <table>. Verwendest du es hingegen für Layout-Aufgaben, so pisst du dir nur selbst ans Bein. Damit machst du dir einfach nur das Leben schwer.

Es geht nicht "leichter", ohne <table> Layouts zu schreiben. Manchmal möchten sogar erfahrene Entwickler auf Tabellen zurückgreifen... doch dann fällt ihnen ein, dass <table> hochgradig unflexibel ist, für die Barrierefreiheit nervt und hinsichtlich der Suchmaschinenoptimierung nervt (und mal ehrlich: Wir schreiben Webseiten doch eh nur, damit Google sie indiziert udn wir gefunden werden können).
<table> wäre z.B. viel leichter, um ein Multi-Column-Layout zu bauen. Du würdest aber spätestens dann kotzen, wenn du das Layout für Smartphones etc. umsetzen willst und die erste Spalte z.B. in den Kopf und die letzte in den Fuß rutschen soll...

 

[DLSBlocky]

Ich würde gerne die Schriftart meiner Überschrift verändern aber es möchte leider nicht funktionieren. Ich erklärs euch einfach, wie ich es versucht habe. Ich habe mir von http://www.schriftarten-fonts.de/ eine Schriftart geladen, entpackt installiert und danach einfach im Editor den Pfad des ganzen aufgeschrieben, wie es auch eig. erklärt ist. Aber es verändert sich leider nichts :/

 

[smallwall]

Sowas macht man mit Google Fonts oder ähnlichem, Du musst nichts auf Deinem Rechner installieren, wenn der Besucher es sehen soll.

Dein HTML ist, wie für Anfänger üblich, wirsch. Style angaben gehören in den <head>, nachdem der </head> geschlossen wird, muss der <body> anfangen. Du kannst nicht mit <p> und <img> anfangen, bevor der <body> anfängt.
In den style definitionen ist NUR h1 definiert, im body aber keine <h1>, die Schriftart für das gesamte HTML Dokument setzt du am besten im <style....> mit

 body {font-family: "Times New Roman", Times, serif; }

bzw die Schriftart Deiner Wahl.
Wenn Du an einer Stelle eine andere Schriftart benutzen willst, musst Du dem entsprechenden HTML Element im CSS eine andere Schriftart zuweisen.

 

[QXARE]

Du solltest darauf achten, dass die Font auch wirklich für Webdevices einsetzbar ist.
Es gibt auch einige Dienste wie Font Squirrel, die dir erlauben, eine normale Schriftart upzuloaden, um einen Webfont daraus zu generieren. Bei Font Squirrel bekommst du auch gleich Styledefinitionen für das Einbinden des Webfonts mit.

Hier ein Tutorial für das Einbinden von Webfonts.

 

[T0a5tbr0t]

Nehme was besseres als den Windows Editor. Damit sollte sich keiner Quälen müssen Irgendwas mit Syntax Highlighting, dann passieren deutlich weniger Fehler. Für den Anfang reicht da sowas wie Notepad++.
Dann öffne deine Seite im Browser und drücke mal F12. In den Entwicklertools kannst du dann sehen, was der Browser von deinem Code überhaupt verseht bzw. was der da raus macht.
Dann sollten auch recht schnell die Fehler auffallen:
Im <head> darf kein <h1> sein.
Der sichtbare Inhalt muss innerhalb des <body> Tags stehen. Die Browser sind da sehr Fehlertolerant, weshalb deine Absätze trotzdem sichtbar sind. (In den Entwicklertools kannste z.B. sehen, wie die <p>'s vom Browser in den <body> verschoben werden)
Das @font-face ist CSS und muss dementsprechend in einem <style> Block bzw. einer CSS Datei stehen.

 

[Daaron]

Von den ganzen grundlegenden HTML-Fehlern abgesehen... Verwende (nach Möglichkeit) keine wild irgendwo heruntergeladenen Fonts.

Bist du dir sicher, dass dir die Lizenz dein Vorhaben überhaupt erlaubt? Willst du dich des Risikos von Lizenzproblemen aussetzen? Die können sehr teuer werden...
Wenn du denn eine Datei zur Verfügung stellen darfst, dann muss die jeder Besucher bei dir laden. Bis das passiert, sieht die Schrift auf der Seite dezent beschissen aus. Lokales Hosting ist aufgrund der Funktionsweise von HTTP-Verbindungen ineffizient. Deutlich sinnvoller sind Content Delivery Networks.

Diese beiden Aspekte zusammen: Verwende einfach die Google Font API. All diese Schriftarten stehen unter Public Domain (die ideale Lizenz für sowas) und das Hosting übernimmt Google. Deine Besucher haben die Font im Idealfall woanders schon mal gesehen (auch ausgeliefert vom Google CDN) und somit im Cache. Hier gewinnen alle Beteiligten.

 

[DLSBlocky]

Dankeschön für die schnellen Antworten und ich habs soweit verbessert und ins Notpad++ geschrieben. Daaron ich habe schon drauf geachtet das ich diese Fronts, ohne Lizenprobleme benutzen darf. Aber ich werde dein Rat natürlich trotzdem annehmen und mir die von Google Font API nehmen.

Wie fängt man denn nun am besten an, um selber eine Webseite zu schreiben? Ich brauch erst mal einen Backround (dunkelgrün u. schwarz) danach würde ich dann die Anwendung für die BOX-Modelle benutzen und mir Kästchen bauen damit ich erstmal eine gewisse Einteilung habe (für den Inhalt später). Die Dinge bräuchte ich für mich, um überhaupt erst mal eine gewisse Vorstellung davpn zu kriegen wie die Webseite dann aussieht oder ist das komplett falsch?

Um es einfacher zu sagen, erst mal ein Template erstellen^^

Ergänzung (10. Juli 2014)

So würde ich halt anfangen, damit ich dann erstmal bissel rum basteln kann und schauen wie ich alles ordne. Mein Problem ist grad, das er die 2 Box die ich eben erstellt habe genauso verändert wie die 1.