Basics

HTML-Quellcode in Moodle lesen


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

gilt nicht für eingebettete und explizit ausgenommene Inhalte

Warum HTML 🤔

…und wofür brauche ich das überhaupt?

HTML

Hyper Text Markup Language

Auszeichnungssprache

"Auszeichnungssprache nennt man eine Art, dem Computer zu sagen, wie ein Text aussehen soll. […] Dafür verwendet man besondere Befehle und Zeichen." (Klexikon)

<ab hier> ... </bis hier>

<b> fetter Text </b>

<i> kursiver Text </i>

<h1> Überschrift (Level 1) </h1>
<h2> Überschrift (Level 2) </h2>

< hier />

<br />

<img src="bild.jpg" />


<img src="bild.jpg" alt="Beschreibung" width="100" height="48" />

🕹️ Demo in Moodle 🕹️

👩‍💻 HTML lernen 👨‍💻

💡 Hacks'n'Tipps 💡

Mach den Tag zu
sonst macht Moodle es für Dich – meist falsch!

Code sauber halten (unformatiert einfügen)

Suchmaschinen nutzen!

HTML = Auszeichnung ☝ CSS = Gestaltung

Was haben andere gemacht?

🛠️ Hilfreiche Tools 🛠️

Notepad++

AutoHotkey (Tutorial)

Table Generator

DevMode im Browser
Firefox & Chrome: STRG + SHIFT + I oder Safari: CMD + ,

Danke fürs Zuhören!

Anja Lorenz, @anjalorenz

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

gilt nicht für eingebettete und explizit ausgenommene Inhalte

Anhang

Von Text umflossenes Bild

<img src="bild.jpg" ... style="float:right; margin:20px;">


margin legt dabei den Abstand zwischen Text und Bild fest.

CSS-Snippet

h3 { font-family: Garamond, serif; font-weight: normal; margin-bottom: 4em; text-align: center; }

Select a repo