プログラミングど素人が1週間で学んだ事まとめ~HTML編①~

プログラミング
スポンサーリンク

はじめに

こんにちは、ゆずあきです。

最近プログラミング学習に没頭しており、延べ1週間でやっとHTMLの基礎(超基礎)を理解することができました!

これからプログラミングを始めようという方のため、また、自分の学習の軌跡として当記事ににて学んだことをまとめていきます。

プログラミング学習開始前の準備として、必要なツールをパソコンに導入しましょう。

ぼくはプログラミング学習サイトドットインストールに倣って『Atom エディタ』を導入しました。

今回の記事で学習すると、こんな感じでコードが書けるようになります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=utf 8>
<title>シンパパゆずあきブログ</title>
<link rel=”icon” href=”yuzuakifavicon.png”>
<meta name=”description” content=”シンパパゆずあきのホームページです。”>
</head>
<body>
<h1>シンパパゆずあきの特徴</h1>
<p>ゆずあきは子供2人と生きるシングルファザーです。</p>
</body>
</html>

『HTMLの超基本』を学習するとできるようになること。

1号
1号

ぱぱ、HTMLとか難しい言葉覚えてドヤってるけど意味わかってるの?

ゆずあき
ゆずあき

別にドヤってねーよ(笑)

HTMLってのは、プログラミング言語のひとつで、基礎中の基礎みたいだね。

まずはここから練習してみようと思ってさ。

ほら、見てよ!すごいだろ、これパパが作ったんだよ♪(ドヤァ!)

1号
1号

やっぱドヤってんじゃん。

HTMLとは、ぼくでもしっくり来るように説明すると

『サイトの基礎をつくるもの』です。

HTMLの基礎を学習すると、サイトの基礎を作ることができるようになります。

CSSでデザインを整えないとだいぶ味っ気ないですが、それでも完成すると非常に満足感を得られます。

『ドットインストール』で何度も動画を繰り返し見ながらコードを書いていくとだんだん理解できるようになりますので、ぜひ挑戦してみてください。

それでは、具体的に学習したことをドットインストールの内容に沿って説明していきます。

見落としがちな細かな注意事項。

ちょっとした打ち間違いなどのミスによって、作ったサイトが動作しない場合がけっこうありますので、注意事項をいくつか羅列していきます。

①不等号は必ず閉じる。…<   >
②マークアップでは『開始タグ』に対して『閉じタグ』を忘れないように!
…<h1> 見出し </h1>
③『閉じタグ』内には必ず『/』を入れる。…</h1>
④記述は全て半角で行う。

今のところはこんな感じですが、何かあれば随時追記していきます。

はじめにサイトの性質を記述する。

このサイトはこんなサイトですよってのを一番初めに記述していきます。

<!DOCTYPE html> 「このサイトはHTML文書ですよ。」

<html lang=”ja”> …「このサイトは日本語の文書ですよ。」

以上が初めに書くべきコードとなっております。

文書のタイトルを設定する。『head タグ』

『head タグ』には、この文書に関する様々な情報を入れていく事ができます。

<head>      </head>ここに情報をいれていきます。

<meta charset=”utf 8″> …「文字コードの設定。コンピュータがどの文字セットを使うか。」現在はこの『utf 8』に統一されつつあるそうです。

<title> タイトル </title>…「この文書のタイトル。」

<link rel=”icon” href=”ファビコンにしたい画像のソース“>GoogleCromeのタブに表示されるアイコンの設定です。『href』でリンク先を指定します。

<meta name=”description” content=” 文書の説明 “>文書の説明を加える。

 

ここまでが作成したサイト(文書)に関する説明の記述方法です。

本文を書いていく。

<body> 本文 </body>…本文はこの『body タグ』内に記述していきます。これまでと違い、長いコードが入るタグになります。

<h1> 見出し </h1>

<h2> 見出し </h2>

<h3> 見出し </h3>…見出しはこれらの様に記述します。数字が小さい方が大きな見出しとなります。

ブログを持っている方には馴染みがあるタグですね。

見出しの次には本文を書いていきます。

段落としてひと区切りにする時は

<p> 本文 </p>を使用します。

 

最後は</body>で閉めます。

更に、初めに記述した<!DOCTYPE html>に対して</html>と閉じて、ひとまず超簡単なサイトのできあがりです!

今回のまとめ

いかがだったでしょうか。なんとなくわかりましたか?(^^;)

ぼくはここまで理解して覚えるのに1日当たり2時間程の学習で5日くらいかかりました…。

センス無いのかな?(笑)

それとも35歳目前にもはや脳が衰えているのか…。

それでは、今回説明した事をまとめて、例としてコードを記述してみます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=utf 8>
<title>シンパパゆずあきブログ</title>
<link rel=”icon” href=”yuzuakifavicon.png”>
<meta name=”description” content=”シンパパゆずあきのホームページです。”>
</head>
<body>
<h1>シンパパゆずあきの特徴</h1>
<p>ゆずあきは子供2人と生きるシングルファザーです。</p>
</body>
</html>

こんな感じです。

『Atomエディタ』を導入したらコピペしてみてください。間違ってたらごめんなさい(笑)

ちなみに画像は表示されません。

太字で、見出し『シンパパゆずあきの特徴』、その下に本文として『ゆずあきは子供2人と生きるシングルファザーです。』が表示されると思います。

独学よりも効率よく学ぶためにプログラミングスクールに通うなら、プログラミングで有名なマナブさんもおすすめするTechAcademy [テックアカデミー] をぜひ試してみてください。

とりあえずで無料体験にて雰囲気を味わえるのでとてもお得だと思います。

画像の使用に関しては次回記事で説明していきます!

今回は以上です。最後までお付き合いいただきありがとうございました。

終わり

 

次のおすすめ記事はこちら

プログラミング初心者は『TECHACADEMY』の無料体験がおすすめ!




プログラミング
スポンサーリンク
面白かったらシェアお願いします!//
yuzuakiをフォローする
シンパパゆずあきBLOG