HTMLの基礎の基礎02
作成日：
簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。
実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。
【12】空白の改行を書く。
- 見やすさとして、見た目として「空白の改行」「空白の1行」は必要ですね。
- <br> ←これです。これはHTMLの中では特殊で、1個だけで使います。
- 「ブランク」という名前です。
- これも私は日本語変換ソフト（IME）の辞書へ登録しています。
<html>
<body>
<p>こんにちは！</p>
<br>
<p>これが初めての私の自作ホームページです！</p>
</body>
</html>
【13】URLリンクを貼る。
- 次ページを開く、紹介したいページに飛ぶ、などなど。Webページには必ずありますね。
- 最小限の基本はこれです→ <a href="" title=""></a>
- <a href="URLを貼る場所" title="カーソルを乗せたときに出る文字">ここに書いた文字がリンクになり、クリックするとURLが開く</a>
- クリックすると今開いているページの上に新しいページが開きます。
<html>
<body>
<p>こんにちは！</p>
<br>
<p>これが初めての私の自作ホームページです！</p>
<br>
<br>
<p>ブログへは下記リンクから！</p>
<br>
<p><a href="URL" title="私のブログ">私の日常ブログ</a></p>
<br>
</body>
</html>
【14】クリックすると別タブ（別窓）で開くURLリンク。
- クリックすると新しいタブ（窓）で開かせることもできます。
- 基本はこれです→ <a href="" title="" target="_blank"></a>
- target="_blank" を追加することで、別窓で開くようになります。
<html>
<body>
<p>こんにちは！</p>
<br>
<p>これが初めての私の自作ホームページです！</p>
<br>
<br>
<br>
<p>・ブログへは下記リンクから！</p>
<br>
<p><a href="ブログのURL" title="私のブログ">私の日常ブログ</a></p>
<br>
<br>
<br>
<p>・私の日々の写真を見たい方は下記のサイトへどうぞ！（クリックすると別窓で開きます）</p>
<br>
<p><a href="写真サイトのURL" title="私の写真サイト（別窓で開きます）">私の日々の写真</a></p>
<br>
<br>
</body>
</html>
- 私は2つとも日本語変換ソフト（IME）の辞書へ登録しています。
- 「りんく」と打って変換を押せば、<a href="" title=""></a>と、<a href="" title="" target="_blank"></a>の2つが出てくるようにしています。
- こういう半角英数記号の連続でも、日本語変換ソフト（IME）の辞書へ登録して、変換で出して使うことができるので便利です。
- 長すぎると登録できません。
- イチイチ全部手で打つのは面倒臭いですし、コピペ用の一覧を用意して、イチイチ全部コピペするのもけっこう面倒臭いので。
- キーボードでタッチタイピングができる人は、日本語変換ソフト（IME）の辞書へ登録して、変換で呼び出して使った方がラクで早いです。
【15】画像の貼り方。
- まず貼りたい画像を用意します。著作権の問題もあるので、自分で作ったか撮った画像を使用して下さい。著作権フリー素材もありますけどね。
- 重要なのは「データサイズが大きすぎる画像は使用しないこと」です。表示が重くなりすぎるので、できるだけデータサイズは小さくするのがマナーです。
- 「HomePage001」フォルダ内には現在「index.html」というファイルが1つという状態ですが、その中にもう1つ「img」という名前のフォルダを作ります。
- 画像はすべてその中に保存します。
- 今回用意した画像は「sakura003.jpg」幅600px高さ50pxです。
- 画像の幅と高さが何pxなのかを把握しておくのも重要です。
- <img src="フォルダ名/画像ファイル名" width="幅" height="高さ" alt="画像名">
<html>
<body>
<p>こんにちは！</p>
<br>
<p>これが初めての私の自作ホームページです！</p>
<br>
<br>
<br>
<p>・ブログへは下記リンクから！</p>
<br>
<p><a href="ブログのURL" title="私のブログ">私の日常ブログ</a></p>
<br>
<br>
<br>
<p>・私の日々の写真を見たい方は下記のサイトへどうぞ！（クリックすると別窓で開きます）</p>
<br>
<p><a href="写真サイトのURL" title="私の写真サイト（別窓で開きます）">私の日々の写真</a></p>
<br>
<img src="img/sakura003.jpg" width="600" height="50" alt="sakura003.jpg">
<br>
</body>
</html>
- 「img」フォルダ名です。サーバー側にも同じ名前のフォルダを作ります。管理がラクになるので重要です。
- 「width=""（幅）、height=""（高さ）」この2つがなくても画像を貼れますが、これがないとページを開いた時にページ全体のレイアウトがガタガタ動いて違和感が出ます。必要です。
- 単位はpx（ピクセル）です。デジタル世界の画像の大きさ単位は基本的にpxです。
- 「alt」は画像が表示されない場合や、視覚障害者向けに画像の内容をテキストで伝える役割があります。検索エンジンが画像の意味を理解するのにも使われています。
- pxという単位そのものは書き込まなくていいです。
【16】画像のファイル形式について。
Webページで使用する画像のファイル形式は、jpg、jpeg、png、gif、webp、が最近では一般的です。
- 【jpg、jpeg】：文字数が違うだけで同じファイル形式です。現在もっとも一般的な画像用のファイル形式です。画像をネット上にアップロードするならこのファイル形式にしておけば間違いないです。
- 【png】：ほとんど写真には使いません。色数の少ないデジタル系の画像や、透過させたい小さめの画像、スクリーンショットなどくらいです。色数の多い写真にするとファイルサイズが大きくなるからです。
- 【gif】：ドット絵や、gifアニメなどで、幅高さが小さめの場合にしか使いません。写真などに使うとファイルサイズが大きくなりすぎるからです。
- 【webp】：最近使われるようになってきた画像形式です。一般には馴染みが薄いですが、ネットのプロの世界ではかなり普及しています。一般人にとってはまだ取り扱いに手間が掛かるので、今はまだ使う必要はないと思っておいていいです。写真などでもjpgよりもファイルサイズが軽くできるのに、見た目はきれいだという強みがあり、プロの世界では急速に普及し始めています。
- 【その他】：BMP（ビットマップ）、SVG、TIFF、HEIF/HEIC、などもありますが、WebサイトやブログにUPするのはとりあえずやめておいた方がいいです。
【17】画像を（クリックできる）URLリンクにする。
- 【13】【14】のURLリンクを貼る、【15】画像を貼る、これの合わせ技です。
- 別窓（別タブ）で開くようにするか、同ページ（同タブ）に開くか、も同じように設定できます。
- 小さな画像を表示しておいて、クリックしたら大きな画像が開くということもできますし、画像ではなくURLを開くということも出来ます。
- <a href="" title="" target="_blank"><img src="" width="" height="" alt=""></a>
- 使用画像は「kohoku_small.jpg」400px300px、「kohoku_big.jpg」1600px1200px、の2枚。
<html>
<body>
<p>こんにちは！</p>
<br>
<p>これが初めての私の自作ホームページです！</p>
<br>
<br>
<br>
<p>・ブログへは下記リンクから！</p>
<br>
<p><a href="ブログのURL" title="私のブログ">私の日常ブログ</a></p>
<br>
<br>
<br>
<p>・私の日々の写真を見たい方は下記のサイトへどうぞ！（クリックすると別窓で開きます）</p>
<br>
<p><a href="写真サイトのURL" title="私の写真サイト（別窓で開きます）">私の日々の写真</a></p>
<br>
<img src="img/sakura003.jpg" width="600px" height="50px" alt="sakura003.jpg">
<br>
<br>
<a href="img/kohoku_big.jpg" title="画像を別窓で拡大表示" target="_blank">
<img src="img/kohoku_small.jpg" width="400px" height="300px" alt="kohoku_small.jpg">
</a>
<br>
<br>
</body>
</html>
- 見やすいように上下に空白の改行を入れていますが、あってもなくてもどちらでも大丈夫です。
- 実際のWebページ上ではこれらの空白は無視されます。何の影響もありません。
- HTMLの見やすさや書きやすさを重視するなら、適度に空白改行を入れるのも良いです。
【今回はここまでです】
「改行」「URLリンク」「画像を貼る」「画像をクリックリンクにする」方法を解説しました。
ここまでができるようになれば、だいたいのことができますね。
次回は「見出し h1,h2,h3」「リスト2種類」「CSS（カスケードスタイルシート）」を解説したいと思います。
CSSはHTMLと同じくらい奥が深くて色んなことができるので、次回ではほんの少しだけ触れることにします。
※このWebサイトは「ほんの少しわかってきた初心者」でも参考になるように、できるだけシンプルなHTMLとCSSを使用して作成しています。
