W tym artykule chciałbym przedstawić Wam krok po kroku stworzenie pierwszej strony internetowej. Pominiemy w tym przypadku projekt graficzny, zajmiemy się tylko kodem HTML strony www. Ogólne założenia to witryna internetowa ma posiadać nagłówek, trzy kolumny na treść oraz element dołu strony (footer). Przyjęły się nazwy w języku angielskim a więc nagłówek strony www, element odpowiedzialny za wyświetlanie topu strony nazywamy headerem, element dołu strony to footer. Panele boczne nazywamy left column oraz right column. Główny moduł odpowiedzialny za treść naszej strony nazwiemy center column. Oczywiście możemy te elementy nazywać jak nam się podoba i jak nam będzie wygodnie, ale w dobrym stylu jest nazywanie tych grup elementów HTML właśnie w ten sposób.
Osobiście unikam takiego podziału stron internetowych, na tyle kolumn, ponieważ nie wygląda to dobrze i pozostaje nam mało miejsca na treść strony www. Jednak na takim przykładzie będzie można pokazać możliwości i nie kiedy musimy budować w ten sposób stronę www np. w przypadku jakiś rozbudowanych serwisów internetowych.
Główne zamierzenia mamy już określone a więc zabieramy się za to co tygryski lubią najbardziej a więc piszemy kod HTML naszej strony internetowej.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="container" style="width:1000px; margin:auto;"> <div id="header" style="width:1000px; height:250px; background:#ed1c24; margin-bottom:20px;"> </div><!-- end header--> <div id="left_c" style="width:200px; float:left; background:#00aeef; min-height:400px;"> </div><!-- end left column--> <div id="center_c" style="width:560px; float:left; background:#a3d39c; margin:0px 20px; min-height:400px;"> </div><!-- end center column--> <div id="right_c" style="width:200px; float:right; background:#c69c6d; min-height:400px;"> </div><!-- end right column--> <div id="footer" style="width:1000px; clear:both; height:150px; background:#000; float:left; margin-top:20px;"> </div><!-- end footer--> </div><!-- end container--> |
Teraz wyjaśnię co autor miał na myśli.
Div “container” element grupujący nam wszystkie pozostałe elementy wykorzystane na naszej stronie internetowej. Określamy jego szerokość na 1000px oraz umieszczamy go na środku monitora (margin:auto). Przyjmujemy, że rozdzielczością minimalną użytkownika, który będzie przeglądał naszą stronę www to 1024 px. Chyba już nikt nie używa mniejszej rozdzielczości na komputerze stacjonarnym czy laptopie. Pozostawiamy 24 px na element odpowiedzialny za przesuwanie strony internetowej w górę i dół. Dzięki temu zabiegowi nie pojawi się suwak na dole naszej witryny internetowej. Kontener to pudełko do którego będziemy wrzucać pozostałe pudełka a całość będzie naszą strona internetową. Całą budowę strony www porównałbym do układania klocków, kontener to nasz “obszar roboczy”. Przestrzeń w zakresie której będziemy tworzyć naszą budowlę.
Div “header” – umieścimy tu nasze logo, nagłówek, menu górne, elementy graficzne np. slider. Jest to stały element praktycznie każdej strony internetowej. Określiłem tu jego szerokość, wysokość, kolor oraz odstęp, margines dolny.
Div “left_c” i “right_c” – elementy w których zamieścimy np. menu, sondy, banery reklamowe. Te elementy strony internetowej również będą stałe, a więc na każdej podstronie naszego serwisu www będą występować w tej samej formie. Moduły te “przykleiłem” do lewej i prawej strony naszego kontenera. Określiłem szerokość, kolor oraz wysokość minimalną (min-height:400px;). Moduły te samodzielnie będą się rozciągać jeśli ich zawartość będzie większa od ustalonej wysokości minimalnej.
Div “center_c” to jedyny moduł na naszej stronie www, którego zawartość będzie inna na każdej podstronie naszego serwisu internetowego. Umieścimy tam tytuł podstrony oraz treść naszej strony www. Opisałem ten element ustalając jego szerokość, kolor, wysokość minimalną, margines lewy oraz prawy a także przykleiłem go do lewej strony (float:left;), dzięki temu ten moduł będzie zachowywał się podobnie jak pozostałe dwie kolumny.
Na koniec div “footer” – stały element każdej podstrony, zawartość tego elementu nie będzie się zmieniać. Jest to moduł kończący kod naszej strony internetowej. Zwykle umieszczamy tu menu dolne, prawa autorskie czy podpis wykonawcy strony www. Określiłem szerokość, wysokość, kolor tego elementu, margines górny oraz anulowałem “przyklejanie” elementów (clear:both;). Zabieg ten pozwala na właściwe wyświetlanie strony www w praktycznie każdej przeglądarce.
Efekt naszej pracy możemy obejrzeć tutaj , na koniec warto sprawdzić czy nie popełniliśmy jakiegoś błędu tworząc naszą pierwszą stronę internetową (sprawdź poprawność).
Mamy już przygotowany szablon naszej strony, do tych elementów będziemy musieli dobudować i uzupełnić tak by całość tworzyła poprawnie napisaną stronę internetową.
Dziękuję za artykuł, już od dłuższego czasu musiałem odświeżyć sobie swoją wiedzę na ten temat
Chciałbym tutaj omówić bardziej szczegółowo podstawowe znaczniki HTML, dzięki którym będziemy w stanie zbudować nasza pierwszą stronę internetową. Oczywiście tych znaczników w kodzie strony www możemy stosować znacznie więcej ale zacznijmy od sześciu podstawowych.
Kod HTML jest językiem zrozumiałym dla przeglądarek internetowych, pozwalającym na publikację dowolnej treści w internecie. Dzięki temu kodowi budujemy strukturę całej strony www. Określamy rodzaj kodowania dla znaków, określamy gdzie ma znaleźć się logo, menu, kolumny lewa, środkowa i prawa, określa czy w ogóle jakieś kolumny będą występować na stronie www, określa dół strony (footer) i wszystkie elementy zawarte na stronie. Następnie tą strukturę opisujemy arkuszem stylów CSS, nadajemy jej …
Wybór pomiędzy Joomla a WordPress zależy od Twoich indywidualnych potrzeb i preferencji. Ważne jest również, aby samodzielnie przetestować oba systemy CMS, eksperymentować z ich funkcjonalnościami i zobaczyć, który lepiej odpowiada Twoim potrzebom. Zarówno Joomla, jak i WordPress są popularnymi systemami CMS, więc istnieje wiele zasobów, które mogą pomóc Ci w podjęciu decyzji.
Projektujemy nowoczesne, responsywne strony internetowe Olsztyn z zachowaniem standardów UX i UI. Wyposażone w system zarządzania treścią (CMS), ułatwiający aktualizację, modyfikację jak i rozbudowę strony. Bazujemy na najnowszych technologiach programistycznych. Dbamy o estetykę naszych projektów, prostotę i użyteczność oraz przejrzystą nawigację.