HTML, CSS what?

topic 01

Sprachen für das Web

  • HTML – für den Inhalt der Website
  • CSS – für das Layout der Website
  • JavaScript – für das Verhalten der Website

Überblick HTML

  • HTML – Hypertext Markup Language
  • Auszeichnungssprache zur Erstellung von Websites
  • Metapher „Architekt“
  • Haus planen, Grundriss festlegen
  • Struktur vs. Layout

Überblick CSS

  • CSS – Cascading Style Sheet
  • Gestaltungssprache zum Stylen von Websites
  • Metapher „Stylist“
  • Haus designen, Einrichtung gestalten
  • Layout vs. Struktur

Mindset/Fokus

  • Sprache (Fremdsprache lernen)
  • Code (Text & Zahlen)
  • Design (visuelle Gestaltung)

Favourite One

Favourite Website #1
Favourite Website #2
Favourite Website #4

Was ist HTML

  • textbasierte Auszeichnungssprache zur strukturierten Darstellung von Texten, Grafiken & Hyperlinks
  • HTML-Dokumente – die Basis für das Internet
  • reine textbasierte Sprache – kann mit jedem beliebigen Texteditor bearbeitet werden (z.B. Brackets, TextWrangler, …)

Note: HTML wird übrigens nicht programmiert, sondern einfach geschrieben – deshalb der Begriff Auszeichnungssprache.
Note: index.html bzw. datei_richtig_benennen.html

Grober Werdegang von HTML zum heutigen HTML5

Was ist CSS

  • Gestaltungssprache
  • Trennung von Struktur/Inhalt & Layout
  • Gestaltung direkt im HTML-Dokument möglich, aber nicht ratsam
  • HTML funktioniert auch ohne CSS – Darstellung abhängig vom Browser
  • HTML-/CSS-Code stehen jeweils in einer eigenen Datei, welche verknüpft werden
  • beliebiger Texteditor zur Bearbeitung von CSS-Dateien (z.B. Brackets, Espresso, …)

Note: datei_richtig_benennen.css

Einführung in HTML

topic 02

Strukur eines tags

Anfang & End tag

<start-tag> </end-tag>

Standalone tag

<tag-name> bzw. <tag-name /> in xHTML

Note: tags werden in spitzen Klammern < > notiert

Anfang & End tag

Standard-Element

<tag-name> content </tag>
<tag-name> Inhalt </tag>

Element mit Eigenschaft

<tag-name attribute="value"> content </tag>
<tag-name Eigenschaft="Wert"> Inhalt </tag>

Note: Anfang tags und Standalone tags können zusätzliche Angaben (Eigenschaften) enthalten.

Verschachtelung von Elementen

<h1> <em>HTML</em> - die Sprache des Web </h1>

Wie wird nun also richtig verschachtelt? Der tag, der zuerst aufgemacht wurde, muss als letztes geschlossen werden. Kein kreuzen also!

Note: durch die Verschachtelung entstehen hierarchische Strukturen und deshalb spricht man von strukturiertem Markup

History of web design

in a nutshell

Die dunkle Ära des Webdesigns (1989)

Am Anfang © froont

Der Beginn des Webdesigns war ziemlich dunkel. Der Bildschirm war im wahrsten Sinn des Wortes schwarz und nur ein paar wenige monochrome Pixel kamen darin vor. Gestaltet wurde mittels Symbole und Tabulatoren. Spulen wir zu der Zeit vor, als sich die grafische Benutzeroberfläche durchsetzte – zu der Wild West-Ära der Tabellen.

Arten der Elemente

topic 03

Block Elemente

Container <div>
Überschriften <h1>, <h2>, ... <h6>
Absatz <p>
Liste <ul>, <ol> und <li>

Inline Elemente

„umspannen“ <span>
fett <strong>
kursiv <em>
durchgestrichen <del>
Link <a>

Spezial Elemente

Bild <img>
Zeilenumbruch <br>
Trennlinie <hr>
Meta <meta>

Elemente in head & body

topic 04

Basis eines HTML-Dokuments

<!DOCTYPE html>
<html>
  <head>
    Metainformation über die Seite
  </head>
  <body>
    eigentlicher Inhalt der Seite
  </body>
</html>

Meta tags

tags im <head>-tag beinhalten Metainformation über die Seite

Title tag

<title> Mein Seitentitel </title>

Link tag

<link rel="stylesheet" href="style.css">

Meta tag

<meta charset="UTF-8">

Content tags

tags im <body> beschreiben die sichtbaren Elemente der Seite

Paragraph

<p> Text </p>

Headline

<h1> main Headline </h1>
<h2> second-level Headline </h2>
<h3> third-level Headline </h3>
<h4> fourth-level Headline </h4>
<h5> fifth-level Headline </h5>
<h6> sixth-level Headline </h6>

Unordered list

<ul>
  <li> list item 1 </li>
  <li> list item 2 </li>
  <li> list item 3 </li>
</ul>

Ordered list

<ol>
  <li> list item 1 </li>
  <li> list item 2 </li>
  <li> list item 3 </li>
</ol>

Image

<img src="http://url.com/image.png" alt="Beschreibung des Bildes">

Hyperlinks

Eine Verbindung von einer Seite zur anderen herstellen/Websites verknüpfen

<a href="http://url.com/page.html"> Besuchen Sie die Website </a>

Phrase tags

Important text

<strong> stark hervorgehobener Text (meist fett) </strong>

Emphasized text

<em> betonter Text (meist kursiv) </em>

Computer code

<code> Text als Code dargestellt </code>

Divider tag

Divider
(Container/Bereich/Gruppierung von Elementen)

<div> ... </div>

Comments

Für unsichtbaren HTML-Code <!-- vor den Code und --> nach den Code einfügen

<!--
  <p> Das ist auf der Seite nicht sichtbar </p>
-->
<p> Das hier ist sichtbar </p>

Tim Berners-Lee: The next web

beyond