HTMLとは、Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、基本的なウェブサイトのレイアウトを作成するためのコード（言語）です。コーディングをしたことがない人には少し難しく見えるかもしれないが、試すのに必要なのは普通のテキスト編集アプリケーションとインターネット・ブラウザだけだ。オンライン・フォーラムやカスタマイズされたオンライン・プロフィール、あるいはwikiHowの記事のテキストを変更するために使われるHTMLに見覚えがある人もいるかもしれない。HTMLはインターネットを使う人なら誰でも使える便利なツールであり、基本を学べば思ったより時間がかからないかもしれない。
HTMLチートシートと例
パート1
HTMLの基本を学ぶ
-
HTML文書を開きます。Windowsのメモ帳やメモ帳++、MacのTextEdit、GNU/Linuxのgeditなど、ほとんどのテキスト編集プログラムでHTML文書を書くことができます。 新しい文書を開き、上部メニューのファイル → 名前を付けて保存で「Webページ」として保存したり、ファイルの拡張子を「.doc」や「.rtf」、その他の拡張子ではなく「.html」に変更したりします。
- 文書が「リッチテキスト」ではなく「プレーンテキスト」に変更されたり、特殊な書式や画像が正しく保存されないという警告が表示されるかもしれません。これは問題ありません。HTML文書ではこれらのオプションは使用しません。
-
インターネット・ブラウザで文書を表示してください。空白の文書を保存し、コンピュータで文書のアイコンを見つけてダブルクリックして開きます。 ブラウザで空白のウェブページとして開くはずです。開かない場合は、ファイルアイコンをブラウザのURL（アドレス）バーにドラッグします。このチュートリアルでHTMLドキュメントを編集している間、ウェブページがどのように変化するかをチェックし続けることができます。
- なお、この操作では実際にウェブサイトをオンラインで作成することはできません。他の人がアクセスできるわけではありませんし、テストするためにインターネットに接続する必要もありません。ブラウザを使って、あなたのHTML文書をウェブサイトのように「読む」だけです。
-
マークアップ・タグを理解する。マークアップタグは、通常のテキストのようにウェブページに表示されるわけではありません。その代わりに、ウェブブラウザにページとそのコンテンツの表示方法を指示します。 startタグ」には指示が含まれています。たとえば、テキストを太字で表示するようブラウザに指示します。この例では、開始タグと終了タグの間のテキストはすべて太字になります。終了タグも同様に角括弧の中に書きますが、最初の角括弧の後はスラッシュで始めます。
- 開始タグは角括弧の中に書きます： <開始タグはここ>。
- 終了タグは角括弧の中に書きますが、最初の括弧の後にはスラッシュを入れます：</end tag goes here>)
- 機能的なマークアップ・タグの書き方については、このまま読み進めてください。このステップで覚えておく必要があるのは、基本的な書式だけです。
- 他のHTMLチュートリアルを使っている場合は、タグを "要素"、開始タグと終了タグの間のテキストを "要素コンテンツ "と呼ぶのを見るかもしれません。
-
最初の<html>タグを書きます。すべてのHTML文書は<html>タグで始まり、</html>タグで終わります。 これはブラウザに、これらのタグの間がすべてHTMLであることを伝えます。これらのタグを文書に追加します：
- 多くの場合、HTMLファイルは<!DOCTYPE html>行で始まりますが、これはファイル全体がブラウザによってHTMLファイルとして読まれることを示すものです。これは必要ではありませんが、互換性の問題を解決するのに役立つかもしれません。
- 文書の先頭に<html>と書きます。
- Enterかreturnを何度か押してスペースを空けてから、</html>と書いてください。
- この2つのタグの間に、このチュートリアルの他のすべてを書くことを忘れないでください。
-
文書の<head>部分を埋めてください。<html>タグと</html>タグの間に、<head>開始タグと</head>終了タグを書きます。その間に書くスペースを空けてください。これらのheadタグの間にあるものは、実際にはページ自体には表示されません。次のようにして、代わりにどこに表示されるか試してみてください：
- <head>タグと</head>タグの間に、<title>と</title>と書きます。
- <title>タグと</title>タグの間に、HTMLの学び方 - wikiHowと記述します。
- ドキュメントを保存し、ブラウザで開く（または、ドキュメントを保存し、すでに開いている場合はブラウザのページを更新する）。ブラウザの上部、アドレスバーの上に何を書いたかわかりますか？
-
<body>セクションを作ってください。このビギナー・ドキュメントの他のすべては、実際にウェブ・ページに表示されるbodyセクションに入ります。</head>終了タグの後、</html>タグの前に、<body>と</body>を書きます。このチュートリアルの残りの部分では、書くものはすべてこのbodyタグの間に書きます。 これで、次のような文書ができるはずです：
<html>
<head>
<タイトル>HTMLの学び方 - wikiHow</title
</head>
<body>
</body>
</html -
様々なスタイルでテキストを追加するいよいよ、ブラウザで実際に見ることができるものを書いてみましょう！bodyタグの中に書いたものはすべて、HTMLドキュメントを保存してブラウザーのページを更新した後に、ブラウザーに表示されます。ただし、<や>の記号を使ったものは、ブラウザが通常のテキストではなくHTML命令として解釈しようとするので、書かないでください。Hello world！(または他の好きなもの)と書いてみて、その周りにこれらの新しいタグを追加し、毎回何が起こるか見てみましょう：
- <em>ハローワールド！</em>は「強調テキスト：」ハローワールドとして表示されます！
- <strong>Hello world!</strong> は "strong text:" Hello world！
- <s>Hello world!</s> は取り消し線付きで表示されます: Hello world！
- <sup>Hello world!</sup> は上付き文字で表示されます：<sup>Hello world!
- <sub>ハロー・ワールド！</sub>は下付き文字として表示されます：Hello world！
- これらの組み合わせを試してみてください：<em><strong>Hello world!</strong></em> はどのように見えますか？
-
テキストを段落に分けましょう。HTML文書に数行のテキストを書こうとすると、改行がブラウザに表示されないことに気づくかもしれません。これは自分でコーディングする必要があります：
- <p>これは別の段落です</p>。
-
<br>この文章が始まる前に改行します。
これは、終了タグを必要としない最初のタグです！これは "空タグ "と呼ばれます。 -
セクションの名前を表示するために見出しを作ります：
<h1>ヘッダー・テキスト</h1>: 最大のヘッダー
<h2>ヘッダーテキスト</h2> (第2レベルのヘッダー)
<h3>ヘッダーテキスト</h3> (第3レベルのヘッダー)
<h4>ヘッダーテキスト</h4> (第4レベルヘッダー)
<h5>ヘッダーテキスト</h5> (最小のヘッダー)
-
リストの書き方を学ぶ ウェブページにリストを書くには、いくつかの異なる方法があります。以下の種類のコードを試してみて、どれが好きか確かめてください。1つのタグの組がリスト全体を囲み（「順序なしリスト」の<ul>と</ul>タグのように）、リスト上の個々の項目は<li>と</li>のような別のタグの組で囲まれていることに注意してください。
- 箇条書きリストを作るには次のコードを使います：
<ul><li>一つの項目</li><li>別の項目</li><li>別の項目</li></ul>。 - また、番号付きリストを作るには次のようにします：
<ol><li>項目1</li><li>項目2</li><li>項目3</li></ol>。 - あるいは、用語を定義するリストを作成するコードもあります：
<dl><dt>コーヒー</dt><dd>-温かい飲み物</dd><dt>ライト</dt><dd>-冷たい飲み物</dd></dl></dt
- 箇条書きリストを作るには次のコードを使います：
-
でページを飾りましょう。さて、次はテキスト以外のものをページに追加してみましょう。以下のタグを試してみてください。オンライン画像ホスティングサービスを利用して、画像タグにリンクするURLを設定してください：
- <br> または <hr>
- <img src="your_image_url">のようにします。
-
ページ内の他の場所へのリンクこのコードを使って他のページやウェブサイトにリンクすることもできますが、今はまだウェブサイトを持っていないかもしれないので、「アンカー」、つまりページ上の特定の場所にリンクすることに焦点を当てましょう：
- まず、ページ上のリンクしたい場所に<a>タグでアンカーを作ります。わかりやすく覚えやすい名前をつけましょう：
<a name="Tips">これはアンカーを囲むテキストです。<ref>https://www.youtube.com/watch?v=UB1O30fR-EE 4 times </ref></a>。 - <href>を使う：
<a href="ウェブページのURL、またはこのページ内のアンカー名">ここにリンクとして表示されるテキストまたは画像を書きます。 - 別のウェブページのアンカーにリンクするには、URLの後に#記号を付け、その後にアンカーの名前を付けます。例えば、このページのTipsセクションへのリンクです。
- まず、ページ上のリンクしたい場所に<a>タグでアンカーを作ります。わかりやすく覚えやすい名前をつけましょう：
パート2
より高度なHTMLを学ぶ
-
属性について学びましょう。属性はタグ自体の中に置かれ、開始タグと終了タグの間にある「要素の内容」に追加の変更を加えます。これらは決して単独では存在しません。属性はname="value "というフォーマットで記述され、nameは属性の名前（例えば "color"）、valueは特定のインスタンス（例えば "red"）を表します。
- <img>タグはsrc属性を使い、アンカーはname属性を使い、リンクはhref属性を使います。これらはすべて___="___"の形式に従っているのがわかりますか？
-
HTMLの表を使ってみましょう。表やグラフを作るには、いくつかの異なるタグが必要です。これらのタグを使って遊んでみてください。
- 表全体を囲む表タグから始めましょう：<table></table>。
- 各行の内容を囲む行タグ: <tr>
- 最初の行の列見出し: <th>
- 次の行のセル： <td>
- どのように組み合わされるかの例です：
<table><tr><th>列1: 月</th><th>列2: 貯めたお金</th></tr><tr><td>1月</td><td>$100</td></tr></table>。
-
雑多なheadタグを学ぶ<head>タグはすでに学んだと思いますが、これは各ドキュメントの最初に表示されます。<title>タグの他に、次のようなタグがあります：
- メタタグ：ウェブページに関するメタデータを提供するために使われます。このデータは、検索エンジンがロボットがインターネットを検索してウェブサイトをリストアップする際に使用されます。あなたのウェブサイトを検索エンジンで見やすくするには、1つ以上の<meta>開始タグ（終了タグは不要）を使用し、それぞれに1つのname属性と1つのcontent属性を指定します。
- <link>タグは、他のファイルをページに関連付けるために使われます。これは主にCSSスタイルシートへのリンクに使われます。CSSスタイルシートは、HTMLページに色を加えたり、テキストを整列させたり、その他さまざまなことを行うために、別の種類のコーディングを使って作られます。
- <script>タグは、ページをファイルにリンクさせるために使用されます。
-
ウェブサイトにあるHTMLで遊んでみましょう。知識を深めるには、ウェブページのHTMLソースを調べるのが効果的です。これは、ページを右クリックして「ソースを表示」、「ページソースを表示」、または同様のオプションを選択するか、ブラウザの上部メニューの「表示」セクションに移動することで行うことができます。見慣れないHTMLタグが何をするものなのか、自分で調べてみるか、オンラインで調べてみてください。
- 他人のウェブサイトを編集することはできませんが、見つけたHTMLを自分の文書にコピーして、さまざまなオプションが何をするのか試してみることはできます。ウェブサイトがリンクしているCSSスタイルシートがないと、すべての色や書式を見ることができないかもしれないことに注意してください。
-
包括的なガイドから、より高度なウェブデザインを学ぶインターネット上には、HTMLタグについて学べる様々なリソースがあります。 また、HTMLについてのチュートリアルが載っている本もありますが、時々更新や変更があるので、ここ2、3年以内に出版されたものを使うようにしましょう。それよりも、CSSを学んで、ウェブページのレイアウトや見た目をもっと自由にコントロールできるようにしましょう。CSSを習得したら、ウェブデザイナーの次のステップはJavascriptです。
コメント
最新を表示する
NG表示方式
NGID一覧