Semantic Web / 2019-10-24 / Matthias Edler-Golla, CC BY-SA 4.0


|



 



Themen heute

  • Abfragen des bisherigen Wissens
  • weitere HTML-Tags
  • HTML5 und das semantische Web
  • CSS für Links, Rahmen und Hintergründe

Abfragen des bisherigen Wissen 1

Welche Syntax ist hier richtig?

HTML

<p>Das ist aber <em>sehr wichtig</em></p>

<p>Das ist aber <em>sehr wichtig</p></em>

Abfragen des bisherigen Wissen 2

Welcher HTML-Kommentar ist richtig formatiert?

<! ich bin ein Kommentar !>
<!-- ich auch -->
/* und ich erst */

Abfragen des bisherigen Wissen 3

Was fehlt hier? Würde dieser Link funktionieren?

HTML

Link zu <a href="google.com">Google</a>
  1. das Alt-Attribute
  2. das Title-Attribute
  3. der korrekte Adress-Anfang „http://

Abfragen des bisherigen Wissen 4

Wie verlinkt man von „index.html“ zu der Datei „kontakt.html“?

HTML

zum <a href="kontakt.html">kontakt</a>
zum <a href="Allgemein/Kontakte/Kontakt.html">kontakt</a>
zum <a href="allgemein/kontakte/kontakt.html">kontakt</a>

Abfragen des bisherigen Wissen 5

Was ist hier falsch?

CSS

p {
   font-family: Comic Sans, Meta Serif Pro, Arial, Sans-Serif;
}
  1. Nichts – alles OK!
  2. Meta Serif Pro ist kein Systemfont
  3. Comic Sans darf man nicht verwenden!
  4. Fonts, die einen Namen haben, der aus mehr als einem Wort bestehen, müssen in Anführungszeichen angegeben werden

weitere HTML-Tags


Ungeordnete Listen

Listen, bei denen es nicht wichtig ist, in welcher Reihenfolge die Elemente auftauchen.

Listen bestehen aus einem äußeren Tag <ul> und inneren Tags <li>

HTML

<h3>Säugetiere</h3>

<ul>
    <li>Katze</li>
    <li>Hund</li>
    <li>Affe</li>
</ul>

Säugetiere

  • Katze
  • Hund
  • Affe

Bei „webplatform.github.io“ gibts auch dazu einen guten Artikel


Verschachtelte Listen

Listen können – beliebig tief – ineinander geschachtelt werden

HTML

<h3>Säugetiere</h3>

<ul>
    <li>Katze
        <!-- Liste in Liste muss INNERHALB eines <li> sein! -->
        <ul>
            <li>Perser-Katze
                <ul>
                    <li>Moritz</li>
                    <li>Peter</li>
                    <li>Paul</li>
                </ul>
            </li>
            <li>Siam-Katze</li>
        </ul>
    </li>
    <li>Hund</li>
    <li>Affe</li>
</ul>

Säugetiere

  • Katze
    • Perser-Katze
      • Moritz
      • Peter
      • Paul
    • Siam-Katze
  • Hund
  • Affe

CSS für Ungeordneten Listen

  • man kann statt des disc andere Symbole verwenden (square, circle …)
  • oder gar keine Symbole anzeigen lassen
  • oder eigene (kleine!) Grafiken (gifs/jpgs/pngs/svgs) verwenden

HTML

<ul>
    <li>Katze</li>
    <li>Hund</li>
</ul>

CSS

/* anderes Symbol */
ul {list-style-type: square;}

/* kein Symbol */
ul {list-style-type: none;}

/* eigenes Bild – dazu erst die normalen Symbole wegmachen */
ul {
    list-style-type: none;
    list-style-image: url(pix/xyz.gif); /* pfadangaben beachten! */
}

Geordnete Listen

Listen, bei denen die Reihenfolge wichtig ist

Die Nummerierung übernimmt der Browser! Dadurch kann man sehr einfach die Reihenfolge ändern oder weitere Punkte einfügen.

HTML

