Tricks des Lebens: Internet html programmieren Basis

<< >>

Tricks des Lebens: Internet html programmieren - Basis Grundlagen

von Michael Palomino (2024)

Facebook

Installieren von Dokumenten auf Webseiten
-- man muss die schriftlichen Dokumente (Word, Lotus, Rich Text Format) in html umwandeln
-- dann kann man mit dem Webseiten-Programm (html-Programm, Web-Editoren) die html-Seite öffnen und den Text für eine Webseite kopieren und benutzen.
-- Webseiten-Programme sind z.B. die Suite von Seamonkey (früher Firefox), oder Frontpage, oder Namo Web Editor, oder Microsoft FrontPage 4.0
-- man sollte für eine Webseite immer dasselbe Webseitenprogramm benutzen, sonst kann es zu ernsten Problemen kommen, wenn ein Programm etwas kann und das andere nicht, oder wenn ein Programm eine Sache so programmiert und das andere anders
-- Programme haben einen Führer, um die häufig gestellten Fragen zu beantworten, auf Englisch FAQ (=frequently asked questions)
-- html-Lehrbücher gibt es viele, ich habe das Buch "Web-Publishing" von Beat Suter / Hans Ott / Markus Koch benutzt, vom Ringier-Verlag 1997
-- das einfachste ist es, einen Text in Word zu schreiben und dann in Word UND in html abzuspeichern, dann hat man den html-Text automatisch vom Textprogramm erstellt, der Code ist aber viel komplizierter und umfangreicher als original im html-Programm erstellt
-- manche Webseiten haben noch die alte Endung htm statt html
-- die Bezeichnung http:// ist der Standard, die Propaganda sagt, man soll ein Sicherheitszertifikat erwerben, somit wird abgezockt und fast alle Webseiten beginnen nun mit https://
-- eine Webseite wird auf einen Web-Server (Host) geladen, der den Kontakt zum weltweiten Internet hat, und dort ist dann auch eine Statistik drin einsehbar.

Hier sind die Notizen aus meinem Handbuch, also die wichtigsten Sachen davon, ergänzt mit anderen Sachen:

Die Grundlage: Der Quelltext

Eine Webseite hat immer einen Quelltext. Dieser Quelltext beginnt mit einem "Kopf" ("head"), wo die Basisinformationen über die Webseite drinstehen. Dann kommt der Text mit dem Code "body". Diese Kennungen werden in eckige Klammern gesetzt, also <body>, <head> oder neue Zeile <br> oder eine Liste mit <li> etc. Übergeordnete Kennungen werden immer mit einem Schrägstrich / abgeschlossen, also </body> oder </head>

<html>
<head>
<title>...</title>
und weitere Informationen wie Tastatur etc.
dann wird der "head" abgeschlossen mit einem Querstrich /
</head>
und dann beginnt der Text mit "body":
<body>
und nach dem Text wird der Body abgeschlossen mit einem Querstrich /
</body>
und mit dem letzten Abschlusscode
</html>

Reiner Quelltext (das ist die Grundlage einer Webseite in html):
<html>
<head>
<title>...</title>
</head>
<body>
</body>
</html>

Eine neue Zeile (Zeilenschaltung) wird mit <br> angegeben (break).
Ein Link bekommt die Kennung "a" (Anker / englisch: anchor): <a href...> oder <a mailto...>
Ein Foto / Bild ekommt die Kennung "img"
Nun sehen wir, was innerhalb der <body>-Tags passiert (zwischen <body> und </body>):

A

Anker setzen
Anker sind Fixpunkte auf Webseiten, um mit einem Klick auf einer Webseite von Abschnitt zu Abschnitt zu springen, Anker sind also interne Links.

Abschnitt definieren: <p align=...< ... </p>   oder: <div align= ...> ... </div)

Abstand definieren <spacer type=vertical size=...px> (wird nicht von jedem Browser erkannt)
Abstand definieren <spacer type=horizontal width=...px> (wird nicht von jedem Browser erkannt)

Abstand in der Handschrift: muss als Leerschlag gekennzeichnet sein |_|

