Przykłady HTML & CSS

Struktura strony (HTML)

<header>
    <div class="wrapper"></div>
</header>
<main> <div class="wrapper"></div> </main>
<footer> <div class="wrapper"></div> </footer>

Wielopoziomowa lista wypunktowana (HTML)

<nav>
    <ul>
<li>Samochody
<ul>
<li>Osobowe</li>
<li>Ciężarowe</li>
</ul> </li> </ul> </nav>
  • Samochody
    • Osobowe
    • Ciężarowe

Stopka strony (HTML)

<p>&copy; 2018 Projekt Edukacja</p>

© 2018 Projekt Edukacja

Artykuł (HTML)

<article>
<header>
<h1>Nagłówek</h1>
<p>Akapit</p>
</header>
<section>
<h2>Nagłówek</h2>
<p>Akapit</p> </section> <section>
<h3>Nagłówek</h3>
<p>Akapit</p> </section>
</article>

Nagłówek

Akapit

Nagłówek

Akapit

Nagłówek

Akapit

Link do strony (HTML)

<a href="https://www.facebook.com">Facebook</a>

Zdjęcie na stronie (HTML)

<img src="images/steve.jpg" alt="Steve"/>
  • images/ - nazwa folderu
  • steve.jpg - nazwa pliku

Zdjęcie Steve'a z gry Minecraft

Menu z listy nienumerowanej (HTML + CSS)

<nav class="main-menu clearfix">
    <ul>
<li class="top-logo"><a href="index.html">Logo</a></li> <li class="top-menu">
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul> </li> </ul> </nav> <style> .top-logo { float: left; width: 20%; } .top-menu { float: left; text-align: right; width: 80%; } ul { list-style: none; padding:0; } ul li { display: block; } ul ul li{ display: inline; } .main-menu a { border: 2px solid red; border-radius: 30px; color: red; padding: 8px 24px; text-decoration:none; } .main-menu a:hover { background-color: red; color: white; transition: 1s; } .clearfix { zoom: 1; } .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; } </style>

Tło strony (HTML + CSS)

<div class="bg">
	<h1>Colorful picture</h1>
	<p>Zdjęcie jako tło kontenera DIV</p>
</div>

<style>
.bg {
	background-image: url('steve.jpg');
	background-position: center;
	background-size: cover;
	color: white;
	padding: 64px 0;
	text-align:center
}
</style>

Colorful picture

Zdjęcie jako tło kontenera DIV

Warstwy (HTML + CSS)

<div class="rel">
	<img src="steve.jpg" class="abs steve1" />
	<img src="steve.png" class="abs steve2" />
</div>

<style>
	.abs{position: absolute;}
	.rel{position: relative;}
	.steve1{top:100px;z-index:-1;}
	.steve2{left: 50px;z-index:0;}
</style>
Steve Steve

Zdjęcie zaokrąglone (HTML + CSS)

<p><img src="steve.jpg" class="circle" /></p>

<style>
	img.circle {
		border: 4px solid black;
		border-radius: 300px;
	}
</style>

Steve