Fachbereich Automatisierung und Informatik

Wernigerode

Vorlesung „Einführung in die Webtechnologien“

Kurzskript Kapitel HTML / CSS Version 19.02.2017

Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Friedrichstraße 57 - 59 38855 Wernigerode

Raum: Tel.: Fax: Email: Web:

2.202 03943/659-338 03943/659-399 [email protected] http://www.miwilhelm.de

Inhaltverzeichnis 1

Hypertext Markup Language ........................................................................................................... 7 1.1 Einfache HTML-Codes............................................................................................................. 7 1.1.1 Body: ................................................................................................................................. 7 1.1.2 Kommentare ...................................................................................................................... 8 1.1.3 Überschriften ..................................................................................................................... 8 1.1.4 Absätze .............................................................................................................................. 8 2 XHTML ........................................................................................................................................... 9 3 Cascading Style Sheet .................................................................................................................... 11 3.1 Maßeinheiten .......................................................................................................................... 11 3.2 Farbeinheiten .......................................................................................................................... 11 3.3 Font ......................................................................................................................................... 12 3.3.1 font-family ....................................................................................................................... 12 3.3.2 font-style .......................................................................................................................... 12 3.3.3 font-size ........................................................................................................................... 12 3.3.4 font-variant ...................................................................................................................... 13 3.3.5 font-weight ...................................................................................................................... 13 3.4 Text ......................................................................................................................................... 14 3.4.1 word-spacing ................................................................................................................... 14 3.4.2 letter-spacing ................................................................................................................... 14 3.4.3 text-decoration ................................................................................................................. 14 3.4.4 vertical-align .................................................................................................................... 14 3.4.5 text-transform .................................................................................................................. 15 3.4.6 text-align .......................................................................................................................... 15 3.4.7 text-indent ........................................................................................................................ 15 3.4.8 line-height ........................................................................................................................ 15 3.4.9 white-space ...................................................................................................................... 16 3.5 Color und Background-Eigenschaften .................................................................................... 16 3.6 display ..................................................................................................................................... 17 3.7 Listen ...................................................................................................................................... 18 3.7.1 list-style-type ................................................................................................................... 18 3.7.2 list-style-image ................................................................................................................ 18 3.7.3 list-style-position ............................................................................................................. 19 3.7.4 list-style ........................................................................................................................... 19 3.8 Box .......................................................................................................................................... 20 3.9 Background ............................................................................................................................. 22 3.10 Ausrichtung ganzer Blöcke ................................................................................................. 23 3.11 Formatierung in einem Block.............................................................................................. 23 3.12 Klassen ................................................................................................................................ 24 3.12.1 Zusammenfassung von Selektoren .................................................................................. 25 3.13 Pseudo-Elemente in CSS..................................................................................................... 25 3.14 Pseudo-Klassen ................................................................................................................... 27 3.15 ID-Selektor .......................................................................................................................... 27 4 Weitere HTML-Elemente .............................................................................................................. 29 4.1 Definition List ......................................................................................................................... 29 4.2 Grafische Linien ..................................................................................................................... 29 4.3 Verknüpfung ........................................................................................................................... 30 4.3.2 Bilder ............................................................................................................................... 32 4.4 Laufschrift............................................................................................................................... 33 4.5 Musik ...................................................................................................................................... 33 Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 2

5

6

7

8

9

