作成ページの修正・確認

3.作成ページの修正・確認
(1)HTMLの表示がされないとき

原因はタグの閉じ忘れや、タグの入力間違いが考えられます。
そういう場合はもう一度、編集をし直して下さい。

HTMLファイルの上方に”表示”というところがあります。そこを左クリックして下さい。
そうすると”ソース”というところがありますので、それを左クリックするとメモ帳が開くと思います。
確認修正の仕方1

あとはタグを修正します。次にメモ帳のファイルというところを左クリックすると、
”上書き保存”というのがありますのでそれを左クリックして下さい。
確認修正の仕方2

上書き保存したものを見るには、メモ帳を一度閉じて、htmlファイルをクリックして見て下さい。

どうでしたか?最初はとまどうかもしれませんが、ゆっくりと一つずつ確実に行っていって下さい。
作成していく間にコツを掴んでいくと思います。



ホームページを公開するには

5.ページを公開するには
ページの公開

HPとしてみんなに見てもらうには、御自身が借りているサーバーにHTMLファイルを転送しなければなりません。
それにはファイル転送ソフト(FTPソフト)というものが必要となります。
多くのHP作成ソフトにはファイル転送ができるソフトまたはツールが付いています。
例えばホームページビルダーには「簡単ファイル転送」という便利なファイル転送ツールが付いています。
そういったHP作成ソフトをお持ちでない場合はフリーソフトでファイル転送ソフト(FTPソフト)があるので、検索をして使いやすと思うものを探してみてください。
こちらではファイル転送ソフト(FTPソフト)の紹介や使い方は省かせていただきます。
  

最近ではWordpressを使ったホームページが多く見かけられ、以前のようなホームページの作成はとても少なくなっております。
Wordpressでは多くのテーマというものがあり、自分に合ったデザインのものを作ることが容易になったかと思います。
ご自身の制作環境にあった方法もあるかと思いますので、ホームページ作りを楽しんでください。



素材の貼り方

4.素材の貼り方
(1)背景画像を貼る

例)<body background="○○/○○▽/ch011-1.gif"></body>
の様に"ファイルの場所/画像の名前.ファイル形式(gifやjpgなど)"

     壁紙 この壁紙を貼ってみよう!!
     全体的なHTML

<html>
  <head>
<title>壁紙テスト</title>
  </head>
<body background="ファイルの場所/画像の名前.ファイル形式(gifやjpgなど)">
</body>
</html>

  • 持ち帰ってPCに保存した画像ファイルはご自身の登録しているHPサイトに転送をしてから使用して下さい。

必ず上の様にタグは(例:</body>のように)閉じて下さいね。
もし保存して見えないときは、一度ソースを確認してみてください。

上の例

(2)小物の貼り方

(例)<img src="○○/○○▽/kuma.gif">    
熊のアニメ
このクマ君を貼ってみよう!!

 

全体的なHTML
<html>
<head>
     <title>小物テスト</title>
   </head>
   <body>
     <img src="ファイルの場所/画像の名前.ファイル形式(gifやjpgなど)">
   </body>
  </html>


注意!!
:背景と同じ事ですが、ファイルは必ずUPしてから使用して下さいね。
この場合もファイルのURLは、必ず控えておいて下さい。
上の例



作成ページの保存法

2.作成ページの保存法
(1)保存の仕方

テキスト文書で作られたページはそのままでは、HTMLとして見る事はできません。
通常、テキスト文書は普通に保存すると、”○○○.txt”となっている筈です。
先ほどHTML作成の前にで書いた物をメモ帳で入力してください。
そして、以下のように順番に行ってください。

(1)まず、作成したファイル画面の上方に”ファイル”というところがあります。
   そこを左クリックして下さい。

(2)次に”名前を付けて保存”を左クリックすると、保存画面が出てきます。
保存の仕方1

(3)保存画面の真ん中の下方に、”ファイル名”というところがあるので、
  そこにファイル名をつけて後ろに ”.html”をつけて下さい。
  ここでは"kantan.htm"という名前を付けて保存してみてください。

保存の仕方2
例)○○○.html
この時、必ず半角英数字でファイル名をつけて下さい。

(4)最後に自分が保存する場所を選び、”保存”を左クリックして下さい。

(2)HTMLファイルを開けて確認する

では、実際にHTMLファイルを開けて確認してみましょう!

まず、自分が保存した場所を開けてみましょう。
どのファイルがHTMLファイルか解りますか?

保存の確認

HTMLファイルのアイコンは、御自身がお使いのブラウザー(HP閲覧ソフト)によって異なります。
使用されているのがインターネットエクスプローラーなら、
白い紙の上にエクスプローラーのeの文字が描かれています。

確認方法は至って簡単、普通のテキスト文書や他のソフトを立ち上げる時と同じようにファイルをダブルクリックまたはシングルクリックしてください。
そうするとあなたが使用しているブラウザーが立ち上がり、インターネットを見ているような感じで開けられます。

どうですか?背景や小物は見えましたか?



HTML作成の前に-その3-

1.HTML作成の前に
(3)HTMLって何? その3☆基本的なお約束事と簡単なページ

