HTML
１ ハイパーテキスト（.htmlファイル）
HTML HyperText Markup Language .html、.htm
HTMLの基本型
<html>
<head> ・・・ ヘッダー
<title>タイトル</title>
</head>
<body>
<p>文</p>
</body>
</html>
< >がタグ
htmlタグ、headタグ、titleタグ、bodyタグ
・ 文
・ リンク指定
<a href = "……"> </a>
・ 画像（.jpg、.gif、.png）指定
<img src = "……">
などのタグ
を組んでいく。
改行
<br>
イタリック（斜体）
<i>italic</i>
<em>斜</em>
太字
<b>bold</b>
<strong>太</strong>
取り消し線
<s>消し</s>
下線 アンダーライン
<u>underline</u>
※ HTML5非推奨
区切り線
<hr>
見出し
<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
見出し３
<h4>見出し４</h4>見出し４
<h5>見出し５</h5>見出し５
<h6>見出し６</h6>見出し６
段落（パラグラフ）
本文はこのタグで組まれることが多い。
行間 line-heightなどCSSで変えられる。
<p>文</p>
フォント fontタグ
CSSで設定できる。
リンク aタグ
<a href = "……">link</a>
アンカー・リンク ・・・ ページ内リンク
<a id = "●●●">リンク先</a>
<a href = "#●●●">link</a>
画像挿入 imgタグ
例）
<img src = "●●●.jpg" alt = "korewa●●●" width = "600" height = "800">
リスト list
中点 unordered list
<ul><li> </li><li> </li></ul>
番号 ordered list
<ol><li> </li><li> </li></ol>
表 table
<table>
<tr><th> </th><th> </th><th> </th></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>
| 列１ | 列２ | 列３ |
|---|---|---|
| ko | re | wa |
| テー | ブ | ル |
フォーム formタグ
インラインフレーム iframeタグ
ふりがな（ルビ）
<ruby>留美<rt>るび</rt></ruby>
留美
HTML内コメント
<!-- -->
divタグ
spanタグ
ヘッダー <head> </head>内で使用
titleタグ
styleタグ
scriptタグ
例）
<script src="jquery.js"></script>
linkタグ
例）
<link rel = "stylesheet" type = "text/css" href = "●●●.css">
metaタグ ・・・ ページ情報
ビューポート設定 viewport ・・・ レスポンシブWebデザイン ↓
例）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
インデックス制御
クローラー制御
２ もっと自在にレイアウト
→ スタイルシート CSS ＋ 対応ブラウザ
CSSのページ →
３ 動きのあるホームページ ＨＰ、ＨＰ上で様々な処理
marqueeタグ
アニメGIF
より凝ったものは
昔は
アプリケーションで個別に作成 ＋ 専用ビューアをブラウザにプラグイン
・ ドキュメント・ファイル（.pdfファイル、） ＋ ドキュメント・ビューア
・ [Shockwave] Flashアニメーション・ムービー（.swfファイル） ＋ Flash Player
・ Javaアプレット ＋ アプレット・ビューア
・
・
・
Javaアプレット、Flashが使えなくなって、
pdfは使えるが、
今はプラグインなしでOK
・ .pdfでなくても.svgでも
・ .swfからHTML5へ ・・・ ブラウザがメディアプレイヤー化
・ JavaアプレットからJavaScriptへ
・
・
・
スクリプト言語（JavaScript） ＋ 対応ブラウザ
JavaScriptのページ →
さらに
HTML5 ＋ 対応ブラウザ
で
いろいろできる
ブラウザが「万能」アプリケーション化
４ モバイル（タブレット、スマートフォン）対応
モバイルから自分のＨＰへアクセスして見たらアレッ
PC、モバイル、スマートフォンの３つを用意して各々確認するのは結構負担
iOSとAndroidで見え方が違うこともある
レスポンシブWebデザインならば、
１つのページに
・ PC用
・ モバイル用（タブレット用）
・ スマートフォン用 ・・・ モバイル用とは別
のHTMLファイル３つを用意する必要はなく、
１つのHTMLファイルで済む
その分CSSが長くなる
文字や画像が小さい
→ HTMLファイルのヘッダー <head> </head>の中で
<meta name="viewport" content="width=device-width,initial-scale=1.0">
と設定しておけば
デバイスの画面幅に合わせて表示してくれる
５ リンクの注意事項
aタグでホームページ ＨＰへリンク
<a href = "http://www.……">link</a>
リンクは基本自由だが
要許可、要連絡のサイトもある
リンク先ＨＰのリンクポリシー確認
通常、トップページへリンク
悩ましいのは
● 重いサイト
１つのページに大サイズの画像をたくさんアップロードしているサイト
おそらく悪意はない
API（広告、SNS、）を多用しているサイト
あちこちアクセスして応答待ち
リンクを貼らずにはいられない症候群にかかって、リンクだらけに……。
悩ましいのは
● リンク切れのチェック
ＨＰのアドレス変更やサイト閉鎖で
リンク切れ
となるが、リンクすればするほど
チェック漏れが増えて
リンク切れを０とするのが難しくなっていく
リンクチェッカーである程度対処できる
リンクチェッカー → www.dead-link-checker.com/
・
・
・
リンク切れ（404エラー）であれば、ツールを使って検出できるが、
リンクが生きていて中身が変わっているサイトもある
他の人がドメインを継いで全然違うサイト、ゾンビ化したサイトになっていたり、
有害サイトに変わっている場合もある
ＨＰのトップページの縮小画像（サムネイル Thumbnail）を取得して
定期的にチェックできれば良いが、
サムネイルを作成してくれるサーバー・サイトで試したところ、
サムネイルを作成できないサイトもある
常にリンク切れ０を保つのは難しい
WordPressであればリンクチェッカーが使えるが、
積年の課題
リンクをクリックして外部サイトを訪問する場合、
詐欺サイトにひっかかってはいけない。
有害なサイト、詐欺サイトに誘導されて、
PC、スマートフォンから 「ウイルスが検出されました」、
スマートフォンの「バッテリーが破損しています」
といった類の警告画面が表示されても
慌てず
指示に従わず
ページを閉じましょう。
その他、リンクのページ →