Meine eigene Webseite in HTML

Abbildung 1
Meine eigene Webseite in HTML
Vertiefungsarbeit in der Form eines Werkes
eingereicht von Marko Radisic TM11a
an der Technischen Berufsschule Zürich
im Dezember 2014
bei Herr C. Käser
Inhaltsverzeichnis
1
Einleitung
Seite 3
2
Erstes Kapitel: Hintergrundinformationen
Seite 4
2.1
Was ist HTML und für was dient es?
Seite 4
2.2
Warum wurde HTML erfunden?
Seite 4
3
4
Zweites Kapitel: Idee und mein Vorgehen
Seite 5
3.1
Seite 5
Wie funktioniert HTML
Schritt für Schritt der Programmierung
Seite 5
4.1
Grundgerüst von HTML-Datei und Dateikopf
Seite 5-7
4.2
Kommentare
Seite 7
4.3
Sonderzeichen
Seite 8
4.4
Aufzählung
Seite 8-9
4.5
Tabellen erstellen
Seite 9-10
4.6
Referenzen einbinden
Seite 11
4.7
Die wichtigsten HTML-Tags zur Textformatierung
Seite 12
4.8
Einfache Text-Formatierungen
Seite 12-13
5
Viertes Kapitel: Beschreibung des Produktes
Seite 14
6
Fünftes Kapitel: Vergleich Produkt und Absicht
Seite 14
7
Schluss
Seite 15
8
Quellenverzeichnis
Seite 15
8.1
Bilder
Seite 15
8.2
Textquellen
Seite 15
9
Anhang
Seite 16
9.1
Projektbeschrieb
Seite 16-17
9.2
Zeitplan und Protokoll
Seite 18-19
Marko Radisic
Meine eigene Webseite in HTML
2/20
1
Einleitung
In meinem Werk geht es darum meine eigene Webseite in HTML-Sprache zu erstellen. Dabei will ich meine Webseite mit meinen eigenen Vorstellungen und meinem
Wissen erstellen. Die Umsetzung ist möglich in dem man die Befehl zu Programmierung kennt und versteht.
Mein Thema ist eine eigene Homepage/Webseite zu erstellen mit der HTML- Sprache. Da es sehr anspruchsvoll und interessant ist, Befehle in etwas Grafisches um
zusetzen. Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML wurde im Zuge des Web-Booms zum erfolgreichsten und verbreitetsten Dateiformat der Welt. HTML-Dokumente werden von
einem Webbrowser dargestellt und sind die Grundlage des World Wide Web.
Mein Lehrmeister musste eine Webseite für seine Freundin erstellen und hat auch
mit HTML gearbeitet. Dies erschien mir sehr komplex und interessant. Und deshalb
wollte ich mir auch meine eigene Webseite kreieren.
Meine Vorgehensweise ist so, dass ich ein Buch lesen werde über HTML. Dieses
führe ich in mein Quellenverzeichnis ein, weil ich nur von dort meine Quellen haben
werde. Dort werde ich die Basis anschaffen die ich brauche um dann meine Webseite zu programmieren. Die Internet- Domäne werde ich ziemlich am Schluss mieten.
Da es eine einfache Durchführung ist und zeitlich schnell zu erledigen. Ich hoffe meine Webseite kommt grafisch gut an. Meine Dokumentation beinhaltet hauptsächlich
die Funktion und die Programmierung/ Formatierung der Webseite. Deshalb will ich
mit dieser Dokumentation die Durchführung so einfach und so verständlich wie möglich gestalten.
Marko Radisic
Meine eigene Webseite in HTML
3/20
2
2.1
Erstes Kapitel: Hintergrundinformationen
Was ist HTML und für was dient es?
HTML ist eine Dokument-Beschreibungs-Sprache und die Abkürzung steht
für Hyper Text Markup Langage
Zu den Dokument-Beschreibungssprachen gehören auch die vielen bekannten Textverarbeitungsprogramme, wie zum Beispiel.:





TextPad (diesen habe ich genutzt)
WordPerfect
Windows Write
Word für Windows
und viele weitere für Macintosh, UNIX und andere Systeme
Aber auch das Windows-Hilfe-System ist eine Dokument-Beschreibungssprache, die
in der Funktionalität sogar grosse Ähnlichkeit mit der Darstellung von HTML-Seiten
hat.
Quellenangabe: Castro (Seite: 7)
2.2
Warum wurde HTML erfunden?
Es gab im Internet erhebliche Probleme beim Austausch von Dokumenten wegen:


Inkompatibler Textverarbeitungsprogramme und Dateiformate
Unterschiedlicher Zeichensätze (Sonderzeichen !)
Die Vorgaben für die HTML-Entwicklung sind




