ホームページを作ろう！ https://ameblo.jp/hometukurou/ マイペースだけどホームページの作り方を書いていきます！ ja リンクを張る これからはリンクを説明します！

普通のホームページで使われるのは
「文字」「画像」そして「リンク」です！

そしてこの「リンク」こそがホームページが雑誌やチラシ等と大きく違う点です。
頑張って覚えていきましょうね！

まずはタグから。
リンクのタグは

<a href="リンク先">文字</a>

となります。
例えばヤフーにリンクを張るなら、

<a href="http://www.yahoo.co.jp/">ヤフーへのリンク</a>

ですね。
実際にはこうなります。↓

ヤフーへのリンク

文字にリンクが設定され、そこをクリックするとそのアドレスへと移動します。
※このブログの設定上、リンクの色はピンクですが、通常は青い文字で表示されます。

復習のコーナー

リンクのタグ

<a href="リンク先">文字</a>
]]> https://ameblo.jp/hometukurou/entry-10555452621.html Sun, 06 Jun 2010 12:16:14 +0900 画像まとめ 少し駆け足になってるかも知れませんが、

<img src="ファイル名(拡張子も)" width="横幅" height="縦幅" border="枠線の太さ">

画像表示はこれだけ覚えておけば完璧です！

基本的にホームページは文字と画像があれば出来ます。逆を言うと文字と画像が表示できないと、ちゃんとしたホームページは作れません。ですので、今までの事をちゃんと理解して次に行きましょう。

いよいよ次は…リンクです！ ]]> https://ameblo.jp/hometukurou/entry-10552711307.html Thu, 03 Jun 2010 13:44:42 +0900 画像の大きさを変える
タグは
<img src="ファイル名" width="横" height="縦">

となります。

この横、縦に数値を入れて設定します。数値は「ピクセル」単位となります。

通常、画像は何も指定しないと、それぞれの解像度の大きさで表示されてしまいますが、
これで値を一定にすると、どんな画像も同じ大きさで表示する事が出来ます。

ただ、気をつけなければいけないのが、表示された画像が小さくなっても容量は小さくなっていないという事です。無駄に容量を使わないためにも、必要以上の大きさの画像は画面上で小さくするのではなく、画像加工ソフト等で小さい画像にしてから表示させましょう。

では実際に大きさを変えてみますね。
縦横の大きさは同じです。


大きさが100の場合
$ホームページを作ろう！

大きさが300の場合
$ホームページを作ろう！

大きさが600の場合
$ホームページを作ろう！

縦を５００、横を１００に設定し、さらに太さ２の枠線をつけた場合
$ホームページを作ろう！

復習のコーナー

画像の大きさを変えるには
<img src="ファイル名" width="横" height="縦">
となり、数値は「ピクセル」となります。 ]]> https://ameblo.jp/hometukurou/entry-10551793510.html Wed, 02 Jun 2010 13:46:53 +0900 画像を表示する
まず始めに何か適当な画像を用意して下さい。
次にその画像をフォルダの中に配置します。

↓用意した画像（下手でごめんなさい！）
$ホームページを作ろう！

※画像の名前等は「半角英数」にして下さい。エラーの原因となる場合があります！

それをＨＴＭＬと同じフォルダ内に保存します
$ホームページを作ろう！

これで準備完了です。
では実際に表示させてみましょう。

まずは画像表示タグです。
<img src="ファイル名" >

となります。ファイル名は名前だけではなく、拡張子まで書いて下さい。

<html>
<head>
</head>
<body>
<img src="neko.gif" >
</body>
<html>

$ホームページを作ろう！

ちゃんと表示されましたか？

続いてこの画像に枠をつけてみます。
次のように書いて下さい。
<img src="ファイル名" border="1">

ファイル名の後にborder="1"という文字が入りました。これが線の太さになります。

$ホームページを作ろう！

これで画像の周りに枠線が付きます。

復習のコーナー
画像の表示タグ
<img src="ファイル名" >
枠線を付ける場合
<img src="ファイル名" border="1"> ]]> https://ameblo.jp/hometukurou/entry-10550735228.html Tue, 01 Jun 2010 09:49:48 +0900 画像、その前に
次は画像について説明します。
と、その前に。

ホームページに画像は著作権や肖像権などに抵触しないものを使って下さい。
つまり、誰かの写真や、誰かが作った画像を使うなら、その版権を持った人の許可が必要って事です。

「じゃあ自分で撮った写真か、自分で作った画像しかホームページには使えないの？」

と思った人もいるかと思いますが、版権フリーの画像を無料で配布しているサイトや、本も売っていますので、必要に応じて用意しましょう。

次に画像の拡張子についてです。

拡張子とは、画像の種類の事です。gifやjpg等の種類があり、それぞれ特徴があります。
一般的に写真なら「jpg」イラストなら「gif」が使われているみたいです。

詳しく書くと長くなるので、簡単に書きますと、
「jpg」画像がきれいに表示される。
「gif」画像を透明にしたり、アニメーションが出来る。

あと、同じ画像を同じサイズで表示した場合、「jpg」の方が「gif」より奇麗な分容量を使います。
必要に応じて使い分けて下さいね。

