Od zera do programisty

Spis Treści

18 Bootstrap

17 HTML + CSS

16 HTML

15 domowy NAS

14 GUI okienkowe II

13 GUI okienkowe

12 Moduły Pakiety zapis

11 Programowanie Obiektowe III

10 Programowanie Obiektowe II

9 Programowanie Obiektowe I

8 Funkcje

7 Stringi ...;-)

6 GitHub

5 Listy

4 Podstawowe Funkcje i Instrukcje

3 Typy zmiennych

2 Operatory

1 START

18 Bootstrap

Bootstrap

dodatkowa linia "link" potrzebna do załadowania bootstrapa

<html>
    <head>
    <link type="text/css" rel="stylesheet" href="cssTrzecie.css"/>
    <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>

Kontener

Kontener jest podstawowym elementem siatki i jest on wymagany gdy chcemy zbudować layout. Używamy go do tworzenia sekcji naszej strony. Jednym kontenerem jest nasz header, jednym jest treść wpisu, kolejnym sekcja z komentarzami i stopka . Możemy zamknąć całą stronę w jednym kontenerze ale lepiej jest stworzyć kilka, każdemu nadać identyfikator czy klasę i w ten sposób uporządkować nasz dokument. Kontenery można również zagnieżdżać, ale lepiej tego nie robić.

przykład:

<div class="container">
  <!-- tresc  kontenera -->
</div>

jeśli chcemy rozciągnąć na cały dostępny ekran "container-fluid"

Siatka -Grid

Siatka Bootstrapa składa się z kontenerów rzędów (.row) i kolumn (.col-*-*), które umieszczamy wewnątrz rzędów.
Bootstrap pozwala na stworzenie do 12 kolumn, gdy stworzymy ich więcej to wyświetlą się one poniżej. Kolumna może mieć szerokość 1 (.col-sm-1), wtedy mamy ich 12. Szerokość może mieć 4 (.col-sm-4) wtedy, w jednym rzędzie będziemy mieli trzy kolumny.

przykład:

<!DOCTYPE html>
<html>
    <head>
    <link type="text/css" rel="stylesheet" href="cssTrzecie.css"/>
    <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    
    <body>
<div class="container">

  <div class="row">
    <div class="col-sm-12">
      Tytuł
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-12">
      Treść Treść Treść Treść Treść Treść
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-4">
      <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" />
    </div>
    <div class="col-sm-4">
      <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" />
    </div>
    <div class="col-sm-4">
      <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" />
    </div>
  </div>
  
</div>
    
    </body>
</html>

Rząd tytułu ma szerokość 12, tak więc mamy 1 kolumnę, podobnie rząd treści.
Dopiero trzeci rząd ma kolumny szrokości 4, tak więc ma je trzy, w każdej osobny obrazek.

uwaga:
stworzenie dwóch kolumn o szerokości 6 za pomocą klasy .col-md-6 wyświetli je obok siebie jeśli szerokości ekranu będzie 786px inaczej będą się one układać pod sobą. Stworzenie dwóch kolumn za pomocą klasy .col-xs-6 wyświetli nam dwie kolumny bez względu na rozdzielczość.

Nagłówki

Znaczniki H są już ostylowane w Bootstrapie poprzez dodanie im dolnego marginesu oraz font-weight: 500;. Dodanie większych odstępów, zmiana grubości fonta, jego koloru itp należy do was.

przykład:

<p class="h1"> paragraf h1 Bootstrap</p>
<p class="h2"> paragraf h2 Bootstrap</p>
<p class="h3"> paragraf h3 Bootstrap</p>
<p class="h4"> paragraf h4 Bootstrap</p>
<p class="h5"> paragraf h5 Bootstrap</p>
<p class="h6"> paragraf h6 Bootstrap</p>

Mamy również gotowy element, który pozwala stworzyć nam nagłówek z mniejszym przypisem.
wystarczy dopisać: <small class="text-muted">

<h3>
  Taki sobie nagłówek
  <small class="text-muted">Z mniejszym dopiskiem</small>
</h3>

Większe nagłówki:

Klasy te mają nazwy od .display-1 do .display-4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

.