4.6 Video....................................................................................................................................... 33 4.7 Tabellen .................................................................................................................................. 34 4.7.1 Beispiele einer HTML-Tabelle ........................................................................................ 35 4.7.2 Tabelle mit Überschriften ................................................................................................ 35 4.7.3 Tabelle mit Überschriften am unteren Ende .................................................................... 35 4.7.4 Tabelle mit Zellen über mehrere Bereiche ...................................................................... 36 4.7.5 Tabellen-Rand ................................................................................................................. 38 4.8 HTML-Sonderzeichen ............................................................................................................ 38 Weitere CSS-Elemente .................................................................................................................. 41 5.1 Border (Ränder) ...................................................................................................................... 41 5.2 MARGIN ................................................................................................................................ 42 5.3 PADDING .............................................................................................................................. 42 5.4 Bilder und Text ....................................................................................................................... 43 5.5 Mauszeiger .............................................................................................................................. 43 5.6 Literatur .................................................................................................................................. 44 5.7 Validierung ............................................................................................................................. 44 Nachbarschaft, Cascade und Sheets ............................................................................................... 45 6.1 Cascade und Nachbarschaft in CSS ........................................................................................ 45 6.2 Sheets ...................................................................................................................................... 45 6.2.1 Attribute für die Positionierung und Größe ..................................................................... 46 6.2.2 Attribut position............................................................................................................... 47 6.2.3 float .................................................................................................................................. 47 6.3 Layout-Beispiele mit Sheets ................................................................................................... 48 6.3.1 float-Elemente ................................................................................................................. 48 6.4 Flex-Layout ............................................................................................................................. 50 6.4.1 Beispiel 1 ......................................................................................................................... 50 6.4.2 Aufbau des Flex-Layouts................................................................................................ 50 6.4.3 Beispiel 2 ......................................................................................................................... 52 CSS-Beispiele ................................................................................................................................ 54 7.1 Beispiele.................................................................................................................................. 54 7.1.1 1. Beispiel ........................................................................................................................ 54 7.1.2 2. Beispiel ........................................................................................................................ 55 Formulare ....................................................................................................................................... 56 8.1 Texteingabe............................................................................................................................. 56 8.1.1 Validierung mittels Pattern .............................................................................................. 57 8.2 CheckBox................................................................................................................................ 58 8.3 RadioButton ............................................................................................................................ 59 8.4 ComboBox .............................................................................................................................. 59 8.5 ComboBox als Liste................................................................................................................ 60 8.6 label......................................................................................................................................... 60 8.7 fieldset und legend .................................................................................................................. 61 8.8 Datalist .................................................................................................................................... 62 Javascript........................................................................................................................................ 63 9.1 Eigenschaften von Javascript: ................................................................................................. 63 9.2 Abschnitt script ....................................................................................................................... 63 9.3 Variablen................................................................................................................................. 63 9.4 Numerik-Funktionen ............................................................................................................... 64 9.5 String-Funktionen ................................................................................................................... 64 9.6 Number-Funktionen ................................................................................................................ 65 9.7 Mathematische-Funktionen..................................................................................................... 66 9.8 Elemente ansprechen .............................................................................................................. 67

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 3

9.8.1 9.8.2 9.8.3 9.8.4

Textfeld............................................................................................................................ 67 CheckBox ........................................................................................................................ 67 Radiobutton ..................................................................................................................... 67 ComboBox ....................................................................................................................... 68

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 4

Quellcodes Quellcode 1 Quellcode 2 Quellcode 3 Quellcode 4 Quellcode 5 Quellcode 6

Grafische horizontale Linien ...................................................................................30 Verknüpfungen ........................................................................................................31 E-Mail ......................................................................................................................32 Tags bei Bilder ........................................................................................................33 Einfache Tabelle ohne Rahmen ...............................................................................35 Tabellen mit Zellen über mehrere Bereiche ............................................................37

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 5

Abbildungen Abbildung 1 Abbildung 2 Abbildung 3 Abbildung 4 Abbildung 5 Abbildung 6 Abbildung 7 Abbildung 8 Abbildung 9 Abbildung 10 Abbildung 11 Abbildung 12 Abbildung 13 Abbildung 14 Abbildung 15 Abbildung 16 Abbildung 17 Abbildung 18 Abbildung 19 Abbildung 20 Abbildung 21 Abbildung 22 Abbildung 23 Abbildung 24

Anzeige der Bereiche einer Box ..............................................................................20 Ergebnis des ersten Beispiels ..................................................................................21 Ergebnis des ersten Beispiels mit der zweiten Variante von h2 ..............................22 Span-Bereichs-Formatierung ...................................................................................24 Beispiel von Pseudo-Elementen ..............................................................................26 Beispiel eines ID-Selektors .....................................................................................28 Definition List .........................................................................................................29 Tabelle mit colspan..................................................................................................37 Überanderliegende Boxen (sh_bsp01.html) ............................................................46 float-Bereiche mit Umbrechen, sh_bsp02.html .......................................................48 float-Bereiche ohne Umbrechen, sh_bsp03.html.....................................................48 position:absolute, top, left, width, sh_bsp04.html ...................................................49 position:relative, margin-left, sh_bsp05.html ..........................................................49 Beispiel eines Flex-Layouts.....................................................................................50 Zweites Beispiel eines Flex-Layouts in Firefox ......................................................52 Zweites Beispiel eines Flex-Layouts in IExplorer...................................................52 Aufbau des Flex-Layouts im dritten Beispiel ..........................................................53 Textfeld in einem Formular .....................................................................................56 Textformular mit Überprüfung ................................................................................58 CheckBox in einem Formular..................................................................................59 RadioButtons in einem Formular ............................................................................59 ComboBox in einem Formular ................................................................................60 ComboBox als Liste in einem Formular..................................................................60 Fieldset mit einer Legende ......................................................................................62

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 6

