Wprowadzenie do HTML 5 – struktura i formatowanie

Edytor html Brackets

1. Szablon wordpress – zakładamy katalog z dwoma plikami: index.php, style.css i przenosimy na serwer do katalogu TEST

specyfikacja HTML 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Strona główna</title>
</head>
<body>
<p>Moja pierwsza strona</p>
</body>
</html>

specyfikacja HTML 5

<!DOCTYPE html>
<meta charset=utf-8">
<title>Strona główna</title>
<p>Moja pierwsza strona</p>

O znacznikach: http://www.poradnik-webmastera.com/polecenia/html/znaczniki/znacznik_doctype.html

2. Znaczniki <div>, <p> <h1>–<h6>

3. Definiowanie stylów:

<body style="background-color:red">
<div style="background-color:blue">
<p>Moja pierwsza strona</p>
<div>
</body>

4. Identyfikatory (id) i klasy (class) z zewnętrzynym plikiem css.

index.php

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body id="main">
<div class="content">
<p>Moja pierwsza strona</p>
</div>
</body>

style.css

#main {
 background-color:red;
}
.content {
 background-color:blue;
}

5. Formatowanie tekstu:

.content {
 background-color:blue;
 color:white;
 font-style:italic;
 font-variant: small-caps;
 font-weight:bold;
 font-size:1em;
 font-family: Arial;
}

lub

.content {
 background-color:blue;
 color:white;
 font: italic small-caps bold 1em Arial;
}

Właściwości fontów: http://www.w3schools.com/cssref/pr_font_font.asp

6. Marginesy:

margin-top:20px;
margin-right:50px;
margin-bottom:20px;
margin-left:50px;
lub
margin: 20px 50px 20px 50px;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
lub
padding: 10px 20px 10px 20px;

7. Wypunktowania i numeracja:

<ul>
 <li>pierwszy</li>
 <li>drugi</li>
 <li>trzeci</li>
</ul>
<ol>
 <li>pierwszy</li>
 <li>drugi</li>
 <li>trzeci</li>
</ol>

z formatowaniem:

<div class="numer">
<ul>
 <li>pierwszy</li>
 <li>drugi</li>
 <li>trzeci</li>
</ul>
</div>

<div class="pkt">
<ol>
 <li>pierwszy</li>
 <li>drugi</li>
 <li>trzeci</li>
</ol>
</div>

i plik css:

.numer {
   background-color:yellow;
   color:black;
   font: italic small-caps bold 1em Arial;
   margin: 20px 50px 20px 50px;
   padding: 10px 20px 10px 20px;
 }
 
 .pkt {
   background-color:green;
   color:white;
   font: italic small-caps bold 1em Arial;
   margin: 20px 50px 20px 50px;
   padding: 10px 20px 10px 20px;
 }

8. Tabele

<div class="tabela">

 <table align="center" style="width: 100%">
 <tr>
 <td>I komórka</td>
 <td>II komórka</td>
 </tr>
 <tr>
 <td>III komórka</td>
 <td>IVkomórka</td>
 </tr>
 <tr>
 <td>V komórka</td>
 <td>VI komórka</td>
 </tr>
 </table>

</div>

i po zmianach:

<table align="center" style="width: 100%;margin: 20px 50px 20px 50px;
 padding: 10px 20px 10px 20px;">

i po zmianach w index i style:

<table align="center">
table {
 width: 100%;
 margin: 20px 50px 20px 50px;
 padding: 10px 20px 10px 20px;
}

9. Formatowanie tabeli

do selektora tabeli dodajemy:

border:1px solid white;

oraz wprowadzamy nową deklarację:

td {
 border:1px solid white;
}

po poprawkach:

table {
 width: 100%;
 border:1px solid white;
 border-collapse: collapse;
 margin: 20px 50px 20px 50px;
 padding: 10px 20px 10px 20px;
}

i po kolejnych poprawkach:

<div class="tabela">

 <table align="center">
   <tr>
     <td>I komórka</td>
     <td>II komórka</td>
   </tr>
 
   <tr>
     <td>III komórka</td>
     <td>IVkomórka</td>
   </tr>
   <tr>
     <td>V komórka</td>
     <td>VI komórka</td>
    </tr>
 </table>

</div>
table {
 width: 100%;
 border-collapse: collapse;
}
td {
 border:1px solid white;
}
.tabela {
 margin: 20px 50px 20px 50px;
 padding: 10px 20px 10px 20px;
}