\r\n\r\n
HTMLは昔からあるものなので、そろそろ基本を学びましょう。HTMLとは何か、どのように機能するのか、そして一般的な要素をどのように書くのか。
始める前に、無料のオンラインHTMLエディタのガイドと、Webサイト用の高品質なHTMLの例を必ずお読みください。
HTMLとは、Hypertext Markup Language(ハイパーテキストマークアップランゲージ)の略で、ウェブブラウザ向けの簡単な指示書です。この手順で、ブラウザはウェブページの外観を表示します。
プログラミング言語ではなく、マークアップ言語であることを理解することが重要です。プログラミング言語を使うと、数式などの問題を解いたり、データを操作したり、ビデオゲームのキャラクターを動かしたりすることができます。
HTMLにはロジックは書けない。レイアウトにしか関係ない。
HTMLは「タグ」と呼ばれるいくつかの要素で構成されています。タグとは、ウェブページの特定の部分のスタイルを設定するための指示です。建築に話を戻すと、HTMLは間取り図、タグは窓やドアなどの具体的な機能です。
以下は、HTMLによるごく基本的なページの外観です。
<html> <head> <title>MUO Website</title> </head> <body> </body></html>HTMLのタグはあらかじめ定義されており、画像、他のページへのリンク、ボタンなど、共通の機能を指定します。
タグの大半は開閉式であること。これは、テキストや画像などのマークアップを含む何らかの機能を定義して、その定義を終了させるだけのことです。家のことを考えると、タグを開くのは「ここの窓を開けてください」、閉じるのは「ここの窓はここまでです」と言っているようなものです。
HTMLタグは実際にウェブサイト上に表示されるわけではありません。ブラウザはその指示に従いますが、決して訪問者に見せることはありません。しかし、これは秘密ではありません。Webページを公開すると、誰でもそのHTMLを見ることができるようになります。
HTMLタグは非常に多くの種類がありますが、すべてを覚えてからコーディングする必要はありません。今日は、一般的なタグの書き方と、その用途について学びます。
タグについて最後に知っておくべきことは、属性です。属性は、タグの特別な特性を定義します。タグが窓とドアの場合、属性は特定の建築の詳細を指定します。それは、フレームの幅や高さであったり、窓が開いているかどうかであったり、ドアがロックされているかどうかであったりします。
属性は、以下のように開始タグに含まれる。
<p width="123" height="567"></p>タグや属性は、W3C(World Wide Web Consortium)によってあらかじめ定義されているため、自分で作ることはできません。
HTML5はHTMLの最新版で、いくつかの新しいタグや属性、機能が含まれています。
HTMLは命令文であるため、Webブラウザによって解釈が異なる場合があります。ブラウザは、特に指定がない限り、窓やドアを黒く塗るべきだと判断することがあります。
ブラウザはようやく相互にかなり整合性が取れてきたとはいえ、まだ非常に新しい機能にとらわれることもあります。googlechromeは新しいタブを実装しているのに、Microsoftのinternetexplorerは実装していないのかもしれませんね。
ほとんどの場合、主要なブラウザで同じように表示されますが、特にまだすべてのブラウザでサポートされていない新しいタグを使用している場合は、公開する前に簡単なテストを行う価値があります。
HTML5についてもっと知りたい方は、HTML5入門ガイドをご覧ください。
他の多くの言語、マークアップやプログラミングと同様に、HTMLはマークアップのブロックを「コメントアウト」することができます。コメントとは、ブラウザが無視するものです。あなたのサイトのこの部分は何をしているのか、思い出すヒントにもなるかもしれません。
マークアップをコメント化することで、1つまたは複数のタグを無視するようにブラウザに指示します。これは、コードを削除せずに機能を削除したり、サイトの一部を隠したりするのに便利かもしれません。
ウェブブラウザはコメントを見ると、「私が特に指示しない限り、この指示を使わないでください」と理解するのです。コメントは、ラベルと同じように、「開始」コメントと「終了」コメントから構成されます。
一例として
<!-- Don't forget to add the XYZ here! --><p width="123" height="567"></p>全く同じように、コードに注釈を入れます。
<!-- <p width="123" height="567"></p> -->マーカーはメッセージの中ではなく、コメントタグの間に置いてください。
画像タグを使用して、画像を**HTML化する。
<img src="MUO_logo.jpg" alt="MakeUseOf Logo">src属性は画像を探す場所を指定し、altタグは何らかの理由で画像を読み込めなかった場合の説明文です。
画像タグは、他の多くのタグと異なり、オフにする必要はありません。
フォントは、フォントマークと "face "属性で変更することができる。
<font face="arial">MUO Arial Text</font>フォントサイズは、「Size」プロパティを使って簡単に変更することができます。
<font size="12">MUO Big Text</font>フォントの色を変えたい場合は、「Colour」プロパティを使って簡単に変更することができます。
<font color="red">MUO Red Text</font>これらの属性は、フォントマーカーに固有のものです。別のマーカーを使用するには、マーカーを他のマーカーの中に入れて、ネストさせます。
<p><font color="red">MUO Red Text</font></p>リンクはaタグで追加することができます。
<a href="https://www.makeuseof.com">MakeUseOf.com</a>href属性は、リンクのターゲットです。
HTMLの表には、いくつかの異なる種類のタグがネストされています。
<table> </table>次に、trタグを使って、いくつかの線を追加します。
<table> <tr> </tr> <tr> </tr> <tr> </tr></table>最後に、tdタグで表のセルを作成し、列も作成します。
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr></table>テーブルレイアウトにこだわりすぎているかもしれませんが、できればシンプルにしたほうがいいでしょう。かつて、ウェブページの構成にはテーブルが使われていましたが、このやり方は時代遅れで、見た目もひどいものです。読者にデータを転送するために、テーブルのみを保持する。
カスケーディングスタイルシートは、ウェブサイトのデザインをよりよく制御し、ウェブサイトの異なる部分間で多くのコードを再利用することを可能にします。
CSSを学ぶためのチュートリアルやクイックCSSの例もありますが、やはりHTMLでできる設定もあります。
HTMLと並行してCSSを記述する場合は、使用するタグにのみCSSを適用するstyle属性を使用することができます。
<p ></p>この方法は効果的ですが、同じようなスタイルを必要とするタグが多数ある場合、メンテナンスが困難になることがあります。
より良い方法は、headタグの中にあるスタイルタグを使って、ページ全体のCSSを定義することです:。
<html> <head> <style type="text/css"> MANY CSS RULES </style> </head></html>styleタグにはtext/css属性があります。これは、ブラウザにタグで期待されるスタイルを正確に知らせるために必要なものです。
3つ目の方法は、リンクタグを使って外部ファイルからCSSを利用する方法です。これは、自分のファイルに保存されているCSSにHTMLをリンクさせるもので、大量のCSS:がある場合に有効です。
<link rel="stylesheet" type="text/css" href="muostyle.css">relはスタイルシートとしてのリンクを宣言し、typeは再び「text/css」型を定義し、hrefは外部ファイルの場所であることを示します。
このように、HTMLはそれほど悪いものではないのですね。HTMLを書いたことがない人でも、いくつかの簡単なタグと属性を使って、すぐにWebページを組み立てることができます。
もし、あなたが完全なウェブサイトを書きたいのであれば、私たちの初心者向けウェブサイトの作り方ガイドを必ずご覧ください。