Budujemy od podstaw stronę internetową

Budujemy od podstaw stronę internetową

Zainstalowaliśmy pakiet XAMPP, uruchomiliśmy jego niezbędne składniki. Opcjonalnie skróciliśmy adres tworzonej strony internetowej. Znamy również najważniejsze znaczniki HTML. Zatem jesteśmy gotowi by zbudować od podstaw nową stronę internetową. Temat: Portfolio fotografa. Do dzieła!

Koncepcja strony internetowej

Ktoś mądry powiedział kiedyś:

Pracuj mądrze, a nie ciężko.

I my właśnie w taki sposób będziemy pracować nad stroną internetową dla fotografa.

Aby mądrze stworzyć stronę internetową należy dokładnie zaplanować przebieg prac. W tym celu należy wczuć się w rolę klienta szukającego fotografa na pewne wydarzenie (np. chrzest) i postawić sobie pytanie:

Co chciałbym zobaczyć na stronie internetowej fotografa?

Poniżej znajduje się przykładowa odpowiedź na powyższe pytanie:

Wchodzę na stronę internetową fotografa. Chciałbym zobaczyć kilka słów powitania na tle najlepszego zdjęcia, jakim fotograf chce się pochwalić. Chcę również zobaczyć zachętę do przewinięcia strony niżej.

Skoro zostałem przywitany chciałbym zobaczyć kto mnie przywitał – chciałbym poznać tego fotografa, przeczytać o nim kilka zdań, zobaczyć jego twarz. Gdy spotkam takie elementy na stronie z pewnością zacznę ufać temu człowiekowi.

Dodatkowo jeśli zobaczę opinie jego klientów moje zaufanie do niego z pewnością wzrośnie.

Wiem już co nieco o tym fotografie, teraz chętnie dowiem się jaki zakres usług oferuje. Zajmuje się tylko fotografią ślubną? Może będzie mógł wykonać zdjęcie do dowodu. A może sfotografuje produkty do mojego nowego sklepu internetowego?

Najważniejsza kwestia: portfolio! Chcę zobaczyć jakie ma doświadczenie, chcę poznać jego styl i wykonane przez niego najlepsze zdjęcia.

Jeśli portfolio okaże się ciekawe pewnie będę miał kilka pytań – chciałbym poznać możliwe sposoby kontaktu.

Chcąc wrócić do już odwiedzonego miejsca nie widzę innej możliwości niż skorzystanie z menu. Dobrze by było gdyby było ono cały czas widoczne.

Skoro już wiemy co chcemy zobaczyć na stronie fotografa nie pozostaje nam nic innego jak zakasać rękawy i pisać kod. Zaczynamy!

Szkielet strony internetowej z wykorzystaniem znaczników HTML

Otwieramy nasz ulubiony edytor tekstowy i w menu klikamy na Plik > Nowy. Widzimy mrugający kursor gotowy do pisania kodu HTML.

Umieszczamy w nowo otwartym, jeszcze niezapisanym pliku poniższy kod złożony z kilku podstawowych znaczników HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <p>Portfolio fotografa</p>
  </body>
</html>

Zapisujemy nową zawartość pliku – nadajemu mu nazwę index.html i umieszczamy go w katalogu C:/xampp/htdocs/portfolio (zgodnie z instrukcją tworzenia pierwszej aplikacji w języku PHP).

Następnie uruchamiamy składnik Apache pakietu XAMPP (jeśli jeszcze tego nie zrobiliśmy), po czym otwieramy naszą ulubioną przeglądarkę internetową i przechodzimy pod adres localhost/portfolio (lub inny, wybrany podczas procesu skracania adresu do tworzonej aplikacji). Naszym oczom powinna ukazać się biała strona z jednym akapitem tekstu:

Strona z jednym akapitem tekstu

Dodajemy sekcje do naszej strony internetowej

Sekcja “Powitanie”

Wchodzę na stronę internetową fotografa. Chciałbym zobaczyć kilka słów powitania na tle najlepszego zdjęcia, jakim fotograf chce się pochwalić. Chcę również zobaczyć zachętę do przewinięcia strony niżej.

Aby stworzyć opisaną sekcję w kodzie naszej strony usuwamy paragraf z tekstem, a w jego miejsce dodajemy sekcję zawierającą wspomniane wyżej elementy.

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
     <p>Portfolio fotografa</p>
    <section>
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
  </body>
</html>

Sekcja “O mnie”

Skoro zostałem przywitany chciałbym zobaczyć kto mnie przywitał – chciałbym poznać tego fotografa, przeczytać o nim kilka zdań, zobaczyć jego twarz. Gdy spotkam takie elementy na stronie z pewnością zacznę ufać temu człowiekowi.

W kolejnym kroku realizujemy powyższy opis rozbudowując kod strony o kolejną sekcję:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <section>
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
    <section>
      <h2>Kilka słów na mój temat</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo magni, doloremque.</p>
      <img alt="Fotograf Dawid Gałecki - autoportret" src="https://via.placeholder.com/80" />
    </section>
  </body>
</html>

Sekcja “Opinie klientów”

