初心者向けのこの無料のインタラクティブなコースでHTML5を学ぶ

HTMLは、アクセスするWebサイトのコンテンツをカプセル化するため、Webのコアビルディングブロックの1つです。しかし、その大きな影響にもかかわらず、実際にそれがどのように機能するかを知っている人はほとんどいません。

そこで、世界の技術リテラシーを向上させるために、開発者、デザイナー、教師のEric Tiradoと協力して、HTML5に関する無料のコースを作成しました。

画像をクリックしてコースページに移動します

コース全体を通して、Ericは、Webサイトの構築方法を示しながら、初心者からHTMLに習熟している人まであなたを案内します。そして最良の部分は、コースを完了するのに1時間もかからないということです。

それがどのように構築されているかを見てみましょう。

授業内容

このコースには、14のインタラクティブなスクリーンキャストが含まれています。各キャストはHTMLのコアコンセプトを処理し、ほとんどは3〜6分です。それらのいくつかでは、Scrimbaプラットフォームで可能であるように、コードに飛び込んで自分で実験することが推奨されます。

レッスン1:ウェブの紹介

まず、Web全般について少し説明し、クライアント、サーバー、およびブラウザーが話す3つの言語(HTML、CSS、JavaScript)について説明します。

これにより、ワールドワイドウェブでのHTMLの全体的な役割をよりよく理解できるため、次のレッスンの良い基盤が得られます。

レッスン2:HTMLドキュメントの作成

次のステップは、最初のHTMLドキュメントを作成することです。この講義では、HTMLファイルがどのように機能するかを説明し、ブラウザのURLバーの簡単な入門書も提供します。

レッスン3:要素のネスト

ネストはHTMLの重要な概念であるため、3番目のレッスンで説明します。ネストとは、基本的に、タグを相互にネストできることを意味します。HTML要素をネストするには、別のHTML要素の開始タグと終了タグの間に追加するだけです。

レッスン4:ヘッド要素とスクリプト

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

head要素は、タグ自体の後の最初のHTMLタグです。これはメタデータのコンテナであり、多くの場合、タイトル**、**文字セット、スタイル、リンク、スクリプト、およびその他のメタ情報を定義します。

したがって、この講義では、上記のスニペットに示されているように、メタタグにさまざまなコンテンツタイプを入力する方法を学習します。

レッスン5:レイアウト要素

HTML5は、HTMLをよりセマンティックにする一連のレイアウト要素を導入しました。これらの新しいタグは、やなどの最も一般的に使用されるレイアウト要素の意味を強化するようになりましたが、過去には、使用するような意味のない要素しかありませんでした。このスクリーンキャストでは、最も有用で重要なものを学習します。

レッスン#6:図と画像の要素

画像はほとんどすべてのウェブサイトの中核部分です。この講義では、サイトに画像を追加する方法と、画像にキャプションを追加する方法を学習します。

レッスン7:動画の埋め込み

YouTubeの動画がウェブのいたるところにあることに気づいたかもしれませんね。youtube.comだけではありません。これは、Web上の他の場所からページにメディアを埋め込むためのHTML機能の1つによって可能になります。このレッスンでは、YouTubeなどのサイトからのビデオとビデオファイルから直接ビデオを埋め込む方法について説明します。

レッスン#8:ナビゲーションバーとリストアイテム

この講義では、順序付けされていないリストとリストアイテムを使用してナビゲーションバーを作成する方法を学習します。これには、当サイトのヘッダーとサイドバーで使用するための水平ナビゲーションバーと垂直ナビゲーションバーの両方が含まれます。

レッスン#9:見出し

見出しはタグを使用して作成されます。*記号は1から6までの数字に置き換えられます。数字が増えるとヘッダーの重要性が低下します。つまり、

これは、ページの最も重要なタイトルまたはテキストに通常使用するものです。

レッスン#10:段落とテキストの書式設定(パート1)

ウェブサイトを構築するためには、テキストのフォーマットも知っておくことが重要です。この講義では、その基本を学びます。WordやPagesなどのテキストプロセッサから、ここで多くの概念を認識できるでしょう。

レッスン#11:テキストの書式設定(パート2)

このレッスンでは、テキストの大きなブロックに影響を与えるタグを使用して、書式設定について詳しく学習します。この例は 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.