基本的なHTMLコードを理解するための5つのステップ

htmlは、すべてのWebページのバックボーンです。あなたが初心者であれば、htmlを理解するための基本的な手順を説明します....

HTMLはWebに欠かせない要素です。HTMLを手打ちしてWebページを作成するWebデザイナーはほとんどいませんが、それでも少しはHTMLを知っていると便利です。

HTMLとは何か、基本的な概念、他の言語との相互作用など、この言語の基本を学びます。これは「HTML for dummies」のクラッシュコースとでも思ってください。

エイチティーエムエル形式は何ですか？

HTMLはHypertext Markup Languageの略で、プログラミング言語と組み合わされることもあるが、これは正確ではない。

マークアップ言語であるHTMLでは、ページの表示レイアウトを作成することしかできません。javaやC++などの本物のプログラミング言語は、ロジックとコマンドを含んでいます。

単純ではあるが、HTMLはWeb上のすべてのページの基幹となるものである。文字を太く表示したり、画像を入れたり、他のページにリンクしたりする役割を担っています。HTMLに関するFAQで詳しく説明しています。

ブラウザでページを右クリックし、「ページのソースを見る」などを選択すると、ほとんどのページの背後にあるHTMLを見ることができます。この中にはHTML以外のコードも多く含まれているかもしれませんが、それをフィルターすることができます。

マークアップやプログラミング言語の経験がなくても、HTMLを少し学べば、より詳しいウェブユーザーになれるでしょう。HTMLの仕組みを理解するために、5つの基本的なステップを説明します。途中で事例を紹介します。

ステップ1：ラベリングの概念を理解する

HTMLでは、タグ付けシステムを使って、文書のさまざまな要素を分類しています。

ほとんどのタグはペアで表示され、影響を受けるテキストをその中に包み込みます。以下はその簡単な例です。

(マーカーは文字を太くするものです。詳しくは後述します)

<strong>This is some bold text</strong>.

エンドマーカーがフォワードスラッシュ（/）で始まっていることに注意してください。これはエンドマーカーを示すもので、重要です。マーカーが閉じられていない場合は、最初からすべてがこの属性になります。

しかし、すべてのタグが対になっているわけではありません。HTMLの要素の中には、空の要素と呼ばれる、内容を持たず独立して存在するものがあります。

<br>

スラッシュをつけると改行されます（例．

<br />

) しかし、これは絶対に必要なことではありません。

ステップ2：フレームhtmlレイアウト

正しいHTML文書は、正しくレイアウトできるように特定のタグを定義する必要があります。

すべてのHTML文書は、自分自身をそうであると宣言するために始めなければならない。したがって、その閉じタグである , は、HTMLファイルの最後の項目となる。
次に、ページタイトルやページ上で動作する各種スクリプトなどの情報が記載されているセクションです。その名の通り、通常、最初のタグの直後に表示されます。エンドユーザーには、これらのタグのコンテンツはあまり見えません。
最後に、タグは読者が見るページのテキストを保持します（その他にもいろいろ）。ここでは、画像やリンクなどをご紹介します。

から

<body>

セクションはHTML文書の大部分を構成しており、このチュートリアルの残りの部分では、セクションに関連する要素について見ていきます。

ステップ3：書式設定のための基本的なhtmlタグ

次に、HTML文書を構成する一般的なタグをいくつか見てみましょう。もちろん、すべての要素を網羅することは不可能なので、重要なものをいくつかおさらいしておきます。もし、あなたが満足されないのであれば、私たちはより多くのHTMLの例を提示しました。

これらのタグが基本的なものに見えるなら、HTMLが1993年に作成されたことを思い出してください。

簡単な文字組版

HTMLは、Microsoft Wordの以下の基本的なテキストスタイルに対応しています。

タグはテキストを太字にします。
タグ（"emphasis "の略）は、テキストをイタリック体（斜体）にします。

また、HTMLでは、旧来の

<b>

太字で表示され

<i>

ただし、上記の方法で行うのがベストです。

要約すると

と

<em>

あるコンテンツがどのように理解されるべきかを示し、その後に続くタブは、どのように理解されるべきかを示すだけです。この従来のラベルは、視覚障がい者が使用するスクリーンリーダーにとって使いやすいものです。

パラグラフとその他のセクション

HTMLの

<div>

マークアップは、文書の一部を定義するために使用されます。通常、マークアップはCSS（下記参照）と組み合わせて使用され、何らかの方法でセクションをフォーマットするために使用されます。

この

<p>

マークアップでは、テキストを段落分けすることができ、ブラウザはこれらの前後に自動的にスペースを入れてくれるので、自然にテキストを分割することができます。

文書に見出しを付け、その見出しに対応する

<h1>

