ここでは電算部のウェブマスターがオンライン上でHTML講座をすることにします。
暇なときに参考にしてくれれば幸いです。
といってもとても参考になるサイトのリンク集みたいな感じになりそうです。
HTMLとは何か？、それは簡単なHTMLの説明さんの、HTMLって何だで簡単かつ詳しく説明しています。
つまり、通常のテキスト（文章）には無い見出しや段落、引用等々の情報も記述し、
コンピューターにも構造を理解できるテキストを超えた超テキストなのです。
同じく簡単なHTMLの説明さんの、文章の骨格となる基本要素で簡単かつ詳しく説明してあります。
そして箱庭さんのHTMLの初歩で、具体例を取り込んだマークアップの方法を説明されています。
とてもわかりやすいので参考になります。
では我々も超テキストを作ってみましょう。仮に下記のようなテキストを作ったとします。
タイピングが好きな理由
タイピングとの出会い
私は高校入学のときにPCを買ってもらい、基本的なWindowsの操作をマスターしていきました。 キーボードで入力するのはPCの基本。キーボードでの入力が早まれば全体的に作業の効率がよいものになると考えたのです。 なのでタイピングソフトを買い集めました。
スポーツとしてのタイピングタイピングの入力速度は日に日に増しました。 練習すれば練習するほどタイピングソフト内でのスコアが上がり、自分の実力増加を実感していけたのです。 その時、「タイピングはスポーツだ」と思いました。
結論タイピングは、たびたび耳にする言葉「やればできる」を実感できるスポーツです。
さらに現在、実社会にも使える有用な技術です。
私は、これからもタイピングの練習を続けていきたい。
灯油
これに<>を使ったタグという代物で、構造を書き込んでいきましょう。
順番はフィーリングでいいのですがまずは見出しをつけます、大きい見出しは<h1>で、中見出しは<h2>
中々見出しは<h3>…と<h6>まで見出しが用意されていますが、この文には<h2>までで、よさそうです。
見出しの終わりに同じタグとスラッシュをつけて閉じます。つまりこういうことになります。
<h1>タイピングが好きな理由</h1>
<h2>タイピングとの出会い</h2>
私は高校入学のときにPCを買ってもらい、基本的なWindowsの操作をマスターしていきました。 キーボードで入力するのはPCの基本。キーボードでの入力が早まれば全体的に作業の効率がよいものになると考えたのです。 なのでタイピングソフトを買い集めました。
<h2>スポーツとしてのタイピング</h2>タイピングの入力速度は日に日に増しました。 練習すれば練習するほどタイピングソフト内でのスコアが上がり、自分の実力増加を実感していけたのです。 その時、「タイピングはスポーツだ」と思いました。
そのころからランキングやPCを２台以上つないでの対戦に夢中になりました。 やはり人間の闘争心なのでしょうか、ついつい熱くなってしまいます。 そのおかげでまたタイピングの速度が上がっていきました。
<h2>結論</h2>タイピングは、たびたび耳にする言葉「やればできる」を実感できるスポーツです。
さらに現在、実社会にも使える有用な技術です。
私は、これからもタイピングの練習を続けていきたい。
灯油
<h1>タイピングが好きな理由</h1>
<h2>タイピングとの出会い</h2>
<p>私は高校入学のときにPCを買ってもらい、基本的なWindowsの操作をマスターしていきました。 キーボードで入力するのはPCの基本。キーボードでの入力が早まれば全体的に作業の効率がよいものになると考えたのです。 なのでタイピングソフトを買い集めました。</p>
<h2>スポーツとしてのタイピング</h2><p>タイピングの入力速度は日に日に増しました。 練習すれば練習するほどタイピングソフト内でのスコアが上がり、自分の実力増加を実感していけたのです。 その時、「タイピングはスポーツだ」と思いました。</p>
<p>そのころからランキングやPCを２台以上つないでの対戦に夢中になりました。 やはり人間の闘争心なのでしょうか、ついつい熱くなってしまいます。 そのおかげでまたタイピングの速度が上がっていきました。</p>
<h2>結論</h2><p>タイピングは、たびたび耳にする言葉「やればできる」を実感できるスポーツです。
さらに現在、実社会にも使える有用な技術です。
私は、これからもタイピングの練習を続けていきたい。</p>
灯油
作者の部分を<address>要素を使って囲います。 <address>要素は作者や管理者のメールアドレスや連絡先を表すタグなのでついでにメールアドレスも書きましょう。
<a href="mailto:uhahaha@wahahaha.uk">は後述するハイパーリンクというウェブでの重要な技術ですが今はおいておきます。
ここまでが文書本体のマークアップです。そのことを示すために<body>タグで全体をくくってあげましょう。
<h1>タイピングが好きな理由</h1>
<h2>タイピングとの出会い</h2>
<p>私は高校入学のときにPCを買ってもらい、基本的なWindowsの操作をマスターしていきました。 キーボードで入力するのはPCの基本。キーボードでの入力が早まれば全体的に作業の効率がよいものになると考えたのです。 なのでタイピングソフトを買い集めました。</p>
<h2>スポーツとしてのタイピング</h2><p>タイピングの入力速度は日に日に増しました。 練習すれば練習するほどタイピングソフト内でのスコアが上がり、自分の実力増加を実感していけたのです。 その時、「タイピングはスポーツだ」と思いました。</p>
<p>そのころからランキングやPCを２台以上つないでの対戦に夢中になりました。 やはり人間の闘争心なのでしょうか、ついつい熱くなってしまいます。 そのおかげでまたタイピングの速度が上がっていきました。</p>
<h2>結論</h2><p>タイピングは、たびたび耳にする言葉「やればできる」を実感できるスポーツです。
さらに現在、実社会にも使える有用な技術です。
私は、これからもタイピングの練習を続けていきたい。</p>
<address><a href="mailto:uhahaha@wahahaha.go.uk">灯油</a><address>
そしてこのテキストにタイトルをつけましょう、この場合は「タイピングが好きな理由」でよさそうです。
タイトルをあらわすには<title>タグを使います。<title>は<head>という、一口にいうと文章全体の設定を行うタグで囲います。
つまりこういうことになります
最後にこれがHTML文章であることを示すために<html>タグでさらに全体をくくってやります。
これで完成です。
<h1>タイピングが好きな理由</h1>
<h2>タイピングとの出会い</h2>
<p>私は高校入学のときにPCを買ってもらい、基本的なWindowsの操作をマスターしていきました。 キーボードで入力するのはPCの基本。キーボードでの入力が早まれば全体的に作業の効率がよいものになると考えたのです。 なのでタイピングソフトを買い集めました。</p>
<h2>スポーツとしてのタイピング</h2><p>タイピングの入力速度は日に日に増しました。 練習すれば練習するほどタイピングソフト内でのスコアが上がり、自分の実力増加を実感していけたのです。 その時、「タイピングはスポーツだ」と思いました。</p>
<p>そのころからランキングやPCを２台以上つないでの対戦に夢中になりました。 やはり人間の闘争心なのでしょうか、ついつい熱くなってしまいます。 そのおかげでまたタイピングの速度が上がっていきました。</p>
<h2>結論</h2><p>タイピングは、たびたび耳にする言葉「やればできる」を実感できるスポーツです。
さらに現在、実社会にも使える有用な技術です。
私は、これからもタイピングの練習を続けていきたい。</p>
<address><a href="mailto:uhahaha@wahahaha.go.uk">灯油</a><address>
これで理論構造を示したハイパーテキストができました。
これをブラウザで見てみましょう!!
とってもとっても見栄えが無いですね。
次のページでは正しく見栄えを作る方法を覚えましょう。