Pomagam dzieciom!

HTML5 - szkielet strony internetowej

HTML5 - szkielet strony internetowej

Tagi: HTML5, programowanie, strony www

iREBU Specjalista WordPress

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&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="https://irebupl.b-cdn.net/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
Załadowanie stylu do zaprogramowania wyglądu:
<link href="https://irebupl.b-cdn.net/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="https://irebupl.b-cdn.net/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="https://irebupl.b-cdn.net/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="https://irebupl.b-cdn.net/css/animate.min.css" rel="stylesheet" type="text/css" media="screen" />

Załadowanie skryptów bibliotek:
<script src="https://irebupl.b-cdn.net/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://irebupl.b-cdn.net/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://irebupl.b-cdn.net/js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://irebupl.b-cdn.net/js/jquery.touchSwipe.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://irebupl.b-cdn.net/js/jquery.transit.min.js" type="text/javascript" charset="utf-8"></script>

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

</body>
</HTML>

POLECANE / Nowoczesne strony WWW HTML5 CSS3 Adobe Muse Wordpress


Doświadczenie

Na rynku działam ponad 15 lat, zrealizowałem setki projektów. Przede wszystkim lubię swoją pracę, jest ona moją pasją.

Wiedza i innowacyjność

Nieustannie poszerzam swoją wiedzę i rozwijam umiejętności. W codziennym cyklu pracy nigdy nie może zabraknąć czasu na branżowe szkolenia czy konferencje, czytanie blogów oraz testowanie nowych rozwiązań.

Zaangażowanie

Powierzone mi zadania zawsze wykonuję rzetelnie i solidnie. Żadna aplikacja nie zostanie przeniesiona na docelowy serwer bez przejścia przez szereg testów. Błędy, oczywiście, zawsze mogą wystąpić, nie zaprzeczam im. Moim priorytetem jest szybkie i sprawne ich usunięcie.

Elastyczność

Kontakt możliwy również wieczorami i w weekendy. W awaryjnych sytuacjach, wykonuję ekspresowe zadania, także w trybie weekendowym, z krótkim terminem wykonania.

Referencje

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