<ol>
    <li>Wasser kochen</li>
    <li>Eier einlegen</li>
    <li>Fünf Minuten kochen lassen</li>
    <!-- man kann geordnete und ungeordnete Listen „ineinander“ schreiben -->
    <li>Wasser vorbereiten
        <ul>
            <li>leicht salzen</li>
            <li>Öl hinzufügen</li>
            <li>zum Kochen bringen</li>
        </ul>
    </li>
    <li>Nudeln einlegen</li>
    <li>Fünf Minuten kochen lassen</li>
</ol>
  1. Wasser kochen
  2. Eier einlegen
  3. Fünf Minuten kochen lassen
  4. Wasser vorbereiten
    • leicht salzen
    • Öl hinzufügen
    • zum Kochen bringen
  5. Nudeln einlegen
  6. Fünf Minuten kochen lassen

Pro-Tip: Geordnete Liste nicht mit „1“ anfangen lassen

HTML

<ol start="5">
    <li>Wasser kochen</li>
    <li>Eier einlegen</li>
    <li>Fünf Minuten kochen lassen</li>
</ol>
  1. Wasser kochen
  2. Eier einlegen
  3. Fünf Minuten kochen lassen

CSS für Geordnete Listen

  • man kann statt der normalen Ziffern auch z.B. römische Ziffern verwenden
  • oder gar keine Symbole anzeigen lassen
  • oder – wie bei den ungeordneten Listen – sich hier auch „disc, square, circle“ anzeigen lassen

HTML

<ol>
    <li>Wasser kochen</li>
    <li>Eier einlegen</li>
    <li>Fünf Minuten kochen lassen</li>
</ol>

CSS

/* andere Ziffern */
ol {list-style-type: upper-roman;}
ol {list-style-type: lower-greek;}

/* kein Symbol */
ol {list-style-type: none;}

/* geordnete Liste schaut dann wie ungeordnete aus – macht das Sinn? */
ol {list-style-type: disc;}
  1. Wasser kochen
  2. Eier einlegen
  3. Fünf Minuten kochen lassen

Description-Listen

Eine Kombination aus „Begriff“ und dazugehöriger „Description“
Verwendung: Begrifferklärungen, Titel & Autor, Song & Sänger, Produzent & Produkt …

HTML

<dl>
    <dt>Dinkel</dt>
    <dd>Urwüchsiges Getreide</dd>

    <dt>Pataten</dt>
    <dd>Süßkartoffeln aus Mittelamerika</dd>
    <dd>Wichtiges Grundnahrungsmittel</dd>
</dl>
Dinkel
Urwüchsiges Getreide
Pataten
Süßkartoffeln aus Mittelamerika
Wichtiges Grundnahrungsmittel

CSS

dt {color:red;font-weight:normal;}
dd {font-style:italic;}

Weiterführendes

Gute, weitergehende Erklärungen zu den verschiedenen HTML-Listen


Tabellen

  • zur Auflistung tabellarischer Daten
  • NICHT für das Layout von Websites – dafür ist CSS zuständig!
  • bei webplatform.org gibt es einen sehr guten Artikel über Tabellen

HTML

<table>
    <!-- Überschriften innerhalb der Tabelle -->
    <thead>
        <tr>
            <th>Klasse</th>
            <th>Jahrgang</th>
            <th>Anzahl</th>
        </tr>
    </thead>
    <tbody>
        <!-- erste Reihe -->
        <tr>
            <td>1a</td>
            <td>1999</td>
            <td>24</td>
        </tr>
        <!-- zweite Reihe -->
        <tr>
            <td>2a</td>
            <td>1998</td>
            <td>23</td>
        </tr>
        <!-- dritte Reihe -->
        <tr>
            <td>3a</td>
            <td>1997</td>
            <td>29</td>
        </tr>
    </tbody>
</table>
Klasse Jahrgang Anzahl
1a 1999 24
2a 1998 23
3a 1997 29

Auch hier kann man die jeweiligen Tags im CSS ansprechen…

CSS

th {
    color:#CCC;
    font-weight: normal;
}
td {
    /* Text wird am oberen Rand der Zelle angezeigt */
    vertical-align:top;
    text-align:right;
}