Abschnitt formatieren: <align=left> oder <align=center> oder <align=right> - sind noch andere Angaben zu tätigen, wird ein <div ...> installiert

B

blinken: <blink>...</blink>
Bei Frontpage geht die Blink-Funktion nicht.

Bilder definieren: Bilder und Fotos haben im Internet immer 2 Texte:
1. der Text, der beim Zeiger erscheint (Zeigertext)
2. der Text, der auf der Webseite erscheint, wenn das Foto fehlt (Alternativtext)

In der Seamonkey-Suite: Doppelklick auf das Foto - die Texte ändern

Bilder mit html-Code
<img srx="....gif" width=...px height=...px>
Alternativtext: alt="..." bei Browsern ohne Bilder
Rahmen: border=...px
Rahmen bei Bild als Link: 2px-Rahmen ist Standard
Rahmen beim Bild unterdrücken: border=0

Bildbeschriftung mit html-Code
<img src="...jpg" align=top/middle/bottom texttop/absmiddle/baseline>

Die Bezeichnungen texttop/absmiddle/baseline sind nur beim Netscape-Browser vorprogrammiert.

Bild mit Fliesstext: siehe Fliesstext

Abstand zwischen Bild und Text vergrössern vertikal: vspace=20px (vertical space)
Abstand zwischen Bild und Text vergrössern horizontal: hspace=20px (horizontal space)

Das Vorschau-Bild
Das Vorschau-Bild ist das kleine Bild auf der Webseite (gif), das zuerst erscheint, bevor sich das grosse Bild (jpg) geladen hat. Man kann das programmieren:

<img src="...jpg" lowsrc="...gif"

Buttons
kann man selber im Fotoprogramm zeichnen oder kann man auch gratis runterladen und dann in den Webseiten verwenden.

www.yahoo.comComputers_and_Internet.Multimedia/Pictures/ (2024 nicht mehr gültig)

Bild als Link
img-Tag wird zwischen <a...> und </a> gesetzt
<a href="http://www.duubeli.ch"><img src="chue.jpg"></a>
wenn nötig mit border=0 im tmg-Tag

Bild mit mehreren Linkbereichen ("HotSpots") = Image-Map / Bildkarte

Wenn ein Foto in mehrere Bereiche unterteilt ist und somit mehrere Links aufweist, ist das eine Image-Map / Bildkarte. Das ist eine "Verweis-sensitive Grafik", wo der Cursor zur Hand wird. In der Adresszeile wird dann jeweils die neue URL angegeben.

Eine Image-Map wird mit "usemap" definiert.
Die sensiblen Bereiche werden mit area-Tags definiert mit der Definition der Bereiche mit Shape-Tag

Diese Bereiche (shapes) haben verschiedene Formen: circle (Kreis), rect (Rechteck), poly (Vieleck).
Diese Bereiche sind mit Koordinaten an den Ecken definiert: coords-Tag.

circle: Kreiskoordinaten: Mittelpunkt mit x und y und Radiuslänge
Code: <area shape=circle coords="90,60,30" href="http://www.blick.ch">

rect (Rechteck): Koordinaten von links oben und rechts unten:
Code: <area shape=rect coords="10,10,40,50" href="...">

poly (Vieleck): hat so viele Koordinatenpaare, wie es Ecken hat, das ergibt eine lange Definitionsreihe
Code: <area shape=poly coord="10,10,40,90,90,40,60,100,200,200" href=...>

Bei Überlappung von Flächen gilt die zuletzt gesetzte Ecke. So sind auch gezielte Überlagerungen möglich.

Beispiel eines Bildes

<img src="...jpg" align=center border=0 wemap="Europakarte">
Definition als Karte mit Bereichen-Links:
<map name="Europakarte">
<area shape=rect coords="10,10,50,50" href="http://www.europa.com/island.htm">
oder
<area shape=rect coords="30,80,100,150" href="http://www.europa.com/uk.htm">
dann kommen wahrscheinlich noch weitere Zeilen mit weiteren Angaben
und dann wird abgeschlossen mit
</map>

C

