Ich beginne mit dem Aufbau einer Internetseiten-Struktur mit HTML5-Code. Wir bereiten eine Überschrift, ein Logo und eine Menü, Fußzeile vor und stellen Inhaltsblöcke, Listen, Tabellen, Links und Fotos rein. Wir fügen Stils hinzu, die das Aussehen, die Schriftarten anpassen sowie zusätzliche Skripte, um eine dynamische Interaktion mit dem Benutzer zu sichern.
<!DOCTYPE html>
Einstellung der Seite als eine polnische Seite (pl-PL).
<HTML lang="pl-PL" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Optimierung für Suchmaschinen und soziale Netzwerke
Schnellere Auflösung von Domainnamen:
<link rel="dns-prefetch" href="http://fonts.googleapis.com" />
Schnellerer Unterseitendownload aus dem Menü:
<link rel="prerender" href="Link 1 for menu subpage">
<link rel="prerender" href="Link 2 for menu subpage">
Verweis 1 auf die Unterseite aus dem Menü:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link href="Verweis zum Icon-Foto" rel="shortcut icon" type="image/ico" />
Herunterladen weiterer Schriftarten aus der Sammlung fonts.google.com:
<link href="http://fonts.googleapis.com/css?family=Schriftartenname+1:400,700|Schriftartenname+2:400,700&subset=latin,latin-ext' rel="stylesheet" type="text/css">
Stilladung, um passende Programme für Handys und Tablets zu programmieren (getbootstrap.com):
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
Stilladung um das Aussehen zu programmieren:
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />
Skript zur Verbesserung des Internetseitenbetriebs in älteren Browsern:
- HTML5 Shiv (github.com/aFarkas/html5shiv),
- selectivizr (github.com/keithclark/selectivizr),
- respond (github.com/scottjehl/Respond).
<!--[if lt IE 9]>
<script src="/js/ie.min.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
</head>
<body itemscope itemtype="http://schema.org/WebPage">
Überschriften der Internetseite:
<HEADER class="separate" itemscope itemtype="http://schema.org/WPHeader">
Hinzufügung vom Logo:
<a href="Verweis auf die Hauptseite" title="Logo Verweisbeschreibung"><img src="Verweis auf das Logo Foto" alt="Logobeschreibung"></a>
Hinzufügung des Menüs:
<NAV role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="Verweis 1 auf die Unterseite aus dem Menü" title="Unterseite 1">Unterseite 1</a></li>
<li><a href="Verweis 2 auf die Unterseite aus dem Menü" title="Subpage 2">Unterseite 2</a></li>
</ul>
</NAV>
</HEADER>
<div>
Main content block:
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Website header</h1>
<p>Description
Adding a link to content:
<a href="link to a page" title="link description"></a>
Adding a picture to content:
<img src="link to a picture" alt="picture description" />
Adding an unstructured list to content:
<ul>
<li>element 1 name</li>
<li>element 2 name</li>
</ul>
Adding a chart to content:
<table>
<thead>
<tr>
<th>column 1 header name</th>
<th>column 2 header name</th>
</tr>
</thead>
<tbody>
<tr>
<td>column 1 element name</td>
<td>column 2 element name</td>
</tr>
</tbody>
</table>
</p>
</article>
Side bar with additional content:
<aside>
<p>Additional description</p>
</aside>
</div>
Website footer:
<FOOTER itemscope itemtype="http://schema.org/WPFooter">
<p>Copyright © 2015</p>
</FOOTER>
Implementing a style for programming icons (fontawesome.io):
<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen" />
Implementing a style for programming animations (daneden.github.io/animate.css):
<link href="/css/animate.min.css" rel="stylesheet" type="text/css" media="screen" />
Implementing libraries scripts:
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.touchSwipe.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.transit.min.js" type="text/javascript" charset="utf-8"></script>
Implementing a script for programming dynamic elements:
<script src="/js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</HTML>
