Homepage: Startweb-Seite einer Person, einer Firma oder Behörde.

Transkript

1 Grundbegriffe des Internets WWW: World Wide Web (weltweites Netz) Web-Seite: So wird eine einzelne Seite im Internet genannt. Homepage: Startweb-Seite einer Person, einer Firma oder Behörde. HTML: HyperText Markup Language (Seitenbeschreibungssprache) HTML ist die Sprache, in der Webseiten geschrieben sind. Diese Sprache dient zur Positionierung von Elementen in einer Webseite, wie z.b. Bilder, Tabellen und Texte. HTML ist keine Programmiersprache, in der Programmabläufe geschrieben werden können, sondern es ist eine reine Formatierungssprache. Es können aber Java Applets programmiert werden und in HTML eingebunden werden, damit in HTML Animationen d.h. bewegte Bilder möglich sind. Da es einen HTML- Standard gibt, wird HTML von allen WEB-Browser (Internet Explorer, Netscape usw.) verstanden. Applet : Ein Programm, das vor allem auf Internetseiten Anwendung findet. Es ist in der Programmiersprache Java geschrieben und ist dank dieser auf allen Plattformen wie Linux oder Windows lauffähig. XHTML: Extensible HyperText Markup Language ist eine Weiterentwicklung von HTML mit XML) HTTP: HyperText Transfer Protocol (Übertragungsprotokoll für Web-Seiten, angegeben in der Internetadresse) Hinweis: Abkürzung http unbedingt klein schreiben in der Internetadresse! FTP: File Transfer Protocol (Datenübertragungsprotokoll zur schnellen Übertragung von binären Dateien wie Programme) Anonymer FTP" wird von einigen tausend Internet-Rechnern als Möglichkeit für jedermann angeboten, Dateien abzurufen, auch wenn man auf dem entsprechenden Rechner keinen Benutzereintrag (Account) besitzt. Domain: Das Internet ist in viele Gebiete, die so genannten Domains, eingeteilt. Mit "Domain" bezeichnet man logische Subnetze ("Unternetze") innerhalb von Netzwerken. Besonders im Internet ist die Domain eine wichtige Art der Organisation. Die Top-Level-Domain gibt an, ob der Server zu einer Organisation gehört, oder einfach in einem Land steht. Organisationsbsp.:.com für kommerzielle Anbieter.net für Netzwerk Länderbsp.:.de für Deutschland.at für Österreich Server: Dies ist ein Computer, auf dem Daten abgespeichert sind und der über Datenleitungen mit anderen Computern (Clients) vernetzt ist. Internetserver: Dies ist ein Webserver, der Daten bereit stellt, die im Browser des Client angezeigt und herunter geladen werden können. Zur Kommunikation müssen Server und Client vernetzt sein, wie dies z.b. über das Internet der Fall ist.

2 URL: Uniform Resource Locator Internetadresse, die das Protokoll der Übertragung und nur den Domain-Namen enthält: z.b. Internetadresse, die das Protokoll der Übertragung und den Domain-Namen, Path (Pfad) und HTML-Dateinamen enthält: URL für Hypertextdokumente allgemein: z.b. URL für FTP: z.b. ftp://ftp.uni-paderborn.de Download: Vorgang, bei dem die Daten vom Internet z.b. auf die lokale Festplatte des eigenen Computers übertragen werden. Upload: Vorgang, bei dem die Daten vom eigenen PC ins Internet übertragen werden. Die Datenübertragungsgeschwindigkeit ist wesentlich geringer als beim Download. Browser (Stand: Sept. 2009) Browser sind Programme zum Anzeigen einer Web-Seite online bzw. offline und erlauben das Navigieren im WWW. Die bekanntesten Browser sind Internet Explorer 8 Opera 10 Mozilla Firefox Google Chrome 2.0 Safari 4 (von Apple) Seamonkey all-in-one Internet Application Suite HTML-Editoren Ein Editor ist eine Software zur Bearbeitung von Texten und kann daher zur Eingabe von HTML-Code verwendet werden. a) Text-Editoren (Quelltext-Editoren) Nachteil: Mühsame Eingabe, da man eine Unmenge von HTML Befehlen im Kopf haben muss. Beim Speichern ist beim Dateinamen die Dateierweiterung.html zu wählen. Microsoft-Editor (Notepad.Exe) Microsoft Wordpad (Wordpad.Exe) Dateityp Textdokument wählen Microsoft Word (WinWord.Exe) Dateityp Nur Text wählen Speichern / Meldung Dateikonvertierung / Windows(Standard) b) Textbasierte HTML-Editoren Die HTML-Tags werden per Klick oder Tastenkombination komfortabel erzeugt. Homesite 1.2 Phase 5 Version (empfehlenswert und kostenlos) Downloadadresse: c) WYSIWYG (What you see is what you get)-editoren (optische Editoren) zeigen dem Benutzer bereits bei der Erstellung der Internetseite die Inhalte so an wie sie später im Browser angezeigt werden. Das Programm übernimmt die Codierung nach HTML. Microsoft Frontpage 2003, Nachfolgeprogramm ist Microsoft Expression Web Adobe Dreamweaver (ursprünglich von Macromedia)