<h6>

H1が最も重要な見出しで、H6が最も重要でない見出しです。MakeUseOfのほぼすべての記事には、H2やH3の見出しが使われており、情報を整理しています。

Enterキーを押してHTML文書に改行を加えても、実際には改行は表示されません。

<br>

改行を追加する。

これらを全て使用した場合の例を以下に示します。

<div class="example"><h2>Example Heading</h2><p>This is one paragraph.</p><p>This is a second<br>paragraph split between two lines.</p></div>

ステップ4:** 画像

画像はほとんどのWebページで重要な要素であり、HTMLを使用して簡単に追加でき、さらに画像にさまざまなプロパティを設定することができます。

使用方法

<img>

タグ.これを貼って

src

属性は、画像の読み込み元を指定するために使用されます。

もう一つの重要な属性

<img>

ラベルは

alt

.Altテキストは、スクリーンリーダー用に画像を説明したり、画像が正しく読み込まれない場合に使用することができます。画像にカーソルを合わせると、その画像のaltテキストを見ることができます。

使用方法

width

と

height

要素で、画像に表示する画素数を指定します。

それらをまとめると、イメージラベルは以下のようになります。

ステップ5：リンクの追加

他のページへのリンクがなければ、WWWは大規模なサイトとは言えません。

<a>

タグを使えば、どんなテキストでも他のページにリンクすることができます。

内部

<a>

タグ, ラベル

href

URLを貼り付けるだけでOKです。

title

要素には、誰かがリンクの上にマウスを置いたときに表示されるちょっとしたテキストが追加されます。

基本的なリンクは以下のとおりです。

<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>

この

<a>

このほかにもさまざまなタグの要素が考えられるが、ここでは深く触れない。

htmlがcssやjavascriptとどのように連携しているか

HTMLの基礎と、それがどのようにWebページを構築するのかについては、すでに理解しています。しかし、ご想像の通り、HTML単体では現代のウェブのニーズに応えられません。Web1.0」の時代には、シンプルなHTMLページが一般的で、ほとんどのWebサイトは静的なテキストに過ぎなかった。

css（Cascading Style Sheets）とは、HTMLで書かれたテキストの見た目を記述するための言語である。

<div>

この（他の）タグで、説明したタグは、定義できる

class

そして、付属のCSSドキュメントに、これを実現するための指示を書きます。

class

ぜひ見てください。

これらのスタイル要素をHTMLコードにインラインで定義することもできますが、これはメンテナンスがより困難になるため、バッドプラクティスであるとみなされています。簡単なCSSの例で詳細を確認してください。CSSファイルの最適化もご覧ください。

ジャバスクリプト言語

これまで、HTMLがコンテンツを、CSSが外観を定義することを見てきました。 JavaScriptは、Webに欠かせない最後の3人組で、毎回新しいページを読み込むことなく、人々の行動にWebページを反応させることを可能にします。

例えば、JavaScriptを使うと、お客様が入力したパスワードが条件を満たしていないことを、お客様がパスワードを送信しようとする前に、Webサイトが警告を出すことができます。ウェブデザイナーは、JavaScriptを使ってスライドショーで画像を循環させたり、ユーザーに入力を促したりすることができます。

これらは基本的な例に過ぎませんが、JavaScriptは様々なことができるスクリプト言語で、HTMLやCSSよりもはるかに複雑な機能を持っています。詳しくは、JavaScriptの概要をご覧ください。

ウェブデザインの全容を見ることはこの記事の範囲外ですが、HTMLが他の言語と相互作用して、今日私たちが知っているようなウェブページを作り出していることは、十分に理解できます。

htmlの開発について

HTMLは静的なものではないことに注意することが重要です。HTMLは何度か改訂され、最近ではHTML5があります。この規格は、Adobeflashなどの独自のフォーマットに依存するのではなく、ネイティブのビデオ埋め込みをサポートしていることは注目に値します。

新しいHTMLの反復では、特定の旧式のタグが時折非推奨になることも明記されています。

と

<blink>

(それぞれスクロールとフラッシュテキスト)は、1990年代のウェブサイトデザインで一般的なものでした。ですから、規格は時代とともに変化することを忘れないでください。

htmlの知識があると便利です。

ここまで、HTML文書の仕組みについて簡単に見てきました。これで、Webページがどのように構築されるかの基本が理解できたと思います。ウェブページを作る仕事に就かなくても、毎日使っているウェブページについて、少しは理解できるはずです。

必要なツールを使ってウェブ開発スキルをアップグレードし、最初のウェブサイトをデザインする方法についてご紹介します。

写真提供：Belyaevsky/Deposit photo

2021-03-21 16:54 に公開
閲覧 ( 32 )
分類：プログラミング