10.01.2022

HowToWeb 3
KaraBeNemsi

Git, HTML und CSS

Die Mission: Ein Imperium aufbauen

Your Name Here Inc.

Norm

{
  "headquarter":
    {
        "planet":"Earth",
        "name":"Doofenshmirtz Evil Inc.",
        "employees": 30
    },
  "subsidiaries":[{
      "planet":"Moon",
      "name":"Doofenshmirtz Moon Telescope.",
      "employees": 3
  },
  {
      "planet":"Io",
      "name":"IOnisationinator Station",
      "employees": 5
  }]
}

Vanessa

{
  "headquarter":
    {
        "planet":"Earth",
        "name":"Doofenshmirtz Evil Inc.",
        "employees": 30
    },
  "subsidiaries":[{
      "planet":"Moon",
      "name":"Doofenshmirtz Moon Telescope",
      "employees": 3
  },
  {
      "planet":"Mars",
      "name":"Doofenshmirtz Evil Annex",
      "employees": 5
  }]
}

git

Quellcodeverwaltung

1. New tool, who dis?

$ git config --global user.name "norm"
$ git config --global user.email "norm@doofenschmirtz.evil"

Arbeit suchen

http://

3. Repo lokal clonen

$ C:\Users\yourname>

$ mkdir projects

$ cd projects

$ git clone http:////my-first-project.git
Password

$ dir

$ cd my-first-project

$ code .

4. Imperiumsplan ausarbeiten

masterplan.json

{
  "headquarter": {
    "name":"Doofenschmirtz Tower",
    "city":"Tri-State-Area",
    "ceo":"Heinz Doofenschmirtz"
  },
  "inventions": [
    "Age Accelerator-inator",
    "Copy and Paste-Inator",
    "Melt-inator 6-5000"
  ]
}

5. Sich festlegen

$ git status
On branch main
No commits yet

Untracked files:
  (use "git add ..." to include in what will be committed)
        masterplan.json

nothing added to commit but untracked files present (use "git add" to track)

$ git add masterplan.json

$ git status
On branch main

No commits yet

  (use "git rm --cached ..." to unstage)
        new file:   masterplan.json

$ git commit -m 'Norms Idea'
[main (root-commit) 87057a9] Norms Idea
1 file changed, 12 insertions(+)
create mode 100644 masterplan.json

7. Zum Server senden

$ git push origin main

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 64 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 387 bytes | 387.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
remote: . Processing 1 references
remote: Processed 1 references in total
To http:////my-first-project.git
* [new branch]      main -> main

8. Updates von Masterserver holen

$ git pull

$ git pull
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 292 bytes | 7.00 KiB/s, done.
From http:////my-first-project
  87057a9..4da5012  main       -> origin/main
Updating 87057a9..4da5012
Fast-forward
masterplan.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)

Die Mission: Imperium ausweiten

Doofenschmirtz Evil Inc.

Plan kopieren

Fork doof-evil-inc/masterplan

Masterplan abholen

$ cd C:\Users\\projects
$ git clone http:////masterplan.git
Password
Cloning into 'masterplan'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
$ cd masterplan
$ code .

Eigene Vorschläge vorbereiten

$ git branch your-branch
$ git checkout your-branch
Switched to branch 'your-branch'
# or like this
$ git checkout -b your-branch

Eigene Vorschläge erarbeiten

masterplan.json

{
  "headquarter": {
    ...
  },
  "subsidiaries":[{
        "planet":"Moon",
        "name":"Doofenshmirtz Moon Telescope.",
        "employees": 3
    },
    {
        "planet":"Io",
        "name":"IOnisationinator Station",
        "employees": 5
    }],
  "inventions": [
    ...
  ]
}

Committen

$ git add .
$ git commit -m "New Subsidiary on venus"
[your-branch b4756e3] New Subsidiary on venus
 1 file changed, 5 insertions(+)

Zum Master senden

$ git push --set-upstream origin your-branch
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 64 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 349 bytes | 349.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
remote: 
remote: Create a new pull request for ':your-branch':
remote:   http:///doof-evil-inc/masterplan/compare/main...:your-branch
remote:
remote: . Processing 1 references
remote: Processed 1 references in total
To http:////masterplan.git
* [new branch]      your-branch -> your-branch
Branch 'your-branch' set up to track remote branch 'your-branch' from 'origin'.

Änderungen zusammenführen

