HTML基礎

【一日でできる】初心者
のホームページ制作
～HTML（基礎）編～

シロ先生
よーし！
今回はホームページ作成に必要な基礎知識
を身に着けてもらう。
ブラック君
よろしくお願いします。
初心者ですけど、それなりにかっこいい
ホームページを作りたいと思っています！！

シロ先生
初めに、実際のホームページがどのように
書かれているのかを見てみよう。
じゃあ、自分の好きなサイトを開いてみて
ブラック君
どんなサイトでもいいんですか？
じゃあ私は以下のサイトにします。
http://itayasite.sitemix.jp/

シロ先生
そのページのソースコードを見てみよう。
「F12キー
or
右クリック→ページのソースを見る」
ブラック君
無事開けました！！が・・・
なんか暗号みたい・・・
これを書かなきゃいけないのですか？？

シロ先生
「<>」←こんな感じの記号に囲まれているのが
解かるかな？

シロ先生
「<>」←これはタグと呼ばれるもので、
このタグを用いてホームページを書いていく。

シロ先生
百聞は一見に如かず
いろいろ話すよりも、試しにやってみて
自分なりに理解した方が早いな。
ブラック君
もう作り始めるのですか？？
なんか難しいツールとかを
インストールしなきゃいけないのでは？？

シロ先生
いや、ホームページは誰もが知っていて
持っているツールで作成できる。
必要なのは「メモ帳」「ブラウザ」だ。
ブラック君
メモ帳とブラウザですか。
ブラウザって「Google Chrome」とか
「Internet Explorer」ですよね？？

シロ先生
そうだ。
ほかにも、「Fire fox」や「safari」などもある。
普段調べ物をするときに使うものだ。
ブラック君
この二つだけでいいんですか！！
だったらできる気がしてきました。
この後はどうすればいいんですか？

シロ先生
さっそくメモ帳を起動してくれ
そして、何も書かずに「名前を付けて保存」
を押してくれ。まだ保存するなよ！
ブラック君
メモ帳を起動して・・・
「ファイル」→「名前を付けて保存」っと。
ファイル名はどうするんですか？

シロ先生
そうせかすな。
名前の前に、拡張子「.txt」を変更するぞ。
「.txt」を「.html」と書き換えて。
ブラック君
書き換え終わりました！！
【ちょっとかっこいい】メモ帳の起動方法
「windows＋R」→「notepad」で起動できるよ。

シロ先生
そして、拡張子の前に自分の
好きな名前を入れて保存だ！
名前は半角英数字で入力するように。
ブラック君
じゃあ、black.html
という名前で保存します。

シロ先生
これで下準備は完了だ。
早速書いていくぞ。試しに
<title>homepage</title>と入力して保存。
ブラック君
<title>homepage</title>っと。
「ファイル」→「上書き保存」
もしくは「Control+s」で保存完了。

シロ先生
ではブラウザで見てみよう！
ブラウザを起動して、そこにドラックしてみて。
タイトルバーが「homepage」になっただろう。
ブラック君
ほんとだ！！
homepageをblackにしたら「black」になった。
意外と簡単かも。

シロ先生
HTMLとはこんな感じで、タグで囲んで書く。
タグの種類はいろいろあって・・・・。
この先は次回のHTML（実践編）で会おう！
ブラック君
これは基礎の基礎か。
これからいよいよ本格的なホームページ
になるから頑張ろう！！

Empfohlen