差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
webp:vol2 [2016/03/27 08:08]
katsubemakito
webp:vol2 [2017/12/14 20:18] (現在)
ライン 1: ライン 1:
 ====== Code002: HTMLとは何か!(前編) ====== ====== Code002: HTMLとは何か!(前編) ======
 +~~socialite~~
 +
 +<note important>​この記事は2001年に書かれた物です</​note>​
  
 <​html><​pre style="​font-family:​monospace;​ font-size:​10pt">​ <​html><​pre style="​font-family:​monospace;​ font-size:​10pt">​
ライン 13: ライン 16:
            ​▼等幅フォントでご覧いただくとキレイに見えます。            ​▼等幅フォントでご覧いただくとキレイに見えます。
            ​▼登録・解除はこちらから可能です。            ​▼登録・解除はこちらから可能です。
-               http://​www.ichikoro.com/​webp/ ​>+               &​lt; ​http://​www.ichikoro.com/​webp/ ​&gt;
                   ※バックナンバーへのリンクもあります。                   ※バックナンバーへのリンクもあります。
                   ※お友達にもぜひお勧めください(^^)/​                   ※お友達にもぜひお勧めください(^^)/​
ライン 78: ライン 81:
 大なり小なりの等符号で英字を囲んだもの 大なり小なりの等符号で英字を囲んだもの
  
-    ​<名前>+    ​&lt;名前&gt;
  
 これを“タグ”と呼びます。タグには様々な種類があり、例えば文字の色やサイズを これを“タグ”と呼びます。タグには様々な種類があり、例えば文字の色やサイズを
ライン 85: ライン 88:
 そして、始まりを指定したら必ず終わりはどこかを指定しないといけません。 そして、始まりを指定したら必ず終わりはどこかを指定しないといけません。
  
-    ​</名前>+    ​&lt;/名前&gt;
  
 その際は、スラッシュ(/​)をつけてここまでという指定をします。 その際は、スラッシュ(/​)をつけてここまでという指定をします。
 つまり つまり
  
-   <名前 ~  </名前>+   &lt;名前&​gt; ​ 〜  &lt;/名前&gt;
  
 で、一つの組み合わせになります。 で、一つの組み合わせになります。
ライン 141: ライン 144:
 確認してみてください。 確認してみてください。
  
-また、タグの大文字小文字は同一視されます。つまり ​<HTMLと <htmlは同じ意味+また、タグの大文字小文字は同一視されます。つまり ​&lt;HTML&​gt; ​と &lt;html&​gt; ​は同じ意味
 になります。また、半角スペースやタブ、改行などは表示されずに無視されますので、 になります。また、半角スペースやタブ、改行などは表示されずに無視されますので、
 どこからどこまで囲っているかを分かりやすくするため、サンプルのようにインデン どこからどこまで囲っているかを分かりやすくするため、サンプルのようにインデン
ライン 237: ライン 240:
 お分かりの通り、ポイントは お分かりの通り、ポイントは
  
-    &nbsp;+    &amp;nbsp;
  
 の部分です。 の部分です。
 HTMLにはあらかじめ、予約された特別なキーワードがいくつかあります。 HTMLにはあらかじめ、予約された特別なキーワードがいくつかあります。
  
-    &​キーワード;​+    &amp;キーワード;​
  
 とすると、実際に表示される際に別の文字に置き換わります。 とすると、実際に表示される際に別の文字に置き換わります。
-つまり上の例で行くと&​nbsp;​と書いた場合、実際に表示される時は半角スペースに置+つまり上の例で行くと&​amp;nbsp;​と書いた場合、実際に表示される時は半角スペースに置
 き換わる、といった具合です。 き換わる、といった具合です。
  
ライン 276: ライン 279:
 また他にも また他にも
  
-    &​amp;​quot; ​ →  ​&quot;+    &​amp;​quot; ​ →  ​"
     &​amp;​amp; ​  ​→ ​ &amp;     &​amp;​amp; ​  ​→ ​ &amp;
-    &​amp;​copy; ​ →  ​&​copy;​  ←表示されない環境もあります。+    &​amp;​copy; ​ →  ​(C)  ←表示されない環境もあります。
  
 と言ったような感じで、いくつも存在しています。 と言ったような感じで、いくつも存在しています。
ライン 304: ライン 307:
       &​amp;​lt;​ &​amp;#​60; ​ →  &lt;       &​amp;​lt;​ &​amp;#​60; ​ →  &lt;
       &​amp;​gt;​ &​amp;#​62; ​ →  &gt;       &​amp;​gt;​ &​amp;#​62; ​ →  &gt;
-    &​amp;​quot;​ &​amp;#​34; ​ →  ​&quot;+    &​amp;​quot;​ &​amp;#​34; ​ →  ​"
      &​amp;​amp;​ &​amp;#​38; ​ →  &amp;      &​amp;​amp;​ &​amp;#​38; ​ →  &amp;
-    &​amp;​copy;​ &​amp;#​169;​ →  ​&​copy;​  ←表示されない環境もあります。+    &​amp;​copy;​ &​amp;#​169;​ →  ​(C)  ←表示されない環境もあります。
  
 のようになります。 のようになります。
