internet technologie n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Internet Technologie PowerPoint Presentation
Download Presentation
Internet Technologie

Loading in 2 Seconds...

play fullscreen
1 / 88

Internet Technologie - PowerPoint PPT Presentation


  • 98 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Internet Technologie' - borka


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
internet technologie

Internet Technologie

Prof. Dr.-Ing. Franz-Josef Behr

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

lernziele
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

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

inhalte
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

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

web referenzen
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

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

diskussionsforen
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.
  • www-html@w3.org: A technical discussion list. If you have a proposal for a change to HTML/XHTML
  • w3c-translators@w3.org: This is a mailing list for people working on translations of W3C specifications

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

verwandte gebiete
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.

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

verwandte gebiete ii
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.

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

definitionen
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]

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

das web ideen und ziele
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

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

historischer abriss
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

http://kartoweb.itc.nl/webcartography/webbook/ch06/ch06.htm#

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

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

wachstum
Wachstum

Source: http://www.netfactual.com

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

einige statistische zahlen
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

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

wesentliche organisationen
Wesentliche Organisationen

http://www.ietf.org/

http://www.w3c.org/

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

die idee berschaubare aber m chtige standards
Die Idee: Überschaubare, aber mächtige Standards
  • „It's not often in standardization that you can actually simplify something," Tim Berners-Lee

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

wesentliche ans tze
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

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

wesentliche ans tze ii
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

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

uniform resource identifier uri
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

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

uniform resource identifier uri ii
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)

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

uri beispiele
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.html- http scheme for Hypertext Transfer Protocol services
  • mailto:mduerst@ifi.unizh.ch- 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

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

urn z zt im experimentellen stadium
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

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

uniform resource locator url
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>]

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

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

für ftp-Zugänge mittels Browser!

  • 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.

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

gebr uchliche url form
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

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

base urls
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/

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

absolute und relative urls
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

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

relative urls
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

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

regeln uri urn und url
Regeln: URI, URN und URL

Die Anwendung der Technik des universellen Adressierens erfordert,

dass die Adressen einer Reihe von Regeln folgen:

  • 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

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

beispiel f r nutzung von escape zeichen
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

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

ip adressierung
IP-Adressierung
  • Form: 192.168.111.103
  • Netzklassen: A, B, C [,D, E]

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

class c netze
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.

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

class b und class a netze
Class B- und Class A-Netze
  • ClassB: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.
  • ClassA: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.

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

dns domain name service
DNS - Domain Name Service
  • Abbildung “sprechener Namen” auf IP-Adressen

Beispiel: gis-news.de

  • Top-Level-Domains, z.B.
    • de - Deutschland
    • com - (US-) Companies
    • edu - education
    • org - Organisationen
  • neue TLDs (seit 2001)
    • z.B. .info, .biz
  • Sub-Level-Domain
    • kann weitere Unterdomains enthalten, wie z.B. java.sun.com
    • Name muß Rechte berücksichtigen

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

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

domain namen
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.

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

aufbau von domain namen
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.

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

top level domains
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.

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

dienste im internet
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

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

word wide web
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)

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

slide38
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)

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

e mail
E-Mail
  • World Wide Web (WWW)
  • File Transfer (FTP)
  • E-Mailelektronischer Nachrichtenaustausch
  • Newsgroups (News)
  • Telnet
  • Gopher
  • Chat (IRC)

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

news groups
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)

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

telnet
Telnet
  • World Wide Web (WWW)
  • File Transfer (FTP)
  • E-Mail
  • Newsgroups (News)
  • TelnetA program which permits a user on one computer to use that computer as a terminal to access another, perhaps distant, computer
  • Gopher
  • Chat (IRC)

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

hypertext transfer protocol http
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/

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

mime multipurpose internet mail extensions
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.

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

mime ii
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=)

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

mime iii
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";

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

mime type aufbau medientypen
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 sindtext = 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

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

http transaktionsablauf
HTTP-Transaktionsablauf

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

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

http user client
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.

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

http request
HTTP Request
  • GET /X/Y.html HTTP/1.0Connection: Keep-Alive User-Agent: Mozilla/4.61 [en] (Win95; I) Host: site.org:8000Accept: 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

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