zr:
https://bs4.kursbootstrap.pl/typografia-typography/

17 HTML + CSS

Span

Wydziela cześć tekstu i pozwala nadać indywidualne właściwości:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
 </head>
 <body>
  <p>This text is black, except for the word <span style="color:red">red!</span></p>
  <p>My favorite font is <span style="font-family:Impact">Impact</span>!</p>
 </body>
</html>

Css

Przykład podpinania pliku Css do kodu HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="nazwapliku.css"/>
  <title>Fancy Fonts</title>
 </head>
 <body>
  <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>
 </body>
</html>

część: <link type="text/css" rel="stylesheet"
przepisujemy ,
a pod href= wstawiamy nazwę pliku CSS

przykładowa zawartość pliku css:

p {
 color: red;
}

span {
 color: blue;
}

Zasada działania bardzo prosta, w pliku html nie określamy właściwości tagów-selektorów "p" i "span" (jak to było robione- patrz rozdział 16)
ale są one określone za pomocą atrybutu (color) i właściwości (red i blue) w pliku css.

W css linie z atrybutem i właściwością zakańczamy średnikiem.

Zawartość pliku css możemy umieścić prosto w kodzie html:

<html>
 <head>
  <style>
   p {
    color: purple;
   }
  </style>
  <title>Result</title>
 </head>
 <body>
  <p>Zobacz. Ten tekst jest w kolorze: purple!</p>
 </body>
</html>

Znacznie częściej jest on jednak w pliku osobnym

Komentarze:

W css komentarze określamy /* */
W html komentarze 

Przykład pliku css z trzema atrybutami dla selektora "p"

p {
    color: green;
    font-family: Garamond;
    font-size: 24px;
}

DIV
Wydziela obszar który można później zdefiniować w pliku css, może być nagłówkiem, stopką, obiektem, obszarem...

<!DOCTYPE html>
<html>
 <head>
 <link type="text/css" rel="stylesheet" href="w2_10_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
 </body>
</html>

i zdefiniowanie w css:

div {
    background-color: #cc0000;
    height: 100px;
    width: 100px;
}

Wynik: czerwony kwadrat o wielkości 100 pikseli.

Tabele
Jeśli chcemy określić za pomocą css kod html tworzący tabelę:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="nazwapliku.css"/>
  <title></title>
 </head>
 <body>
  <table>
   <thead>
    <th colspan="3">Nine Blocks!</th>
   </thead>
   <tbody>
    <tr>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td></td>
     <td></td>
     <td></td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

To w pliku css, opisujemy nie tylko table ale i td:

table, td
 {
    height: 50px;
    border: 1px dashed blue;
}

Likwidacja podkreślenia linków:

Prosty kod z linkiem:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_12_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <p>The below link goes to Google!</p>
  <a href="http://www.google.com/">Google</a>
 </body>
</html>

i likwidacja dekoracji (podkreślenia) w css:

a {
    color: #cc0000;
    text-decoration: none;
}

Jak widać atrybut "color" określony jest heksadecymalne ( R G B)

Przykład dla różnych tagów-selektorów:

<!DOCTYPE html>
<html>
 <head>
     <link type="text/css" rel="stylesheet" href="w2_13_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
     <h1>H1</h1>
     <p>To jest paragraf</p>
     <img src="http://ecsmedia.pl/c/skarbonka-kaczka-zolta-m-iext8982607.jpg" />
     <p></p>
     <a href="www.wi.zut.edu.pl">Wydział Informatyki ZUT w Szczecinie</a>
 </body>
</html>

i zawartość css:

h1 {
    font-family: Verdana, sans-serif;
    color: #576D94;
}

p {
    font-family: Garamond, serif;
    font-size: 18px;
    color: #4a4943;
}

img {
    height: 150px;
    width: 150px;
    border: 1px solid #4682b4;
}

a {
    color: #cc0000;
    text-decoration: none;
}

Jak widać w nagłówku h1 atrybut font-family: zawiera właściwość "Verdana" i sans-serif.
Taki zapis działa w sposób następujący. Załaduj fonty Verdana, a jeśli w systemie nie ma takiej czcionki to dowolną szeryfową czcionkę.

