Pierwsze obrazki
Na początku umieścimy obrazki w trzech divach: naglowek, lewak i stopka. Znacznikiem wstawiającym obrazek jest img . Znacznik ten nie posiada znacznika zamykającego, zresztą nie miałby on sensu (wstawiamy i już, a nie wstawiamy i pewnym momencie kończymy wstawianie). Wszędzie, gdzie odwołujemy się do plików musimy wpisać nazwę i rozszerzenie. Przeglądarki nie potrafią odczytać wszystkich formatów obrazków, ale na pewno odczytają pliki typu: jpg, png, bmp i gif. Możesz stosować różne sposoby ustalania rozszerzeń nazw plików. Ja proponuję aby, na czas wstawiania obrazków, odsłonić rozszerzenia. Aby to zrobić należy w dowolnym folderze wybrać w menu: Narzędzia --> Opcje folderów i w wyświetlonym okienku wybrać kartę Widok. W tej karcie odhaczamy Ukryj rozszerzenia znanych typów plików
Obrazek, który wstawimy w części nagłówkowej nazywa się nag_szop, jest animowanym gifem i znajduje się w folderze graf. Poza nazwą znacznika musimy podać tzw. źródło obrazka (source - skrót src) i, jeśli chcemy, aby po prawej stronie coś wstawić, pozwolić na to poleceniem style="float: left".
Zalecane jest także dopisanie drugiego parametru dla osób, które z jakichś powodów nie widzą obrazka - parametr alt. Wiersz 11 w całości wygląda tak:
Jak zauważasz zastosowany został tutaj styl w obrębie znacznika. Większość elementów określamy w arkuszu stylów, ale dla pojedynczych elementów możemy to zrobić bezpośrednio w znaczniku. Oczywiście najważniejszy jest ten wpis. Gdybyśmy tę samą właściwość określili w arkuszu stylów i w znaczniku, to przeglądarka wyświetli ustawienia określone w znaczniku.
Wciśnij klawisz enter, bo do nagłówka jeszcze wrócimy. Drugi obrazek wstawimy w divie lewak. Będzie on znajdował się poniżej menu. Dlatego dodatkową linie wstawimy powyżej tego obrazka. Obrazek nazywa się grafmen i jest także animowanym gifem. Chciałbym, aby ten obrazek znalazł się na środku. Zastosujemy do tego niezalecany znacznik center. Po uwzględnieniu naciśnięć klawisza enter odpowiedni fragment wygląda następująco:
I na koniec wstawimy obrazek w stopce, który także wyrównamy do lewej krawędzi. Obrazek jest typu png i nazywa się sto_rok