Stichpunkte zum Aufbau einer HTML-Website

Größe: px

Ab Seite anzeigen:

Download "Stichpunkte zum Aufbau einer HTML-Website"

Alexander Schräder
vor 8 Jahren
Abrufe

1 Stichpunkte zum Aufbau einer HTML-Website Aufbau eines HTML-Dokumentes: HTML = Hyper Text Markup Language Texteditor zur Befehlseingabe oder im Browser (MIE) Ansicht Quellcode Tags = HTML-Befehle - immer in spitzen Klammern immer großschreiben Attribute in klein <HTML> Anfang </HTML> Ende <HEAD> Text erscheint nicht auf Website </HEAD> <TITLE> jeweiliger Text für Titelleiste </TITLE> <BODY> umfaßt den gesamten Seiteninhalt </BODY> klare Gliederung bei der Programmierung beachten bei der Programmierung immer einzelne Zwischenschritte überprüfen Hintergrundfarbe im BODY-Tag <BODY bgcolor= salmon > Befehl immer bgcolor= xxx Anführungszeichen sollten mit übergeben werden Farbnamen in Englisch (reservierte Farbnamen der 16 Grundfarben: black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, white) oder als RGB-Wert (rot/grün/blau) Schriftfarbe analog über text= green im BODY-Tag bei Änderungen immer im Editor speichern und dann im Explorer aktualisieren Hintergrundgrafik alternativ im BODY-Tag background= xxx.gif oder = xxx.jpg Bildformate und größen beachten (.jpg -.gif ) im MIE (derzeit nur hier) kann das Scrolling der Hintergrundgrafik deaktiviert werden im BODY-Tag bgproperties= fixed Absätze durch <P>-Tag (mit zusätzl. Leerzeile) - Zeilenschaltung <BR>-Tag Return-Taste wird ignoriert beide benötigen keinen abschließenden End-Tag Umlaute / Eszett / Sonderzeichen: ä... - &zslig; Festes Leerzeichen (automatischer Zeilenumbruch sonst abhängig von Fenster- und Schriftgröße) verhindert Umbruch: (Namen, Größen, Datum, Uhrzeit) Ausrichtung: standardmäßig linksbündig Änderung im <P>-Tag mit align zentriert: <P align= center > rechtsbündig: <P align= right > Block: <P align= justify > kein Zeilenumbruch: <NOBR> </NOBR> - Bildlaufleisten zum Scrollen (waagerecht Zeile) Überschriften-Ordnung: <H1> xxx </H1> - am größten <H6> xxx </H6> - am kleinsten unsortierte Auzählungen: <UL> </UL> - einzelne Elemente <LI> </LI> sortierte Aufzählungen: <OL> </OL> - dito. Seite: 1 / 5

umfaßt den gesamten Seiteninhalt </BODY> klare Gliederung bei der Programmierung beachten bei der Programmierung immer einzelne Zwischenschritte überprüfen Hintergrundfarbe im BODY-Tag <BODY bgcolor=

