そこに壁があるよ

立ちはだかる壁を前に、何もせず回れ右して帰りにラーメン食って、コンビニスイーツ買って家帰って寝る。そんなのあかんブログ

【HTML】HTMLの属性、DOCTYPE宣言

2020-02-24 06:56:46 | 【ノート】プログラミング学習
◆HTMLの属性
<要素名 属性=”属性値”>
<html lang=”ja”> → HTMLの言語は日本語です。という意味。

※属性値が英語の場合は”en”



◆HTMLのバージョンについて
HTMLには「HTML1」～「HTML5」のようなバージョンが存在し、そのバージョンによって使える「要素」や「属性」が異なる。

HTML3以前はHTML内でデザインも行っていた。
HTML4(1999年～)からHTMLは文章構造のみとなり、デザインはCSSに移行。
現在はHTML5(2014年～)が主流。
HTMLの開発は「W3C(World Wide Web Consortium)」：Web技術の標準化団体が行っている。

◆DOCTYPE宣言
どのHTMLのバージョンに基づいて記述されたHTMLファイルなのかを、HTMLファイルの冒頭でDTDの指定によって宣言すること
※DOCTYPE＝DOCUMENT TYPEの略
html要素の上に、場合に分けて、以下のコードを記述する。

↓↓↓↓↓↓

3種類のDTD
HTML5より前のバージョンのDOCTYPE宣言は、同じバージョンでも3種類のDTDがあり、その種類によってDOCTYPE宣言の記述が異なる。

その3種類というは、「Strict」、「Transitional」、「Frameset」の3つ。
〇Strict
仕様に厳密なDTDで、W3Cが非推奨としている要素や属性、またフレームという機能を使用することができない。
・HTML4.01
　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
　"http://www.w3.org/TR/html4/strict.dtd">HTMLCopywrap_text
・XHTML1.0
　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTMLCopywrap_text

〇Transitional
文法がゆるいDTDで、W3Cが非推奨とする要素や属性も使えますが、フレームという機能は使えない。
・HTML4.01
　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
　"http://www.w3.org/TR/html4/loose.dtd">HTMLCopywrap_text
・XHTML1.0
　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTMLCopywrap_text
〇Frameset
フレーム用のDTDで、Transitionalに加えて、フレームという機能も使える。
・HTML4.01
　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
　"http://www.w3.org/TR/html4/frameset.dtd">HTMLCopywrap_text
・XHTML1.0
　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 


【HTML】creator questでの学習に移行、そして第1章

2020-02-23 20:49:17 | 【ノート】プログラミング学習
現時点でprogateにしっくりこず、色々探した結果、creator questという動画での学習が面白く学習出来ているのでそちらへ移行した。
https://creatorquest.jp/ 
動画内において先生と生徒の掛け合いが「ゆっくりMovieMaker」で為されており、丁寧かつ重要なポイントを反復して講義するサイトで、無理なくモチベーションを保ちながら楽しくできるのが魅力だ。
一通りこれでやっていこうと思う。

【第1章】
◆HTML(Hyper Text Markup Lunguage)
ハイパーリンクという機能を持った、文章の構造を表すタグをつける言語。
ホームページの文章に意味や役割を付ける言語。
ホームページの情報そのもの。

◆ホームページがどのようなコードでに作られているかは、そのホームページ上で右クリックを押し、「ページのソースを表示」でソースコードの閲覧ができる。

◆WWW、Web  (World Wide Web)
　世界中に張り巡らされた蜘蛛の巣

◆【Webサイト制作の基本タグ４つ】
「html」「head」「title」「body」

<html>　←HTML要素：要素内がHTMLであることを示すタグ。
　<meta charset=”UTF-8”> ← 文字化けしない仕様にする。
　<head>　←head要素：ページの情報を示す要素。webサイト上には表示されない。
　　<title>タイトル</title>　
　</head>
　<body>　←body要素：ページの内容を示しwebサイト上には表示したいものを入れる。
　　本文
　</body>
</html>

【HTML】リスト

2020-02-20 05:57:57 | 【ノート】プログラミング学習
■リスト：liタグ(list)
<ul>
　<li>○○○</li>
　<li>□□□</li>
　<li>△△△</li>
</ul>
※１ 改行される
※２ 項目箇所先頭で「tabキー」を押し、インデントをすれば、コード上で分かりやすくなる。
「ul要素」で囲えばリストの項目ごとに「黒点」が、
「ol要素」で囲えばリストの項目ごとに「数字の連番」が表示される。


しくった。HTML編ここで最後だった。
とりあえず次回、今まで習った箇所だけでどこまで作れるのか可視化していく。



【HTML】見出し、段落、メモ用コメント、リンク、画像の表示

2020-02-17 05:32:48 | 【ノート】プログラミング学習
progateを活用し、１日５章ずつ進めていく。

■見出し：hタグ(header)
<h1>1番大きな見出し</h1>　～　<h6>1番小さな見出し</h6>
※改行される

■段落：pタグ(paragraph)
<p>段落</p>
※改行される

■メモ用コメント：<!--○○○--> 
膨大なコードの中でどのコードがどの項目なのかなど、一目で分かるようにコメントを残せるのがコメントタグ。ウェブサイト上には反映されない。
<!--これはコメントです-->

■リンク：aタグ(anchor：錨)
「Googleへのリンク」と表示し、Googleのウェブサイトへ誘導したい場合、
<a href="https://google.com">googleへのリンク</a>

■画像の表示：imgタグ(image)
<img src="https://kabe.com/images/family.jpg">
終了タグは不要。