menu


2017年4月25日火曜日

HTMLの基本

ここでは、HTMLの基本しか教えません。必要になったらそのつど追加で説明する予定です。
HTMLは、タグと言われる<>で構成された命令で作成されます。
基本は、<タグ名>処理</タグ名>で記載されます。タグは、開始と終了で構成されます。
<タグ名>:タグの開始を示します。
処理や文字を書く
</タグ名>:タグの終了を示します。
タグ一つで構成されるタグは、<タグ名 />と記載します
最後の/がタグの終了を示します。
例外として、<br>があります。これは、強制改行表示ですが、<br />と記載できますが、<br>だけでも問題ありません。
HTMLは、タグを組み合わせることにより表示する言語といえます。
絶対に必要な基本HTMLを以下記載します。

各文説明
<!DOCTYPE html>
 このファイルの形式がHTMLである宣言です。

<html>
  HTMLの開始タグ
  ここからHTMLの記載であることを示します。

<head>
  ヘッダー開始タグ
  ここはHTML(サイト)の情報を記載します。

<meta charset="UTF-8" />
 このHTMLの記載文字形式を定義します。
 一番ポピュラーなUTF-8を定義しています。

<title>タイトル</title>
  HTML(サイト)タイトルを記載します。
  ネット検索された際のページタイトルとなります。

</head>
  ヘッダー終了タグ

<body>
  ボディー開始タグ
  HTMLとして表示される本体の開始を示します。
  これ以降がサイト表示されます。

</body>
  ボディー終了タグ

</html>
  HTML終了タグ

以上を"index.html"か"index.php"としてファイル保存してサイトに登録すれば、何も表示されないページが表示されます。
これで、あなたは、サイトを作成する為の真っ白な用紙を手に入れた事になります。
ネットのルールとして、サイトアドレス(ホームページアドレス)にファイル名が指定されていない場合、必ず"index.html"か"index.php"が起動されます。トップページは、"index.html"か"index.php"で作成する事が基本です。

では、今回は、「index.php」で保存して、上記ソースに以下の修正を入れましょう。
私の目的がコミック情報登録サイトの作成なので、申し訳ありません。
※今回は、見栄えより機能重視のエディタ型サイトの作成になります。ファイルへの保存もしますので、phpでの作成をしますが、過去に作成した広告自動登録機能も追加します。もしかして、新ping処理やサイトアップ用ホームページFtpUpDete処理も公開するかも?

<body>
<dvi>
コミックデータ登録メニュー
</dvi>
</body>

実行すると画面に文字「コミックデータ登録メニュー」が表示されます。
<div></div>は無くても同じに表示されますが、処理の区切れとして入れました。
これは、ページのタイト区間として<div></div>を入れました。
これは、結構重要で、区間で区切った単位でその間の表示表現を変えたり、枠を付けたり装飾が可能になります。

ネットで<div>タグを検索して調べれば、囲まれた範囲の表示位置を変えたり背景色を変えたり枠を付けたりいろいろできます。
私のサイトのタイトル表示はそれだけで作っています。
参考に見てください。
以下の二つですが、どりらもタイトルの背景色と枠線の太さや色や枠の角を細工するだけで表現しています。バックに画像を設定したり、いろいろできます。
アニメフロンティア
アニメフロンティア別館
今回は、そこまでしません。基本だけで進めます。

次は、各ページにリンクします。

P.S.私のサイトは、サイト更新の際にRSSファイルを作成し、ping処理でサイト更新pingを送信したり、ページ毎の広告をランダム表示する作りになっています。
広告も、一部タイマーで自動更新などもしています。
データも全てcsvファイルに保存し、ファイルから読み込み表示します。
アニメフロンティア別館に至っては、phpで作成されたcsvファイルから、htmlを自動作成する事で作成されます。(htmlファイル数1600ファイル以上!)
htmlからphpを実行する方法などノウハウは、盛りだくさん!
javascriptでのcsvファイル読み込みやphpでのcsvファイル読み込みなどなんでもあり!
好ご期待ください!(ここ5ヶ月ほどアニメサイトを作成してました!)

0 件のコメント:

コメントを投稿