生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでHTMLを学ぼう#04〜#06

こんにちは、新年を迎えてますます初めてぶりに磨きがかかるぽんきちさんです。

今日も、ドットインストールでHTMLについて学習したいと思います。

f:id:ponnkichi:20171226222543p:plain

https://dotinstall.com/

 

 今回は前回の続き、

「初めてのHTML」の#4です。

 

「ドットインストール」は動画を見て学ぶことができるのですが、

HTMLの最初のほうはこのように

動画で説明されていることが文字起こしされています。

f:id:ponnkichi:20180107101741p:plain

これはサンプルなのですが、

プレミアム会員になると全てのレッスンの文字起こしが見られるそうです。

 

便利そう…。

#04 初めてのHTMLを作ろう

 

 

f:id:ponnkichi:20180107101948p:plain

初めてのHTMLを作るときの説明がなされています。

 

progateでゆっくり時間をかけて学んだことが

あっという間に進んでいく感じがしてちょっと焦ります💦

 

でも、最初の書き方や

保存の仕方などを確認するときには

なんども見返すことができるので便利。

しかも、動画は細かく分けられているし

一本3分程度なのであとから復習もしやすいです。

 

「最初の書き方」「保存のしかた」は#4。これだけは覚えておこうと思います^^;

たぶん保存の仕方とか、どんな風に見えているか確認する方法を忘れると思うんだ、私は。

 

#05 meta、linkタグを使ってみよう

#05の最初では、#04でさらっと流していた最初の設定が

少し詳しく説明されていました。

たとえば、<head>タグの中はこの文章自体の情報が、

<body>タグの中は本文が入っていくということなどです。

 

f:id:ponnkichi:20180107102713p:plain

2行目は「言語は日本語ですよ」という説明。

4行目は、「utf8」という文字コードを使いますよ、ということです。

 

ここで面白かったのが、

たとえば「charaset」の部分をスペルミスしたり、

周囲の空白を半角ではなく全角にしてしまった場合などは

<body>で囲まれている「こんにちは!」の部分が

よく見る、文字化けしたような形になってしまうということです。

 

f:id:ponnkichi:20171219214742p:plain「文字化けってこんなふうに起こるんだー!」

文字化けにはいろいろな原因があるのでしょうが、

原因のひとつがわかってすごく楽しかったです。

 

しかし、タイトルにあるmetaタグやlinkタグの使い方はほぼわからなかったので

復習が必要そうです。

 

 

#6 styleタグを使ってみよう

styleタグって。

f:id:ponnkichi:20171219214742p:plain「初めて聞くやつだね!」

 

 

 

progateの初級編で「お問い合わせフォーム作り」のところで作ったものと同じかと思ったら

それは<imput>タグでした。

同じなのは「アルファベットが5文字」という点のみ。

大丈夫でしょうか。がんばります。

f:id:ponnkichi:20180107160113p:plain

styleタグは、文章の見た目を規定するために

head内に書くものだそうです。

 

progateでも学んだ、cssをはるためのものですね!

もう学んでいたんですね!

誰だ、「初めて聞くやつだね!」とか言ってたの。

 

f:id:ponnkichi:20171219214742p:plain「…。」

 

 

 

 

 

(こいつです)

 

上の図では、背景をスカイブルーにしていたのですが

head内に、このようにstyleタグで見た目を全部書き込んでいたらものすごく長いことになってしまいますよね。

なので、cssを別のシートに書き込んでいくことになります。

 

そうか…長くなって大変だから

cssがあるんだ…(白目)

f:id:ponnkichi:20180107160505p:plain

新しいフォルダにこんな風に書き込み。

f:id:ponnkichi:20180107160524p:plain

stylesheetにリンクをするのですね。

 

これ…progateの初級編1で習ったやつですよね。

つらい!覚えていなさすぎてつらい!

 

でも、ここから見た目を変えていけるようになるのです。

「ドットインストール」では、cssのレッスンは別の動画になるので

今回はひたすらhtmlについて学んでいきたいと思います♪

 

ちなみにコメントの書き方も。

f:id:ponnkichi:20180107160930p:plain

<!-- -->

で囲まれた、グレーの文字のところは

動作に関係ないメモ書きです。

ここは何なのか書いておきたいときに便利ですね。

 

さて、背景がスカイブルーになった画面はこんな感じになりました。

f:id:ponnkichi:20180107161045p:plain

シンプル(*^^*)

 

 これからも少しずつ学んでいきたいと思います。