Przykład klikanego odnosnika:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="nazwapliku.css"/>
  <title>Nice button</title>
 </head>
 <body>
  <br/>
  <br/>
  <div>
    <a href="http://www.facebook.com">Contact Me on <span>Facebook</span></a>
  </div>
 </body>
</html>

i zawartość css:

div {
    height: 50px;
    width: 120px;
    border-color: #6495ed;
    border-width: 2px;
    border-style: solid;  /*none,dashed,dotted,double,....*/
    background-color: #bcd2ee;
    border-radius: 5px; 
    margin: auto;      
    text-align: center;

}


a {
    text-decoration: none;
    color: red;
    font-family: Verdana;
}

span {
    color: #ffffff;
    font-size: 22px;
}

Zagnieżdżanie tagów i opis tego w css

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_15_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h3>I'm plain old font!</h3>
  <div>
   <h3>Me, too!</h3>
   <div>
    <h3>Me three!</h3>
    <div>
     <h3>Forget you guys. I'm about to be red!</h3>
    </div>
   </div>
  </div>
 </body>
</html>

i css:

body {
    background-color: #c6e2ff;
}

div div div h3 {
    color: red;
}

w efekcie, tylko zagnieżdżony w 3 divie znacznik h3 będzie czerwony. pierwsze trzy będą czarne.

identyfikator "id" i klasa "class"

przykład 1:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="w2_18_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h2 id="intro">Wprowadzenie</h2>
  <h3 class="moja_klasa">Class i ID w CSS'ie</h3>
  <p class="moja_klasa">Klasy i identyfikatory są łatwe. Właśnie ich używam.</p>
  <h3>Zwykły nagłówek H3</h3>
  <p>Jeśli nie używam klasy lub identfikatora, to element html'owy otrzymuje standardową stylizację z CSS'a. 
  </p>
 </body>
</html>

i css:

#intro {
    color: #b83c3a;
}

.moja_klasa {
    color: #f7ac5f;
    font-family: Verdana;
}

przykład 2:

<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_16_stylesheet.css"/>
  <title>The Great Tree of HTML</title>
 </head>
 <body>
  <div id="p1">P</div>
  <div id="p2">P</div>
  <div id="p3">P</div>
  <div class="space"></div>
  <div id="title">Title</div>
  <div id="div">Div</div>
  <div class="space"></div>
  <div id="head">Head</div>
  <div id="body">Body</div>
  <div class="space"></div>
  <div id="html">HTML</div>
 </body>
</html>

i css:

div {
 border-radius: 5px;
 border: 2px solid #6495ED;
 background-color: #BCD2EE;
 height: 18px;
 text-align: center;
 font-family: Garamond, serif;
}

#p1 {
 display: inline;
 position: relative;
 margin-left: 138px;
}

#p2 {
 display: inline;
 position: relative;
 margin-left: 10px;
}

#p3 {
 display: inline;
 position: relative;
 margin-left: 10px;
}

#div {
 display: inline;
 position: relative;
 margin-left: 70px;
 margin-top: 10px;
}

#title {
 display: inline;
 position: relative;
 margin-left: 50px;
}

#body {
 display: inline;
 position: relative;
 margin-left: 25px;
}

#head {
 display: inline;
 position: relative;
 margin-left: 65px;
}

#html {
 width: 50px;
 position: relative;
 margin-left: 93px;
}

.space {
 opacity: 0;
}

identyfikator ID jest unikalny, można przyporządkować jeden do 1 elementu
za to jeden element może mieć wiele klas.

przykład 3

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_22_stylesheet.css"/>
  <title>My Social Network</title>
 </head>
 <body>
  <div></div>
  <div></div>
  <div></div>

  <div class="friend"></div>
  <div class="family"></div>
  <div class="enemy"></div>


  
  <div class="friend"></div>
  <div class="friend" id="best_friend"></div>
  <div class="family"></div>
  <div class="enemy"></div>
  <div class="enemy" id="archnemesis"></div>



 </body>
</html>

i css

div {
 height: 100px;
 width: 100px;
 border-radius: 100%;
 border: 2px solid black;
 display: inline-block;
 margin-left: 5px;

}


