Powrót do strony głównej: 'Index.htm'

PODSTAWY JĘZYKA HTML - przykłady

Struktura strony

<HTML>
<HEAD>
<TITLE&gtNAZWA STRONY</>
</HEAD>
<BODY>
</BODY>
</HTML>

Nagłówki

<Hi>Nazwa w nagłówku</Hi>

gdzie i=1..6,  1 - największa czcionka

Przykłady:
Zapis w postaci kodu HTML

<H2>Nagłówek 1</H2>

Nagłowek 1

<H6>Nagłówek 6</H6>

Nagłowek 6

Akapity - P

Listy nienumerowane UL i numerowane OL

<UL>/UL> - unordered list - lista nienumerowana

Przyklad listy nienumerowanej

Zapis w postaci kodu HTML 

<UL>
<LI>Pozycja a
<LI>Pozycja b
</UL>

Przyklad listy numerowanej

Zapis w postaci kodu HTML 

<OL>
<LI>Pozycja 1
<LI>Pozycja 2
</OL>
  1. Pozycja 1
  2. Pozycja 2

Lista numerowana z parametrem: OL TYPE="a"

  1. Pozycja pierwsza
  2. Pozycja druga

Lista numerowana z parametrem: OL TYPE="circle"

  1. Pozycja 1
  2. Pozycja 2

Lista numerowana z parametrem: OL TYPE="disc"

  1. Pozycja 1
  2. Pozycja 2

Lista numerowana z parametrem: OL START=10

  1. Linia 1
  2. Linia 2

Listy definicji: DL, DT - termin, DD - definicja

Zawartością DL jest ciąg haseł DT i definicji DD
Przykład 1: Zapis w postaci kodu HTML 

<DL>
<DT>kowboj
<DD>tosoba, która jeżdzi konno i gra w piłke
<DT>programista
<DD>osoba, która w USA zarabia więcej niż kowboj
<DT>dziekan
<DD>szef wydziału na uczelni 
</DL>

Wynik HTML

kowboj
osoba, która jeżdzi konno i gra w piłke
programista
osoba, która w USA zarabia więcej niż kowboj
dziekan
szef wydziału na uczelni

Przykład 2

Definicje i listy (DL DT UL LI..LI ... DT UL LI..LI /UL /DL)

Zapis w postaci kodu HTML 

Tradycyjne zioła lecznicze to:
<DL>
<DT><B>Wysokie ciśnienie</B>
<UL>
<LI>Balsam
<LI>Owoc głogu 
</UL>
<DT><B>Bronchit</B>
<UL>
<LI>Dzięgiel 
<LI><I>Nasienie anyżu</I>
</UL>
<DT><B>Oparzenia</B>
<UL>
<LI>Aloes
<LI>Cykoria
<LI><I>Czarny bez</I>.
</UL>
</DL>

Wynik HTML
Tradycyjne zioła lecznicze to:

Wysokie ciśnienie
Bronchit
Oparzenia

