# Einstieg HTML :::spoiler Inhaltsverzeichnis [toc] ::: ## TODO-Liste - [x] Überschriften - [x] Text/Absätze - [x] Links - [x] Bilder - [x] Formatierung - [x] Zitate - [x] Listen - [x] Tabellen - [x] Trennlinien --- # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ## Absätze Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ## Links jade-hs.de [Jade Hochschule](https://www.jade-hs.de) ## Bilder ![image](https://hackmd.io/_uploads/HJPFd7Pi1g.png "Logo Hochschule") ![Logo Hochschule](https://www.jade-hs.de/typo3conf/ext/jhs_site/Resources/Public/Images/jadehs-logo.png) ![grafik](https://hackmd.io/_uploads/ByR8KQPiyl.png) **Abbildung 1** Mein Desktop ## Formatierung **Lorem** ipsum dolor sit *amet*, consetetur sadipscing elitr, sed ~~diam~~ nonumy eirmod tempor **invidunt** ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata ***sanctus est Lorem*** ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur ## Zitate, Gespräche > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur >> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l >> abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. > Moin > [name=Rico M] > [time=Thu, Mar 6, 2025 3:00 PM] ## Listen * Hallo * Moin * Tschüss 1. Hallo 2. Moin 3. Tschüss - [ ] Hallo - [ ] Moin - [ ] Tschüss ## Tabellen | Column 1 | Column 2 | Column 3 | | :------- | :------: | -------: | | Text | Text | Text | ## Trennlinie --- # Umsetzung in HTML Tipps: - https://www.w3schools.com/ - ## Grundgerüst ```html= <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ``` 1. Zeile: Festlegung, dass die Datei eine html-Seite ist 2. html-Dokument beginnt 3. Kopfbereich beginnt: alles, was nicht an Inhalt auf der Seite steht 4. Titel der Seite wird mit einem Tag festgelegt 5. Kopf endet 6. - 11. Body: Inhalt der Website 8. h1: erste Überschrift 9. p: erster Absatz 12. html-Dokument endet --- ## Wichtige HTML-Tags - h1 bis h6 (Überschriften)`<h1>...</h1>` - p (Absätze) `<p>...</p>` - Links: `<a href="url">link text</a>` - Bilder: `<img src="pic_trulli.jpg" alt="Italian Trulli">` - Formatierung: - `<b>...</b>` (fett) - `<i>...</i>` (kursiv) - ... -