Tag
HTML-Code
.html
Kommentar
Style-Sheet
.css
Kommentar
Sa: 2022-01-01
<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 {
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
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)
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ü
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
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
So: 2022-01-03
<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"
#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 {
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
Sa: 2022-01-04
<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 {
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ünstochfont-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
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
