こんにちは スッガです。コーディング講座の動画を参考にしながら、学習した経過を、解説を入れながら詳しく書いたページです。
こちらの記事を読めば基本的なHTMLの書き方がわかるようになります。プログラミング学習書籍などもじっくり読んで参考にしています。
見ていただいた方がわかりやすいと思えるよう工夫して書きました。
この記事を書いている私は２０２１年３月からプログラミングを学び始めました
突然ですが、こんにちは！ 解説ロボです。
この記事は
・プログラミング学習って何をするの？と思っている方
・コーディングを学習している初学者の方
・html.cssの基礎学習が終わって次は何をしよう？と思っている方
・スッガを応援したい方etc..
に向けた記事になっています
スッガが
学習動画を参考にしながら実際にコードを書いていく手順や詳細をまとめています。
この記事を読むとHTMLの基本中の基本がわかります。（参考文献 一冊で全て身につくHTML ＆CSSとWebデザイン）
ではどうぞ！
まずはここから 〜HTMLファイルの骨組みタグを書く
初心者が初めて見ると
呪文みたいに見えるやつね！
HTMLというのはwebページを作る土台。それぞれの文章や文字列が何を表すのか、コンピューターがわかるように指定していくよ。インターネット上の様々なサイトはHTMLで作られているよ。
では、学習動画レッスン1の内容を実践し、分かりやすく解説しています。
今後もレッスンごとに記事を書いていきます！
まずはhtmlのhead部分から書く
まずはこちらの↓タグをhtmlファイルに書いていきます！ （udemyのプログラミング動画参照）
テキストエディタはVScCodeを利用
↑これらはhtmlには必ず必要なタグだよ
<！DOCTYPE html>
バージョンを示す
ドクタイプと読む
現在はHTML5 が主流）
vscodeでは！と書いてTab キーを押すだけで↑のような雛形コードが出てきます。（Emmet 機能）
<html lang="ja">
DOCTYPEのすぐ下に書くjaはJapaneseの事
日本語の文書であることを示す）
head
ページの情報を記述する
ヘッドと読む
表示されない
<meta charset＝”UTF8”>
文字コードUTF8に指定
文字化けを防ぐ）
<title>~</title>
webサイトのタイトルを記述
検索したときのページタイトルになる
<metaname="desctiption" content="~">
サイトについての説明文をく。ページタイトルとともに表示される。終了タグなはい
<meta name="keywords" content="~">
必要なキーワードを混ぜて記述する 終了タグなはい
<body></body>
コンテンツなどの本体部分・ボディと読む
表示される
titleタグの中にタイトルととキャッチコピーを｜（縦棒）で区切って書くのが一般的
keywordsは最後のsを忘れないでね。こちらは複数書く事ができて、半角スペースで区切るよ！
目には見えませんがGoogleなどの検索エンジンの検索結果に関わるので必ず記入しましょう。
ここで一旦保存しました。
macは command+s winはctrl+s で保存できます
ここでブラウザに戻ってみても何も表示されません。<head>内はページの情報なので表示されず、 <body>内のコンテンツのみ表示されます。
ブラウザとは
インターネット上のウェブ ページの情報を画面上に表示するための閲覧ソフト。また一般に、コンピュータのデータやプログラムを、画面上に文字や画像として表示するためのプログラムも言う。
HTML の基本の書き方
（参考）1冊で全て身につくHTML&CSS Web デザイン
HTML はタグと呼ばれる<></>で文字列を囲んでいきます。これらはセットで使われますが
</>こちらの終了タグがないものもあります。
(先ほどhead内に書いたmetaタグなど）
タグを書くときのルールがあるよ
・半角英数字で書く
・タグの中にあるタグがある書き方を入れ子という
例:<html>
<head>〇〇</head>
</html>
見出しを作る〜＜h1＞〜＜h6＞タグ
見出しタグは<h1＞~<h6>まであるよ
数字が小さいほど大きく表示されるよ
大見出しがh1で、小見出しがh2・・と大きな見出しからの順番を守るのがポイントです。
一つのページで使うのは
h4くらいまで。
h1（大見出し）1はページに一つが基本です。
見出しをつけると読みやすくなるもんね〜
文章の段落を表示〜<p>タグ
<p>タグはParagraphの略で、文章のまとまりを表示するときに使うよ。<ｐ>タグを使うとかこまれた文章が1行分改行されるよ。
文章ではなく、単に改行するときは＜br＞タグを使ったりするよ。
段落ないと読みにくい〜
画像を表示〜<img>タグ
<img>タグは画像を表示するときに使うよ。終了タグがないのが特徴。
このタグを使うときは
<img src="〇〇.jpg" alt="テキスト”>
と記述するよ。
src（ソース）
属性と言われるもので画像ファイルのURLを示すんだ。
alt（オルト）
画像を説明するテキストで、画像が読み込めなかった場合のテキストを入れるよ。
指定している画像は何かを説明するテキストを入れるようにしよう。画像に関係のないキーワードは詰め込まない。
（alt属性は、装飾画像の場合はテキストは空でもok)
"〇〇jpg"のところはファイルパスの指定が必要だよ。
パスには相対パス・絶対パスがあるよ
相対パスを使う事が多い。
こちらのサイトに詳しく書かれてました
パスを間違えて画像が表示されないことありました・・
リンクをはる〜<a>タグ
リンクを作るときに<a href="リンク先のURL">アンカーテキスト</a>と書いていくよ
アンカーテキストの部分にはHP名など
例：
<a href=
"https://e-suga-design">
webデザイナー菅絵理のブログ
</a>
アンカーテキストに画像を設定し、リンクを貼ることもできるよ
先ほど出てきた<img>タグを<a>タグで囲みます
<a href="https://e-suga-design">
<img src="〇〇.jpg" alt="テキスト”>
</a>
このタグはよく使いそうね〜
箇条書きリストを作る〜<ul>タグ＋<li>タグ
例；子供の仕事
<ul>
<li>食う
<li>寝る
<li>遊ぶ
</ul>
実際の表示
・食う
・寝る
・遊ぶ
<ol></ol>の場合は
番号がついた形になります
そうそう。
番号付きリスト
<ol>タグ+<li>タグだね
<ol>
<li>食う
<li>寝る
<li>遊ぶ
</ol>
実際の表示
1食う
2寝る
3遊ぶ
他にも表を作るtableタグやフォーム欄を作る<form>タグやラベルを作る<label>タグなども・・あります
まとめ
今回はコーディング教材の第一回のレポート記事とともにタグの種類を紹介しました。
2回目はブロック要素でグループ分けをしていきます！最後までお読みくださりありがとうございました。
おまけ
このホームページは、集客やマーケティングで日々研究していること、本から学んだ成功哲学、日々のデザインなどをまとめています
詳しいプロフィールはこちらからどうぞ♪
