HTML-Kurs MWWEB M.WENZEL Gernsheim

HTML - Programmierung

Ich zeige Ihnen die Programmierung mit dem MS-Editor, ohne Schnick-Schnack, ohne automatischen Html-Code-Producer. Das Programmieren des HTML ginge auch ohne alle Voran gehenden Codes und sogenannten Metatags im Headbereich.(metatägs, ausgesprochen), aber dann wüssten die Suchmaschinen nicht so genau was sie suchen sollen. Man hat dann auch nicht die Umlaute, denn durch den META "text/html; charset=windows-1252" werden die deutschen Umlaute gebildet. Fehlt er, kann man keine deutschen Umlaute, sowie scharfes ß sehen, sondern, sozusagen chinesische Sonderzeichen. Außerdem wird jedes mal beim Starten der Seite die HTML-Seite aufgerufen, wo diese Html-Sprach-Generierung eingeleitet wird. Diese Metatags sind meist nur für die Hauptseite, die index.htm nötig, aber nicht für die Unterseiten, da hier schon die meisten Codes aufgerufen sind!
Die HTML-Struktur: Head und Body: sieht immer so aus: "<"html">"<"head">"
"<"/head">""<"body">"Nach der ganzen Programmierung:"<"/body">"Und ganz am Ende der HTML-Story, kommt: "<"/html">". Im Head -Bereich wird der "<"Title">" eingegeben. Hier ist das Wort , das im Browser den Namen der Datei zeigt. Gefolgt von "<"/title">"
Die Ausrufezeichen müssen Sie sich wegdenken, denn die sie dienen nur der Nichtausführung des HTML-Codes, so wird Html darstellbar.
Die Linkfarben:Der link "blue" , lässt sich auch als hexadezimal als "#6495ED", einfach mit "blue" bezeichnen! Farben gehen nur in Englisch, siehe meine Seite: einfach nur mwweb.xdn.de eingeben, schon sehen sie in der 1. Link-Zeile den "Java Fun Farbcode". Hierin sind auch alle unbekannten Farben aufgelistet!
Vlink ist der besuchte Link (visited), etc. Dieser lässt sich auch im Farbwert ändern, wenn z.B ein dunkler Hintergrund gewählt wird, um die Schriftfarbe auf zu hellen! Der A-link ist der vormals besuchte Link, zweckmäßig wenn dieser in anderer Farbe weniger leuchtet.
Im Body-Bereich, Hier sehen Sie in dieser Seite!
Man kann dann die Seite mit der Schrift beginnen, die dann einfach zwischen den Spitzen der< > Größer kleiner-Zeichen stehen muss. Zwischen diesen Spitzen stellt man"<"br">"für nächste Zeile. oder z.B. "<"h2">" für Fettschrift und nachher muss außer der Tag (Täg) mit "/" "<"/h2">" geschlossen werden: Ein Beispieltext hieße.

Das ist Großschrift von h1-h9 vergrößerbar. Auch lässt sie sich durch h+ vergrößern."<"/"h2">"


Das ist der zweite Text in Normalschrift, darunter durch BR die Nächste Zeile kommt (Vormals Cariage Return). Man kann dann durch simples "b" in spitzen Klammern ein Wort fett machen. Also so: "<"b">"
Das ist Fettschrift."<"/b">".Man kann auch den Text so Abbilden wie er im Programmiermodus steht, durch "pre" vor dem Satz und nach dem Satz "/pre". "p" und durch p="/p" bringen den Blocksatz! Hierbei lässt sich aber nicht die volle Html-Programmierung ausführen, weil diese dann sichtbar wären, etc.

