HTML

menu

これまで、コンテンツのメニューとか、ulタグとliタグでやっていたけど、もともとmenuタグというのがあるらしい。<menu> - メニュー - とほほのWWW入門ulじゃなくてmenuでliを囲む。こうする。 見た目は変わってないように見える見た目は変わってないように見える</menu>…

div#style

テキストに色を付けたいが、body#textだと全体的に同じ色になるので、divごとに細かなスタイル指定をする。<div> - ブロック要素 - とほほのWWW入門スタイル指定はいろいろ方法があるけど、divタグなどのタグに直接書く場合はstyle属性。divごとにstyle="color:~</div>…

div#align

align属性でブロックを右に寄せたり中央に寄せたり左に寄せたりする。<div> - ブロック要素 - とほほのWWW入門div.htmlを、こう書く。 1つ目は右寄せ、2つ目は中央寄せ、3つ目は左寄せ。 こうなるこうなる。Sample/div.html at master · bg1bgst333/Sample · GitH</div>…

li

箇条書きのアイテムはliタグで囲む。<li> - リストアイテム - とほほのWWW入門前回のulのアイテムを3つに増やす。と書くと、 アイテムが3つになる。アイテムが3つになる。Sample/html/li/li/src/li at master · bg1bgst333/Sample · GitHub</li>

ul

ulタグは順序の無いリストを表現する。<ul> - 順序無しリスト - とほほのWWW入門中黒点みたいなので箇条書きの形式。と書くと、 こうなるこうなる。Sample/html/ul/ul/src/ul at master · bg1bgst333/Sample · GitHub</ul>

meta

metaタグは、いろいろなメタ情報を付加する。<meta> - メタ - とほほのWWW入門よく見かけるのは、Content-typeとcharsetの部分。 <html> <head> <title>meta</title> </head> <body> あいうえお </body> </html> まず、これを、 UTF-8で保存UTF-8で保存。 当然、文字化けはせず、表示できる。当然、文字化けはせず、表示で</meta>…

div

divタグは、文章をブロック要素としてまとめる。<div> - ブロック要素 - とほほのWWW入門 <DIV>^OÆ<P>^Opタグとの違いがちょっと難しい。こう書いた時、 1行分空かない表面的には、1行分空かないぐらいの違いしかない。 他にも違いはいろいろあるのだが、なんともわかりに</p></div></div>…

p

