Jak stworzyć swoją pierwszą stronę internetową?

Od czego zaczyna się tworzenie strony internetowej?

Wybierz tematykę strony internetowej, która będzie o tym co kochasz robić. Jest to bardzo ważne w nauce, aby uczyć się na przykładach związanych z naszymi zainteresowaniami. Ja dla celów przyszłych lekcji zakładam, że stworzę stronę dla jednostki straży pożarnej.

Zaczynamy projektowanie strony:

  1. Pierwszy etap to sprawdzenie czy jest już strona internetowa naszej straży pożarnej. W trakcie tej lekcji możesz pominąć ten etap, ale w przyszłości badaj strony internetowe klienta (stan przed zbudowaniem lepszej strony). W analizie strony musisz zwrócić uwagę na:
    • zamieszczone informacje (jaki jest zakres informacji i jak jest ona prezentowane itd.);
    • to co dobrze działa na stronie lub jest przydatne (ważne informacje, zdjęcie itd.);
    • na to co źle działa lub jest negatywne (mała przejrzystość informacji, brak informacji, pusta strona, niedziałająca wyszukiwarka itd.).

    Analiza ta powinna być w formie krótkiej notatki.

  2. Kolejny etap to sprawdzenie jak wyglądają strony internetowe innych jednostek straży pożarnej. Szczególnie szukamy duże i znane jednostki, bo powinny prezentować dobry poziom. Porównujemy tutaj naszą stronę z „konkurencją” i przygotowujemy krótką notatkę o:
    • zakresie informacji, jakie są obecne na innych stronach;
    • co lepiej u nich funkcjonuje;
    • co lepiej u nas funkcjonuje.

    Pamiętajmy, że inni też popełniają błędy. Musimy być krytyczni wobec innych stron internetowych.

  3. Dobrze przygotowane notatki są ważne, bo pozwalają włączyć innych do pracy nad stroną. Oprócz klienta może to być także osoba pracująca z nami (np. grafik, szef itd.). Notatka pozwala szybko streścić:
    • propozycję zmian dla klienta (w moim przypadku klientem jest straż pożarna);
    • problemy ze stroną (dla współpracowników wskazówka co jest do poprawienia);
    • najważniejsze założenia (dla nas i współpracowników – powinniśmy notatkę czytać co jakiś czas, aby pamiętać o głównej przyczynie zmian na stronie).

    Na późniejszych etapach notatki mogą ulec zmianom (dostosowanie do wymagań i wskazówek klienta). Warto też obie notatki połączyć w jedną (skrócona, ładniejsza graficznie), bo taką szybciej można przeczytać i przekazać do klienta.

    Niezwykle ważne jest, aby nie kopiować tekstów i zdjęć z innych stron. Prawa autorskie i pokrewne pozwalają nam wyłącznie na korzystanie z tego co sami stworzymy lub otrzymamy od straży pożarnej (oni też muszą mieć odpowiednie prawa! Nie mogą skopiować zdjęcia z internetu, gdzie widać ich samochód strażacki!). Szerzej o prawach autorskich będzie w innych wpisach.

  4. Czym jest „mapa strony”? To spis treści strony internetowej. Dzięki niemu możemy się zorientować, jakie działy ma sklep internetowy np. w dziale „zabawki” będzie poddział „lalki”. My również przygotowujemy „mapę strony” dla straży pożarnej:
    • Strona Główna
      • Dowództwo
      • Jednostki
        • Centrum
        • Zachód
        • Wschód
      • Samochody
        • Duże samochody
        • Średnie samochody
        • Inne
      • Porady
      • Kontakt

    To później konsultujemy z klientem.

  5. Każda strona pozbawiona grafiki odsłania swój szkielet, czyli informację o rozmieszczeniu elementów strony. Graficzny plan zawierający informacje o rozmieszczeniu elementów nazywamy „makietą strony”. Powinna ona zawierać:
    • miejsce menu;
    • miejsce logo firmy;
    • miejsce grafik;
    • miejsce wyszukiwarki;
    • miejsce treść wiadomości;
    • miejsce banerów;
    • miejsce stopki (np. na tym blogu to informacje na dole, które mówią kto prowadzi blog oraz jaki użyto szablon strony);
    • inne elementy strony (np.: formularz kontaktowy, czat, miejsce logowania itd.).

    Przykład makiety:

    Makieta strony, u góry logo i grafika, poniżej menu z wyszukiwarką. Jeszcze niżej po lewej stronie menu, a po prawej miejsce na treść. Najniższej stopka.

    Makieta strony nie zawiera kolorów i grafiki. Ma zobrazować rozmieszczenie informacji. Można do tego użyć kartki papieru i ołówka. Istnieją również programy do tworzenia makiet (np.: płatny Axure, bezpłatny Pencil), ale w tej lekcji skorzystamy z tradycyjnych metod.

    Uwaga! Przy projektowaniu strony internetowej pamiętaj, żeby nie umieszczać elementów strony w nietypowych miejscach, np. logo firmy na samym dole strony to bardzo rzadko wykorzystywany pomysł. Ludzie nie lubią tracić czasu na zbędnym wysiłku, dlatego staraj się umieszczać rzeczy w miejscach instynktownych dla Internauty. To nie przypadek, że logo i opis strony jest na górze. Takie umieszczenie pozwala szybko zorientować się Internaucie na jakiej jest stronie (i daje odpowiedź czy jest na właściwej stronie?).

  6. Mamy zebrane wszystkie niezbędne elementy. Teraz warto je skonsultować z klientem (straż pożarna) i sprawdzić czy jemu odpowiadają planowane zmiany. Zazwyczaj klient na początkowym etapie sam dostarcza wymagania odnośnie nowej strony, ale o tym szerzej będzie w innej lekcji. Konsultacja powinna być zawsze, bo pozwoli nam zaoszczędzić czas.

