2021-10-07

li

HTML

箇条書きのアイテムはliタグで囲む。

<li> - リストアイテム - とほほのWWW入門

前回のulのアイテムを3つに増やす。

と書くと、

アイテムが3つになる。

Sample/html/li/li/src/li at master · bg1bgst333/Sample · GitHub

2021-10-06

ul

HTML

ulタグは順序の無いリストを表現する。

<ul> - 順序無しリスト - とほほのWWW入門

中黒点みたいなので箇条書きの形式。

と書くと、

こうなる。

Sample/html/ul/ul/src/ul at master · bg1bgst333/Sample · GitHub

2021-10-05

meta

HTML

metaタグは、いろいろなメタ情報を付加する。

よく見かけるのは、Content-typeとcharsetの部分。

<html>
  <head>
    <title>meta</title>
  </head>
  <body>
    あいうえお
  </body>
</html>

まず、これを、

UTF-8で保存。

当然、文字化けはせず、表示できる。

Shift_JISで保存。

文字化けする。

metaでcharsetにShit_JIS。

あれ？これで治らない・・・。

metaがheadの中なのでbodyには効かないのかと思ってtitleを日本語にした。

関係なかった。

W3C I18n Checker

これでリクエスト情報を調べると、

metaのcharsetがShift_JISなのに、Content-TypeがUTF-8になっている。

HTTPヘッダのメタ情報

結局は、Apacheの設定か。

httpd.confの末尾にこれを追加。

これShift-JISですが表示出来てます。
CGIやPHPなら、HTTPヘッダを変えて、そちらで表示できるかもだけど、metaタグでは厳しい。
さっきのApacheの設定変更を元に戻して、

utf8に戻したバージョン。

utf8で保存。

utf8で表示。
一応metaタグでの文字コード指定もつけておいたほうがいいけど、サーバと文字コード合わせないとね。

という感じで終わろうとおもっていたが、もうちょっと探ったら、

ここでUTF-8と定義しているのがみつかったので、

コメントアウトして改めていじってみる。

両方ともUTF-8。

表示できる。

ファイルエンコードをShift_JISにする。

文字化け。

両方Shift_JIS。

表示できる。

ファイルエンコードをUTF-8にする。

文字化け。
というわけで、AddDefaultCharsetがコメントアウトされていれば、metaタグのCharsetでレスポンス返ってくるので、metaタグのcharsetをソースコードのエンコード形式と合わせると表示される。

Sample/html/meta/meta/src/meta at master · bg1bgst333/Sample · GitHub

2021-10-04

div

HTML

divタグは、文章をブロック要素としてまとめる。

<div> - ブロック要素 - とほほのWWW入門
 <DIV>^OÆ<P>^O

pタグとの違いがちょっと難しい。

こう書いた時、

表面的には、1行分空かないぐらいの違いしかない。
他にも違いはいろいろあるのだが、なんともわかりにくい。

Sample/html/div/div/src/div at master · bg1bgst333/Sample · GitHub

2021-10-03

p

HTML

pタグは段落を表す。

<p> - 段落 - とほほのWWW入門

1つの<p>～</p>で1行を表すような感じ。

とすると、

こうなる。
<p>～</p>と<p>～</p>の間は1行分空いている。
基本的に改行だけなら空白に置き換わるので、表示時には改行されずに半角1文字空く。
(ただ、1行で表示しきれない長い場合は、空白のところが改行された。)
中で<br />を使った場合は普通に改行される。ただし、1行分空くことはない。

Sample/html/p/p/src/p at master · bg1bgst333/Sample · GitHub

2021-10-02

img

HTML

imgタグで画像を表示する。

<img> - イメージ - とほほのWWW入門

あらかじめ画像image1.pngを用意しておいて、

こう書いて、

$ vi img.html
$ cat img.html
<html>
  <head>
    <title>img</title>
  </head>
  <body>
    <img src="image1.png" />
  </body>
</html>
$ ls
image1.png  img.html
$ cp img.html image1.png /var/www/html/
$

/var/www/htmlに配置。