Composer einstellen
Das Webseitenprogramm vom Seamonkey-Browser heisst "Composer". Da kann man verschiedene Einstellungen machen:
-- die Startseite festlegen, z.B. eine Suchmaschine
-- man kann auch festlegen, ob der Browser oder der Composer starten soll: Bearbeiten - Einstellungen - Erscheinungsbild - öffnen beim Start von Mozilla (es ist besser, immer mit dem Browser zu öffnen, denn wenn der Composer geöffnet ist, lässt sich der Browser nicht mehr öffnen).

-- man kann auch den Profil-Manager einstellen und einen Haken machen: beim Starten nicht fragen

Cache leeren
Explorer - extras - Internetoptionen - Dateien löschen - Haken machen bei: Alle Offlineinhalte löschen - löschen

Cookies
Cookies sind Dateien, die spionieren und speichern, wie der Compi im Internet benutzt wurde - welche Webseiten geöffnet wurden.

Charset: das Alphabet der verschiedenen Sprachen
Eine Webseite hat ein Alphabet, und die verschiedenen Alphabete heissen auf html "Charset".

Dieser Charset-Code ist im Header-Bereich einer Webseite angegeben. Beispiel:

<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">

veraltet: accept-charset="utf-8"

<meta http-equiv="content-Type" content="text/html; charset=UTF-8">

Diese Webseite hat den Mitteleuropa-Charset:
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">

Die verschiedenen Alphabete sind auf einer Liste ersichtlich.

D

Downloads
Programme herunterladen kann man auf vielen Webseiten wie
www.tucows.de
www.pctip.ch
www.shareware.com (kostet)
www.ZDnet.de

Download / upload-Daten einer Webseite
-- man kauft sich eine Domain (Webseitenname) bei einem Domain-Server oder normalen Server
-- man kauft sich bei einem Server einen Serverplatz, dann kommen die Daten für das Hochladen der Webseite mit der ausgewählten Domain
-- man wählt sich ein Programm aus, wie man eine Webseite auf einen Serverplatz lädt, z.B. FileZilla 2.2.126
zum Beispiel mit
Host: www.blablabla.com
Port: 21
Servertyp: FTP

Durchstreichen: Text durchgestrichen präsentieren
<strike>...</strike>

E

E-Mail-Link
Man kann für Leute, die mit dem E-Mail-Programm "Outlook Express" arbeiten, direkt einen E-Mail-Link mit dem Wort "Kontakt" programmieren

<a href="mailto: info@coop.ch"> Kontakt </a>

Da dieser Link aber nur für Leute mit dem E-Mail-Programm "Outlook Express" funktioniert, ist es ratsam, auch das E-Mail selber als Text hinzuschreiben.

Einzug machen beidseitig

Beidseitiger Einzug ca. 1,5cm: <blockquote>...</blockquote>

Einzug machen einseitig links oder rechts
Je nach Webseitenprogramm sind bestimmte Tastenkombination möglich, um Einzüge rechts, links oder beidseitig anzubringen.

Einzug machen: nur eine Zeile
Man kann einen horizontalen Zwischenraum programmieren:
<spacer type=horizontal width=12px>

Einzug machen: hängender Einzug
<p style="margin-left: 20pt; text-indent: 20pt;">

F

Farbencodes
Jede Farbe hat einen Code, insgesamt sind es über 16 Millionen Farben. Voraussetzung ist aber, dass der Computer und der Composer das programmieren können. Ansonsten beschränken sich die programmierbaren Farben bei Schriften und Hintergründen auf vordefinierte RGB-Farbwerte.

Siehe die Farbauswahl-Listen:
von RGB Color Box: http://home1.inet.tele.du/theill/rcb.htm (2024 nicht mehr da)
von Coleb HTML Color Picker: http://inet.net/~shawn/reference/colorsl (2024 nicht mehr da)

