{"id":10912,"date":"2021-04-09T16:49:27","date_gmt":"2021-04-09T14:49:27","guid":{"rendered":"https:\/\/infoshareacademy.com\/blog\/?p=10912"},"modified":"2024-02-06T12:10:29","modified_gmt":"2024-02-06T11:10:29","slug":"html-w-5-minut","status":"publish","type":"post","link":"https:\/\/infoshareacademy.com\/blog\/html-w-5-minut\/","title":{"rendered":"HTML w 5 minut"},"content":{"rendered":"\n

Szybki poradnik HTML dla pocz\u0105tkuj\u0105cych!<\/p>\n\n\n\n

Przypominam: 15 kwietnia o godzinie 18:00<\/strong> b\u0119dziemy kontynuowa\u0107 nasze warsztaty Pierwszy krok do IT<\/strong>. W drugim odcinku zaczniemy prawdziw\u0105 zabaw\u0119 w tworzenie stron, a to dzi\u0119ki CSS. Przygotowa\u0142em dla Was szybki refresher z HTML. Je\u015bli wolisz wersje wideo, to na dole masz link do webinaru, na kt\u00f3rym omawia\u0142em te zagadnia.<\/p>\n\n\n\n

HTML<\/h2>\n\n\n\n

HTML<\/strong> – jest j\u0119zykiem znacznik\u00f3w i stanowi podstaw\u0119 budowania stron internetowych. W skr\u00f3cie: piszemy jaki\u015b znacznik i jest on zamieniany przez przegl\u0105dark\u0119 na element, kt\u00f3ry jemu odpowiada.<\/p>\n\n\n\n

Np. napiszemy znacznik <img><\/strong> a przegl\u0105darka wy\u015bwietli nam obrazek.<\/p>\n\n\n\n

Edytor kodu<\/h2>\n\n\n\n

Kod HTMl najlepiej pisa\u0107 w Edytorze kodu<\/strong>. Edytor kodu to nic innego jak notatnik z wieloma pomocnymi funkcjami. My b\u0119dziemy u\u017cywa\u0107 Visual Studio Code<\/strong>, kt\u00f3rego mo\u017cesz pobra\u0107 za darmo tutaj<\/a>. <\/p>\n\n\n\n

Znacznik<\/h2>\n\n\n\n

Znacznik to tag otoczony dwoma znakami <<\/strong> oraz ><\/strong>. Standardowo element w HTML posiada dwa znaczniki. Otwieraj\u0105cy i zamykaj\u0105cy. Zobaczmy to na przyk\u0142adzie elementu paragrafu:<\/p>\n\n\n

\n<p>Tutaj tre\u015b\u0107 paragrafu<\/p>\n<\/pre><\/div>\n\n\n
Taki kod wstawi nam na stron\u0119 paragraf, a tre\u015bci\u0105 b\u0119dzie „Tutaj tre\u015b\u0107 paragrafu”. Jak widzisz paragraf otwierany jest znacznikiem <p><\/strong> a zamykany znacznikiem <\/p><\/strong>. Ten dodatkowy znak \/<\/strong> sprawia, \u017ce jest to znacznik zamkni\u0119cia. Prawie ka\u017cdy element musi by\u0107 zamkni\u0119ty. Prawie… bo oczywi\u015bcie istnieje par\u0119 wyj\u0105tk\u00f3w. S\u0105 elementy, kt\u00f3rych nie trzeba zamyka\u0107, ale o tym p\u00f3\u017aniej.<\/p>\n\n\n\n
Ile jest znacznik\u00f3w?<\/h2>\n\n\n\n
Ca\u0142kiem sporo, natomiast:<\/p>\n\n\n\n
    \n
  • Na pocz\u0105tku wystarczy Ci znajomo\u015b\u0107 kilku<\/li>\n\n\n\n
  • Nie musisz uczy\u0107 si\u0119 ich na pami\u0119\u0107<\/li>\n\n\n\n
  • Nie wszystkich si\u0119 u\u017cywa, a cz\u0119\u015b\u0107 u\u017cywa si\u0119 sporadycznie<\/li>\n<\/ul>\n\n\n\n
    <\/p>\n\n\n\n
    Na pocz\u0105tku wystarcz\u0105 te:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Struktura dokumentu<\/h2>\n\n\n\n
    Ka\u017cdy dokument HTML musi mie\u0107 tak\u0105 struktur\u0119:<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html>\n  <head>\n    \n  <\/head>\n  <body>\n    \n  <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    Oznacza to, \u017ce je\u015bli tworzysz nowy plik HTML, to zawsze<\/strong> zaczynasz od takiej struktury. <\/p>\n\n\n\n
    Wype\u0142nijmy powy\u017csz\u0105 strunktur\u0119 jakim\u015b przykladowym kodem:<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <title>Tytu\u0142 mojej strony<\/title>\n  <\/head>\n  <body>\n    <p>Tre\u015b\u0107 mojej strony<\/p>\n  <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    Co my tu mamy:<\/p>\n\n\n
    \n<!DOCTYPE html>\n<\/pre><\/div>\n\n\n
    Okre\u015bla wersj\u0119 HTML. Dawniej ten znacznik mia\u0142 wi\u0119ksze znaczenie, dzi\u015b po prostu musisz pami\u0119ta\u0107, \u017ce zawsze taki ma by\u0107 na pocz\u0105tku dokumentu.<\/p>\n\n\n\n
    Dalej mamy element <html><\/strong>:<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html>\n  \n<\/html>\n<\/pre><\/div>\n\n\n
    W elemencie <html><\/strong> znajduje si\u0119 element <head><\/strong>:<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <title>Tytu\u0142 mojej strony<\/title>\n  <\/head>\n<\/html>\n<\/pre><\/div>\n\n\n
    W sekcji <head><\/strong> wrzucamy wszystkie ustawienia dotycz\u0105ce strony. Nie s\u0105 one wy\u015bwietlane bezpo\u015brednio na ekranie przegl\u0105darki, ale maj\u0105 wp\u0142yw na stron\u0119. Powy\u017cej mamy dodane dwa ustawienia. <meta charset=”utf-8″><\/strong> kt\u00f3ry ustawia nam odpowiednie kodowanie pliku. W skr\u00f3cie: bez tego nie b\u0119dziemy mie\u0107 polskich znak\u00f3w w tek\u015bcie. A <title><\/strong> pozwala nam ustawi\u0107 tytu\u0142 strony. To jest ten tytu\u0142, kt\u00f3ry wy\u015bwietla si\u0119, jak najedziesz na zak\u0142adk\u0119 w przegl\u0105darce, w przypadku strony infoShare Academy wygl\u0105da on tak:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Dalej w <html><\/strong> mamy <body><\/strong>:<\/p>\n\n\n
    \n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <title>Tytu\u0142 mojej strony<\/title>\n  <\/head>\n  <body>\n    <p>Tre\u015b\u0107 mojej strony<\/p>\n  <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
    W <body><\/strong> umieszczamy ju\u017c elementy, kt\u00f3re b\u0119d\u0105 wy\u015bwietlane w przegl\u0105darce.  Jest to tre\u015b\u0107 naszej strony.<\/p>\n\n\n\n
    O strukturze w HTML my\u015bl jak o pude\u0142kach. Mamy pude\u0142ko <html><\/strong>, w kt\u00f3rym mamy dwa pude\u0142ka: <head><\/strong> i <body><\/strong>. W ka\u017cdym wrzucamy inne rzeczy:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Atrybuty<\/h2>\n\n\n\n
    Jak widzisz w sekcji <head><\/strong> element <meta><\/strong> jest jednym z tych znacznik\u00f3w, kt\u00f3re nie maj\u0105 zamkni\u0119cia. Dodatkowo posiada on atrybut<\/span> charset=”utf-8″<\/strong> w kt\u00f3rym ustawiamy dodatkowe ustawienie. W przypadku meta charset w atrybucie podajemy utf-8 czyli rodzaj kodowania pliku. Takich kodowa\u0144 jest wiele, wi\u0119c musimy powiedzie\u0107 przegl\u0105darce kt\u00f3rego ma u\u017cy\u0107.<\/p>\n\n\n\n
    Inny, bardziej czytelny przyk\u0142ad to element obrazka:<\/p>\n\n\n
    \n<img>\n<\/pre><\/div>\n\n\n
    Sk\u0105d przegl\u0105darka ma wiedzie\u0107, jaki ma wy\u015bwietli\u0107 obrazek? Musimy doda\u0107 atrybut, kt\u00f3ry wska\u017ce miejsce, w kt\u00f3rym znajduje si\u0119 obrazek. Robimy to przez dodanie atrybutu src<\/strong>. W \u015brodku atrybutu podajemy adres w internecie lub na dysku gdzie znajduje si\u0119 nasz obrazek.<\/p>\n\n\n
    \n<img src="adres_naszego_obrazka">\n<\/pre><\/div>\n\n\n
    Pod tym adresem znajduje si\u0119 logo Google: https:\/\/www.google.com\/images\/branding\/googlelogo\/1x\/googlelogo_color_272x92dp.png<\/p>\n\n\n\n
    Wystarczy wrzuci\u0107 element <img><\/strong> z atrybutem src, w kt\u00f3rym jest ten adres, aby wy\u015bwietli\u0107 logo Google na naszej stronie:<\/p>\n\n\n
    \n<img src="https:\/\/www.google.com\/images\/branding\/googlelogo\/1x\/googlelogo_color_272x92dp.png">\n<\/pre><\/div>\n\n\n
    Spr\u00f3buj!<\/h2>\n\n\n\n
    Teraz otw\u00f3rz Edytor kodu i sp\u00f3buj stworzy\u0107 swoj\u0105 pierwsz\u0105 stron\u0119, kt\u00f3ra wy\u015bwietla obrazek z logiem Google. O to lista rzeczy, kt\u00f3r\u0105 musisz zrobi\u0107:<\/p>\n\n\n\n
      \n
    • otw\u00f3rz Edytor kodu i stw\u00f3rz nowy plik<\/li>\n\n\n\n
    • skopiuj struktur\u0119 dokumentu HTML<\/li>\n\n\n\n
    • do sekcji body dodaj element obrazeka z odpowiednim atrybutem<\/li>\n\n\n\n
    • zapisz plik na pulpicie, pami\u0119taj, \u017ce pliki HTML musz\u0105 mie\u0107 odpowiednie rozszerzenie: .html <\/strong><\/li>\n\n\n\n
    • tw\u00f3j plik niech si\u0119 nazywa: home.html<\/li>\n\n\n\n
    • otw\u00f3rz sw\u00f3j plik w przegl\u0105darce i zobacz czy wy\u015bwietla si\u0119 logo<\/li>\n<\/ul>\n\n\n\n
      Co dalej?<\/h2>\n\n\n\n
      Je\u015bli chcesz, mo\u017cesz obejrze\u0107 webinar w kt\u00f3rym przechodz\u0119 na \u017cywo przez te wszystkie kroki:<\/p>\n\n\n\n
      \n