# HTML & CSS ----- ## Was ihr heute lernt - Was HTML ist - Warum HTML cool ist - Wie man Texte und Überschriften zu einer Webseite hinzufügt ----- ## Warum sollte man HTML kennen? ----- ## Was ist HTML? ----- ### Ein HTML Dokument ```html
<
!DOCTYPE html
>
<
html
>
<
body
>
<
/body
>
<
/html
>
``` ----- ### Was hat ein Hamburger mit HTML zu tun?
<
tag
>
<- Hier wird ein HTML Tag geöffnet
Inhalt
<- Hier kommt der Inhalt
<
/tag
>
<- Hier wird der HTML Tag geschlossen
Ein Element auf einer Webpage hat immer einen öffnenden Tag, dann den Inhalt des Elements und dann einen schließenden Tag. Der ist wie der beginnende Tag nur mit einem **/**. ----- Ein HTML Tag gibt an, was für ein Inhalt auf der Webpage gezeigt werden soll. Es gibt: - Überschriften - Texte - Bilder - Links - Videos - Aufzählungen - Formulare Alle diese Elemente kommen zwischen **
<
body
>
** und **
<
/body
>
** ----- Das kann dann z.B. so aussehen: ```html
<
body
>
<
h1
>
Überschrift
<
/h1
>
<
p
>
Text
<
/p
>
<
img src="Bild"
>
<
/body
>
``` ----- Die Elemente der Webseite werden einfach von oben nach unten aufgeschrieben. So werden sie dann auch auf der Webseite angezeit. Komplexere Muster und Layouts lernen wir später zu machen. Erstmal wird alles aufgeschrieben. ![Lego](/assets/images/LEGO-blocks.png) ```html
<
body
>
<
h1
>
Überschrift
<
/h1
>
<
p
>
Text
<
/p
>
<
img src="Bild"
>
<
/body
>
``` ----- ## Überschriften HTML kennt 6 verschiedene Überschriftgrößen. Hier sind 3:
<
h1
>
h1
<
/h1
>
<
h2
>
h2
<
/h2
>
<
h3
>
h3
<
/h3
>
----- ## Absätze Ein Absatz wird mit dem Tag ```
<
p
>
``` begonnen und mit ```
<
/p
>
``` beendet. Nach einem Absatz macht HTML automatisch einen Zeilenumbruch. Wird zwischen durch noch ein Zeilenumbruch benötigt, so kann man den mit ```
<
br
>
``` einfügen. Ein Zeilenumbruch braucht keinen schließenden Tag. ----- ## Bilder Ein Bild wird mit dem **
<
img
>
** Tag eingefügt. Aber ohne ein schließendes Tag. Da ist **
<
img
>
** genauso eine Ausnahme wie **
<
br
>
**. Das **
<
>
** Tag braucht aber noch mindestens einen Wert der ihm sagt, welches Bild angezeigt werden soll. Das wird über **src** gemacht. ```
<
img src="url"
>
``` Optional kann auch die Breite und/oder die Höhe mit der das Bild angezeigt werden soll angegeben werden. ```
<
img src="url" width="" height=""
>
``` ----- ## Größe in HTML Als Größe für width und height habt ihr folgende Möglichkeiten: - **px**: Pixel; z.B. 10px - **cm**: Centimeter; z.B. 0.5cm - **em**: Größe von "M"; z.B. 1.2em - **%**: Prozent vom Bildschirm; z.B. 75% ----- ## Links Links können zu Text oder zu Bildern hinzufügen. Links sind kein eigenständiges Webpage-Element. Ein Link ähnlich wie ein Bild aufgebaut: ```html
<
a href="url"
>
Irgendein HTML element
<
/a
>
``` Diesen Codeteil könnt ihr nur einfach verwenden und um ein anderes Element rumschreiben. ----- Link im Text: ```html
<
p
>
Hier fängt ein Text an
<
a href="url"
>
und das hier ist ein Link.
<
/a
>
Hier kann noch mehr Text sein.
<
/p
>
``` Link im Bild: ```html
<
a href="url"
>
<
img src="url" height="100px"
>
<
/a
>
``` ----- ## Aufzählungen In HTML kann man wie in einem anderen Textverabreitungsprogramm auch Aufzählungen machen. Überhaupt funktioniert HTML ähnlich wie Textverarbeitung. Es gibt geordnete Aufzählungen: 1. Text 2. Text und ungeordnete Aufzählungen - Text - Text ----- Eine geordnete Liste wieder eingeleitet durch den Tag ```html
<
ol
>
``` und wird mit ```html
<
/ol
>
``` abgeschlossen. Listeneinträge werden mit **
<
li
>
** Text **
<
/li
>
** hinfugefügt. ----- Eine ungeordnete Liste wieder eingeleitet durch den Tag ```html
<
ul
>
``` und wird mit ```html
<
/ul
>
``` abgeschlossen. Listeneinträge werden mit **
<
li
>
** Text **
<
/li
>
** hinfugefügt. ----- Ein Beispiel: ```html
<
ul
>
<
li
>
Text
<
/li
>
<
li
>
Text
<
/li
>
<
li
>
Text
<
/li
>
<
/ul
>
``` ergibt - Text - Text - Text