Schrittweise Entwicklung eines neuen Web-Auftrittes

In HTML5

Date of : 2022-01-05

Tag
HTML-Code
.html
Kommentar
Style-Sheet
.css
Kommentar
Benutzes Tool: Visual Studio Code
Tag: 1
Sa: 2022-01-01
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Martin Habenicht - Mechatronic</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="description" content="Martin explains how things work!">
        <meta name="author" content="Martin Habenicht">
        <meta name="copyright" content="Martin Habenicht">
        <meta name="keywords" content="Mechatronic, Arduino, ESP32, Microchip">
        <link rel="stylesheet" href="MainStyleHaben.css">
    </head>

    <body>
        <header>
            <h1>Webseite von Martin Habenicht</h1>
        </header>
        <h1>Projekt 1</h1>
        <section id="main">
            <article>
                <h2>Wir bauen eine Web-Seite mit HMTL5</h2>
                <p>Wir starten mit einem Grundgerüst (Tag 1) und erweitern die Web-Seite jeden Tag um neue Funktionen oder neue Beiträge</p>
                <p>
                    Während der Entstehungsphase des neuen Web-Auftrittes, kann mit diesem Link die alte Web-Seite aufgerufen werden:
                    <li><a href="oldSite.html">Alte Webseite: bis und mit 2021</a></li>
                </p>
                <p>
                    Hier ist die Erzeugung der neuen Web-Seite Schritt für Schritt erklärt:
                    <li><a href="genesis.html">GENESIS</a></li>
                </p>
            </article>
        </section>
        <footer>
            <h3>TAG 1: 2022-01-01</h3>
        </footer>
    /body>
</html>

Zipped source code: index_day1.zip

Grobstruktur:

- Header für responsive Design vorbereitet,
- Tags vorbereitet!

/* body */
body {
    background: #dfdfdf;
    font-size: 100%;
    margin: 0em;
    padding: 0em
}

Zipped source code: MainStyleHaben_day1.zip

Hintergrund:
per .css formatieren

background: #dfdfdf; // Grauer Hintergrund
font-size: 100%; // Standardschriftgrösse, abhängig vom Gerät (PC, Mobile...)
margin: 0em; // Keine Abstände von aussen
pagging: 0em; // Innen auch keine Abstände


// em = 1em entspricht der Schriftgrösse und ist abhängig vom Gerät/Browser, auf Windows PC = 16 pixel

Screen-Shot von obigem Text von Anzeige in Edge-Browser

Tag: 2
So: 2022-01-02

<section id="menubar_ot">
    <ul>
        <li><a class="menubutton" href="#"><img src="images/Pictogram_Batman.svg"></a></li>
        <p>Provisorisches Piktogramm</p>
    </ul>
</section>

Ganz oben eine Menüleiste hinzufügen

- Struktur vorbereiten für weitere Funktionen
  2 mal verschachelt:
    <section></section> und
    <ul> und </ul>
- Bild einfügen
  (Anklickbar, Ziel: home)
- Provisorisches Bild
  (hier eine .svg-Datei)

/* common tags */
h1 {
    font-size: 2.5em;
    line-height: 2.8em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    margin: 0em;
}

/* On Top Bar */
#menubar_ot {
    display: block;
    background: #F0F0F0;
}

Header "h1"
per .css formatieren

font-size: 2.5em; // Schriftgrösse 2.5 mal 16 pixel = 40 pixel
line-height: 2.8em; // Linienanbstand 2.8 mal 16 pixel = 44.8 pixel
font-family: Arial, Helvetica, sans-serif; // Prio in dieser Reihenfolge
font-weight: 900; // 100...1000 = narrow...extrabold
margin: 0em; // keine äusseren Abstände

#menubar_ot
per .css formatieren

display: block; // Ausrichtung über die ganze Blockbreite(hier Seite)
background: #F0F0F0;; // Heller Hintergrund für On-Top-Menü

<img src="images/Glueck2022-4.jpg" alt="Happy New Year!">

Zipped source code: index_day2.zip

Noch ein Bild in den Hauptblock (Main) einfügen:

- Einfach eine Zeile zwischen Überschrift und Fliesstext einfügen
- Dieses Bild ist nicht verknüpft

/* common tags */
img {
    width: 90%;
    height: auto;
    max-width: 100%;
}

Zipped source code: MainStyleHaben_day2.zip

Bild "img"
per .css formatieren

width: 90%; // Bildbreite auf 90% des Blockes (dynamisch)
height: auto; // Bildhöhe direkt propotional zur Breite
max-width: 100%; // Das Bild darf nicht grösser als der Block werden

Screen-Shot von obigem Text von Anzeige in Edge-Browser

Tag: 3
So: 2022-01-03
alt
<li><a class="menubutton" href="#"><img src="images/Pictogram_Batman.svg"></a></li>

neu:
<li><a class="menubutton" href="#"><img src="images/Logo_MH_M.gif"></a></li>

Zipped source code: index_day3.zip
Anleitung zum selber erzegen von animierten GIF's: Animated GIF