http response
HTTP Response
  • HTTP/1.1 200 OKDate: 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>

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

hypertext markup language 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

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

die offizielle seite
Die offizielle Seite
  • http://www.w3.org/MarkUp/

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

aktueller stand
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/

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

vorgehen bei der texteingabe
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.

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

entities
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 &lt;.

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

entities ii
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: &lt; or &#60;
  • 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!

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

entities f r umlaute
Entities für Umlaute
  • Ersetzen:
    • ä ---> &auml;
    • Ä ---> &Auml;
    • ö ---> &ouml;
    • Ö ---> &Ouml;
    • ü ---> &uuml;
    • Ü ---> &Uuml;
    • ß ---> &szlig;
  • Unicodes als numerische Angabe, z.B. &#252; für “ü“
    • Ab der Sprachversion 4.0 benutzt HTML das Universal Character Set (UCS) nach Standard ISO 10646

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

exkurs entities als spam schutz
Exkurs: Entities als Spam-Schutz
  • Häufig werden <a href="mailto:name@firma.de">name@firma.de</a>
  • Schreiben Sie stattdessen folgendes (ohne Leerzeichen):
  • <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#110;&#97;&#109;&#101;&#64;&#102;&#105;&#114;&#109;&#97;&#46;&#100;&#101;">&#110;&#97;&#109;&#101;&#64;&#102;&#105;&#114;&#109;&#97;&#46;&#100;&#101;</a>

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

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

textauszeichnung
Textauszeichnung

Auszeichnung

Vorgaben für den Sätzer

Quelle: Dynamic Web-Publishing

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

was ist ein html dokument
Was ist ein HTML-Dokument?
  • Ein HTML-Dokument besteht aus HTML-Elementen.
  • HTML-Elemente werden durch HTML-Tags definiert.

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

html tags
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!

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

struktur von tags
Struktur von Tags

Öffnendes Tag

Schließendes Tag

  • 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)

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

schreibweise
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.“

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

anf hrungszeichen bei attributen
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.

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

ein erster versuch
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>

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

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

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

html grundger st
HTML-Grundgerüst

Jahr 2000

<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

<html>

<head>

<title>Eine einfache Seite</title>

</head>

<body>

Hier kommt der Inhalt!

</body>

</html>

Jahr 2002

<!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>

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

slide68

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>

...

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

head abschnitte
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

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

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

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

dublin core metadata

Content

Intellectual Property

Instantiation

Coverage Source

Description Subject

Type Title

Relation

Contributor

Creator

Publisher

Rights

Date

Format

Identifier

Language

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”>

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

dublin core metadata referenzen
Dublin Core Metadata: Referenzen

The Dublin Core

  • purl.org/dc
  • Nordic DC Metadata Creator http://www.lub.lu.se/cgi-bin/nmdc.pl

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

html document type definitions
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/

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

strict dtd
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">

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

loose 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">

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

der body abschnitt
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>

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

der body tag
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">

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

html editoren
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

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

html editoren1
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/)

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

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

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

wysiwyg editoren
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.

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

wysiwyg editoren ii
WYSIWYG-Editoren II
  • Vorteile:
    • Auch durch ungeübte Nuutzer handhabbar
  • Nachteil:
    • Oft zuviel Code (längere Ladenzzeiten)
    • Nichtkonformer Code

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

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

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

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

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

sonstige programme
Sonstige Programme
  • http://www.styleassistant.de/
  • http://www.thecastle.com/software.html#splitimage

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

halten sie ihren code korrekt html tidy
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/.

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

machen sie ihre seiten bekannt
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

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

aufgabe
Aufgabe
  • Schreiben Sie eine kleine HTML-Datei mit einem Editor, die z. B. eine Zeile ausgibt.
  • Erzeugen Sie die gleiche Ausgabe, indem Sie eine Datei in der Textverarbeitung erzeugen und diese im HTML-Format exportieren.
  • Vergleichen Sie die Ergebnisse im Browser.
  • Vergleichen Sie die Ergebnisse im Quelltext (Rechtsklick im Browser).

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