Schemat

with Brak komentarzy

Wszystko zaczyna się od jakichś ram. Są to ramy czasowe, przestrzenne, umysłowe itp. Ważne jest zdawać sobie sprawę z ich istnienia i działać tak jak najlepiej Wam pasuje. 

Jak przenieść PSD do HTML?

Ok. Tylko spokojnie. Wybrałaś troszkę dłuższą drogę do własnej strony www. Nic się nie obawiaj. Krok po kroku stworzysz ją, ą po drodze nauczysz się masę fajnych rzeczy, wypracujesz w sobie dobre nawyki. To jak? Zaczynamy?

Początek – HTML.

HTML. I już widzisz schody? Bez paniki. 
Aby sprawdzić, co to takiego ten HTML otwórz jakąkolwiek stronę www. A później prawym klawiszem myszy rozwiń listę, wybierz “Zbadaj”. Pojawi się okno z kodem. To (między innymi) jest HTML. Straszne? Ej, chyba nie. 

Wyjaśnijmy jedną sprawę na początku. Żeby nie było wstydu. 

HTML NIE JEST językiem programowania.

To język znaczników (ang. HyperText Markup Language, a po polsku to hipertekstowy język znaczników), który rozumie każda strona internetowa.

Struktura.

Każda strona, aby działać poprawnie, musi posiadać jedną znormalizowaną strukturę. Poniżej przykład:

<!DOCTYPE html5>
<html lang="pl-PL">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moja pierwsza strona www</title>
    <link rel="stylesheet" type="text/css" href="Styles/style.css">
  </head>
  <body>
    <header>
      <h1>Zaczynamy!</h1>
    </header>
    <main>
      <h2>Jak mam zacząć?</h2>
      <p>Najlepiej od początku. Krok po kroku stworzymy stronę.</p>
      <p>Zaczynamy pomalutku od HTML-u</p>
      <p>Drugim krokiem będzie nadanie trochę stylu i koloru, dzięki CSS.</p>
    </main>
    <footer>
      Copyright © To Co Najważniejsze 2018
    </footer>
  </body>
</html>

Co oznaczają wszystkie te słowa w “trójkątnych nawiasach”? To są owe znaczniki. Słuchajcie na temat HTML, napisano wiele książek, powstało masę kursów internetowych. Nie będę Was zanudzać tym wszystkim.

Mam jakiś projekt. Jak poniżej:

Łatwo zauważyć pewne segmenty/ sekcje. Pierwsza z nich to zdjęcie i menu u jego górnej krawędzi. Na zdjęciu mamy hasło i przycisk. Widzicie logo i malutkie ikonki social mediów? OK. To wszystko jest w pierwszej sekcji – powiedzmy – powitalnej.
Następnie co widzimy? Nagłówek, jakiś tekst i przycisk. Obok jest zdjęcie – telefon w ręce. Sekcja z telefonem (?).
Kolejno mamy: sekcję podzieloną na dwie kolumny. W jednej jest ekran komórki. Zdradzę Wam, że jeśli mamy taki ekran/ jednobarwne tło na zdjęciu telefonu/ tabletu/ laptopa to możemy tam wstawić, cokolwiek chcemy. Fajne? No, ja myślę. 😉
Lecimy dalej. W drugiej kolumnie mamy nagłówek, jakiś tekst i przycisk. Dodatkowo widzimy “ptaszki” do przesuwania wraz z numeracją stron.
Nazwijmy tę sekcję … hmmm na przykład “z artykułami”.
Poniżej tej sekcji jest sekcja galeria. Mamy podzieloną stronę na trzy części. W jednej widzimy opis, a w pozostałych zdjęcia. Zauważ, że nad zdjęciami znowu mamy znaczek do przesuwania. Prawdopodobnie jest tam więcej zdjęć, które można pooglądać.
Sekcja “Zapisz się”. Jest zdjęcie, jest nagłówek i (uwaga!) formularz do zapisu.
Sekcja “Pobierz”. Co widzimy? Nagłówek, trochę wyśrodkowanego tekstu i dwa przyciski.
I ostatnia sekcja – “Stopka”. Tu znajduje się menu składające się z trzech elementów, mamy tekst mówiący o wszelkich prawach zastrzeżonych. To po jednej stronie, a po drugiej stronie jest logo. Czyli znów mamy dwie kolumny.

