HTML, CSS und PHP Testseiten

HTML und CSS

Eine Webseite entsteht im Zusammenspiel von HTML als Auszeichnungssprache und CSS als Formatierungssprache. Diese Webseite verwendet das HTML Grundgerüst in Verbindung mit einem Gridsystem für die Anzeige bis/ab 900px Bildschirmbreite.

Im Dokumentenkopf sind alle wichtigen Angaben enthalten. Dazu gehören der Titel der Webseite, einige Metaangaben sowie die Style Formaterierungen oder die direkte Verlinkung auf die CSS Datei mit den Formatierungsanweisungen. Bis auf den Titel, der im Browserfenster angezeigt wird, können alle anderen Angaben nur mit Hilfe der Quelltextansicht sichtbar gemacht werden.

Der Inhaltsbereich gliedert sich in die Sektionen Kopfbereich, Navigation, Hauptinhalt, Seitenbereich und Fußbereich.

Die Anforderungen an das responsive Webdesign sind erfüllt. Die Webseite wird mit allen gängigen Browsern auf allen Endgeräten gleichermaßen gut lesbar dargestellt.

icon icon

HTML und CSS Grundgerüst

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
   <head>
      <title>Responsives Template zur Erstellung von Webseiten mit HTML und CSS</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="<!-- Inhaltsbeschreibung -->">
      <meta name="keywords" content="<!-- Schlagwörter -->">		
      <meta name="robots" content="index, follow">		
      <link rel="stylesheet" href="styles.css">
      <style> /* CSS Anweisungen */ </style>
   </head>

   <body>
body {
 margin: 0;
 font-size: 24px;
 font-family: standard
}

header {
   padding: 1em;
   color: orangered;
   text-align: center
}
nav {
   padding: 1em;
   color: dodgerblue;
   text-align: center
}
nav a {padding: 0 1em}
      <main>

         <!-- Inhalt -->
   
      </main>
main {text-align: left}
      <aside>

         <!-- Extra -->
         
      </aside>
aside {
   color: limegreen; 
   font-size: 0.9em
}
footer {
   color: white;
   background: orangered
}
footer div {
   display: inline-block;
   max-width: 15em;
   vertical-align: top
}

.top {
   position: fixed;
   top: 50%;
   right: 0;
   padding: 6px;
   background: orangered;
   list-style: none
}

   </body>
</html>

HTML und CSS Gridsystem

Kopfzeile
<header> Navigation <nav> Hauptinhalt <main> Seitenbereich
<aside> Fußzeile <footer>  

Schematische Darstellung

@media only screen and (min-width: 900px) {
	
   header {grid-area: header}	
   nav {grid-area: nav}	
   main {grid-area: main}	
   aside {grid-area: aside}
   footer {grid-area: footer}
   	
   body {
      display: grid;
      grid-template-areas:
         "header nav nav"
         "main main aside"
         "footer footer footer";
      height: 100vh;
   }

   .flex  {
      display: flex;
      align-items: start;
      justify-content: space-around;
      flex-wrap: wrap:
      column-gap: 1em
   }
	
   .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      row-gap: 1em;
      column-gap: 1em
   }
   
}

Anker und Links

Ein Link.

Ein <a href="#ziel">Link</a>.
a {
   border-bottom: 1px dotted;
   color: inherit;
   text-decoration: none
}
			
a:hover {border-bottom-style: solid}

Das Ziel.

<p id="ziel">Das Ziel.</p>

Durch die Formatierung mit color: inherit wird die Schriftfarbe direkt vom Elternelement übernommen. Das Gleiche gilt für die Farbe der Unterstreichung.

Zitat im Block

Man reist ja nicht, um anzukommen, sondern um zu reisen.

Goethe über das Reisen.

<blockquote cite="https://blog.klassik-stiftung.de/man-reist-ja-nicht-um-anzukommen/"><p>Man reist ja nicht, um anzukommen, sondern um zu reisen.</p></blockquote>
blockquote {
   margin: 0.5em auto;
   border-left: 3px solid;
   padding: 0.5em 0 0.5em 1em;
   color: white;
   background: black;
   max-width: 40em;
   quotes: "\201C""\201D"
}
blockquote:before {
   content: open-quote;
   margin-right: 0.25em;
   color: orangered;
   font-size: 3em;
   line-height: 0.1em
}
blockquote p {display: inline}

Siehe auch Zitate im Text.

Definitionsliste

Begriff
Definition
<dl>
   <dt>Begriff</dt>
   <dl>Definition</dl>
</dl>
dl {
   margin: 0.5em auto;
   max-width: 40em
}
dt {font-weight: bold}
dd {margin: 0}

Bild

Drillmaschine 
<img src="drille.jpg" title="HEGE 80 Drille" alt="Drillmaschine">
img{
   max-width: 100%;
   height: auto
}