Jak się uczyć, aby były efekty?

Wiele osób uczących się tworzenia stron szybko traci wiedzę albo poddaje się po kilku lekcjach. Zanim przejdziemy do pisania kodu (czyli tłumaczenia komputerowi w jego języku co ma robić) należy omówić kwestię skuteczności nauki.

Na początku poprosiłem Cię, abyś wybrała/wybrał tematykę dla tworzonej strony. Koniecznie musi być związana z Twoimi silnymi zainteresowaniami. Tworzenie stron internetowych to narzędzie, które służy do osiągnięcia celu. Cel powinien być motorem do nauki, ale pieniądze nie zawsze dobrze spełniają ten warunek (odległy zarobek daje tylko chwilowe skupienie). Dobrze jest łączyć to z zainteresowaniami.

Mózg nie lubi być zaśmiecany zbędnymi informacjami, dlatego trzeba go oszukać. Trzeba tworzyć coś co sprawia nam przyjemność, aby podtrzymać stan dobrego nastroju (tzw. flow, strona dostępna 5 maja 2016 r.). Programowanie to narzędzie. Czy uczysz się posługiwać młotkiem, aby dobrze nim operować? Nie. Uczysz się obsługi młotka, aby zbudować coś pięknego, aby być niezależnym i wolnym itd. Samo walenie młotkiem nie sprawi Ci tyle frajdy, aby po tysięcznym uderzeniu wciąż się tym cieszyć. Po tysięcznym uderzeniu spodziewasz się konkretnych efektów.

Każda lekcja ma dać Ci konkretną wiedzę jak ulepszyć swoje dzieło!

Staram się unikać trudnego informatycznego języka i komunikować się z Tobą w sposób zrozumiały. To ma Ci pomóc wygrać, a jak czegoś nie rozumiesz – napisz w komentarzu.

Lekcje na tej stronie uczą Cię jak coś zrobić, ale 90 proc. sukcesu zależy od… ćwiczeń czyli Ciebie. Warto każdą lekcję wykonywać kilkukrotnie, aby coraz bardziej być samodzielnym (najlepiej dużo przepisywać kodu).

