本講座の目次があります。
僕があまりにもコンテンツを作らなすぎたため、最近ottfoekstに蔑まれてきました。というわけで、しぶしぶマークアップ講座を開始しようと思います。ただ不定期 ですので、記事が溜まるまで期待しない方がいいです。のちのちのコンテンツの下書きみたいなもんです。あと、初心者向けなことを考えてWindowsユーザーを想定しております。
はい、それでは早速第２回の講座に入って行きましょう。
その１．いきなり作るその前に
ちょっと準備をしましょう。デスクトップ（パソコンに起動したときに見える、壁紙があったりアイコンとかが並んでいる画面）に新しいフォルダを作ります。それでは、デスクトップを表示してください。
今見てるこのページが邪魔で見えないって方いますか？ もし、それで困っていたら、次の作業を最後まで読んでから試してみてください。まず、右上に３つ並んでいるボタンの左端を押せば隠れます。そして、画面下に「[未完成版]ウェブ...」と書いているところを押せば元に戻ります。他のウィンドウも同じ操作で隠したり戻したりできます。
それでは、デスクトップの何もないところにマウスを持って行ってマウスの右のボタンを押しましょう。するとメニューが出てきますので「新規作成」→「フォルダ」としフォルダを作ります。「新しいフォルダ」もしくは「新しいフォルダ（数字）」という名前のフォルダが出来ましたね？ そのサイトに「ウェブサイト作成講座」と名前をつけてください。パソコンに詳しい人はそのフォルダを好きなところに移動してくれて結構です。
これから作るファイルは全てそのフォルダに保存していきます。
その１．とりあえず１ページ作っちゃおう！
いきなり実践です。今回は作ったページを自分のパソコンで見るところまでやっちゃいましょう。公開は第５回ぐらいかな？ 多分。
まあ、なんにしてもウェブサイトを作るには文章がいるわけです。今回は練習用に僕が書いておきました。
今日の日記
今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。
そして、朝ご飯（＝昼ご飯）に親子丼を食べました。
まあ、短いですがこんなのでいいです。これを、メモ帳にコピーしてみてください。
次に、この文章を次のように分類していきます。
<ここからタイトル>今日の日記<ここまでタイトル>
<ここから段落>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。<ここまで段落>
<ここから段落>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。<ここまで段落>
ええと、分類というのは分かりにくいでしょうが、例を見れば分かっていただけたでしょうか？ この記事では「タイトル」と「段落」だけですが、他にも「表」「箇条書き」とか色々あります。
ここで、重要なことを２つ言います。
まず、全てのウェブページにはタイトルを必ず一個つけないとけません。１個もなくても２個以上あってもダメです。世の中に何について書かれているか分からない文章ほど奇妙なものはありません。
そして、もう一つ。どこにも分類されていない、仲間はずれの部分を作ってはなりません。どこにも属さないということは、何にも意味を持たないということと同じですので文章中には無いはずです。デザイン上必要なものが含まれてるのかもしれませんが、それはまたいつか対処法を述べます。
これで文章を分類することができたのですが、これを機械の言葉に翻訳しましょう。難しいことではないので、安心してください。
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
この例を見ながら機械語を解読していきましょう。「<title>今日の日記</title>」に注目してください。タイトルにしたい文字の前後が<title>と</title>で書かれています。さっき分類したやつと見比べると<ここからタイトル>は<title>に、<ここまでタイトル>は</title>に変わってるだけのようです。
同じく段落のところも見ていきましょう。段落にあたる部分を<p>と</p>で囲んでいますね。pはparagraph（英語で段落）の省略です。
つまり、<分類>の部分からその分類の部分が始まっていて、</分類>のところでその分類の部分が終わっていることが分かります。ですから、<分類>を開始タグ、</分類>を終了タグといいます。そして開始タグと終了タグを合わせてタグといいます。
さて、これでウェブページを作る作業は殆ど終了したのですが、大きな問題が発生しました。<title>だとかごちゃごちゃと書きましたが、世の中には<分類>ほげほげ</分類>という形でパソコンにメッセージを与えるファイルがたくさん有るのです......。この書き方は色んなものを指定するのにかなり便利なのでね。
もしかしたら、このファイルがウェブページだと思ってくれないパソコンも有るかもしれません。なんとかして、このパソコンにこのファイルがウェブページであるということを宣言しないといけません。
そこで、文章の頭に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">と書いておきます。
えっと、これは覚えなくていいです。めちゃくちゃややっこしいですし、必要なときにここからコピーしてくれればＯＫです。
ただ、一応知りたい人の為に、これを日本語に翻訳すると
「この書類の形式（DOCTYPE)はHTMLという形式のバージョン4.01です。W3Cという人がこの仕様を考えて、その仕様は英語(EN)で公開(PUBLIC)されています」
というような感じです。
んでもって、さっきさらっとHTMLと書きました。そう、今書いた機械語はHTMLと呼ばれるものです。よく使う言葉ですので覚えておきましょう。そして、できあがりです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>今日の日記</title>
<p>今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。</p>
<p>そして、朝ご飯（＝昼ご飯）に親子丼を食べました。</p>
このように、宣言やタグをつけることを文章をマークアップすると言います。
最後に、これを保存します。最初に作った「ウェブサイト作成講座」フォルダに「nikki1.html」という名前で保存してください。そして、できたファイルをダブルクリックして開きます。
今日は朝起きたら昼でした。とても不思議です。ぶっちゃけこまります。
そして、朝ご飯（＝昼ご飯）に親子丼を食べました。
と表示されていたら、成功です。次のステップに進みましょう。タグがそのまま表示されてたら、どこか設定がおかしいです。パソコンの設定（主に拡張子関連）を見直してみましょう。
その２．まとめ
- HTMLという言語をつかってウェブページをつくる
- HTMLには<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">というドキュメントタイプの宣言を一番最初に書いておく。
- 開始タグ<分類>と終了タグ</分類>を併せてタグという。
- タグを使って文章を分類する。
- titleタグは文章中に必ず一つ必要！
- タグによって分類されていない部分があってはならない。
- 文章にタグや宣言をつけることをマークアップするという。
その３．問題（やらなくても問題ないです）
問１．以下の文章を、今日習ったタグなどでマークアップしてウェブページを作ってみよう。
40000Hit!本日Petankoのアクセスが40000ヒットを迎えることができました。
いつもご愛読ありがとうございます。
次はキリ番44444ヒットが待っています。だれが、この縁起の悪い数字をとり見事死亡フラグを立てることができるのでしょうか。楽しみですね。
では、みなさん！ はりきって44444を奪い合いましょう！
問２．自分の日記を書いてみよう。また、その日何を食べたかについて触れておこう。
問３．問１でつくった日記に自分でタグをつけてみよう。できたら、「ウェブサイト作成講座」フォルダに「nikki2.html」という名前で保存しておこう。（答えはまとめを参考に）
問４（予習）．日記で書いた食べ物について、作り方を簡単にメモっておこう（想像でもＯＫです）。パソコンに画像を取り込む技術のある人は、その食べ物の写真をとっておくとなおいいです。
～未完成版講座のロードマップ～
講座１．ウェブサイトを作るのに必要なパソコンの設定
講座２．まずはつくってみよう（ＨＴＭＬの最小構成）
コラム１．そもそもなんでＨＴＭＬなんかいるのよ（ＨＴＭＬの意義と歴史。現在のXHTMLへの流れ）
講座３．文章をいろいろ分類しよう（ブロックレベル要素について/正式文法）
講座４．リンクを張ろう！ 画像をいれてみよう！（インライン要素について）
講座５．公開してみよう。
講座６．簡単なデザインをしてみよう！（初級ＣＳＳ。h1,h2...のデザインをかえてみる。背景を買えてみるなど）
コラム２．デザインが面倒臭いです（構造とデザインの分離）
----ここまでを初級編とする予定----
～あとがき～
正直難しすぎたかなと思う。第一草案ということでとりあえず書いてみましたottの意見聞いて増やしたり減らしたりするにもとりあえず文章がないと話になりませんし。
さて、この文章を見て気づかれた方もいるかとは思いますが、この講座のコンセプトとして、
<html>
<head>
<title>Sample1</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
式のHTMLの払拭というものがあります。意味のあるHTMLに最小限必要な物は
- DTD宣言
- １つのtitle要素
- 文章の内容
コメントする