そして画像を加工するソフトですが、あるに越した事はありません。
特にお店のホームページを作ろうと思っている人は必要だと思います。
私は「フォトショップ」を使っています。

お金を使いたくないって人は、無料の画像加工ソフトがネット上で配布されていないか調べてみて下さいね。
確かいくつかあったはずですよ。 ]]> https://ameblo.jp/hometukurou/entry-10550162211.html Mon, 31 May 2010 19:04:04 +0900 文字まとめ
実はまだ文字に関するタグはあるのですが、そろそろ飽きてくる頃だと思いまして（笑）
まとめとして、次の文章がきちんとブラウザに表示されるようにチャレンジしてみて下さい。

「シュークリーム」

シュークリームに詰まっているのはクリームだけじゃない。
夢も希望もつまっているのです！
あとカロリーも…

だからシュークリームは偉大なのです！

上手く出来ましたか？
ちなみに私は
$ホームページを作ろう！

こうなりました。

<html>
<head>
</head>
<body>
<em><font size="7">
「シュークリーム」
</font></em><br>
<font color="#FF0000">
シュークリーム</font>に詰まっているのは
<u>クリームだけじゃない。</u><br>
<strong>夢も希望</strong>
もつまっているのです！<br>
<s>あとカロリーも…</s><br>
<br>
<em><font color="#FF0000" size="5">
だからシュークリームは偉大なのです！
</font></em>
</body>
</html>



こんな感じですね。
今までＨＴＭＬを書いた事の無い人は、見るだけで嫌な気分になるかとおもいますけど、大事な事なので頑張って理解していきましょう。

まず、
<em><font size="7">
「シュークリーム」
</font></em><br>
ですが、<em>でここからの文字が斜体だと命令します。
次に<font size="7">で文字の大きさを７と命令します。
そして「シュークリーム」の文字に反映され、
その後、先のタグの終了タグがきて、改行のタグがきます。

次に

<font color="#FF0000">
シュークリーム</font>に詰まっているのは
<u>クリームだけじゃない。</u><br>
です。

<font color="#FF0000">で色の指定をします。この場合は赤ですね。
そして「シュークリーム」の文字に反映され、終了タグ。
続けて「に詰まっているのは」は何も指定していない文字です。
<u>で下線のタグが入り、「クリームだけじゃない」に反映させ終了、改行です。



<strong>夢も希望</strong>
もつまっているのです！<br>

は「夢も希望」の部分に<strong>で強調を。その後の「もつまっているのです」は
何も指定していません。そして改行。

<s>あとカロリーも…</s><br>
<br>

は、<s>で打ち消し線を命令し、「あとカロリーも…」で終了タグ。改行です。

最後に<em><font color="#FF0000" size="5">
だからシュークリームは偉大なのです！
</font></em>

ですが、注目してもらいたいのは、
<font color="#FF0000" size="5">
の部分です。
「font color」と「font size」のタグが一つのタグに収まってるのが分かりますか？

この様に、同じタグで属性が違う場合は、一つにまとめる事が出来ます。
（スペースが入るのを忘れずに）

今回はまとめとして、今までの事を振り返りましたが、初心者には少し難しかったかもしれません。
あせらず一つずつ覚えていって下さいね！ ]]> https://ameblo.jp/hometukurou/entry-10548971789.html Sun, 30 May 2010 12:25:32 +0900 斜体・下線・打ち消し線
斜体
下線
打ち消し線

ですね。

タグは
<em>斜体
<i>斜体
<u>下線
<strike>打ち消し線
<s>打ち消し線

となります。斜体と打ち消し線はタグが二つありますが、どちらでも構いません。

では画面上で表示されるか試してみましょう。
前回までの使っていたbodyの中を一回消去して下さい。そして新たに、

<html>
<head>
</head>
<body>
<em>斜体</em><br>
<i>斜体</i><br>
<u>下線</u><br>
<strike>打ち消し線</strike><br>
<s>打ち消し線</s><br>
</body>
</html>



と記入し、ブラウザで確認してみましょう。

$ホームページを作ろう！

ちゃんと表示されましたか？

復習のコーナー

タグ

<em>斜体
<i>斜体
<u>下線
<strike>打ち消し線
<s>打ち消し線
]]> https://ameblo.jp/hometukurou/entry-10548936832.html Sun, 30 May 2010 12:00:01 +0900 文字の大きさを変える

<html>
<head>
</head>
<body>
ホームページ<br>
<font color="#ff0000">作るぞ！</font>
</body>
</html>



では「ホームページ」の部分を変えてみましょう。

今回はfontタグの後にsizeと書きます。size、サイズですね。そしてその後に大きさを指定します。

<font size="1">

って感じになります。この場合は指定した場所の文字が１の大きさって事になります。

この文字の大きさは７まであります。せっかくなので７の大きさに変更してみましょう。

<html>
<head>
</head>
<body>
<font size="7">ホームページ</font><br>
<font color="#ff0000">作るぞ！</font>
</body>
</html>

$ホームページを作ろう！

見事に大きくなりました。
強調したい時なんかに使いましょう。