1 Hypertext Markup Language Hypertext Markup Language (HTML) ist die Sprache, in der Web-Seiten entwickelt werden. Zusätzliche Eigenschaften können durch Javascript oder CCS hinzugefügt werden. HTML arbeitet mit Tags. Das sind Marken die durch eine Anfangs- und eine Endmarke definiert sind. Als Ergänzung dienen Attribute, wie zum Beispiel die Farbe einer Schrift. Dokumentation zu HTML: • http://www.selfhtml.de/ • http://www.dpunkt.de:80/techno/HTML/HTML-Ref.html Jede HTML-Datei wird durch die HTML-Tags eingeschlossen.

1.1

Anfang des Tags Ende des Tags

Einfache HTML-Codes

1.1.1 Body: Mindestinhalt: Titel des Dokuments Beispiel: Titel des Dokuments Kern des Dokuments

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 7

1.1.2 Kommentare

1.1.3 Überschriften 1. Überschrift 6. Überschrift

Größte Überschrift Kleinste Überschrift

1.1.4 Absätze Jeder Absatz fängt mit dem Tag an und hört mit dem Tag auf. Diese Begrenzung dient auch der Eingrenzung für unterschiedlich formatierte Absätze. Beliebiger Text Hinweise: • Überschriften haben automatisch einen Absatz • Einen manuellen Zeilenumbruch erreicht man mit dem Tag
. • Ein Paragraph-Absatz hat eine Leerzeile vor und nach dem Absatz • Ein Break-Absatz hat nur einen Zeilenumbruch

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 8

2 XHTML • Neuformulierung von HTML 4.01 • Doc-Type bestimmt den Typ • Jedes Tag beginnt und endet mit einem Tag o o
, html und body müssen vorhanden sein • Trennung Inhalt und Darstellung • Bessere Analyse von XML-Parser • Mehr Möglichkeiten durch CSS • Fast alle visuellen "tags" sind verboten (strong, em) • Attributwert immer in Anführungszeichen angeben • boolean-Werte Attributname als Attributwert angeben, o z. B. • Dazu müsste man auch HTML 5 besprechen: o Mehr Formulare o Bessere Einbindung von Videos o Grafikelement Canvas Beispiel: Beispiel 1 Überschrift CSS-Datei test.css: body { font-size: 1.2em; color: rgb(100,100,100); font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: 400; }

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 9

Erläuterung: • Die erste Zeile zeigt eine XML-Datei an. • Danach kommt das neue HTMLDOCTYPE-Tag, welches auf eine Document-Type-defeintionDatei (DTD) hinweist. Dort stehen alle Regeln bezüglich XHTML. • In der nächsten kommt das neue HTML-Tag mit der verwendeten Sprache. • Im Abschnitt „head“ sind nun die normalen Abschnitte: o title o meta o link verweist auf die externe CSS-Datei

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 10

3 Cascading Style Sheet • • • •

CCS steuert das Aussehen von HTML-Elementen Die „Konstanten“ stehen in der HTML-Datei Die „Konstanten“ stehen in einer externen CSS-Datei Der Selektor bestimmt das Aussehen

Selektor { Eigenschaft1:Wert1; Eigenschaft2:Wert2; } Beispiel: h2 { font-size: 14pt; color: #0000FF; font-weight: small; background-color: yellow; }

3.1 in cm mm em ex pt pc px

3.2

Maßeinheiten inch centimeter millimeter Höhe des aktuellen Fonts Höhe des Buchstaben „x“ des aktuellen Fonts point, 1/72 in, entspricht 0,35278 mm pica, entspricht 12 points: 4,23 mm Pixel

Farbeinheiten

#rrggbb rgb(x,y,z) rgb(x%,y%,z%)

Hexadezimale Darstellung Farbanteil pro Farbe, jeweils 0 bis 255 Farbanteil in Prozent pro Farbe, jeweils 0 bis 100%

Farbnamen: aqua black blue fuchsia gray green lime maroon navy olive purpleredsilver teal white yellow

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 11

3.3

Font

3.3.1 font-family Die Fonts werden nach ihrer Reihenfolge ausgewählt. a) feste Namen wie Garamond, Palatino, Serif, Times, Courier New, "Gill Sans" Tahoma, Geneva, Arial, Helvetica, b) generische Namen Serif sans-serif Kursiv (Italic) Fancy Monospace

3.3.2 font-style Gibt die Stil an (normal oder kursiv) • normal • italic • oblique // ähnlich italic

3.3.3 font-size Gibt die Größe der Schrift an. Vier Möglichkeiten a) Absolute Größe • xx-small • x-small • small • medium • large • x-large • xx-large • 18pt • 18in • 18cm • 18 mm • 18pc • 18px

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 12

