<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"-->
Basics
# HTML-Quellcode in Moodle lesen
<br>
<p style="font-size: 0.5em;font-style: italic;"><img src="https://i.imgur.com/fbCt30B.jpg" width="100px" style="background-color:transparent;border-style:none"><br>
gilt nicht für eingebettete und explizit ausgenommene Inhalte</p>
---
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
## Warum HTML 🤔
...und wofür brauche ich das überhaupt?
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
### HTML
Hyper Text <span>Markup Language<!-- .element: class="fragment highlight-green" data-fragment-index="1" --></span>
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
### Auszeichnungssprache
> "Auszeichnungssprache nennt man eine Art, dem Computer zu sagen, wie ein Text aussehen soll. [...] Dafür verwendet man besondere Befehle und Zeichen." ([Klexikon](https://klexikon.zum.de/wiki/HTML))
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
<span style="font-size:1.4em">`<ab hier> ... </bis hier>`</span>
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
<span style="font-size:1.2em">`<b> fetter Text </b>`</span>
<span style="font-size:1.2em">`<i> kursiver Text </i>`</span><!-- .element: class="fragment" data-fragment-index="1" -->
<span style="font-size:1.2em">`<h1> Überschrift (Level 1) </h1>`</span><!-- .element: class="fragment" data-fragment-index="2" -->
<span style="font-size:1.2em">`<h2> Überschrift (Level 2) </h2>`</span><!-- .element: class="fragment" data-fragment-index="2" -->
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
<span style="font-size:1.2em">`<` `hier` `/>`</span>
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#044c16" data-background-opacity="0.5"-->
<span style="font-size:1.2em">`<br />`</span>
<span style="font-size:1.2em">`<img src="bild.jpg" />`</span><!-- .element: class="fragment" data-fragment-index="1" -->
<br>
<span style="font-size:1.2em">`<img src="bild.jpg"` <span style="color:orange">`alt="Beschreibung" width="100" height="48"`</span> `/>`</span><!-- .element: class="fragment" data-fragment-index="2" -->
---
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"-->
## 🕹️ Demo in Moodle 🕹️
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#6b0264" data-background-opacity="0.5"-->
### 👩💻 HTML lernen 👨💻
* [Cheat Sheet](https://htmlcheatsheet.com/)
* [Kurs auf Codeacademy](https://www.codecademy.com/learn/learn-html)
* [SelfHTML](https://wiki.selfhtml.org/)
---
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#821717" data-background-opacity="0.5"-->
## 💡 Hacks'n'Tipps 💡
Mach den Tag zu <br><span>sonst macht Moodle es für Dich<!-- .element: class="fragment" data-fragment-index="1" --></span> <span>– meist falsch!<!-- .element: class="fragment" data-fragment-index="2" --></span>
Code sauber halten (unformatiert einfügen)<!-- .element: class="fragment" data-fragment-index="3" -->
Suchmaschinen nutzen!<!-- .element: class="fragment" data-fragment-index="4" -->
HTML = Auszeichnung ☝ CSS = Gestaltung<!-- .element: class="fragment" data-fragment-index="5" -->
Was haben andere gemacht?<!-- .element: class="fragment" data-fragment-index="6" -->
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#821717" data-background-opacity="0.5"-->
### 🛠️ Hilfreiche Tools 🛠️
[Notepad++](https://notepad-plus-plus.org/)<!-- .element: class="fragment" data-fragment-index="1" -->
[AutoHotkey](https://www.autohotkey.com/) ([Tutorial](https://ahkde.github.io/docs/Tutorial.htm))<!-- .element: class="fragment" data-fragment-index="2" -->
[Table Generator](https://www.tablesgenerator.com/html_tables)<!-- .element: class="fragment" data-fragment-index="3" -->
DevMode im Browser<!-- .element: class="fragment" data-fragment-index="4" -->
<span style="font-size: 0.7em;">Firefox & Chrome: STRG + SHIFT + I oder Safari: CMD + ,</span><!-- .element: class="fragment" data-fragment-index="4" -->
---
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"-->
# Danke fürs Zuhören!
*Anja Lorenz, [@anjalorenz](https://twitter.com/anjalorenz)*
<br>
<p style="font-size: 0.5em;font-style: italic;"><img src="https://i.imgur.com/fbCt30B.jpg" width="80px" style="background-color:transparent;border-style:none"><br>
gilt nicht für eingebettete und explizit ausgenommene Inhalte</p>
---
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"-->
# Anhang
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"-->
## Von Text umflossenes Bild
`<img src="bild.jpg" ... style="float:right; margin:20px;">`
<p style="font-size: 0.5em;font-style: italic;"><br><tt>margin</tt> legt dabei den Abstand zwischen Text und Bild fest.</p>
----
<!-- .slide: data-background="https://i.imgur.com/8rWMxe4.jpg" data-background-color="#0E0047" data-background-opacity="0.5"-->
## CSS-Snippet
`h3 {
font-family: Garamond, serif;
font-weight: normal;
margin-bottom: 4em;
text-align: center;
}`
{"metaMigratedAt":"2023-06-15T09:20:12.372Z","metaMigratedFrom":"YAML","title":"OERCamp WebTalk | Basics – HTML-Quellcode in Moodle lesen","breaks":"true","slideOptions":"{\"spotlight\":{\"enabled\":false},\"transition\":\"slide\"}"}