I start with creating a website structure using HTML5 code. We prepare the headline, logo, menu, footer and we displace content blocks, lists, charts, links and pictures. We apply styles for a matching appearance, implement additional fonts, as well as scripts for dynamic interaction with the user.
<!DOCTYPE html>
Setting the website’s language as polish (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" />
Optimization for search engines and social networks
Earlier domain name solution:
<link rel="dns-prefetch" href="http://fonts.googleapis.com" />
Earlier downloading of subpages from the menu:
<link rel="prerender" href="Link 1 for menu subpage">
<link rel="prerender" href="Link 2 for menu subpage">
Adjusting the appearance to mobile phones and tablets:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link href="link to icon picture" rel="shortcut icon" type="image/ico" />
Downloading additional fonts from fonts.google.com collection:
<link href="http://fonts.googleapis.com/css?family=font+name+1:400,700|font+name+2:400,700&subset=latin,latin-ext' rel="stylesheet" type="text/css">
Implementing a style for programming to adjust to mobile phones and tablets: (getbootstrap.com):
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
Implementing a style for programming the appearance:
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />
A script for improving the website performance on older browsers:
- 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">
Website header:
<HEADER class="separate" itemscope itemtype="http://schema.org/WPHeader">
Adding a logo:
<a href="link to homepage" title="logo link description"><img src="link to logo picture" alt="logo description"></a>
Adding a menu
<NAV role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="Link 1 for menu subpage" title="Subpage 1">Subpage 1</a></li>
<li><a href="Link 2 for menu subpage" title="Subpage 2">Subpage 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>
