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

HTML5 - szkielet strony internetowej

Tagi: HTML5, strona internetowa

Maciej Skrzypczak

Rozpoczynam od zbudowania struktury strony internetowej przy pomocy kodu HTML5. Przygotowujemy nagłówek, logo i menu, stopkę oraz rozmieszczamy bloki treści, listy, tabele, odnośniki i zdjęcia. Załączamy style dopasowujące wygląd, dodatkowe czcionki oraz skrypty zapewniające dynamiczną interakcje z użytkownikiem.

<!DOCTYPE html>
Ustawienie strony jako polsko języcznej ( 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" />

Opis dla wyszukiwarek oraz sieci społecznościowych

Wcześniejsze rozwiązanie nazwy domeny:
<link rel="dns-prefetch" href="http://fonts.googleapis.com" />

Wcześniejsze pobranie podstron z menu:
<link rel="prerender" href="Odnośnik 1 do podstrony z menu">
<link rel="prerender" href="Odnośnik 2 do podstrony z menu">

Dopasowanie widoku do telefonów komórkowych i tabletów:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

<link href="odnośnik do zdjęcia ikony" rel="shortcut icon" type="image/ico" />

Pobranie dodatkowych czcionek ze zbioru fonts.google.com:
<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">

Załadowanie stylu do zaprogramowania dopasowania do telefonów komórkowych i tabletów (getbootstrap.com):
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
Załadowanie stylu do zaprogramowania wyglądu:
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />

Skrypt poprawiający działanie strony w starszych przeglądarkach:

<!--[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">

Nagłówek strony internetowej:
<HEADER class="separate" itemscope itemtype="http://schema.org/WPHeader">
Dodanie logo:
<a href="odnośnik do strony głównej" title="opis odnośnika logo"><img src="odnośnik do zdjęcia logo" alt="opis logo"></a>
Dodanie menu:
<NAV role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="Odnośnik 1 do podstrony z menu" title="Podstrona 1">Podstrona 1</a></li>
<li><a href="Odnośnik 2 do podstrony z menu" title="Podstrona 2">Podstrona 2</a></li>
</ul>
</NAV>
</HEADER>

<div>
Główny blok z treścią:
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Nagłówek strony</h1>
<p>Opis
Dodanie odnośnika do treści:
<a href="link do strony" title="opis linku"></a>
Dodanie zdjęcia do treści:
<img src="odnośnik do zdjęcia" alt="opis zdjęcia" />
Dodanie listy nieuporządkowanej do treści:
<ul>
<li>nazwa elementu 1</li>
<li>nazwa elementu 2</li>
</ul>
Dodanie tabeli do treści:
<table>
<thead>
<tr>
<th>nazwa nagłówka kolumny 1</th>
<th>nazwa nagłówka kolumny 2</th>
</tr>
</thead>
<tbody>

<tr>
<td>nazwa elementu kolumny 1</td>
<td>nazwa elementu kolumny 2</td>
</tr>
</tbody>
</table>
</p>
</article>
Boczny pasek z dodatkową treścią:
<aside>
<p>Dodatkowy opis</p>
</aside>
</div>

Stopka strony internetowej:
<FOOTER itemscope itemtype="http://schema.org/WPFooter">
<p>Copyright &copy; 2015</p>
</FOOTER>

Załadowanie stylu do zaprogramowania ikon (fontawesome.io):
<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="screen" />
Załadowanie stylu do zaprogramowania animacji (daneden.github.io/animate.css):
<link href="/css/animate.min.css" rel="stylesheet" type="text/css" media="screen" />

Załadowanie skryptów bibliotek:
<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>

Załadowanie skryptu do zaprogramowania elementów dynamicznych:
<script src="/js/script.js" type="text/javascript" charset="utf-8"></script>

</body>
</HTML>


Współpracowałem

  • rzeczpospolita
  • uniwersytet-warszawski
  • parkiet
  • plk
  • qualitysolicitors
  • espeo
  • slik
  • dupont-tyvek
  • ekiosk
  • sigma
  • emma
  • caselogic
  • gusmahome
  • oltravel
  • laszkiewicz
  • stilnovisti
  • digimania
  • bong
  • wdf
  • mgfinance
  • tam-pol
  • stage-vision
  • bestpharma
  • ipgo