こんばんは！橘と申します。
橘氏の立ち話。たちばなし.comです。
今日は、HTMLの概要と基礎について学んでいこうと思います。
学習に使った教材
- Progate
Progateはご存じの方も多いと思いますが、無料で始められる、実際に手を動かしていけるといったメリットがあります。
スライドで一度流れを確認し、その直後に演習問題に取り組めるため、インプット→アウトプットが即座に行えます。
- 1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
この本は、Web制作についてを体系的に学べる本となっています。
実際のWebデザイナーであるManaさんが書かれたものなのですが、文だけでなく図やサンプルデータを用いて分かりやすく解説されています。
プログラミングだけでなく、デザインまでを解説してもらえるのがうれしいポイントですね。
おすすめのソフトやサイトが記載されていたりするのもうれしいポイントですね。
私は動画での学習があまり得意ではなく、本での学習を好みます。
理由としては、動画だと自分が納得する間もなく次の段階に進んでいくことが多いため、文章ですぐに読み返せるほうが好きです。好みの問題かもしれませんが。
というわけで、この2つから始めていこうと思います。
HTMLとは
HTMLとは何のことか知っていますか？恥ずかしながら僕は全く知りませんでした。
Web制作で用いられる言語ということだけ何となく。CSSも同様です。
HTMLとは、Webページを作成する上で土台となる言語です。
Webページにに表示したい文章や画像、見出し、リンク等を「＜＞(タグ)」で表していきます。
「ここは見出しです」
「ここに画像を表示します」
というのをコンピュータに伝わる言語に翻訳していくイメージかなと。
HTMLの基本的なタグ
| <h1~6></h1~6> （heading） | 見出し |
| ＜p＞</p> (paragraph) | 段落 |
| ＜a＞</a> () | リンク |
| <img>、<img src=”url”> (image) | 画像 |
| <li></li>(list) | リスト |
基本的には＜タグ＞と＜/タグ＞で挟むことでそのコードを表していく。
画像タグのみ例外で、imgの後に src= をつけて”url”をつけていきます。
これだけではイメージしづらいと思うので、実際にやってみます。
HTMLを使ってみた
例として、リンクと画像をHTMLで表して(？)いきます。
リンク編
見出し、段落、リンク、リストは基本的に同じ形になります。
＜x＞～＜/x＞の形です。～の部分に文字やURL等が入ってきます。
今回は、結果が分かりやすいようにリンクを埋め込みます。
<a>阿部寛のホームページ</a>
これを実際に適用すると、
阿部寛のホームページこのように、＜a＞</a>で挟むことでリンクを作成できます。
ただ、リンクを作成しただけでは使用することができませんので、このように
<a href="http://abehiroshi.la.coocan.jp/">阿部寛のホームページ</a>前半のタグを＜a href=”url”＞にし、表示したい文字を挟んで＜/a＞で閉じます。
これを行うことで、
こういった形になるわけです。
これで阿部寛さんのホームページに飛べるようになりました。
昔ながらで最低限のホームページに男前がいる様子、シュールで好きなんですよね。
画像編
画像は他と違ってやや特殊なパターンになります。
今回打ち込んだコードはこちら。
<img src="https://nurse-web.jp/photo/assets/uploads/2017/03/cut14_kendama-1200x801.jpg">
前に書いた通り、<img src=”url”>の形です。
他のタグと違い、画像の際は＜/～＞を末尾につけません。気を付けていきたいところですね。
これを実際に打ち込むと、
こうなります。
「患者のけん玉の糸を切る看護師」の画像がきれいに埋め込まれていますね。大成功です。
これがHTMLの基本となり、サイトの大枠を構築していく言語になるとのこと。
今後のブログ制作で実践していきたいと思います。覚えた言葉は使いたくなる中学生みたいなままなので。
ちなみになんですが、今回のリンク、画像の話以外にも自分でHTMLを打ち込んでいる部分があるので探してみてくださいね、答えは次回発表します！
明日はCSSの基礎についてを学んでいこうと思います！
コメント