3 Einführung in HTML SELFHTML:Aktuelle Version vom , Autor: Stefan Münz Kostenloser Download der gesamten Dokumentation: 1. Starten Sie SELFHTML-Dokumentation nach dem Download und Entpacken über INDEX.HTML mit Ihrem Internet-Browser Hinweis zur Rückkehr von jeder WEB-Seite in SELFHTML zur Startseite Immer oben links SELFHTML anklicken. 2. Grundgerüst einer HTML-Datei aufrufen Inhalt: Web-Technologien HTML/XHTML / allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei 3. Textauszeichnung aufrufen HTML/XHTML / allgemeine Regeln für HTML / Textauszeichnung / Elemente und Tags in HTML (z.b. Überschrift, Zeilenumbruch) Verschachtelung von Elementen (z.b. Überschrift in kursiver Schrift) Attribute in Tags (zusätzliche Angaben in Tags, z.b. Ausgabe der Überschrift zentriert, rechtsbündig oder linksbündig) 4. Überblick über Tags (ist nicht vollständig und hier nur kurz beschrieben) Kurzreferenz: HTML 5. Überblick über Formate (Unterstreichen, fett, Ausrichtung...) Kurzreferenz: CSS (Cascading Stylesheets) 6. Navigation der Verzeichnisse (sehr gut geeignet zum Suchen) Inhaltsverzeichnis (übersichtliches Inhaltsverzeichnis wie in einem Buch) Syntaxverzeichnis (alphabetische Sortierung der Befehle/ Elemente/Schlüsselwörter) Stichwortverzeichnis (wichtige Begriffe, Ausdrücke und Schlagwörter) 7. Wichtige HTML-Elemente (WEB-Seite HTML/XHTML in SELFHTML) Elemente zur Textstrukturierung Tabellen Verweise (Links) Grafiken Formulare Frames (Eine Seite bzw. ein Bildschirm lässt sich in verschiedene Bereiche, sogenannte Frames, unterteilen) Multimedia-Objekte

4 Erstellung von Web-Seiten mit HTML 1. Erstellung einer Web-Seite mit reinem Text ohne HTML-Befehle Aufgabe: Starten Sie Ihren Text-Editor (Notepad oder Wordpad) Start / Programme / Zubehör /Notepad oder Wordpad Geben Sie folgenden Text ein: Das ist mein erster Text ohne HTML-Befehle. Speichern Sie das Dokument unter dem Namen text.html Öffnen Sie diese Datei im Browser Grundgerüst einer HTML-Datei gemäß den Standards HTML 4.01 Strict Aufgabe: Rufen Sie das Programm SELFHTML von Stefan Münz auf und suchen Sie nach dem Grundgerüst einer HTML-Datei. Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden 3 Teilen: Dokumenttyp-Angabe (Angabe zur verwendeten HTML-Version) Header (Kopfdaten. z.b. Angaben zu Titel u.ä.) Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Schema: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <meta http-equiv="content-type" content="text/html; charset=iso "> <title> Jede HTML-Datei muss einen Titel haben. </title> Inhalt der WEB-Seite Beachte: In HTML 4.01 Strict werden weder Elemente, die von W3C als deprecated (missbilligt, veraltet) eingestuft sind, noch Framesets (Framesseiten) unterstützt.

