メインコンテンツへスキップ

HTMLで出来る事

1.HTMLで出来る事

HTMLを用いると、
ハイパーリンクの記述,
画像等の埋め込み,
文書の論理構造や表示の仕方
などの記述等ができます。

HTMLは主にWebページを表現する為に用いられ、テキストデータの表示が出来て、「複数の文書を結び付ける役割のハイパーリンク」, 「画像等の埋め込み」, 「文書の論理構造や表示の仕方」などの記述等ができる言語の名称です。テキストエディタなどで作成する事ができて、ブラウザなどで閲覧する事ができます。

HTMLは文書の表示(装飾)に関しては、スタイルシート言語にて記述して表示します。個々のHTMLの要素でもスタイルシートの既定値があります。スクリプト言語を用いて、動的に表現する事もできます。出来るからこその注意点として、データの送信があります。

HTMLという物が何かを理解する事により、何を表現する時に用いる事が出来るかとか、どの様に記述すると HTMLという言語で記述したテキストファイルが扱い易いかを意識できるかと思います。

テキストの表示
Top page
大見出し
小見出し
小見出し
表
(テーブル)		 表示の
仕方
CSSで装飾
スクリプトで
罫線を
動的に変更

受信用の
ページへ

2.テキストデータの表示

HTMLを用いると、
テキストデータの
表示等ができます。

HTMLを用いると、テキストデータの表示等ができます。目的がこれだけでしたら「プレーンテキスト」でも良いわけです。普通は、他のHTMLで出来る事と合わせて使われます。

表示等の中には、印刷も含まれます。音声ツールでの読み上げもあります。

テキストとは、文字コードだけで構成された文字列や文書のデータです。「テキストとは」で改めて記述しています。

HTMLを用いると、テキストデータの表示等ができます。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>サンプル</title>
  6. </head>
  7. <body>
  8. HTMLを用いると、テキストデータの表示等ができます。
  9. </body>
  10. </html>

HTMLの規則に合わせて、色々とタグを記述していますが、この例はテキストデータの表示等を目的としたHTMLの記述例です。
５行目のtitle要素以外は、省略も可能でありほぼ定型です。８行目の内容が、表示等がしたいテキストデータの記述となります。
実行例は、別のHTML要素を用いて表したイメージです。

  1. <div>
  2. 空白は 纏められる。
  3. </div>
空白は 纏められる。

HTMLは、文字の装飾の既定値として、連続する空白を纏めます。
pre要素などを用いたり、CSSで装飾に対して記述する事で、対応はできます。

「HTMLのホワイトスペース」で改めて記述しています。

3.ハイパーリンク

ハイパーリンクは、
文書を結び付ける
参照です。

ハイパーリンク とは、文書を結び付ける参照(レファレンス)です。
ここでいう参照(レファレンス)は、他の場所にあるデータを指している情報を含む小さなオブジェクトです。それ自身の中には、指しているデータ自体は含みません。

HTMLでは、a要素, form要素 などで、ハイパーリンクを表します。

ハイパーテキスト (Hypertext)とは、複数の文書を相互に結び付ける仕組みです。
直訳すると「超文書」ですが、意訳, 造語的には「結文書」かなと思います。

Top page
  1. <a href="./index.htm" title="Go to Top page.">Top page</a>
  2. <form action="./index.htm"><button title="Go to Top page.">Top page</button></form>

上がa要素で、下がform要素です。
リンク先(クリックした時のページの遷移)は、このページの上位である「離珠のHTMLでしぃ!」で例示しました。ここの「HTMLで出来る事」という文書から、「離珠のHTMLでしぃ!」という文書を結び付けている例です。オブジェクトとは、"./index.htm"を "./text.htm" と置き換えても遷移先は変わっても遷移するという機能は変わらないという事です。

4.データの埋め込み

HTMLは、
他のデータファイルを
表示する(埋め込む)事が
出来ます。

HTMLは、画像ファイルなど他のデータファイルを、表示する(埋め込む)事が出来ます。ハイパーリンクなどの他の機能と組み合わせる事で、そのデータファイルにリンクなどの機能を付加したりもできます。

埋め込みに関わる要素については、「エンベデッドコンテンツ」で記述しています。

  1. <img src="./demo.gif">

img要素で、gif画像を表示している例です。

5.文書の論理構造

HTMLは、
要素の種類，配置で
論理構造を表します。

HTMLは、要素の種類，配置で、論理構造を表します。

この論理的な構造については、「HTMLの区分化」で記述しています。

大見出し
小見出し記事１
小見出し記事２
  1. <body>
  2. <h1>大見出し</h1>
  3. <h2>小見出し</h2>
  4. <p>記事１</p>
  5. <h2>小見出し</h2>
  6. <p>記事２</p>
  7. </body>

この例では、body要素の直下に物理的に同じ階層にh1要素, h2要素, p要素があります。それを論理的にh1要素が示すまとまりの中に、h2要素があるとしている例です。