2 Textformatierung (die wichtigsten Befehle): <B>fett</B> <I>kursiv</I> möglichst vermeiden, da es ein Link suggerieret <U>unterstrischen</U> <BIG>größere Schrift</BIG> <SMALL>kleine Schrift</SMALL> <SUB>tief</SUB>gestellt <SUP>hoch</SUP>gestellt Kombinationen möglich <B><I>xxxxx</B></I> Reihenfolge egal - überlappende Klammerungen vermeiden (Übersichtlichkeit, Programmierstil), werden aber interpretiert Standardschriftgröße: <BASEFONT size=x> </BASEFONT> x=1 7 1 = klein 7 = groß Standard = 3 relative Veränderung der Schriftgröße: size=-2 bis + 4 Schriftgröße ändern absolut oder relativ: <FONT size=x> s.o. </FONT> Schriftfarbe: <FONT color= xxx > </FONT> --- Farbnamen oder rgb-wert Schriftart bei MIE: <FONT face= ARIAL > </FONT> Trennlinien: <HR> ohne Schattierung: <HR noshade> definierte Weite (vom aktuellen Fenster) <HR width= 66% > Achtung bei absoluten Werten wegen Bildscvhirmauflösung (640 x x 600) ausrichten: zentriert: <HR width= 66% > links <HR align= left width= 66% > rechts <HR align= right width= 66% > Laufschrift (derzeit nur MIE): <MARQUEE> </MARQUEE> Laufrichtung nach rechts <MARQUEE direction= right > </MARQUEE> Laufrichtung wechselnd <MARQUEE behavior= alternate > </MARQUEE> räumlicher Abstand <MARQUEE scrollamount=30> </MARQUEE> Hintergrundfarbe <MARQUEE bgcolor= xxx > </MARQUEE> Einfache Tabelle (3 Spalten, 3 Zeilen). <TABLE> komplette Tabelle Zeile <TH> Überschrift Zeile </TH> <TD> Tabellenfeld </TD> <TH> xxx </TH><TH> xxx </TH><TH> xxx </TH> <TD> xxx </TD><TD> xxx </TD><TD> xxx </TD> <TD> xxx </TD><TD> xxx </TD><TD> xxx </TD> </TABLE> Überschrift nach <TABLE>-Tag mit <CAPTION> xxx </CAPTION> mit anderen Formatierungen möglich <B><I>... Überschrift ausrichten <CAPTION align= bottom > unter dem Text </CAPTION> <CAPTION align= top > über dem Text </CAPTION> <CAPTION align= center > zentriert über dem Text </CAPTION> <CAPTION align= left > links über dem Text </CAPTION> <CAPTION align= right > rechts über dem Text </CAPTION> <CAPTION valign= top > zentriert über dem Text </CAPTION> Seite: 2 / 5

interpretiert Standardschriftgröße: <BASEFONT size=x> </BASEFONT> x=1 7 1 = klein 7 = groß Standard = 3 relative Veränderung der Schriftgröße: size=-2 bis + 4 Schriftgröße ändern absolut oder

3 <CAPTION valign= bottom > zentriert unter dem Text </CAPTION> Tabellenrahmen: im <TABLE>-Tag den Zusatz border=x <TABLE border=2> Abstand zw. Gitternetz und Zellinhalt: cellspacing=x Abstand zw. zwei Zellen: cellpadding=x Tabellenhintergrund: <TABLE>-Tag durch Attribut bgcolor= xxx ergänzen Beispiel: <TABLE border=3 bgcolor= salmon > Rahmenfarbe: <TABLE>-Tag ergänzen durch bordercolor= xxx Breite / Höhe der Tabelle: Höhe im Tag ergänzen <TABLE height=%-wert oder Pixel-Wert> Weite im Tag ergänzen <TABLE width=...> Beispiel: <TABLE height= 66% width= 180 border=5> Tabellenfeldhöhe, -breite: <TH> oder <TD>-Tag ergänzen durch height=x für Höhe und width=x für Weite Tabelle ausrichten: Text links neben der Tabelle, <TABLE>-Tag ergänzen durch <TABLE align= right > Text rechts neben der Tabelle, <TABLE>-Tag ergänzen durch <TABLE align= left > Verweise: Tag einfügen, wo Sie hinspringen möchten <A Name= #name > xxx </A> Hyperlink zu einer Marke mit <A HREF= #name> xxx </A> Hyperlink zu anderem Dokument im gleichen Ordner: neues Dokument mit neuem Namen erstellen, dann Hyperlink setzen mit <A HREF= xxx.htm > xxx </A> Weltweiter Verweis: wird analog behandelt, jedoch der Hyperlink stellt die gesamte Fremdadresse (URL) dar: <A HREF= > Fortunecity </A> http steht für hypertext transfer protocoll Mailadresse: <A HREF= mailto:wilfried.kesseler@t-online.de > Wilfried Keßeler </A> Verweistextfarbe ändern: <BODY>-Tag wird ergänzt für unbesuchte (link), besuchte (vlink) und angeklickte (alink) Verweise: <BODY bgcolor= xxx link= xxx vlink= xxx alink= xxx > Grafik einfügen: Bitte Bildformat beachten (Datenvolumen!!!) gif oder jpg- Format verwenden. Grafik / Bild muß im gleichen Ordner abgelegt sein. Um Grafik sichtbar anzuzeigen benötigt man den <IMG>-Tag --- <IMG src= xxx.jpg alt= inhalt > alt kennzeichnet den alternativen Bildtext, wenn Grafiken nicht (oder noch nicht) angezeigt werden/sind. Im <IMG>-Tag kann auch die Ausrichtung angegeben werden align= center (left / right) Grafiken sind i.d.r. ohne Rahmen. Über border ist aber ein Rahmen definierbar: <IMG src= xxx.gif alt= xxx border=3> Der Wert stellt Pixel dar. Grafik skalieren (wichtig!!!): Breite und Höhe werden definiert durch: width und height. Der <IMG>-Tag wird entsprechend ergänzt: <IMG src= xxx.gif with=200 height=300> Ein Prozentwert würde sich am Browserfenster orientieren. Seite: 3 / 5