次は文字を太くします。

「作るぞ！」の文字を太くしてみましょう。
と、その前に。普通の文字と対比するために「作るぞ！」の前に「絶対に」って書き加えます。

太字にする時には
<b>
のタグを使います。

<html>
<head>
</head>
<body>
<font size="7">ホームページ</font><br>
<font color="#ff0000">絶対<b>作るぞ！</b></font>
</body>
</html>



$ホームページを作ろう！

「絶対」が普通の太さ「作るぞ！」が太字になったのが分かりますか？
ブログ上で表現すると、
絶対作るぞ！
となります。

また、太字にするのは他に<strong>というタグもあります。お好みで使って下さい。


復習のコーナー

タグ
<font size="1">
文字の大きさを変える（サイズは１～７）

<b>
<strong>
文字の太さを変える。
]]> https://ameblo.jp/hometukurou/entry-10547251266.html Fri, 28 May 2010 14:51:05 +0900 文字の色を変える

<html>
<head>
</head>
<body>
ホームページ<br>
作るぞ！
</body>
</html>

この「作るぞ！」の部分を赤くしてみたいと思います。

色を変えたい時は、<font>タグを使います。

fontとは文字に関係するタグで、文字の色を変えるだけでなく、他にも文字に関する様々な命令を行います。

まず、文字の色を変えたい場所の前に<font>タグを用意し、fontの後にひとつスペースを空け、color=　と書きます。color、すなわち色ですね。そして＝””。「”」の間に指定する色を記入し、＞でタグを閉じます。

文字を赤くする場合は<font color="#ff0000">となります。

この「0000ff」というのが赤色の番号です。この番号の前に＃が付くのを忘れないでください。この６桁の番号の事を「カラーコード」と呼びます。

つまりこの番号を変える事によって様々な色を指定する事が出来るようになります。お望みのカラーコードの番号を探すのは本を買っても良いし、ネットで検索すると教えてくれるサイトがたくさんあるので、それらを参考にしてみて下さい。

さて、それでは「作るぞ！」を赤くしてみます。

<html>
<head>
</head>
<body>
ホームページ<br>
<font color="#ff0000">作るぞ！</font>
</body>
</html>


$ホームページを作ろう！
ちゃんと「作るぞ！」が赤くなりましたか？

さて、実は色を変える方法はこれだけではありません。
<font color="red">
という書き方でも変わります。
違いが分かりますか？
そう、カラーコードの部分が「red」と英語で色の指定をしています。

実はこのやり方でも良いのですが、色が限られるという欠点があります。
お好みで使い分けて下さい。ちなみに名前で指定する場合は１６色になります。
Black
Gray
Silver
White(見えませんが「White」白ですね)
Red
Yellow
Lime
Aqua
Blue
Fuchsia
Maroon
Olive
Green
Teal
Navy
Purple

さて、色の変更はこれで終了です。

復習のコーナー

タグ
<font color="#ff0000">
文字の色を変える（上は赤くする場合）

色を変える時はカラーコードを変える。または英語で。 ]]> https://ameblo.jp/hometukurou/entry-10547140066.html Fri, 28 May 2010 11:28:23 +0900 文字の表示と改行 前回の

<html>
<head>
</head>
<body>
</body>
</html>



の<body>と</body>の間に、文字を書いてみます。
ここでは「ホームページ」と書いてみましょう。


<html>
<head>
</head>
<body>
ホームページ
</body>
</html>




そしてそれを一度上書き保存します。
（Ctrl+Sのショートカットをなるべく使いましょう。この先、何度でも使う事になります）

セーブした後、ブラウザで確認します。
もうブラウザが開いているなら更新をして下さい。(F5キーを押すと便利です)

$ホームページを作ろう！

と真っ白だった画面に文字が表示されたと思います。
ではもう一言、先ほどの「ホームページ」の下に、「作るぞ！」と記入してみて下さい。

<html>
<head>
</head>
<body>
ホームページ
作るぞ！
</body>
</html>



では早速上書き保存して、ブラウザで見てみましょう。ブラウザを更新します（Ｆ５）
$ホームページを作ろう！

…メモ帳では改行してるのに、画面上はつながってます！？

そう、これこそが罠！実はホームページで改行をする時は、その都度改行をするタグが必要となるんです！
その改行のタグが<br>タグです。

このタグを改行したい場所に書きます。

<html>
<head>
</head>
<body>
ホームページ<br>
作るぞ！
</body>
</html>



となります。別に

<html>
<head>
</head>
<body>
ホームページ
<br>
作るぞ！
</body>
</html>



でも構いません。要はどこに書くかが問題です。
そしてまたメモ帳を上書き保存（Ctrl+S）し、ブラウザを更新！（F5）
$ホームページを作ろう！

はい。ちゃんと改行されました。

復習のコーナー

タグ
<br>改行

・文字を改行する時は<br>タグを使う。
・メモ帳の保存は「Ctrl+S」で
・ブラウザの更新は「Ｆ５」で ]]> https://ameblo.jp/hometukurou/entry-10546277307.html Thu, 27 May 2010 12:59:43 +0900