Jak zrobić stronę www? cz1.

jak zrobić stronę www

Wiesz jak zrobić stronę www?

Jeśli nie, a chciałbyś, to ten artykuł jest specjalnie dla Ciebie.
Dzisiaj zrobimy naszą pierwszą stronę internetową.
Od czystej kartki, aż do gotowej działającej strony WWW.

Na wstępie.
Nauczymy się jak zrobić stronę www typu ONE-PAGE – czyli takiej, w której wszystkie „podstrony” całe menu znajduje się na jednej stronie i tylko przewija się ją w dół, żeby przejść do innej sekcji lub klika tę sekcję w menu, a strona przewija się w to miejsce sama.
Takie zastosowanie zamiast klasycznej strony mam kilka zalet:
– Strona ładuje się tylko raz, a użytkownik może się po niej poruszać bez czekania aż się zaktualizuję po przejściu do następnej sekcji.
– Strona generuje mniej zapytań do serwera. I ostatecznie działa szybciej, choć przy większych witrynach początkowo może się ładować kilka sekund dużej niż klasyczna strona.
Ale załaduje się cała od razu i użytkownicy nie czekają na przeładowanie, co w ostateczności znacznie ją przyśpiesza.

Oprócz One-Page użyjemy też HTML(5), CSS(3) oraz Fluid layout – to jedna z technik wykorzystywana w Responsive Web Design.
O RWD już było na moim blogu Link do tego artykułu.

To tyle wstępu, a teraz do dzieła, strona się sama nie zakoduje : )

Od czego zacząć? – Czyli jak zrobić stronę www?

W kursie Jak zrobić stronę www? zakładam, że znasz już podstawy HTML – choćby z mojego kursu HTML (5) – od podstaw.
J
eśli nie – znajdziesz go tutaj.
Zakładam, że posiadasz również edytor kodu np. Notepad++
i przeglądarkę Firefox, bo na niej się skupimy kodując stronę.
Informację na temat tego gdzie pobrać Firefoxa i Notepada++
też znajdziesz w kursie HTML (5) – od podstaw.

Tak wygląda strona, którą dziś zakodujemy Demo.
Treść jest przypadkowa i w większości po łacinie, dlatego, że mamy się nauczyć jak zrobić stronę www treść może być dowolna.
Pozwoliłam sobie przygotować dla Ciebie specjalną templatkę, którą możesz pobrać.
Jest to plik, który ma dwa katalogi:
Gotowa Stronaz gotową wersją strony www oraz
Nasza pierwsza strona – na tym katalogu będziemy pracować w tym kursie.
Jest w nim folder img – z grafiką użytą w projekcie, plik index.html i plik style.css.
Otwórz proszę te dwa pliki index i style w Notepad++.
Jak widzisz plik index.html ma uzupełnione podstawowe dane:

  • DOCTYPE Html – mówi, że strona jest w języku HTML w najnowszej wersji 5.
  • lang=”pl” – mówi, że strona jest w języku polskim.
  • charset=”UTF-8″ – jest odpowiedzialne za kodowanie znaków np. polskie „ogonki”.
  • name=”Description”– to opis witryny.
  •  rel=”stylesheet” – podpina style css do dokumentu html. Dokładniej o tym za chwilę.
  • title – to tytuł strony.

Plik style.css – ma uzupełnioną tylko deklarację kolorów użytych na stronie.

Każda strona jest podzielona na dwie części HEAD(głowa) i BODY(ciało). Pierwszą z nich już mamy i myślę, że poza linijką odpowiedzialną za style CSS wszystko jest jasne.

 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

link rel -mówi, że jest to link do arkusza stylów,
type  text/css- mówi, że jest to plik tekstowy z rozszerzeniem CSS,
href – wskazuje gdzie w folderze znajduje się plik ze stylami,
media – dla jakich ekranów jest dany styl.
 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *