HTML5 / szkielet strony internetowej
Tagi: HTML5, strony www, programowanie
iREBU Specjalista WordPress
Autor: Maciej Skrzypczak
WordPress / Hosting / Pozycjonowanie / Seo
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&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" />
<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 © 2024</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>
POLECANE / Nowoczesne strony WWW HTML5 CSS3 Adobe Muse Wordpress
Więcej informacji można znaleźć na naszym kanale Facebook i Instagram.
