Internet Technologie

Hochschule für Technik / University of Applied Sciences, StuttgartProf. Dr.-Ing. Franz-Josef Behr

Internet Technologie

Prof. Dr.-Ing. Franz-Josef Behr


Lernziele

• Kennenlernen der Techniken und Methoden des Internets als Medium der geschäftsorientierten Präsentation und Kommunikation

• Kennenlernen und Einüben aktueller Web-Programmiersprachen- und -Methoden

sowie

• Fähigkeit zum systematischen Design von WWW-Applikationen


Inhalte

• Definitionen, Ideen und Ziele, Historie• Adressierungskonzepte (URI, URL)• Base-URL, relative und absolute URLs• http-Protokoll und MIME-Types• Internet-Dienste• Textauszeichnung• HTML-Tags und ihre Attribute• Entities• Grundstruktur einer HTML-Datei• Head-Abschnitt mit Dokumenttypangabe und Meta-Tags


Web-Referenzen

• HyperText Markup Language (HTML)Home Page, http://www.w3.org/MarkUp/

• Getting started with HTML by Dave Raggett • Quittner, Joshua. “Network Designer:Tim Berners-Lee”. 1999, Time

Magazine. http://www.time.com/time/time100/scientist/profile/bernerslee.html


Diskussionsforen

• comp.infosystems.www.authoring.html: A USENET newsgroup where HTML authoring issues are discussed. "How To" questions should be addressed here. Note that many issues related to forms and CGI, image maps, transparent gifs, etc. are covered in the WWW FAQ.

• [email protected]: A technical discussion list. If you have a proposal for a change to HTML/XHTML

• [email protected]: This is a mailing list for people working on translations of W3C specifications


Verwandte Gebiete

• XML: the universal format for structured documents and data on the Web. It allows you to define your own mark-up formats when HTML is not a good fit. XML is being used increasingly for data; for instance, W3C's metadata format RDF.

• W3C's Cascading Style Sheets language (CSS) provides a simple means to style HTML pages, allowing you to control visual and aural characteristics; for instance, fonts, margins, line-spacing, borders, colors, layers and more. W3C is also working on a new style sheet language written in XML called XSL, which provides a means to transform XML documents into HTML.


Verwandte Gebiete II

• Document Object Model– Provides ways for scripts to manipulate HTML using a set of methods

and data types defined independently of particular programming languages or computer platforms. It forms the basis for dynamic effects in Web pages, but can also be exploited in HTML editors and other tools by extensions for manipulating HTML content.


Definitionen

• „an internet-wide distributed hypermedia information retrieval system“ [Liu et al. 1994]

• „the World Wide Web is a global, seamless environment in which all information (text, images, audio, video, computational services) that is accessible from the Internet and can be accessed in a consistent and simple way by using a standard set of naming and access conventions“ [WebMaster Magazine 1996]

