[Dawid]

Kurs podstaw HTML’a

----------------------------------------------------------------------------------------------------------------------------------------
Znaczniki – są to różne polecania HTML, które mowia jak ma się wyświetlać dany tekst na stronie (w tej instrukcji kod html będzie na czerwono), każdy znacznik ma swoje otwarcie i zamkniecie.

Każdy artykul powinien być umieszczony pomiedzy znacznikami:

<div class="tresc-artykulu"> <!-- rozpoczecie glownago diva-->

Nasz artykul oraz pozostale znaczniki

</div> <!-- zamkniecie glownago diva-->

WYTLUMACZENIE:
Div – jest to warstwa
Class=”tresc-artykulu” – mowi jaka ma być szerokość artykulu,
gdybyśmy nie umieścili naszego tekstu pomiedzy tym znacznikiem to mogloby się zdarzyc ze wychodzilby on poza szerokość srodkowej czesci strony

Znaczniki do tekstu:
1. <p> nasz tekst </p> - jest to akapit, jeżeli zrobimy tak:

<p> nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst </p>
<p> nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst </p>

To na stronie będzie to wyglądać tak:

nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst
[to jest linia przerwy miedzy akapitami, czyli kolejnymi <p>…</p>]
nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst


2. <b>pogrubiony tekst </b>
3. <u> podkreślony tekst </u>
4. <i> tekst pisany kursywa </i>

Znaczniki można laczyc, np. jak chcemy, aby teskt był pogrubiony i podkreślony to:
<b><u> pogrubiony i podkreślony tekst </b></u>

5. <br> po tym znaczniku tekst zacznie się od nowej linii, np.
<p> nasz tekst nasz tekst nasz tekst nasz tekst <br> znacznik zalamania linii, nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst</p>

Na stronie będzie wyglądać to tak:
nasz tekst nasz tekst nasz tekst nasz tekst
znacznik zalamania linii, nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst nasz tekst

6. nagłówek głowny
<h1 class="naglowek-h1"> Tutaj umieszczamy nasz tekst</h1>
Na stronie będzie to tekst pisany duza czcionka, na czerwono i będzie wyśrodkowany, czyli tak:
Nagłówek tytułowy naszego tekstu

7. Linki
Linkiem może być tekst oraz np. zdjecie

<a href="http://adres.naszego.linku.com" target="_blank">nazwa naszego linku</a>
To spowoduje otwarcie strony w nowym oknie przeglądarki.
Jeżeli chcemy, aby strona się wczytala w istniejącym oknie to wtedy tak jak wyzej tylko bez target="_blank"

Link do e-maila:
<A HREF="mailto:[email protected]">[email protected]</A>
Po nacisnieciu tego linka wlaczy sie domyslny program pocztowy i bedziemy mogli napisac maila.

Obrazek jako link
<a href="http://adres-do-strony" target="_blank"> <img src="" alt="" border="0"></a>
Wytlumaczenie:
<img src="sciezka do naszego pliku" alt="opis naszego zdjecia">
alt=” ” – tekst ten się wyświetli gdy zdjecie nie zostanie wczytane.
border="0" – oznacza ze nie będzie obramowania obrazka
Np.
<img src="img/studia/uczelnia.jpg" alt="Uniwersytet" >
Wielkość liter ma znaczenie, dlatego pliki zawsze malymi literami pisac, aby było latwiej

8. Obrazki
Obrazki w tekscie sa bardzo wazne, podnosza wiarygodność tekstu oraz przyjemniej się czyta taki artykul, obrazek nie może być zbyt duzy, (nie chodzi mi o wielkość) chodzi o to ile miejsca zamuje na dysku, polecam używać photoshopa w którym można sobie dopasowac jakosc obrazka i jego wage. Obrazki które zajmuja duzo miejsca na dysku powoduja ze strona się dłużej wczytuje, co zniecheca użytkownika oraz jest wiekszy transfer z naszego serwera (za co się placi)

<img src="" alt="" class="float-left">
Wytłumaczenie:
<img src="sciezka do naszego pliku" alt="opis naszego zdjecia">
alt=” ” – tekst ten się wyświetli gdy zdjecie nie zostanie wczytane.
class="float-left" oraz class="float-right" - pierwsze powoduje ze zdjecie bedzie po lewej stronie, a tekst po prawej, w drugim na odwrot, np.

__________________ tekst tekst tekst tekst tekst tekst
|............................| tekst tekst tekst tekst tekst tekst
|......zdjecie.............| tekst tekst tekst tekst tekst tekst
|............................| tekst tekst tekst
|_________________| class="float-left”







tekst tekst tekst tekst tekst tekst tekst __________________
tekst tekst tekst tekst tekst tekst tekst |............................|
tekst tekst teksttekst tekst tekst tekst |.......zdjecie............|
tekst tekst tekst tekst tekst tekst tekst |............................|
|_________________|
class="float-right”




__________________
|............................| - bez definiowania położenia obrazka
|.......zdjecie............|
|............................|
|_________________| tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Np.
<img src="img/studia/uczelnia.jpg" alt="Uniwersytet" >
Wielkość liter ma znaczenie, dlatego pliki zawsze malymi literami pisac, aby było latwiej


9. Wypunktowanie tekstu

Są dwa rodzaje: punktowane i numerowane (tak jak w Wordzie)

PUNKTOWANE:
<ul class="odstep">
<li>pomiedzy ten znacznik wstawiamy nasz pierwszy punkt</li>
<li>tutaj nasz drugi punkt</li>
<li>itd.</li>
</ul>
Wyglada to tak:
o pomiedzy ten znacznik wstawiamy nasz pierwszy punkt
o tutaj nasz drugi punkt
o itd.

NUMEROWANE:
<ol class="odstep">
<li>pomiedzy ten znacznik wstawiamy nasz pierwszy punkt</li>
<li>tutaj nasz drugi punkt</li>
<li>itd.</li>
</ol>

Wyglada to tak:
1. pomiedzy ten znacznik wstawiamy nasz pierwszy punkt
2. tutaj nasz drugi punkt
3. itd.
Jest możliwość, aby oprocz liczb były także np. litery, aby to zrobic należy dodac odpowiedni styl, czyli do tego:
<ol class="odstep"> dodajemy to: style=” list-style-type: typ” czyli będzie to wygldac tak:

<ol class="odstep" style=” list-style-type: typ”>
Teraz w miejsce typ możemy wstawic jedno z wielu możliwych wypunktowan:
• lower-alpha - małe litery
Przykład:
list-style-type: lower-alpha
a. Punkt pierwszy
b. Punkt drugi
c. Punkt trzeci

• upper-alpha - duże litery
Przykład:
list-style-type: upper-alpha
A. Punkt pierwszy
B. Punkt drugi
C. Punkt trzeci

• upper-roman - duże liczby rzymskie
Przykład:
list-style-type: upper-roman
I. Punkt pierwszy
II. Punkt drugi
III. Punkt trzeci

• lower-roman - małe liczby rzymskie
Przykład:
list-style-type: lower-roman
i. Punkt pierwszy
ii. Punkt drugi
iii. Punkt trzeci

• none - brak wyróżnika (markera)
Przykład:
list-style-type: none
• Punkt pierwszy
• Punkt drugi
• Punkt trzeci