仕事柄、WEBに関することをプライベートでも聞かれることが多いです。
一番多いのが「WEBサイトってどうやって作るの！？」というものなのですが、説明する際にHTMLソースを見せて「ここに画像を表示して、ここに文章を書いて、って表示の指示を延々と書いていくの」と伝えると、大抵の方が「そっか…」と少し悲しそうな顔をします。
英数記号の羅列を見ると拒否反応を示してしまう方が多く、そこで話が終わってしまいます。
実際にHTMLタグを学ぼうとして他のサイトを見てみるも、何だか難しそうだったり、リファレンスばかりだったり。本当に途方もないものに見えます。
そこで、実際にタグを書いてみれば少し興味を持ってもらえるんじゃないかと思いつきました。
実際に表示されたり動くと、何だか嬉しくなるものです。
画像を表示する、など本当に初歩的なものですが、私たちがどんなことをお仕事でしているのか、試してもらいながら知ってもらえばなと、記事にしました。
つかいかた
①フォームに文字を入力して、②青い実行ボタンを押すと、③すぐ下の枠線の中に結果が表示されるようになっています。解説の通りに文字を入力して、実行ボタンを押してください。初期表示に戻したい時は、ページを更新してください。
▽実行する
ここに結果が表示されます
※タグは全て半角英数で書きます。間に半角スペースが必要な場合もあるので、良く見てみて下さいね。
文字を強調する
文字を強調するには「strong」タグを使います。強調したい文字を、「<strong>ここに強調したい文字</strong>」と囲みます。
後ろのタグに/を入れるのを忘れないでくださいね。
下のフォームの文字を、strongタグで囲んで、実行してみて下さい。
▽実行する
ここに結果が表示されます
結果が太字になれば正解です！
画像を表示する
画像を表示するには「img」タグを使います。imgタグには”どの画像を表示するのか”を書かなければいけません。「<img src=”#”>」
src=”#” の、# の所に画像の名前を書き込みます。今回はこちらで画像を用意しました。
下のフォームの#を、[ /sample.jpg ]に変更して実行してみて下さい。
▽実行する
ここに結果が表示されます
結果に画像が表示されれば正解です！
リンクを貼ってみる
画像を表示するには「a」タグを使います。aタグには”どこにリンクさせたいのか”を書かなければいけません。「<a href=”#”>この文章にリンクをはります</a>」
href=”#” の、# の所にリンクさせるURLを書き込みます。今回はGoogleにリンクしてみましょう。
下のフォームの#を、[ http://www.google.co.jp/ ]に変更して実行してみて下さい。
▽実行する
ここに結果が表示されます
文字をクリックして、Googleのページが表示されれば正解です！
—–
さて、3つ程試してみて頂きましたが、いかがでしたでしょうか。
ブログを書く時でも少しHTMLタグを触れるとより細かい設定ができるようになります。
これをきっかけに、HTMLタグからすこしでも恐怖感が無くなれば嬉しいです（実際に仕事にするとなると高度なことをどんどんできるようにならなければいけいないのですが。。。）
できればシリーズ化して、デバッグ版間違い探しとかもできるようにできたらいいなぁなんて思います。