$ git checkout main
$ git merge your-branch
Updating f3a5c03.b4756e3
Fast-forward
 masterplan.json | 5 +++++
 1 file changed, 5 insertions(+)

$ git push

Fehler ausmerzen

Doofenschmirtz ~~Good~~ Evil Inc.

Plan kopieren

Fork doof-evil-inc/conflicts

Plan abrufen

$ git clone http:////conflicts.git
$ cd conflicts

Merge versuchen

$ git merge merge-me
Auto-merging merge-me.txt
CONFLICT (content): Merge conflict in merge-me.txt
Automatic merge failed; fix conflicts and then commit the result.

Konflikt lösen

<<<<<<< HEAD
this is some content to mess with
content to append
=======
totally different content to merge later
>>>>>>> merge-me

this is some content to mess with
content to append
totally different content to merge later

$ git add .
$ git commit -m "merged and resolved conflict in merge.txt"
[main 1810e2a] merged and resolved conflict in merge.txt

Git Services

(Auszug)

Bitbucket.org

Gitlab.com

GitHub.com

Gogs.io

Git tools

Sourcetree

Github Desktop

Gitkraken

HTML

Das Grundgerüst des Internet

www.doofenschmirtz.evil

Eine erste Seite

Was brauchen wir eigentlich?

Tolles Bild

Toller Text

Bild

Video

Tabelle

News

Grundgerüst

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    <p>Dieser Text wird im Browserfenster angezeigt.</p>
  </body>
</html>

Was ist HTML?

HyperText - Markup - Language

Hypertext Auszeichungssprache

Version	Erscheinen
HTML	3. November 1992
HTML	30. April 1993
HTML 2.0	November 1995
HTML 3.2	14. Januar 1997
HTML 4.0	18. Dezember 1997
HTML 4.01	24. Dezember 1999
XHTML 1.0	26. Januar 2000
XHTML 1.1	31. Mai 2001
HTML5	28. Oktober 2014
HTML 5.1	1. November 2016
HTML 5.2	14. Dezember 2017

Textauszeichnung

<h1>ÜBERSCHRIFTEN</h1>

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    <h1> Doofenshmirtz Evil Incorporated<h1p>
  </body>
</html>

Erstmal Speichern

Am besten als "index.html"

<p>Absätze</p>

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    <h1> Doofenshmirtz Evil Incorporated<h1p>
    <p> Lorem ipsum dolor sit amet consectetur ... nostrum quo.</p>
    <p> In movet iisque nam, ut est ... habemus prodesset.</p>
    <p> Te vis maluisset urbanitas, vitae ... laudem ut eam.</p>
  </body>
</html>

<ul>Listen</ul>

<!doctype html>
<html lang="de">
    ...
  <body>
    ...
    <h2> Erfindungen (chronologisch)<h2>
    <ol>
      <li>Magnetism Magnifier</li>
      <li>Destruct-inator</li>
      ...
    </ol>
    <h2> Weitere Erfindungen<h2>
    <ol>
      <li>Audience Control-inator</li>
      <li>Shock Absorber Absorbinator</li>
      ...
    </ol>
    ...
  </body>
</html>

Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Lorem ipsum dolor sit amet, modus regione labitur te quo, at noluisse signiferumque vim, ex ornatus habemus propriae vel. At quodsi similique forensibus vim, iriure gloriatur dissentias ea mei. Eos te quod solum. Et has unum commodo fuisset. Eam at viris putent explicari.

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Nam facer novum sonet ea, nam iriure consetetur et. Ne nulla ubique per, dicunt reprimique te mel. Omittantur efficiantur ius et, usu in habeo facer inani, docendi liberavisse instructior in mei. Qui choro ignota ei, wisi ipsum nam ne. Mollis recusabo eu his, ea hinc volutpat definiebas duo.

Est in mundi tollit, nam et dicunt contentiones, ex usu audire diceret facilisis. Eum viderer corpora sadipscing ut, eu ius aeterno integre, mei ex libris perpetua comprehensam. Errem tamquam pertinax no vis, eum velit suavitate an, est populo option at. Id sea utamur regione democritum, ea utroque laboramus eam. Nostrum quaestio no has, cu pri aperiam oblique habemus. An moderatius omittantur definitiones sit.

Organistion

Dateistruktur

 website
 |
(├─ js)
(├─ css)
 ├─ img
 ├─ html
 └─ index.html

Konventionen

