![]() |
![]() |
![]() |
![]() |
Inhalt | HTML | ![]() |
|
Hypertext |
|
||
Grundstruktur | Wenn Sie den linksstehenden link anklicken, öffnet sich ein kleines fenster mit einer leeren weissen fläche. Im blauen balken steht 'grundstruktur' vor dem namen des browsers. Mit einem rechtsklick auf die weisse fläche öffnet sich ein menu - wählen sie 'Quelltext anzeigen': Sie befinden sich im editor und nun sehen die htm-datei. Diese können sie nunn weiterbearbeiten und auf Ihrem rechner speichern.
Die grundstruktur besteht aus einer grossen klammer, bestehend aus den tags <htm> </htm> die einen dateikopf(<head> </head>) und einen dateikörper (<body> </body>) umklammern. Im dateikopf befindet sich die klammer <title>grundstruktur</title>, die den titel beinhaltet, der vom browser in den blauen kopfbalken ausgelesen wird |
selfhtml
Vertiefung |
|
Metatags | Im dateikopf stehen die 'metetags. Sie machen angaben zur datei (kurzbeschrieb, sprachversion, autor), für die suchmaschinen (indizieren oder nicht, links weiterverfolgen) und zur weiterleitung.
Im kopf plaziert man auch gerne die css-angaben und die javascript-programme. Im <body>-tag habe ich ein attribut plaziert, nämlich die schwarze hintergrundfarbe |
Schweizer Domains
Deutsche Domains Internationale Domains gratis Domains |
|
Textauszeichnung | In dieser datei finden Sie verschiedene tags zur textauszeichnung und strukturierung.
Man unterscheidet generell logische tags, die eine beziehung ausdrücken wie die überschriftrn <h1> bis <h6>, die vom browser richtig ausgelesen werden und physische textauszeichnungen wie der tag <b>fett</b>, der lediglich bewirkt, dass das wort fett ausgezeichnet wird. Auch zeilenumbrüche werden durch einen tag gekennzeichnet, ansonsten Ihr strukturierter quelltext als bandwurm erscheint. |
||
Links | Links machen den text erst zum hypertext. Es sind pfadangaben zu andern dateien. Aus diesem grund ist auch die bildverweise in dieser beispieldatei, da bilder nicht in der html-datei eingebunden sind, sondern lediglich darauf verwiesen wird. | ||
Tabellen | Wenn die ansprüche an die grafik steigen, möchte der seitengestalter selber bestimmen, wo und wie gross seine inhalte dargestellt werden. Dazu braucht er tabellen. Das verwirrliche im quelltext ist, dass die tabellenzellen untereinander geschrieben werden, wo sie doch im browser nebeneinander dargestellt werden. | ||
Framesets | Framesets sind umstritten, da sie üblicherweise eingesetzt wurden, um die navigation vom inhalt zu trennen. Landet man nun in einer suchmaschine einen treffer, kann man sich nicht mehr weiterhangeln, wenn man auf der reinen inhaltsseite gelandet ist. | ||
CSS | Will man die darstellung der tags nicht dem browser und seinen voreinstellungen (extra - internetoptionen - schriftarten) überlassen benutzt man Cascading Style Sheets. Die sind definitionen, wie die tags auszusehen haben. Sie werden üblicherweise im kopf jeder einzelnen datei untergebracht oder es wird im dateikopf auf eine separate datei verwiesen. Die hat den vorteil, dass man auf einen schlag das aussehen einer ganzen site ändern kann.
Es lassen sich auch angaben zur position machen. |
Browserkompatibilität Online-validator CSS-validator zum herunterladen | |
Javascript | Um die seiten interaktiver oder dynamischer zu gestalten, wurde javascript eingeführt. Es ist eine scriptsprache (keine programmiersprache), die die statische html-seite mit zusätzlichen funktionen erweiter. Das 'script' kann irgendwo auf der seite stehen, üblicherweise wird es im kopf plaziert oder im kopf wird ein verweis auf eine separate datei gemacht.
Javascript ist nicht einfach zu lernen, deshal empfiehlt es sich freie scripts im internet herunterzuladen |
||
Formulare | Mit formularen können Sie mit den besuchern Ihrer seite interagieren. Nachdem der besucher eine auswahl getroffen hat oder selber etwas eingegeben hat, drückt er den button'abschicken'. Im einfachsten fall schickt der besucher Ihnen direkt ein mail (form action="mailto: ....@...."). Üblicherweise wird er auf dem server ein programm aufrufen, das automatisch diverse aktionen ausführen wird (zB form action = "../../cgi-bin/suche.cgi"). Sie haben vom provider ein cgi-bin-verzeichnis (common gateway interface - binär) zugewiesen bekommen, wo sie perl- oder php-programme plazieren können: Zähler, gästebücher, suche, usw. Bei diesen müssen Sie lediglich die richtigen pfade setzen und einige variabeln anpassen. |
www.perl.com
worldwidemart.com/
www.perl.org
www.perlarchive.com
www.php.net www.dynamic-webpages.de www.phpwelt.de www.php-center.de www.phpcrawler.de |
|
Wysiwyg | = What you see is what you get. Editierprogramme für HTML-seiten, die so funktionieren sind am leichtesten zu bedienen. Leider haben sie die eigenheit zT überflüssigen code zu produzieren, der die seiten langsam macht oder grafisch entstellt. Deshalb ist es nützlich, sich ein wenig in HTML auszukennen, wenn man auf fehlersuche ist. Im fall dieser seite habe ich zuerst meine ersten gehversuche in einem wysiwyg-editor gemacht, anschliessend von hand optimiert und eine möglichst robuste vorlage kreiert. Nun fülle ich nur noch inhalte in einem quelltexteditor ab. | ||
Top | HTML |
![]() |