Ok. Mamy już opisany cały projekt. Teraz trzeba to wszystko przepisać za pomocą HTML. A później czeka nas nadanie właściwego wyglądu, dodanie zdjęć, tła, czcionki itd.

   

Skąd to wiedzieć?

Pomyślicie sobie: “Hola, hola. Tobie to łatwo, ale dla mnie to nadal czarna magia.” Możecie przekopać tonę książek (a wiele ich jest na ten temat), ale ja polecę Wam pana Jona Duckett i jego książki. Tu można ściągnąć PDF-a. I wystarczy. Co jeszcze?

Kochani i tu wkracza internet. Szczerze prawie wszystkiego o tworzeniu stron www nauczyłam się (i nadal się uczę) z internetu, przez internet i dzięki internetowi. Serio. 

Moje dzieciństwo i młodość przypadła akurat, gdy jeszcze najpierw internetu nie było (TAK! ISTNIAŁY TAKIE CZASY! hahaha), a później chodziło się do kawiarenek internetowych. Ktoś z Was pamięta takie miejsca? Były kluby komputerowe osiedlowe, a sprzęt to był Commodore. hahahaha!  

To jest Commodore. 

Ok. Powrót do naszych czasów. Mam kilka miejsc, z których możecie ogarnąć HTML. Pomijając Udemy, Codecademy, FreeCodeCamp i Strefa Kursów, możecie zajrzeć do tutoriala od The Awwwesomes  – Html&CSS – Step by stepA tu znajdziecie, co mówi WIKI.
Warto również zajrzeć tu lub jeszcze poszukać na YouTube – to prawdziwa kopalnia wiedzy.

Kurs HTML-a od Pasji Informatyki

Godny polecenia jest też Samuraj 😉

Samuraj Programowania o HTML-u

To jeśli chodzi o internet. Jest tego mnóstwo, więc warto znaleźć sobie grupę wsparcia na FB dla całkowicie zaczynających. Im więcej głów tym więcej wartościowszej wiedzy i kontaktów. Zapiszcie się do takowej, będzie to tylko z korzyścią dla Was. I tak przechodzimy do następnego punktu.

Motywacja

Mając tak wiele nowych i niezbyt zrozumiałych rzeczy do ogarnięcia przyda Wam się jakaś motywacja do nauki i działania. Tak jak wspomniałam grupa na FB bardzo się przydaje. Co jeszcze? Ha!

Dobry plan nauki. Znacie mnie na tyle, że plan mam do wszystkiego. Jakoś lepiej mi się ogarnia rzeczywistość, jeśli ją zapiszę na papierze. Uporządkuję myśli, a wielkie cele (a takim celem jest nauka czegokolwiek) rozbiję na jak najmniejsze części. Wtedy jest to wszystko mniej straszne i wydaje się do ogarnięcia. Warto również ustalić sobie jakieś deadline każdego etapu. Ale też nie wyrzucajmy sobie, jeśli coś zajęło nam więcej czasu, niż planowaliśmy. Po prostu zmodyfikuj plan działania i … leć dalej.

Powodzenia.

Dołącz do społeczności bloga

Signup now and receive an email once I publish new content.

Wyrażam zgodę na przekazywanie moich danych osobowych MailChimp ( more information )

Twój e-mail będzie chroniony. W każdym momencie będziesz mógł/mogła się wypisać.

Follow Danuta:

Blogująca mama dwóch chłopców. Ciągle ucząca się i poszukująca pomysłu na siebie. Obecnie pogłębiająca tajniki programowania.

Latest posts from

Zostaw komentarz