DIV (Division)

  • ein allgemeines Blockelement, das für sich allein unsichtbar ist
  • kann mehrere HTML-Elemente in einen gemeinsamen Container einschliessen
  • werdet Ihr häufig benötigen, wenn wir mehr mit CSS machen werden…

HTML

<div>
    <h2>Eine Überschrift</h2>
    <p>etwas Text, der nicht sehr spannend ist</p>
    <ul>
        <li>Eintrag</li>
        <li>Eintrag</li>
    </ul>
</div>

Eine Überschrift

etwas Text, der nicht sehr spannend ist

  • Eintrag
  • Eintrag

SPAN

Bitte verwendet es nur, wenn an der jeweiligen Stelle semantische Elemente wie <em> oder <strong> keinen Sinn machen!

  • ein allgemeines Inline-Element, das für sich allein unsichtbar ist
  • hat keine eigenen Eigenschaften und bewirkt somit alleine nichts
  • wichtiger „CSS-Haken“, um via CSS das Aussehen zu verändern
  • werdet Ihr häufig benötigen, wenn wir mehr mit CSS machen werden…

HTML

<h1>Pan<span>o</span>matic<h1>

CSS

h1 {
    font-size: 300%;
}

span {
    color: red;
}

Panomatic


HTML5

HTML5 ist die fünfte Revision der Hypertext Markup Language, einer textbasierten Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten wie Texten, Bildern und Hyperlinks in elektronischen Dokumenten. Sie soll die Kernsprache des Internets werden und darin die Nachfolge von HTML 4 antreten.

Entwicklung/Geschichte von HTML, CSS & Javascript

Resilient Web Design von Jeremy Keith

Sehr nett geschriebenes Buch, das einen Überblick gibt, wie das Web entstanden ist und wie sich die verschiedenen Technologien entwickelt haben – kostenlos!


Das Semantische Web

Das Semantische Web ist ein Konzept bei der Entwicklung des World Wide Webs und des Internets. Im Rahmen zur Weiterentwicklung zum Internet der Dinge und Ubiquitous Computing wird es erforderlich, dass Maschinen die von Menschen zusammengetragenen Informationen verarbeiten können. All die in menschlicher Sprache ausgedrückten Informationen im Internet sollen mit einer eindeutigen Beschreibung ihrer Bedeutung (Semantik) versehen werden, die auch von Computern verstanden oder zumindest verarbeitet werden kann.

Anwendungsbeispiel

Bei einer Reise etwa würden Wetterdaten und Staumeldungen in Bezug zu Informationen über mögliche Haltestellen und bekannte Vorlieben des Reisenden gesetzt werden.


Semantik 1 [Zeitung]

TAZ vom 5.10.2010


Semantik 2 [Zeitung & Tags]

TAZ vom 5.10.2010

HTML5

HTML5-Website sind ähnlich aufgebaut wie Zeitungen. Sie lassen sich in verschiedene semantisch sinnvolle Bereiche aufteilen


Semantik 3 [Website]

Brooklyn Beta, Design Conference; Web Design by Elliot Jay Stocks


Semantik 4 [Website & Tags]

Brooklyn Beta, Design Conference; Web Design by Elliot Jay Stocks

Vergleicht doch mal, wie ähnlich der Aufbau dieser Website zum ersten Seite der TAZ ist!


Semantik 5 [Website Gerüst]

Die gezeigte Website „Brooklyn Beta“ könnte somit folgendes HTML5-Gerüst haben:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Brooklyn beta</title>
    <link rel="stylesheet" href="c/style.css">
</head>

<body>

<!-- Kopfzeile -->
<header>
    <h1>Brooklyn Beta</h1>
    <time>October 21 2010</time>
</header>

<!-- Navigation -->
<nav>
    <ul>
        <li>About</li>
        <li>Speakers</li>
        <li>…</li>
    </ul>
</nav>

<!-- Abschnitt „Thema" -->
<section>
    <h2>Brooklyn What?</h2>
    <p>Join us on…</p>
</section>

