WEB|HTMLの整理

HTMLの先頭

強タグ

何のマークも付いていないHTMLは平板です.ある部分を深くして重要な単語を強調したいなら

<strong></strong>

上のラベルを使用します.

uマーク

すでに強調されている単語の中にもっと強調したい単語があって、線を引きたいなら

<u></u>

上のラベルを使用します.

hラベル

タイトルを表示したい場合は

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

上のラベルを使用します.数字が大きいほど、サイズが小さくなります.

すべてのラベルを覚えますか?

世界には多くのラベルがあり、1つのページにそんなに多くのラベルが使われていません.全部暗記する必要はありません.
https://www.advancedwebranking.com/html/
このサイトには、多くのWebページで使用されているラベルの順序が表示されています.この点を参照して、なぜいくつかのタグを頻繁に使用し、明確に符号化するのかを理解してください.

改行が必要

改行文字が一つもなく、文章が複雑に見えると読みたくなくなります.そのため、改行します.

brラベル

まずbrタグで改行します.

<h1>Nutrition</h1>
the substances that you take into your body as food and the way that they <strong>influence your <u>health</u></strong>:
<br>Good nutrition is essential if patients are to make a quick recovery.
<br>improvements in nutrition
<br><br>Nutrition is a critical part of health and development. Better nutrition is related to improved infant, child and maternal health, stronger immune systems, safer pregnancy and childbirth, lower risk of non-communicable diseases (such as diabetes and cardiovascular disease), and longevity.
Healthy children learn better. People with adequate nutrition are more productive and can create opportunities to gradually break the cycles of poverty and hunger.
Malnutrition, in every form, presents significant threats to human health. Today the world faces a double burden of malnutrition that includes both undernutrition and overweight, especially in low- and middle-income countries.

結果はこうでした.brラベルはラベルを閉じていません.何回書けますか.2つ書き続けて改行する.

pラベル

段落をpタグで表す.

<h1>Nutrition</h1>
the substances that you take into your body as food and the way that they <strong>influence your <u>health</u></strong>:
<br>Good nutrition is essential if patients are to make a quick recovery.
<br>improvements in nutrition
<p>Nutrition is a critical part of health and development. Better nutrition is related to improved infant, child and maternal health, stronger immune systems, safer pregnancy and childbirth, lower risk of non-communicable diseases (such as diabetes and cardiovascular disease), and longevity.</p>
<p>Healthy children learn better. People with adequate nutrition are more productive and can create opportunities to gradually break the cycles of poverty and hunger.</p>
<p>Malnutrition, in every form, presents significant threats to human health. Today the world faces a double burden of malnutrition that includes both undernutrition and overweight, especially in low- and middle-income countries.</p>

結果はこうでした.brラベルとは異なり、段落を表現する上でより簡潔で美しい.しかし、brタグのように、段落間に空白を増やそうとすると、疑問が生じる.ここでCSSが登場しました

pタグとCSSの組み合わせ

<p style="margin-top:40px;">Nutrition is a critical part of health and development. Better nutrition is related to improved infant, child and maternal health, stronger immune systems, safer pregnancy and childbirth, lower risk of non-communicable diseases (such as diabetes and cardiovascular disease), and longevity.</p>

上に残されたCSSコードを加えることで、brラベルよりも細かく調整できます.

imgラベル

文章だけの平板なページに画像を挿入するにはimgラベルが必要です.
単に画像タグが存在するだけでページに画像を挿入できるわけではありません.プロパティと呼ばれる画像を挿入する情報を指定します.

ツールバーの

<img src="nutrition.jpg">

htmlファイルが存在するプロジェクトファイルの栄養.jpg画像を持ってきて、下のようにページに表示します.

しかし意図とは異なり、サイズが大きすぎて画像が正常に確認できない.だからwidthとheightの値にサイズを調整します.

width, height

width、heightプロパティは常に明確にする必要があります.
Webページをロードすると、ブラウザは画像に適切なスペースを残す可能性がありますが、プロパティが指定されていない場合は、Webページのレイアウトが変更される可能性があります.

<img src="nutrition.jpg" width="500">

width、height属性値はピクセル単位で指定する必要があります.HTML4.01ではwidth属性値をピクセル単位とパーセンテージ単位として定義することもできますが、HTML 5ではピクセル単位しか使用できません.
ソース:http://tcpschool.com/html-tag-attrs/img-width

親子関係ラベル

以下のコードでは,pを親ラベル,aを子ラベルと呼ぶ.

<p>
  <a>
  </a>
</p>

必要に応じて、親と子供の関係は異なるかもしれません.aの両親がpだとは限らない.ただし、固定された関係ラベルが存在します.

Liラベル

Liラベルはディレクトリを並べます.しかし、次のようにコードを書くと、

  <li>Carbohydrate</li>
  <li>Protein</li>
  <li>Fat</li>
  <li>Bread</li>
  <li>Butter</li>
  <li>vegetable</li>

異なるトピックのディレクトリが不明です.Liラベルには、異なるリストを区別するために、境界を表すolまたはulラベルが常に付いています.

olまたはulラベル

olラベルはordered listの略で、liラベル付きのリストを自動的に番号付けするために使用されます.

ulタグは、無秩序リストの略語を使用してリストを番号付けしません.

<ul>
  <li>Carbohydrate</li>
  <li>Protein</li>
  <li>Fat</li>
</ul>
<ul>
  <li>Bread</li>
  <li>Butter</li>
  <li>vegetable</li>
</ul>

異なるリストが区別できることを確認できます.

!DOCTYPE html

<!DOCTYPE html>

htmlタグを定義する前に、まず宣言する必要があります.HTMLタグは、WebブラウザにHTMLバージョンまたはHTMLバージョンとは何かを教える役割です.

htmlタグ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

DOCTYPE宣言以外のすべてのHTML要素を含み、WebブラウザにHTMLドキュメントであることを通知するために使用されます.head,bodyラベルはすべてバインドされています.

head、title、metaラベル

title、metaラベルはいずれも本明細書を説明し、headラベルに存在する.
headラベルはbody(本明細書)を記述するラベル(title,meta)を結合する.

<head>
   <meta charset="utf-8">
   <title>WEB - Nutrition</title>
</head>

titleラベルは検索エンジンでブックマークと同じです.ドキュメントのタイトルを定義するために使用され、titleで宣言されたタイトルはWebブラウザのタブの名前になります.

Metaタグはメタデータを定義するために使用され、WebブラウザがUTF-8符号化でhtmlドキュメントを読み取ることを可能にする.charsetは文字ルールを表します.

タブ

アンカー、すなわちアンカーを表すタグであり、WebページとリンクWebページのタグをリンクするために使用されます.

<a href="https://en.wikipedia.org/wiki/Nutrition#Nutritional_groups" target="_blank" title="Nutrition wikipedia">Nutrition</a>

aラベルの属性

href(ハイパーテキスト参照):リンク先のプロパティを指します.「開くページの定義」リンクをクリックします.
target:リンクページをクリックしたときにドキュメントが開く場所を指定します.「blank」は、新しいラベル・ページでリンクを開くことができる属性値です.
title:Nutrictionにマウスを置くと、プロパティ値がツールチップとしてサスペンションされます.