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; }