.friend {
    border: 2px dashed #008000;
}

.family {
    border: 2px dashed #0000ff;
}

.enemy {
    border: 2px dashed #ff0000;
}




#best_friend {
    border: 4px solid #008000;
}

#archnemesis {
    border: 4px solid #ff0000;
}

jak widać ustawienie id czy klasy nadpisuje pierwotne ustawienia,

Kaskadowość

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="w2_17_stylesheet.css"/>
  <title>Ultimate Text Challenge</title>
 </head>
 <body>
  <p>Wprowadzenie: Kaskadowość w CSS</p>
  <div>
   <p>Opis: Gdy ustawisz atrybut selektora np. 'p' na pewną wartość, wartość ta odnosi się do <em>wszystkich</em> znaczników p !!!.
   Jeśli jednak ustalić ten sam atrybut na inną wartość dla bardziej konkretnej instancji p, zmiana ta <em>zastąpi</em> 'generalne reguły'.
   </p>
   
   <ul>
    <li><p>Jeśli ustawisz p { color: green}, wszystkie 'p' będą miały kolor zielony.</p></li>
    <li><p>ALE jeśli ustawisz li p {color: black}, 'p' na zewnątrz 'li' będzie miało kolor zielony a 'p' WEWNĄTRZ 'li' będzie miało kolor czarny.
    </p></li>
    <li><p>A co się stało, że mamy kolor niebieski???? 
    </p></li>
   </ul>
  
  </div>
  
  <p>Podsumowanie: Im większa specyfikacja, tym większy priorytet w stylizacji CSSa.</p>
 </body>
</html>

i css:

p {
    color: green;
}

ul p {
    color: black;
    text-decoration: underline;
}

body > p {
    font-weight: bold;
}

/* wskazanie na <p>, które jest bezpośrednio w <div> */
div > p {
    color: blue;
}

Zachowania linków
prosty przykład html:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_20_stylesheet.css"/>
  <title></title>
 </head>
 <body>
  <div>
   <p><a href="http://www.onet.pl">Onet</a></p>
   <p><a href="http://www.wp.pl">Wp</a></p>
   <p><a href="http://www.interia.pl">Interia</a></p>
   <p><a href="http://www.infoludek.pl">Infoludek</a></p>
   
  </div>
 </body>
</html>

i css:

a:link {
    text-decoration: none;
    color: black;
}

a:hover {
    color: blue;
}

a:visited {
    color: red;
}

link - opisuje zachowanie zwykłego linka (tutaj czarny i bez podkreslenia)
hover - opisuje zachowanie po najechaniu (tu niebieski)
visited - opisuje zachowanie odwiedzonych linków (tu kolor czerowny)

Rozmieszczanie

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_23_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
 </body>
</html>

i css:

* {
 border: 1px dashed blue;
}

div {
    display: block; /* block, inline-block, inline, none */
 height: 50px;
 width: 100px;
 border: 2px solid black;
 border-radius: 5px;
}

#one {
 background-color: #FF0000;
}

#two {
 background-color: #0000FF;
}

#three {
 background-color: #FFD700;
}

#four {
 background-color: #308014;
}

parametr display może przybierać: block, inline-block, inline, none

Model pudełkowy

przykład:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_25_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
 </body>
</html>

i css:

* {
 border: 1px dashed black;
}

div {
 height: 50px;
 width: 100px;

 border-radius: 5px;
 background-color: #308014;
 border: 6px solid black; 
 
 padding: 30px; 
 
 margin: -20px 20px 20px 20px; 
}

padding - określa wielkość przestrzeni w koło obiektu

padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;

można zapisać tak:
padding: 25px 50px 75px 100px;

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

margin - w koło ramki...

rozmieszczenie:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="w2_26_stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <div></div>
 </body>
</html>

i css:

div {
 height: 300px;
 width: 100px;
 border: 2px solid black;
 border-radius: 5px;
 background-color: #308014;
 
 float: right;  /* left */
 
}

float: na prawo (right) albo na lewo (left)

