Web Development flat design illustration, Creative banner with laptop and computer screen showing app coding and programming.

HTML5 - a website framework

Tags: HTML5, websites

Maciej Skrzypczak

WordPress / Responsive Developer

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=nazwa+czcionki+1:400,700|nazwa+czcionki+2:400,700&amp;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:

<!--[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="Podstrona 1">Subpage 1</a></li>
<li><a href="Link 2 for menu subpage" title="Podstrona 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 &copy; 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>


Clients

  • play
  • plk
  • pkp-cargo
  • uniwersytet-warszawski
  • politechnika-poznanska
  • uniwersytet-adama-mickiewicza
  • termy-maltanskie
  • rzeczpospolita
  • v33
  • ferguson
  • unitra
  • wyzsza-szkola-urody-i-edukacji
  • wyzsza-szkola-handlu-i-uslug