Μάθετε HTML5 σε αυτό το δωρεάν και διαδραστικό μάθημα για αρχάριους

Το HTML είναι ένα από τα βασικά δομικά στοιχεία του ιστού, καθώς ενσωματώνει το περιεχόμενο στους ιστότοπους που επισκέπτεστε. Ωστόσο, παρά την τεράστια επιρροή του, πολύ λίγοι άνθρωποι γνωρίζουν πραγματικά πώς λειτουργεί.

Έτσι, για να βελτιώσουμε τον τεχνολογικό αλφαβητισμό του κόσμου, συνεργαστήκαμε με τον προγραμματιστή, τον σχεδιαστή και τον δάσκαλο Eric Tirado και δημιουργήσαμε ένα δωρεάν μάθημα στο HTML5.

Κάντε κλικ στην εικόνα για να μεταβείτε στη σελίδα του μαθήματος

Καθ 'όλη τη διάρκεια του μαθήματος, ο Eric θα σας μεταφέρει από αρχάριους έως ικανούς σε HTML, ενώ θα σας δείξει πώς να δημιουργήσετε μια ιστοσελίδα Και το καλύτερο είναι: θα χρειαστείτε λιγότερο από μία ώρα για να ολοκληρώσετε το μάθημα!

Τώρα ας ρίξουμε μια ματιά στο πώς δημιουργήθηκε.

Περιεχόμενο μαθήματος

Το μάθημα περιέχει 14 διαδραστικές προβολές σεναρίων. Κάθε cast χειρίζεται μια βασική ιδέα του HTML και τα περισσότερα διαρκούν μεταξύ τριών και έξι λεπτών. Σε μερικά από αυτά, θα ενθαρρύνεστε να μεταβείτε στον κώδικα και να πειραματιστείτε για τον εαυτό σας, καθώς αυτό είναι δυνατό με την πλατφόρμα Scrimba.

Μάθημα # 1: Εισαγωγή στον Ιστό

Ξεκινά διδάσκοντας λίγο για τον Ιστό γενικά, κοιτάζοντας πελάτες, διακομιστές και τις τρεις γλώσσες που μιλούν τα προγράμματα περιήγησης: HTML, CSS και JavaScript.

Αυτό σας δίνει μια καλή βάση για τα επόμενα μαθήματα, καθώς θα κατανοήσετε καλύτερα τον συνολικό ρόλο της HTML στον παγκόσμιο ιστό.

Μάθημα # 2: Δημιουργία εγγράφου HTML

Το επόμενο βήμα είναι να δημιουργήσετε το πρώτο σας έγγραφο HTML. Αυτή η διάλεξη θα εξηγήσει τον τρόπο με τον οποίο λειτουργούν τα αρχεία HTML και θα σας δώσει επίσης ένα γρήγορο πρόγραμμα εκκίνησης στη γραμμή URL του προγράμματος περιήγησης.

Μάθημα # 3: Στοιχεία ένθεσης

Η ένθεση είναι μια κρίσιμη έννοια σε HTML, οπότε θα καλυφθεί στο τρίτο μάθημα. Το Nesting βασικά σημαίνει ότι μπορείτε να τοποθετήσετε ετικέτες το ένα μέσα στο άλλο. Για να τοποθετήσετε ένα στοιχείο HTML, απλώς προσθέστε το ανάμεσα στις ετικέτες ανοίγματος και κλεισίματος ενός άλλου στοιχείου HTML.

Μάθημα # 4: Επικεφαλής στοιχεία και σενάρια

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

Το στοιχείο κεφαλής είναι η πρώτη ετικέτα HTML μετά την ίδια την ετικέτα. Είναι ένα κοντέινερ για μεταδεδομένα και συχνά ορίζει τον τίτλο **, ** σύνολο χαρακτήρων, στυλ, συνδέσμους, σενάρια και άλλες μετα-πληροφορίες.

Έτσι, σε αυτή τη διάλεξη, θα μάθετε πώς να συμπληρώνετε τη μετα-ετικέτα με μια σειρά διαφορετικών τύπων περιεχομένου, όπως μπορείτε να δείτε στο παραπάνω απόσπασμα

Μάθημα # 5: Στοιχεία διάταξης

Το HTML5 εισήγαγε μια δέσμη στοιχείων διάταξης που κάνουν το HTML πιο σημασιολογικό. Αυτές οι νέες ετικέτες ενισχύουν τώρα τη σημασία των στοιχείων διάταξης που χρησιμοποιούνται πιο συχνά, όπως και , ενώ στο παρελθόν είχαμε μόνο ένα στοιχείο χωρίς νόημα που θέλουμε να χρησιμοποιήσουμε. Σε αυτό το σενάριο, θα μάθετε τα πιο χρήσιμα και σημαντικά.

Μάθημα # 6: Στοιχεία εικόνας και εικόνας

Οι εικόνες αποτελούν βασικό μέρος σχεδόν όλων των ιστότοπων. Σε αυτήν τη διάλεξη, θα μάθετε πώς να προσθέτετε εικόνες στον ιστότοπο, καθώς και πώς να προσθέτετε λεζάντες σε αυτές.

Μάθημα # 7: Ενσωμάτωση βίντεο

Ίσως έχετε παρατηρήσει ότι τα βίντεο YouTube βρίσκονται σε όλο τον ιστό, έτσι; Όχι μόνο στο youtube.com. Αυτό είναι δυνατό χάρη σε μία από τις δυνατότητες HTML για την ενσωμάτωση πολυμέσων σε μια σελίδα από αλλού στον ιστό. Σε αυτό το μάθημα, καλύπτουμε τις μεθόδους ενσωμάτωσης βίντεο από ιστότοπους όπως το YouTube και επίσης απευθείας από ένα αρχείο βίντεο.

Μάθημα # 8: Navbar και στοιχεία λίστας

Σε αυτήν τη διάλεξη, θα μάθετε πώς να φτιάξετε τη γραμμή πλοήγησης χρησιμοποιώντας μια λίστα χωρίς ταξινόμηση και στοιχεία λίστας. Αυτό περιλαμβάνει τόσο μια οριζόντια όσο και μια κάθετη γραμμή πλοήγησης, για χρήση στην κεφαλίδα και στην πλαϊνή γραμμή του ιστότοπού μας.

Μάθημα # 9: Επικεφαλίδες

Οι επικεφαλίδες δημιουργούνται χρησιμοποιώντας την ετικέτα, όπου το σύμβολο * πρέπει να αντικατασταθεί με αριθμούς από 1 έως 6. Η σημασία της κεφαλίδας μειώνεται καθώς ο αριθμός αυξάνεται, που σημαίνει

είναι αυτό που συνήθως χρησιμοποιούσατε για τον πιο σημαντικό τίτλο ή κείμενο στη σελίδα σας.

Μάθημα # 10: Μορφοποίηση παραγράφων και κειμένου (μέρος 1)

Η μορφοποίηση του κειμένου είναι επίσης σημαντικό να γνωρίζετε για τη δημιουργία ιστότοπων και σε αυτήν τη διάλεξη θα μάθετε τα βασικά του. Πιθανότατα θα αναγνωρίσετε πολλές από τις έννοιες εδώ από επεξεργαστές κειμένου όπως το Word και οι σελίδες.

Μάθημα # 11: Μορφοποίηση κειμένου (μέρος 2)

Σε αυτό το μάθημα, θα μάθετε περισσότερα σχετικά με τη μορφοποίηση, αλλά με ετικέτες που επηρεάζουν μεγάλα τμήματα κειμένου. Παραδείγματα αυτού είναι το element and the element.

Lesson #12: Tables (part 1)

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.