Co jakiś czas warto przeczytać podsumowanie każdej lekcji (streszczenie).

Będzie też lekcja o zarządzaniu czasem. Na razie odizoluj się od świata podczas nauki, wyłącz Facebooka, wycisz telefon i skup się tylko na lekcjach. Postaraj się choć systematycznie poświęcić godzinę dziennie na uczenie się (wytworzenie nawyku – potrzeba kilka tygodni), a dopiero po odrobieniu lekcji bierz się za pochłaniacze czasu (np. Facebook).

Jesteśmy leniami. Ja też nim jestem i nie raz ponoszę porażkę. Mimo to musisz po każdej porażce znów próbować przerabiać lekcję.

W tym świecie czasem trzeba sobie zrobić przerwę, ale każda przerwa oddala Cię od celu. Mi w motywacji pomaga kanał „Projekt odważ się żyć„, a tu jeden z filmów (dostępny 4 maja 2016 r.):

Warto również przeczytać wpis: Chcę zostać programistką/programistą ? jak się przekwalifikować?

Jakie są podstawy tworzenia stron internetowych?

Kod to tłumaczenie komputerowi co ma zrobić. Można tworzyć strony bez znajomości kodu. Służą do tego programy, które działają podobnie do edytorów tekstu (np. Worda). Możemy powiększać czcionkę, zmieniać kolory, dodawać zdjęcia bez znajomości kodu. Są to tzw. edytory WYSIWYG (czyli to co widzisz jest tym co dostajesz). Takie edytory przyśpieszają pracę, ale zabierają wolność w tworzeniu stron (ograniczają możliwości). Tylko nauka kodu zapewni Ci pracę przy tworzeniu stron internetowych.

Jak działają strony internetowe (w uproszczeniu)?

Wpisując adres strony internetowej Twój komputer prosi inny komputer o dostarczenie strony internetowej. Komputer, który działa 24 na dobę w Internecie i dostarcza strony internetowe to serwer.  To on wysyła do Twojego komputera stronę, która trafia do przeglądarki internetowej w postaci kodu i zdjęć. Przeglądarka odczytuje kod (tzw. interpretowanie kodu) i przerabia, a efekt jest widoczny na ekranie komputera.

Serwer potrafi również wykonywać działania (np. zapisuje dane, dokonuje obliczeń itd.), a także pobiera dane (z baz danych). Kod dla serwera powstaje w innym języku niż kod dla przeglądarki internetowej. My w tej lekcji zajmiemy się tylko kodem dla przeglądarki internetowej. Otrzymuje ona kod w językach:

  • HTML (odpowiada za strukturę strony ? czyli co w jakiej kolejności się wyświetli i czym jest ? listą, tekstem czy nagłówkiem);
  • CSS (odpowiada za wygląd strony ? czcionka, kolory itd.).
  • Javascript (odpowiada za wszelkie animacje na stronie, np. wysuwane menu. Jego możliwości są większe, ale w tej lekcji skupiamy się na podstawach).

Jest to działanie stron internetowych w uproszczeniu, ale niezbędne minimum do dalszej nauki.

Jak stworzyć najprostszą stronę na Świecie?

  1. Otwórz notatnik.
    W starszych wersjach Windowsa (np. XP) wystarczy kliknąć w lewym dolnym rogu ekranu na przycisk „Start”, a następnie w polu „Uruchom” i wpisać „Notatnik”. Po wyszukaniu należy go kliknąć.
    W nowszych wersjach Windows (np. 8) należy najechać myszką na prawy górny róg ekranu (wysunie się menu) i kliknąć „Wyszukiwanie”.  Wpisujemy notatnik i po wyszukaniu go klikamy.
  2. Wpisz do notatnika „Witaj!!!”, a następnie wybierz z menu „Plik” i „Zapisz jako”.  Znajdź pulpit (chcemy zapisać stronę na pulpicie). W polu „Zapisz jako typ” zmień na „Wszystkie pliki (*.*)”, a w polu „Nazwa pliku” wpisz „strona.html”. Kliknij, aby powiększyć:
    Nazwa pliku: strona html, a tym to wszystkie pliki
  3. Na pulpicie pojawi się plik o nazwie „strona”, przeciągnij go do przeglądarki. Zobaczysz taki efekt (kliknij, aby powiększyć):
    Strona zawiera napis Witaj!!!