czyszczenie obszaru:

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <link type="text/css" rel="stylesheet" href="zad.2.5css.css"/>
    </head>

    <body>

  <div id="header"><p> Naglowek szablonu </p></div>

  <div class="left"><p> Menu nawigacyjne </p></div>

  <div class="right"><p> Tresc strony </p></div>

  <div id="footer"><p> Stopka serwisu </p></div>



    </body>
</html>

i css

#header {
 background-color: lightgreen;
 margin-bottom: 0px;
}

.left {
 background-color: lightgrey;
 float: left;

}

.right {
 float: left;
}

#footer {
 background-color: lightgreen;
 clear: left

}

aby stopka była w prawidłowym miejscu należy dodać polecenie "clear: left"
jeśli tego nie zrobimy wstawi stopkę pomiędzy dwoma poprzednimi divami
clear czyści obszar i pozwala stopce pojawić się pod nimi

16 HTML

Ponieważ zapoznanie się z PyGame zniechęciło mnie póki co do kontynuacji tematu, jako temat zastępczy postanowiłem zapoznać się z podstawami HTML, CSS i Bootstrap. Podstawy projektowania www to temat który zawsze chciałem zgłębić, zaczynamy:

przykład 1 - tekst i nagłówki

<!DOCTYPE html>
<html>
 <head>
  <title>
   Headings & Paragraphs
  </title>
 </head>
 <body>
  <h1>Heading - H1</h1>
  <p>Normal text</p>
  <h2>Heading - H2</h2>
  <p>Normal text</p>
  <h3>Heading - H3</h3>
  <p>Normal text</p>
  <h4>Heading - H4</h4>
  <p>Normal text</p>
  <h5>Heading - H5</h5>
  <p>Normal text</p>
  <h6>Heading - H6</h6>
  <p>Normal text</p>
 </body>
</html>

Pierwszy wiersz, <!DOCTYPE html>, definiuje typ dokumentu. Zawiera on informacje dla przeglądarki o wersji języka HTML, w którym napisany jest ten kod. W zależności od typu dokumentu przeglądarka może wyświetlać go w nieco inny sposób. W tym wypadku definiowany jest typ HTML5.

Skrót HTML oznacza hypertext markup language — hipertekstowy język znaczników. Znaczniki służą do oznaczania rodzaju treści, na przykład nagłówków, elementów list lub odnośników. Kod umieszczony wewnątrz pary znaczników może zawierać inne znaczniki HTML.

tag <head>, umieszcza się w nim różne elementy, nieco mniej istotne niż sama treść dokumentu. Na przykład tytuł, informacje pomocne dla wyszukiwarek internetowych itp.

tag <title> tytuł widoczny na zakładce przeglądarki

tag<body> treść całej strony, wszystko co wyświetla się w przeglądarce jest umieszczone tutaj

tag<p> wyświetla podany tekst

tag<h1> nagłówki h1 największy h6 najmniejszy w przykładzie

przykład 2 - linki łącza

<!DOCTYPE html>
<html>
 <head>
  <title></title>
 </head>
 <body>
     <a href="http://www.wp.pl">Wp</a>
 </body>
</html>

tag<a> znacznik łącza, zwany kotwicą, wymaga do działania dodatkowych atrybutów
hrief - hypertext reference, czyli odwołanie hipertekstowe, atrybut href wykorzystujemy w celu podania nazwy lub adresu URL, do którego prowadzi dane łącze
Pomiędzy tagiem <a> i tagiem zamykającym </a> widzimy tekst który będzie się wyświetlał jako link łącza (tutaj "Wp")

przykład 3 - linki obrazków

<!DOCTYPE html>
<html>
 <head>
  <title>Pictures</title>
 </head>
 <body>
  <img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" />
  <img src="http://i2.pinger.pl/pgr141/15a7b00600251c8c4a1abb86/gumowa-kaczka-bob__vb__t0503025.jpg" />
 </body>
</html>

tag<img> pozwala wyświetlić nam pliki graficzne, ma atrybut src który zawiera adres URL obrazu. img podobnie jak<hr> i <br> nie ma znacznika zamykającego.

Aby wskazać plik o nazwie image.gif znajdujący się w tym samym katalogu co dokument HTML, możesz użyć poniższego znacznika:

<img src="image.gif">