b) Relative Größe • smaller • larger

besser als absolute Größe besser als absolute Größe

c) Absolute Breite entsprechend eines Em • 1,5 em

besser als absolute Größe

d) Prozentwert, Verhältnis zur Elternschrift • 300%

besser als absolute Größe

3.3.4 font-variant Setzt den Text in KAPITÄLCHEN. • normal • small-caps

3.3.5 font-weight Dicke der Buchstaben (normal, fett etc). a) Nummern • 100 // Dünn, lighter • 200 bis • 900 // Fett, bold b) Name • lighter • normal • bold • bolder

// Verringerung zur Elternschrift

// Vergrößerung zur Elternschrift

Beispiele: td { font-family : Tahoma, Geneva, Arial, Helvetica, sans-serif; font-size: 19pt; color: #000000; font-weight : normal; } .cell { font-family : Tahoma, Geneva, Arial, Helvetica, sans-serif; font-size: 19pt; color: #000000; font-weight : 900; }

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 13

3.4

Text

3.4.1 word-spacing Setzt den zusätzlichen Platz zwischen den Wörtern (gespreizte Sätze) • 1em • 0.5em • 2pt

3.4.2 letter-spacing Setzt den zusätzlichen Platz zwischen den Buchstaben (gespreizte Wörter) • 0.2em • 0.5mm Beispiel: Letter-spacing: 1.2 mm;

3.4.3 text-decoration Zusätzliche Textattribute: • none • underline • overline • line-through • blink

3.4.4 vertical-align Setzt die Textposition zum Elternelement • baseline // Grundlinie • sub // Tiefer • super // Höher • text-top // Ausrichtung an den oberen Rändern • text-bottom // Ausrichtung an den unteren Rändern • middle // Vertikale Zentrierung bzw. Elternelement • top // Ausrichtung am größten Element • bottom // Ausrichtung an tiefsten Element (g) • percentage // positiver oder negativer Wert)

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 14

3.4.5 text-transform Text-Umwandlung • capitalize • uppercase • lowercase • none

sinnvoll sinnvoll

3.4.6 text-align Horizontale Ausrichtung • left • right • center • justify

(Alle Zeilen haben die gleiche Länge, nicht sinnvoll)

3.4.7 text-indent Platz vor dem ersten Wort, Einrücken der Zeile um x Einheiten • 5em • 2mm

3.4.8 line-height Linienhöhe unabhängig zur Schrifthöhe • 1.5 Beispiel: line-height: 1.5; font-size: 12pt Fontgröße 12pt, Linienhöhe 18pt (Faktor 1,5)

Beispiele: code { color: red ; font-weight: bold ; text-decoration: underline } h1 { font-size: 28pt ; color: maroon ; text-align: center } p.newstyle { letter-spacing: 0.5em ; text-transform: uppercase } Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 15

3.4.9 white-space Legt fest, wie Textumbrüche, Leerzeichen und Tabulatoren im Quellcode vom Browser angezeigt werden. white-space: Behandelt Leerzeichen und Zeilenumbrüche • normal // Zusätzliche Leerzeichen werden ignoriert • pre // Vorformatierten HTML-Text • nowrap // Nur Zeilen mit
werden umgebrochen

normal

pre nowrap

pre-wrap

pre-line

3.5

Zeilenumbrüche im Quellcode werden nicht dargestellt und mehrere Leerzeichen im Quellcode zu einem zusammengefügt. Der Browser fügt einen Zeilenumbruch am Zeilenende ein. Zeilenumbrüche und Leerzeichen werden, wie im -Tag, so dargestellt, wie sie im Quellcode eingegeben sind. Zeilenumbrüche im Quellcode werden nicht dargestellt, mehrere Leerzeichen im Quellcode zu einem zusammengefügt und der Browser fügt am Zeilenende keinen Zeilenumbruch ein. Dieser kann nur mit dem
-Tag erzeugt werden. Wie im -Tag stellt der Browser Zeilenumbrüche und Leerzeichen dar wie sie im Quellcode eingegeben sind, jedoch erfolgt am Zeilenende ebenfalls ein automatischer Zeilenumbruch. Mehrere Leerzeichen im Quellcode werden zu einem zusammengefügt und Zeilenumbrüche fügt der Browser am Ende der Zeile, durch das
-Tag und dort, wo sie im Quellcode eingegeben sind, ein.

Color und Background-Eigenschaften

Color Textfarbe background-color background-image background-repeat no-repeat Keine Wiederholung. Das Bild wird einmal dargestellt. repeat Horizontal und vertikal wiederholen. repeat-x Nur horizontal wiederholen. repeat-y Nur vertikal wiederholen. background-attachment Bestimmt, ob ein Hintergrundbild beim Scrollen mit wandert oder seinen festen Ort auf der Seite behält. Wird deshalb in Zusammenhang mit background-image verwendet. scroll Das Hintergrundbild wandert beim Scrollen mit. fixed Das Hintergrundbild behält seinen festen Standort. background-position left | right | top | bottom | center

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 16

Beispiele: BG { background-position: left 20px ; background-attachment: scroll}

3.6

display

display:

Gibt an, ob und wie ein Element angezeigt werden soll • inline // Ein neuer Kasten wird auf derselben Linie wie benachbarte Elemente angelegt (Bild oder Text) • block // Ein neuer Kasten wird relativ zu den umliegenden Elementen angelegt (h1 oder p). • list-item // Ähnlich Block, aber hier werden Listenelemente eingefügt, die sich mehr wie InlineInhalt verhalten • none

none block Inline inline-block

Keine Anzeige. Das Element wird als Block-Element dargestellt. Das Element wird als Inline-Element dargestellt. Das Element ist eine Mischung aus einem Block- und einem Inline-Element. Es wird als Block-Element formatiert, du kannst Breite, Höhe und Außenabstand angeben, floatet aber wie Inline-Elemente in der Zeile. list-item Sichtbar. Das Element erzeugt einen Absatz und hat ein Aufzählungszeichen. run-in Erzeugen Block, bzw Inline-Elemente abhängig vom Inhalt inline-table Darstellung als Tabelle (In HTML ), die keine Absatz erzeugt. Darstellung als Listensymbol. Sollte nur zusammen mit den Pseudoformaten :before und :after verwendet werden. table Darstellung als Tabelle (In HTML ). table-caption Darstellung als Tabellenüberschrift (In HTML ) table-cell Darstellung als Tabellenzelle (In HTML , ) table-column Darstellung als Tabellenspalte (In HTML ) table-columns-group Darstellung als Tabellespalten (In HTML ) table-footer-group Darstellung als Tabellefusszeile (In HTML ) table-header-group Darstellung als Tabellenkopfzeile (In HTML ) table-row Darstellung als Tabellenzeile (In HTML ) table-row-group Darstellung als Tabellenzeilen (In HTML )

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 17

3.7

Listen

3.7.1 list-style-type none circle square disc decimal lower-roman upper-roman decimal-leading-zero lower-greek lower-latin upper-latin armenian georgian

Kein Aufzählungszeichen Kreis, nur Rahmen Quadrat Gefüllter Kreis Dezimalzahlen (1. ,2. , 3. , ...) Kleine römische Zahlen (i. ,ii. ,iii. , ...) Große römische Zahlen (I. ,II. , III., ...) Dezimalzahlen mit führender 0 (01. ,02. , 03. , ...) Kleine griechische Nummerierung alpha, beta, gamma,... Kleine Ascii-Zeichen (a. ,b., c. , ...) Große Ascii-Zeichen (A., B. ,C. , ...) Armenische Nummerierung Georgische Nummerierung

Beispiele: Zeile 1 Zeile 2 Zeile 1 Zeile 2

3.7.2 list-style-image Bestimmt eine eigene Grafik als Aufzählungszeichen. url() none

Dateiname und evtl. Pfad der Grafik Keine eigene Grafik.

Beispiele: Zeile 1 Zeile 2 Zeile 3

list-style-image:

Statt Aufzählungspunkt wird eine Grafik verwendet.

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 18

ul{ list-style-image:url(http://www.hs-harz.de/image/point.jpg); } ul{ list-style-image:url(../image/point.jpg); }

3.7.3 list-style-position Rückt das Listenzeichen in der ersten Zeile ein, wenn sich der Eintrag über mehrer Zeilen erstreckt. -, -Tags und display:list-item-Elemente inside outside

Die erste Zeile wird soweit eingrückt, dass das Aufzählungszeichen und der Listeneintrag Linksbündig abschließen. Das Aufzählungszeichen steht links vom Listeneintrag.

Beispiel: Zeile 1
Zeile 1 Zeile 2 Zeile 3

3.7.4 list-style Kurzform der drei Listenformatierungen. Beispiel: Zeile 1 Zeile 2 Zeile 3

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 19

3.8

Box

Definiert einen Rahmen mit Außen- und Innenabständen. Die Bezeichnung Box erscheint nicht in der Definition.

Abbildung 1

Anzeige der Bereiche einer Box

margin-top margin-right margin-bottom margin-left margin

Außenabstand Außenabstand Außenabstand Außenabstand Setzt alle vier Werte mit einem Wert

padding-top padding-right padding-bottom padding-left padding

Abstand Seite zum oberen Rand Abstand Seite zum rechten Rand Abstand Seite zum unteren Rand Abstand Seite zum linken Rand Setzt alle vier Werte mit einem Wert

1. Beispiel:

html> Boxenvarianten h1 { background-color: #00FF00; font-family: Helvetica; Arial; sans-serif; } h2 { background-color: yellow; padding-left: 47px;

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 20

padding-top: 22px; font-family: Verdana; Garamond; Times New Roman; sans-serif; } Die ist ein einfacher Text Hier kommt die erste Überschrift (bsp1) Hier kommt die zweite Überschrift (bsp2)



Ergebnis:

Abbildung 2

Ergebnis des ersten Beispiels

h2 { background-color: yellow; padding: 47px; // Gilt für alle vier Seiten padding: 47px 22px 10px 2 px; // 1. Wert: Top+Bottom; 2. Wert: Right+Left padding: 47px 22px; // Top, Right, Bottom, Left padding: 47px 22px 10px; // Top, Right+Left, Bottom padding: 47px 22px 10px 2 px; // Top, Right, Bottom, Left font-family: Verdana; Garamond; Times New Roman; sans-serif; border-top-width: 2px; }

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 21

Abbildung 3

Ergebnis des ersten Beispiels mit der zweiten Variante von h2

Man sieht nun die Auswirkungen der padding und margins

3.9

Background

color:

Farbe des Textes

background-color:

Hintergrundfarbe

background-image:

Hintergrundbild (URL)

background-repeat: Wiederholung des Hintergrundbild • repeat-x • repeat-y • repeat // Wuederholt in x- und y-Richtung background-attachment: Bild ist im Hintergrund (fixed) oder im Vordergrund (à la Winword) • scroll • fixed background-position: Position des Hintergrundbildes a) durch einen Namen • left • center • right • top • bottom b) durch Prozentangaben

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 22

• w% x% y% z%

// links / oben / unten / rechts

c) Angaben in in, em etc. • 0.3em • 2pt Beispiel: background-position{ right top; } background-position{ 10% 10% 90% 90%; } background-position{ 1em 1em 1em 1em; }

3.10 Ausrichtung ganzer Blöcke

Mit dem Tag „div“ kann ein Absatz mit Attributen gesetzt werden. Das div-Tag setzt immer einen Absatz nach dem Div-Abschnitt ein. Syntax: 2. Zeile (Absatz in einem div-Block, also grün) Texte

3.11 Formatierung in einem Block

Mit dem Tag „span“ kann in einem Absatz einen bestimmten Bereich formatieren. Es gibt hier aber keinen Zeilenumbruch. Syntax: Texte Prinzipiell haben div und span keine Auswirkungen auf das Format. Erst mit Style-Vorgaben Beispiel: 1. Zeile, im zweiten Beispiel 2. Zeile, im zweiten Beispiel 3. Zeile, im zweiten beispiel 4. Zeile, im zweiten Beispiel

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 23



Ergebnis:

Abbildung 4

Span-Bereichs-Formatierung

3.12 Klassen Klassen werden in den Definitionen verwendet. Es gibt vordefinierte und Selektoren mit beliebigen Namen. Beispiele für vordefinierte Klassen: • h1 • h6 • body • td • th • p Beispiel: body { background: yellow; font-size: 16pt; }

Ein Style kann man nun in die CSS-Datei eintragen, um spezielle Formate zu definieren, ohne in die HTML-Datei weitere Attribute einzufügen: h1.rahmen {

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 24

border:1px solid blue; }

Anwendung:

Eine h1-Überschrift mit Rahmen Eine h2-Überschrift ohne Rahmen Ein Absatz ohne Rahmen

Der Name ist hier „rahmen“. Er ist aber nur im Zusammenhang mit h1 definiert. Entfernt man den Prefix „h1“, so gilt der Style für alle Eintragungen (st_bsp5.html)

3.12.1 Zusammenfassung von Selektoren

h1, h2 { color:red; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } Anwendung: Ein Text in blauer Schrift und unterstrichen

3.13 Pseudo-Elemente in CSS

:after

Gilt nach einem Element

:before

Gilt vor einem Element

:first-letter

Das erste Zeichen in einer Zeile

:first-line

Die erste Zeile in einem Absatz

Beispiel: A.B Zeile Dies ist die 2. Zeile
Dies ist die 3. Zeile
Text1

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 25

Text2 Text3 Text4

st_bsp6.html

p:first-letter{ font-size:3em; color:green; } p:first-line{ font-size:80%; color:#FF96FF; } li:first-child{ color:red; font-size:2em; }

st_bsp6.css Ergebnis:

Abbildung 5

Beispiel von Pseudo-Elementen

Hinweis: • Es kommt bei diesen Pseudo-Elemente auf die Reihenfolge an

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 26

3.14 Pseudo-Klassen

:first-child :last-child :active :focus :hover :lang :link :visited

Das erste "Kind" des Abschnittes (body,ol) Das letzte "Kind" des Abschnittes (body,ol) benutzt in Hyperlink wenn Element den Fokus erhält Maus über Elemente, hove=schweben. Sprache Normaler Link (Hyperlink) Besuchter Link

Hinweis: • Es kommt bei diesen Pseudo-Klassen auf die Reihenfolge an.

3.15 ID-Selektor Die Klassen-Styles können an mehreren Stellen benutzt werden. Dies ist bei der Benutzung von JavaScript bzw. bei der Layoutdefinition von Bereichen (Sheets) nicht immer gewünscht. Deshalb existieren ID-Selektoren Die Style-Definition und die Adresse eines ID-Selektors existiert nur einmal. Jedes Element besitzt eine eindeutige ID, mit der dieses adressiert werden kann.

Beispiel: .div1 { color:blue; } .over { text-decoration: overline; } #iddiv1 { color:green; } 7. Beispiel 1. Zeile, im Beispiel, div1
2. Zeile, im Beispiel, iddiv1, sollte nur einmal definiert sein
3. Zeile, im zweiten Beispiel, div

st_bsp07.html Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 27

Abbildung 6

Beispiel eines ID-Selektors

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 28

4 Weitere HTML-Elemente 4.1

Definition List

Eine Definitionsliste ist keine Ansammlung von einzelnen Einträgen. Sie wird definiert durch beliebig viele Paare, und zwar Begriff und die passende Erklärung. HTML-Tags: // Anfang und Ende der “Liste” Definition List // Definition Tag // Definition Description Beispiel: Mehr Speed Der neue Prozessor mit 6 GHz und First-Level Cache 1024 Byte Mehr Speicher Ein riesiger Speicher mit 8 GB Riesiges Plattenvolumen Zwei Festplatten à 1 Tera Byte

Abbildung 7

4.2

Definition List

Grafische Linien

Mit dem Tag kann eine horizontale Linie gezeichnet werden. Diese geht vom linken bis zum rechten Rand, unabhängig von der Breite. Folgende Attribute sind ab HTML 3.2 erlaubt: < hr width> < hr align>

Strichdicke der Linie in Pixel Die Breite der Trennlinie in Pixel oder Prozent Die Ausrichtung der Linie auf der Seite mit den Werte LEFT, CENTER, RIGHT.

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 29

Beispiel: HTML-Code

Beschreibung Strichdicke von 3 Pixel 33 Pixel lange Trennlinie Trennlinie ist zentriert und 50% der Breite Trennlinie ist links ausgerichtet und 50% der Breite

Quellcode 1 Grafische horizontale Linien

4.3

Verknüpfung

Eine Verknüpfung kann auf eine beliebige Datei verweisen. Dabei kann diese Datei ein HTML-Seite oder eine beliebige andere Datei (z. B. Test.pdf). HTML-Seiten werden direkt angezeigt, andere Dateien werden über einen Viewer geladen oder direkt gestartet. Angabe des Pfades: Möglichkeit Datei als URL-Angabe Datei lokal mit relativen Pfad Datei lokal mit relativen Pfad Datei lokal mit absoluten Pfad

Beispiel http://www.hs-harz.de ./images/bild.gif ../.. /kapitel01/index.html /images/bild.gif

Zusätzlich kann mit Hilfe des Attributes TARGET die Web-Seite in einem neuem Fenster dargestellt werden. 1. Beispiel Link im alten Fenster 1. Beispiel Link in einem neuen Fenster 1. Beispiel Link in einem neuen Fenster

Hinweise: • • •

Die Pfadtrenner sind abhängig von Betriebssystem. Für Windows gilt der Backslash „\“ für Unix und Macintosh der Slash „/“. Unter Unix wird die Groß- und Kleinschreibung unterschieden. Ist die Schreibweise unterschiedlich, so findet der Browser die Datei nicht. Diese Verweise können in allen Elementen auftreten. Dazu gehören Listen, Bilder, Überschriften.

Beispiele: Links Verweis zum

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Beispiel 05

Einf. In die Webtechnologien 30

Verweis zum

Beispiel 06 mit neuem

Aufruf eines Bildes (relativ) Aufruf eines Bildes (absolut)

Quellcode 2 Verknüpfungen

4.3.1.1 Anker Ein Anker ist eine Verknüpfung innerhalb einer Seite. Auf diese kann selbstverständlich auch verwiesen werden. Ein Anker bleibt unsichtbar! Die Verknüpfung wird über die Angabe der Seite und des Ankernamens realisiert. Sinnvoll zum Beispiel bei Verweisen innerhalb einer Aufzählung. Syntax: Text zum Anzeigen Beispiele: Hier fängt der 1. Absatz an, und er hat noch einen Anker Hier fängt der 1. Absatz an, und er hat noch einen Anker Verweis zu einem Anker: Sprung zum 1. Absatz

4.3.1.2 E-Mail Dieselbe Technik wird verwandt, um innerhalb einer Seite eine E-Mail-Funktion aufzurufen: e-mail

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 31

E-Mail-Adresse: Mailen Sie mir Ihre Meinung

Quellcode 3 E-Mail Siehe Beispiel zum Versenden einer E-Mail auf meiner Homepage.

4.3.2 Bilder

Bilder werden mit Hilfe des Tags in den Quellcode eingefügt. Dieses Tag hat keinen Endetag, aber es stehen erweiterte Attribute zur Verfügung: Attribut src width height href

Beschreibung Quelle des Bildes Breite des Bildes festlegen Höhe des Bildes festlegen Link zu einer Seite

align

Ermöglicht die Ausrichtung des Bildes zum Text Richtet den oberen Rand des Bildes mit dem obersten Teil der Zeile aus. Richtet den oberen Rand des Bildes mit dem obersten Teil der Zeile aus. Richtet den unteren Teil des Bildes mit dem unteren Teil der Textzeile aus. Richtet den oberen Teil des Bildes mit der Spitze des höchsten Textteils der Zeile aus (wohingegen ALIGN=TOP das Bild mit dem höchsten Objekt aus der Zeile ausrichtet). Richtet die Mitte des Bildes mit der Mitte des größten Objektes der Zeile aus. Richtet den unteren Teil des Bildes mit der Grundlinie des Textes aus. Ist identisch mit ALIGN=BOTTOM.

Zusätzlich

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Beispiel < img src="bild.gif" > < img src="bild.gif" width =200 > < img src="bild.gif" height =100 > < img src="bild.gif" >

align=top

align=middle

align=bottom

align=texttop

align=absmiddle

align=baseline

Einf. In die Webtechnologien 32

Richtet den unteren Rand des Bildes mit dem untersten Objekt der Zeile aus (welches sich unterhalb der Grundlinie des Texte befinden kann). Umfasst das Bild mit einem Rahmen. Einheit ein Pixel. Dient bei Text-Browser als alternative Anzeige.

border alt Quellcode 4

4.4

align=absbottom

< img src="b.gif" border="2"> < img src="b.gif" alt="Verweis auf ein bild">

Tags bei Bilder

Laufschrift

. . . Herzlich Willkommen an der HS Harz

4.5

. .und im Besonderen im FB AI .

Musik

Mit dem Tag „audio“ wird auf eine Musikdatei verknüpft. Funktioniert mit HTML5.

Mit dem Befehl „loop“ kann die Lieblingsmusik immer wieder erscheinen.

4.6

Video

Mit dem Tag „video“ wird auf eine Musikdatei verknüpft. Funktioniert mit HTML5.

Mit dem Befehl „loop“ kann die Lieblingsmusik immer wieder erscheinen.

Hochschule Harz - Wernigerode FB Automatisierung und Informatik © 2003,17 Dipl.-Inf., Dipl.-Ing. (FH) M. Wilhelm

Einf. In die Webtechnologien 33

4.7

Tabellen

Tabellen dienen nicht nur der Darstellung von Inhalten in Tabellenform, sondern nützen auch bei der Strukturierung von Web-Elementen (Grafiken, Texten etc. Die Tabelle hat folgende Eigenschaften: TAG table

Attribute cellspacing

cellpadding

rules

summary caption align

thead tfoot tbody

tr th td rowspan colspan

Werte Definiert Anfang und Ende der Tabelle Definiert einen Bereich zwischen den Zellen in der Tabelle. Ein äußerer Rand. cellspacing="20" Definiert einen Bereich zwischen der Zellkante und ihrem Inhalt. Ein innerer Rand. cellpadding="20%" none: Keine Reglen (Default) groups: Regeln warden für Gruppen aufgestellt (THEAD, TFOOT, TBODY) und column groups (COLGROUP and COL) rows: Reglen gelten für Zeilen cols: Regeln gelten für Spalten all: Regeln sind überll gültig summary = text [CS] Überschrift, kann unten oder oben gezeichnet werden