[Übersicht]
Tutorials > HTML > HTML 5 Grundgerüst  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

Eine Internetseite zu erstellen ist eigentlich kinderleicht.
Dazu muss nur der Windows-Texteditor geöffnet und einen der Beispielcodes reinkopiert werden.
Dann lässt sich die Datei Speichern unter "Homepage.html", also das *.txt einfach überschreiben.
Nun sollte am Speicherort die Internetdatei erscheinen, die sich mit einem Browser öffnen lässt.

Zum nachträglichen Bearbeiten kann die Datei wieder mit dem Windows-Texteditor geöffnet werden.
Rechtsklick -> "öffnen mit" -> "Editor" oder mit einem Editor der eigenen Wahl.
Den Quelltext kann man sich im Browser anzeigen lassen unter "Ansicht" -> "Quelltext" (je nach Browser).

Das war es auch schon. Hier zuerst ein HTML-Code ohne jegliche Formatierungen:










10 
11 
12 
13 
14 
15 
16 
17 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Meine erste Homepage</title>

<meta charset="utf-8">
</head>
<body>

<h1>Name oder z.B. ein Logo</h1>

<h3>Ein Artikel:</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br><br><br>

</body>
</html>


Diese Seite zeigt den kleinen Artikel bereits an.
Ein paar Abgrenzungen zwischen Kopf, Navigation, Inhalt und Footerbereich sind allerdings besser.
Nun ein beispielhafter HTML-Code mit diversen minimalistischen Formatierungen:










10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Meine erste Homepage</title>

<meta charset="utf-8">

<meta name="Description" content="Meine erste Homepage, hier gibt es folgendes...">
<meta name="Keywords" content="Meine, wichtigsten, Suchbegriffe">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<header role="banner">
<h1>Name oder z.B. ein Logo</h1>
</header>

<nav role="navigation" style="width: 100%; background-color: #336699; color: #FFFFFF;">
<br>Der Bereich einer Navigationsleiste...<br><br>
</nav>

<br>

<main role="main">
<article>
<h3>Ein Artikel:</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br><br><br>
</article>
</main>

<footer role="contentinfo" style="width: 100%; background-color: #DCDCDC; text-align: center;">
<br>Footer mit Links zum Impressum, Datenschutz usw.<br><br>
</footer>

</body>
</html>