Handbuch

Html <head><style>

8. Juli 2025
PRH - private Hub
Html

Falls im Text selbst keine Html Befehle verwendet werden,

wird der <Head><style> Bereich benutzt. D.h. das ganze Html Dokument folgt dieser Deklaration.

Inaktive Zeilen werden im Editor mit ; auskommentiert.

Um Texte im Bild abzudecken, wird die class="img_container" verwendet.

<!DOCTYPE html>       Schema - html base -> emmet abbrev.
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>  

body {font-family:Segoe UI;font-size:90%;background-color: aliceblue;}

   header / paragraph

h1 {color: red;}

h2 {color: green;}

p {color: blue;}

img {opacity: 0.5;} transparency. The lower, the more transparent 

   Container holding the image and the text

.img_container {

 position: relative; absolute;

text-align: center; left;

top: 20px; left: 16px; width: 300px; heigth: 300px;

 font-size:22px;

 color: black;}

   Text in image

.top {position: absolute; top: 30px; left: 16px;}

.bottom {position: absolute; top: 80%; left: 250px;}

.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

  </style>
 </head>
 <body>

<div class="img_container">

<img src="danke10.png" alt="No img" style="width:30%;">

<div class="top">top text</div>

<div class="bottom">bottom text</div>

<div class="centered">center text</div>

</div>

<picture>

 <img src="https://appdata.inpha.ch/relative to url.jpg"

      alt="No img"  {alternate text, if for some reason img cannot be displayed}

style="width:auto;"> 

</picture>

<picture>

  <img src="doc and img in same path.png" style="width:50%;"> 

</picture>

 </body>
</html>

<Head><style> template

; body {font-family:verdana;font-size:12px;}
body {font-family:Segoe UI;font-size:90%;background-color: aliceblue;margin: 18px;}
h1 {color: red;}
h2 {color: green;}
p {color: blue;}
; img {opacity: 0.5;} transparency. The lower, the more transparent  

; Container holding the image and the text
.img_container {
 position: relative;
; position: absolute;
; text-align: center;
 text-align: left;
; top: 20px; left: 16px; width: 300px; heigth: 300px;
; left: 40px;
 left: 5%;
; width: 20%; img passiert nicht hier
 font-size:22px;
 color: white;}
; color: black;}
; TEXT in Img
.top {
 position: absolute; top: 15%; left: 3%;}
; position: absolute; top: 30px; left: 30px;}
.bottom {
 position: absolute; top: 75%; left: 3%;}
.centered {
 position: absolute; top: 50%; left: 25%;
 transform: translate(-50%, -50%);}