HTML学習①(ドットインストール)

とりあえず、ドットインストールのトップにあったHTMLから学ぶことにした。

 

【HTMLを学ぶ目的】

Wordpressを用いてブログをどんどんカスタマイズできるようになりたい。

・HPの構造を理解したい。

・教材 「ドットインストール:https://dotinstall.com/

 ・なお、本ブログは非商用であり、ドットインストール公式のブログではない。

◆ 環境

 仕様ブラウザ:Chrome
 エディタ:Atom
 フォント:Ricty Diminished 

◆ HTMLとは

 HTML(hyper text markup language)はホームページを作るための言語
 構造的な文書を書くことができる
 見た目を規定する"CSS"も使うことできれいなHPを作れる。

 仕様:https://www.w3.org/TR/html51/

 仕様を作っているW3Cという団体とブラウザを作っている団体は異なる。
 そのため新たな命令が各ブラウザに対応していない場合があるらしい。

 確認できるツール:https://caniuse.com/#search=defer

◆ タグと・属性とは?

 HTMLはマークアップ言語である。
 マークアップとは、タイトルや見出しなどの構成要素に「タグ」という目印を付け意味を持たせていく行為を指す

 

"タグ"=文章に意味づけをするもの

【記述方法】

  <タグ>文章</タグ>
  ↑返しタグ ↑終了タグ

 

"属性"=タグの付帯情報

タグに付帯情報をくっつけたいときは、属性名とその値を記す↓

【記述方法】

  <タグ 属性名=値 属性名=値>文章</タグ>

 

マークアップする文章がない時や、情報や部品を配置したいだけの時はタグを単一で設置する

【記述方法】

  <タグ>

 

◆ HTMLの書式

 

HTMLではタグを入れ子構造にしていく。
入れ子構造とは、プログラム構築の際の手法で、ある機能をもった一連の命令(ルーチン)の中に別のルーチンをはめ込むこと。
入れ子をするときは、わかりやすくするためにコードを字下げする(改行でスペース)。これをインデントと呼ぶらしい。
インデントはtabspaceでおk.

 

テストコード

<!DOCTYPE html> _今からhtmlの形式で書いていくための文章宣言。
<html lang="ja"> _基本htmlタグで囲っていく。返しタグを頭に、終了タグをケツに。
         _lang="ja"はhtmlの言語設定を日本語にするための属性。
<head>_headはこの文章自体の情報
<meta charset="utf8">_このページの文字コードをutf8にする、という指定。
           _charsetをミスると文字化けする
<title>初HTML</title>_titleタグはブラウザのタブなどに表示される文字列
</head>
<body>_bodyは本文
<p>ハロー</p>
</body>
</html>

 

 

とりあえず今日は以上。