![]() |
HTMLでリンクや画像などを貼る方法を覚えれば、ホームページ完成まであともう少し!しっかり覚えて一気にホームページを完成させよう♪
| |
インターネットで別のページに飛ぶときには、下線のある文字をクリックして別のページにジャンプしますよね。 HTMLではこの仕組みをリンクと呼び、 『 <a href="○○">〜</a> 』 というタグを使うことによってリンクを作ることができます。 リンクには2種類あり、自分のサイト外に飛ぶリンクを『外部リンク』、自分のサイト内の別ページに飛ぶリンクを『内部リンク』と呼びます。 さて、それでは実際にリンクを作ってみましょう。 とはいっても皆さんはまだ一つのページしか作っていないので、今回はYahoo!に飛ぶ外部リンクを作ってみることにします。 まず『Yahoo!へ』などと適当に文字を入力します。この文字は何でもかまいません。 ![]() 今回はヤフーに移動するリンクを作るので、『 <a href="http://yahoo.co.jp"> 』となります。さらに『 </a> 』でタブを閉じてヤフーへのリンクが完成です。 ![]() ![]() ![]()
次はちょっと難しいですが、画像の表示に挑戦してみましょう! まず説明を分かりやすくするために『ホームページフォルダ』など、どんな名前でもいいのでフォルダを新しく作ります。 そしてそのフォルダの中に先ほど作ったindexファイルを入れます。 ![]() 今は日本語名のフォルダでもいいですが、基本的にホームページを作るときに関係するファイル・フォルダ名は半角英数字を使うのが一般的です。 ![]() ![]() ![]() 画像を表示するタグは『 <img src="○"> 』というタグを使います。○の中には画像ファイルのある場所と画像の名前を記入する決まりになっています。 今回の場合は『 img 』フォルダ内の『 001 』(jpg)ファイルなので、タグは 『 <img src="img/001.jpg"> 』というタグになります。 ![]() それではindexファイルを上書き保存して画像が表示されるか確認してみましょう。 ![]() 次はいよいよ画像をホームページスペースにアップロードし、web上で表示させます。 次の『サイトをアップロードしよう』へ進みましょう。 ちなみにホームページ作成に余裕があった人は、下にちょっとしたテクニックを載せておいたので参考にしてみて下さい。他にもまだまだたくさんあるので自分で調べてみるのも面白いかもしれません。
それでは最後に覚えておくと便利なタグをいくつか紹介します。 これらのタグを使うとホームページ作成にグッと幅がでてくるので、余裕のある人は一度挑戦してみましょう♪ 『 <hr> 』 罫線を引くタグです。<hr size="○" color="○">とすることによって線の太さや色を変えることもできます。 『 <center>〜</center> 』 <center>〜</center>で囲んだ文字を画面の中央で表示させるタグです。 『 <marquee>〜</marquee> 』 タグで囲んだ文字を電光掲示板のように流すことができるユニークなタグです。ただしあまり使いすぎると閲覧者が見にくくなってしまうので注意。 『 <blink>〜</blink> 』 タグで囲んだ文字を点滅させることができるタグです。こちらも多用すると目がチカチカしてしまうのでご注意を。 『 <body bgcolor="○"> 』 bodyタグに挿入して使うタグです。ホームページの背景を○で指定した色に変える事ができます。例:<body bgcolor="skyblue">など |
現在作成中です♪
| |||||||||||||