どぼじょのIT学習ブログ

高専卒土木女子がIT業界を目指してお勉強。

HTML

本日はProgateでHTMLの基礎の続きです。

目次

1.リンクの作成

<a>文字列</a>

で、文字列がリンクとして見なされるそうです。

 a の一文字だけってなんだかシンプルすぎて凄いですね。

これはabcのaではなく、anchorのaのようです。アンカーです。

 

次に、このリンクにURLをあてはめる。

<a href="URL">文字列</a>

こちらではhrefという、今度はシンプルな英単語ではない文字列が登場🙁

 hypertext Reference から来ているようです。

 

ここまでの学習でLv.3になりました!

f:id:mistyrinth:20180908171246p:plain

 こういうのとても良い。

将来的に作りたいWebアプリのひとつにeラーニングのようなものがあるので、こういったとっつきやすさは参考になります😊

2.画像の貼り付け

次は画像の表示!先ほどのURLへのリンクのように書きます。

<img src="画像データのURL">

画像を表示するのには文字列を囲む必要がないので、終了タグ</>は不要です。

srcはsourceのこと。

3.HTML&CSS初級コース完了

こんな感じでProgateの学習を進めていき、HTML&CSS初級コースを完了しました!

コースの最後にはこんな感じのものが作れました。

f:id:mistyrinth:20180908190454p:plain

 

4.感想

ここまでさくっとHTMLとCSSの基礎を学んでみましたが、書いていることがややこしくてちょっと難しそう。手順通りに書いていくのは簡単ですが、自分で考えながら書いていったり、人が作ったものを見るのは、画面上で迷子になってしまいそうです笑

あと、たびたびCADを使っている時に近い感覚になります📐CADの作図を文字で行っているような感じ。レイヤやクラスに分けて、属性を付して、それぞれの設定を行う…と言うだけなら簡単ですが、実際すぐ迷子になりそう!!🤣

Progateは書きながらプレビュー画面がすぐ横に表示されているので、指示以外のことを自分で試してどうなるのか見ることができます。これ少し便利。

HTMLとCSSについてはざっと概要を把握したところで、未知のJavaScriptの勉強がしたくなってきました🔰

でもここで移っちゃうと、すぐに分からないことだらけの疑問に埋もれて次のステップを見失うのは明確なので、もうちょっとHTMLとCSSの学習を進めます!!

同じようなことばかりの記事になってしまいますが、応援よろしくお願いいたします。