"... handelt es sich bei dem Kodex eher um sogenannte Richtlinien als um Regeln"

Tags und Attribute klein schreiben

<h1 href="...">Text</h1>

Element mit 2 Leerzeichen einrücken

<ul>
  <li>
    <ul>
      <li>...</li>
    </ul>
  </li>
  <li>...</li>
</ul>

CSS

Das geht aber schöner

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

style.css

h1 {
  background: green;
  color: white;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

CSS-Anweisung

h1 { background: #4EAA72;}

style.css

h1 {
  background: green;
  color: white;
}

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" ... initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    ...
  </body>
</html>

preise.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" ... initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <title>Preise - Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    ...
  </body>
</html>

bilder.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" ... initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <title>Bilder - Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    ...
  </body>
</html>

CSS Cascading Style Sheets

italienisch cascata, [stufenweiser] Wasserfall

Einbinden

Inline

<h1 style="color:blue;text-align:right">This is a heading.</h1>

Stylesheet im Head

<head>
  <style>
    h1 {
      color: blue;
      text-align: right;
    }
  </style>
</head>

Externes Stylesheet

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Import im Stylesheet

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,300,700');

Kombinatoren

/* Absteigend */
div p {
  color: #548645;
}
/* Kind */
div > p {
  color: #548645;
}
/* Zwilling */
div ~ p {
  color: #548645;
}

Farben

`background: red;`
`background: #369541;`
`background: rgb(120,120,61);`
`background: rgba(120,120,61,0.6);`
`background: hsl(200,30%,40%);`
`background: hsla(200,30%,40%,0.6);`

Größen

`height: 50px;`	Pixel
`width: 50pt;`	Punkt
`height: 2cm;`	Zentimeter
`width: 1in;`	Inches

`height: 5vh;`	Viewport-Height
`width: 5vw;`	Viewport-Width
`height: 5vmax;`	Viewport-Max
`width: 5vmin;`	Viewport-Min
`height: 3em;`	Schriftgröße
`width: 3rem;`	Schriftgröße des Wurzelelement
`height: 90%;`	Prozent

Vererbung

<div class="red">
  <h1>Hallo</h1>            
</dvi>

.red {
  color: red;
  text-align: center;
}

Hallo

Autos in Deutschland {
  color: blau;
}
Autos in Deutschland in Ebingen {
  color: rot;
}
Autos in Deutschland in Ebingen von Groz-Beckert {
  color: grün;
}
Autos in Deutschland {
  color: orange;
}
Autos von Groz-Beckert {
  color: pink;
}

Text

p { text-decoration: none; /* overline | line-through | underline */

Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisici

p { text-transform: uppercase; /* lowercase | capitalize*/ }

Lorem ipsum dolor sit amet. Ut enim ad minim

p { text-indent: 50px; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p { line-height: 1.3; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p { letter-spacing: 20px; }

Lorem ipsum dolor sit amet.

p { color: #985232 }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem temporibus alias enim incidunt dolor vel distinctio molestiae perferendis obcaecati ex.

p { text-align: left; /* right | center | justify */ }

Lorem ipsum

dolor sit

amet. Ut

enim ad minim

p { word-spacing: 120px; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum reiciendis unde tempora! Amet facilis, porro enim autem nobis incidunt voluptatibus!

style.css

h1 {
  background: green;
  color: white;
  text-transform: uppercase;
}
p {
 line-height: 1.5;
 color: #232323;
 text-align: justify;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Schrift

p { font-family: 'Times New Roman', Times , serif;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

p { font-style: normal; /* italic */}

Lorem ipsum dolor sit amet.

p { font-size: 2rem;}

p { font-weight: 700; /* 100 | 400 | 300 | bold | normal | thin */ }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, soluta, voluptas. Tempore similique voluptate quae, odio aspernatur, a dolore? Tempora.

style.css

body{
 font-family: "Ebrima";
 font-size: 16px
}

h1 {
  background: green;
  color: white;
  font-size: 2rem;
  text-transform: uppercase;
  font-family: "Bahnschrift";
  font-weight: 400;
}

p {
  line-height: 1.5;
  color: #232323;
  text-align: justify;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Listen

ol {
  list-style-type: decimal; /* lower-alpha | numeric |
          armenian | georgian | ... */
  list-style-image: url("list.png");
  list-style-position: outside; /* inside */
}
ul {
  list-style: square inside;
}

style.css

...
  color: #232323;
  text-align: justify;
}

ul {
  list-style: square;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

"Hyper, Hyper" -text

website
|
├─ js
├─ css
├─ img
├─ html
|  └─ preise.html
|
└─ index.html

Verweise

<a></a>

<a href="ziel.html">Weg zum Ziel</a>

Menü

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    <h1>Doofenshmirtz Evil Incorporated<h1p>
    <nav>
      <ul>
        <li><a tabindex="0" aria-current="page">Startseite</a></li>
        <li><a href="html/preise.html">Preise</a></li>
        <li><a href="html/bilder.html">Bilder</a></li>
      </ul>
    </nav>
    ...

Menü

preise.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preise - Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    <h1>Preistabelle</h1>
    <nav>
      <ul>
        <li><a href="../index.html">Startseite</a></li>
        <li><a tabindex="0" aria-current="page">Preise</a></li>
        <li><a href="bilder.html">Bilder</a></li>
      </ul>
    </nav>
    ...

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Produkt	Preis
Data	186 TAD
Data	868 TAD
Data	6464 TAD
Data	14654 TAD

Tabellen

<table>
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>186 TAD</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>6464 TAD</td>
    </tr>
  </tbody>
</table>

preise.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preise - Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
  ...
    <h2>Preistabelle</h2>
    <table>
      <thead>
        <tr>
          <th>Produkt</th>
          <th>Preis</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Magnetism Magnifier</td>
          <td>186 TAD</td>
        </tr>
        <tr>
          <td>Destruct-inator</td>
          <td>868 TAD</td>
        </tr>
        <tr>
          <td>Giant Robot</td>
          <td>6464 TAD</td>
        </tr>
        <tr>
          <td>Deflate-inator</td>
          <td>14654 TAD</td>
        </tr>ö
      </tbody>
    </table>
  </body>
</html>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Produkt	Preis
Magnetism Magnifier	186 TAD
Destruct-inator	868 TAD
Giant Robot	6464 TAD
Deflate-inator	14654 TAD

style.css

...
  list-style: square;
}

thead {
  font-size:1.1rem;
}

th {
  text-align: left;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Produkt	Preis
Magnetism Magnifier	186 TAD
Destruct-inator	868 TAD
Giant Robot	6464 TAD
Deflate-inator	14654 TAD

<div>Die Box</div>

Die Inatoren

Melt-inator 6-5000
Go Home-Inator
Animate-Inator

Weitere Erfindungen gerne auf Nachfrage

<div style="color: red">
  <h2>Die Inatoren</h2>
  <ul>
    <li>Melt-inator 6-5000</li>
    <li>Go Home-Inator</li>
    <li>Animate-Inator</li>
  </ul>
  <p>Weitere Erfindungen gerne auf Nachfrage</p>
</div>

id="id-klassen" class="abschnitt"

html

<div id="erste-box" class="box">
  <p>Lorem, ipsum dolor.</p>
</div>
<div id="zweite-box" class="box rot">
  <p>Lorem, ipsum dolor.</p>
</div>
<div id="dritte-box" class="gruen">
  <p>Lorem, ipsum dolor.</p>
</div>
<p class="rot">
  Lorem ipsum dolor sit amet.
</p>

css

#erste-box {
  font-size: 5px;
}
#zweite-box {
  font-size: 20px;
}
#dritte-box {
  font-size: 30px;
}
.rot {
  color:red;
}
.gruen {
  color:green;
}

style.css

...
  list-style: square;
}

.header{
  color: white;
  background:green
}

.header ul{
  font-size: 1rem;
  list-style: none;
}

.centered {
  text-align: center;
}

index.html

<!doctype html>
<html lang="de">
  <head>...</head>
  <body>
    <div class="header">
      <h1 class="logo">Doofenshmirtz Evil Incorporated</h1>
      <nav>...</nav>
    </div>
    <div class="content">
      <p>Lorem ipsum ... explicari.</p></p>
      <h2>Erfindungen (chronologisch)</h2>
      <ol>...</ol>
      <h2>Weitere Erfindungen</h2>
      <ul>...</ul>
      <p class="centered">Nam facer novum sonet ea, ... duo.</p>
      <p>Est in mundi tollit, nam ... sit.</p>
    </div>
  </body>
</html>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Hintergründe

div { background-color: #1573bf; }

div { background-image: url("cat.png"); }

div { background-repeat: no-repeat; }

div { background-position: center top; }

div { background-size: cover; /* contain | 50px 30px */ }

div { background: url('cat.png') no-repeat center center; }

style.css

...

body{
  ...
  background: #eee;
}

...

.header{
  color: white;
  background:
    url(https://howtoweb3.de/images/medium/003.jpg);
  background-size: cover;
  background-position: center center;
}

...

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

#1 {
  width: 120px;
  height: 60px;
  padding: 10px;
  border: 10px dashed navy;
  margin: 8px;
}

Ränder

div { border-style: solid; /* dotted | dashed | double | groove | none */ }

div { border-style: solid dotted dashed solid; }

div { border-width: 20px; }

div { border-color: #de54aa; }

-prefix-

div { border-radius: 30px;
      -o-border-radius: 30px;
      -moz-border-radius: 30px;
      -webkit-border-radius: 30px; }

div { border: 10px solid #de54aa; }

style.css

...

.header{
  ...
  border-bottom: 0.5rem solid #1E3EE3;
}

th, td {
  border-bottom: 0.125rem solid #232323;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Außenabstand

div { margin: 2rem 5rem 1rem 4rem; }

50% x 50%

Innenstand

div { padding: 2rem 5rem 1rem 4rem; }

50% x 50%

style.css

.header {
  ...
  padding: 3rem 1rem 1rem;
  margin-bottom: 3rem;
}

body {
  ...
  margin: 0;
  padding: 0;
}

.content {
  margin: 2rem;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Höhe und Breite

div {
  width: 50%;
  height: 10rem;
  max-width: 300px;
  max-height: 150px
}

width:80%; height:10rem

width:80%; height:10rem;max-width:600px; max-width:800px

Box-Sizing

div {
  width: 300px;
  height: 150px;
}

div {
  width: 300px;
  height: 150px;
  padding: 0 6rem;
}

div {
  width: 300px;
  height: 150px;
}

div {
  width: 300px;
  height: 150px;
  padding: 0 6rem;
  box-sizing: border-box;
    }

style.css

* {
  box-sizing: border-box
}

header {
  ...
  height: 20rem;
}

.content {
  margin: 2rem auto;
  padding: 0 2rem;
  width: 100%;
  max-width: 40rem;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Semantische elemente

<!doctype html>
<html lang="de">
  <head>...</head>
  <body>
    <h1>Doofenshmirtz Evil Incorporated</h1>
      <nav>...</nav>
      <div class="content">
        <p>Lorem ipsum ... explicari.</p></p>
        <h2>Erfindungen (chronologisch)</h2>
        <ol>...</ol>
        <h2>Weitere Erfindungen</h2>
        <ul>...</ul>
        <p>Nam facer novum sonet ea, ... duo.</p>
        <p>Est in mundi tollit, nam ... sit.</p>
      </div>
    </body>
  </html>

`<nav>`

`<header>`

`<footer>`

`<main>`

`<article>`

`<aside>`

`<details>`

`<figure>`

`<figcaption>`

`<mark>`

`<section>`

`<summary>`

`<time>`

<html>
  <head>
    ...
  </head>
  <body>
    <header>
      <h1 class="logo">Doofenshmirtz Evil Incorporated</h1>
      <nav>
        <ul>                
         ...
        </ul>
      </nav>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet,...</p>
      ...
    </main>
  </body>
</html>

Attribute

Enthalten zusätliche Informationen

Stehen im Start-Tag

<tag attr="value">...</tag>

Häufige Attribute

<html lang="de"><p style="color:red"><a href="//google.de"><img src="./images/bild.jpg" alt="Bild">

Und über 170 weitere

Input

<input type="text"><checkbox checked><input name="username">

Data-Attribute

<div data-myAttr="Custom Value"><div data-customBoolean>

CSS-Variablen

No IE-Support

:root {
  --main-bg-color: blue;
}

div {
  background-color: var(--main-bg-color)
}

style.css

body {
  --main-color: #1E3EE3;
  --accent-color: #74C136;
  --background-color: #eee;
  --font-color: #232323;

}

header {
  border-bottom: 0.5rem solid var(--main-color);
}

Bilder

<img src="https://howtoweb3.de/images/medium/115.jpg" height="394" width="222" alt="Heinz Doofenschmirtz" >
<img src="https://howtoweb3.de/images/medium/172.jpg"  height="533" width="800" alt="" >

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    ...
    <main>
    <p>...</p>
    <img src="https://howtoweb3.de/images/medium/115.jpg"  height="394" width="222" >
    <img src="https://howtoweb3.de/images/medium/172.jpg"  height="533" width="800" >
    ...
    </main>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doofenschmirtz Evil Inc.</title>
  </head>
  <body>
    ...
    <main>
    <p>...</p>
    <img src="https://howtoweb3.de/images/medium/115.jpg" >
    <img src="https://howtoweb3.de/images/medium/172.jpg" >
    ...
    </main>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

style.css

img {
  width:100%;
  margin: 1rem 0; 
  max-height: 15rem;
  object-fit: cover;
  border-radius: 1rem;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Display

div{
  display: block;
  display: inline;
  display: inline-block;
  display: none;
}

Hi, this is Steven

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

index.html

<header>
  <nav>
    <ul>
      <li><a tabindex="0" aria-current="page">Startseite</a></li>
      <li><a href="html/preise.html">Preise</a></li>
      <li><a href="html/bilder.html">Bilder</a></li>
    </ul>
  </nav>
  <h1 class="logo">Doofenshmirtz Evil Incorporated</h1>
</header>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

style.css

header {
  padding: 0 1rem 1rem;
}
 nav ul{
  font-size: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

nav li {
  display: inline-block;
}
nav li a{
  display: block;
  padding: 1rem;
  color: #fff;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Schatten

(-prefix-)

18

Montag

19

Dienstag

20

Mittwoch

p {
  text-shadow: 7px 7px;
  text-shadow: 7px 7px rgba(30,150,132);
  text-shadow: 7px 7px 7px rgba(30,150,132);
}

Hello Everybody

calendar.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
  </head>
  <body>
    <div class="day">
      <h2>18</h2>
      <p>18.Januar 2016</p>
    </div>
  </body>
</html>

style.css

.day {
  font-family: sans-serif;
  margin: 5rem;
  border-radius: 1rem;
  box-shadow: 0 0 1rem rgba(30,30,30,0.6);
  height: 28rem;
  width: 20rem;
}

...

calendar.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
  </head>
  <body>
    <div class="day">
      <h2>18</h2>
      <p>18.Januar 2016</p>
    </div>
  </body>
</html>

style.css

...

h2 {
  border-radius: 1rem 1rem 0 0;
  width: 20rem;
  margin: 0;
  text-align: center;
  font-size: 12rem;
  padding: 4rem 0;
  background: #2D7998;
  color: #fff;
  text-shadow: 0 0 2rem rgba(0,0,0,0.6);
  box-shadow: inset 0 0 4rem rgba(250,250,250,0.1);
}

...

calendar.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendar</title>
  </head>
  <body>
    <div class="day">
      <h2>18</h2>
      <p>18.Januar 2016</p>
    </div>
  </body>
</html>

style.css

...
p {
  width: 100%;
  margin: 0;
  padding: 2rem 0;
  text-align: center;
  font-size: 2rem;
}

Calendar

file://calendar.html

14

Mittwoch

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Medien

Bilder

Format	Datei
JPEG	.jpg \ .jpeg
GIF	.gif
ICO	.ico
PNG	.png
SVG	.svg
WEBP	.webp

Video

Format	Datei
MPEG-4 or MP4	.mp4
WebM	.webm
Ogg	.ogg

Audio

Format	Datei
MP4	.mp4
OGG	.ogg
MP3	.mp3
WAV	.wav

Images revisited

<img src="url" alt="alternatetext">

<img src="url"
  srcset="image-480.png 480w,
          image-920.png 920w,
          image-1080.png 1080w,"
  alt="alternatetext">

<picture>
  <source media="(min-width: 650px)" srcset="image-650.jpg">
  <source media="(min-width: 465px)" srcset="image-465.jpg">
  <img src="image.jpg">
</picture>

Audio

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

index.html

<html>
  <head>
  </head>
  <body>
    <header>
    </header>
    <main>
      <audio src="https://howtoweb3.de/media/doofenschmirtz.mp3", controls/>
      <audio src="https://howtoweb3.de/media/imperialMarch.mp3", controls/>
      ...
    </main>
  </body>
</html>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Jingle

Rather had this leitmotif

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Video

<video width="320" height="240" controls autoplay loop muted src="url">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
 Your browser does not support the video tag.
</video>

index.html

<html>
  <head>
  </head>
  <body>
    <header>
    </header>
    <main>
      <audio src="https://howtoweb3.de/media/doofenschmirtz.mp3", controls/>
      <audio src="https://howtoweb3.de/media/imperialMarch.mp3", controls/>
      <video src="https://howtoweb3.de/media/doofenschmirtz.mp4", controls/>
      ...
    </main>
  </body>
</html>

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://index.html

Doofenshmirtz Evil Incorporated

Jingle

Rather had this leitmotif

Erfindungen (chronologisch)

Magnetism Magnifier
Destruct-inator
Giant Robot
Deflate-inator
Age Accelerator-inator
Slave-inator
Drill-inator

Weitere Erfindungen

Copy and Paste-Inator
Melt-inator 6-5000
Wood-inator

Iframes

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

Position

div {
  position: static;
  position: relative;
  position: fixed;
  position: absolute;
  position: sticky;
  top: 15px;
  right: 6px;
  bottom: 0;
  left: 80px;
}

style.css

header {
  ...
  position:relative;
}

nav {
  position: sticky;
  top: 0;
}

.logo{
  position: absolute;
  bottom:0;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://bilder.html

Doofenshmirtz Evil Incorporated

Bildergalerie

index.html

<html>
  ...
  <body>
   ...
    </main>
    <footer>
      <div class="footer-content">
        <p>&copy; 2021</p>
        <p>Doofenschmirtz Evil Incorporated</p>
        <p>Site build by Norm</p>
      </div>
    </footer>
  </body>
</html>

style.css

footer {
  background: #333;
  width: 100%;
}
.footer-content {
  margin: 0 auto;
  width: 100%;
  max-width: 40rem;
}
.footer-content p{
  display: inline-block;
  margin: 1rem;
  color: #fff;
  text-align: center;
  line-height: 1;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://bilder.html

Doofenshmirtz Evil Incorporated

Bildergalerie

Flexbox

(-prefix-)

div {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://bilder.html

Doofenshmirtz Evil Incorporated

Bildergalerie

index.html

<html>
  ...
  <body>
    <main>
      <h2>BIldergalerie</h2>
      <div class="gallery" >
        <img src="https://howtoweb3.de/images/small/002.jpg" >
        <img src="https://howtoweb3.de/images/small/388.jpg" >
        <img src="https://howtoweb3.de/images/small/341.jpg" >
        ...
      </div>
    </main>
    <footer>...</footer>
  </body>
</html>

style.css

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery img {
  margin: 1rem;
  width: 15rem;
  flex-grow:1;
}

style.css

.footer-content {
  margin: 0 auto;
  width: 100%;
  max-width: 40rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.footer-content p{
  margin: 1rem;
  color: #fff;
  line-height: 1;
}

CSS-Grid

No IE-Support

Grid Container und Item

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid-Line

Grid-Track

Grid-Cell

Grid-Area

.container {
  display: grid | inline-grid;
}

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

.container {
  grid-template-columns: 1fr 1fr 1fr;
}
.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

.container {
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

.container {
  justify-items: start | end | center | stretch;
}

.container {
  align-items: start | end | center | stretch;
}

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

.container {
  grid-auto-columns: 60px;
}

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Float

div{
  float: left;
  float: right;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facere corporis, modi dolorem ullam obcaecati sed odio culpa nemo inventore, impedit ipsum hic magnam doloribus illum ipsa ea optio aliquam eos suscipit molestiae accusamus quibusdam? Maxime mollitia velit asperiores quisquam dolor, eum pariatur cum obcaecati minima ducimus sint beatae nesciunt, dignissimos unde cupiditate! Impedit totam cumque, facilis libero quaerat at molestiae fugiat odio consectetur adipisci voluptates ex omnis minus minima temporibus sed soluta blanditiis reiciendis illum qui commodi laborum! Hic.

Pseudo-Klassen

p:hover {}

input:focus {}

p:first-child {}

a:active {}

:not(p) {}
  
a:visited {}

Hover Me

style.css

.footer-content p:nth-of-type(2){
  flex-grow:1;
}

nav a:hover{
  background: #1e64e2;
}

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://bilder.html

Doofenshmirtz Evil Incorporated

Bildergalerie

Pseudo-Elemente

div::before {}

div::after {}
                      
::selection {}

::root{}

.watchthis::before, watchthis::after {
  content: 'before';
  background: yellow;
}
.watchthis::after {
  content: 'after';
}
.watchthis::selection {
  color: #89adf8;
  background: #484654;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias doloremque consequuntur quisquam quia ea est quae blanditiis dolor sunt sed exercitationem accusamus itaque explicabo provident ipsam doloribus dolore, minus hic.

Doofenschmirtz Evil Inc.

Preise - Doofenschmirtz Evil Inc.

Bilder - Doofenschmirtz Evil Inc.

file://bilder.html

Doofenshmirtz Evil Incorporated

Bildergalerie

Once upon a time i was falling in love, but now i'm only falling apart Die Europäische Union

We are anonoymous. We are legion. We don not forgive. We do no forget. Expect us. Das Finanzamt

Liebe deinen Nächsten wie dich selbst. Kurt Cobain

Guten Freunden gibt man ein Küsschen Judas

Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde. Silvio Berlusconi

Von Mensch zu Mensch Heckler und Koch

Wenn man ein 0:2 kassiert, dann ist ein 1:1 nicht mehr möglich Satz des Pythagoras

index.html

<html>
  ...
  <body>
    <main>
      ...
      <blockquote>
      Von Mensch zu Mensch
      <cite>Heckler und Koch</cite>
      </blockquote> 
      ...
    </main>
    <footer>...</footer>
  </body>
</html>

style.css

blockquote {
  margin: 0;
  padding: 0.5rem 0 0.5rem 2.5rem;
  position: relative;
  min-height: 2rem;
}

blockquote::before{
  content: '“';
  font-size: 4rem;
  font-family: 'Georgia', serif;
  color: rgba(0,0,0,0.6);
  position: absolute;
  top: 0;
  left:0;
}

index.html

<html>
  ...
  <body>
    <main>
      ...
      <blockquote>
      Von Mensch zu Mensch
      <cite>Heckler und Koch</cite>
      </blockquote> 
      ...
    </main>
    <footer>...</footer>
  </body>
</html>

style.css

blockquote cite{
  display: block;


}
blockquote cite::before{
  content: '-';
  display:inline-block;
  margin: 0 0.5rem 0 0;
}

Übergänge

-prefix- (-webkit-)

div{
  transition: all 0.5s ease-in-out 0.3s;
  transition: property duration timing-function delay;
}

Hover Me

Media Queries

@media not|only mediatype and (expressions) {
    CSS-Code;
}

@media screen and (min-width: 480px) {
  p {
    color: pink;
  }
}

Hilfreich

W3Schools CSS Reference

CSS-Tricks

HowToWeb 3 KaraBeNemsi

Git, HTML und CSS

Die Mission: Ein Imperium aufbauen

Norm

Vanessa

git

Quellcodeverwaltung

1. New tool, who dis?

Arbeit suchen

3. Repo lokal clonen

4. Imperiumsplan ausarbeiten

5. Sich festlegen

7. Zum Server senden

8. Updates von Masterserver holen

Die Mission: Imperium ausweiten

Plan kopieren

Masterplan abholen

Eigene Vorschläge vorbereiten

Eigene Vorschläge erarbeiten

masterplan.json

Committen

Zum Master senden

Änderungen zusammenführen

Fehler ausmerzen

Plan kopieren

Plan abrufen

Merge versuchen

Konflikt lösen

Git Services

Bitbucket.org

Gitlab.com

GitHub.com

Gogs.io

Git tools

Sourcetree

Github Desktop

Gitkraken

HTML

Das Grundgerüst des Internet

www.doofenschmirtz.evil

Was brauchen wir eigentlich?

Grundgerüst

Was ist HTML?

HyperText - Markup - Language

Textauszeichnung

<h1>ÜBERSCHRIFTEN</h1>

Erstmal Speichern

<p>Absätze</p>

<ul>Listen</ul>

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Weitere Erfindungen

Organistion

Dateistruktur

Konventionen

Tags und Attribute klein schreiben

Element mit 2 Leerzeichen einrücken

CSS

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Weitere Erfindungen

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Weitere Erfindungen

style.css

Doofenshmirtz Evil Incorporated

Erfindungen (chronologisch)

Weitere Erfindungen

CSS-Anweisung

style.css

index.html

preise.html

bilder.html

CSS Cascading Style Sheets

Einbinden

Inline

Stylesheet im Head

Externes Stylesheet

Import im Stylesheet

Kombinatoren

HowToWeb 3
KaraBeNemsi