html grundlagen ewg

Transcription

html grundlagen ewg

GRUNDLAGEN zu HTML
Quelltext
Darstellung im Browser
Befehlsübersicht unter:
http://www.wien4matik.at/
http://de.selfhtml.org/
1
INHALTSVERZEICHNIS
1.
Was ist HTML? ................................................................................................................3
2.
HTML-TAG ......................................................................................................................3
3.
Anfangs- und End-TAGs .................................................................................................3
4.
Aufbau einer html-Seite im EDITOR: ...............................................................................3
5.
Erste HTML-Seite ............................................................................................................5
6.
Absätze erstellen .............................................................................................................6
7.
Umbrüche erzwingen ......................................................................................................6
8.
Texte formatieren: ...........................................................................................................7
9.
Schachteln von HTML-TAGs ...........................................................................................9
10. Listen, Aufzählungen .....................................................................................................10
11. Trennlinien und Attribute von TAGs...............................................................................11
12. Attribute.........................................................................................................................11
13. Links (Hyperlinks) in HTML erstellen .............................................................................13
14. Tabellen ........................................................................................................................15
15. Grafiken in Homepages integrieren (unbedingt das Copyright beachten!). ....................17
16. Formate:........................................................................................................................18
2
1.
Was ist HTML?
HTML ist eine „Seitenbeschreibungssprache“, mit der dem Browser "gesagt" wird, welche
Einheiten (Buchstaben, Wörter, Sätze, Absätze) z.B. fett gedruckt werden, in bestimmten
Farben dargestellt werden, welche Farbe der Hintergrund hat, etc.
Dazu werden über das Internet HTML-Seiten übertragen. Das Bedeutsame dabei ist, dass
die HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das
eigentlich funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen.
Das zunächst Verwirrende ist, dass zwischen den Informationen noch was auftaucht.
Es gibt also nicht nur Informationen, sondern auch Anweisungen, wie diese Informationen
angezeigt werden sollen. Das geschieht über HTML-TAGs.
2.
HTML-TAG
Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.
Es werden Bereiche innerhalb von seinem Inhalt gekennzeichnet, diese werden in
bestimmter Weise angezeigt. Ein Bereich BEGINNT: <html> und ENDET: </html>
3.
Anfangs- und End-TAGs
Weiterhin gibt es einen Anfangs-TAG ( <html> )und einen End-TAG. Sonst hätten wir
nicht die Möglichkeit, mehrere Absätze zu erstellen. Der End-TAG ist fast identisch mit
dem Anfangs-TAG, mit dem einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein
Schrägstrich kommt (</html>)
1. Die TAGs sitzen immer zwischen Kleiner- und Größerzeichen < .. >
2. Zwischen den < > befindet sich die Anweisung – z.B: html. Dementsprechend sind
alle Anweisungen nur Abkürzungen (von englischen Begriffen).
3. Alle HTML-TAGs immer klein schreiben! Dies ist für XHTML und valide Webseiten
wichtig.
4.
Aufbau einer html-Seite im EDITOR:
Öffne einen Editor z.B.: (Start - Programme – Zubehör – Editor)
Setzte folgenden Aufbau ein:
<html>
<head>
</head>
<body>
</body>
</html>
3
Verschiedene Bereiche:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Bereich html
<html> Hier fängt nun der HTML-Bereich an - den Endtag finden Sie am Ende und diese
umfassen den head und den body-Bereich. </html>
head-Bereich
<head> Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht sieht
(mit Ausnahme von title) und für die Technik und Suchmaschinen da sind.
Der wichtigste Eintrag ist der <title>-Bereich. Dort wird eingetragen, was in der
Internetbrowser-Kopfzeile angezeigt wird. Dieser Eintrag wird auch von Suchmaschinen
verwendet. </head>
Einfach ausgedrückt: was im Kopf (bei einem Menschen zu mindestens) vorgeht, sieht
man nicht, aber der Körper ist sehr wohl sichtbar.
body-Bereich
Alles was hier eingetragen wird, zeigt der Browser an. Wir schreiben alle Eintragungen
zwischen <body> und </body>. Alle Eintragungen, die der Browser anzeigen soll, werden
im Body-Bereich eintragen.
Aus Platzgründen wird bei den folgenden Übungen und Beispielen nicht mehr das
komplette Grundgerüst gezeigt!
4
5.
Erste HTML-Seite
Der Auftrag lautet nun:
In einem Editor innerhalb der „body tags“ den Text genau so eingeben, wie er im
folgenden Ausdruck dargestellt ist.:
Herzlich willkommen auf
meiner ersten HTML-Seite
Hier
finden
Sie meine erste Homepage,
die ich versuche zu erstellen!
Jens
JENSI
Anschließend wird die Editor-Datei gespeichert:
ACHTUNG als Dateiendung htm oder html verwenden.
Beispiel: test01.html
Wenn man die Datei doppelt anklickt, dann wird diese im Webbrowser angezeigt. Und wir
können sie uns ansehen.Die Ausgabe im Browser wird ungefähr wie folgt aussehen:
Herzlich willkommen auf meiner ersten HTML-Seite Hier finden Sie meine erste
Homepage, die ich versuche zu erstellen! Jens JENSI
Alle Enter sind beseitigt und mehrere Leerzeichen werden zu einem Leerzeichen
zusammengefasst. Also müssen einige Tags eingebaut werden, damit alles so aussieht,
wie man es sich vorstellt. ☺.
5
6.
Absätze erstellen
<p> steht für paragraph = Absatz
Das Ergebnis ist eine Trennung mit Leerzeile:
<p>Hier meine erste Website.</p>
<p>Hallo liebe Freunde!</p>
Hier meine erste Webseite.
Hallo liebe Freunde!
Hinweis:
Anfangs-TAG <p> und am Ende der End-TAG </p>. unbedingt einhalten, da es
laut XHTML zwingend erforderlich ist. Für einen zukunftssicheren Code immer
an den End-TAG einfügen! Dasselbe Ergebnis kann auch ohne den End-TAG
erhalten werden, dabei reagiert aber jeder Browser unterschiedlich. Der Internet
Explorer zum Beispiel ist sehr fehlertolerant, andere Browser zeigen teilweise
bei fehlenden End-TAGs gar nichts mehr an.
7.
Umbrüche erzwingen
Umbruch erzwingen bedeutet eigentlich: „kein Absatz“. Sondern nur eine neue Zeile.
Dazu wird der TAG <br />verwendet.
<html>
<head>
</head>
<body>
<p> Hier kommt unser erster Test. <br />
Hallo Welt.</p>
</body>
</html>
Die Ausgabe im Browser sieht wie folgt aus:
Hier kommt unser erster Test.
Hallo Welt.
Alle HTML-TAGs kommen aus dem Englischen. So ist <br /> die Abkürzung für break =
Umbruch.
Der TAG <br /> ist XHTML konform. Oft werden Sie noch den "Vorgänger" in Form von
<br> sehen - funktioniert zwar auch, aber besser ist es, gleich den aktuellen TAG zu
verwenden - dann ist man für die Zukunft gerüstet.
6
8.
Texte formatieren:
Überschriften
Für die Textgliederung und -strukturierung. sind verschiedene Hierarchien (Wichtigkeit)
von Überschriften möglich, z.B. Kapitelüberschrift, Unterkapitel, Abschnitte, usw.
Es wird der TAG <hX> genutzt.
Das h steht für engl. header = Überschrift. Das X wird durch 1 bis 6 ( für die Wichtigkeit)
ersetzt.
•
•
h1 ist die größte und wichtigste
h6 die kleinste und somit unwichtigste (aber immer noch wichtiger als normaler
Text)
<h1> Überschriften-Ebenen 1 </h1>
<p> normaler Text </p>
Nach der Überschrift (End-TAG) erfolgt automatisch ein Umbruch.
Die Ausgabe im Browser sieht wie folgt aus:
Überschriften-Ebenen 1
normaler Text
7
Fett - hervorgehoben
Um wichtige Passagen oder Wörter hervorzuheben, können diese fett ausgegeben
werden.
Dafür gibt es 2 verschiedene Befehle. Einerseits steht dafür der TAG <b> zur Verfügung.
Das b steht für das engl. bold = fett. Andererseits haben wir den HTML-TAG <strong> engl. "überzeugend, kräftig, fest, derb".
<p> nun <b>wichtiger</b> Text mit b</p>
<p>nun <strong>wichtiger</strong> Text mit strong</p>
nun wichtiger Text mit b
nun wichtiger Text mit strong
Achtung: wenn der End-TAG vergessen wird, ist auch der restliche Text fett geschrieben.
kursiv - schräge Sache
Um Passagen oder Wörter hervorzuheben, die aber nicht so stark wie bei Fettdruck sein
sollten, kann ein Text kursiv (in Windrichtung liegend) dargestellt werden:
<html>
<head>
</head>
<body><p> Dieser Text ist nun in <i>kursiver
(schräger)</i> Schrift.</p>
</body>
</html>
Dieser Text ist nun in kursiver (schräger) Schrift.
Das i steht für das engl. italic = italienisch.
(„i“ ist ein Andenken an den ersten Schriftsetzer in der Druckerei von Aldus Manutius, der
schräge Buchstaben entwickelte, um mehr Buchstaben auf eine Seite zu bekommen und
dadurch das erste Taschenbuch herausbringen zu können. Dieser war Italiener und die
Druckerei war in Venedig. Das erste Taschenbuch musste nicht in Hosentaschen passen,
sondern in Satteltaschen.)
unterstrichen - (nicht einsetzen!)
NICHT EINSETZEN - weil jeder Surfer denkt, es handele sich bei unterstrichenem Text
um einen Link.
8
Text größer und kleiner
Um innerhalb von Text eine Textpassage größer oder kleiner darzustellen, gibt es den
TAG <big> für größer und <small> für kleiner. Dabei sollten der entsprechende End-TAG
nicht vergessen werden (</big> und </small>.
<html>
<head>
</head>
<body>
<p> Manchmal ist etwas <big>größer</big>
oder <small> kleiner </small> als es erscheint. </p>
</body>
</html>
Manchmal ist etwas größer oder kleiner, als es erscheint.
9.
Schachteln von HTML-TAGs
TAGs verschachtelt
Die TAGs können nun gemischt (verschachtelt) werden.
z. B.: einen Text erst fett und dann noch kursiv darstellen.
<p> Hier kommt nun <b>fetter und <i>kursiver (schräger)</i></b>
Text
</p>
Hier kommt nun fetter und kursiver (schräger) Text
Hinweis:
Wie bei Schachteln, die ineinander gestapelt werden, müssen die Tags auch geöffnet
und geschlossen werden,
<b> <i> Inhalt </i> </b>
9
10.
Listen, Aufzählungen
Wir haben „unsortierte Aufzählungen“
<ul> und „sortierte Aufzählungen“
<ol>
Dabei steht <ul> für das engl. unsorted list = unsortierte Liste.
Dieser TAG hat zur Folge, dass für jedes <li> ein Spiegelstrich in Form einer Kugel
gesetzt wird. Dabei steht <li> für engl. list=Liste
Jeder Auflistungspunkt wird mit <li> eingeleitet und mit </li> bendet.
Bitte folgendes eingeben:
<html>
</head>
<body>
<ul>
<li> erster Listenpunkt </li>
<li> zweiter Listenpunkt </li>
<li>...</li>
<li> x-ter Listenpunkt </li>
</ul>
</body>
</html>
•
•
•
•
erster Listenpunkt
zweiter Listenpunkt
...
x-ter Listenpunkt
Art der Nummerierung bestimmen
Der TAG <ol> kann durch <ol type=X>. ergänzt werden. Für das X gibt es verschiedene
Möglichkeiten.
Durch Auswechseln von <ul type=> eine andere Anzeige möglich ist, z. B. mit 1. ,2. , 3. ...
oder mit A, B, C, ... oder römischen Ziffern
•
•
•
•
•
type=1 normale Aufzählung (arabische Ziffern) : 1, 2, 3 ...
type=A Aufzählung mit Großbuchstaben: A,B,C, ..., Z
type=a Aufzählung mit Kleinbuchstaben: a,b,c, ..., z
type=i Aufzählung mit römischen Ziffern in klein: i,ii,iii,iv,v, ...
type=I Aufzählung mit römischen Ziffern in groß: I,II,III,IV,V, ...
Start der Nummerierung festlegen
Hier wird über das Attribut start="ZAHL" der Beginn der Zählung festgelegt.
<ol start="5" type="a">
10
11.
Trennlinien und Attribute von TAGs
Trennlinien
Trennlinien <hr /> sind an und für sich nichts Besonderes. Diese trennen zwei Abschnitte.
Das <hr /> steht für engl. horizont ruler = horizontale Linie.
<html>
<head>
</head>
<body>
<p> Text eins <hr /> Text zwei </p>
</body>
</html>
Text eins
Text zwei
12.
Attribute
Spannend ist das Prinzip von Attributen. Bisher wurden bei allen HTML-TAGs keine
Attribute aufgeführt, obwohl es welche gibt.
Wird kein Attribut aufgeführt, wird das Standard-Attribut angenommen, z. B. dass etwas
links ausgerichtet ist.
Aufbau Attribute
Attribute setzent sich aus 2 Teilen zusammen.
• Im ersten, z.B. "size", wird die Art der Beeinflussung festgelegt
• Im zweiten dann die Ausprägung, hier 20.
Länge eines Elementes
Eine Trennlinie kann auch eine Länge haben, genauso wie eine Schrift eine Schriftgröße
und jedes Mal ist die Benennung dieselbe. Das Attribut lautet size="X".
Bei dem TAG <hr /> sieht das dann wie folgt aus
<html>
<head>
</head>
<body>
<p> Text eins <hr size="20" /> Text zwei</p>
</body>
</html>
11
Anmerkung:
Die Attribute wiederholen sich bei verschiedenen TAGs - allerdings sind
nicht alle Attribute bei allen TAGs erlaubt.
Text eins
Text zwei
Breite eines Elementes
Ein weiteres Attribut ist die Breite width (engl. Breite/Weite). Im folgenden Beispiel sehen
Sie die Trennlinie mit einer Breite von 55.
Text eins
Text zwei
Abhängig vom Browserfenster!!! - ganz wichtig für alles weitere:
Die fixe Angaben, wie im letzten Beispiel mit 55 Bildpunkten, wird jetzt geändert auf
Prozente. Im nächsten Beispiel soll die Linie 55% breit abhängig vom Browserfenster sein.
Beim ändern der Fenstergröße des Browsers. wird die Linie automatisch sofort kleiner
bzw. größer.
<html>
<head>
</head>
<body>
<p> Text eins <hr width="55%" /> Text zwei </p>
</body>
</html>
Text eins
Text zwei
Ausrichtung - rechts, links, mittig
Die Position der Elemente kann ausgerichtet werden. Dazu dient das Attribut "align" (engl.:
ausrichten)
Dabei sind folgende Möglichkeiten vorhanden
•
•
•
align="left"
align="center"
align="right"
12
<html>
<head>
</head>
<body>
<p> Eine Linie verteilt auf einer Seite ...</p>
<hr width="55" align="left" />
<hr width="55" align="center" />
<hr width="55" align="right" />
</body>
</html>
13.
Links (Hyperlinks) in HTML erstellen
Mehrere Arten von Links
•
•
•
innerhalb der Homepage
auf andere Seiten im Internet
mit E-Mail-Funktion
Das Aussehen der Links kann verschieden sein. Entweder als Text, oder als Grafik.
Ein Link hat immer die Form von
<a href="DATEINAMEN.HTM">BESCHREIBUNG</a>
Wichtig die Namensgebung der Dateien zu denen der Link führen soll:
1. keine äöüß oder sonstige Sonderzeichen
2. keine Leerzeichen im Namen, stattdessen ein - (Minus) oder _ (Unterstrich), das
Minus ist vorzuziehen
3. als Endung (.htm oder .html) sollte immer bei allen HTML-Dateien einheitlich
verwendet werden. Z. B. immer nur .htm oder immer nur .html - entscheiden und
dabei bleiben!
4. der Dateinamen wird komplett klein geschrieben
5. den Inhalt in minimalistischer Form beschreiben
Hier ein Beispiel mit vier Seiten die untereinander verlinkt werden. Die Namen der Seiten
könnten sein:
• index.html
• hobbies.html
• ueber-mich.html
• linksammlung.html
13
innerhalb der Homepage
Es wird nur der Pfad ab der Startebene der Seite angegeben. Wenn keine
Unterverzeichnisse verwendet werden, gibt es auch kein Verzeichnis
So sieht der HTML-Code aus:
<a href="index.htm"> eine beliebige Umschreibung </a>
Datei liegt im Verzeichnis: kurse
kurse/index.htm
Aber nicht vergessen bei mehreren Seiten:
auf jeder Seite den entsprechenden Link auf die nächsten Seiten oder zurück einfügen.
externe Links Links auf andere Seiten
Bei externen Links muss die komplette URL angegeben werden.
Dienstart, Servername und Länderkürzel und die Unterverzeichnisse müssen eingegeben
werden. Am sichersten ist es, die Seite auf die ein Link gesetzt wird, im Browser aufrufen
und, wenn die Seite erfolgreich angezeigt wird, die URL kopieren und in den HTML-Code
übernehmen.
<a href=http://www.kidsweb.at/news-zeit.html> Kidswebseite </a>
Um die User nicht an die neue Homepage zu verlieren, muss der Link so eingegeben
werden, dass er in einem neuen Fenster geöffnet wird:
<a href="http://www.wien4matik.at/" target="blank"> Homepage der
Wiener Informatikschulen </a>
14
Aufgabe
Erstelle eine Linkliste mit fünf Automarken oder Firmen für deine Webseite, verwende
dazu eine nummerierte Liste.
14.
Tabellen
Woraus besteht ein Tabellenaufbau?
Jede Tabelle bestehen aus Reihen und Spalten.
Grundlage ist der HTML-TAG <table>. Damit fängt jede Tabelle an und mit dem
entsprechenden END-TAG </table> hört diese auf. Es ist wichtig, beide zu setzen, da bei
fehlendem END-TAG der IE die halbfertige Tabelle anzeigt, dagegen andere Browser
unter Umständen gar nichts anzeigen.
Als nächsten Schritt legen wir eine Zeile mit <tr> an. Das steht für engl. table row =
Tabellen Reihe
<table>
<tr>
</tr>
</table>
Jetzt fehlen noch die Tabellendatenzellen - also der HTML-TAG <td>, für das engl. table
data = Tabellen Daten.
<table>
<tr>
<td>
</td>
</tr>
</table>
Und jetzt kommt noch der Inhalt (Text) dazu, dann sollte unsere Eingabe folgendermaßen
aussehen:
<html>
<head>
</head>
<body>
<table>
<tr>
<td> Inhalt 1 </td>
</tr>
</table>
</body>
</html>
15
Inhalt 1
Um es auch wirklich als Tabelle sichtbar zu machen, soll der Rahmen der Tabelle auch
angezeigt werden.
<table border="1">
<tr>
<td>
Inhalt 1
</td>
</tr>
</table>
INHALT 1
Wobei: border=“1“ die Rahmenbreite angibt. Mehr Spalten werden in Form von <td>
hinzugefügt.
<table border="1">
<tr>
<td>
Inhalt 1
</td>
<td>
Inhalt 2
</td>
</tr>
</table>
INHALT 1 INHALT 2
Das gleiche mit mehr Zeilen - beides kann nach Belieben variiert werden.
<table border="1">
<tr>
<td> INHALT ZELLE
<td> INHALT ZELLE
</tr>
<tr>
<td> INHALT ZELLE
<td> INHALT ZELLE
</tr>
</table>
1
2
</td>
</td>
3
4
</td>
</td>
INHALT 1 INHALT 2
INHALT 3 INHALT 4
Ein Tabellenaufbau sollte so aussehen. Wichtig die Einrückungen, um die einzelnen Zellen
besser unterscheiden zu können.
16
15. Grafiken in Homepages integrieren
(unbedingt das Copyright beachten!).
wie, was, wo, wie groß
GIF und JPG sind die Grafikformate, die heute im Internet verwendet werden.
Die Grundstruktur des HTML-TAGs dafür lautet:
<img src="bildname.jpg" />
(img = engl. image = Bild)
<html>
<head>
</head>
<body> <img src="bildname.jpg" />
</body>
</html>
Für Bilder gibt es weitere Attribute, die aus verschiedenen Gründen sehr wichtig sind.
<img src="bildname.jpg" width="474" height="66" border="1"/>
width: die Breite des Bildes
height: die Höhe des Bildes
border: Rahmen, die Zahl gibt die Breite des Rahmens an; „0“ - kein Rahmen
Der komplette Code sieht also wie folgt aus. Erstellen Sie Ihre Internetseite mit Bild, fahren
Sie mit der Maustaste auf das Bild und warten Sie kurz. Jetzt erscheint der Alternativtext
als Tooltip.
<html>
<head>
</head>
<body><img src="bildname.jpg" width="474" height="66"
border="1"/>
</body>
</html>
Es ist günstig für mehr Übersicht, ein Unterverzeichnis für Bilder anzulegen.
Der entsprechende tag sollte dann so aussehen:
<img src="bilder/bildname.jpg" width="474" height="66" border="1"/>
17
16.
Formate:
Unterschied
GIF
JPG
Anzahl der Farben:
256
16,7 Mio
Möglichkeiten zur
Animation:
Ja
Nein
Möglichkeiten zur
Kompression:
automatisch
Kompressions-Grad
einstellbar
Eignung:
kleine Grafiken, Buttons,
animierte Grafiken
Bilder mit vielen Farben
(Photos)
Die Datengröße eines Bildes soll möglichst gering sein. Je größer (mehr KB oder gar MB),
desto länger wird gewartet bis sich das Bild öffnet (Übertragungsgeschwindigkeit im www).
Es ist daher günstig mit einem Bildbearbeitungsprogramm die Daten des Bildes zu
bearbeiten. Z.B.: für Web-speichern und als jpg speichern.
Copyright von Bildern
Bilder und Grafiken unterliegen (auch nur Teile davon) einem Copyright (jemand hat die
Rechte an diesem Werk). Daher entweder nur eigene Werke verwenden, oder den
Copyright-Besitzer fragen, ob er einer Verwendung auf Ihrer Homepage zustimmt. Eine
freundliche E-Mailanfrage ist wichtig um rechtlichen Schwierigkeiten vorzubeugen.
„Freie Bilder“ findet man unter anderem am Tiroler Bildungsserver: http://tibs.at/
http://bilder.tibs.at/index.php?page_id=6&img=16738
Text zu Bildern positionieren:
Der Befehl lautet: align="top|bottom|middle" innerhalb des IMG-TAGS.
•
•
•
align="top" - Text wird an der oberen Bildkante ausgerichtet (top = oben)
align="middle" - Text wird mittig zum Bild ausgerichtet (middle = mittig)
align="bottom" - Text wird an der unteren Bildkante ausgerichtet (bottom = unten)
<p> Bild01 <img src="bildname.jpg" align="top"
</p>
height="137" width="175" />
<p> Bild02 <img src="bildname.jpg" align="middle" height="137" width="175"
/>
</p>
<p> Bild03 <img src="bildname.jpg" align="bottom"
height="137" width="175" />
</p>
18

html grundlagen ewg

Transcription

Similar documents

Realisation - ( syrophenium ).

Internetkompetenz von SchülerInnen

Biber am unseren Gewässern - IG

ausgearbeitet und vorgetragen von Jürgen Schilling (js40

bedienungsanleitung

Kojenverzeichnis

MS-DOS-Seminar - HPK

pavone sales 5.5

Operatoren

Kfm Teilquali Teilzeit.cdr - Wirtschaftsakademie am Ring

Vorlage einer Hausarbeit - Germany Visa Information

Audi A4 Typ 8E mit Klimaautom.

Word Kapitel 8 - Computertraining4you