Dodatkowo jeśli zobaczę opinie jego klientów moje zaufanie do niego z pewnością wzrośnie.

Dodanie opinii klientów podniesie wiarygodność fotografa. Załóżmy, że na opinię będą się składać następujące elementy: imię i nazwisko klienta, jego zdjęcie i treść opinii. Dodajemy do kodu strony następujący fragment:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <section>
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
    <section>
      <h2>Kilka słów na mój temat</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo magni, doloremque.</p>
      <img alt="Fotograf Dawid Gałecki - autoportret" src="https://via.placeholder.com/80" />
    </section>
    <section>
      <h2>Opinie</h2>
      <img alt="Zdjęcie klienta 1" src="https://via.placeholder.com/80" />
      <p>Jan Kowalski</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <img alt="Zdjęcie klienta 2" src="https://via.placeholder.com/80" />
      <p>Adam Nowak</p>
      <p>Maxime quisquam quaerat maiores, qui fuga quibusdam con.</p>
      <img alt="Zdjęcie klienta 3" src="https://via.placeholder.com/80" />
      <p>Anna Kowalska</p>
      <p>Debitis animi explicabo velit veniam doloremque hic, qu.</p>
    </section>
  </body>
</html>

Sekcja “Oferta”

Wiem już co nieco o tym fotografie, teraz chętnie dowiem się jaki zakres usług oferuje. Zajmuje się tylko fotografią ślubną? Może będzie mógł wykonać zdjęcie do dowodu. A może sfotografuje produkty do mojego nowego sklepu internetowego?

W tym miejscu przedstawimy zakres usług, które oferuje fotograf. Dodajemy do kodu kolejną sekcję:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <section>
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
    <section>
      <h2>Kilka słów na mój temat</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo magni, doloremque.</p>
      <img alt="Fotograf Dawid Gałecki - autoportret" src="https://via.placeholder.com/80" />
    </section>
    <section>
      <h2>Opinie</h2>
      <img alt="Zdjęcie klienta 1" src="https://via.placeholder.com/80" />
      <p>Jan Kowalski</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <img alt="Zdjęcie klienta 2" src="https://via.placeholder.com/80" />
      <p>Adam Nowak</p>
      <p>Maxime quisquam quaerat maiores, qui fuga quibusdam con.</p>
      <img alt="Zdjęcie klienta 3" src="https://via.placeholder.com/80" />
      <p>Anna Kowalska</p>
      <p>Debitis animi explicabo velit veniam doloremque hic, qu.</p>
    </section>
    <section>
      <h2>Oferta</h2>
      <p>Zapraszam do zapoznania się z moją ofertą.</p>
      <p>Oferuję wykonywanie następujących rodzajów fotografii:</p>
      <ul>
        <li>Fotografia ślubna</li>
        <li>Fotografia portretowa</li>
        <li>Fotografia produktowa</li>
      </ul>
    </section>
  </body>
</html>

Sekcja “Portfolio”

Najważniejsza kwestia: portfolio! Chcę zobaczyć jakie ma doświadczenie, chcę poznać jego styl i wykonane przez niego najlepsze zdjęcia.

Portfolio fotografa to nic innego jak wykonane przez niego najlepsze zdjęcia. Dodajemy zatem do kodu strony kilka znaczników odpowiedzialnych za wyświetlanie obrazków:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <section>
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
    <section>
      <h2>Kilka słów na mój temat</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo magni, doloremque.</p>
      <img alt="Fotograf Dawid Gałecki - autoportret" src="https://via.placeholder.com/80" />
    </section>
    <section>
      <h2>Opinie</h2>
      <img alt="Zdjęcie klienta 1" src="https://via.placeholder.com/80" />
      <p>Jan Kowalski</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <img alt="Zdjęcie klienta 2" src="https://via.placeholder.com/80" />
      <p>Adam Nowak</p>
      <p>Maxime quisquam quaerat maiores, qui fuga quibusdam con.</p>
      <img alt="Zdjęcie klienta 3" src="https://via.placeholder.com/80" />
      <p>Anna Kowalska</p>
      <p>Debitis animi explicabo velit veniam doloremque hic, qu.</p>
    </section>
    <section>
      <h2>Oferta</h2>
      <p>Zapraszam do zapoznania się z moją ofertą.</p>
      <p>Oferuję wykonywanie następujących rodzajów fotografii:</p>
      <ul>
        <li>Fotografia ślubna</li>
        <li>Fotografia portretowa</li>
        <li>Fotografia produktowa</li>
      </ul>
    </section>
    <section>
      <h2>Portfolio</h2>
      <img alt="Zdjęcie 1" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 2" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 3" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 4" src="https://via.placeholder.com/80" />
    </section>
  </body>
</html>

Sekcja “Kontakt”

Jeśli portfolio okaże się ciekawe pewnie będę miał kilka pytań – chciałbym poznać możliwe sposoby kontaktu.