Die Farbencodes sind vorprogrammiert mit englischen Namen:
white=weiss - Code: #FFFFFF
yellow=gelb - Code: #FFFF00
gray=grau - Code: #808080
olive=oliv - Code: #808000
aqua=hellblau - Code: #7FFFD4
lime=grasgrün - Code: #00FF00
teal=dunkel-oliv - Code: #008080
green=grün - Code: #008000
fuchsia=pink - Code: #FF00FF
red=rot - Code: #FF0000
purple=violett - Code: #800080
maroon=braun (Marroni) - Code: #800000
blue=blau - Code: #0000FF
silver=silber - Code: #C0C0C0
navy=schwarzblau, tiefes dunkelblau - Code: #000080
black=schwarz - Code: #000000

Farbencodes: Hintergrundfarben
Hintergrundfarben sind im <body>-Tag der Webseite definiert, zum Beispiel so: <body bgcolor="#...">

Fehlerseite gestalten: Code 404
-- man sieht im FileZilla-Programm die Webseiten mit den Codes für die Fehlerseiten
-- man kann diese Seiten runterladen und selber gestalten, ansonsten bleibt die Gestaltung des Servers
-- Hosting Control Center - Webseiten - www.blablabla.com - benutzerdefinierte Fehlerseiten: Codes 401, 404, 500

Fettschrift programmieren
-- es wird mit dem englischen Wort "bold" gearbeitet: <b>...</b>
-- es wird mit dem englischen Wort "strong" gearbeitet: <strong>...</strong>

Formulare
Code: <form>...</form>

Fomulare werden von CGI-Programmen ausgewertet, die auf dem Server platziert sind (Server-Programme - also Spionage).

Eventuell wird sofort ein Antwortdokument programmiert.

-- die Kommunikation mit einem Server geht über eine "Common Gateway Interface" (CGI), und das wird alles ausspioniert.
-- der Tag "action": mit der Angabe der URL des Servers: action="http://www.update.ch/legi-bin/mail">
-- der Tag "method": das ist die Transportmethode zum Server: method=get   bis 256 Zeichen, bei kleinen Formularen an die URL angehängt
-- der Tag "method": das ist die Transportmethode zum Server: method=post   separates Script an den Server.

In einem Formular gibt es Eingabefelder mit dem Code <input>, und dann kommen die Eingabefelder für die persönlichen Daten, Titel, Name etc. Diese Eingabefelder umfassen nur EINE Zeile.

Es müssen also innerhalb des Codes <input> definiert werden:
name: Bezeichnung des Eingabefeldes / Titel
type = text -> Text type=password -> da erscheinen dann Sternchen****
size = ... : Anzahl Zeichen, die das Eingabefeld umfassen soll
maxlength=... : maximale Anzahl Zeichen (lange Namen aus Indien erfordern schon bis 100 Buchstaben).

Also zum Beispiel:
<form method=get action="http://www.formularprogramm.ch/e-mail.cgi">
So lautet meine E-Mail-Adresse:
<input name="irgendwo@aufderwelt.com" type=text size=28 maxlength=60>
</form><br>

Formulare: Mehrzeilige Eingabefelder: <textarea>...</textarea>
Hier kommen die Texte rein.

name: Bez./Titel
cols=...: Anzahl Buchstaben in der Breite, z.B. 40
rows=...: Anzahl Zeilen, z.B. 5
align=Ausrichtung des Textfeldes.

also z.B.:
<form method=post action="http://www.formularprogramm.ch/ch.cgi">
<textarca name="ch" rows=5 cols=40 align=center>
</textarca>
</form>

Formulare mit Auswahl zum Ankreuzen - die Checkbox

Vorangekreuzt: checked

<input>

Ankreuzkästchen: unitype=checkbox: mehrfach ankreuzen möglich, type=radio: nur 1x ankreuzen möglich

Also:
<form method=post action="http://www.formularprogamm.ch/cgi-bin/bs">
<input name="mittlere-bruecke" type=checkbox>
Ausflug zur Mittleren Brücke <br>
<input name="rheinpromenade" type=checkbox checked>
Ausflug zur Rheinpromenade >br>
</form> <br>

Oder:

