Naučite HTML5 na ovom besplatnom i interaktivnom tečaju za početnike

HTML je jedan od temeljnih gradivnih elemenata weba jer obuhvaća sadržaj web stranica koje posjećujete. Međutim, unatoč velikom utjecaju, vrlo je malo ljudi zapravo svjesno kako to djeluje.

Dakle, kako bismo poboljšali tehnološku pismenost svijeta, udružili smo se s programerom, dizajnerom i učiteljem Ericom Tiradom i stvorili besplatni tečaj o HTML5.

Kliknite sliku da biste došli na stranicu tečaja

Kroz tečaj Eric će vas voditi od početnika do poznavatelja HTML-a, dok će vam pokazivati ​​kako izraditi web stranicu. A najbolji dio je: tečaj će vam trebati manje od sat vremena!

Ajmo sada pogledati kako je izgrađena.

Sadržaj predmeta

Tečaj sadrži 14 interaktivnih ekranizacija. Svaka postava obrađuje temeljni koncept HTML-a, a većina traje između tri i šest minuta. U nekim od njih potaknut ćete se da uskočite u kôd i eksperimentirate sami, jer je to moguće s Scrimba platformom.

Lekcija # 1: Uvod u web

Sve započinje tako što ćete vas naučiti malo o webu općenito, gledajući klijente, poslužitelje i tri jezika koje preglednici govore: HTML, CSS i JavaScript.

To vam daje dobre temelje za sljedeće lekcije jer ćete bolje shvatiti ukupnu ulogu HTML-a na svjetskoj mreži.

Lekcija # 2: Izrada HTML dokumenta

Sljedeći je korak stvaranje prvog HTML dokumenta. Ovo će predavanje objasniti kako funkcioniraju HTML datoteke, a također će vam pružiti brzi početni opis na URL traci u pregledniku.

Lekcija # 3: Umetanje elemenata

Gniježđenje je kritičan koncept u HTML-u, pa će biti obrađen u trećoj lekciji. Gniježđenje u osnovi znači da možete ugnijezditi oznake jedna u drugu. Da biste ugnijezdili HTML element, jednostavno ga dodajte između početne i završne oznake drugog HTML elementa.

Lekcija # 4: Elementi glave i skripte

 Learning HTML       h1 { text-align: center; }   document.getElementById("h1").innerHTML = "Hello Universe!";   

Element head je prva HTML oznaka nakon same oznake. To je spremnik za metapodatke i često definira naslov **, ** skup znakova, stilove, veze, skripte i ostale meta informacije.

Dakle, u ovom predavanju naučit ćete kako popuniti metaoznaku hrpom različitih vrsta sadržaja, kao što možete vidjeti u gornjem isječku.

Lekcija br. 5: Elementi izgleda

HTML5 je predstavio hrpu elemenata izgleda koji HTML čine semantičnijim. Ove nove oznake sada pojačavaju značenje najčešće korištenih elemenata izgleda, poput i , dok smo u prošlim vremenima imali samo besmislen element koji smo voljeli koristiti. U ovom screencast-u naučit ćete najkorisnije i najvažnije.

Lekcija # 6: Elementi slike i slike

Slike su središnji dio gotovo svih web stranica. Na ovom predavanju naučit ćete kako dodati slike na web mjesto, kao i kako im dodati naslove.

Lekcija # 7: Ugrađivanje videozapisa

Možda ste primijetili da se YouTube videozapisi nalaze na cijelom webu, zar ne? Ne samo na youtube.com. To je moguće zahvaljujući jednoj od HTML značajki za ugrađivanje medija u stranice s bilo kojeg mjesta na webu. U ovoj lekciji pokrivamo načine ugrađivanja videozapisa s web lokacija poput YouTubea, a također izravno iz video datoteke.

Lekcija br. 8: Navbar i stavke popisa

U ovom predavanju naučit ćete kako izraditi navigacijsku traku pomoću neuređenog popisa i stavki popisa. To uključuje i vodoravnu i okomitu navigacijsku traku za upotrebu u zaglavlju i na bočnoj traci našeg web mjesta.

Lekcija # 9: Naslovi

Naslovi se kreiraju pomoću oznake, gdje znak * treba zamijeniti brojevima od 1 do 6. Važnost zaglavlja opada kako se broj povećava, što znači

je onaj koji biste inače koristili za svoj najvažniji naslov ili tekst na svojoj stranici.

Lekcija # 10: Oblikovanje odlomaka i teksta (1. dio)

Formatiranje teksta također je važno znati za izradu web stranica, a na ovom predavanju naučit ćete njegove osnove. Vjerojatno ćete ovdje prepoznati puno pojmova iz procesora za tekst kao što su Word i Pages.

Lekcija # 11: Oblikovanje teksta (2. dio)

U ovoj ćete lekciji naučiti više o oblikovanju, ali s oznakama koje utječu na velike blokove teksta. Primjeri toga su element and the element.

Lesson #12: Tables (part 1)

Original text


Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.

Lesson #13: Tables (part 2)

In this lesson, you’ll learn more advanced elements in tables, like , , and . These allow you to control the elements inside the head, body and footer separately.

You’ll also be exposed to the , which allows you to add styles to specific columns.

Lesson #14: Page linking and final touches

In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.

By this point, you should have a solid understanding of HTML, and the most important tags of the language.

Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.

The Scrimba format

Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!

Here’s a gif which explains the concept:

Pause the screencast → Edit the code → Run it! → See your changes

Pause the screencast → Edit the code → Run it! → See your changes

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

So what are you waiting for? Head over to the course page and get started today!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.