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の基礎については、今回のコースを学習することで、最低限の理解はできたと思います。

CSSJavaScriptの学習も継続していきたいと思います。
正直、現代ではWordpressのようにノーコードで、ページを作成することは容易になっていますが、裏側も知れることで、教養が広がるかと思っていますので、進めてきたいと思います。

 

正直この記事のために画面キャプチャ用意するの疲れました・・・