Formulare mit Radioknöpfen setzen
"name" bleibt immer gleich, die Schaltfelder werden mit "value" bezeichnet
<form method=post action="http://www.formularprogramm.ch/cgi-bin/left">
<input name="Wochenplan" type=radio value="Mo">
Arbeiten am Montag <br>
<input name="wochenplan" type=radio value="Di">
Arbeiten am Dienstag <br>
usw.
usf.
<br>
</form><br>

Formular mit Auswahlliste / Listenfeld / Popup-Menü: <select>...</select>
name=...: die interne Benennung der Auswahlliste
size=...: wie viele Zeilen das offene Auswahlfeld haben soll
also:
<select name="indios" size=6> ev. mit kommt dann ein Rollbalken
dann:
<option value="Paraguay">
Indios Paraguay
<option value="Brasilien"
Indios Brasilien etc.
</select>

eventuell Voreinstellung mit dem Attribut "selected"

ohne size bzw. mit size=1 wird das Listenfeld zum Popup-Menü mit nur einer Wahlmöglichkeit, ev. mit Voreinstellung mit "selected"

select-Tag mit "multiple" -> ergibt mehrere Wahlmöglichkeiten.

Formular: Das E-Mail einprogrammieren
Man programmiert die E-Mail ins Formular:
<form action="mailto:ich@info.ch>, einen "method"-Tag braucht es nicht, alles andere bleibt gleich.

Formular senden: "submit"
<input type=submit value="senden">
-> so entsteht ein Knopf "Senden"
</form><br>

Frames programmieren

Frames heisst, dass eine Webseite in verschiedene Bereiche aufgeteilt wird, die sich jedem Bildschirm anpassen. In der Praxis werden diese Frames aber sehr kompliziert, und so hat sich die Aufteilung mit fixen Tabellen durchgesetzt.

Manche Webseiten setzen die Frames aber weiterhin ein z.B. mit einer Navigationsleiste rechts und dem Inhalt links. Der Code für den Text heisst dann nicht <body> sondern <frameset>...</frameset>

Das Dokument wird wie 1 Bild in das Frame eingefügt:
<html>
<head>
<title>...</title>
</head>
<frameset>
<frame src="dokument.html">
</frameset>
</html>

Frames horizontal="rows"
Frames vertikal="cols" (colums, Spalten)

Die Dimensionen weden in % oder in Pixel px definiert, wobei die Angabe "px" nun fehlt, die wurde bei den Frames gespart, also zum Beispiel so:

<frameset rows="80,30%*"
<frameset rows="60%,30%,*"
<frameset cols="70%,*"
<frameset cols="*,*" (=2x50%)

gemischt: immer rows, dann cols, und Border=2 möglich

Zwei Dokumente in die 2 Frames einfügen
<frameset rows=95,* border=2>
So teilt sich die Webseite in 2 Zeilen auf, ein Titelbereich und ein Textbereich. Die Pixelangabe "95" bezieht sich auf die Höhe der Spalte.

Dann kommt in die Titelzeile:

<frame src="dokument1.html"> oder ein Firmenlogo als Bild, das 95 Pixel hoch ist: <frame src="bild.jpg">

Dann kommt in den Textbereich:

<frame src="dokument2.html">

und der Abschluss mit Querstrich /
</frameset>

6 Framefenster: 2 horizontale und 3 vertikale Fenster
<frameset rows=80,30%,*" cols=30%,*">
<frame src="bild1.gif">

3 Framefenster: 1 Titelzeile und der Textraum in zwei Spalten wie ein "T"
-> da sind im zweiten Frame 2 Frames: Zuerst werden die beiden horizontalen Frames definiert, und dann im Textbereich 2 Spalten-Frames.

<frameset rows=95,*>
<frame src="titel.html">
<frameset cols=25%,*>
<frame src="links.html">
<frame src="nachrichten.html">
</frameset>
</frameset>

Man kann dann noch speziell einstellen:
-- scrolling=yes/no
noresize (unveränderliche Breite / Höhe)
marginwidth (Abstand vertikal)
marginheight (Abstand horizontal)

Frames: Rahmenlose Frames
<frameset rows=95,* border=0 (Netscape) oder frameborder=no (Internet Explorer)>