So sieht das bisher beschriebene in HTML aus.
Hier unsere Seite wie bisher genannt. Bei Internetworx.de, freier Internetdienst!
Von Heise.de gibt es z.B ein Html-Editor mit 5 Sternen: den Html-Editor-phase5623install.exe von der Seite HTML-Editor free herunterladbar!
Auch ein Browser Ihrer Wahl ist herunterladbar: Browser Wahl. Maxthon stellt links eine senkrechte Leiste hin, die jedes mal erst durch Berühren des "Config" schließbar ist.
Auch der Internetexplorer vormals sehr gut, ist durch massige Reklameleisten (Toolbars) unerträglich langsam geworden, als Microsoft ihn übernommen hatte! Desh. lösche ich alle Toolbars vom PC, denn die Langsamkeit ist unerträglich. Wie gesagt hilft der CCleaner, kostenlos vom Web. Er ist bestens, besser als TechTV sagt, gehört er nicht zu den Schlechten, Kostenlosen. Anders als der "Registry Cleaner", der hunderte Fehler findet, doch nur nach Bezahlung etwas repariert!
Hintergrundfarbe: Das Kommando "<"body bgcolor="palegreen"">" heißt blassgrün.
Schriftfarbe: "<"body Text="#0000FF" "> " oder Blue."<"body Text="00FF00" ">" oder green. "<"body Text="#FF0000" ">" oder red. "<" Body Text="#FFFF00" ">" oder Yellow. Oder
Hintergrundfarben: "<"Body BGColor="#000000" ">" Oder z.B.Schwarz. Oder "<"Body BGColor="#FFFFFF" ">" oder Weiß.
Schriftarten: "<" Font Face=""serif, sans serif oder mono space">"...."<"/font">" oder acril,old english Text MT">" siehe im Windows-Ordner Fonts!
Nach "<"head">""<"html">" Warnung"<"blink">"...Warnung..."<"/blink">". Ich hoffe es geht in allen Browsern.(Netscape bestimmt).
Schreibmaschinenschrift. "<"Font Face="TT" ">"
Listen erstellen: "<"UL TYPE=square">" oder UlType=disc oder UlType=circle. Vor jedem Wort "<" LI">" Listen erstellen: "<"ol">" oder "<"ul ">" vor jedem Wort. Für Aufzählungszeichen.
Die im Editor ihres Providers oder z.B. der simple Text-Editor des Windows. Es gibt im Internet auch kostenlose Editoren, die mit Farbdarstellung des Textes und im Unterschied in den Codes deutlicher sind.
Die neu erstellte Web-Seite muss als index.htm oder index.html gespeichert werden, denn dann wird sie unter dem Namen den ihnen ihr Provider gibt aufgerufen, z.B bei dem Internetprovider vom Heise.de -Verlag oder vom Internetworx.de der für 1Euro (einmalig) dem Anfänger gute Chanchen bietet. Goustbook, E-Mails, Besuchercounter, usw. Dort kann man zwischen 40 kostenlosen Endungs-Namen wählen, z.B. Mwweb.xdn.de (meine Adresse) oder z.B. ...de.ae, ch.ae,at,gd, eu.gd,no.si,fi.si oder auch h-page.de, forbidden.de, lieblingslinux.de, love-radio.de, istdiebeste.de, istclever.de, isgreat.de, suby.de usw.
Der Hintergrund einer Webseite lässt sich durch einen Befehl (gleich als "<"Body">"-Befehl!) "<"BODY BACKGROUND=ihr Farbverlauf...etc.jpg width=55">" (z.B.)einfügen. Die Gänsefüßchen müssen Sie sich halt wegdenken. Die Schrifthöhe lässt sich auch durch "<"font size="4"">" einrichten. 4 für mittelgroße Schrift.
Um Gifanimationen zu schaffen, empfehle ich den Micrografx Picture Puplisher. Leider wird er nicht mehr produziert, sondern nur die Alten Versionen verkauft. Die Version 8.0.1 ist mit Gif-Animator, er hat optimale Bildbearbeitungs Möglichkeiten. Z.B. rotierende Schriften in Goldlook oder Farbverlaufstreifen die sich in Webseite aneinander Reihen und einen Verlaufs-Hintergrund par Exelance machen! u.a.z.B:
In Ihm lassen sich auch Bilder in 1 Jpg-Bild Texte einfügen u.so ein ganzes Bild als Webinhalt hochladen! Siehe Musikkurs.
Um ein Bild z.B. eine Gifanimation hoch zu laden, müssen sie den Code "<"img" src="zauberpiano.gif">" eingeben.
Um dieses Piano (Größe width=500) zu verkleinern gibt man hinter das Ladecommando den Befehl mit Abstand "width="20"">" ein, dann ist es kleiner.
Um es auf den linken Rand zu bringen genügt hier das "<"br">". Normal ist der Code:"<"img src"="zauberpiano.gif"">"
Hier ist es dann in der Größe: "<""width="40">"
Um es auf die linke Seite zu bringen, benutzt man den Code"<"img src="zauberpiano.gif" "ALIGN=left" width="40">". Um es auf die rechte Seite zu bringen benutzt man den Code "<"img src="zauberpiano.gif" align=right">""
Durch den Center Befehl wird das Bild oder Text-Objekt zur Mitte geschoben. also"<"center">" und "<"img src="zauberpiano.gif" width=40 ">"

