Podstawy HTML - dla zupełnie początkujących

Przez:, Z dnia:

Ponieważ wiele już napisano o HTML, ten artykuł będzie zwięzły.

HTML lub Hyper Text Markup Language to standardowy język znaczników do tworzenia stron internetowych. Pisanie kodu HTML jest jak pisanie dookumentu w Microsoft Word. Zamiast pisania dokumentu, plik HTML staje się stroną.

Nie przejmuj się, kod jest prosty.

Krok 1: Pobierz Sublime Text

Sublime Text jest świetnym edytorem tekstu, w którym możesz pisać i modyfikować swój kod. Zacznijmy więc od pobrania Sublime Text. Jeżeli nie chcesz pobierać Sublime Text, zawsze możesz używać Notatnika w komputerze. Aby uruchomić Notatnik w systemie Windows, wpisz "Notatnik" w polu wyszukiwania i Wybierz Notatnik.

Krok 2: Tworzenie pliku HTML

Otwórz Sublime Text i wpisz:

<h1>Hello World</h1>

Kliknij menu Plik u góry edytora, wybierz Zapisz jako, pojawi się okno dialogowe. W polu Nazwa Pliku wpisz "index.html", wybierz opcję "wszystkie pliki". Zapisz plik na pulpicie.

 

Teraz przejdź do pulpitu, kliknij dwukrotnie na Twój plik index.html, uruchomi się on w Twojej przeglądarce. Co widzisz?
Aby otworzyć plik za pomocą edytora tekstu, klinkij prawym przyciskiem myszy i wybierz "Otwórz za pomocą", następnie wybierz Twój edytor tekstu.

Krok 3: Dodaj kod podstawowy

Aby pisać HTML, musimy używać tagów. Większość tagów jest w parze z sympolem otwierającym < > i zamykającym </ >. Dla przykładu:

  • <h1> - poziom 1 nagłówka - największy priorytetowo
  • <p> - akapit

Tagi mówią przegladarce kiedy rozpocząć i skończyć konkretną informację. Wypróbujmy taga <p>. Wpisz w edytorze:

<h1>Hello World</h1>

<p>This will be one paragraph. Just like the one you would see in a book or a magazine. It will be treated by the browser as one chunk of information</p>.

Zapisz plik (możesz używać skrótu Ctrl+s w Windows lub Command+s w Mac). Teraz, przeładuj przegladarkę (lub naciśnij F5). Zawsze upewniaj się, że zapisałeś plik, jeśli tego nie zrobisz, nie zobaczysz zmian w przeglądarce.

Niektór tagi nie muszą być "zamykane". Na przykład <br/> jest "samo-zamykający" i nie trzeba pisać </br>. Ten tag tworzy nową linię. Spróbujmy:

<h1>Hello<br/>World</h1>

Inne tagi wymagają dodatkowych informacji w tagu otwierającym, na przykład tag <img>. Dodaj tę linijkę do Twojego pliku index.html.

<img src="http://www.peoplecancode.com/images/peoplecancode.png">

Zapisz plik i przeładuj przeglądarkę. Całkiem fajne, prawda?

Jak widzisz, możemy umieszczać obrazy na naszej stronie nawet jeśli nie mamy ich zapisanych na naszym komputerze. Po prostu musimu sprecyzować gdzie online znajduje się plik, resztę zrobi przeglądarka.

Krok 4: Napisz link i zagnieżdż tagi

Czasami tagi mają atrybuty. Zapewniają one dodatkowe informacje o elemencie HTML. Jednym z przykładów dodawania atrybutów jest tag, który tworzy hiperłącze. Napisz w swoim edytorze:

<a href="http://www.peoplecancode.com" target="_blank">PeopleCanCode</a>

Tutaj wymagany jest atrybut href. Ten atrybut tworzy link do adresu internetowego. Upewnij się, że adres zawiera "http://" kiedy budujesz link do innych stron.

W tagu <a> możemy również użyć atrybutu o nazwie "target". Możemy sprecyzować gdzie chcemy otworzyć nowy link: w tej samej karcie lub w nowej. Jeżeli chcemy otworzyć link w nowym oknie przeglądarki wystarczy tylko dodać "_blank". Są jeszcze inne opcje, których możesz używać z atrybutem target. Możesz zobaczyć je tutaj. Możemy dodawać więcej niż jeden atrubut w tagu; nie potrzebujemy żadnego specjalnego sposobu dodawania atrubutów, wystarczy oddzielić je spacjami. Zapisz kod, przeładuj przeglądarkę i wypróbuj właśnie dodany link.

Inną podstawową cechą HTML jest to, żę możemy zagnieżdżać tagi. Innymi słowy, możemy umieścić jeden tag wewntrz drugiego. Dla przygładu:

<p> Learning to code is <strong>easy</strong> </p>

Tekst wewnątrz taga <strong> zostanie pogrubiony.

Krok 5: Dodaj style

HTML daje nam dużą elastyczność jeśli chodzi o kształtowanie plików. Ale tak naprwadę zaczyna świecić kiedy dodamy trochę "stylu". Styl może byc dodany do prawie wszystkich tagów HTML, więc możemy zmienić sposów w jaki są wyświetlane w przeglądarce. Spróbujmy zmienić kolor czcionki:

<p style="color: red;"> Learning to code is <strong>easy</strong> </p>

Kiedy dodajemy styl do otwierającego taga <p>, zmieniamy kolor czcionki do zamknięcia tego taga. Co jeśli chcemy dodać więcej stylów?

<p style="color: red; font-size: 20px"> Learning to code is <strong>easy</strong> </p>

Wielokrotne instrukcje stylów mogą być oddzielone średnikiem. Style nie są czułe na pustą przestrzeń między wyrazami, więc, z technicznego punktu widzenia, możemy je pisać bez żadnych spacji pomiędzy.

These are the very basics of HTML syntax. It was simple, wasn't it?

To są właśnie podstawy składni HTML. To było łatwe, prawda?

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Komentarze

  • Z dnia: kdy napisał:

    What's this ( ) tag for? Some explanations will help me to understand it. Otherwise this tutorial is very straightforward.
  • Z dnia: sameer napisał:

    please let me know clearly wants to help to you .

  • Z dnia: Lukasz Muzyka napisał:

    Thanks for the question. Best is to just try it out. This text will be bold. Back in the old days we would use but new way is to use

  • Z dnia: JL napisał:

    hi, I tried the "image" code as above but the image didn't show on the browser. The code was showing as "text" (instead of the image) on the browser - just wondering if you could help? thanks!

  • Z dnia: sameer napisał:

    please try it

  • Z dnia: sameer napisał:

    Hey , any suggestion or help please ping me my email:sameersoft6@gmail.com

  • Z dnia: enishia napisał:

    how do i open my browser to see the results ?i have a mac

  • Z dnia: Jostin Parodi napisał:

    I dont see anything in all the routes :S http://pokit.org/get/?475c9d68c80d9f031f7f966ac0ef280e.jpg

Dodaj komentarz

Możesz się zalogować by skomentować