ライン 394: ライン 397:
 つまりタグは、 つまりタグは、
  
-    ​<タグ名>+    ​&lt;タグ名&gt;
  
 という書き方だけではなく という書き方だけではなく
  
-    ​<タグ名 属性名="​値"​>+    ​&lt;タグ名 属性名="​値"​&gt;
  
 という具合に書くことができます。 という具合に書くことができます。
ライン 404: ライン 407:
 に正確に言うと、 に正確に言うと、
  
-    ​<タグ名 属性名1="​値"​ 属性名2="​値"​ 属性名3="​値"​ ..... 属性名n="​値"​>+    ​&lt;タグ名 属性名1="​値"​ 属性名2="​値"​ 属性名3="​値"​ ..... 属性名n="​値"​&gt;
  
 ということになります。 ということになります。
ライン 423: ライン 426:
 その一例をご紹介します。 その一例をご紹介します。
  
-    ​<HTML lang="​ja"​> +    ​&lt;HTML lang="​ja"​&gt; 
-        ​<HEAD> +        ​&lt;HEAD&gt; 
-            ​<TITLEBODYタグで遊ぼう! ​</TITLE> +            ​&lt;TITLE&​gt; ​BODYタグで遊ぼう! ​&lt;/TITLE&gt; 
-        ​</HEAD> +        ​&lt;/HEAD&gt; 
-        ​<BODY bgcolor="​Black"​ text="​White"​ background="​sample.gif"​> +        ​&lt;BODY bgcolor="​Black"​ text="​White"​ background="​sample.gif"​&gt; 
-            うん、バックが黒だと<BR>+            うん、バックが黒だと&lt;BR&gt;
             ちょっとアダルトな感じですねぇ(^^;​             ちょっとアダルトな感じですねぇ(^^;​
-        ​</BODY> +        ​&lt;/BODY&gt; 
-    ​</HTML>+    ​&lt;/HTML&gt;
  
  
ライン 495: ライン 498:
         実際の指定は         実際の指定は
         ​         ​
-            ​<BODY bgcolor="#​99FFFF"​>+            ​&lt;BODY bgcolor="#​99FFFF"​&gt;
         ​         ​
         のようになります。         のようになります。
ライン 508: ライン 511:
  
     ■とほほの色入門・色見本     ■とほほの色入門・色見本
-<​!--__TAG_ON__--> ​     ​&​lt; ​<A href="​http://​tohoho.wakusei.ne.jp/​wwwcolor.htm"​>http://​tohoho.wakusei.ne.jp/​wwwcolor.htm</A&gt;+      &​amp;​lt; ​&lt;A href="​http://​tohoho.wakusei.ne.jp/​wwwcolor.htm"​&gt;http://​tohoho.wakusei.ne.jp/​wwwcolor.htm&lt;/A&gt; &amp;gt;
  
 がお勧めです。 がお勧めです。
ライン 632: ライン 635:
 background属性ですが、 background属性ですが、
  
-       ​background属性: +&​gt; ​       ​background属性: 
-           ​ここで指定した画像が、背景画像として用いられます。 +&​gt; ​           ​ここで指定した画像が、背景画像として用いられます。 
-           ​正確には画像ファイルのある“場所”を指定します。+&​gt; ​           ​正確には画像ファイルのある“場所”を指定します。
  
 とあります。 とあります。
ライン 669: ライン 672:
 送信先は、 送信先は、
  
-     mailto:​mm-webp@ichikoro.com ​>+     &​lt; ​mailto:​mm-webp@ichikoro.com ​&gt;
  
 になります。 になります。
ライン 684: ライン 687:
                     発  行 : ichikoro.com                     発  行 : ichikoro.com
                 発行責任者 : 勝部 麻季人                 発行責任者 : 勝部 麻季人
-                              ​mailto:​katsube@ichikoro.com ​>+                              ​&​lt; ​mailto:​katsube@ichikoro.com ​&gt;
                   発行部数 : 1088部(前回)                   発行部数 : 1088部(前回)
-                 ​Webサイト : http://​www.ichikoro.com/​webp/ ​> +                 ​Webサイト : &​lt; ​http://​www.ichikoro.com/​webp/ ​&gt; 
-            お問い合わせ先 : mailto:​mm-webp@ichikoro.com ​>+            お問い合わせ先 : &​lt; ​mailto:​mm-webp@ichikoro.com ​&gt;
  
                             Powerd by まぐまぐ                             Powerd by まぐまぐ
ライン 697: ライン 700:
                           一緒にCGI極めませんか?                           一緒にCGI極めませんか?
  
-                   http://​www.ichikoro.com/​cgi/​ml/ ​>+                   &​lt; ​http://​www.ichikoro.com/​cgi/​ml/ ​&gt;
                                                     Produced by ichikoro.com                                                     Produced by ichikoro.com
 -------------------------------------------------------------------【PR】--- -------------------------------------------------------------------【PR】---
 +
 +
 </​pre></​html>​ </​pre></​html>​
 +{{tag>​Webプログラミング HTML}}
 +~~socialite~~
 +