私事ながら、ウチの会社に初めて従業員が入社しました。
将来を見据えて、ホームページを作るスキルを身に着けたいという意気込みだけで、ITスキルがほぼ無し状態から学習をしたいという事で、エンジニア見習いとして参画してもらうことにしました。
HTML学習の参考書を事前に購入していましたが、そうした参考書をチュートリアルとして学習すれば、一通りのホームページ制作の基本は身につくだろうな・・・と思っていたんですが、初心者にとってはそういう作業すら少し厳しいようなので、超初心者向けのHTML学習を特集してみることにしました。
HTMLを覚えたいと思っているけど、何だか難しいと思っている人や、以前に挫折をしてしまった人などに見てもらいたいと思って書くようにします。
もしわかりにくい箇所などあれば、コメントかメールかお問い合わせで伝えてください。
このブログを読んでほしい人
ホームページ制作を自分でやってみたいけどどうやればいいか分からないという人は、是非今回のHTML編から読んでみてください。
これからプログラミングを学習したいと考えている人も、スクールに通おうか、高額な学習書籍を購入しようか迷っているのであれば、
初期学習は是非、安価に抑えてコストを抑えて、自信をアップさせてみてはいかがでしょうか？
このブログ以外でも、多くのwebサイトで有効な情報や学習方法が書かれているので、自分なりの学習を見つけるキッカケになるかもしれません。
HTML学習事始め
環境構築
まず、スマートフォンではホームページ制作はまともにできないので、学習の為にパソコンを用意してください。
HTMLリファレンスを読んでコードを少し書くぐらいであれば、スマートフォンでできるかもしれませんが、たまにパソコンを持たずにWEBエンジニアを目指そうとする人がいるので、自分の環境としてのパソコンは必須です。
パソコンは、Macでも、WIndowsでも、Linuxでも、Chromeでも、RaspberryPiでも、どれでも大丈夫です。
そして、VScodeをインストールすれば、環境構築は完了です。
インターネットブラウザ
HTMLをコーディングした後で、その表示（レンダリング）を確認するには、インターネットブラウザを使います。
OSに始めからインストールされている、インターネットブラウザで全く問題ないですが、GoogleChromeをダウンロードしてインストールすると、いろいろなwebサイトにかかれている情報と合わせやすいと思います。
他にも、FirefoxやOperaなどでもいいですが、古い環境でInternetExplorerを使うのはNGだということを始めに言っておきます。
InternetExplorerは、Web開発の敵です。
インターネットブラウザの黒歴史で、この暗黒時代を経験した人は今となっては笑い話ですが、当時は無限カオス地獄でした。
できるだけ最新のOSを使うようにしてください。
HTMLの仕組み
htmlって一体何なのかというと、ホームページを表示するためのソースコードです。
HTMLタグという命令を使って、一定の法則に沿って書くことで、ホームページを組み立てることができます。
インターネットラウザでいろいろなホームページを見ている時に、マウスの右クリックをして、「ページのソースを表示」というメニューを実行すると、そのホームページのHTMLを簡単に見ることができます。
HTMLが理解できる人は、そのページのHTMLを見てどういう構造になっているかが理解できる状態の事です。
CSSやJavascriptも同時に学習しなければいけないのか？
ホームページを作ろうとした時に、HTMLの学習をはじめて、多くの人が、CSSとJavascriptの書き方が難しく感じて挫折してしまうようです。
順番に学習していくのが一番いいですが、HTMLとCSSとJavascriptは、Webエンジニアとしての「ホームページ三種の神器プログラミング言語」として必須なので、一緒に学習するのを進めている参考書などもあり、混乱してしまう人も多いみたいですね。
基本的に、初心者学習としては、順番に学習していくことをオススメします。
HTMLの基本
共通基本構造を覚えよう
以下のHTML基本構造はコピペではなく、手打ちできるように、毎回何度も打ち込むようにしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel='icon' href='favicon.html'/>
<link rel='stylesheet' href='style.css'/>
<script src='main.js'></script>
</head>
<body>
</body>
</html>
解説
| DOCTYPE | HTMLのバージョンを記載するためのおまじない過去バージョンの記述はいくつかあるが一番シンプルなHTML5のこの書き方を覚えておくだけで良い。 |
|---|---|
| HTML | ページの基本HTMLタグ。 |
| HEAD | ページのヘッダ情報を記載するエリア。（見た目にはほぼ関係ない） |
| BODY | ページの表示に関する内容を記載するエリア。 |
| META | HEADタグ内のメタ情報を登録する、name=''やproperty=''などの属性でタイプを分類するタグ。 |
| TITLE | ページタイトルの設定。 |
| LINK | cssファイルを読み込む設定。 |
| SCRIPT | javascriptファイルを読み込む設定。 |
DOMを理解しよう
Document Object Modelを略してDOM（ドム）という風に呼ばれることが多い。
HTMLは、階層構造でタグを記述すると言うことを理解する。
上記の基本シンプルHTMLを図にしてみると、次のようになる。
<!DOCTYPE html>
<html>
<head>
...
</head><body>
</html>...
</body>タグの属性を理解してみよう
HTMLタグについてもう少し理解してみると、次のような名称で呼ばれる。
HTMLタグ
<div class='sample'>Sample Tag 構造</div>
開始タグ
タグの内容
終了タグ
<div class='sample'>
Sample Tag 構造
</div>
タグ名
属性
属性値
<
div
class
='
sample
'>
Sample Tag 構造
</div>
<img src='example.jpg'>
<img src='example.jpg' />
ポイント
・自分のパソコンを使って学習を始めよう。
・HTMLはどのページも基本構造は同じなので、HTMLの構造体を理解しよう。
・HTMLタグの書き方や特性を理解しよう。
・わからない言葉を書き留めて、自分で調べたり、メンターや詳しい人に質問してみよう。
0 件のコメント:
コメントを投稿