<!-- Abschnitt „Unsere Sprecher“ -->
<section>
    <h2>Our Speakers</h2>
    <ul>
        <li>Speaker 1</li>
        <li>Speaker 2</li>
        <li>…</li>
    </ul>
</section>

<!-- Abschnitt „Workshops“ -->
<section>
    <article>Something about Workshop 1</article>
    <article>Something about Workshop 2</article>
</section>

…

<!-- Fußzeile -->
<footer>
<p>List of all Sponsors</p>
</footer>

</body>
</html>

Schaut Euch die Kommentare innerhalb des HTML-Codes an!


HTML5-Tags

Achtet auf die Namen der Tags: Diese erklären praktisch immer, für was die Tags verwendet werden sollen …

zum Strukturieren einer Seite sind folgende HTML5-Tags besonders wichtig:

HTML

<!--
Kopf-Teil einer Website oder eines Artikels; 
dort befindet sich z.B. das Logo, die wichtigste Überschrift, der Slogan der Firma … 
Achtung: Nicht mit <head> verwechseln!
-->
<header>
    <img src="logo.svg">
    <h1>Firmenname</h1>
</header>

<!--
Der Hauptteil einer Seite; nur einmal pro HTML-Dokument verwenden
-->
<main>
    <section>
        <article></article>
        <article></article>
    </section>

    <section>
        <article></article>
        <article></article>
    </section>
</main>

<!--
Dort die Haupt-Navigationselemente der Website einfügen, 
typischerweise eine Navigationsleiste
-->
<nav>
    <ul>
        <li><a href="index.html">Start</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</nav>

<!--
Ein in sich geschlossener Bereich einer Seite, 
vergleichbar mit den verschiedenen Ressorts in einer Zeitung (Sportteil, Wirtschaftsteil, Kulturteil …)
-->
<section>
    <article></article>
    <article></article>
</section>

<!--
In sich geschlossene Einheit, eben wie ein Artikel in einer Zeitung! 
Enthält typischerweise Überschrift, Texte und Bilder.
-->
<article>
    <h1>Überschrift</h1>
    <img src="portait.jpg">
    <p>Inhaltstext …</p>
</article>

<!-- Randbemerkungen, Marginalien … -->
<aside>
    <h2>Randbemerkungen</h2>
    <p>Text der Randbemerkungen</p>
</aside>

<!-- 
Fusszeile einer Seite oder eines Artikels, 
enthält oft Copyright-Daten, weiterführende Links usw.
-->
<footer>
    <p>© 2014, Max Mustermann</p>
</footer>

<!--
Darin soll ein Bild sowie dessen Erklärung eingefügt werden;
-->
<figure>
    <img src="portait.jpg">
    <figcaption>
        Erklärung zum Bild
    </figcaption>
</figure>

CSS

alle oben aufgeführten Tags lassen sich selbstverständlich via CSS stylen …


Gute Übersicht über HTML5-Tags

This is a quick reference of elements that are new or have been redefined in HTML5. For each element there is a short description, a link to the specification, and a code example.

dort sind alle HTML-Tags aufgelistet, die neu sind oder die sich geändert haben! Außerdem gibt es konkrete Anwendungsbeispiele …


CSS


CSS Maßeinheiten

Achtung: Verwendet nie als Maßeinheit „pt“ – verwendet „px“!

Macintosh und Windows haben unterschiedliche Bildschirmauflösungen. Verwendet man „pt“, hat z.B. die Schrift auf den beiden Betriebssystemen eine unterschiedliche Größe!

CSS

/* so NICHT! */
body {
    font-size: 16pt;
}

/* so ist es richtig */
body {
    font-size: 16px;
}

In CSS sind Angaben zur Schriftgröße, aber auch zur Breite und Höhe von Elementen sowohl in fixen Werten (px, em, mm, cm, m…) und auch in flexiblen Werten (%) möglich.

Größen-Angaben in mm, cm, m usw. machen jedoch nur Sinn, wenn Ihr die jeweiligen Datei zum Ausdrucken formatieren möchtet!

Geläufige Maßeinheiten für Schriftgrößen in CSS

CSS

