こんにちは、ブログ管理人のかえるです。
今回は「HTMLを理解する」というテーマで書いていきます！
この記事では
- HTMLの構造やタグについて
- タグを使うときの基本的なルール
- おすすめの学習サイト（アプリ）と参考書
についてご紹介していきたいと思います！
これからプログライングを始めようと思っている方、HTML＆CSSについて勉強したい方は基礎的な部分なので是非参考にしてみてください！
そもそもHTMLとは？
✔︎HTMLとは
Hyper Text Markup Languageの略でwebページの土台となる言語です。
タグを使用することで「見出し」「文章」「リンク」などの構造をコンピューターに理解できるようにする（Webに表示させる）言語。
HTMLはプログラミング言語ではなくマークアップ言語と言って文章やコンテンツの構造を記述するための言語です。
文章や見出し、リンクをタグで囲うことでWebに表示させます。
タグで囲むことで文章やコンテンツに意味を持たせWebサイトの土台を作成していきます。
タグについて
・開始タグ、終了タグ
タグには様々な種類があり、使用するタグによって囲った文字列の役割が変わります（Webでの表示、見え方が変わります）。
タグを使用する時は書き始めに開始タグと書き終わりに終了タグで囲う必要があります。（タグによっては終了タグが必要ない場合もあります）。終了タグはタグに「/」が付きます。
<タグ>コンテンツ</タグ>
タグの開始から終了までの塊を「要素」と言います。
・タグの「入れ子」
「入れ子」とはタグの中にタグが入っていることを言います。
例えば
<p><strong>アウトプットをみんなでシェアしよう</strong></p>
<p>タグはparagraphつまり文章の段落という意味です。
そして<strong>タグは文字を強調させたい時に使います。
<p>タグの中に書いた文章を強調させたい時は<strong>タグを<p>タグに入れて使いますがこの時、必ず手前のタグから終了させましょう。（例の場合は<p>から順）
・属性、値
Webサイトに画像やリンクを貼りたい時はどの画像を表示させるか、どのサイトに飛ぶか”場所”を指定する必要があります。
この場合タグに追加情報を書く必要がありますが、その情報の種類を「属性」と言います。
例えば画像を表示させたい時は
<img src=”aosora.jpg” alt=”青空”> ※（imgタグは終了タグが必要ありません）
srcという属性を使い画像の呼び出し元のファイル名を書きます。
alt属性は画像が表示されない場合や画像にカーソルを合わせた時に出てくるテキストを指定するときに使います。
リンクを表示させたい時は
<a href=”URL”>テキスト</a>
リンクを意味する<a>に加えhref属性でリンク先を指定します。
属性の値は「ダブルクォーテーション」で囲いましょう！
HTMLの構造（骨組み）
1.<!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset=”utf-8″>
5. <title>かえるアウトプット</title>
6. <link rel=”stylesheet” href=”stylesheet.css”>
7. </head>
8. <body>
9. <h1>かえるアウトプット</h1>
10. <p>日々の学習をみんなと共有</p>
11. </body>
12. </html>
2. <html>
3. <head>
4. <meta charset=”utf-8″>
5. <title>かえるアウトプット</title>
6. <link rel=”stylesheet” href=”stylesheet.css”>
7. </head>
8. <body>
9. <h1>かえるアウトプット</h1>
10. <p>日々の学習をみんなと共有</p>
11. </body>
12. </html>
初めてHTMLを見た方は何がなんだか分からないと思いますが、実はこの骨組みは今すぐ暗記する必要はありません。上達していくうちに自然と覚えていきます。
実際、エディターをしようするさいもこの部分はショートカットできるので重要な点だけ今回はご紹介します！
・<head>
まずは<head>の部分から説明していきます。
<head>の部分は外部ファイルのリンク、説明文、ページ情報などを書く場所です。
<head>に書かれた情報はブラウザー上では表示されません。
・<body>
実際に入力した文章やコンテンツをブラウザー上に表示される部分です。
上記に説明したタグは<body>に入力します。
<body>以外の部分は最初はコピペでも大丈夫です！
おすすめのサイト（アプリ）、参考書
プログラミングを勉強するときは実際にコードを書いたり、見たりした方が効率的です。
私はProgateというプログラミング学習サイトを使用しています。その他に本や参考書なども合わせて使うことで効率的に学ぶことができます！
プログラミング初心者におすすめな学習ツール
こんにちは、ブログ管理人のかえるです。
今回はプログラミング初心者におすすめな学習ツールをご紹介していきたいと思います！
この記事では
プログラミングってどんな学習方法があるか
効率よく勉強するための...
el-blog.com
2020.09.07
Progate意外にも上記記事にも書きましたが様々なツールを活用して効率的に学習しましょう！
最近購入してよかった本はこちらです！
わかりやすい解説とデザイン性の高さがポイントでとても重宝してます。
一冊あると便利です！
まとめ
今回ご紹介したのはHTMLのほんの一部です。
読むだけでは少しわかりにくいかもしれませんが実際に本を見て書いたり、Progateやドットインストールを活用してコードを書いた方が良いと思います！
分からなくなった時にまたこのブログを参考にしてみてください！これからもプログラミング学習のアウトプットをみなさんと共有できたらと思います！
コメント