5 Grundgerüst einer HTML-Datei gemäß den Standards Strict XHTML 1.0 <?xml version="1.0" encoding="iso "?> Bezug zu XML herstellen <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Dokumenttyp Deklaration <html xmlns=" lang="de" xml:lang="de"> <title> Jede HTML-Datei muss einen Titel haben. </title> Inhalt der WEB-Seite Starttag zur Festlegung der Sprache Beachte: In Strict XHTML 1.0 werden weder Elemente, die von W3C als deprecated (missbilligt, veraltet) eingestuft sind, noch Framesets (Framesseiten) unterstützt. Grundgerüst einer HTML-Datei gemäß den Standards XHTML 1.0 Framesets <?xml version="1.0" encoding="iso "?> Bezug zu XML herstellen <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Dokumenttyp Deklaration <html xmlns=" lang="de" xml:lang="de"> <title> Jede HTML-Datei muss einen Titel haben. </title> Inhalt der WEB-Seite Starttag zur Festlegung der Sprache

6 Grundgerüst einer HTML-Datei gemäß den Standards XHTML 1.1 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="de" > <title> Jede HTML-Datei muss einen Titel haben. </title> Inhalt der WEB-Seite Beachte: In XHTML 1.1 werden weder Elemente, die von W3C als deprecated (missbilligt, veraltet) eingestuft sind, noch Framesets (Framesseiten) unterstützt. Grundgerüst einer HTML-Datei gemäß den Standards XHTML 1.1 mit Framesets 1.0 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" xml:lang="de" > <title> Jede HTML-Datei muss einen Titel haben. </title> Inhalt der WEB-Seite Beachte: In XHTML 1.1 werden Elemente, die von W3C als deprecated (missbilligt, veraltet) eingestuft sind, nicht unterstützt

7 Code der Webseite überprüfen (validieren) Das W3C (World Wide Web Consortium, ein Gremium für Standardisierung) stellt einen Validator, ein Überprüfungs- und Bestätigungstool zur Verfügung, mit dem der Code der Webseiten überprüft werden kann. Rufen Sie im Browser die Webseite auf. Laden Sie die zu überprüfende Webseite, und klicken Sie auf die Schaltfläche Check. Eine weitere Webseite zum Überprüfen: Der Begriff TAG und Element Beispiel Überschrift 1. Ordnung im Editor: <h1>html - die Sprache des Web</h1> Ausgabe der Überschrift im Browser: HTML - die Sprache des Web Das einleitende Tag <h1> signalisiert, dass eine Überschrift 1. Ordnung folgt (h = heading = Überschrift). Das abschließende Tag </h1> signalisiert das Ende der Überschrift. Ein abschließendes Tag beginnt mit einem Schrägstrich "/". Das W3-Konsortium empfiehlt zwar für HTML aus Gründen der Lesbarkeit, Namen von Elementen groß zu schreiben, also <H1>. Im Hinblick auf eine spätere Deklarierung eines Dokuments als XHTML- Dokument ist diese Idee jedoch nicht unbedingt so gut und es ist besser, von vorneherein alle Elementnamen in Kleinbuchstaben zu schreiben. Elemente wie z.b. Texte, Bilder, Tabellen werden mit Hilfe von Tags angezeigt. Erste Web-Seite mit Grundgerüst im HTML-Editor Phase 5 erstellen Aufgabe: Starten Sie den HTML-Editor Phase 5 Start / Programme / HTML /HTML-Editor 5.42 Arbeitsordner H (eventuell Unterordner) aktivieren!!!! Menü Datei/ Neues HTML Dokument Geben Sie als Titel der Seite ein: Grundgerüst / Wählen Sie Erstellen Geben Sie folgenden Text in der Zeile vor ein: Das ist mein erster Text im HTML-Grundgerüst. Menü Datei / speichern unter / Dateiname=grundgeruest / Speichern Menü Ansicht / Interne Vorschau F9 und wieder zurück mit F9 oder F8 Menü Datei /Beenden /Öffnen der Datei grundgeruest.html mit dem Browser. Lösung: HTML-Code im Editor Phase 5 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="de" > <title>grundgerüst</title> <p> Das ist mein erster Text im HTML-Grundgerüst. </p>

