2008 . 03 « 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 » 2008 . 05

HTML 基本 3

背景色〜背景画像


さてさて、ページが一ページ完成したのは非常に喜ばしいことなのですが!しかし!
さすがにアレだけだと微妙ですよね;シンプルすぎて・・・。
なので、ちょくちょく変形させていきましょう。此処からがHP作りの醍醐味(笑)でございます。
楽しいのでガンガン覚えましょうー♪

最初に、背景色の変更です。
背景色を変えるには、BODYを変更させます!

<BODY>となっているところを、<BODY bgcolor="背景色">と言った感じで変えます。
物凄く簡単なので

背景に画像を入れたい場合は
<BODY background="画像URL">と言った感じで変えます。

HTML基本 2

作成〜注意

それでは色々と説明したところで、やっとこさ作成ですー!
すっとばして此処を読んでいる人も(笑)、そうでない人も、一番楽しみにしていた所ではないかと!
基本の基本なので、まだ飾りッ気はありませんがこれからどんどん素敵になっていきますので・・・!
此処からはwinを前提として説明していきますが、Macと基本は変わらないと思います。


1.メモ帳を用意してください。

2.以下の通りに打ってください(もしくはコピー&ペースト)
<HTML>
<HEAD>
<TITLE>サンプルページ。</TITLE>
</HEAD>
<BODY>
まずはこんな感じ。<BR>
これでもう一ページが完成です!<BR>
やったね!(笑)
</BODY>
</HTML>
------------------
補足説明
<HTML>は、前のページで説明したとおり「なくてはならない存在」です。
一番最初と一番最後に必ず入れてください!「HTML」や「HEAD」などの文字は、全て「< > と < / >」で囲みます。
<HTML>で始め、</HTML>で終わらせる。<TITLE>で始め、</TITLE>で終わらせる。
<HEAD>で始め、</HEAD>で終わらせる。<BODY>で始め、</BODY>で終わらせる。

・・・と、こんな感じですー。
------------------

3.打ち終わった(コピーし終わった)ら、「ファイル→名前をつけて保存」で保存してください。
この時注意して欲しいのは、名前の付け方です。そのページのファイル名を
ひらがなや漢字、カタカナで書かれてしまうと、アップしたときにページが表示されなくなってしまいます
なので、必ず全国共通語(笑)の英語で設定してください。
保存するとき、もう一つ注意して欲しいことがあります。
それは、「拡張子」です。「.html」や「.htm」など、ファイルの名前の後に必ずつけてください。
とりあえず、今作ったページは「top.html」と言う名前をつけてあげてください!
ファイルの種類は「すべてのファイル」を選択し、保存を押します。

4.ファイルを開いてください
どのようになっているかを確認するために、ファイルを開きましょう!
しかし、そのまま開いただけじゃあ変わらないので、少し開き方を変えます。
まず、インターネットを開いてください。「ファイル→開く→参照」の順番で、
先ほど作った「top.html」を呼び出してくださいな。
すると、こんな感じ に、なっているはずです。


此処までが、最初の最初、基礎の基礎です!これで貴方は一ページを作ってしまいましたv
素晴らしいと自分を褒め称えてください(笑)

HTML 基本1

基本知識〜各部の名前
(20040801改正)


とりあえず、知っておいた方が後々楽になるので専門用語
(といってもそんなに難しくないです(笑))
を紹介します。


HTML(えいち・てぃー・えむ・える)
Hyper Text Markup Languageの略。これが俗に言う「タグ」の基本となります。

HEAD(へっど)
文字通り頭、です。この頭の中に、色々と知識を加えていきます。

BODY(ぼでぃ)
こちらも文字通り体、です。此処に文字などを書いていきます。



この三つが基本です。この三つが一つのページに必ず入ってなければいけません。
他にもたくさんありますが、入れておいたほうが良い!ものを紹介していきます。
ガンガン行くぜっ!(笑)



META(めた)
これは、是非是非入れて欲しい・・・と管理人切に願っております。
文字化けを防げるタグなので、入れると素晴らしいことになります(笑)
他にも自分のページを検索に引っかかりやすくさせたり、逆にひっかからないようにさせたり出来ます。とても便利!

● 一番ポピュラーな文字化け防止用メタタグ↓(とにかく使って欲しい)
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

● 一番ポピュラーなページPR用メタタグ↓(ヒットさせたい時に有効)
<meta name="description" content="紹介文">
<meta name="keywords" content="キ−ワ−ド">
(紹介文のところに、自分のサイトが検索で出た時に表示させたい紹介文を。例:「HTML・SKIN・素材配布サイト。特にHTMLが豊富。」など)
(キーワードの中には、自分のサイトに当てはまるものをいつくでも入れてください。何個も入れる場合は「html,素材,無料,かわいい,きよりん」など、「,(カンマ)」で区切ってください)

● 一番ポピュラーなページ検索回避メタタグ(裏ページなどに有効)
<meta name="robots" content="none">
<meta name="robots" content="noarchive">
<meta name="robots" content="noindex, nofollow">



基本的にこれらが入ってれば大丈夫なのですが、もう少し補足。



TITLE(たいとる)
お気に入りに入れたりするときに、自動的にサイト名が入ってたりしますよね?
STYLE(すたいる)
コレは後ほど嫌というほど出てくるのですが(笑)一応。
このページ、スクロールバーが矢印のみの表示になっていますよね?フォントだってサイズが固定されるし・・・そのような設定をするのが「スタイル」です。いわば体の中から綺麗になれる・・・みたいな(謎)これを使うと、凄く見栄えが良くなります!


こんな感じですー。大体雰囲気はつかめたと・・・思います!

キャプチャー

レポート画面のキャプチャー画像を作ってみましょう。

キャプチャーとは
キャプチャーとは、ディスプレイに表示されている静止画像や動画像を、
画像データとしてファイルに保存することです

例えば本館TOPページをキャプチャーすると↓このような感じになります

サイズがデカイので縮小してマス

画面の証拠としてもつかえますね

Windowsのキャプチャー方法
レポート画面を表示したまま Altキーを押しながらPrint Screen(prtscr)キーを押します。
クリップボードに画像データが入るので ペイントなどで貼付けて保存しておきます 。

MacOS のキャプチャー方法
コマンドキー(リンゴマークのキー)と
SHIFTキーとメインキーボードの4を押しながら、スペースキーを押します。
ブラウザの画面がハイライトしたらブラウザの画面をクリックすればOK

テーブルタグ


 
タイトル
ここに本文。もじもじ
テンプレート328CIDER別館
テーブルタグ↓
<table background="http://poke.itigo.jp/sozai/bimg/h005.gif" border="0" bordercolor="white" cellspacing="20" cellpadding="7" width="500"> <tr> <td bgcolor="white"><center>タイトル<hr size="8" style="border:dashed orange;">ここに本文。もじもじ</center></td></tr></table>テンプレート<a href="http://riramani.blog39.fc2.com/" target="_blank">328CIDER別館</a>




タイトル
ここに本文。もじもじ

テンプレート328CIDER別館

テーブルタグ↓
<table background="http://poke.itigo.jp/sozai/bimg/h004.gif" border="0" bordercolor="white" cellspacing="20" cellpadding="7" width="500"> <tr> <td bgcolor="white"><center>タイトル<hr size="8" style="border:dashed orange;">ここに本文。もじもじ</center></td></tr></table>テンプレート<a href="http://riramani.blog39.fc2.com/" target="_blank">328CIDER別館</a>




画像も自由に入れ替えていただいてもかまいませんが

素材屋さんの使用方法をよく読んでご利用下さい


画像はbackground="この部分"を入れ替えてください