handel elektroniczny - Wydział Zarządzania UTP

handel elektroniczny - Wydział Zarządzania UTP

mgr inż. Jakub Siwiec ([email protected])
Katedra Informatyki w Zarządzaniu
Wydział Zarządzania
HANDEL ELEKTRONICZNY
Ćwiczenia HTML nr 4 – Tekst i jego formatowanie
Zadanie:
Na podstawie zdobytej na poprzednich zajęciach wiedzy oraz wspierając się przykładami poniżej, stwórz
podstronę HTML wg przykładu
Nagłówek H1
Tekst jako akapit,
wyjustowany, czcionka
Arial
Zdjęcie w prawym
górnym rogu, okalane
tekstem
VSPACE i HSPACE = 5
Czym jest lorem ipsum?
Lorem Ipsum jest tekstem stosowanym jako
przykładowy wypełniacz w przemyśle poligraficznym.
Został po raz pierwszy użyty w XV w. przez
nieznanego drukarza do wypełnienia tekstem próbnej
książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60.
XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem
Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum
oprogramowaniem przeznaczonym do realizacji druków na komputerach
osobistych, jak Aldus PageMaker
Pozioma linia
oddzielająca tekst
Nagłowek H1
Tekst wyjustowany,
czcionka Times New
Roman
Kolor, kursywa,
pogrubienie,
podkreślenie wg wzoru
Do czego tego użyć?
Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość
strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania
Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w
przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to
„zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum
jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem
ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele
wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem
specjalnie (humorystyczne wstawki itd).
Środowisko pracy:


stwórz „nowy folder” na pulpicie o nazwie Imie_nazwisko, w którym będziesz pracował,
otwórz notatnik (start  programy  akcesoria) i zapisz plik jako imie4.html do stworzonego
przez siebie folderu, pamiętaj o wybraniu kodowania – UTF-8
1
Autor: mgr inż. Jakub Siwiec
Znaczniki do obsługi tekstu:
<p> … </p>
<font> … </font>
<br />
<hr />
<b> … </b>
<i> … </i>
<u> … </u>
<h1> … </h1>
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>
akapit
formatowanie tekstu (wielkość, wygląd, kolor)
przejście do kolejnego wiersza (“enter”)
linia pozioma
pogrubienie
kursywa
podkreślenie
nagłówek 1 stopnia
nagłówek 2 stopnia
nagłówek 3 stopnia
nagłówek 4 stopnia
nagłówek 5 stopnia
nagłówek 6 stopnia
Dodatkowe operatory:
<p align=”left, center, right, justify”> … </p>
położenie tekstu – lewo, środek, prawo, wyjustowanie
<font color=”#FF0000” face=”Arial” size=”3”> … </font>
formatowanie tekstu color=kolor, face=czcionka wpisujemy tutaj nazwę czcionki ogólnie dostępnej
tzw. Webowskiej, size=rozmiar 1-najmniejsza, 7 największa, 3 to wartość domyślna.
<img src=”plik.jpg” width=”100” height=”100” vspace=”5” hspace=”5” align=”right” />
Przykład dla obrazka plik.jpg, o długości 100, wysokości 100, odstępach góra dół od obrazka 5,
odstępach lewo prawo od obrazka 5 oraz położenie obrazka prawa strona.
Krok końcowy:



usunąć dane z pulpitu,
opróżnić kosz,
wyłączyć komputer.
Zdobyta wiedza:
 poznanie znaczników i parametrów dotyczących formatowania tekstu,
 tworzenie kompletnej podstrony z tekstami, obrazkami oraz zastosowaniem nagłówków.
2
Autor: mgr inż. Jakub Siwiec