Jeżeli plik obrazu znajduje się w katalogu nadrzędnym, wówczas można użyć znacznika w poniższej postaci.

<img src="../image.gif">

Zastosowanie mają dokładnie te same reguły co dla adresów URL w atrybucie href znacznika <a>.

przykład 4 link obrazu i łącza jako jedno

<!DOCTYPE html>
<html>
 <head>
  <title>Links and pictures</title>
 </head>
 <body>
  <a href="http://onet.pl"><img src="http://i.pinger.pl/pgr66/fd63cd870029cb9f4af49d93" /></a>

 </body>
</html>

Połączenie przykładu 2 i 3. W linku łącza w miejscu wyświetlanego tekstu wstawiamy...obrazek

przykład 5 listy

<!DOCTYPE html>
<html>
 <head>
  <title>O mnie</title>
 </head>
 <body>
     <h2>Moja praca</h2>
     <ol>
         <li>Dydaktyka</li>
         <li>Nauka</li>
         <li>Organizacja</li>
     </ol>
     
     <h3>Moje zainteresowania</h3>
     <ul>
         <li>Turystyka</li>
         <li>Komputery</li>
         <li>Samochody</li>
     </ul>

     <h2>A teraz wszystko razem - listy mieszane</h2>
  <ol>
   <li>Moja praca</li>
    <ul>
     <li>Dydaktyka</li>
           <li>Nauka</li>
    </ul>
   
   <li>Popularne prace
    <ul>
     <li>Kierowanie pojazdami</li>
     <li>Handel</li>
    </ul>
   </li>
  </ol>
  <ul>
      <li>Ulubione kolory</li>
          <ol>
              <li>czerwony</li>
              <li>zielony</li>
              <li>niebieski</li>
          </ol>
      <li>Inne kolory</li>
          <ol>
              <li>czarny</li>
              <li>szary</li>
              <li>granatowy</li>
          </ol>
  </ul>


 </body>
</html>

tag<ol> lista numerowana, poszczególne elementy listy za pomocą znacznika <li>
tag<ul> lista wypunktowana, elementy za pomocą <li>

przykład 6 style

<!DOCTYPE html>
<html>
 <head>
  <title>Fonts</title>
 </head>
 <body>
  <!--font-size-->
  <p></p>
  <p></p>
  <p>------------------ font-size -------------------</p>
  <p></p>
  <p style="font-size: 10px"> Some text for you to make tiny! </p>
  <p style="font-size: 20px"> Some text for you to make normal size!</p>
  <p style="font-size: 40px"> Some text for you to make super big!</p>

  <!--color-->
  <p></p>
  <p></p>
  <p>------------------ font-size and color ------------------------------------------------------------------------------------------------------------------------------------
   ++++++++++++++++++</p>
  <p></p>
  <h1 style="color: green; font-size: 16px">Big Heading</h1>
  <p style="color: violet">A giant bear and a little duck were friends.</p>
  <p style="color: red; font-size: 10px">But the bear got hungry and ate the duck.</p>

  <p></p>
  <p></p>
  <a href="http://www.w3.org/TR/css3-color/#svg-color">Link do strony z kolorami!!!</a>

  <!--font-family-->
  <p></p>
  <p></p>
  <p>------------------ font-family -----------------------------------------</p>
  <p></p>
  <h1 style="font-family: Arial">A co teraz?????</h1>
   <ol>
    <li style="font-family: Arial; font-size: 16px">This item is big Arial.</li>
    <li style="font-family: Verdana; font-size: 16px">This item is medium Verdana.</li>
    <li style="font-family: Impact; font-size: 16px">This item is small Impact.</li>
   </ol>

  <p></p>
  <p></p>
  <a href="http://www.w3.org/TR/CSS21/fonts.html#generic-font-families">A tutaj jest link do strony z fontami!!!</a>
  <p></p>
  <p></p>
  <p>------------------ text-align ------------------------------------------</p>
  <p></p>
  <h3 style="text-align: center">Favorite Football Teams</h3>
   <ol>
    <li style="text-align: left">The Hawthorn Football Club</li> 
    <li style="text-align: center">San Franscisco 49ers</li>
    <li style="text-align: right">Barcelona FC</li>
   </ol>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p>------------------ strong ----------------------------------------------</p>
  <p></p>
  <p>Do you hear <strong>the people sing</strong>?</p>
  <p>No I don't. I'm <strong>too</strong> busy eating cake.</p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p>------------------ em --------------------------------------------------</p>
  <p></p>
  <p>Hey, don't say <em>that</em>!</p>
  <p>I am <em>so</em> tired.</p>
 </body>