8 Lösung: Ausgabe im Browser Einfacher Zeilenumbruch, Zeilenumbruch mit Leerzeile (Textabsatz) Aufgaben: a) Starten Sie den HTML-Editor Phase 5 Menü Datei/ Neues HTML Dokument Geben Sie als Titel der Seite ein: Ohne Zeilenumbruch / Wählen Sie Erstellen Geben Sie zunächst zwischen und den Text ohne Tags so ein wie er im Browser unten angezeigt wird./ Vorschau mit F9 zurück mit F9 Menü Datei / speichern unter / Dateiname = Ohne Zeilenumbruch / Speichern Ergebnis: Eingegebene Zeilenumbrüche und Leerzeilen im Editor werden vom Browser... und der Text wird... dargestellt. b) Fügen Sie die Tags so ein, so dass der Text richtig ausgegeben wird. Speichern Sie die HTML-Datei von a) unter Mit Zeilenumbruch Ändern Sie den Titel der HTML-Seite auf Mit Zeilenumbruch ab Markieren Sie die Überschrift und klicken Sie auf H1-Symbol Markieren Sie den Text Liebe Mama und klicken Sie auf das Symbol für Absatz einfügen Markieren Sie den restlichen Text und wählen Sie das Symbol für Zeilenumbruch und Absatz einfügen Vorschau mit F9 und wieder zurück mit F9 / Ergänzen Sie die fehlenden Tags. Menü Datei /Speichern /Beenden Überschrift h1 < >...</ > Absatz < >...</ > Einfacher Zeilenumbruch < br />

9 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="de" > <title> Otto's Brief</title> <h1>otto's Brief an die Mutter</h1> <p>liebe Mama!</p> <p>vor 3 Wochen habe ich erfahren,<br /> dass Du krank bist.<br /> Mach Dir keine Sorgen.<br /> Mir geht es gut.<br /></p> Kommentare einfügen Kommentare sind Informationen, die nur im Quelltext lesbar sind, aber nicht im Browser. Aufgabe: Fügen Sie folgende Kommentarzeile zwischen den beiden Absätze ein: Hier beginnt ein neuer Absatz, der rechts ausgerichtet ist. Schauen Sie unter SELFHTML nach. Wie lautet die Lösung?...Hier beginnt ein neuer Absatz, der rechts ausgerichtet ist... Zeichensatz und Sonderzeichen Wenn Sie in Ihrer HTML-Datei sonst keine Angaben zum verwendeten Zeichensatz machen, sollten Sie im Hinblick auf das Internet und die internationale Verwendung deutsche Umlaute und scharfes S durch spezielle, dafür vorgesehene benannte Zeichen ersetzen. Das gilt für den gesamten Inhalt einer HTML-Datei. Zeichensätze sind Tabellen, die einem Byte-Wert ein Zeichen zuordnen, das in unseren Schriftkulturen eine Bedeutung hat. ASCII-Zeichensatz 128 Zeichen: Code 0 bis 127 Dieser Zeichensatz gilt für alle Zeichensätze der ISO-8859-X Familie und beinhaltet die lateinischen Groß- und Kleinbuchstaben, die arabischen Ziffern und die Sonderzeichen. Unicode-Kodierung Mit UTF-8 können bis zu 4 Byte, das heißt Zeichen dargestellt werden, um die Zeichen aller Sprachen aufzunehmen und jedem Zeichen eine eindeutige Nummer zu geben. Mit UTF sind HTML-Entitäten also (in der Theorie) überflüssig und verschiedenste Sprachen können in ein und demselben Dokument problemlos dargestellt werden. Latin-Zeichensatz (länderabhängig) 128 Zeichen: Code 128 bis 255 Latin 1, ISO : Zeichensatz für westeuropäische Sprachen wie Deutsch, Englisch, Französisch und amerikanische Sprachen Latin 1, ISO :slawische Sprachen wie Polnisch, Rumänisch Latin 1, ISO :türkische Sprache UTF-8 siehe XHTML 1.1