Polecenie formatujace DIR LI... LI /DIR

  • Rogal z indykiem
  • Szynka i ser
  • Pieczywo czosnkowe

    • Polecenie formatujące MENU LI.. LI /MENU

  • Pomidorowa
  • Pomidorowa z ryżem
  • Rosół
  • Soczewicowa
  • Kasza
  • Ogórkowa
  • Grzybowa
  • Tajemnicza zupa

    • Znacznik HR - kreska pozioma (domyslnie ALIGN="center" WIDTH="100%"

    HR WIDTH="50%" ALIGN="right"

    HR WIDTH=120 ALIGN="left"

    HR SIZE=10>

    HR NOSHADE

    Znaczniki do pojedynczych słow - znaczniki logiczne

    Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu

    [ręka]

    EM - czcionka wyróżniona - emfaza

    Akapit pierwszy, linia 1 <EM>Wszystko jest w porządku</em> Wszystko jest w porządku

    [ręka]

    STRONG - czcionka mocno wyrózniona

    <STRONG>Wszystko będzie dobrze!</STRONG> Wszystko będzie dobrze!

    [ręka]

    KBD - czcionka wprowadzona z klawiatury

    Czcionka EM, teraz zwykła, teraz KBD <kdb>Z klawiatury - kbd</kbd>
    Z klawiatury kbd

    [ręka]

    CITE - cytat blokowy

    <CITE> Treść cytatu </CITE>
    Tekst zwykły, a to jest cytat.

    [ręka]

    DFN-definicja

    DFN czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarka interpretuje DFN jako kursywę (IE4) lub nie wyróżnia czcionki (NC4). Internet Explorer 5 to najnowsza przeglądarka firmy Microsoft.

    [ręka]

    DEL - Element usunięty

    Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem DEL, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.: Dokument nie jest już dostępny.
    Polecenie jest interpretowane przez IE4 i 5.

    [ręka]

    INS - Element wstawiony

    Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS.
    To jest nowe opracowanie tematu.
    Polecenie jest interpretowane przez IE4 i 5.

    [ręka]

    ABBR - skrót i ACRONYM - akronim

    Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów.

    <ABBR lang="pl">Prof.</ABBR>
    Prof.
    <ACRONYM lang="en">WWW</ACRONYM>
    WWW

    [ręka]

    Kolory czcionki: FONT COLOR="kolor:

    Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Poniżej przedstawiamy listę 16 podstawowych barw stosowanych w dokumentach internetowych - są one widoczne w przeglądarkach Netscape Navigator i Microsoft Internet Explorer. Naturalnie możemy w dowolny sposób kombinować barwy z atrybutami i stylami. Składnia: FONT COLOR="nazwa_koloru" /FONT

    Kolor black
    Kolor olive
    Kolor teal
    Kolor red
    Kolor blue
    Kolor maroon
    Kolor navy
    Kolor gray
    Kolor lime
    Kolor fuchsia
    Kolor white
    Kolor green
    Kolor purple
    Kolor yellow
    Kolor aqua
    Kolor 00ff00


    [ręka]

    Wielkość czcionki: FONT SIZE="1..7" lub FONT SIZE="+x"

    Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników FONT SIZE="xx" /FONT.

    Przykłady:
    To jest tekst normalny - size=3
    To jest tekst nieco większy - size=4
    To jest tekst największy - size=4
    To jest tekst najmniejszy - size=1

    Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.


    Na przykład: To jest tekst normalny, który teraz powiększamy o 1, a następnie zmniejszamy o 1, po czym powracamy do standardowej wielkości.

    [ręka]

    Zmiana kroju czcionki FONT FACE="krój" /FONT

    Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie FONT FACE="nazwa_kroju". Pozwala ono zmienić krój czcionki dla danego dokumentu.

    Przykłady:
    To jest tekst, który zapewne widzisz jako Times. A teraz zmieniamy go na moment na Arial, przechodzimy do kroju courier, aby powrócić do Times.

    Tekst o kolorze 0000ff, SIZE=5

    Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym). Szczególnie warto polecać w takich sytuacjach stosowanie ciągu w rodzaju , gdyż zabezpieczymy się w ten sposób przed ryzykiem niepoprawnego wyświetlania polskich znaków w Windows 3.1.

    Znaczniki fizyczne - atrybuty: I, B, U, STRIKE, BLINK, TT, SUP, SUB, BIG, SMALL

    Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów.

    I - czcionka italic (kursywa)
    B -czcionka bold (czcionka gruba)
    U - czcionka podkreślona
    BLINK - migająca
    TT - teletype (czcionka z maszyny do pisania)
    STRIKE - przekreślona
    SUP - indeks górny
    SUB - indeks dolny

    I - kursywa

    <I>Kursywa</I> Kursywa

    B - gruba (bold)

    <I>Czcionka gruba</I> Czcionka gruba

    U - podkreślona (underline)

    <U>Czcionka podkreślona</U> Czcionka gruba

    STRIKE - przekreślona

    <STRIKE>Czcionka przekreślona</STRIKE> Czcionka przekreślona

    BLINK - migająca

    <BLINK>Czcionka migająca</BLINK> Czcionka migająca

    TT typu teletype - o stałej szerokości

    
Czcionka typu<TT>TeleType - TT</TT>

    Czcionka typu TeleType - TT tintin@belgium.gov

    SUP - czcionka z superskryptem (indeks górny)

    x<SUP>x</SUP>2

    x2

    SUB - czcionka z subskryptem (indeks dolny)

    H<SUP>2</SUP>O

    H2O

    BIG

    To jest czcionka duża - BIG (+1 pkt)

    SMALL

    To jest czcionka mała - SMALL (-1 pkt)

    Dwa znaczniki, np. B I 

    <B><I>Pogrubiona i kursywa</I></B>

    Pogrubiona i kursywa

    Odnośnik

    <a href="https://kazimirr.prv.pl/">https://kazimirr/</a><br>

    https://kazimirr/

    <a href="https://kazimirr.prv.pl/">kazimirr_prv_pl</a>&nbsp;

    kazimirr_prv_pl