A HTML az egyik legfontosabb építőköve a webnek, mivel az Ön által felkeresett webhelyek tartalmát foglalja magában. Hatalmas befolyása ellenére azonban csak nagyon kevesen vannak tisztában a működésével.
Tehát a világ technológiai műveltségének javítása érdekében összefogtunk Eric Tirado fejlesztővel, tervezővel és tanárral, és létrehoztunk egy ingyenes tanfolyamot a HTML5-en.
A tanfolyam során Eric a kezdőktől a HTML ismeretekig vezet, miközben megmutatja, hogyan kell webhelyet építeni. És a legjobb az egészben: kevesebb mint egy órát vesz igénybe a tanfolyam elvégzéséhez!
Most nézzük meg, hogyan épült fel.
Tanfolyam tartalom
A tanfolyam 14 interaktív screencast tartalmaz. Mindegyik szereplő a HTML alapkoncepcióját kezeli, és a legtöbb három és hat perc között van. Néhányukban arra ösztönzik, hogy ugorjon be a kódba, és kísérletezzen saját maga számára, mivel ez a Scrimba platformmal lehetséges.
1. lecke: Bevezetés az internetre
Azzal kezdődik, hogy egy kicsit megtanít a webről általában, megnézi az ügyfeleket, a szervereket, és a három böngésző beszél: HTML, CSS és JavaScript.
Ez jó alapot ad a következő órákhoz, mivel jobban meg fogja ismerni a HTML általános szerepét a világhálón.
2. lecke: HTML dokumentum létrehozása
A következő lépés az első HTML dokumentum létrehozása. Ez az előadás elmagyarázza a HTML fájlok működését, és egy gyors alapozót ad a böngésző URL-sávjához.
3. lecke: Fészekrakó elemek
A fészkelés kritikus fogalom a HTML-ben, ezért a harmadik lecke foglalkozik vele. A fészkelés alapvetően azt jelenti, hogy egymásba ágyazhatja a címkéket. HTML elem beágyazásához egyszerűen adja hozzá egy másik HTML elem nyitó és záró címkéi közé.
4. lecke: Fej elemek és szkriptek
Learning HTML h1 { text-align: center; } document.getElementById("h1").innerHTML = "Hello Universe!"; A head elem az első HTML- címke maga a címke után . Ez a metaadatok tárolója, és gyakran meghatározza a címet **, ** a karakterkészletet, a stílusokat, a linkeket, a szkripteket és más metainformációkat.
Tehát ebben az előadásban megtudhatja, hogyan töltse fel a metacímkét egy csomó különféle tartalomtípussal, amint az a fenti részletben látható.
5. lecke: Elrendezési elemek
A HTML5 egy csomó olyan elrendezési elemet vezetett be, amelyek szemantikussá teszik a HTML-t. Ezek az új címkék most megerősítik a leggyakrabban használt elrendezési elemek jelentését, például, és , míg a múltban csak értelmetlen elemünk volt, mint a használni kívánt. Ebben a képernyőn megtudhatja a leghasznosabbakat és a legfontosabbakat.
6. lecke: Ábra és kép elemek
A képek szinte az összes weboldal központi részét képezik. Ebben az előadásban megtudhatja, hogyan kell képeket hozzáadni a webhelyhez, és azt is, hogy miként adhat hozzá feliratokat.
7. lecke: Videók beágyazása
Talán észrevette, hogy a YouTube-videók az egész interneten vannak, igaz? Nem csak a youtube.com oldalon. Ez a HTML egyik funkciójának köszönhető, amely lehetővé teszi a média beágyazását az internet más oldalaira. Ebben a leckében kitérünk a videók beágyazásának módszereire olyan webhelyekről, mint a YouTube, és közvetlenül egy videó fájlból is.
8. lecke: Navigációs sáv és elemek felsorolása
Ebben az előadásban megtudhatja, hogyan kell felépíteni a navigációs sávot rendezetlen lista és listaelemek felhasználásával. Ez egy vízszintes és egy függőleges navigációs sávot is magában foglal, webhelyünk fejlécében és oldalsávjában történő használatra.
9. lecke: Fejlécek
A címsorok a címke használatával jönnek létre , ahol a * jelet 1 és 6 közötti számokkal kell helyettesíteni. A fejléc fontossága a szám növekedésével csökken, vagyis
az, amelyet általában az oldalad legfontosabb címéhez vagy szövegéhez használsz.
10. lecke: Bekezdés és szöveg formázása (1. rész)
A szöveg formázása szintén fontos a weboldalak készítéséhez, és ebben az előadásban megismerheti annak alapjait. Valószínűleg sok fogalmat fel fog ismerni az olyan szövegfeldolgozóktól, mint a Word és a Pages.
11. lecke: Szöveg formázása (2. rész)
Ebben a leckében többet megtudhat a formázásról, de olyan címkékkel, amelyek nagy szövegtömböket érintenek. Ilyen például a 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
You’ll also be exposed to the
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
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.