Aussenwand (Internet Explorer): framespacing=no

Frames: Rahmenfarbe festlegen
<frame src="text.html" bordercolor=red> bei Netscape, ausprobieren.

Frames: Den Hauptframe festlegen (=Zielrahmen (target) + bei Links das Zielframe definieren
wo die Texte erscheinen sollen, sonst öffnen sich die Texte dort, wo der Link ist.
also:
<frame src="nachrichten.html" name="mainframe">
+jeder Link muss wissen, in welchem Frame das Doku geöffnet werden soll, also:
<a href="blick.html" target="mainframe"> Blick </a>
-> die Navigationsleiste mit den Links bleibt unverändert
-> jeder Link braucht ein Target
-> wenn alle Links im gleichen Frame geöffnete werden sollen, kann der Target-Tag im Header des Navigationsframes angegeben werden. Also:

<html>
<head>
<base target="mainframe">
<title> Links </title>
</head>

Frames: Andere Zielrahmen: Neue Browserfenster öffnen
<frame src="nachrichten.html" name="_blank">
-> öffnet 1 neues Browserfenster für das Dokument

<frame src="nachrichten.html" name="_self">
-> öffnet das Dokument im gleichen Rahmen

<frame src="nachrichten.html" name="_parent">
-> öffnet das Dokument im hierarchisch übergeordneten Ramen

<frame src="nachrichten.html" name="_top">
-> öffnet das Dokument im hierarchisch zuoberst stehenden Rahmen
bzw. alle Frames werden aufgelöst.

Fussnoten programmieren

Aus eigener Erfahrung ist es am besten, einen Text mit Fussnoten im Word zu schreiben, dann als html zu speichern, dann sind alle Fussnoten automatisch mit den Ankern programmiert.

Einzelne Fussnoten im html kann man mit 2 Ankern (2 Zielpunkten) programmieren. Im Composer vom Seamonkey ist das einfach mit einem Button machbar:
-- Anker bei der Fussnote setzen z.B. als fn01, dann im Text den Link zum fn01 setzen.

Als programmierter Text erscheint das so:
<span class="MsoFootnoteReference>
<span style="fon-size: 13.5pt;">
<span>[01]</span></span></span>

Um von der Fussnote zurück zur Textstelle zu klicken, muss man
-- bei der Textstelle einen Anker definieren mit retour01, und
-- im Text der Fussnote einen Link definieren zu retour01: [retour01].

Einfacher Code für Fussnoten: <fn>...</fn>

H

Der Kopf ("head") einer Webseite

Der Code ist <head> und endet mit </head>

In diesem Kopfbereich der Webseite sind die wichtigen Grunddaten der Webseite mit Titel, Schlüsselwörter, und die Titel auf der Webseite etc. eingegeben.

<head>
Titel: <title>...</title<
Schlüsselwörter: <meta name="keywords" content="..., ..., ...">
Die Untertitel oder eine kurze Beschreibung: <meta name="description" content="Untertitel 1, Untertitel 2">
Und dann kommt der Abschluss des Kopfbereichs:
<head>

Im Quelltext sieht das dann so aus:
<head>
<title>...</title<
<meta name="keywords" content="..., ..., ...">
<meta name="description" content="Untertitel 1, Untertitel 2">
<head>

Hochgestellt: Texte hochgestellt (bei Fussnoten)
<sup>...</sup> (von Englisch: "superscript")

hochgestellt und kleiner: <sup><small>...</small></sup>

Hintergrundfarbe von Webseiten
<body bgcolor=...>...</body>

Hintergrundbild von Webseiten
<body background="bild.jpg">...</body>

Hintergrundgrafiken kann man sich im Internet selber suchen, z.B. mit dem Stichworten:
background / patterns / clipart / patternland

Hyperlinks setzen
Code: <a href>
Hyperlinks sind Links, die zu anderen Webseiten führen (="absolute Links"), auch zu Fotos, Kurzfilmen, Tondateien, oder auf ganze Programme
Also:
<a href="http://www.blick.ch"> zum Blick </a>

Man kann noch einen internen Link zu einem Anker einprogrammieren mit dem Kreuzzeichen #
Also:
<a href="http://www.blick.ch#2> zum Blick Kapitel 2 </a>

mit Angabe zur Öffnung eines neuen Browser-Fensters: "_blank"

<a href=http://www.blick.ch" target="_blank"> zum Blick </a>

Hyperlink: Wenn ein Bild der neue Link ist
Zwischen die Link-Zeile mit "a" wird eine Zeile "img" platziert.
Also:
Die Link-Zeile: <a href="http://www.duubeli.ch">
Die Foto-Zeile: <imf src="chue.jpg"> plus Details zum Foto wie border=0 etc.
Die Link-Zeile wird abgeschlossen: </a>

Im Quelltext sieht das dann so aus:
<a href="http://www.duubeli.ch">
<img src="chue.jpg"> plus Details zum Foto wie border=0 etc.
</a>

I

IP (Internet Protocoll)

Jeder Internetbenutzer hat eine IP-Nummer seines Internetanschlusses, wo die Geheimdienste immer alles ausspionieren und jeden Buchstaben wichtig finden, bzw. die KI sucht nach Stichworten, und wenn ein Wort auffällig ist, schlägt die KI bei den kriminellen Geheimdiensten Alarm und setzt eine Überwachung in Gang.

Solche IP-Nummern sehen z.B. so aus: 80.218.114.209 - oder 84.74.56.127

Inhaltsdateien müssaen angeblich immer von einer eindeutigen IP-Adresse kommen, sonst sind sie austauschbar und werden von den Suchmaschinen nicht gefunden.

Zum Hochladen einer Webseite mit dem FileZilla-Programm etc. kann man als Adressat z.B. die IP-Nummer des Servers eingeben.

Man kann die eigene IP-Nummer herausfinden mit der Frage: Wie lautet meine IP-Nummer und dann erscheint automatisch die eigene IP.

Die IP-Nummer hat den Vorteil, dass bei Schäden am Computer eine "Fernheilung" vom Büro der Firma möglich ist.

Seit einiger Zeit kann man die IP-Nummer auch unterdrücken, dann wird man nicht ausspioniert, heisst es (!). Die Fernheilung ist dann nicht mehr möglich. Um die Erkennung der IP wieder herzustellen, ist eine längere Operation notwendig.

Internet-Links / Anker - Code: <a...
<a>...</a>
definiert am Zielpunkt: <a name="1">
definiert am Startpunkt: <a href=#1> 1. Kapitel </a>

In den Quellcode integriert sieht das dann z.B. so aus:
<p> (Abschnitt)
<ul>
<li> (Liste) <a href=#1> 1. Kapitel </a>
<li> (Liste) <a href=#2> 2. Kapitel </a>
</ul>
</p>
<p>
<a name="1"></a>
1. Kapitel
...

Interner Link innerhalb derselben Webseite=Link ohne http://www.
-- man muss einen Anker setzen, wohin man springen will, und eine Bezeichnung im Anker definnieren, z.B. "kap02"
-- dann setzt man im Inhaltsverzeichnis einen Ankerlink und definiert als Linkziel #kap02
Also:
<a href="#kap02"> zum 2. Kapitel </a>

J

Java ist eine eigene Programmiersprache, die man separat lernen muss (ich kann sie nicht)

Java-Applets werden als ganze Programmpakete integriert

Java-Scripts
-- werden für kleine Animationen verwendet
-- werden für Lauftexte verwendet
-- werden angewendet, um dem Server bei Formularen Arbeit zu ersparen
z.B.: Einblenden einer Uhrzeit
z.B.: Farbenwechsel einer Webseite nach einer gewissen Zeit einprogrammieren

K

Kennungen
Im Quelltext werden die Kennungen in eckige Klammern gesetzt. Die übergeordneten Kennungen haben immer auch einen Abschluss mit einem Querstrich /
also:
<html>
<head>
<title>...</title>
</head>
<body>
</body>
</html>

Tabellenzeile <tr>...</tr>
Tabellenzelle <td>...</td>

Kursivschrift <i> oder <em> oder <var>
Die Kennung <i> kommt vom Englischen "italic": italic
Die Kennung <em> kommt vom Englischen "emphasis": emphasis
Die Kennung <var> kommt vom Englischen "variable": variable
Die Kennung <cite> kommt vom Englischen "cite": cite

Man sieht, die Kursivschrift hat mehrere Codes je nach Geschmack, wie man es programmieren will.

Deswegen sollte man eine Webseite immer mit DEMSELBEN Webseitenprogramm bearbeiten, weil es sonst Unterschiede gibt.

L

Leerschlag
Der Leerschlag-Code ist eigenartigerweise sehr kompliziert:  

Weiss der Geier, wer das programmiert hat, das ist manchmal eine Folter mit komplizierten Codes. Die Buchstaben ä ö ü und andere Buchstaben, die vom englischen Alphabet abweichen, sind auch so kompliziert - Diskriminierung!

Links
-- Links gelten in der html-Sprache als "Anker" und haben die Kennung <a>
-- es werden Hyperlinks (Links auf andere Webseiten) und innerhalb derselben Webseite (Anker mit #) unterschieden
-- dann gibt es noch die Links auf die originalen Bilder von einem Mini-Bild aus, diese Bilder haben eigene Links und gelten auch als Hyperlinks
-- Links sind normalerweise in einem mittleren Blau gehalten, wer die Linkfarbe variieren will, kann das machen, aber es gibt dann vielleicht am Ende ein grosses Durcheinander und ist wirklich nicht empfehlenswert.

Die Links einer Webseite
-- beim Webseiten machen ist das Denken in Links sehr wichtig, welche Seite wohin führt
-- eine Webseite ist meistens in Pyramidenform aufgebaut: ein Portal zuoberst als Titel-Webseite und dann die Unterwebseiten
-- jede untergeordnete Webseite sollte einen Link zum Portal haben

Links abtrennen mit dem vertikalen Strich |
-- manche Tastaturen haben den vertikalen Strich |
-- als es den vertikalen Strich noch nicht gab, war es ein Tastencode: Alt+Ctrl+7
-- mit diesem vertikalen Strich sind manchmal Links oder Adressdaten voneinander abgetrennt: Link 1 | Link 2 | Link 3 |
-- diesen vertikalen Strich kann man auch als kleines L "l" schreiben, das ist aber weniger lang und wird vom Internet dann als Buchstabe gelesen - nicht so praktisch.

Programme: Webseite ins Internet laden mit ftp-Programmen

Es gibt verschiedene Programme, um eine Webseite ins Internet auf einen Server zu laden. Das sind die FTP-Programme (file transfer program)
-- in die Felder müssen der Name der Webseite / die Nummer des Serverplatzes, die Abkürzung des Benutzers und ein Passwort sowie Port 21 eingegeben werden
-- ein solches Programm ist FileZilla, das aber seit 2016ca. Probleme mit den neuen Versionen hat, man muss also eine alte Version wählen, um sicher hochladen zu können
-- die Kommunikation mit einem Server geht über eine "Common Gateway Interface" (CGI), und das wird alles ausspioniert.

Programme: Alte Empfehlungen
-- Gratisprogramme auf Deutsch: http://wiki.chungo.net/Freeware_Software (2024 nicht mehr da)
-- anmelden bei Suchmaschinen: open directory project: www.homepromoter.de

Programme: Antivirenprogramme
-- http://free.grisoflt.com (2024) nicht mehr da)
-- Stinger (für den ganzen Computer): http://vil.nai.com/vil/stingeer
-- gegen Trojaner: www.trojancheck.de
-- gegen Spyware: SpyBot

Programme: Kontrollprogramme für Webseiten
-- Linkcheck: Man kann kontrollieren, ob bei einer Webseite alle Links funktionieren oder ins Leere führen (mit Code 404)
http://de.webmasterplan.com (2024 nicht mehr da)

Firewall

-- blockiert Programme oder Updates von Programmen
-- meldet jeweils, wenn eine Quelle einen Zugang will

<<     >>

Facebook

^