Das Bild wird höchstens in Originalgröße angezeigt und durch Verwendung der automatischen Höhe perfekt skaliert.

Drillmaschine

<a href="drille.jpg"><img src="drille.jpg"  title="HEGE 80 Drille" alt="Drillmaschine"></a>
a:hover img {opacity: 0.7}

Das Bild ist in einem Link eingebettet. Nach Klick wird es so groß wie möglich im Browser-Fenster dargestellt.

Liste (nummeriert)

  1. HTML
  2. CSS
  3. PHP
<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>PHP</li>
</ol>
ol {
   margin: 0.5em auto;
   max-width: 40em
}

Siehe auch unsortierte Liste.

Textabsatz

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

Egestas erat imperdiet sed euismod nisi porta.

<p>Lorem ipsum ...<p/>
<p>Egestas erat ...<p/>
p {
 margin: 0.5em auto;
 padding: 0.5em 1em;
 max-width: 40em;
 line-height: 1.3em
}

Zitate im Text

Ein Zitat.

Ein <q><!-- Zitat --></q>.
q {font-style: italic}
q::before {content: "\201C"}
q::after {content: "\201D"}

Siehe auch Zitate.

Textstellung (hoch, tief)

	
<sup><!-- hoch --></sup>

<sub><!-- tief --></sub>

Tabelle

Anteile Stormerzeugung (Deutschland 2021)
Energieträger Mrd. kwh Prozent Grafik
Quelle: Statistisches Bundesamt
Kohle 156 30%
Kernenergie 65 13%
Erdgas 65 13%
Windkraft 111 21%
Biogas 30 6%
Photovoltaik 45 9%
Wasserkraft 18 4% 
<table>
   <caption>Tools zur Webseitenerstellung</caption>
   <thead>
      <tr>
         <th>Tool</th>
         <th>Verwendung</th>
         <th>Beispiel</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td colspan="3">© lektion1.de</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>HTML</td>
         <td data-label="Verwendung:">Auszeichnung</td>
         <td data-label="Beispiel:"><code><em>wichtiger Text</em></code></td>
      </tr>
      <tr>
         <td>CSS</td>
         <td data-label="Verwendung:">Formatierung</td>
         <td data-label="Beispiel:"><code>em {color: red}</code></td>
      </tr>
      <tr>
         <td>PHP</td>
         <td data-label="Verwendung:">Programmierung</td>
         <td data-label="Beispiel:"><code><?php echo "PHP"; ?></code></td>
      </tr>
   </tbody>
</table>
caption {
   margin-bottom: 0.5em;
   font-weight: bold
}

table {	
   margin: 0.5em auto;
   border-collapse: collapse;
   width: 100%; /* Spaltenbreite */
   text-align: left;
   table-layout: fixed;
   box-sizing: border-box;	
   word-wrap: break-word;
   hyphens: auto;
}

td {padding: 6px}
td:before {
   display: inline-block;
   content: attr(data-label);
   margin-right: 0.5em;
   font-weight: bold
}
td:first-of-type {font-weight: bold}
td:first-of-type:before {content: "\279C"}

tfoot {font-size: 0.8em}

th {font-weight: bold}
th:first-of-type {background: orangered}

tr {margin-bottom: 1em}

@media screen and (max-width:899px) {
	
   th, thead {display: none}
   tr, td {display: block}
	
}

@media only screen and (min-width: 900px) {
   
   table {text-align: center}
	
   td:before {display: none}
   td {
      border: 1px solid black;
      border-collapse: collapse;
      box-sizing: border-box
   }
   td:first-of-type {background: white}	

   th {
      border: 1px solid black;
      border-collapse: collapse;
      box-sizing: border-box
   }
   th:first-of-type {background: white}
	
   tr {margin-bottom: 0}	
}

Liste (ungeordnet)

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>PHP</li>
</ul>
ul {
   margin: 0.5em auto;
   max-width: 40em
}

Siehe auch nummerierte Liste.

Klassen

Eine wichtige Infomation und eine Warnung.

  • Negativ
  • Positiv
<ul>
   <li class="info">Information</li>
   <li class="neg">Negativ</li>
   <li class="pos">Positiv</li>
   <li class="warn">Warnung</li>
</ul>
.info {list-style-type:none}
.info:before {content:"\2139\00A0\00A0"}

.neg {list-style-type:none}
.neg:before {content:"\0020\2212\0020"}

.pos{list-style-type:none}
.pos:before {content:"\0020\002b\0020"}

.warn{list-style-type:none}
.warn:before {content:"\26A0\00A0\00A0"}

Kommentare

Schreibe den ersten Kommentar

Deine Nachricht

Deine Angaben





Deine Auswahl

Verschicken ✉
➜