Filenamen der Anzeige Menubutton austauschen

Mit Adobe Illustrator und Adobe Photoshop haben wir ein animiertes .GIF erzeugt
Alter Name: "Pictogram_Batman.svg", neuer Name: "Logo_MH_M.gif"

/* On Top Bar */
#menubar_ot {
    display: block;
    background: #F0F0F0;
}

#menubar_ot ul {
    display: block;
    width: 12em;
    padding: 0.9em;
}

#menubar_ot ul li {
    display: inline;
}

#menubar_ot und Tochter-Casts
per .css formatieren

display: block; // Ausrichtung über die ganze Blockbreite(hier Seite)
background: #F0F0F0;; // Heller Hintergrund für On-Top-Menü


display: block; // Ausrichtung über die ganze Blockbreite(hier Seite)
width: 12em; // Optimale Grösse per Try&Error suchen
padding: 0.9em; // Innerer Abstand 14.4 pixel


display: inline; // Wenn später mal mehrere Elemente vorhanden sind,
werden diese nebeneinander angezeigt,
sobald das Fenster zu schmal wird, aber untereinander!

    /* header */
header {
    display: block;
    background: #2F2C2C;
    text-align: center;
}

header h1 {
    font-size: 4em;
    font-family: 'Bauhaus 93', 'Forte', Arial, Helvetica, sans-serif;
    color: #E2DBDB;
}

Zipped source code: MainStyleHaben_day3.zip

header und Tochter-Casts
per .css formatieren

display: block; // Ausrichtung über die ganze Blockbreite(hier Seite)
background: #2F2C2C; // Hintergrundfarbe "Antrazit mit Braunstich
text-align: center; // Text ausgemittet

Wir haben jetzt 2 Definitionen für <h2>, hier gilt das Vererbungsprinzip;
Formatierungen von <h2> gelten für beide.
Formatierungen von <header h2> gelten nur für die Tochterelemente.
Formatierungen von <header h2> können Formatierungen von <h2> überschreiben!

font-size: 4em;; // Textgrösse 4 x 16px = 64 Pixel
font-family: 'Bauhaus 93', 'Forte', Arial, Helvetica, sans-serif; // Wahl der Schrift*
color: #E2DBDB; // Textfarbe "Gebrochenes Weiss"

* Schriften (Fonts) können mit Kommas getrennt aufgelistet werden.
Die Reihenfolge gilt als Prioritätsliste.
Ist die erste Schrift auf dem System installiert, wird die erste Schrift benutzt.
Ist die erste Schrift auf dem System nicht installiert, wird die zweite Schrift benutzt, usw.
Aus ästetischen Gründen sollten nur ähnliche Schriften angegeben werden
Wir haben jetzt "exotische" Schriften an den Anfang gesetzt,
damit wir das Verhalten auf unterschiedlichen Systemen testen können(das ändern wir später noch).

Screen-Shot von obigem Text von Anzeige in Edge-Browser

Tag: 4
Sa: 2022-01-04
<footer>;
    <h3>TAG 4: 2022-01-04</h3>
    <b>Copyright ©2022</b>
    <b>Martin Habenicht</b>
    <b><a href="mailto:martin@habenicht.ch?Subject=Feedback from Start-Page">E-Mail</a></b>
</footer>


Zipped source code: index_day4.zip

Neuer Footer:

- Wir erfinden einen neuen Cast<b> für Block
-Im .css können wir damit die dynamische Darstellung erzeugen (Responsive)

/* footer */
footer {
    background-color: #bbbbaa;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
}


footer b {
    color: darkgreen;
    display: inline-block;
    margin: 0em 20em 1em 0em;
}


footer h3 {
    font-size: 2em;
    padding-top: 1em;
}

Zipped source code: MainStyleHaben_day4.zip

Footer:
per .css formatieren

footer:

background-color: #bbbbaa; // hell mit leichten Grünstoch
font-family: Arial, Helvetica, sans-serif; // Schrift
display: block; // Ausrichtung über die ganze Blockbreite(hier Seite)

footer b:


color: darkgreen; // Schriffarbe = dunkelgrün
display: inline-block; // Die Blöcke zusammenhalten - kein Zeilenumbruch
margin: 0em 20em 1em 0em; // Abstände links = 0, rechts = 20 x 16 px, oben = 16 px, unten = 0

footer b h3: eigene footer-Definition für <h3>


font-size: 2em; // Fontgrösse = 2 x 16 pixel
pagging-top: 1em; // Abstand innerhalb des Blockes 16 pixel

Screen-Shot von obigem Text von Anzeige in Edge-Browser

large window medium window narrow window
Tag: 5
Sa: 2022-01-05
alt:
<img src="../images/Motor-Generator_019.png" alt="Happy New Year!">
neu:
<img src="../images/Motor-Generator_019.png" alt="Happy New Year!">

Zipped source code: index_day5.zip

Neues Bild:

- Skizze einscannen und in Photoshop öffnen.
-Beschneiden und als ".png" abspeichern

Zipped source code: MainStyleHaben_day4.zip Nichts geändert!

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5