HTML הוא אחד מאבני היסוד המרכזיות של האינטרנט, מכיוון שהוא מכיל את התוכן באתרים שאתה מבקר בהם. עם זאת, למרות השפעתו העצומה, מעט מאוד אנשים מודעים למעשה לאיך זה עובד.

אז על מנת לשפר את האוריינות הטכנולוגית בעולם, חברנו למפתח, המעצב והמורה אריק טיראדו ויצרנו קורס בחינם ב- HTML5.

במהלך הקורס אריק ייקח אותך ממתחיל לבקיא ב- HTML תוך שהוא מראה לך כיצד לבנות אתר. והחלק הכי טוב הוא: ייקח לך פחות משעה לסיים את הקורס!

עכשיו בואו נסתכל על איך זה בנוי.

תוכן קורס

הקורס מכיל 14 שידורי מסך אינטראקטיביים. כל שחקנים מטפלים במושג הליבה של HTML, ורובם נע בין שלוש לשש דקות. בחלק מהם תתעודד לקפוץ לקוד ולהתנסות בעצמך, שכן זה אפשרי בפלטפורמת Scrimba.

שיעור מס '1: מבוא לרשת

זה מתחיל בללמד אותך קצת על האינטרנט באופן כללי, להסתכל על לקוחות, שרתים ושלושת השפות שבהן דפדפני האינטרנט מדברים: HTML, CSS ו- JavaScript.

זה נותן לך בסיס טוב לשיעורים הבאים, מכיוון שתבין טוב יותר את התפקיד הכללי של HTML באינטרנט.

שיעור מס '2: יצירת מסמך HTML

השלב הבא הוא ליצור את מסמך ה- HTML הראשון שלך. הרצאה זו תסביר כיצד קבצי HTML עובדים, והיא גם תעניק לך פריימר מהיר בסרגל ה- URL בדפדפן.

שיעור מס '3: אלמנטים מקננים

קינון הוא מושג קריטי ב- HTML, ולכן הוא יעסוק בשיעור השלישי. קינון בעצם אומר שאתה יכול לקנן תגים זה בזה. כדי לקנן אלמנט HTML, פשוט הוסף אותו בין תגי הפתיחה והסגירה של אלמנט HTML אחר.

שיעור מס '4: אלמנטים וסקריפטים ראשיים

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

אלמנט הראש הוא תג ה- HTML הראשון אחרי התג עצמו. זהו מיכל למטא נתונים ולעתים קרובות מגדיר את הכותרת **, ** ערכת תווים, סגנונות, קישורים, סקריפטים ומידע מטא אחר.

אז בהרצאה זו תלמד כיצד לאכלס את תג המטא בחבורה של סוגי תוכן שונים, כפי שניתן לראות בקטע הקודם.

שיעור מס '5: רכיבי פריסה

HTML5 הציג שורה של רכיבי פריסה ההופכים את ה- HTML לסמנטי יותר. תגים החדשים אלה עתה לחזק משמעות אלמנטי הפריסה הנפוצה ביותר, כמו ו , בעוד פעמים בעבר היו לנו רק אלמנט חסר משמעות כמו לשימוש. בתוכנית המסך הזו תלמדו את השימושיים והחשובים ביותר.

שיעור מספר 6: אלמנטים של איור ותמונה

תמונות הן חלק מרכזי כמעט בכל אתרי האינטרנט. בהרצאה זו תלמד כיצד להוסיף תמונות לאתר וכמו כן להוסיף כיתובים להן.

שיעור מס '7: הטמעת סרטונים

אולי שמתם לב שסרטוני יוטיוב נמצאים בכל רחבי האינטרנט, נכון? לא רק ב- youtube.com. זה אפשרי הודות לאחת מתכונות ה- HTML להטמעת מדיה בעמוד ממקומות אחרים באינטרנט. בשיעור זה אנו עוסקים בשיטות להטמעת סרטונים מאתרים כמו יוטיוב וגם ישירות מקובץ וידיאו.

שיעור מס '8: סרגל Navbar ופריטים ברשימה

בהרצאה זו תלמד כיצד לבנות את סרגל הניווט באמצעות רשימה לא מסודרת ופריטי רשימה. זה כולל סרגל ניווט אופקי וגם אנכי לשימוש בכותרת ובסרגל הצד של האתר שלנו.

שיעור מס '9: כותרות

כותרות נוצרות באמצעות התג, שם יש להחליף את הסימן * במספרים מ -1 עד 6. חשיבות הכותרת יורדת ככל שהמספר עולה, כלומר

הוא זה שבדרך כלל תשתמש בכותרת או הטקסט החשובים ביותר שלך בדף שלך.

שיעור מס '10: עיצוב פסקה וטקסט (חלק 1)

חשוב לדעת גם לעצב טקסט בכדי לבנות אתרים, ובהרצאה זו תלמד את יסודותיו. בטח תזהו הרבה מהמושגים כאן ממעבדי טקסט כמו Word ו- Pages.

שיעור מס '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

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.