その3
☆基本的なお約束事☆
 (1)タグは半角英数字で書くこと!
 (2)s<>で囲むこと!

 結構、>を忘れる(閉じ忘れ)時がありますので、気を付けて下さいね。
忘れてしまうと、上手く表示できない場合があります。
次はHPの構造について簡単に書いています。

☆簡単なHTMLページ☆

<html>
 <head>
  <title>題</title>・・・ここはページのタイトル
 </head>
<body>

 から以下は内容・・・ここには本文、コンテンツの内容が含まれます。

</body>
</html>

例えば。。。

<html>
 <head>
  <title>HTMLの基礎</title>
 </head>
<body>
   いらっしゃいませ m(__)m ようこそ私のHPへ
</body>
</html>

このようになります。上の例

たったこれだけでもページになっています。

!!注!!

<html></html>というように始まりは<○○>で終わりは</○○>で終わっていますよね?!
このように</○○>で終わることを忘れないようにして下さい。



HTML作成の前に-その2-

1.HTML作成の前に

(2)HTMLって何? その2☆説明☆

その2
 ☆説明☆
  (1)の説明
  おまじないと説明してもかまいませんが、あえて説明しますね。
文書型宣言といって、HTMLの最初に表示するものです。とはいっても、ページに表示されるものではありません。
この文書型宣言には3種類あって、覚えておく必要があることだけをあげておきます。

1)HTMLでは文書のみの構造を指定して、レイアウトなどの見栄えに関するものはスタイルシート(CSS)を用いて、別に記述するときに用いる宣言。

1)Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
       "http://www.w3.org/TR/html4/strict.dtd">

2)先に書きましたが、HTMLの以前のバージョンを使用していて、すぐにHTML4.01に移行できない時のための暫定的なもの。
見栄えやレイアウトなどに関する設定をスタイルシート(CSS)を使って行う事もでき、併用している場合はこの宣言を使う。

2)Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transirional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

3)フレームを使ったページを作る時に使う宣言。

3)Framel:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frame Set//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

 (2)の説明
 <html>と</html>は<html>でHTML文書がはじまり、その間には(3)や(4)が含まれて、最後に</html>でHTML文書が終わります。

 (3)の説明
 <head></head>の間にはページのタイトル(<title>ここにページの題を書く</title>)や先ほど書いたスタイルシート(CSS)やJavascriptを記述します。ここで書かれるものはページのレイアウトや見栄え、かっこいい動きを付けるなどの設定をするところです。

 (4)の説明

 <body></body>の間には文章を書いたり、写真を貼り付けたりなどの内容を書くところです。インターネットをしていて、私たちが目にしている内容がここに書かれています。ページに背景をつけたり、かっこいいレイアウトや動きのある装飾をするのは(2)で説明した事が必要になります。

HTML作成の前に-その1-

1.HTML作成の前に
(1)準備するもの
  • テキストエディタ-・・・メモ帳、Word padなど
  • HP作成ソフト
  • ファイル転送ソフト※1
  • HTMLタグ辞書

※1 HP作成ソフトをご使用にならない方、またはHP作成ソフトに転送機能が付いていない場合に必要となります。

 市販のソフトにはホームページビルダーやDreamweaverなどたくさんの種類があります。また他にフリーソフトで使い易いのもあるようです。
初めて作ったときは何もできなかったため、ホームページビルダーの『どこでも配置モード』というワープロ感覚で作る機能で作っていました。
時間が許す限りHTML編集画面を見て、本を見ながらHTMLを少しずつ覚えました。

  『ちょっと難しいなぁ~と思う方』や『時間をかけずにすぐ簡単に作りたい方』は、
市販のHP作成ソフトは多く売られているので、それらをお使いください。
HP作成ソフトをお使いにって、少しずつHTMLの知識を増やしていくのもいいと思います。
ちなみに私が初めての時は、HP作成ソフトとHTML辞書を使ってHP作成をしていました。
HTMLの基礎は知っておいた方が作成する時に強い味方となるでしょう。

(2)HTMLって何? その1☆HTMLの構造☆

 HTMLはホームページを作成する為に使われる言語です。
いろいろなソフトを作るのに必要なプログラミング言語とは違って、かなりシンプルな構造になっています。
(1)でも書きましたが、最近はホームページ作成ソフトが多く市販されていますので、HTMLを覚えなくても作る事は可能です。
しかし、HTMLを知っていれば、修正が必要なとき、テキストエディタ(メモ帳、ワードパッドなど)で行える簡便さがあります。

 現在HTMLはバージョンでいうと4.01になります。
以前のバージョンではタグのみでテキストに字の色を付けて見栄えを良くする事などが可能でした。
ですが、現在のHTML4.01では見栄えを良くしたり、レイアウトでカッコよくするにはスタイルシート(CSS)を用いて別に設定するという方法を推奨しています。
機会があれば、スタイルシートについても後に紹介したいと思います。

その1
   ☆HTMLページの構造☆

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">  …(1)
<html> …(2)
  <head> …(3)
   <title>題</title>・・・ここはページのタイトル
  </head>
<body> …(4)

から以下は内容・・・ここには本文、内容が書かれています 

</body> 
</html>

 構造はすごくシンプルなのがよく解ると思います。次のページで、各番号について説明していきます。