Girls Day 2019

HTML & CSS Workshop

Wer bin ich?

👋 Ich bin Simon

Realschulabschluss
Vor 9 Jahren Ausbildung zum Mediengestalter (Digital)
Studium Informatik (Digitale Medien und Spiele) in Trier
Jetzt entwickle ich Web Apps bei Delivery Hero (Seit 3 Jahren)

Meine Hobbies

Musik machen (Gitarre)
Computerspiele
Im Internet surfen
Programmieren
Bildbearbeitung
Filme schneiden

Was ist HTML?

Eine Auszeichnungssprache!

🤷‍♀️

Aber was heißt das?

Ein Beispiel: Wir wollen einen Wald beschrieben!

Was gibt es in einem Wald?

Wald

Bäume 🌲 🌳

Tiere 🐿 🐗 🐻

Pilze 🍄

<wald>
  <baum typ="🌳">
    <eichhoernchen>🐿</eichhoernchen>
  </baum>
  <fliegenpilz>🍄</fliegenpilz>
  <baer>🐻</baer>
  <baum typ="🌲"></baum>
</wald>

<baum>🌳</baum>

<baum typ="🌳"></baum>
<baum typ="🌲"></baum>

<baum typ="🌳">
  <eichhoernchen>🐿</eichhoernchen>
  <nuss>🌰</nuss>
  <nuss>🌰</nuss>
  <nuss>🌰</nuss>
  <nuss>🌰</nuss>
</baum>

🌳

🌲

🌳

🌲

🌿

🍄

🌿

🍄

🌿

🌼

🌱

🌳

🌲

🐿

Was könnte man denn noch so beschreiben?

<zimmer>
  <person name="Simon" alter="30" haarfarbe="braun">
    <brille rahmen="dunkel"></brille>
  </person>
  <projektor></projektor>
</zimmer>

Was hat das jetzt mit dem Internet zu tun? 🤦‍♀️

Na, es wird genau so beschrieben

<html>
  <h1>Überschrift</h1>
  <p>Hallo, das ist ein text</p>
  <img width="300" src="img/grumpy.jpg" />
</html>

Überschrift

Hallo, das ist ein text

<h1>Haupt Überschrift</h1>
<p>Ein bisschen Text</p>
<h2>Zweite Überschrift</h2>
<p>Noch mehr</p>

Haupt Überschrift

Ein bisschen Text

Zweite Überschrift

noch mehr Text

<p>Ein <strong>wichtiger</strong> Text</p>
<p>Ein <em>hervorgehobener</em> Text</p>

Ein wichtiger Text

Ein hervorgehobener Text

<p>Das ist ein Text und <br>er bricht um</p>

Das ist ein Text
und er bricht um

  <p><a href="https://instagram.com">Hier</a> 
  kommt ihr wo anders hin</p>

Hier kommt ihr wo anders hin

<ul>
  <li>Eine</li>
  <li>Auflistung</li>
  <li>von</li>
  <li>Dingen</li>
</ul>

Eine
Auflistung
von
Dingen

<ol>
  <li>Eine</li>
  <li>Aufzählung</li>
  <li>von</li>
  <li>Dingen</li>
</ol>

Eine
Aufzählung
von
Dingen

<img src="img/dance.webp" width="200" >

<iframe 
  src="https://www.youtube.com/embed/a1Y73sPHKxw" 
  width="560" height="315"
  ...
></iframe>

<h1 style="background-color: yellow; color: black;">
  Ich bin kreativ 👩‍🎨
</h1>

Ich bin kreativ 👩‍🎨

CSS ✨💅

Cascading Style Sheet

Langweilig!

Ich bin ein ziemlich einfacher Text

Party! 🎉

😲 W o w !

OMG! 😱

<div>Ein bisschen text</div>
<span>Ein bisschen text</span>

HTML Elemente ohne Bedeutung.
Das ist perfekt um sie mit CSS zu gestalten.

width: 150px;
height: 150px;
padding: 30px;
background-color: purple;
color: yellow;
border: 3px solid yellow;

Ich bin ein Text in einer Box

⤵ Was ist daran blöd?

<div style="
  width: 150px;
  height: 150px;
  padding: 30px;
  background-color: purple;
  color: yellow;
">
  Ich bin ein Text in einer Box
</div>

Was macht ihr, wenn ihr zwei lila Boxen haben wollt?

<style>
  .lila-box {
    width: 150px;
    height: 150px;
    padding: 30px;
    background-color: purple;
    color: yellow;
  }
</style>

<div class="lila-box" >
  Ich bin ein Text in einer Box
</div>

Jetzt müsst den Style nur einmal ändern! 💁

Ich bin ein Text in einer Box

Das ganze Web funktioniert mit HTML und CSS

Zum Beispiel:

Instagram
Teile von Spotify
Facebook

Und jetzt seid ihr dran 👩‍💻

Macht eure eigenen Webseiten und erzählt Geschichten!