/* Pixel-Angaben */
h2 {
    font-size: 16px;
}

/* 
    em-Angaben:
    Größe abhängig von der „Grundgröße“, 
    die man bei body gemacht hat
*/
body {
    font-size: 16px;
}

h2 {
    font-size: 1em; /* Schriftgröße: 16px; */
}

/* größere Grundgröße bei body */
body {
    font-size: 20px;
}

h2 {
    font-size: .8em; /* Schriftgröße: 16px; */
}

/* kleinere Grundgröße bei body */
body {
    font-size: 14px;
}

h2 {
    font-size: 1.2em; /* Schriftgröße: 16.8px; */
}

CSS für Links

Links haben in CSS eine spezielle Syntax, weil sie unterschiedliche Zustände haben können:

CSS

a:link          /* ein unbesuchter Link */
a:visited       /* ein besuchter Link */
a:hover         /* ein Link, auf dem der Cursor liegt */
a:active        /* ein Link, der gerade gedrückt wird (mouseDown) */
a:focus         /* ein Link, der gerade via Tabbing erreicht wurde */

/* konkrete Beispiele */

a:link {
    /* Link ist nicht unterstrichen */
    text-decoration:none;
    font-weight:bold;
    color:red;
} 

a:visited {
    text-decoration: none; 
    /* Link „verblast“, nachdem er besucht wurde*/
    color:"#FF6666";
}

a:hover {
    background-color:red;
    color:white;
}

a:active {
    background-color:blue;
    color:white;
}

a:focus {
    background-color:green;
    color:white;
    border:3px solid black;
}

Hier die Demo dazu


CSS: Höhen und Breitenangaben

Die Größen-Angaben sind in fixen Werten (px, em, mm, cm, m…) und auch in flexiblen Werten (%) möglich

CSS

p {
    width:50%;
    height:8em; /* 8mal die Schriftgröße … */
}

Ich passe mich in der Breite automatisch an und bleibe immer 50% breit…

Achtung

Nur bei Block-Elementen (<h1>…<h6>, <div>, <p>, <table>, <ul>, <ol>, <dl>) haben Breite- und Höhenangaben eine Wirkung!

Andere Elemente müssen erst via CSS in Blockelemente umgewandelt werden:

CSS

strong {
    /* hiermit wird aus dem Inline-Element „strong“ ein Block-Element */
    display:block;
}

CSS: Borders

  • Fast alle Tags lassen einen Rahmen zu
  • Es können auch einzelne Seiten angesprochen werden
  • Es stehen verschiedene „Muster“ zur Verfügung
  • Auch die Breite des Striches kann verändert werden

CSS

/* umlaufender Rand */
p {
    border-color:red;
    border-width:1px;
    border-style:solid;

    /* 
    oder in Kurzschreibweise
    Reihenfolge einhalten! 
    */
    border:1px solid red;
}

Paragraph mit rotem Rand umlaufend

CSS

/* Linie unten, gepunktet */
p {
    border-bottom-color:blue;
    border-bottom-width:3px;
    border-bottom-style:dotted;

    /* oder in Kurzschreibweise */
    border-bottom:3px dotted blue;
}

Paragraph mit Linie darunter, gepunktet

CSS

/* Linien überall, unterschiedlich breit */
p {
    border-color:#333;
    border-style:solid;

    /* Breitenangaben im Uhrzeigersinn, oben beginnend*/
    border-width:2px 40px 5px 10px;
}

Paragraph mit Linie überall

mehr zu den verschiedenen Border-Styles

Border-Styles

CSS

/* Linien nur oben und unten */
p {
    border-color:red;
    border-style:solid;

    border-top-width:1px;
    border-bottom-width:1px;

    /* 
    oder in Kurzschreibweise:
    1. Wert gilt dann für oben und unten, 2. Wert für links und rechts
    */
    border-width: 1px 0;
}

Paragraph mit rotem Rand oben/unten


CSS: Border-Radius

Achtung: Sehr alte Browser verstehen das noch nicht und stellen die Ecken „eckig“ dar …

CSS

/* Radius rundum gleich */
p {
    border: 3px solid red;
    border-radius: 8px;
}