</html>
 </body>
</html>

style:

style="font-size: 10px" -                     rozmiar fontów

style="color: green; font-size: 16px"  -      kolor i rozmiar fontów

style="font-family: Arial; font-size: 16px" - rodzaj fontów i ich rozmiar

style="text-align: left"                    - centrowanie tekstu

<p>Do you hear <strong>the people sing</strong>?</p> pogrubianie tekstu
<p>Hey, don't say <em>that</em>!</p>                  kursywa

przykład 7 - style kolorów

<!DOCTYPE html>
<html>
 <head>
  <title>Background-color!</title>
 </head>
 <body style="background-color: brown">
  <h3>Favorite Football Teams</h3>
   <ol style="background-color: yellow">
    <li style="background-color: blue">The Hawthorn Football Club</li> 
    <li>San Franscisco 49ers</li>
    <li>Barcelona FC</li>
   </ol>   
 </body>
</html>

Jak widać ustawiony kolor dotyczy miejsca gdzie wstawiany, body to tło, lista żółty, podpunkt listy, niebieski.

przykład 8 - tabele

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table border="1px">
            <tr>
                <th>Jeden</th><th>Dwa</th><th>Trzy</th>
            </tr>
            
            <tr>
                <td>Jeden</td><td>Dwa Trzy</td><td></td>
                
            </tr>
            
            <tr>
                <td>Jeden</td><td>Dwa</td><td>Trzy</td>
                
            </tr>
        </table>
        
    </body>

</html>

wynik:

Jeden	Dwa	Trzy
Jeden	Dwa Trzy
Jeden	Dwa	Trzy

Wewnątrz elementu <table> ... </table> definiujesz rzeczywistą zawartość tabeli. Tbele są tworzone wiersz po wierszu, a każdy z nich zawiera wszystkie komórki dla danego wiersza. Dlatego też budowę tabeli zaczynasz od pierwszego (najwyższego) wiersza oraz jego kolejnych komórek, od lewej do prawej strony. Następnie definiujesz drugi wiersz i jego komórki itd. Liczba kolumn jest obliczana na podstawie liczby komórek znajdujących się w poszczególnych wierszach.
W przykładzie określona grubość ramek tabeli.

tag<tr> wiersz
tag<th> nagłówek wiersza- wyświetlany jako pogrubiony, rozciągniecie na 2 kolumny colspan="2"
tag<td> komórki danych czyli kolejne kolumny w wierszu

przykład 9 - tabele w stylach

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table style="border-collapse:collapse;"> <!--border-collapse: separate|collapse|initial|inherit;-->
            <thead>
                <tr style="color:red">
                    <th colspan="2">Przyklad pieknej tabeli</th>
                </tr>
                <tr style="border-bottom:1px solid black;">
                    <th style="padding:5px;"><em>naglowek 1</em></th>
                    <th style="padding:5px;border-left:1px solid black;"><em>naglowek 2</em></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:5px;">pierwszy</td>
                    <td style="padding:5px;border-left:1px solid black;">i opisik </td>     
                </tr>
                
                <tr>
                    <td style="padding:5px;">drugi</td>
                    <td style="padding:5px;border-left:1px solid black;">kolejny opisik</td>
                </tr>
                
                <tr>
                    <td style="padding:5px;">trzeci</td>
                    <td style="padding:5px;border-left:1px solid black;">tu tez opis</td>
                </tr>
            </tbody>
        </table>
        
    </body>

</html>

wynik:

Przyklad pieknej tabeli
naglowek 1	naglowek 2
pierwszy	i opisik
drugi	kolejny opisik
trzeci	tu tez opis

Tą piękną tabelą kończymy wpis o podstawach HTML.