<WebWord/>

yt tw fb
Listy
Listy w HTMLu to pogrupowane treści, zazwyczaj wypunktowane informacje. Można tworzyć listy numorowane (kolejne elemnty mają oznaczenia liczbowe: 1,2,3) lub nienumerowane (kolejne elemnty mają oznaczenia znakowe: ☐, •, ♥)
Jak wygląda robienie listy nieliczbowej?
Znacznik <ul> tworzy ramy listy, a <li> podpunkty listy.
<ul> <li>
Opcja 1
</li> <li>
Opcja 2
</li> <li>
Opcja 3
</li> </ul>

Efekt na stronie:
  • Opcja 1
  • Opcja 2
  • Opcja 3
Jak wygląda robienie listy liczbowej?
Znacznik <ol> tworzy ramy listy, a <li> podpunkty listy.
<ol> <li>
Opcja 1
</li> <li>
Opcja 2
</li> <li>
Opcja 3
</li> </ol>

Efekt na stronie:
  1. Opcja 1
  2. Opcja 2
  3. Opcja 3
Czas na listę definicji...
Czasami chcemy stworzyć listę, zawierajacą definicję danego zagadnienia, w HTML5 służą do tego odpowednie znaczniki, dzięki czemu tekst jest odpowednio formatowany. Znacznik <dl> tworzy ramy listy, <dt> musi zawierać słowo definiowane a <dd> opis, fefinicję
<dl> <dt>
Piesek
</dt> <dd>
mały pies
</dd> <dt>
Kotek
</dt> <dd>
mały kot
</dd> </dl>

Efekt na stronie:
Piesek
mały pies
Kotek
mały kot
Listy zagnieżdżone
Listy w listach, w liście zagnieżdżonej trzeba dbać o znaczniki, podczas zagnieżdżania można połączyć różne listy.
<ol> <li>
Produkty mleczne
<ul> <li>
mleko 3,2
</li> <li>
jogurt malinowy
</li> <li>
śmietanka do kawy
</li> </ul> </li> <li>
Owoce
<ul> <li>
jabłka
</li> <li>
cytusy
<ul> <li>
pomarańcze
</li> <li>
mandarynki
</li> </ul> </li> <li>
brzoskiwnie
</li> </ul> </li> <li>
Pieczywo
<ul> <li>
chleb
</li> <li>
bułki
</li> <li>
rogaliki
</li> </ul> </li> </ol>

Efekt na stronie:
  1. Produkty mleczne
    • mleko 3,2
    • jogurt malinowy
    • śmietanka do kawy
  2. Owoce
    • jabłka
    • cytusy
      • pomarańcze
      • mandarynki
    • brzoskiwnie
  3. Pieczywo
    • chleb
    • bułki
    • rogaliki
Jak umieścić obrazek na stronie?
Do dodawanie obrazów na stronę służy znacznik pojedynczy <img />. Obowiązkowymi atrybutami jest src, czyli źródło, ścieżka obrazka oraz alt, czyli opis, który wyświetli się w razie nieodnalezienia pliku graficznego.


<img
src
=
"adres"
alt
=
"opis"
/>


Efekt: #
Hiperłącza
Hierłącze może dotyczyć: dokumentu HTML, txt, obrazeka, adresu URL, adresu FTP, adresu maila, grup dyskusyjnych.





Czas na napisanie strony!
<!DOCTYPE HTML>
<html
lang
=
"pl"
> <head> <meta
charset
=
"utf-8"
/> <title>
Systemy to świetna zabawa!
</title> <meta
name
=
"description"
contenet
=
"Największy zbiór informacji dotyczących systemów operacyjnych."
/> <meta
name
=
"keywords"
content
=
"systemy, systemy operacyjne"
/> <meta
http-eqiuv
=
"X-UA-Compatible"
content
=
"IE=edge,chrome=1"
/> </head> <body> <h4>
Systemy to świetna zabawa!
</h4>
Na tej stronie będą początkowo umawiane poszczególne systemy:
<br /> <a
href
=
"https://www.microsoft.com/pl-pl/windows/"
target
=
"_blank"
title
=
"Przejdź na główną stronę Microsoftu"
>
* windows 7
</a> <br /> <br /> <img
src
=
"img/windows7.jpg"
width
=
"100"
height
=
"100"
/> <br /> <a
href
=
"http://www.linuxmint.com/"
target
=
"_blank"
title
=
"Przejdź na główną stronę Mint'a"
>
* linux mint
</a> <br /> <br /> <img
src
=
"img/linux mint.jpg"
width
=
"100"
height
=
"100"
/> </body> </html>


Efekt:

Systemy to świetna zabawa!

Na tej stronie będą początkowo umawiane poszczególne systemy:
* windows 7


* linux mint



backPowróć do menu głównego HTMLback