6.文書の表示の仕方

HTMLでは、
文書をレンダリングする為の
一連の提案がされています。

HTMLでは仕様の提示と共に文書をレンダリングする為の一連の提案がされています。「必須」ではなく期待される「提案」です。ユーザーエージェントの違いにより、レンダリングの結果が異なる事もあるので、注意が必要です。
「HTMLのレンダリング」にて記述しています。

7.スタイルシート

スタイルシートは、
文書の見栄えに関する
情報を記録等した
データやファイル等の事です。

スタイルシート (Style Sheets)とは、文書の見栄えに関する情報を記録等したデータやファイル等の事です。
Webページの記述に関して言えば、HTMLなどで記述された文書の、体裁や見栄えを表現する為の情報や記録等の事です。
一般的には CSS と呼ばれるスタイルシート言語が用いられる事が多くて、スタイルシートと言えば CSS の事を指す事があります。
スタイルを直訳すると文体が意味的に近いかな。シートも直訳すると書かと思います。 文体 ( スタイル ) 書 ( シート ) が造語的には合うのかなと思います。

CSSに関しては、「離珠のCSSでしぃ！」で記述しています。

下線

  1. <p style="text-decoration: underline;">下線</p>

この例では、「下線」というテキストに CSS で下線を装飾しています。

8.スクリプト言語

スクリプト言語は、
簡易的な
プログラミング言語の
一種です。

HTMLはスクリプト言語を用いて、プログラムを記述する事ができます。スクリプト言語はプログラミング言語であり、コンピュータプログラムを記述する為の言語です。コンピュータプログラムとは、コンピュータに対する命令（処理）を記述したものです。
HTMLおよびDOM APIは、スクリプトが他のスクリプトの同時実行を検出できないように設計されています。(この一般的な設計原則の例外は、JavaScriptSharedArrayBufferクラスです。)

ユーザーの操作を特に意図した要素を、インタラクティブコンテンツと呼びます。「インタラクティブコンテンツ (HTMLでの操作)」で改めて記述しています。

スクリプトで
罫線を
動的に変更
  1. <div id="JDV081" style="padding: 0.3em; height: 5.0em;">スクリプトで<br>罫線を<br>動的に変更</div>
  2. <form>
  3. <select id="JSE081" onchange="document.getElementById('JDV081').style['border'] = document.getElementById('JSE081').value;">
  4. <option label="線なし" value="none" selected>
  5. <option label="一本線" value="solid 1px">
  6. <option label="二本線" value="double 5px">
  7. </select>
  8. </form>

JavaScriptというスクリプト言語を用いての、境界線を書き換える例です。

ユーザーの操作を特に意図した要素を用いて、スクリプト言語に情報を与えています。

9.フォームを送信

イベントの発生に伴い、
サーバーへフォームを
送信します。

HTMLはイベントの発生に伴い、サーバーへフォームを送信します。例えばinput要素の type属性の値が submit の時に、その要素の clickイベントが発生したときに、ユーザーエージェントはサーバーへフォームを送信しようとします。

フォームに関わる要素については、「フォーム」で改めて記述しています。


受信用の
ページへ
  1. <form action="./fmreceive.htm">
  2. <input name="nipInput" value="abc" style="max-width: 95%;">
  3. <button name="nbtSender" value="./cando.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

input要素でデータ入力を行い、button要素で送信の契機としている例です。
この例での送信先は、当サイトで送受信の例示用に用意しているページです。

10.注意点

送信やスクリプト,
埋め込みに注意すれば、
とりあえず表示(実行)する事で
危険な事はないと思います。

form要素などのフォームに関わる要素で、イベントの発生に伴い、サーバーへフォームを送信します。 用いる時には、送信先の記述に注意しましょう。特にコピペでソースを使う時には要注意です。

スクリプト言語がscript要素を用いて記述できます。このスクリプトにより、サーバーへデータを送信する事が出来ます。 スクリプトの内容は読む(理解する)のも難しいので、扱いには注意しましょう。 自作のスクリプトであっても、間違いはあるので、検証にもご注意を。 (ネットから安易にスクリプトを拾って使わないように)

エンベデッドコンテンツを用いると他のデータファイルを埋め込める訳ですが、その中身に注意が必要です。 それがhtmlファイルでフォームに関わる要素があったら、 そこにサーバーへデータを送信するスクリプトがあったら等々 いろいろ注意すべき点があります。

上記の、主に送信について注意すれば、 自作のhtmlファイルを表示(実行)する上で 危険な事はないと思います。 尚、これはhtml文書を作成, 検証する上での注意点であり よそのWebサイトは安易に表示しない方が安全です。

一般的な注意点は、サーバーへアップロードした場合は、それは世間に公開したという事なので誰にでも閲覧可能という考えでいる事が大事です。 その上で、そのデータは複製が容易です。 データ自体の取扱いにも、注意が必要です。