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
|
[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:
1 2 3 4 5 6 7 8 9 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:
1 2 3 4 5 6 7 8 9 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>
|
|
|