× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】HTML入門 (全22回)

最新版のレッスンはこちらから » 【最新版】HTML入門 (全24回)

ウェブサイトを作るのに必須となる、もっとも基本的な言語の基礎を学びます。文書の内容を構造的に書いていくことができます。

#01 HTMLとは何か?
2012年8月10日
大文字小文字をどう使い分けるべきか、字下げはどうすべきか、といったHTMLのコーディング規約については以下のサイトでGoogleがまとめています。学習を終えた後にざっと眺めておくと良いかと思います。
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
2012年6月15日
HTMLの標準仕様を決めているのは「World Wide Webコンソーシアム」、略して「W3C」という団体です。
http://ja.wikipedia.org/wiki/World_Wide_Web_Consortium
ただ、この団体が決めるのはあくまで標準的な仕様であって、個々のブラウザによって違った実装がされる場合があるため、Webを作った後には各ブラウザーでちゃんと想定どおりに見えているかチェックするようにしましょう。
#02 はじめてのHTML
2013年9月9日
HTML5の先頭に必ず書く「<!DOCTYPE html>」(DOCTYPE は document typeの略)ですが、W3Cの仕様によると大文字小文字は区別しません。

http://www.w3.org/TR/html5/syntax.html#the-doctype

サイトによって大文字で書かれてたり小文字で書かれてたりしますが、どちらでもよいということになります。

ただし、「!」と「D」の間に空白を入れてはいけないので、その点注意しておきましょう。
#03 headタグを理解する
2012年6月20日
そのほか有用なmetaタグといえばrobotsがあります。

<!-- 検索エンジンへのインデックスを拒否、リンク先の巡回も拒否 -->
<meta name="robots" content="noindex,nofollow">

※ ↑ これは検索エンジンに登録されなくなる記述なので、安易にコピペしないように!

meta robotsは検索エンジンにページを登録させるかどうかなどを制御するために使います。興味のある人は「meta robots」などのキーワードで検索してみてください。
#04 もっとheadタグを理解する
2012年10月5日
headタグ内でCSSとJavaScriptを読み込む際には、CSS→JavaScriptの順に記載するとページの読み込みが速くなります。これはJavaScriptは読み込みが終了して実行されるまで次の読み込みが始まらないためです(CSSは複数同時に読み込まれます)。
ページは速く表示されたほうがよいので覚えておくと良いでしょう。
2011年12月30日
faviconの作り方については以下もあわせてどうぞ。
http://www.ideaxidea.com/archives/2008/02/faviconico.html
#08 リストを作る
2013年9月9日
ul, ol, li には以下のような意味があります。

UL: Unordered List (順序のないリスト) → 箇条書きリスト
OL: Ordered List (順序のあるリスト) → 番号付きリスト
LI: List Item (リストの項目)
#14 ラジオボタンを設置する
2012年9月24日
フォームで送信された内容は、PHPでは $_POST という変数に格納されます。

チェックボックスやラジオボタンをフォームで送信する際の注意点を以下のレッスンの補足情報に掲載していますので、参考にしてみてください。

#32 フォームからのデータを受け取ろう | PHPの基礎(入門編)
http://dotinstall.com/lessons/basic_php_beginner/6832
#18 ラベルをつける
2012年2月12日
動画中、
<label for "female">
としてしまいましたが、正しくは
<label for="female">
でした(=が抜けていました)。お詫びして訂正いたします。
#20 汎用要素を作る
2012年10月31日
コンテンツが大量にある<div>要素を作ったときは、閉じタグのあとに、コメントを付けておくと便利です。
例えば以下のように書いておくと<div>要素が入れ子になったとしても対応がわかりやすくなって便利です。
<div id="main">
大量のコンテンツ
大量のコンテンツ
大量のコンテンツ
大量のコンテンツ
大量のコンテンツ
</div><!-- #main -->
#22 実体参照とは?
2013年9月9日
HTML文字参照についてはこちらもご参照ください(Wikipedia)。
http://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7