節約・内職で貯金♪
HTMLでリンクや画像などを貼る方法を覚えれば、ホームページ完成まであともう少し!しっかり覚えて一気にホームページを完成させよう♪
節約メニュー内職メニュー貯金メニューその他・リンク集
 HTMLを覚えよう 2
ここではHTMLの一歩進んだテクニックである『リンク』や『画像の貼り付け』などの方法を紹介します。ちなみにリンクとは他のページにジャンプする方法のことです。

携帯サイトは前項で紹介した内容と今回紹介する内容で十分に作ることが可能なので、しっかりと覚えて一気に携帯サイトを完成させてみましょう♪
HPを作ろうC リンクを作成しようHPを作ろうD 画像の表示に挑戦
HPを作ろうE その他便利なタグ
ホームページを作ろう C  リンクを作成しよう
インターネットで別のページに飛ぶときには、下線のある文字をクリックして別のページにジャンプしますよね。
HTMLではこの仕組みをリンクと呼び、
<a href="○○">〜</a>
というタグを使うことによってリンクを作ることができます。

リンクには2種類あり、自分のサイト外に飛ぶリンクを『外部リンク』、自分のサイト内の別ページに飛ぶリンクを『内部リンク』と呼びます。

さて、それでは実際にリンクを作ってみましょう。
とはいっても皆さんはまだ一つのページしか作っていないので、今回はYahoo!に飛ぶ外部リンクを作ってみることにします。

まず『Yahoo!へ』などと適当に文字を入力します。この文字は何でもかまいません。
そして入力した文字の前に『 <a href=""> 』と入力します。このチョンチョンの記号の中には何が入るかというと、移動したいページのアドレスを入れる決まりになっています。
今回はヤフーに移動するリンクを作るので、『 <a href="http://yahoo.co.jp"> 』となります。さらに『 </a> 』でタブを閉じてヤフーへのリンクが完成です。
完成したら『ファイル』メニューの『上書き保存』で上書をして、ブラウザで確認してみましょう。リンクをクリックしてヤフーのトップページへ移動すれば成功です。
ホームページを作ろう D  画像の表示に挑戦
次はちょっと難しいですが、画像の表示に挑戦してみましょう!

まず説明を分かりやすくするために『ホームページフォルダ』など、どんな名前でもいいのでフォルダを新しく作ります。 そしてそのフォルダの中に先ほど作ったindexファイルを入れます。
さらにそのフォルダ内に新しく『 img 』などのフォルダを一つ作ります。
今は日本語名のフォルダでもいいですが、基本的にホームページを作るときに関係するファイル・フォルダ名は半角英数字を使うのが一般的です。
そして↓に表示されている画像を右クリックして『名前をつけて画像を保存』します。
保存する場所は『img』フォルダ内画像名は『001』と設定しておきましょう。
これで画像の準備は完了です。次は画像を表示させるためのタグをindexファイルに記入します。
画像を表示するタグは『 <img src="○"> 』というタグを使います。○の中には画像ファイルのある場所と画像の名前を記入する決まりになっています。

今回の場合は『 img 』フォルダ内の『 001 』(jpg)ファイルなので、タグは
<img src="img/001.jpg"> 』というタグになります。
ここで/(スラッシュ)が使われています、このスラッシュはフォルダ名とファイル名を分けるために必要な記号です。
それではindexファイルを上書き保存して画像が表示されるか確認してみましょう。
このように画像が表示されれば成功です。おつかれさまでした♪

次はいよいよ画像をホームページスペースにアップロードし、web上で表示させます。
次の『サイトをアップロードしよう』へ進みましょう。

ちなみにホームページ作成に余裕があった人は、下にちょっとしたテクニックを載せておいたので参考にしてみて下さい。他にもまだまだたくさんあるので自分で調べてみるのも面白いかもしれません。
ホームページを作ろう E  その他便利なタグ
それでは最後に覚えておくと便利なタグをいくつか紹介します。
これらのタグを使うとホームページ作成にグッと幅がでてくるので、余裕のある人は一度挑戦してみましょう♪

<hr>
罫線を引くタグです。<hr size="○" color="○">とすることによって線の太さや色を変えることもできます。

<center>〜</center>
<center>〜</center>で囲んだ文字を画面の中央で表示させるタグです。

<marquee>〜</marquee>
タグで囲んだ文字を電光掲示板のように流すことができるユニークなタグです。ただしあまり使いすぎると閲覧者が見にくくなってしまうので注意。

<blink>〜</blink>
タグで囲んだ文字を点滅させることができるタグです。こちらも多用すると目がチカチカしてしまうのでご注意を。

『 <body bgcolor="○"> 』
bodyタグに挿入して使うタグです。ホームページの背景を○で指定した色に変える事ができます。例:<body bgcolor="skyblue">など
現在作成中です♪
Copyright © 節約・内職で貯金♪ All Rights Reserved.