Alle Bild- und Webnamen müssen exakt über ein stimmen und lassen sich am besten von einer anderen Seite vom PC-Verzeichnis mit der rechten Maustaste kopieren und im Editor wieder einfügen. Das erspart immens viele Zeit!
Um eine bestimmte Stelle auf der Seite aufrufen zu können, also z.B. in einem Inhaltsverzeichnis, werden #Link-Kommandos verwendet. Z.B.: "<"a href="#link1">"<"/a">""<"br">" Damit wird die folgende Stelle in der Seite aufgerufen. "<"a name="link1">""<"/a">" . Es lassen sich auch Namen wie #Top oder #end und andere benutzen.
Durch Anfügen eines "<" Img src="Bildes.gif" lässt sich dann ein bewegtes "GIF"-Bild ihrer eigenen Fertigung ausführen!
Java-Applets lassen sich im Internet viele finden, meine Applets lud ich immer von Flash Vortrex runter. Die sind erheblich toller in der Wirkung als die Gif-Animationen. Sie brauchen aber alle einen Java-Treiber. Im Internet kursieren vielerlei Programme, aber man muss Vorsichtig sein, wegen GEMA-Verstoß.
Bilder müssen älter als 70 Jahre sein, jetzt sogar älter als 250 Jahre. Die Künstlerbilder oder Musik sollen bald nicht mehr mit 1300 Euro, pro Stück von der GEMA abkassiert werden. Auch beim Fotografieren ist es nicht erlaubt weniger als 7 Personen zu fotografieren um nicht mit Entschädigungsforderungen belastet zu werden!
Um etwas größer zu schreiben setzte ich hier das "<"font size=+1">" BIGGER
Webhostlistingvergleich bei Webhostlist.de und wieder das "<"/font">"
Damit ist die Schriftvergrößerung abgeschaltet!
Um Tabellen zu schaffen ist das zunächst sehr einfach: Man schreibt zunächst das umfangreiche "<"table border="1" cellpadding="0" style="mso-cellspacing: 2.0pt; margin-left: .2pt">" umschlossen von Tags, oh. Anführungszeichen! ">".
Einfacher geht es auch: "<"table border=1">" So erhält man auch einen einfachen Doppelrand. Danach schreibt man "<"tr">" sozusagen für den 1. Tabellen Rand. Danach schreibt man "<"td ">" und den 1.Text hinein , gefolgt von"<"/td">" und danach"<"td">" , den 2.Text der 2.Spalte. Danach"<"/td">" , danach"<"td"> und den 3. Text in die Spalte, danach"<"/td">"(durch td) und nach der letzten Spalte geben sie einfach "<"td">"danach,4.Text und durch /td ein, danach"<"/tr">". Um weitere Zeilen zu machen, wiederholt man das Ganze ab "<"tr">" bis "<"/tr">". Es müssen immer die gleiche Anzahl von Spalten gegeben werden. Schreibt man ein "<"center">" vor das Kommando "<"tablet">", und ein "<" /center nach dem Kommando Tablet, dann wird in der ganzen Tabelle das Centrieren des Textes durchgeführt, also mittenbündig. Um den anschließenden Text nicht zu verändern, muss der Schließbefehl des /center vor den Tablet -Befehl gesetzt werden.
Die Tabelle sieht dann etwa so aus:
Tabellentest; Text12. Text3.Text4.Text
5.Text
Wie man sieht richtet sich die Tabellle nach der Wortlänge aus.
Schließen mit "<"/table">". Auch hier passt das img=src-Kommando in die cd und /cd-Kommandos, hinein. Um in einem Tag zwischen TD und /td oder th eine Abkürzung ein zu fügen setzt man das Attribut "abbr".
Th und duch /Th benutzt man um eine Schrift fett zu machen (geht nat. auch durch jeweils im Kästchen b und, aber am Schluss dann wieder mehrfach durch b , damit das nachfolgende nicht gleichmäßig fett ist.
Gute HTML-Tabellen-Einführung
Um einen Link einzufügen, geht man so vor: Man holt sich ein Bild in den Internet Explorer, Opera, Googlecrome, Firefox, oder was immer, hinein, in dem man den Link setzt: "<"img src="Bildname.jpg" "<"/a">" oder ...gif oder ähnliches. Der Jpg -und Gif-Format ist klein, der Gif Format bezieht sich auf S/w oder weniger Farben, Bewegte Gif-Animationen: , also bewegte Bilder sind mit einigen Farben.
Auch der png-Format, hat geringen Speicherplatz. Während der BMP und "TIFF"-Format zu groß für das Internet ist. Es gibt auch das Webp-Format was sehr klein ist.
Der Link lässt sich auch im Falle der Bilder mit width und hight aus statten, das heist es lässt sich die Größe ändern. Auch kann man im Internet Explorer die Alt-Statments sehen, im Opera nicht. Man fügt also innerhalb des links: "<"a href img src="bildname.jpg" alt="Fliegender Holländer o.ä."">" ein. Dies sieht auch bei fehlendem Bild informativ aus!
Der Link leuchtet immer in den nach den im Bodylink angegebenen Farben, meist rot auf.
SO sieht ein Link aus mit dem andere Seiten hochgeladen werden. : "<"a href="http://"webseite.html" ">" öffnet, solange das "<"/A">" nicht gesetzt ist, den Link mit den Nachfolgenden Wörtern mit einbezogen werden. Wenn man also auf die folgenden Worte, Bildern, etc drückt, erscheint der Link ebenso.
Wenn der Link auf der eigenen Speicher-Seite des Net-Providers liegt, dann setzt man vor den Link"" http"" 1 Punkt .//"Linkname". Damit findet die Seite schneller oder überhaupt den Internet Explorer.
Ganz am Schluss gefolgt von "<"/table">". Zum Abschluß der ganzen Seite wird prinzipiell ein "<"/body">" und "<"/html">" geschrieben, um die Funktionen abzustellen.!
Um eine Größen-Änderung der Schrift oder der Feldgröße, kann auch bei der Tabellenkonstruktion mit dem Kommando width und hight gearbeitet werden. Also etwa "<" table border =1 width =33% hight=19%">"
Das lässt sich ähnlich auch bei Bilddarstellung anwenden.
"<"img src="zauberpiano.gif" width=5%">"
=5% =10% =15%
Durch das Verwenden des kaufmänn.-Und, also "&" lassen sich mit z.B. "&"nbup;", Leertaste, durch "&"ensp; und "&"emsp;" Leerzeichenbreite erstellen. "&"endash; = Bindestrich und "&"mdash; Durch das kaufm.-Und="&#" 8364 lässt sich der Euro darstellen.
MARQUEE ist Befehl für hin und/oder her laufende Schrift: Z.B: "<"MARQUEE SCROLLAMOUNT=2 SCROLLDELAY=0 BORDER="0"">"...Ihr Text... "<"/marquee">". Vorher gibt man die Größe der Schrift an:"<"Im Marquee-Kommando Bordercolor =green, red oder was immer">""<" Font size=5">"
MWWEB - WebseitengestaltungDanach "<"/font">" sonst wird die nachfolgende Schrift beeinflußt.
Will man einen Film auf Youtube hochladen, wird das bei Youtube einfach erklärt. Um sie in die Webseite einzufügen, kopiert man den Namen aus der Adresszeile oben und fügt sie in seinen Editor ein. Danach wird der Link: "https://www.youtube.com/channel/UCgAHdb2sqfWpwrfkq9tlkwg" so eingebaut: "<"a href="https://www.youtube.com/channel/UCgAHdb2sqfWpwrfkq9tlkwg" target=blank>Meine Filme auf Youtube"<"/a">"
Meine Filme auf Youtube
Das Kommando "Target = Blank bedeutet in einem neuen Tab, also in einem neuen Fenster, (Fenster heißt bei Opera neuer Browser öffnen)
Wenn man eine Seite aufruft, die im selben Verzeichnis steht ist es oft hilfreich einen Punkt vor den Schlash des http:-Aufrufs zu stellen. Steht sie nicht im selben Verzeichnis, dann ohne Punkt! Aber mit 2 Slash: Praktisch, etwa so: "<"img src="http://firat.i-networx.de/Tercera/Tercera-dreh.gif">"
Diese Seite besteht seit © 2011 . . . Last update: © 10:47 14.11.2015
Meine Webseite
www.dialerschutz.de
Klasse Html Infos von HTML-Code-Tutoral
Die Counter einer Seite werden z.B. von Internetworx angeboten, hier muss man aber für jede W icrofraxebseite wo ein seperater Counter ermittelt, die richtige Directory anwählen. Problemloser ist es bei simple Hitcounter, wo einfach der gesamte Code in die Seite rein kopiert wird, selbst die lästige Firma und das lästige Wort "Web-Counter", lässt sich da entfernen.
Kostenloser Besucherzähler von InterNetWORX