HTMLの基礎
HTML5による文章は、この文章を書いているFRONTPAGE(MicrosoftのFree版
)でもあるようなのだが、本Webは CSS2.1でもあるようだ(CSSは苦手です。)また、FrontPageのいいところは、下のちょっとした画面にコードエラーが あると、その場所を指摘できる点かな。さすがに古いので試しとしてBrowseできるのが、IE8と2世代も3世代も前の ものだったりするが。それと、IE8が参照されたりなので、いつも使っているGoogle Chromeでみるより若干文字の サイズが大きい気はするが。素人なりの、そんなに凝った内容ではなく、文章が書けて、追加分が書けて、1-2枚の絵が 貼れて、あとプラスアルファといったところかな。かなりHtml5では非推奨のものもあるが徐々になおしていく予定。 1)基本形 <!DOCTYPE html> <html> <head> <title>htmlのタイトル</title> </head> <body link="#66FF99" vlink="#66FF99" alink="#66FF99" text="#FFFFFF" bgcolor="#000000" > <table width="1130"> <td> <center>ページのタイトル</center> はるはあけぼの<br> はるはふけもの<br> </td> </table> </body> </html> このほとんどが<なになに>~</なになに>とペアになってます。 例外は<!DOCTYPE html>と<br>と相方がいない もの。 <!DOCTYPE html>は決まり文句のようなものでDOCTYPE宣言をしてHTMLのバージョンや文書の 仕様をブラウザに 把握させたのではあるが、Html5ではシンプルそのものである。 <html>は</html>と、<body>は</body>と、<table>は</table>とペアーとなる。 私の1ページで示すWeb文書は基本的に1つのテーブルの中に、文章が数十行あるいは段落分けされ、 <td></td>でくくらないと、縦書きになってしまう。しかし他の<table><body><html>は どこで終わりになるか最初から分っているわけでもないので、終了マーク</table> </body></html>を打ち忘れることもしばしばである。(</td>も同じ) ヘッダーにはtitleの表示が(必須ではないが)タイトルとして書けば、Webを読み込んだ時に 表示される。 (htmlのタイトル等) 同様に、文章のタイトルに事例では「ページのタイトル」が必要かと思い、記載した。 なお、<center></center>とは、ページのタイトルという題目だから、真ん中に 表示すべきという小生の考え方。 なお、<p></p>のペアでこの間に文章を入れていくことも可能。ただ、 どちらかというと、 行間は一つ空いた感じになる。これを避けるならば、文章のお尻に<br>という単体の 拡張子をおくことにより、文を切れ目を入れる感じになる。 <body>は文面であり、(本当は</body>とペアなのだが。)そのなかに色を示している。 link="#66FF99" (リンクする外部リソースを指定) vlink="#66FF99" (訪問済のリンクする外部リソースを指定) alink="#66FF99" (選択中の外部リソースを指定) 三パターン示しているがHTML4.01では、非推奨 text="#FFFFFF" テクストとは文章の文字 すなわちここでいえば、白 bgcolor="#000000" バックグラウンドカラーとは、地の色で、私の場合黒。 以降、<table><tr> はるはあけぼの </tr></table>はテーブルを利用した本文の 記述である。(と言っても、ひとつの大きなテーブルを利用したもの) テーブル(表)の基本的な構造は、<table>〜</table>の中に <tr>〜</tr>で表の横一行を定義して、 さらにその中に<th>〜</th>や<td>〜</td>でセルを定義するようである。 本来<th>タグは、テーブル(表)の見出しセル(table header cell)を作成する際に使用するようである。 本来と使用法が異なるようではあるが、上記のwidth指定をすることで(ただし<table>〜</table>の中) 文章が一定の長さをもって改行するので使用している。 最低限<table>と<tr> は必要なようである。たとえ、Table行の中にwidth="1130"と 横幅を指定しても<tr>で始まる行がないと、縦書きになってしまう。逆に言うと、 Tableのなかwidth="1130"と、<tr>があれば、「はるはあけぼの」が何回繰り返されようと、 1130(何の単位かよくわかっていないのだが)以上くりかえされると改行する。 なおかつ、Browser(Chrome とIE11)では、横幅をちじめても1130文字(仮に1130が 1130文字とすれば)改行するため右端をみるためにはスクロールすることになる。 実際のFrontPageを使用すると、テーブルなんかも <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" > といった面倒くさい記述になってしまったりする。 また、Font指定をすると、 <style type="text/css"> .auto-style1 { font-family: メイリオ; } </style> といった形が、<head><title>htmlのタイトル</title>の後ろに</head>でheaderがおわる 前に挿入される。まあ、Font指定は仕方ないかもしれないが、Sampleで書いた <!DOCTYPE html>からはじまり、</body></html>でおわる形式でも十分に有用であるので、 右クリックの新規作成Html Document.htmlはSampleそのままとして、実際には はるはあけぼののところから文章を上書きするようにしようとしている。 2)画像 画像についてはFrontPageにおいては、画像をDrug & Dropするだけで、 <img src="URL(画像のアドレス)" width="横幅" height="高さ"> という部分まで表示される。 さらには、画像のプロパティを操作できる。(右クリックで画像のクリックが操作できる。) 外観にサイズがあるので、横幅・高さを指定できる。(縦横比の維持もあり横幅あるいは高さの 片方だけでも良い)さらには外観に枠を設けることができ、ハイパーリンクにもともとの画像を指定する ことにより、その縮小画像の本当の大きさを表示することも可能である。外観の枠はlinkの色になる。 (link="#66FF99") なおハイパーリンクは<a href="URL(画像のアドレス)"></a>というアドレスとなる。 なお、複数枚の画像をまとめて一列に並べることも(1枚1枚が大きくなければ)可能である。 また、画像間にスペースを空けることも可能であるが、FrontPageではコードでみると の 連続である。若干きれいではない感じがするが、 他のソフトではどうなのかとは思うが。 ![]() 画像を差し込んだ例 他のソフトではどうなのかとは思うが。<br><br> <img height="296" src="GIF/8dot3name.jpg" width="622"></font></span><br> <br> 3)そのほか 凝りだすと、絵のまわりに文章を書きたいだとか、Web Pageに音楽を流したいだとか、 フォームを用意してそこに読者が記述するだとか、いろいろやりたくなるであろうが、 まずは基本を押さえ、CSSに興味を持つなど(小生CSSは全くの無案内)いろいろと発展さ せていけばいいであろう。(例えばFaceBookにしても、作成したら削除できないと思っていたが あるボタンを押すと書き直しができるなど-あまり使ってないが-便利な機能があったりする) 一応、現在小生が参考にしているURLは以下の通り。 http://masaboo.cside.com/new_html1/ht_menu.htm WebPage作りのお勉強 http://www.htmq.com/html/ HTMLタグリファレンス 以上 |
---|