Breite / Höhe der Tabelle: Höhe im Tag ergänzen <TABLE height=%-wert oder Pixel-Wert> Weite im Tag ergänzen <TABLE width=.

4 Größenangaben sollten stimmen, da ansonsten unnötig viele Daten transportiert werden müssen respektive diese aufgebaut werden müssen. Ein Bild von 500 x 400 Pixel kann zwar auf 50 x 40 verkleinert werden. Wenn allerdings das Bild nur im Verweis verkleinert wird, stecken trotzdem alle Daten des großen Bildes dahinter (Übungsgrafik erstellen!). Informationen also möglichst immer optimal aufbereiten!!! Grafik als Verweis: auf ein anderes Dokument: Der <IMG>-Tag wird also durch einen <A HREF=...>-Tag geklammert: <A HREF= xxx.htm ><IMG src= xxx.gif alt= xxx ></A> Der Verweis kann natürlich auch eine weltweit erreichbare Seite beinhalten. Frames: Sind unabhängige Teile des partitionierten Browser-Anzeigebereiches. Jeder Bereich verhält sich eigenständig. Frame-Set ist die Aufteilung des Anzeigebereiches. Inhalt eines Frames ist in einer eigenständigen HTML-Datei. <FRAME>-Tag ersetzt <BODY>-Tag Beide wesentlichen Browser (MIE und Netscape) interpretieren Frames. Frame-Set: Neue Datei Namens frames.htm -- Kleinschreibung angewöhnen, da es sonst u.u. Probleme bei manchen FTP (File Transfer Protocoll)-Programmen geben könnte. Grundgerüst: <HTML> <HEAD> <TITLE> Frames </HEAD> <FRAMESET> </HTML> Anzeigebereich horizontal teilen: Den Tag <FRAMESET> durch Attribut rows ergänzen: rows= Höhe1,Höhe2,... je nach Anzahl der darzustellenden Bereiche. Framehöhe relativ zur Höhe des Browser-Anzeigebereiches: <FRAMESET rows= 20%,*,50% > Die *-Angabe definiert den restlichen Bereich der nicht definierten Anzeigefläche. In unserem Beispiel also 30%. Im Beispiel haben wir drei Frames definiert. Die Angaben können absolut (Pixel) oder relativ (Anteil am Fenster) erfolgen: <FRAMESET rows= 20%,*,50% > --- relativ <FRAMESET rows= 50,100,* > --- absolut Anzeigebereich vertikal teilen: Den Tag <FRAMESET> durch Attribut cols ergänzen: cols= Breite1,Breite2,... je nach Anzahl der darzustellenden Bereiche. <FRAMESET cols= 20%,*,50% > Die Angaben können absolut (Pixel) oder relativ (Anteil am Fenster) erfolgen (s.o.). Anzeigebereich vertikal und horizontal in vier gleiche Teile teilen: <FRAMESET cols= 50%,* > <FRAMESET rows= 50%,* > Seite: 4 / 5

Wenn allerdings das Bild nur im Verweis verkleinert wird, stecken trotzdem alle Daten des großen Bildes dahinter (Übungsgrafik erstellen!). Informationen also möglichst immer optimal aufbereiten!

5 <FRAMESET rows= 50%,* > Asymmetrisch teilen: Anzeigebereich vertikal und horizontal asymmetrisch teilen: <FRAMESET cols= 150,* > <FRAMESET rows= 150,* > Seite: 5 / 5

Ähnliche Dokumente

Das Grundgerüst für ein HTML-Dokument sieht so aus:

Schuljahr 2013 2014 Projekt im Mathematisch-Naturwissenschaftlichen Profil Geschichte der Mathematik HTML - Internetpräsentation Klasse 8B M.Reuß Das Grundgerüst für ein HTML-Dokument sieht so aus: