<!-- .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; }`
{"title":"OERCamp WebTalk | Basics – HTML-Quellcode in Moodle lesen","tags":"slides, OERCamp 2020, OER, WebTalk, Moodle","slideOptions":{"spotlight":{"enabled":false},"transition":"slide"}}
    1203 views