#01 Podstawy HTML – wstęp do budowania pierwszego portfolio.

Po konkursie "Daj się poznać 2017" który zakończył się Galą Finałową w czerwcu nadszedł czas przerwy i sesji na studiach. Ta pauza była bardzo potrzebna - mogłam zastanowić się, co chcę robić dalej w programistycznym świecie i..... już wiem! 🙂
Moim kolejnym celem przed kolejne 1.5 miesiąca jest stworzenie własnego portfolio opartego o front-end jak również i back-end. Myślę, że warto spróbować różnych języków programowania aby zobaczyć, w czym czujemy się najlepiej.

Więc zaczynamy!
Na początku proponuję pobrać sobie program  Brackets - ja piszę mój kod w tym programie ale jeżeli chcesz zrobić to np w notatniku - to rób, ważne, aby pisać kod 😉 Pamiętaj, aby później zapisać go jako rozszerzenie .html
Szukając informacji na temat podstaw html nie znalazłam źródła, które tłumaczyłoby wszystkie podstawy od początku do końca więc postaram się przedstawić wiele informacji na temat budowania swojego portfolio.

Dzisiaj przedstawię podstawy podstaw, które możemy zrobić za pomocą html, zobaczcie sami:

Przede wszystkim, ważne jest aby każdy używany przez nas znacznik miał swój początek i koniec - np. <h1> to początek a </h2> to koniec naszego tagu.

  • Wielkość ma znaczenie - wielkość h oznacza nagłówek (h od header) i cyfrę od 1 do 6. Jeżeli użyjemy znacznika <h1></h1> to uzyskamy największą wielkość nagłówka, a <h6></h6> otrzymamy najmniejszą. Pomiędzy oznaczeniami wpisujemy treść, którą chcemy uzyskać.
    Wpisując kod:

    Otrzymujemy w przeglądarce:
  • Paragraf:
  • Komentarz
    Jeżeli chcemy zostawić jakiś komentarz a nie chcemy aby był widoczny to powinniśmy zaznaczyć początek komentarza jako <!-- a koniec -->


    Jak widać, nie widzimy naszego komentarza na stronie ale dla każdej osoby, która widzi nasz kod to równocześnie widzi nasze komentarze.
  • Nie chcę, aby cały świat był czarno-biały! Czyli pora na najprostszą zmianę koloru w HTML ( CSS zajmiemy się w kolejnym wpisie, spokojnie ;))
    Najprostsza forma zmiany koloru wygląda tak:
  • Dodanie zdjęcia:

  • Odnośnik do strony - link:

 

W kolejnym poście zaczniemy tworzyć nasze pierwsze portfolio, pozdrawiam! 😉

 

 

 

Zapraszam serdecznie do śledzenia mnie na:
Twitter
Github - piotrowinka2410

Instagram
Snapchat - piotrowinka2410
Fanpage na Facebooku 

 

 

 

2 thoughts on “#01 Podstawy HTML – wstęp do budowania pierwszego portfolio.

  • Dobry post o początkach w HTML. Widzę jednak trochę nieścisłości w tekście, które wymagają (mniejszego lub większego) wyjaśnienia.

    “np. to początek a to koniec naszego tagu.”
    Co prawda wiem, o co chodzi, jednak ze zdania mogłoby wynikać, jakby było końcem tagu . To wprowadza nieco zamieszania.

    “Wielkość ma znaczenie – wielkość oznaczamy znacznikiem zawierającym w środku literę h i cyfrę od 1 do 6. Jeżeli użyjemy znacznika to uzyskamy największą wielkość liter, a otrzymamy najmniejszą. ”
    To nie do końca jest tylko “wielkość” czcionki. Znaczniki “h” są nagłówkami (h jak header) i powinno się ich używać z rozwagą. Co prawda na początku nauki może to być nieistotne, jednak dobrze jest wiedzieć, że te znaczniki mają większe znaczenie przy marketingu internetowym (SEO). Jest zasada, że znacznik oraz powinny występować na stronie tylko raz, z kolei kolejne nagłówki mogą pojawiać się wielokrotnie (czyli np. h1 to tytuł, h2 to podtytuł, a h3 nazwy sekcji, h4 nazwy podsekcji itd.). Do samej zmiany wielkości czcionki (czyli jeśli treść nie jest na tyle ważna, żeby stawać się nagłówkiem) należy używać stylu “font-size”.

    “Jeżeli chcemy zostawić jakiś komentarz a nie chcemy aby był widoczny to powinniśmy zaznaczyć początek komentarza jako
    Tutaj także warto zaznaczyć, że komentarz nie będzie widoczny, ale tylko na samej stronie. Każdy użytkownik będzie miał dostęp do treści komentarzy w HTML, jeśli tylko wejdzie w źródło strony. Dlatego nie powinno się w takich komentarzach zawierać informacji o rzeczach, o których nie powinien wiedzieć nikt poza nami.

    Pozdrawiam i życzę powodzenia w dalszej nauce HTML-a,
    Krylan

Dodaj komentarz

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