udemy初心者プログラミング(HTML編)
HTMLとは、「Hyper Text Markup Laungage」の略で、ウェブページを作成する際に、文章構造を定義する言語になります。
文章の各部分にタグをつけ、その部分がどのような要素であるのか定義し、コンピュータが文章構造を理解し表示します。
今回、会社で契約しているudemyで初心者向けの「プログラミング基礎コース(HTML、CSS、JabaScriptなど)」があったので、GWに何か身に付けようと思い、ブログも始めたので裏で動いてるコードを理解し、レイアウトやデザインに活かしていければと思います。
<環境>
OS : windows10
ブラウザ :Google Chrome
開発ソフト:Visual studio basic
①基本(見出し、リスト、リンク etc)
コード説明
<p></p> | 段落を構成する |
<br> | 1行改行する |
<hr> | 区切り線を加える |
<h1></h1>~ <h6></h6> |
見出し1から6まで ※文書構造のみを定義するので、デザインはCSSで設定 |
<ul> <li></li> </ul> |
順番をつけないリストの作成 |
<ol> <li></li> </ol> |
順番をつけるリストの作成 |
<dl> <dt></dt> <dd></dd> </dl> |
説明リストを加える、用語と説明を斜めにずらして表示する |
<a href=""></a> | リンク先を加える、””の間にURLを記載できる |
<img src="" > | 画像を埋め込む、””の間に画像の格納場所を記載する |
画面イメージ
②テーブルの作成
コード説明
<table></table> | テーブルを作成する |
<table border=""></table> | テーブルの枠線を作成する、""に数字を入力 |
<caption></caption> | キャプションを追加する |
<tr></tr> <th></th> <td></td> |
テーブルの行を作成する テーブルのヘッダーを入力する テーブルのデータを入力する |
<th colspan=""></th> | 列方向に枠を結合する |
<th rowspan=""></th> | 行方向に枠を結合する |
画面イメージ
-
コード画面 -
ウェブページ画面
③フォームの作成
コード説明
<form action=""></form> | フォームを作成する、""の中に送信先アドレスを入力 |
<input type="text"> ※<input type="text" requierd> |
テキストの入力項目を追加する ※選択項目を必須入力に設定する |
<input type="radio"> ※<input type="radio" checked> |
ラジオボタンを追加する ※デフォルトでチェックを入れておく |
<input type="checkbox"> | チェックボックスを追加する |
<input type="submit"> | 送信ボタンを追加する |
<select> <option></option> </select> ※ <option selected></option> |
プルダウン選択ボタンを追加する optionに選択肢を複数作成する ※デフォルトで選択しておく |
<label for="A"></label> <input id="A" type=""> |
ラベルを追加する id""先の値に紐づけができる |
画面イメージ
-
コード画面 -
ウェブページ画面
HTMLの基礎については、今回のコースを学習することで、最低限の理解はできたと思います。
CSS、JavaScriptの学習も継続していきたいと思います。
正直、現代ではWordpressのようにノーコードで、ページを作成することは容易になっていますが、裏側も知れることで、教養が広がるかと思っていますので、進めてきたいと思います。
正直この記事のために画面キャプチャ用意するの疲れました・・・