Web-basierte Anwendungen 1 – HTML-Basics

View Github Repository Open presentation in a new window

franzissa

See all presentation from franzissa

Web-basierte Anwendungen 1 – HTML-Basics

0 0

Big-Data

Project of Fh Köln

On Github franzissa / Big-Data

Web-basierte Anwendungen 1

HTML-Basics

09. Oktober 2014

Studiengang Medieninformatik an der Fachhochschule Köln Campus Gummersbach

M.Sc. Stephan Pavlovic, M.Sc. Jan Kus

Ziele dieses Abschnitts

  • Wissen was HTML die Idee dahinter ist
  • Grundlegende Elemente von HTML kennen
  • Den Basisaufbau einer HTML-Datei erstellen
  • Grenzen von HTML beschreiben

Aufbau dieses Session

  • Einführung in die Historie von HTML
  • Aufbau eines HTML-Dokuments
  • Elemente zur Seitenstrukturierung
  • Elemente zur Strukturierung von Texten
  • Elemente zur Auszeichnung von speziellen Textelementen
  • Listen
  • Hands On
Wer hat noch nie eine HTML-Datei gesehen?

Was ist HTML

  • Hyper
  • Text
  • Markup
  • Language

1989 am CERN von Tim Berners-Lee definiert

Aktuelle Version 4.01 vom Jahr 2000

HTML 5 kurz vor der Verabschiedung - Aktueller Working Draft (18.09.14)

Wie sieht ein HTML Dokument aus

Ein HTML Dokument besteht aus 3 Teilen

  • Doctype - Dokumenttypdefinition
  • Head - Metainformationen, benötigte externe Dateien, ...
  • Body - Der eigentliche Inhalt der Seite

Wie sieht ein HTML Dokument aus


            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                 "http://www.w3.org/TR/html4/loose.dtd">
            <html>
              <head>
                <title></title>
                <meta></meta>
              </head>
              <body>
                Hier steht Inhalt
              </body>
            </html>

Tags

  • <tagname> text </tagname>
  • Einleitendes Tag / Abschließendes Tag
  • spitze Klammern

Tags

  • <tagname attribute='attribute'> text </tagname>
  • Manche Tags können mit Attributen erweitert werden

Der wichtigste Tag im Web

  • <a> - Anchor Element
  • <a>Ein Link</a>
  • <a href='somepage.html'>Ein relativer Link</a>
  • <a href='/somepage.html'>Ein absoluter Link</a>
  • <a href='htt://www.some-webpage/somepage.html'>Ein externer Link</a>

Elemente zur Seitenstrukturierung

<header>

  • Logo, Navigation, Suchfeld, ...

<section>

  • thematische Gruppierung von Inhalten - typischerweise mit einer Überschrift"

<div>

  • Gruppierung von Inhalten

<footer>

  • Weiterführende Link, Impressum, Kontaktmöglichkeiten, ...

Wie sieht unser HTML Dokument mit Strutur aus


            <html>
              <head>...</head>
              <body>
                <header> Eine coole Seite </header>
                <section>
                  Hier gehts um ein bestimmtes Thema
                  <div>
                    Hier kommen zum Beispiel interessante Links
                  </div>
                  <div>
                    Und hier der Inhalt
                  </div>
                </section>
                <footer>
                  Irgendwo muss das Impressum hin
                </footer>
              </body>
            </html>

Elemente zur Strukturierung von Texten

Überschriften

  • Von <h1> bis <h6>

Textabsätze

  • Jeder Abschnitt in einem Paragraphen <p> </p>

Zeilenumbruch

  • Besonders Tag (ohne Inhalt) <br/>

Wie sieht unser HTML Dokument mit Text-Struktur aus


            <html>
              <head>...</head>
              <body>
                <h1>Hier gehts um ein bestimmtes Thema
                <section>
                  <h2> Eine Linksammlung 
                  <p>
                    Hier kommen zum Beispiel interessante Links
                    <br/>
                    Mit einem Zeilenumbruch
                  </p>
                  <h2> Mehr Inhalt 
                  <p>
                    Hier kommen zum Beispiel interessante Links
                  </p>
                  <p>
                    In zwei Paragraphen
                  </p>
                </section>
              </body>
            </html>

Elemente zur logischen Auszeichnung von speziellen Textelementen

Wie sieht unser HTML Dokument mit Text-Struktur aus


            <html>
              <head>...</head>
              <body>
                <section>
                  <p>
                    Ein Satz mit wichtigem, sehr wichtigem Text
                    und inline Code Auszeichnung
                  </p>
                  <p>
                    Ein Satz mit fettem, kursiven und kleinem Text
                  </p>
                </section>
              </body>
            </html>

Listen in HTML

Ungeordnete Listen

  • Ein <ul> umschließt alle Listeneinträge
  • Jeder Listeneintrag besteht aus einem <li>

Aufzählungslisten

  • Ein <ol> umschließt alle Listeneinträge
  • Jeder Listeneintrag besteht aus einem <li>

Definitionslisten

  • Zum Beispiel für Glossare
  • Ein <dl> umschließt alle Listeneinträge
  • Jeder Listeneintrag besteht aus zwei Einträgen
  • Ein <dt> für den Definitionsausdruck
  • Ein <dd> für die Erklärung

Wie sieht unser HTML Dokument mit Listen aus


            <html>
              <body>
              <h1>Hier gehts um Listen</h1>
              <ul>
                <li>Erster Eintrag</li>
                <li>Zweiter Eintrag</li>
                <li>Dritter Eintrag</li>
              </ul>
              <ol>
                <li>Erster Eintrag</li>
                <li>Zweiter Eintrag</li>
                <li>Dritter Eintrag</li>
              </ol>
              <dl>
                <dt>Ausdruck</dt>
                <dd>Erklärung dazu</dd>
                <dt>Ausdruck</dt>
                <dd>Erklärung dazu</dd>
              </dl>
              </body>
            </html>

Fragen?

Hands On - HTML Übungen

Wie funktioniert diese Übung?

  • Ihr bekommt eine HTML Datei
  • Diese beinhaltet die absoluten HTMl Basics für eine Rezeptseite
  • Im HTML findet ihr als Kommentar 8 Aufgaben
  • Bearbeitet die HTML Datei mit einem Editor

Editoren?