HTML入門【第3版】
HTMLの基本を学ぶ: ウェブ制作の第一歩を踏み出そう
プレミアム
合計時間:02:51:32
コース紹介動画
学習内容
主な学習トピック
- HTMLの基本構造と構文
- HTMLの歴史と主要なバージョン
- 開発環境のセットアップ(Google Chrome, Visual Studio Code)
- HTML文書の作成と構造化
- 主要なHTMLタグとその使用方法
- HTML文書のインデント、改行、コメントの書き方
- HTMLにおけるリスト、画像、リンクの扱い
- HTML文書のバリデーションとデバッグ
コース概要
このコースは、HTMLの基本から始まり、Webページの構造化、主要なHTMLタグの使用、文書のインデントやコメントの方法まで幅広くカバーします。また、HTML文書のデバッグやバリデーションについても学びます。
学習に必要な要件
- 基本的なコンピュータ操作スキル
- インターネットへのアクセス
- Google Chromeブラウザ
- Visual Studio Codeエディタ(コース内でインストールガイド提供)
このコースのターゲット
- HTMLに興味がある初心者
- Web開発の基礎を学びたい方
- 自分のWebサイトを作成したい方
バージョン情報
- HTML5を中心に解説
- Google Chrome(最新版)
- Visual Studio Code(最新版)
更新履歴
- 2023/12/12 新規公開
レクチャー一覧
- 学習の準備をしよう
-
1. イントロダクション - 学習の準備をしよう02:29
- 学習の準備をしようの概要
- 学習の準備をしようについての主な学習の流れ
- 動作確認環境について
-
2. Google Chromeをインストールしよう01:01
- Google Chrome のインストールについて
-
3. Visual Studio Codeの概要を知ろう02:12
- Visual Studio Code(ビジュアルスタジオコード)とは
- Visual Studio Code についての補足①
- Visual Studio Code についての補足②
-
4. 【macOS】Visual Studio Codeのインストール01:33
- 【macOS】Visual Studio Code のインストールについて
-
5. 【Windows】Visual Studio Codeのインストール02:13
- 【Windows】Visual Studio Code のインストールについて
-
6. Visual Studio Codeを日本語化しよう01:56
- Visual Studio Code の日本語化について
- HTMLの基本を習得しよう
-
7. イントロダクション - HTMLの基本03:08
- HTML 入門の概要
- HTML について
- ハイパーテキスト について
- マークアップ言語について
- HTML 入門の学習の流れ
-
8. HTMLの歴史を知ろう02:51
- HTML の歴史と関連情報について
- HTML 開発経緯について
- 主要な HTML のバージョン
- HTML5 について
- W3C(ダブリュースリーシー)について
-
9. HTMLの基本構文を知ろう02:06
- HTML の基本構文について
- p 要素について
- HTML の基本構文についての注意点
-
10. HTML文書の基本構造を知ろう04:07
- HTML 文書の基本構造について
- 実際の HTML 文書の例
- 要素の入れ子とドキュメントツリーについて
-
11. 【macOS】はじめてのHTMLを書こう①06:53
- 【macOS】HTML の書き方について
- 【macOS】HTML ファイルについて
-
12. 【macOS】はじめてのHTMLを書こう②09:43
- 【macOS】HTML タグに関する補足①
- 【macOS】HTML タグに関する補足②
-
13. 【Windows】はじめてのHTMLを書こう①06:14
- 【Windows】HTML の書き方について
- 【Windows】HTML ファイルについて
-
14. 【Windows】はじめてのHTMLを書こう②08:02
- 【Windows】HTML タグに関する補足①
- 【Windows】HTML タグに関する補足②
-
15. 技術ドキュメント MDNの使い方を知ろう03:01
- 技術ドキュメント MDN について
-
16. HTML文書のインデントと改行をしよう02:48
- HTML 文書のインデントと改行について
- ソースコードを記述する時のポイント
-
17. 【macOS】Visual Studio Codeの設定 をしよう10:12
- 【macOS】Visual Studio Code の基本的な設定について
- 【macOS】Visual Studio Code のタブの設定
- 【macOS】Visual Studio Code の emmet の日本語設定
- 【macOS】Visual Studio Code の不可視文字の表示
- 【macOS】Visual Studio Code の全角スペースの表示
- 【macOS】Visual Studio Code の構文チェック機能の追加
- 【macOS】Visual Studio Code の HTML フォーマッタ
- 【macOS】Visual Studio Code のよくある質問について
-
18. 【Windows】Visual Studio Codeの設定 をしよう08:15
- 【Windows】Visual Studio Code の基本的な設定について
- 【Windows】Visual Studio Code のタブの設定
- 【Windows】Visual Studio Code の emmet の日本語設定
- 【Windows】Visual Studio Code の不可視文字の表示
- 【Windows】Visual Studio Code の全角スペースの表示
- 【Windows】Visual Studio Code の構文チェック機能の追加
- 【Windows】Visual Studio Code の HTML フォーマッタ
- 【Windows】Visual Studio Code のよくある質問について
-
19. Live Serverの使い方を知ろう03:45
- 拡張機能 Live Server の使い方について
- Live Server のメリットについて
-
20. よくあるHTMLの記述間違いを知ろう05:22
- よくある HTML の記述間違いについて
- よくある HTML の記述間違いに関する補足
-
21. 演習:HTMLのエラーを取り除く01:56
- HTML のエラーを取り除く演習
-
22. 演習解答:HTMLのエラーを取り除く02:44
- HTML のエラーを取り除く演習についての解答例
-
23. サンプルコードの活用方法を知ろう04:19
- サンプルコードの活用方法について
- プログラミングを学習する際のポイント
-
24. よくあるご質問:要素の書き順02:11
- よくあるご質問: 要素の書き順について
- 要素の書き順についての補足
- 要素の書き順についての関連情報
-
25. コメントを使おう04:39
- HTML のコメントについて
- 構文:コメントについて
- HTML のコメントについての注意点
- コメントアウトとは
-
26. 改行をしよう01:57
- HTML の改行について
- HTML の改行に関する補足
- br 要素について
- br 要素についての注意点
-
27. 区切り線を書こう01:38
- HTML の区切り線について
- hr 要素について
- hr 要素についての注意点
-
28. リストを使おう03:50
- HTML のリスト表示について
- ul 要素について
- ol 要素について
-
29. 入れ子になったリストを使おう03:26
- 入れ子になったリストの記述について
- ネスト(入れ子)とは
- ネストについての補足
-
30. 演習:リスト01:28
- リストに関する演習
-
31. 演習解答:リスト01:27
- リストに関する演習の解答例
-
32. 説明リストを使おう01:27
- 説明リストについて
- dl 要素について
- dt 要素について
- dd 要素について
- 説明リストについてのよくあるご質問
-
33. 見出しを使おう03:41
- 見出しについて
- 見出し要素のツリー構造について
- 見出しについての注意点
-
34. 属性を使って画像の表示をしよう①06:08
- 属性について
- 属性の基本構文について
-
35. 属性を使って画像の表示をしよう②03:00
- img 要素に設定できる属性について
- 属性のよくある質問について
-
36. リンク記述しよう09:14
- リンクとは
- リンクの表示について
- リンクの3つの種類について
-
37. 強調をしよう02:22
- 重要な語句とは
- 要素:strong について
-
38. 著作権表記をしよう02:33
- 著作権表記について
- 要素:small について
-
39. 情報のグループ化をしよう09:54
- 情報のグループ化について
- グループ化する時に扱う要素
- 情報のグループ化のよくあるご質問
-
40. span要素を使おう04:35
- 要素:span について
- div と span の違いについて
- 要素:span についての補足
-
41. 演習 : HTML基礎02:44
- HTML の基礎の演習
-
42. 演習解答: HTML基礎08:28
- HTML の基礎の演習解答例