10 Benannte Zeichen im HTML-Format zur Darstellung von Sonderzeichen Um Sonderzeichen unabhängig vom eingestellten Zeichensatz richtig darzustellen, übersetzt der Browser den Zeichencode in das entsprechende Zeichen. Sonderzeichen Name in HTML Zeichen-Entity Unicode in HTML Ä ä ä Ö ö ö ü ü ü Ä Ä Ä Ö Ö Ö Ü Ü Ü ß ß ß < < < > > > & & & Anführungszeichen " " oben Geschütztes Leerzeichen Beispiel 1 mit Namen in HTML Lächle trotz großen Ärgers!... Beispiel 1 im Unicode Lächle trotz großen Ärgers! Weitere benannte Zeichen für den Zeichensatz ISO : siehe SELFHTML. Byte-Wert Zeichensatz Schriftart realisiert Zeichensatz 128 bis 255 ISO ü Arial Black 153 Ö Times New Roman Aufgaben zu Umlaute und Sonderzeichen: Editor Phase 5: Wählen Sie Einfügen /Umlaute bzw. Sonderzeichen 1. Überprüfen Sie das Gedicht auf Sonderzeichen und passen Sie den Quelltext an. 2. Schreiben Sie folgenden Text in ein neues Dokument so, dass alle Umlaute und Sonderzeichen im HTML-Format angegeben werden: Frau Öser hat Bücher im Wert von 51,93 bestellt und muss diese innerhalb der nächsten 14 Tage bezahlen.

11 Farben in HTML In HTML werden die Werte der drei Grundfarben Rot, Grün und Blau nicht in dezimaler, sondern in hexadezimaler Form angegeben. Das Hexadezimalsystem enthält die folgenden Ziffern und Buchstaben (16 Zeichen): Ziffer, A B C D E F Buchstabe Wert Grundfarben in dezimaler Form (nicht in HTML verwenden) Grundfarbe Rotwert Grünwert Blauwert Rot Grün Blau Je höher der Farbwert desto heller ist die Farbe. Da jede Farbe die Werte von 0 bis 255 annehmen kann, gibt es insgesamt 256 x 256 x 256 = Farbkombinationen (Farbmischungen). Grundfarben in hexadezimaler Form Grundfarbe Rotwert Grünwert Blauwert HTML-Farbschema #xxxxxx Rot FF #FF0000 Grün 00 FF 00 #00FF00 Blau FF #0000FF Da jede Farbe die Werte von 00 bis FF annehmen kann, gibt es insgesamt (16x16) x (16 x16) x (16x16) = Farbkombinationen (Farbmischungen) Einige Mischfarben in hexadezimaler Form Mischfarbe Rotwert Grünwert Blauwert HTML-Farbschema #xxxxxx Rot-Grün-Blau-Wert Gelb FF FF 00 #FFFF00 Weiß FF FF FF #FFFFFF Aqua (hellblau) 00 FF FF #00FFFF Standardisierte Farbnamen (nur engl. Farbnamen verwenden!) black = schwarz maroon = dunkelrot green = dunkelgrün olive = olivgrün navy = dunkelblau purple = violett teal = blaugrün gray = dunkelgrau silver = hellgrau red = rot lime = hellgrün yellow = gelb blue = blau fuchsia = magenta aqua = hellblau white = weiß Orange=orange

12 Physische Formatierungen (Anwendung ist teilweise umstritten) Formatierung HTML-Befehle Bedeutung Aussehe Start-Tag Ende-Tag n Fett <b> </b> Fette Textstelle XHTML 1.0 Strict CSS besser Kursiv <i> </i> kursive Textstelle XHTML 1.0 Strict CSS besser Unterstrichen <u> </u> unterstrichene Nicht mehr erlaubt! Textstelle Durchgestrichen <s> </s> durchgestrichene Nicht mehr erlaubt! Textstelle Hochgestellt  hoch gestellte Textstelle XHTML 1.0 Strict CSS besser Tiefgestellt  tief gestellte Textstelle XHTML 1.0 Strict CSS besser Größer <big> </big> Text eine XHTML 1.0 Strict CSS besser Nummer größer Kleiner <small> </small> Text eine XHTML 1.0 Strict CSS besser Nummer kleiner Blinkend <blink> </blink> Internet Explorer nicht möglich Beispiel <b>dieser Text ist fett </b>, danach ^hochgestellt, wieder normal, um gleich <i>kursiv</i> zu werden.