Uwaga:

Strona jest dostępna tylko na naszym komputerze (zwróć uwagę na adres strony – to nie jest adres internetowy, bo nie zaczyna się od „http://”). Nasz komputer potrzebuje programu, aby móc rozmawiać z przeglądarkami internetowymi i dostarczać im tego o co go proszą (serwery mają takie programy). O umieszczaniu stron w internecie będzie inna lekcja, a teraz musimy się skupić na kodzie strony.

Przez przeciągnięcie strony do przeglądarki rozumiem kliknięcie lewym przyciskiem myszy na plik „strona.html” (na pulpicie) przeciągnięcie jej do przeglądarki internetowej (bez puszczania lewego przycisku myszy do czasu znalezienia się w przeglądarce).

Po przeciągnięciu strony do przeglądarki internetowej widzimy efekt, pomimo że nie zawiera nic poza tekstem. Dzieje się tak, ponieważ przeglądarka internetowa jest sprytna. Potrafi czytać kod i tworzyć obraz, ale też poradzi sobie z najpopularniejszymi błędami. W naszym przypadku strona jest błędna, bo brak kluczowych informacji o niej (np. jaki jest tytuł strony).

Jak napisać pierwszy kod w języku HTML?

Kod tłumaczy przeglądarce internetowej co i jak ma wyświetlić na stronie internetowej.

Język polski ma rożne okresy (staropolski, średniopolski, nowopolski, współczesny, strona dostępna 5 maja 2016 r.). Podobnie jest z językami dla komputerów, które powstawały w różnych okresach. Każda wersja języka zawiera przestarzałe i nowe elementy. My stosujemy najnowszą wersję języka HTML czyli html5 (stan na 5 maja 2016 r.).

Jak przeglądarka rozróżnia kod od zwykłego tekstu? Kod jest umieszczanym w nawiasach trójkątnych:

<kod>

Kod w nawiasach nazywa się „tagiem” lub „znacznikiem”. Po analizie kodu przez przeglądarkę jest wyświetlane to co nakazuje kod.  

Jeśli chcemy, aby przeglądarka internetowa zrobiła coś z tekstem (np. pogrubiła go) to musimy jej pokazać, gdzie się tekst zaczyna i kończy:

<kod> tekst </kod>

Zwróć uwagę, że druga para nawiasów trójkątnych ma jeszcze ukośnik(/), jest to tzw. znacznik zamykający. Pierwsza para to znacznik otwierający. Istnieje sposób, aby przekonać przeglądarkę internetową do wyświetlenia nawiasów trójkątnych (nie traktowania ich jak kodu). O tym będzie w następnych lekcjach. 

Kod w języku HTML opiera się na języku angielskim. Trzeba zapamiętać najważniejsze znaczniki, a najlepszą metoda są ćwiczenia (przepisywanie kodu, a nie kopiowanie!).

Czas na nasz pierwszy kod, który pogrubi słowo w tekście:

Stolica Kujaw to <b>Włocławek</b>.

Efekt?

Stolica Kujaw to Włocławek.

Użyliśmy znaczników:

<b>tekst </b>.

Pokazujemy przeglądarce, gdzie ma zacząć pogrubiać (<b>) tekst i gdzie zakończyć pogrubienie (</b>). Kod „<b>” rozumie przeglądarka ( „b” od ang. słowa „bold” czyli pogrubienie). Musimy się nauczyć tego znacznika jak nowego słówka podczas nauki języka obcego.

Skąd wiemy, że strona zawiera błędy?

Organizacja W3C (to ona ustanawia standardy Internetu i pracuje nad rozwojem sieci) stworzyła stronę, która sprawdza czy nasz kod w języku HTML jest zrozumiały dla komputera (poprawny). Program lub strona, która sprawdza poprawność kodu to walidator. Organizacja W3C udostępniła walidator w języku angielskim. Jest to podstawowe narzędzie programisty stron internetowych, ponieważ pozwala wykluczyć błędy (główna przyczyna źle wyświetlających się stron internetowych).

Stworzyliśmy wcześniej stronę z napisem: „Witaj!!!”. Czy zawiera błędy? Sprawdźmy.

  1. Wchodzimy na stronę: https://validator.w3.org/.
  2. Klikamy na zakładkę „Validate by Direct Input” (czyli chcemy sprawdzić kod poprzez wklejenie go):
  3. Wklejamy: „Witaj!!!”. Kliknij, aby powiększyć:
    Walidacja kodu html na stronie W3C
  4. Klikamy przycisk „Check” (czyli sprawdź).
  5. Strona zwróci nam dwa problemy („2 errors”) i trzy ostrzeżenia („3 waring(s)”). Błędy musimy zawsze poprawiać, aby przejść sprawdzenie kodu (walidację). W przypadku ostrzeżeń nie ma takiej konieczności, ale warto zwrócić uwagę przed czym jesteśmy ostrzegani. Kliknij, aby powiększyć:
    Walidator W3C zwraca dwa błędy na stronie

Jak poprawić błędy na stronie?

Błędy są spowodowane tym, że do przeglądarki internetowej nie wysyłamy podstawowych informacji o stronie.

  1. Język HTML ma różne wersje i na samym początku strony trzeba napisać jakiej wersji użyjemy. Dzięki temu przeglądarka internetowa wie czego się może spodziewać w kodzie.

    Wersje języka różnią się obecnością:

    • elementów niewspieranych (czyli znaczników, które zostały wycofane z użycia);
    • elementów nowych (czyli znaczników, które pozwalają na nowe rzeczy).

    Jest to podobne do języka polskiego, który ma elementy już nieużywane (np. waćpanna) oraz elementy nowe (np. dron). Obecnie używa się wersji języka HTML 5 – (stan na 5 maja 2016 r.), więc zawsze na samym początku strony musimy mieć wpisany poniższy kod:

    <!DOCTYPE html> 

    „Doctype” to skrót od Document Type Definition (po polsku: Definicja Typu Dokumentu), czyli upraszczając jakiej wersji języka chcemy użyć. Wersja języka HTML 5 oznacza się za pomocą tylko napisu „html”.  Trzeba to po prostu zapamiętać i zawsze wpisywać.

  2. Powiedzieliśmy już przeglądarce, że będziemy używać języka HTML w wersji 5. Teraz musimy pokazać, gdzie zaczyna się nasz kod strony, a gdzie kończy:

    <!DOCTYPE html> 
      <html>
            Witaj !!!
      </html>

    Zwróć uwagę, że kod z pkt. 1 zawsze jest pierwszy! Cały kod można wpisać w jednej linijce:

    <!DOCTYPE html>
    <html>Witaj !!!</html>

    Jednakże zalecane jest pisanie kodu w kilku linijkach i z wcięciami (nazywa się to formatowaniem kodu). Zwróć uwagę, że pierwszy kod zawiera 4 linijki i ma wcięcia przy znaczniku „<html>”, „</html>” oraz napisie „Witaj !!!”. Wcięcia w notatniku tworzymy korzystając z tabulatora (przycisk „Tab” na klawiaturze). Dzięki temu kod jest znacznie lepiej czytelny. W przyszłości wrócimy do zasad formatowania kodu.

    Początek kodu strony zaczyna się od znacznika „<html>,” a kończy na „</html>” (znacznik zamykający).  Zwróć uwagę na budowę znacznika zamykającego, który zawiera nawiasy trójkątne, ale z ukośnikiem „/”! Pośrodku kodu jest zwykły tekst (w naszym przypadku „Witaj!!!”).

  3. Książka dzieli się na główne informacje i pozostałą treść. W głównych informacjach mamy tytuł książki i autora (zazwyczaj pierwsza strona) oraz rok wydania, wydawcę, tytuł oryginału (jeżeli książka jest tłumaczona) itd. W pozostałej treści mamy już treść naszej książki. Podobnie jest zbudowana strona internetowa, która ma podział na „główną część strony” i „pozostałą część strony”.

    „Główna część strony” zawiera informację o tytule strony, autorze, opisie strony  (tylko jeden z tych elementów jest widoczny na stronie – tytuł strony) itd.  „Pozostała część strony” zawiera kod, który odpowiada za treść i wygląd strony.

    „Główna część strony” nazywa się „sekcją head” (ang. head – dosłownie „głowa” – strony). Pozostała treść mieści się w „sekcji body” (ang. body – dosłownie „ciało” – strony). Od tych nazw pochodzą znaczniki oznaczające sekcje strony:

    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
         
    Witaj!!!
      </body>
    </html>

    Zauważ budowę języka HTML. Składa się on ze znaczników otwierających (np.: <html>, <head>, <body>) i zamykających (np.: </html>, </head>, </body>). Przypomina to rosyjskie babeczki ( Matrioszki ), czyli największa babeczka zawiera mniejszą, a ta z kolei jeszcze mniejszą. Podobną konstrukcję ma język HTML czyli uproszczając – znaczniki są jak pojemniki.

    Jedem duży pojemnik HTML zawiera mniejsze (head i body), a one jeszcze mniejsze (treść „Witaj !!!”).

  4. Musimy poinformować przeglądarkę internetową i wyszukiwarki internetowe w jakim języku jest treść na stronie. W naszym przypadku piszemy po polsku.

    Można to zrobić dopisując kod:

    lang="pl"

    do znacznika „html”:

    <!DOCTYPE html>
    <html lang="pl">
      <head>
      </head>
      <body>
         Witaj!!!
      </body>
    </html>

    Zauważ, że nasz język jest oznaczony przez dwie litery „pl”. Lang to skrót słowa „language” z języka angielskiego (czyli „język”). Pojawiło się tutaj coś nowego, rozszerzyliśmy informację o znaczniku „html”. Zwróć uwagę na budowę:

    <html lang="pl">

    Znacznik html, mówi gdzie się zaczyna i kończy kod strony. Może jednak on podawać więcej informacji, np. o tym w jakim języku jest treść strony (piszemy teksty po polsku). Zwróć uwagę, że „lang” jest wpisane w środku znacznika html.

    Rozszerzamy informację o znaczniku html (lang=”pl”), a takie rozszerzenie składa się z dwóch elementów. Pierwszy to atrybut (czyli o co rozszerzamy? O język!) oraz wartości atrybutu (o jaki język? Polski!).

    <znacznik artybut="wartość artybutu">

    <html lang="pl">

  5. Nasza strona potrzebuje tytułu (to on się wyświetla na zakładce w przeglądarce internetowej, jako jedyny z „sekcji head”). Dodajemy go w sekcji head (czyli w „głowie” strony).  Kod wygląda następująco:

    <!DOCTYPE html>
     
    <html lang="pl">
        <head>
         <title>
           Nasza pierwsza strona
         </title>
       
    </head>
        <body>
         Witaj !!!
       </body>
    </html>

  6. Alfabety świata różnią się od siebie (zawierają różne znaki). W celu skorzystania z naszych polskich znaków w treści strony musimy poinformować przeglądarkę, że będziemy używać odpowiedniego zestawu znaków (w przeciwnym razie polskie literków takie jak np.: ą, ę ó będą się wyświetlać błędnie na stronie).

    <!DOCTYPE html>
     
    <html lang="pl">
        <head>
         <title>
           Nasza pierwsza strona
         </title>
         <meta charset="UTF-8">
       
    </head>
        <body>
         Witaj !!!
       </body>
    </html>

    Informujemy przeglądarkę internetową, że będziemy korzystać z zestawu znaków UTF-8 (w uproszczeniu- ten zestaw zabiera nasze polskie literki).

Pełny kod strony, który nie zawiera już błędów (możemy wkleić go do walidatora):

<!DOCTYPE html>
  <html lang="pl">
    <head>
     <title>
       Nasza pierwsza strona
     </title>
    
<meta charset="UTF-8">
   
</head>
    <body>
     Witaj !!!
   </body>
</html>

Stworzyliśmy szablon strony, który jest zawsze wykorzystywany na wszystkich stronach. Nie przejmuj się jak kod wydaje Ci się trudny. Następne lekcje będą łatwiejsze, a z czasem wszystko będziesz potrafiła/potrafił napisać z głowy. Zapisz go w notatniku, tak jak było to opisane w sekcji: „Jak stworzyć najprostszą stronę na Świecie?”. Przeciągnij plik do przeglądarki internetowej. Nie widać różnicy, ale kod jest już poprawnie stworzony (przechodzi walidację).

W następnych lekcjach stworzymy kod, który będzie przypominał stronę zaprojektowaną na makiecie.

Jak sprawdzić kod źródłowy strony?

Programista powinien znać się na tworzeniu kodu dla serwera (np: Java, PHP, Ruby itd.) oraz kodu dla przeglądarki internetowej (HTML, CSS, Javascript itd.). Kod dla serwera wykonuje działania (np: zapisuje dane, pobiera dane), a kod dla przeglądarki odpowiada za wygląd strony. My w tej lekcji zajmujemy się wyłącznie kodem dla przeglądarki internetowej.

Można go podejrzeć w każdej chwili. Wciśnij jednocześnie na klawiaturze: „ctrl” oraz „U”. W przyszłości będziesz kod (język zrozumiały dla komputera) też rozumieć :). Najważniejsze, że właśnie rozpocząłeś podróż po Świecie tworzenia stron internetowych.