/* Radius nur rechts oben */
p {
    border: 3px solid red;
    border-radius: 0 8px 0 0;
}

Ich habe rundrum abgerundete Ecken

Ich habe nur rechts oben eine abgerundete Ecke


CSS: Hintergrund-Bilder

Achtung: URL-Angabe der verwendeten Grafik relativ zur CSS-Datei (NICHT zur HTML-Datei…)

Das verwendete Gif – von Squidfingers

CSS

/* Hintergrund – endlos */
div {
    background-image:url(p/img_5.gif);
}

Meine wunderbare Tapete

CSS

/* Hintergrund – waagrecht */
div {
    height: 10em;

    background-image:url(p/img_5.gif);

    /* nur waagrecht */
    background-repeat: repeat-x;

    /* 
    Achtung: 2 Werte! 
    1. Wert = X-Position
    2. Wert = Y-Position
    */
    background-position: 0 50%;

    /* alternative Kurzschreibweise */
    background: url(p/img_5.gif) 0 50% repeat-x;
}

Meine wunderbare Tapete

CSS

/* Hintergrund – senkrecht */
div {
    background-image:url(p/img_5.gif);

    /* nur senkrecht */
    background-repeat: repeat-y;

    /* 
    Achtung: 2 Werte! 
    1. Wert = X-Position
    2. Wert = Y-Position
    */
    background-position: 230px 0;

    /* alternative Kurzschreibweise */
    background: url(p/img_5.gif) 230px 0 repeat-y;
}

Meine wunderbare Tapete

Hintergrund-Einzelbilder

Damit lassen sich sehr schön z.b. erklärende Icons einbinden…

CSS

p {
    background-image:url(p/zipped.gif);

    /* keine Wiederholung */
    background-repeat: no-repeat;

    /* Positionierung */
    background-position: 0 40%;

    /* hattet Ihr noch nicht – kommt in nächster Vorlesung */
    padding-left:20px;
}

eine gezippte Datei

eine Acrobat-Datei

ein externer Link


CSS: Größe von Hintergrund-Bildern

Hat man (große) Hintergrundbilder, kann man entscheiden, ob diese in Originalgröße, skaliert oder sogar verzerrt dargestellt werden

CSS

div {
    background-image:url(p/spatzen.gif);
    background-repeat: no-repeat;

    /* Mitte des Bildes in Mitte des Divs */
    background-position: 50% 50%;

    /* füllt die zur Verfügung stehende Fläche komplett aus */
    background-size: cover;
}

Demo

Schaut Euch dazu die Demo an!


Themenrelevante Artikel online

Bitte lest diese! Sie erklären detaillierter, was ich heute zu HTML5 und Bildern gesagt habe …


Übung/Hausaufgabe

  1. Unterlagen herunterladen
  2. Kochrezept in semantisch sinnvolle Tags zerlegen: Dazu die Apfelkuchen_Vorlage.jpg öffnen (z.b. in Photoshop) und alle zu verwendenden HTML-Tags einzeichen
  3. Bitte möglichst viele sinnvolle HTML5-Tags verwenden
  4. entsprechend das HTML-Dokument aufbauen
  5. via CSS so gestalten, dass es wie die Vorlage aussieht

Briefing:

  • Schriftgröße: 100%; Zeilenabstand: 1.45; Font-Stack: Geogia, Times, Serif; Schriftfarbe: #444;
  • die vorhandene Dateistruktur beibehalten und die Dokumente „index.html“ und „style.css“ verwenden!
  • Das Hintergrundmuster soll das gesamte Browserfenster ausfüllen – egal wie groß dieses aufgezogen wird!
  • Die weisse Hintergrundfläche und das Nussstrudel-Bild sollen ebenfalls mitwachsen, wenn man das Browserfenster vergrößert/verkleinert
  • Das Bild „Leckerer-Apfelkuchen.tif“ ist viel zu groß und hat das falsche Format – bitte in Photoshop auf die Breite 960px reduzieren und in einem Web-tauglichen Format speichern!

Danke!

Weitere Vorträge: