tags: Vorträge

BayCode Hackathon - HTML Einführung

slide: https://hackmd.io/@kidslab/html


HTM-Was? CSS?


HTML = Was steht auf der Seite?
CSS = Wie sieht es aus?


Der Editor


HTML-Tags

in Spitzen Klammern:

Anfang UND Ende!

<h1>Überschrift</h1>


Body!

<!DOCTYPE html> <html> <body> HIER MUSS EUER TEXT UND INHALT REIN! </body> </html>

Beispiel:


Überschrift - Header

<h1> Hier steht die Überschrift! </h1>

Alternativen

Header1, Header2

<h1>Hier steht die Überschrift!</h1> <h2>Hier steht die Unter...Überschrift!</h2> <h3>Hier steht die Unter...unter...Überschrift!</h3>

Der Text - Paragraph

<p> Hier kommt der Text rein... </p>

Neue Zeile?

<p> Hier kommt der Text rein... ist das eine neue Zeile? </p>

Neue Zeile - Lösung 1

<p> Hier kommt der Text rein...<br> ist das eine neue Zeile? </p>

Neue Zeile - Lösung 2

<p> Hier kommt der Text rein... </p> <p> und hier der 2. Absatz... </p>

Tags in Tags

<p> Etwas <b>Wichtiges</b> schreibt man fett... </p>

Eine Liste

<ol> <li>eins...</li> <li>zwei...</li> </ol>

Links - dafür steht das H!

Hyperlink!

<a href="https://wikipedia.de">Link...</a>

Bilder einfügen

<img src="https://..." width="100%">

Eigenschaften in Tags

Der TAG: IMG = Image / Bild

Die Eigenschaften:

  • SRC - Welches Bild
  • WIDTH - wie Breit (pixel oder %)

Und jetzt: Style!


Einzelnes Element stylen

<body style="background-color: green;">

Alle Elemente stylen

<html> <style> body { font-family: arial; } h1 { font-size: 30pt; } </style>

URL - was ist das?

Select a repo