Podsumowanie

  • Od czego zaczyna się tworzenie strony internetowej? – sprawdzamy obecną stronę oraz strony konkurencji, następnie tworzymy spis treści (mapa strony) i rysujemy szkielet strony (czyli, gdzie co będzie – makieta strona).
  • Jak się uczyć, aby były efekty? – Mózg nie lubi być zaśmiecany zbędnymi informacjami. Tworzenie stron internetowych to narzędzie, które służy do osiągnięcia celu. To właśnie cel (strona o czymś co kochamy) powinien być motorem do nauki. Bardzo ważne są ćwiczenia tego czego się nauczyliśmy.
  • Jakie są podstawy tworzenia stron internetowych? – Komputer w internecie (serwer) przesyła do komputera Internauty kod. Przeglądarka internetowa go odczytuje i na jego podstawie tworzy wygląd strony internetowej.
  • Jak stworzyć najprostszą stronę na Świecie? – Otwórz notatnik i wpisz „Witaj!!!”. Zapisz go na pulpicie z rozszerzeniem html i przeciągnij do przeglądarki internetowej. Strona internetowa będzie dostępna tylko na Twoim komputerze.
  • Jak napisać pierwszy kod w języku HTML?
    Zapisz w notatniku kod (pogrubia napis „Włocławek”):
    Stolica Kujaw to <b>Włocławek</b>.
  • Skąd wiemy, że strona zawiera błędy? – weryfikujemy poprawność kodu poprzez walidator kodu HTML.
  • Jak poprawić błędy na stronie? – Zapisz kod:

    <!DOCTYPE html>
      <html lang="pl">
        <head>
         <title>
           Nasza pierwsza strona
         </title>
        
    <meta charset="UTF-8">
       
    </head>
        <body>
         Witaj !!!
       </body>
    </html>

 

  • Podziel się na:

Zobacz również:

Dodaj komentarz

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