• „the World Wide Web (known as "WWW', "Web" or "W3") is the universe of network-accessible information, the embodiment of human knowledge“ [W3C 1999]


Das Web: Ideen und Ziele

• Lokalisierung von Information mit Hilfe einer uniformen Addressierungsmethode

• Uniformer Zugang (lesen und schreiben) über eine Standard-Benutzungsschnittstelle

• Inhalte als Hypermedia-Dokumente, visualisierbar/abspielbar auf unterschiedlichsten Rechnern

• Integration externer Informationsquellen (z.B. Datenbanken) • Unterstützung von Transaktionen als Grundlage für interaktive

Anwendungen (Client/Server) • Demokratie: Jeder kann Information in das Web einfügen,

inhärente Verteilung


Historischer Abriss

• 1965 Begriffe Hypertext und Hypermedia (Ted Nelson)

• 1969 ARPANET (mit 4 Knoten) • 1974 TCP -Protokoll• 1983 Begriff Internet • 1989 World Wide Web (Berners-Lee,

Cailliau; Release 1991) • 1993 Mosaic Browser (Web hat 341634%

jährliche Wachstumsrate) • 1995 Web überholt FTP im Transfervolumen

htt

p:/

/kar

tow

eb.it

c.n

l/web

cart

og

rap

hy/

web

bo

ok/

ch06

/ch

06.h

tm#

Weitere Informationen in A Brief History of the Internet, http://www.isoc.org/internet/history/brief.shtml


Wachstum

Source: http://www.netfactual.com


Einige statistische Zahlen

• Anzahl weltweit registrierter Domainnamen:

31497437 INTERNATIONAL (COM)21783099 INTERNATIONAL (EDU) 7429 INTERNATIONAL (NET) 3658670 INTERNATIONAL (ORG)2408744 United Kingdom (CO.UK)

Source: http://www.domainstats.com/, Nov 23,2002


Wesentliche Organisationen

http://www.ietf.org/ http://www.w3c.org/


Die Idee: Überschaubare, aber mächtige Standards

„It's not often in standardization that you can actually simplify something," Tim Berners-Lee


Wesentliche Ansätze

• Dokumentformat – Hypertext Markup Language, HTML

– Document Type Definition (DTD) Standardized General Markup Language (SGML)

• Transferprotokoll – Hypertext Transfer Protocol, HTTP (ASCII-kodiertes Request-Reply

Protokoll über TCP/IP


Wesentliche Ansätze II

• Einheitliches Identifikationsschema: Uniform Resource Identifier, URI

– Informationsressourcen müssen identifizierbar sein (per Name, per Adresse / Lokation)

– jede Ressource im Internet soll identifizierbar sein

– Identifikations-Schema (string!) muss erweiterbar, vollständig sein.

Weitere Informationen: Payer, Margarete <1942 - >: Wir katalogisieren das Internet : URL's, URN's und Co., http://www.payer.de/einzel/urlco.htm


Uniform Resource Identifier (URI)

• Syntax für alle Identifikatoren [RFC2396]<uri> ::= <scheme>":"<scheme-specific-part>

• <scheme> bezeichnet Namensschema für diesen URI• <scheme-specific-part> enthält aktuelle Identifikation entsprechend

des scheme


Uniform Resource Identifier (URI) II

• URIs können sein:

– Lokationen/Adressen: Uniform Resource Locator (URL)

– Namen: Uniform Resource Name (URN, Ziel: Vereinheitlichung jeglicher Namensgebung)

– Metainformationen: Uniform Resource Characteristic (URC)


URI-Beispiele

Beispiele für gebräuchliche URIs:

• ftp://ftp.is.co.za/rfc/rfc1808.txt - ftp scheme for File Transfer Protocol services

• gopher://spinaltap.micro.umn.edu/00/Weather/California/Los%20Angeles - gopher scheme for Gopher and Gopher+ Protocol services

• http://www.math.uio.no/faq/compression-faq/part1.htmlhttp scheme for Hypertext Transfer Protocol services

• mailto:[email protected] mailto scheme for electronic mail addresses

• news:comp.infosystems.www.servers.unix- news scheme for USENET news groups and articles

• telnet://melvyl.ucop.edu/- telnet scheme for interactive services via the TELNET Protocol


URN - z.Zt. im experimentellen Stadium

• URN [RFC 1737, RFC 2141, RFC 3061] (<scheme> ::= "urn") <urn> ::= "urn:" <nid> ":" <nss>

– nid = Namespace Identifier– nss = Namespace Specific String

• Eigenschaften:– global eindeutig (global scope and uniqueness) – dauerhaft beständig (persistence) – skalierbar – Unterstützung bestehender Applikationen – erweiterbar – unabhägig – auflösbar


Uniform Resource Locator (URL)

• URL scheme Definitionen [RFC1738]:http, https, ftp, news, mailto, telnet und andere

• darunter scheme-specific-part Definitionen der generellen Form["//"] [user [":"password] "@"] host [":"port] ["/"url-path]

• relative URLs sind möglich [RFC 1808]

• i. A. Einschränkung des generellen scheme-specific-part<http_URL> = "http://" <host> [ ":" <port> ] [<abs_path>]


für ftp-Zugänge mittels

Browser!

URL: ["//"] [user [":"password] "@"] host [":"port] ["/"url-path]

• user: An optional user name. Some schemes (e.g., ftp) allow the specification of a user name.

• password: An optional password. If present, it follows the user name separated from it by a colon.

• The user name (and password), if present, are followed by a commercial at-sign "@". Within the user and password field, any ":", "@", or "/" must be encoded.

• host: The fully qualified domain name of a network host, or its IP address (RFC 1034).

• port: The port number to connect to; in most cases: default port number (80 für http).

• url-path: supplies the details of how the specified resource can be accessed. Note that the "/" between the host (or port) and the url-path is NOT part of the url-path.


Gebräuchliche URL-Form

• i. A. üblich … und Ihnen bekannt:

Einschränkung des generellen scheme-specific-part

<http_URL> = "http://" <host> [ ":" <port> ] [<abs_path>]

• Beispiel: http://www.gis-news.de/links/xml.htm


Base URLs

• Die „Base URL“ einer Internet-Resource sind die Zeichen bis zum (einschließlich) letzten Schrägstrich (slash) im Pfadnamen.

Absolute URL Base URL

http://gis-news.de/ http://gis-news.de/

http://gis-news.de/xml/ http://gis-news.de/xml/

http://gis-news.de/format/about.html http://gis-news.de/format/

http://gis-news.de/map/map1.html?x=3500100.0 http://gis-news.de/map/


Absolute und relative URLs

• absolute URLs: identifizieren eine Resource unabhängig von ihrem Kontext.

• relative URLs: eine Resource wird relativ zu ihrer Base URL gebildet– Vergleichbar mit relativen Pfadangaben auf dem PC


Relative URLs

• Im Kombination von Base URL und relativer URL lässt sich imme eine absolute URL ableiten.

• Beispiel: Base URL sei http://WebReference.com/html/

Relative URI Absolute URI about.html http://WebReference.com/html/about.html tutorial1/ http://WebReference.com/html/tutorial1/ tutorial1/2.html http://WebReference.com/html/tutorial1/2.html / http://WebReference.com/ //www.internet.com/ http://www.internet.com/ /experts/ http://WebReference.com/experts/ ../ http://WebReference.com/ ../experts/ http://WebReference.com/experts/ ../../../ http://WebReference.com/ ./ http://WebReference.com/html/ ./about.html http://WebReference.com/html/about.html

Source: WebReference.com


Regeln: URI, URN und URL

• Zeichensatz: ISO Latin-1 (ähnlich ASCII-Zeichensatz)• Keine Leerzeichen.: Maskierung durch %20.• Reservierte Zeichen, u. a.:

– Escape-Zeichen (%): Identifizierung von Zeichen.

– Hierarchiezeichen (/): Trennung von Verzeichnis- und Dateinamen.

– Fragment Delimiter (#): Trennung des URI eines Datenobjekts von einem Fragment oder einem Teilfeld des Datenobjekts.

– Query Delimiter (?): trennt Anfragestring an Ressource von ihrer Identifikation ab

Die Anwendung der Technik des universellen Adressierens erfordert,

dass die Adressen einer Reihe von Regeln folgen:


Beispiel für Nutzung von Escape-zeichen

• Escape-Zeichen (%): Identifizierung von Zeichen, z. B.:• Leerzeichen: %20• Hierarchiezeichen (/): Trennung von Verzeichnis- und Dateinamen.• Query Delimiter (?): trennt Anfragestring an Ressource von ihrer

Identifikation ab

• Beispiel>

http://localhost/cgi-bin/mapserv.exe?img.x=348&img.y=318&zoomdir=1&zoomsize=2&layer=St%E4dte&layer=Autobahnen&layer=Strassen&layer=Seen&layer=Fl%FCsse&layer=H%F6henstufen&layer=Europa&layer=Meer&map=C%3A%2FProgramme%2FApache+Group%2FApache%2Fhtdocs%2Fmacon%2Fdemo.map&imgext=4.296614+49.186302+7.284114+52.174938&imgxy=274.5+274.5


IP-Adressierung

• Form: 192.168.111.103• Netzklassen: A, B, C [,D, E]


Class C-Netze

• This is the most widely used class by small businesses. When you look at the IP address, you'll notice that class C networks start with a first number that's between 192 and 223 (205.161.74.x for example). There can be up to 2,097,151 class C networks and each network can handle close to 254 computers.


Class B- und Class A-Netze

• Class B:IP addresses of this type starts with a number between 128 and 191. It's possible to have 16,384 of these networks and each class B network can handle up to 65,534 IP addresses or computers.

• Class A:Starts with a number between 1 and 126. Only 126 of these networks are available, however each class A network can handle 16,777,214 IP addresses or computers.


DNS - Domain Name Service

• Abbildung “sprechener Namen” auf IP-Adressen

Beispiel: gis-news.de

Sub-Level-Domain– kann weitere Unterdomains

enthalten, wie z.B. java.sun.com

– Name muß Rechte berücksichtigen

Top-Level-Domains, z.B.– de - Deutschland– com - (US-) Companies– edu - education– org - Organisationen

neue TLDs (seit 2001)– z.B. .info, .biz

Zuständig: nationale Behörden, z.B. Deutsches Network Information Center, www.denic.de


Domain-Namen

• A domain name is a unique, clear and descriptive addressing standard used to locate a specific destination on the Internet. They are primarily used to point to website pages or used in the creation of email addresses.

• A domain name often relates to the name of a business, organisation or service,and like any company name, it has to be registered.


Aufbau von Domain-Namen

• Usually between 3 and 63 characters long (excluding the suffix such as .com),

• Alphanumeric characters and the hyphen (e.g., 0 to 9, a to z and the hyphen (-) ). Some domains can have less than 3 characters, or may not allow as many as 63, but as a general rule these are typical.

• A space cannot be used in a domain name, and should not begin or end with a hyphen (-).

• Recommendation: that the domain name be kept short for ease of use and to make it easier to remember.


Top Level Domains

• Top Level Domain: The highest level domains. • They are either

– gTLD - Generic Top Level Domain (e.g..com, .net) or – ccTLD - Country Code Top Level Domain, e.g. .de, .fr– Country codes can be found at ISO

• Second Level Domain (SLD) - Domain names with two or more suffixes,e.g. co.uk.


Dienste im Internet

• World Wide Web (WWW)• File Transfer (FTP)• E-Mail• Newsgroups (News)• Telnet• Gopher• Chat (IRC)• file: Clientspezifische Dateinamen (also lokale Dateinamen), zum

Beispiel: file://c:/pfad/dokument


Word Wide Web

• World Wide Web (WWW)An application that uses the Internet to transport hypertext/multimedia documents. These documents are viewed by a browser

• File Transfer (FTP)• E-Mail• Newsgroups (News)• Telnet• Gopher• Chat (IRC)


ftp

• World Wide Web (WWW)• File Transfer (FTP)

File Transfer Protocol--protocol for transferring files between computers.

• E-Mail• Newsgroups (News)• Telnet• Gopher• Chat (IRC)


E-Mail

• World Wide Web (WWW)• File Transfer (FTP)• E-Mail

elektronischer Nachrichtenaustausch• Newsgroups (News)• Telnet• Gopher• Chat (IRC)


News-Groups

• World Wide Web (WWW)• File Transfer (FTP)• E-Mail• Newsgroups (News)

An on-line forum that allows users from all over the world to participate in a discussion about a specific topic

• Telnet• Gopher• Chat (IRC)


Telnet

• World Wide Web (WWW)• File Transfer (FTP)• E-Mail• Newsgroups (News)• Telnet

A program which permits a user on one computer to use that computer as a terminal to access another, perhaps distant, computer

• Gopher• Chat (IRC)


Hypertext Transfer Protocol, HTTP

• Eigenschaften:– basierend auf TCP/IP – Zustandslos („erinnerungslos“),

ab HTTP 1.1: persistente Verbindungen.– ASCII kodiert, jedoch auch Transfer beliebiger Nichttext-Ressourcen,

insbesondere Graphik, Bilder, Audio, Video– basierend auf MIME (multipurpose internet mail extensions)

• Beispiel:telnet 192.168.170.1 80[RETURN]GET /index.html HTTP/1.0[RETURN] [RETURN]

• Weitere Informationen:http://www.mhonarc.org/~ehood/MIME/2046/rfc2046.htmlhttp://www.w3.org/Protocols/


Mime: Multipurpose Internet Mail Extensions

• ursprünglich für E-Mails gedacht (E-Mails-Anhänge), so genannte Multipart-Mails

• Konvention, um einzelne Teile (z.B. Text der Mail und angehängte ZIP-Datei) voneinander zu trennen

• Mime-Schema teilt mit, um welchen Datentyp es sich bei jeweiligen Teil der Mail handelt.

• Schema nicht nur für E-Mails als nützlich - fast immer, wenn entfernte Programme (z.B. Web-Browser und Web-Server) wegen einer bevorstehenden Datenübertragung miteinander kommunizieren, geht es auch um die Art der zu übertragenden Daten.


MIME II

• Verschiedene HTML-Elemente haben Attribute, die als Wertzuweisung die Angabe eines Mime-Typen erwarten, nämlich – a (type=),

– form (accept= und enctype=),

– input (accept=),

– link (type=,

– object (codetype= und type=),

– param (type=),

– script (type=) und

– style (type=)


MIME III

• Wenn ein CGI-Script an den aufrufenden Browser einen HTTP-Header sendet, muss es den Mime-Type der nachfolgenden Daten senden.

#!/usr/bin/perl -w use strict; use CGI::Carp qw(fatalsToBrowser); my $Text = "Hallo Welt"; print "Content-type: text/html\n\n"; print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n"; print "<html><head><title>Hallo Welt</title></head><body>\n"; print "<h1>$Text</h1>\n"; print "</body></html>\n";


MIME-Type-Aufbau, Medientypen

• Ein Mime-Type besteht aus zwei Teilen: der Angabe eines Medientyps und der Angabe eines Subtyps. Beide Angaben werden durch einfachen Schrägstrich voneinander getrennt.Beispiele: text/html, image/gif.

• Wesentliche Medientypen sind

text = für Textdateienimage = für Grafikdateienvideo = für Videodateienaudio = für Sounddateienapplication = für Dateien, die an ein bestimmtes Programm gebunden sindmultipart = für mehrteilige Datenmessage = für Nachrichten


HTTP-Transaktionsablauf

Quelle: http://www.teco.uni-karlsruhe.de/lehre/webe/webev221099/sld046.htm


HTTP User Client

• „User Client“ entspricht i. A. einem Browser• parses the characters of an HTML document into data

characters and markup.• In the interest of robustness and extensibility, there are a

number of widely deployed conventions for handling non-conforming documents.

• It supports the `ISO-8859-1' character encoding scheme and processes each character in the ISO Latin Alphabet No. 1

• It allows the user to traverse (or at least attempt to traverse, resources permitting) all hyperlinks from <a> elements in an HTML document.


HTTP Request

• GET /X/Y.html HTTP/1.0Connection: Keep-Alive User-Agent: Mozilla/4.61 [en] (Win95; I) Host: site.org:8000 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */* Accept-Encoding: gzip Accept-Language: en Accept-Charset: iso-8859-1,*,utf-8 Extension: Security/Remote-Passphrase


HTTP Response

• HTTP/1.1 200 OK Date: Mon, 11 Oct 1999 18:55:17 GMT Server: Apache/1.2.6 Red Hat Last-Modified: Sun, 10 Oct 1999 22:45:13 GMT Content-Length: 52 Content-Type: text/html

<html> This is page Y.html in directory X.</html>


Hypertext Markup Language (HTML)

• keine Programmiersprache, sondern Auszeichnungssprache• Lesbarer Klartext: ASCII• (Weitgehend) nicht proprietär, sondern durch einen

Normierungsprozeß festlegt (www.w3c.org)• plattformunabhängig• softwareunabhängig


Die offizielle Seite

• http://www.w3.org/MarkUp/


Aktueller Stand

• XHTMLTM 2.0 W3C Working Draft 5 August 2002,http://www.w3.org/TR/2002/WD-xhtml2-20020805/

•

• HTML 4.0 Specification, http://www.w3.org/TR/1998/REC-html40-19980424/


Vorgehen bei der Texteingabe

• Immer zuerst das HTML-Grundgerüst.• Maskierungsvorschriften für Umlaute, Sonderzeichen und HTML-

eigene Zeichen beachten.• Zeilenumbrüche und Leerzeilen für optimale Übersicht – diese

werden jedoch nicht im User Client dargestellt.


Entities

• Some characters like the < character, have a special, predefined meaning in HTML, and therefore cannot be used in the text.

• Example: To display a less than sign (<) in HTML, we have to use the character entity <.


Entities II

• A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

• To display a less than sign in an HTML document we must write: < or <

• The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage: not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

• Entities are case sensitive!


Entities für Umlaute

• Ersetzen:– ä ---> ä

– Ä ---> Ä

– ö ---> ö

– Ö ---> Ö

– ü ---> ü

– Ü ---> Ü

– ß ---> ß

• Unicodes als numerische Angabe, z.B. ü für “ü“– Ab der Sprachversion 4.0 benutzt HTML das Universal Character Set

(UCS) nach Standard ISO 10646


Exkurs: Entities als Spam-Schutz

• Häufig werden <a href="mailto:[email protected]">[email protected]</a>

• Schreiben Sie stattdessen folgendes (ohne Leerzeichen):

• <a href="mailto:name@firma.de">name@firma.de</a>

Quelle: http://www.2andfro.de/mailto-encoder/download.htm/


Textauszeichnung

Auszeichnung

Quelle: Dynamic Web-Publishing

Vorgaben für den Sätzer


Was ist ein HTML-Dokument?

• Ein HTML-Dokument besteht aus HTML-Elementen.• HTML-Elemente werden durch HTML-Tags definiert.


HTML-Tags

• Mittels Tags wird die Auszeichnung festgelegt.• Jedes Tag besteht aus

– einer öffnenden Klammer <,

– einem Tag-Namen und

– einer schließenden rechten Klammer >.

• Tags korrespondieren weitgehend mit verschiedenen Elementen der darzustellenden Seite (Absätze, Listen, spezielle formatierte Textpassagen, Bilder, etc.).

Struktur steht im Vordergrund!


Struktur von Tags

• Tags treten weitgehend paarweise auf, z.B. <h1> ... </h1>• Ausnahme: Leere Tags, z. B.: <br />• zusätzliche Spezifikationen als Attribute möglich

– Form: Name des Attribut / „Wert des Attributs“

– Werden immer dem Start-Tag beigefügt:<img width="200" height="500" src="bild.tif" />

• Leere Tags wie <hr /> (horizontal rule) können auch als <hr> oder <hr></hr> geschrieben werden.

Empfehlung: <hr /> (XML-Konformität)

Öffnendes Tag

Schließendes Tag


Schreibweise

• HTML-Tags nicht case sensitive, d. h. <b> hat gleiche Bedeutung wie <B>.

• Jedoch: Kleinschreibung empfohlen.

• "If you want to prepare yourself for the next generations of HTML you should start using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.“


Anführungszeichen bei Attributen

• Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

• In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:name='John "ShotGun" Nelson‘

• Note: This nesting is often necessairy in JavaScript on transfering parameters to functions.


Ein erster Versuch

• Starten Sie Ihren bevorzugten Editor und geben Sie die unten angeführten Zeilen ein. • Speichern Sie die Datei mit der Namenserweiterung (extension) .html.• Öffnen Sie die Datei in Ihrem bevorzugten User Client (Browser).

<html><head><title>Title of page</title></head><body><p>This is my first homepage. <b>This text is bold</b></p></body></html>


.htm oder .html?

• Beide Formen sind möglich• .htm geprägt von DOS-Namenskonvention (8.3)• Empfehlung jedoch (bei Nutzung moderner Software): .html


HTML-Grundgerüst

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"><html><head><title>Eine einfache Seite</title></head><body>Hier kommt der Inhalt!</body></html>

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"><html><head><title>Eine einfache Seite</title></head><body>Hier kommt der Inhalt!</body></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/TR/xhtml2/DTD/xhtml2.dtd"><html xmlns="http://www.w3.org/2002/06/xhtml2"><head><title>A study of population dynamics</title> ... other head elements...</head><body> ... document body...</body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml2.dtd"><html xmlns="http://www.w3.org/2002/06/xhtml2"><head><title>A study of population dynamics</title> ... other head elements...</head><body> ... document body...</body></html>

Jahr 2000

Jahr 2002


Grundgerüst: Head-Abschnitt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Eine einfache Seite</title><meta name="description" content="Muster für den grundsätzlichen Aufbau einer HTML-Seite"><meta name="author" content="Franz-Josef Behr"><meta name="keywords" content="Web-Engineering,HTML,CSS"><meta name="generator" content="Ulli Meybohms HTML EDITOR"><meta name="Author" content="Dr. Franz-Josef Behr"><meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"></head>...


Head-Abschnitte

• Die Inhalte des Head-Abschnitts werden im User-Client nicht dargestellt!

• Ausnahme: Inhalt des <title>-Tags … wird der Titelzeile des Clients angezeigt.

• Inhalt des <title>-Tags wichtig für Suchmaschinen “knackig“ und sinnvoll formulieren.

• Wichtig ebenfalls: Die Meta-Tags


Meta-Tags

• Metadata is “structured data about data”• Describes the document more than its content• HTML provides the META tag as a means of inserting two metadata

into your HTML documents– Metadata about the document itself

– Additional information to the HTTP header


Dublin Core Metadata

• Standard set of metadata elements established through consensus by an international, cross-disciplinary group of professionals

• Elements prefixed by DC. In META tag <META NAME=“DC.Creator” CONTENT=“Darryl Friesen”>

Intellectual PropertyContent Instantiation

Coverage SourceDescription SubjectType TitleRelation

ContributorCreatorPublisherRights

DateFormatIdentifierLanguage


Dublin Core Metadata: Referenzen

The Dublin Core– purl.org/dc

– Nordic DC Metadata Creator http://www.lub.lu.se/cgi-bin/nmdc.pl


HTML Document Type Definitions

Die zulässigen Werte für die Auszeichnung werden in Dokumententypdeklarationen (document type definitions, DTD) festgelegt. In HTML 4.01 sind dies:

– strict.dtd– loose.dtd– frameset.dtd

Norm unter: http://www.w3.org/TR/REC-html40/


strict.dtd

• Die Standard-DTD (document type definition), für sauberen HTML 4.0-Code. Sie enthält keine veralteten (deprecated) Elemente und greift zur Formatierung auf Stylesheets zurück.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">


loose.dtd

• Übergangs-DTD. • Zusätzlich zu den Elementen aus strict.dtd enthält diese

Dokumententypdeklaration eine Reihe von älteren Tags und Attributen, die durch die Einführung von Stylesheets oder neuerer Elemente an sich überflüssig geworden sind und eigentlich nicht mehr verwendet werden sollten (“deprecated” Elemente).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Der Body-Abschnitt

• umschließt den Inhalt Ihrer Seite, also das, was User Client angezeigt wird.

• Alle HTML-Elemente, mit denen wir Text, Bilder, Hyperlinks u.a.m. in unsere Webseite aufnehmen und formatieren, stehen innerhalb der <body>-Tags.

<body><p>Meine erste Seite!</p></body>


Der body-Tag

• Angabe eines Hintergrundbildes

<body background="kachel.gif">

• Farben für Schrift, Hintergrund, Links...

<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

• Seitenränder<body leftmargin="30" topmargin="50">


HTML-Editoren

• Zwei wesentliche Typen:

– Konventionelle Editoren – im einfachsten Fall notepad.exe ;-(

– Leistungsfähige, graphisch-interaktiv gesteuerte Werkzeuge – „WYSIWYG-Editoren“.

http://www.jendryschik.de/wsdev/einfuehrung/hilfsmittel/editoren.html#vergleich


HTML-Editoren

• HTML-Kit (http://www.chami.com/html-kit/)mit diversen Erweiterungen (Plug-ins)

• Ulli Meybohms HTML Editor Phase 5 (http://www.meybohm.de/htmledit/index.html)

• NetScape Composer ... und sein Microsoft Pendant• AOL Press (http://www.aolpress.com/press/index.html, evt. Nicht

mehr verfügbar)• jeder ASCII-Editor (z.b. UltraEdit, http://www.ultraedit.com/)


• Häufig: WYSIWYG-Editoren• Vorteile:• Direkte Kontrolle• Optimierter HTML-Code• Nachteile:• HTML-Kenntnisse notwendig


WYSIWYG-Editoren

• WYSIWYG = what you see is what you get• setzt vom Benutzer ausgeführte Aktionen im Hintergrund in Quelltext um.

Wenn er es nicht möchte, braucht der Benutzer den Raum der grafischen Darstellung also gar nicht zu verlassen.

• Häufig Möglichkeit, zwischen Layout- und Quelltextansicht umzuschalten.• Einige Produkte:

– GoLive– DreamWeaver – Front Page – Pagemill (MacIntosh) – SoftQuad HoTMetal– …

• Daneben bieten auch viele Produkte für Büro (Officeprodukte) die Möglichkeit, direkt HTML zu erzeugen.


WYSIWYG-Editoren II

• Vorteile:– Auch durch ungeübte Nuutzer handhabbar

• Nachteil:– Oft zuviel Code (längere Ladenzzeiten)

– Nichtkonformer Code


FTP-Programs

• ws-ftp, http://www.ispwitch.com/


Grafikprogramme

• Corel Draw• Adobe-Produkte wie Photoshop, GoLive...• Macromedia-Produkte


Sonstige Programme

• http://www.styleassistant.de/• http://www.thecastle.com/software.html#splitimage


Halten Sie Ihren Code korrekt: HTML-Tidy

• … an open source utility for tidying up HTML developed by Dave Ragett.

• composed from an HTML parser and an HTML pretty printer.• provides advice on how to make your pages more accessible to

people with disabilities,• can be used to convert HTML content into XML as XHTML.• Tidy is W3C open source and available free.• It has been successfully compiled on a large number of platforms,

and is being integrated into many HTML authoring tools.• Recently the maintenance of Tidy has been taken over by a group

of dedicated volunteers on SourceForge, see: http://tidy.sourceforge.net/.


Machen Sie Ihre Seiten bekannt

• Google: http://www.google.com/addurl.html• Altavista: http://doc.altavista.com/addurl/ • Yahoo: http://docs.yahoo.com/info/suggest/• Lycos: http://home.lycos.com/addasite.html


Aufgabe

1. Schreiben Sie eine kleine HTML-Datei mit einem Editor, die z. B. eine Zeile ausgibt.

2. Erzeugen Sie die gleiche Ausgabe, indem Sie eine Datei in der Textverarbeitung erzeugen und diese im HTML-Format exportieren.

3. Vergleichen Sie die Ergebnisse im Browser.

4. Vergleichen Sie die Ergebnisse im Quelltext (Rechtsklick im Browser).

Documents

Internet Technologie