はなっふぃーアウトプット部屋 SkillHacks受講HTML編その2

あなたはゲームが好きですか？
回答：はい いいえ

このように選択式のボタンを表示できます。

<form>
    <p＞
    あなたはゲームが好きですか？<br>
    回答：<input type=”radio” name=”ans” value=”yes”>はい
    <input type=”radio” name=”ans” value=”no”>いいえ
    <input type=”submit” value =”回答を送信”/>
    </p>
<form>

コードの中身はこのようになっています。

他にどのようなフォームがあるか気になるかたは
「HTML フォーム」
などで検索すると色々出てきます！

おまけ

フォームタグはwebページの中身に関わる部分なので、書く場所としてはbodyタグの中に入れてあげてください。

文章にリンクを貼り付ける

次は、文章にリンクを紐付けする方法についてです。
下に例として私のTwitterリンクを貼り付けしてみました。
↓↓↓↓↓↓↓↓

このタグの中身はこのようになっています

<a href=”https://twitter.com/hanaffi_life”>Twitterはこちら　</a>

<a href=”○○○”>△△△</a>
○○○の部分にリンク先のURLを挿入
△△△にリンクに被せる文章を挿入

することでリンクを作成することが可能です。

ちなみに、△△△の部分は文章だけでなく画像を貼り付けすることも可能です。
そのため、少しいじってみるとこのようなことも可能です。

はなっふぃーのTwitterは画像をクリック

ソースコードはこのようになっています

<a href=”https://twitter.com/hanaffi_life”><img src = “https://pbs.twimg.com/profile_images/1340917953181585408/gXfGfKwG_400x400.jpg”><br>はなっふぃーのTwitterは画像をクリック</a>

色々触ってみると楽しいですね！！

まとまりをつくるタグについて

HTMLの次にCSSという、HTMLに装飾をつけるコードを勉強していきます。
今回はこのCSSの設定をする際に必要になるタグを解説していきます！

idタグとclassタグ

webページを作成する中で、一部大切な部分の文字を赤色に変えたいなどがあったとします。

idとclassの２種類がありますが、違いは下の通りです。

idでつけたタグは1度のみ
classでつけたタグは何回でも使える

idは全体のデザインなど大きなまとまりを作るときのイメージ
classは細かいまとまりを作る時のイメージ
と言うイメージで良さそうです。

はなっふぃー

以上でHTMLの基礎的な勉強は終わりです！！
次回からはHTMLにデザインを入れていくCSSについて勉強していきます！！

はなっふぃー

最後まで見てくださった方、ありがとうございます！！
Skill Hacksをどうしようか迷っているという方や、
転職を考えているという方の参考になれば幸いです！！
今後も学んだ内容を更新していきますのでよろしくお願いします！！

最後に

このブログを見てSkill Hacks申し込みしてみようかな
と思われた方は↓に申し込みリンクを貼っておきますのでよかったらご利用ください！

Hacks系トップページ