Dodajmy zatem do kodu wypisane możliwe formy kontaktu z fotografem:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <section>
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
    <section>
      <h2>Kilka słów na mój temat</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo magni, doloremque.</p>
      <img alt="Fotograf Dawid Gałecki - autoportret" src="https://via.placeholder.com/80" />
    </section>
    <section>
      <h2>Opinie</h2>
      <img alt="Zdjęcie klienta 1" src="https://via.placeholder.com/80" />
      <p>Jan Kowalski</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <img alt="Zdjęcie klienta 2" src="https://via.placeholder.com/80" />
      <p>Adam Nowak</p>
      <p>Maxime quisquam quaerat maiores, qui fuga quibusdam con.</p>
      <img alt="Zdjęcie klienta 3" src="https://via.placeholder.com/80" />
      <p>Anna Kowalska</p>
      <p>Debitis animi explicabo velit veniam doloremque hic, qu.</p>
    </section>
    <section>
      <h2>Oferta</h2>
      <p>Zapraszam do zapoznania się z moją ofertą.</p>
      <p>Oferuję wykonywanie następujących rodzajów fotografii:</p>
      <ul>
        <li>Fotografia ślubna</li>
        <li>Fotografia portretowa</li>
        <li>Fotografia produktowa</li>
      </ul>
    </section>
    <section>
      <h2>Portfolio</h2>
      <img alt="Zdjęcie 1" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 2" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 3" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 4" src="https://via.placeholder.com/80" />
    </section>
    <section>
      <h2>Kontakt</h2>
      <ol>
        <li>tel.: 123-456-789</li>
        <li>e-mail: fotograf@example.com</li>
        <li>www: http://www.pl</li>
      </ol>
    </section>
  </body>
</html>

Menu główne

Chcąc wrócić do już odwiedzonego miejsca nie widzę innej możliwości niż skorzystanie z menu. Dobrze by było gdyby było ono cały czas widoczne.

Menu główne jest nieodłącznym elementem każdej strony internetowej. Dodamy takie menu na stronie przed pierwszą sekcją. Dla znacznika otwierającego każdą sekcję dodamy atrybut id z unikalną wartością. Kliknięcie na odnośnik do tego atrybutu sprawi, że użytkownik zostanie natychmiast przeniesiony do wskazanego miejsca.

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio fotografa</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#start">Start</a></li>
        <li><a href="#about">O mnie</a></li>
        <li><a href="#offer">Oferta</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Kontakt</a></li>
        <li><a href="#reviews">Opinie</a></li>
      </ul>
    </nav>
    <section id="start">
      <h1>Fotograf Dawid Gałecki &mdash; Portfolio</h1>
      <img alt="Najlepsze zdjęcie" src="https://via.placeholder.com/80" />
      <p>Przewiń niżej</p>
    </section>
    <section id="about">
      <h2>Kilka słów na mój temat</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo magni, doloremque.</p>
      <img alt="Fotograf Dawid Gałecki - autoportret" src="https://via.placeholder.com/80" />
    </section>
    <section id="reviews">
      <h2>Opinie</h2>
      <img alt="Zdjęcie klienta 1" src="https://via.placeholder.com/80" />
      <p>Jan Kowalski</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <img alt="Zdjęcie klienta 2" src="https://via.placeholder.com/80" />
      <p>Adam Nowak</p>
      <p>Maxime quisquam quaerat maiores, qui fuga quibusdam con.</p>
      <img alt="Zdjęcie klienta 3" src="https://via.placeholder.com/80" />
      <p>Anna Kowalska</p>
      <p>Debitis animi explicabo velit veniam doloremque hic, qu.</p>
    </section>
    <section id="offer">
      <h2>Oferta</h2>
      <p>Zapraszam do zapoznania się z moją ofertą.</p>
      <p>Oferuję wykonywanie następujących rodzajów fotografii:</p>
      <ul>
        <li>Fotografia ślubna</li>
        <li>Fotografia portretowa</li>
        <li>Fotografia produktowa</li>
      </ul>
    </section>
    <section id="portfolio">
      <h2>Portfolio</h2>
      <img alt="Zdjęcie 1" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 2" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 3" src="https://via.placeholder.com/80" />
      <img alt="Zdjęcie 4" src="https://via.placeholder.com/80" />
    </section>
    <section id="contact">
      <h2>Kontakt</h2>
      <ol>
        <li>tel.: 123-456-789</li>
        <li>e-mail: fotograf@example.com</li>
        <li>www: http://www.pl</li>
      </ol>
    </section>
  </body>
</html>

Podsumowanie

Utworzona przez nas strona… Działa:

Działająca, ale mało atrakcyjna wizualnie strona internetowa dla fotografa

Strona jeszcze nie wygląda tak, jak powinna (z naciskiem na “jeszcze”). W następnych wpisach dowiemy się czym są arkusze styli i w jaki sposób są wykorzystywane na stronach internetowych, w jaki sposób można ułatwić tworzenie arkuszy styli oraz co pomaga utrzymać porządek przy stylowaniu elementów na stronie.

Dawid Gałecki, dn. 15.03.2021 o godz. 21:52


Znalazłeś błąd w treści wpisu, masz uwagi dotyczące tekstu albo chcesz podsunąć pomysł na kolejny artykuł? Zapraszam do kontaktu ze mną. Dziękuję!