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

Podobne wpisy...

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close