Każdy szablon allegro składa się przede wszystkim z kodu HTML, który jest odpowiedzialny za wyświetlanie wszystkich widocznych elementów w szablonie. Do poprawnej edycji szablonu wskazana jest podstawowa wiedza języka HTML, dlatego w Tym kursie zostaną omówione najważniejsze znaczniki, które przydadzą się podczas edycji szablonu allegro. Dzięki kursowi dowiesz się jak:
- używać znaczników odpowiadających za edycję tekstu
- dodawać listę numerowaną i punktowaną
- dodawać tabele
- osadzać zdjęcia
- dodawać odnośniki
Po zapoznaniu się z podstawami języka HTML, praca z szablonami stanie się dużo łatwiejsza i szybsza, gdyż każda osoba będzie w stanie edytować szablon allegro bezpośrednio w kodzie, a nie w edytorze graficznym, w którym po edycji szablonu zazwyczaj jest mnóstwo błędów, które objawiają się złym wyświetlaniem szablonu.
Poniższy kurs nie jest długi. Opisuje wyłącznie te znaczniki, które są najczęściej wykorzystywane w szablonach allegro. Należy wiedzieć, że brak jednego elementu w znaczniku potrafi wpłynąć na złe wyświetlanie całego szablonu, dlatego podczas edycji szablonów warto być uważnym i po każdej nawet drobnej zmianie powinno się sprawdzać, czy szablon wyświetla się poprawnie.
Tekst
Podczas edycji szablonu używa się różnych modyfikacji tekstu np.: pogrubienie, pochylenie czy też podkreślenie. Poniżej zostały przedstawione najważniejsze znaczniki przydatne podczas wyróżniania tekstu.
- <p>Akapit</p>
- <b>Pogrubienie</b>
- <i>Pochylenie</i>
- <u>Podkreślenie</u>
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.
Nagłówki
Nagłówki są przydatne, gdy trzeba podzielić tekst na różne fragmenty. Istnieje 6 znaczników określających nagłówek. Różnią się one tylko i wyłącznie wielkością tekstu. Zaczynając od nagłówka h1 (największy), a kończąc na h6 (najmniejszy).
- <h1>Nagłówek H1</h1>
- <h2>Nagłówek H2</h2>
- <h3>Nagłówek H3</h3>
- <h4>Nagłówek H4</h1>
- <h5>Nagłówek H5</h5>
- <h6>Nagłówek H6</h6>
Nagłówek H1
Nagłówek H2
Nagłówek H3
Nagłówek H4
Nagłówek H5
Nagłówek H6
Lista wypunktowana
Lista nieuporządkowana służy do sporządzenia listy nienumerowanej, w której kolejne punkty są wyróżniane punktorami. Znacznik <ul> </ul> tworzy ramy listy, natomiast znacznik <li> </li> odpowiada za każdy kolejny punkt w liście.
- <ul>
- <li>Tekst</li>
- <li>Tekst</li>
- <li>Tekst</li>
- <li>Tekst</li>
- </ul>
Lista numerowana
Lista uporządkowana służy do sporządzenia listy numerowanej, w której istotna jest kolejność elementów. Znacznik <ul> </ul> tworzy ramy listy, natomiast znacznik <li> </li> odpowiada za każdy kolejny punkt w liście.
- <ol>
- <li>Tekst</li>
- <li>Tekst</li>
- <li>Tekst</li>
- <li>Tekst</li>
- </ol>
Tabela
Tabele służą zazwyczaj do zestawienia danych tabelarycznych. Cała zawartość tabeli musi być umieszczona między dwoma znacznikami <table></table>, które stanowią ramę tabeli. Następnie za pomocą znacznika <tr></tr> są tworzone wiersze tabeli, a w wierszach tabeli za pomocą znacznika <td></td> są tworzone komórki.
- <table>
- <tr>
- <td>Tekst</td>
- <td>Tekst</td>
- </tr>
- <tr>
- <td>Tekst</td>
- <td>Tekst</td>
- </tr>
- </table>
Osadzanie obrazka
Osadzanie obrazka w szablonie to dość częsta czynność. Warto wiedzieć, że kod odpowiadający za osadzanie obrazka składa się tylko z jednego znacznika.
- <img src=”adres internetowy obrazka„>
Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić bezpośredni odnośnik do obrazka.
Odnośniki (linki)
Odnośnik jest niczym innym jak wskazaniem jakiegoś innego miejsca. Kliknięcie w donośnik przenosi użytkownika do docelowego miejsca.
- <a href=”adres internetowy odnośnika„>Nazwa odnośnika</a>
Czerwonym kolorem zostało oznaczone miejsce, w którym należy umieścić bezpośredni odnośnik do danej strony, natomiast kolorem niebieskim zostało oznaczone miejsce, w którym należy wpisać nazwę odnośnika.
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym Odnośnik do strony głównej. 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.