HTML kann auf ALLEN Systemen verstanden und dargestellt werden
HTML verfügt über ALLE Sonderzeichen
HTML kann grafische Elemente einbinden
HTML verfügt über anklickbare Verweise innerhalb des Dokumentes und zu
anderen Dokumenten
Erweiterungen:




Tabellen
Einbindung von Ton- und Bildfolgen
Einbindung von Formularen
Einbindung von JAVA-Scripts (mit dem hab ich nicht gearbeitet!)
Marko Radisic
Meine eigene Webseite in HTML
4/20
3
Zweites Kapitel: Idee und mein Vorgehen
Heute kann man fast nicht ohne Internet. Dabei dreht sich alles um das Internet und
die Weboberflächen. Diese werden in verschiedenen Arten Programmiert. Meine
Programmierungsart ist wie es im Thema beschrieben ist „HTML“. Es gibt noch viele
verschiedene Arten eine Webseite zu gestalten, ob schwieriger oder einfacher zu
programmieren. Um eine HTML-Webseite erstellen zu können braucht man nicht
viel dafür. Mit der Free-Software „NotePad“ habe ich meine HTML Befehle geschrieben und empfehle es weiter für andere die auch so etwas einmal umsetzten wollen.
Dazu kommen noch Kosten vom Hoster, dieser Provider stellt eine freie InternetDomäne zur Verfügung die man später über jeden Browser anschauen kann wenn
man am Internet angeschlossen ist. Die Kosten sind jährlich zirka 85 Schweizer
Franken je nach Host-Anbieter. Meine Domäne lautet und auf diese kann man jederzeit zugreifen und meine Webseite anschauen: www.va2014.ch
3.1
Wie funktioniert HTML
Mit HTML wird ein Text ansprechend formatiert, so wie es jedes andere Textverarbeitungsprogramm auch kann. Zur Darstellung derart formatierter Texte mit eingelagerten Grafiken und Bildern braucht man einen sogenannten Browser, wie Explorer
(Microsoft). Der Browser sollte die aktuelle HTML-Version darstellen können.
Dieser Absatz wird zunächst unformatiert und dann noch einmal formatiert dargestellt. Unformatiert ist der Text langweilig und schwierig zu lesen, weil es 1. keine
Möglichkeit gibt, bestimmte Teile herauszuheben wie zum Beispiel durch Fettdruck,
Schrägschrift, Unterstreichung, Schriftgröße, Schriftart, Schriftfarbe, 2. Einrücken und
Absatzbildung nur mit ganzen Zeilen und Zeichen bei festliegender Zeilenlänge möglich ist, 3. übersichtliche Aufzählungen nur schwer zu realisieren sind und 4. keine
Möglichkeit besteht, Tabellen oder grafische Elemente in Texte einzubinden.
4
4.1
Schritt für Schritt der Programmierung
Grundgerüst von HTML-Datei und Dateikopf
Eine HTML-Datei muss bestimmte Elemente enthalten, die der Browser zur Identifikation benötigt. Das eigentliche Dokument steht zwischen den
Tags <BODY> und </BODY>.
Marko Radisic
Meine eigene Webseite in HTML
5/20
Grundgerüst:
<!DOCTYPE HTML PUBLIC "-//VA Marko-Radisic//2014 HTML 3.2//DE>
<HTML>
<HEAD>
<TITLE>Text für eine Titelleiste</TITLE>
</HEAD>
<BODY>
(Datei-Inhalt)
</BODY>
</HTML>
Die erste Zeile wird vom HTML-Editor erzeugt und gibt an, welche HTML-Version
verwendet wird. Der zur Darstellung verwendete Browser kann sich ggf. darauf einstellen.
Im Header-Teil, zwischen <HEAD> und </HEAD> findet sich oft außer der TITLEZeile eine Zeile mit der Form <BASE href="URL"> und eine oder mehrere MetaInformationen.
Letztere beginnen mit <META ...> und können mehrere, durch Space und/oder Semikolon abgetrennte Angaben enthalten, die der aufrufende Browser auswerten kann
(aber nicht muss!). Falls Ihr HTML-Editor so eine Zeile erzeugt, lassen sie sie stehen
und kümmern sich nicht drum!
Das Basis-Element gibt den Bezugs-URL an, auf den sich alle folgenden relativen
Referenzen beziehen. Liegen zum Beispiel alle Bilder auf dem eigenen WindowsRechner oder Hostserver bei Windows zum Beispiel: „D:\BILDER\Marko\“, lautet der
Tag: <BASE HREF="file://va2014/bilder/firma.jpg /">
Die Angabe 'localhost' kann auch fehlen. Das Pipe-Zeichen statt eines Doppelpunktes nach dem Laufwerksbuchstaben „d“ ist übrigens kein Druckfehler. Der zwischen
den Tags <TITLE> und </TITLE>angegebene Text wird vom Browser in der Titelleiste dargestellt und beim Ausdrucken als Kopfzeile ausgedruckt. Er sollte nicht mit der
Überschrift zu verwechselt werden, mit der ein Text normalerweise beginnt.
Im <BODY> Starttag finden sich meist noch zusätzliche Angaben zur Darstellung des
ganzen Dokumentes wie auch Farben und Hintergrund:
bgcolor = Farbe des Bildschirmhintergrundes (typisch #FFFFFF)
text =
Textfarbe (typisch #000000)
link =
Farbe von Verweisen (typisch #CC6633)
vlink =
Farbe von Verweisen von bereits besuchten Zielen (typisch #993300)
alink = Farbe von Verweisen beim Anklicken (typisch #6666CC)
r=
Rotwert, hexadezimal von 00 bis FF
g=
Grünwert, hexadezimal von 00 bis FF
b=
Blauwert, hexadezimal von 00 bis FF
Marko Radisic
Meine eigene Webseite in HTML
6/20
Die Summenfarbe entsteht aus den drei Grundfarben Rot, Grün und Blau.
00 entspricht der minimalen Helligkeit für diesen Farbanteil und FF ist die maximale
Helligkeit. #000000 ist daher Schwarz und #FFFFFF ist hellstes Weiß. Falls Sie mit
16 Abstufungen auskommen, können Sie sich an folgende Skala halten:
00, 11, 22, 33, 44, ... 88, 99, AA, BB, CC, DD, EE, FF
Die wichtigsten Mischfarben (jeweils maximale Helligkeit) sind:
Gelb = #FFFF00
Zyan = #00FFFF
Magenta = #FF00FF
Mit dem Parameter BACKGROUND kann eine Datei (hier datei.gif) für ein Hintergrundbild definiert werden. Dann ist der Parameter BGCOLOR überflüssig. Die meisten Browser können GIF- (Grafic Interchange Format) oder JEPG- (Joint Pictures
Expert Group) komprimierte Dateien verarbeiten. Die File-Extentions unter DOS lauten .GIF bzw. (.JPG)
Quellenangabe: Castro (Seite 8-13), (Seite 111-115 Farbcodes)
4.2
Kommentare
Oft kommt es vor, dass man in einem Dokument Bemerkungen festhalten möchte,
die später nicht dargestellt werden sollen. Auch wenn man etwas ausprobiert, kann
man den vorigen Zustand als Kommentar deklarieren und wieder aktivieren, wenn
der Versuch nicht geklappt hat. Zu unterscheiden ist das End-Tag bei einzeiligem
und mehrzeiligem Kommentar:
<!-- Dies ist ein einzeiliger Kommentar -->
<!-Der mehrzeilige Kommentar beginnt genau wie der einzeilige.
Dem End-Tag werden jedoch zwei Schrägstriche und ein Leerschlag vorangestellt.
// -->
Quellenangabe: Castro (Seite 27)
Marko Radisic
Meine eigene Webseite in HTML
7/20
4.3
Sonderzeichen
Ein fehlendes Semikolon (häufiger Fehler) führt dazu, dass das Sonderzeichen meistens nicht erkannt wird. Folgende Umschreibungen sollte man beherrschen:
ä = ä
<= <
(lt= less than)
Ä= Ä
>= >
(gt= greater than)
Ö= Ö
"= "
(Anführungszeichen)
ü= ü
=  
(Leerzeichen von der Breite eines m)
Ü= Ü
=  
(Leerzeichen von der Breite eines n)
©= ©
--= &emdash;
(Bindestrich von der Breite eines m)
Quellenangabe: Castro (Seite 28)
4.4
Aufzählung
Aufzählungen sind geordnete Listen, die es in 5 Versionen gibt, von denen nur die
ersten beiden praktischen Bedeutungen haben:
a.
b.
c.
d.
e.
die ungeordnete Liste <UL>
die geordnete Liste <OL> (mit Nummerierung),
Directory Listing <DIR>
die Menüauswahl <MENU> und
die Aufzählung von Definitionen <DL>.
In der ungeordneten Liste wird jeder Eintrag durch ein 'Bullet' markiert, dessen Darstellung vom Browser abhängt. Beim Typ 'circle' (Default) und 'square' wird ein rundes oder eckiges Symbol und bei 'disc' ein Dateisymbol verwendet (disc = Datenträger, wie Diskette und Festplatte). Der Bullet-Typ kann für die ganze Liste aber auch
(zusätzlich) für jeden einzelnen Listeneintrag festgelegt werden. Die Angabe 'compact' soll eine kompaktere Liste erzeugen, was aber von vielen Browsern noch nicht
unterstützt wird.
<UL type="circle"|"square"|"disc" compact>
<LI type="Typ">Text</LI>
<LI type="Typ">Text</LI>
</UL>
Die geordnete Liste kann zur Nummerierung Gross- oder Kleinbuchstaben, Römische Ziffern in Gross- und Kleinschreibung und natürlich auch arabische Ziffern verwenden. Die entsprechenden Typen sind in obiger Reihenfolge: A, a, I, i und 1. Der
Anfangswert ist festlegbar und die Listenelemente sind individuell mit 'Nummern' aus
der gewählten Menge nummerierbar.
Marko Radisic
Meine eigene Webseite in HTML
8/20
<OL type="A"|"a"|"I"|"i"|"1" compact>
<LI type="Typ" value="Nummer">Text</LI>
<LI type="Typ" value="Nummer">Text</LI>
</OL>
Jedes Listenelement kann außer Text natürlich Grafische Symbole, Hypertext-Links
oder auch Unter-Listen enthalten.
Quellenangabe: Castro (Seite 28)
4.5
Tabellen erstellen
Tabellen werden in HTML erst ab der Version 3 unterstützt. Falls ein Browser dies
noch nicht unterstützt, kommt das Ergebnis in der Darstellung nicht annähernd an
das heran, was sich der Autor/Ersteller vorgestellt hat: Alle Elemente einer Zeile stehen untereinander statt nebeneinander und darunter kommen dann die Elemente der
nächsten Zeilen.
Es lohnt sich und nicht nur aus diesem Grund eine fertige HTML-Seite mit mehreren
Browsern anzupassen und bei nicht Zufriedenheit in der Darstellung eventuell auf die
Anwendung einiger Befehle zu verzichten oder andere Lösungen zu suchen.
Eine Tabelle wird immer in die Tags <TABLE> und </TABLE> eingeschlossen. Die
möglichen Parameter werden selten gebraucht, da die Default-Einstellungen für die
meisten Anwendungen passen. Der Parameter BORDER schaltet die Trennlinien
zwischen den Elementen der Zellen ein (angenehm beim Testen).
Da Tabellen erst dargestellt werden, wenn sie der in ihnen enthaltenen Grafiken vollständig gelesen sind, kann eine erhebliche Zeit verstreichen, bis der Leser einer
HTML-Seite, die nur aus einer Tabelle besteht, etwas zu sehen bekommt. Daher
wichtige Informationen nicht als Tabelle formatieren.
Für die mit den Tags <TD> oder <TH> definierten Felder können zusätzliche Attribute vergeben werden:
align=["left"|"center"|"right"]
horizontale Ausrichtung des Elementes innerhalb
der Zelle
valign=["top"|"middle"|"bottom"|"baseline"]
vertikale Ausrichtung des Elementes in der Zelle
width=Zahl%
definiert für diese Zelle eine bestimmte Breite (in
% von der Zeilenlänge)
nowrap
kein Zeilenumbruch für dieses Element
colspan=Zahl
Wieviele Spalten nimmt das Element ein
(Default=1)
rowspan=Zahl
Wieviele Zeilen nimmt das Element ein
(Default=1)
Marko Radisic
Meine eigene Webseite in HTML
9/20
Damit lassen sich die Elemente nicht nur gut zueinander ausrichten, sondern es ist
auch möglich, dass sich einzelne Elemente über mehrere Zellen in horizontaler und
vertikaler Richtung erstrecken.
Um ganze Textabschnitte definiert einzurücken (im Beispiel 5% der Zeile) habe ich
eine Tabelle benutzt, die nur aus einer Zeile und 2 Elementen besteht, deren linkes
leer ist:
<TABLE><TR><TD width=5%></TD><TD width=95%>
Hier, in der zweiten Zelle der Zeile, folgt der darzustellende Text, der mehr als
eine Zeile lang sein kann, da er in der Zelle automatisch umgebrochen wird.
</TD></TR></TABLE>
Bilder und Grafiken werden durch das Tag <IMG...> und den Verweis auf ihre URL in
die Gesamtdarstellung eingebunden. Sie können auch als Elemente in Tabellen auftreten. Mit Rücksicht auf die Ladezeiten sollten Grafiken so klein wie möglich gehalten werden und so einfach wie möglich gestaltet sein. 16 Farben sind meistens ausreichend.
Am weitesten verbreitet ist das GIF-Format. Es hat auch eine sehr hohe Kompressionsrate. Aber auch das JPG-Format wird von den meisten Browsern unterstützt.
Damit der Browser beim Aufbau der Seite schon einen entsprechenden Platz für die
Grafik reserviert, empfiehlt es sich unbedingt, die Parameter height und width zu
spezifizieren.
Für Text- Browser oder Benutzer, die das Laden der Grafiken aus Zeitgründen ausgeschaltet haben sollte der Parameter alt einen aussagefähigen Ersatztext enthalten.
Das Tag <IMG...> mit den wichtigsten Parametern im Überblick:
<IMG
src="URL"
vspace=Pixel
Muss-Feld mit der URL des Bildes
Ersatztext für textorientierte Browser
Angabe der Höhe des Bildes in Pixel
Angabe der Breite des Bildes in Pixel
Breite des Rahmens für den Link
gewünschter Abstand horizontal in Pixel
gewünschter Abstand vertikal in Pixel
align="top|middle|
bottom|left|right">
Angabe der Ausrichtung des Bildes zu dem nachfolgenden Text
alt="Text"
height=Pixel
width=Pixel
border=Pixel
hspace=Pixel
Quellenangabe: Castro (Seite 38)
Marko Radisic
Meine eigene Webseite in HTML
10/20
4.6
Referenzen einbinden
Grundsätzlich unterscheidet man Referenzen innerhalb eines Dokumentes (was
kein Herunterladen weiterer Informationen zur Folge hat) und externe Referenzen,
bei denen ein weiteres HTML-Dokument online geladen und sofort dargestellt wird.
Dabei ist es nicht erforderlich dass sich dieses Dokument im gleichen Directory oder
auf dem gleichen Rechner befindet.
Im ersten Fall muss zum einen die Stelle, an die durch den Verweis gesprungen
werden soll, durch einen sogenannten Anker gekennzeichnet werden und zum anderen die Stellen, von denen aus verzweigt werden kann mit einem Bezug auf diesen
Anker ausgestattet sein. In beiden Fällen wird der gleiche Hypertext-Link <A ...> mit
etwas abweichenden Parametern verwendet, was bei Anfängern leicht zu Verwechslungen führt:
Von hier können Sie auf den Abschnitt <A HREF="#extref"><B>Externe Referenzen</B></A> verzweigen. Die Worte Externe Referenzen sind in diesem Beispiel
fett formatiert und können angeklickt werden um zu verzweigen. Die Farbe richtet
sich nach den Festlegungen im <BODY...>-Tag. Der Referenzname (hier 'extref') ist
frei wählbar. Wichtig ist das #-Zeichen vor dem Namen, damit die interne Referenz
erkannt wird.
Der Abschnitt 'Externe Referenzen' selbst wird am Anfang (beispielsweise seiner
Überschrift) wie folgt mit dem Anker versehen:
<a name="extref"><h3><b>Externe Referenzen</b></h3></a><p>
Hier steht der Name ohne ein vorangestelltes #-Zeichen.
Anstelle des bei internen Referenzen frei definierbaren 'Labels' (#extref in oberen
Beispiel) wird bei externen Referenzen im Verweis die URL des anderen Dokumentes eingetragen.
Der URL (Uniform Recource Locator) beschreibt das File eindeutig und besteht aus
dem kompletten Dateinamen mit Pfad. Um eine Verlinkung auf die Home-Page der
Telconet AG (meiner Firma) zu setzen würde man schreiben:
Weitere Information über die <A http://www.telconet.ch"> Firma Telconet
AG </A> finden sie in diesem Link.
Um es einem User zu erleichtern, mit Ihnen Kontakt aufzunehmen, geben Sie die
<A HREF="mailto:[email protected]“
aktuelle E-mail-Adresse<A/> in der in diesem Beispiel genannten Form an, denn
auch dieser Verweis auf eine Mail-Adresse ist eine externe Referenz, die mit
dem <A..>- Befehl angegeben wird.
Quellenangabe: Castro (Seite: 71)
Marko Radisic
Meine eigene Webseite in HTML
11/20
4.7
Die wichtigsten HTML-Tags zur Text-Formatierung
Die HTML-Tags können GROSS oder klein geschrieben werden. Mit Ausnahme von
vorformatiertem Text werden sogenannte "Weisse Felder" ignoriert. Hier versteht
man zusätzliche Leerzeichen, Tabulatoren und auch Zeilenumbrüche!
Man kann also den letzten Satz so schreiben:
<FONT FACE="Arial">Hierunter versteht man zusätzliche <B>Leerzeichen</B>, <B>Tabulatoren</B> und <B>auch Zeilenumbrüche!</B></FONT>
oder auch so schreiben:
<FONT FACE="Arial">Hierunter versteht
man zusätzliche <B>Leerzeichen</B>,
<B>Tabulatoren</B> und
<B>auch Zeilenumbrüche!</B></FONT>
In jedem Fall wird die Zeile als Fliesstext dargestellt. Ein Zeilenumbruch müsste
durch <BR> in den Text eingefügt werden.
Geschachtelte Tags müssen in umgekehrter Reihenfolge wieder aufgelöst werden
(siehe obiges Beispiel). Also Nicht so: <FONT FACE="Arial"> ... <B> ... </FONT>
</B>
Quellenangabe: Castro (Seite 104)
4.8
Einfache Text-Formatierungen
Mit Formatierungen sieht der letzte Absatz des vorigen Abschnittes gleich viel übersichtlicher aus:
Dieser Absatz wird zunächst unformatiert und dann noch einmal formatiert dargestellt. Unformatiert ist der Text langweilig und schwierig zu lesen, weil es
1. keine Möglichkeit gibt, bestimmte Teile herauszuheben wie zum Beispiel
durch






Marko Radisic
Fettdruck,
Schrägschrift,
Unterstreichung,
Schriftgröße,
Schriftart,
Schriftfarbe
Meine eigene Webseite in HTML
12/20
2. Einrücken und Absatzbildung nur mit ganzen Zeilen und Zeichen bei festliegender Zeilenlänge möglich ist,
3. übersichtliche Aufzählungen nur schwer zu realisieren sind und
4. keine Möglichkeit besteht, Tabellen oder grafische Elemente in Texte einzubinden.
Alle diese Features können in einem HTML-Dokument


an fast beliebiger Stelle
und fast unabhängig voneinander
benutzt werden, indem man sie an den gewünschten Stellen ein- und auch wieder ausschaltet.
Das geschieht durch sogenannte Tags. Das sind festgelegte Kombinationen von
Buchstaben und Ziffern oder Codes, die in spitze Klammen (Krokodilmaul) eingeschlossen sind.
Von wenigen Ausnahmen abgesehen, gehört zu jedem Tag, mit dem etwas eingeschaltet wird, auch ein /Tag, mit dem dieses wieder ausgeschaltet (geschlossen)
wird. Und damit man sich nicht zwei verschiedene Paare merken muss, erfolgt das
Ausschalten mit der gleichen Zeichenfolge wie beim Einschalten mit dem Unterschied, dass ein Schrägstrich (/) als Zeichen der Umkehrung vorangestellt ist.
Die einzige Abweichung von dieser Regel sind Kommentare, wo es zwei verschiedene End-Tags gibt, die beide vom Anfangs-Tag abweichen.
Gelegentlich ist es auch möglich, End-Tags wegzulassen. Zu empfehlen ist es aber
nicht, da dieser Tag etwas Wichtiges darstellt und nicht sichergestellt ist das es in
allen Situationen auch funktioniert!
Das erste Zeichen eines Tags muss ohne Leerzeichen direkt nach der öffnenden
spitzen Klammer stehen.
Quellenangabe: Castro (Seite 8, 30, 33)
Marko Radisic
Meine eigene Webseite in HTML
13/20
5
Viertes Kapitel: Beschreibung des Produktes
Da sicher schon fast jeder im Internet surft oder schon mal eine Webseite besucht
und angeschaut hat weiss wie man sie bedient. Die Funktion dahinter sind reine Befehle die der Browser dann so Darstellt wie es der Besucher sehen sollte. Meine
Webseite kann man unter: www.va2014.ch besuchen. Über die wirkliche und ausführliche Funktion hab ich schon in der Dokumentation geschrieben. Meine Webseite
ist auf jedem Browser Darstellbar und frei zugänglich. Meine Internet-Domäne hab
ich bei „HostStar“ gehostet
6
Fünftes Kapitel: Vergleich zwischen Produkt und Absicht
Ich denke mein Endergebnis meiner Webseite ist sehr gelungen. Da ich vielen aus
der Familie, Freundeskreis und in der Firma mein Werk vorgestellt habe. Ich habe
ihnen die Hintergründe einer Webseite erklärt und wie viel Arbeit in so etwas steckt.
Ich denke ich habe einen grossen Vorteil bei der Herstellung dieser Webseite gehabt, da ich einen technischen Beruf lerne und viele Tipps von anderen die auch so
etwas gemacht haben geholt habe. Ein grosser Nachteil ist, wenn man einmal etwas
ins Internet stellt bleibt das im Internet und es gibt kein Zurück mehr. Da es für mich
bewusst war hat sich da kein Problem für mich ergeben. Deshalb ist es wichtig sich
vorher gut zu informieren und sicher sein ob man das durchziehen will. Der Zeitaufwand brauchte viel Geduld und Fleiss, dies war mir nicht ganz bewusst. Vor allem
braucht ich viel Zeit bei der Programmierung meiner Fussball- Tabelle. Mir schien es
schon nach einer Zeitaufwändigen Aufgabe aber nicht so wie es jetzt in den letzten
zwei Monaten war. Es war ein probieren bis es funktioniert hat und so aussah wie ich
es mir Vorgestellt habe. Aber schlussendlich hat sich die ganze Mühe gelohnt und
ich kann einiges mehr über HTML sagen.
Marko Radisic
Meine eigene Webseite in HTML
14/20
7
Schluss
Es war eine sehr Interessante und anspruchsvolle Arbeit. Ich habe mir etwas selber
angelernt und zum Schluss in etwas umgesetzt, auf dass ich stolz sein kann.
Es kostete mich einige Tage mein Werk so zu erstellen wie es mir am Ende passte.
Die Dokumentation musste ich sehr genau nehmen damit auch ein nicht HTML Kenner etwas darunter versteht.
Diese Arbeit hat eine grosse Bedeutung für mich, da ich viel über mich und meinem
Leben erzählt und dargestellt habe.
Ein wenig mehr Tipps holen von einem Programmierer aber ansonsten lief es so wie
ich mir das vorgestellt habe. Da ich sehr viel Interesse in dieses Werk gesteckt habe,
bin ich schlussendlich sehr stolz auf meine Arbeit. Ich hoffe, mein Werk wird positiv
angeschaut und bewertet. In dieser Vertiefungsarbeit konnte ich viel dazu lernen und
kann jetzt anderen Leuten etwas weiter geben oder empfehlen.
8
8.1
Quellenverzeichnis
Bilder
Abbildung 1
http://www.cpdmc.it/images/HTML.png
Logo der Firma
http://www.telconet.ch (auf der meiner Webseite)
(Bilder auf meiner Webseite wurden selber erstellt und durch mich angepasst!)
8.2
Textquellen
Castro
Castro Elizabeth, Webseiten mit HTML, Verlag: Markt + Technik 2005
(Teil Informationen heraus genommen wie Befehle oder Codes die ich brauchte zum Programmieren der Webseite)







Quellenangabe: Castro (Seite: 7-8, )
Quellenangabe: Castro (Seite 8-13), (Seite 111-115 Farbcodes)
Quellenangabe: Castro (Seite 27-29)
Quellenangabe: Castro (Seite 28-31)
Quellenangabe: Castro (Seite 38)
Quellenangabe: Castro (Seite: 71)
Quellenangabe: Castro (Seite 8, 30, 33)
Marko Radisic
Meine eigene Webseite in HTML
15/20
9
9.1
Anhang
Projektbeschrieb
Meine eigene Website
In meiner Probe- VA habe ich mich der Knappheit vom Erdöl auseinander gesetzt.
Da es ein sehr schwieriges ist und es mir nicht sehr gelungen ist, habe ich mir ein
neues Thema gesucht. Ich will meine eigene Homepage einrichten nach Programmiersprache. Da es Zeitaufwändig ist und das nicht alltäglich gemacht wird muss ich
mich da vertieft damit befassen.
Das will ich herausfinden:
Zuerst will ich mir die Wichtigsten „Befehle“ für die Programmierung einer Website
aneignen. Dazu habe ich mir ein Buch organisiert in dem die Basis Schritte erklärt
werden wie man zu einer gelungenen Website kommt. Wenn ich diese Basics begriffen habe, werde ich ein Paar komplizierte Befehle einsetzen. Dazu werde ich wieder
in meinen Büchern mich informieren. Da Webseiten Bilder, Links, spezielle Schriften
usw. besitzen will ich herausfinden wie es so zustande kommt. Wie die genauen
HTML- Befehle lauten und auf was ich achten muss. Und wie ich diese Datenbank
einer Website abspeichere und so als Website anzeigen lassen kann.
Das weiss ich schon:
Ich habe mich schon mit dem Buch über Webseiten befasst. Ich kenne bereits einige
Befehle die für den Anfang sehr wichtig sind. Mit einem Lehrmeister habe ich mich
auch schon ausgetauscht. Da er auch vor kurzem eine eigene Website für seine
Freundin erstellen durfte, konnte ich viele Informationen und Beispiele studieren. Da
die Website nur aus Befehlen und Pfad Angaben besteht brauche ich ein gutes Textprogramm zur Ausführung. Ich brauche auch meine eigene Domain (Beispiel; nzz.ch)
die ich bei einem Hoster (Internetdienstleister) miete.
Wieso dieses Thema:
Da mein Beruf viel mit Internet und Programmierung zu tun hat, will ich etwas erstellen was nicht alltäglich für einen Telematiker ist. Mich hat es schon immer wundergenommen wie so eine Website aufgebaut ist und was sie für einen Hintergrund hat.
Ich habe mal zufällig den Quellentext einer Website angeschaut und es hat mich fasziniert was für Zeichen- und Textbefehlen sie besteht. Als mir mein Lehrmeister seine
Website zeigte, wollte ich auch unbedingt so etwas in Angriff nehmen. Es würd mir
viel Erfahrung erbringen in diesem Bereich. Es hat viel Bezug zur Elektronischen Datenverarbeitung und somit werde ich viel mehr über diese wichtige Erfahrung lernen
und mehr verstehen.
Marko Radisic
Meine eigene Webseite in HTML
16/20
Meine Arbeitsschritte:
Zuerst werde ich mein Buch komplett durchlesen um mir eine Basis anzuschaffen.
Danach würde ich mir einen Namen für die Webseite bei einem Internetdienstleister
mieten. Nach diesem Schritt würde ich meine Website aufbauen mit dem Inhalt meiner Person, Hobbies und meiner Firma. Dazu werden noch Fotos und Informationen
eingefügt, die am Schluss eine schöne grafische Oberfläche präsentiert
Marko Radisic
Meine eigene Webseite in HTML
17/20
9.2
Zeitplan und Protokoll
Protokoll:
Datum
Tätigkeit
Kommentar zu Auffälligem, zu besonderen Arbeitsschritten, Erfahrungen
08.10
10.10
Angefangen mit lesen vom Buch von
Elizabeth Castro (Webseiten mit
HTML)
Das Buch Schritt für Schritt erarbeitet
bis zur Hälfte.
Dreiviertel des Buches erarbeitet
Ein gewisses Grundgerüst erarbeitet und
verstanden.
15.10
und umgesetzt
Ab diesem Punkt konnte ich mit meinem
Projekt anfangen da ich mir wissenswertes erarbeitet habe.
18.10
Grundgerüst meiner Webseite
Habe ich alles in HTML Sprache ge-
erstellt, Startseite
schrieben und selber Gedanken über das
Design gemacht.
23.10
28.10
Unterverzeichnisse eingefügt wie,
Diese Verzeichnisse schmücken meine
über mich, Hobbies und meine
Webseite in dem ich in jedem Verzeichnis
Firma
etwas andere erzähle.
Unterverzeichnisse eingepasst,
Doku geschrieben in etwa 3 Seiten
Ich habe die Verzeichnisse einzeln angepasst aber der Text ist noch nicht vorhanden, folgt noch.
07.11
In den Unterverzeichnissen Grafi-
Bilder eingefügt die ich mir selber ange-
ken eingefügt sowie auch einen
passt habe und die Beschreibung des
Beschrieb
jeweiligen
Unterverzeichnisses eingefügt.
16.11
Dokumentation erweitert und bei
Kleine Anpassungen vorgenommen die
Webseite Anpassungen gemacht
später nach meiner Vorstellung aussahen.
Marko Radisic
Meine eigene Webseite in HTML
18/20
21.11
Darstellung der Webseite ange-
Die Schriftart und die Schriftgrösse mei-
passt mit der Schriftart -und Grös-
ner Webseite angepasst.
se
Wichtige Befehle die ich gebraucht habe
30.11
Bis zu 5 Seiten Text geschrieben
beschrieben und mit Beispielen erklärt.
für die Dokumentation
04.12
Letzte Texte und Grafiken eingefügt und angepasst und 3 weitere
Titelbild für meine Webseite eingefügt die
ich selbst erstellt und angepasst habe.
Seiten für die Doku geschrieben
13.12
Dokumentation erweitert und angepasst nach Vorgaben
15.12
16.12
Dokumentation mit dem Lehrmeis-
Fehler oder Verbesserungsvorschläge
ter angeschaut und angepasst
ausgeführt.
Abgabetermin um 10:00 Uhr bei
Herrn Käser
Marko Radisic
Meine eigene Webseite in HTML
19/20
Hiermit versichere ich, dass ich die vorliegende Arbeit selbstständig verfasst und keine andere als die
angegebenen Quellen und Hilfsmittel benutzt habe. Sätze, die eins zu eins übernommen sind, stehen
in Anführungs- und Schlusszeichen und sind mit Quellenangaben versehen.
Personen, die mir die Arbeit korrigiert haben oder mich sonst wie unterstützt haben, sind mit vollem
Namen im Protokoll erwähnt.
Ort, Datum
Unterschrift
Marko Radisic
Meine eigene Webseite in HTML
20/20