pタグは段落を表す。<p> - 段落 - とほほのWWW入門1つの<p>~</p>で1行を表すような感じ。とすると、 こうなるこうなる。 <p>~</p>と<p>~</p>の間は1行分空いている。 基本的に改行だけなら空白に置き換わるので、表示時には改行されずに半角1文字空く。 (ただ、1行で表示しきれな</p>…

img

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に配置。 表…

a

aタグでハイパーリンクを張る。<a> - リンクする - とほほのWWW入門href属性にURL、タグの中の値はリンクとなるテキスト。こう書くと、 このように表示されて、マウスオーバーでリンク先もわかる。このように表示されて、マウスオーバーでリンク先もわかる。 リ</a>…

DOCTYPE

は、正式にはHTMLタグではないらしい。 ドキュメントタイプ宣言というもので、HTMLのバージョンを表している。 - ドキュメントタイプ - とほほのWWW入門まず、 $ vi DOCTYPE.html $ cat DOCTYPE.html <html> <head> <title>!DOCTYPE</title> </head> <body> !DOCTYPE </body> </html> $ 何も付けない。 IE11の開発者…

h1-h6

h1タグからh6タグまでの6つのタグは見出しに使う。<h1>~<h6> - 見出しh1が一番文字が大きく、h6が一番文字が小さい。それぞれの字がどうなるか。上が一番大きくて徐々に小さくなっていく上が一番大きくて徐々に小さくなっていく。Sample/html/h1_h6/h1_h6/src/h1_h6</h6></h1>…

font#face

フォントの種類を指定するには、fontのface属性を指定する。<font> - フォントいくつかフォントを指定してみる。Linuxで明らかに変わるフォントがこれぐらいしかなさそう・・・。Courierと変わった。Sample/html/font/face/src/font at master · bg1bgst333/Sample</font>…

font#size

テキストのサイズは、fontのsize属性で指定する。<font> - フォント 文字の表示1から7までの数字で指定でき、一番小さいのは1、1番大きいのが7。1から7まで並べてみる。1から7までこうなる。Sample/html/font/size/src/font at master · bg1bgst333/Sample · GitHub</font>

font#color

テキストの色は、fontのcolor属性で指定する。<font> - フォント 文字の表示一部の色は、fontのcolor属性で色名で指定することもできるし、6桁16進数ではなく3桁16進数で表すこともできる。赤、緑、青、緑として出力。微妙に色が違う2番目と4番目の色が、微妙に違</font>…

font

テキストのサイズ、色、フォントを変えるには、fontを使う。<font> - フォント 文字の表示FGHIJだけ赤にした。真ん中だけ赤こうなる。Sample/html/font/font/src/font at master · bg1bgst333/Sample · GitHub</font>

body#background

bodyの背景に画像を設定するには、bodyタグのbackground属性に画像ファイルのURLなどを指定する。<body> - 本文 基本的な説明 �A同じ場所にある"test.png"を指定。 $ ls body.html old test.png $ sudo vi body.html $ cat body.html <html> <head> <title>body#background</title> </head> <body text="#ff0000" background="test.png"> ABCDE<br>FGH</body></html></body>…

body#bgcolor

bodyの背景色を設定するには、bodyタグのbgcolor属性に色を指定する。<body> - 本文 基本的な説明 �A背景色を緑(#00ff00)にする。テキストは赤。背景が緑でテキストが赤背景が緑でテキストが赤になった。 (これも非推奨。)Sample/html/body/bgcolor/src/body at ma</body>…

body#text

body内のテキストの色を変えるには、bodyタグのtext属性に色を指定する。<body> - 本文 基本的な説明 �@16進数で#ff0000、つまり赤を指定。テキストを赤に赤になった。 (しかし、現在は非推奨であり、cssで変更すべきである。)Sample/html/body/text/src/body at m</body>…

br

brタグは文を改行させるタグ。<br> - 改行このように、EとFの間、JとKの間に、brタグを挿入すると、brこのように改行される。Sample/html/br/br/src/br at master · bg1bgst333/Sample · GitHub

script

scriptタグはJavaScriptなどのスクリプトを書くタグ。<script> - スクリプトscriptはheadに書くのが一般的だが、今回はbodyの中にscriptタグを入れて、その中でJavaScriptでwindow.alertで"Script"と表示するようにしている。読み込み開始時読み込み開始時は、"Scrip…

コメント

""で囲んだ部分はコメントとなり、その部分のタグは実行(表示)されない。Bodyのところをコメントしてみる。コメント確かに"Body"は表示されなくなった。Sample/html/_comment/_comment/src/_comment at master · bg1bgst333/Sample · GitHub

body

bodyタグはhtmlのボディ部分であることを示すタグ。<body> - 本文headの中ではなく、headと並ぶ同階層にbodyタグを置いて、その中に表示したい本文やタグを入れていく。 ここでは"Body"を表示する。bodyタグページそのものにようやく"Body"と表示された。Sample/ht</body>…

title

titleタグはhtmlドキュメントのタイトルを定義するタグ。<title> - タイトルheadタグの中にtitleタグを書き、さらにその間に表示したいタイトルを書く。 ここでは"Title"としている。titleタグブラウザのタブの部分が"Title"になった。Sample/html/title/title/src/</title>…

head

headタグはhtmlのヘッダ部分であることを示すタグ。<head> - ヘッダhtmlタグの中にheadタグを入れる。headタグこれも特に何も表示されない。Sample/html/head/head/src/head at master · bg1bgst333/Sample · GitHub</head>

html

htmlタグはhtmlドキュメントであることを示すタグ。<html> - HTML文書 $ pwd /var/www/html $ vi html.html $ cat html.html <html> </html> $ sudo systemctl restart httpd $ ifconfig enp0s3: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500 inet 10.0.2.15 netmask 255.255.255.0 broadcast 10.0.2.25</up,broadcast,running,multicast></html>…