初心者のための完全なHTMLガイド

最終更新日:15 May 2018

20年前、あなたが趣味のブロガーであっても、あなた自身を守るために、あるいはあなたのサイトに簡単な機能を追加するために、いくつかのWebコーディングを知っていなければなりませんでした。 しかし、今では、HTMLの基本を知ることさえももはや必要とされない非常に多くのエディタとプラグインが利用可能です サイトを作る or ブログを実行する.

これに関する問題は、いくつかの基本を知らなければ、あなたのブログで簡単に本当の問題に遭遇し、軽微な問題であるかもしれない問題を解決するために高価な開発者を雇う必要があるということです。 それだけでなく、カスタムテキストウィジェットを追加するなど、ブログを変更するには少しの知識が必要です。

コンテンツのレイアウトがうまく見えない場合は、HTMLの知識があなたを元気に戻すことができます。

ここでは、ブロガーや非専門家のオンラインビジネスオーナー向けのHTMLガイドのいくつかのバージョンを紹介します。

HTMLは今日のインターネットのバックボーンです。 何百万ものウェブサイトがインターネットを形成しました。 HTMLがこれらすべてのWebサイトの構成要素です。

初心者向けQ&A

1- HTMLとは何ですか?

HTMLは Hyper TEXT MArkupe L怒り。 これは、Webブラウザのコンテンツにタグを付けるための標準言語です。

HTMLは「要素」で表されます。 要素は「タグ」とも呼ばれます。

2-なぜHTMLが必要ですか?

Webブラウザは、サポートされている言語で書かれたWebサイトのみをレンダリングすることができます。 HTMLは最も一般的なマークアップ言語であり、Webブラウザに最も高い評価を得ています。

それが、HTMLが必要な理由です。

3- HTMLは大文字と小文字を区別しますか?

HTMLは大文字と小文字を区別しません しかし、適切なケースでHTMLを書くことが最善の方法です。

最初のHTMLファイルを作成する手順

お使いのコンピュータのメモ帳を使用して、基本的なHTMLファイルを作成することができます。 しかし、多くの行のコードを書くことは痛いでしょう。

コードエディタが必要です。 優れたコードエディタを使用すると、大きなコードを簡単に記述して整理することができます。

私は使用してお勧めします メモ帳+ + (フリー・アンド・オープンソース)を使用しています。 あなたが好きなエディタがあります 崇高なテキスト, アトム 等々

あなたがする必要があるものは次のとおりです:

  1. コードエディタをインストールする
  2. それを開く
  3. 新しいファイルを作成する
  4. .htmlファイルとして保存する

あなたは行く準備ができている!


GO TOP

1-こんにちは!

次のコードをコピーして新しいHTMLファイルに貼り付け、保存します。 今すぐあなたのWebブラウザでそれを実行します。

コード:

<!DOCTYPE html> <html> <head> <title>最初のWebページ</title> </head> <body> <p> Hello World!</p> </body> </html>

出力:

おめでとうございます。 一番最初のHTMLファイルを作成しました。 この時点でそれを理解する必要はありません。 まもなくカバーします。

HTML構造の理解

すべてのHTMLファイルには、一般的な裸の構造があります。 これですべてが始まります。 そして、コードのすべての大きなページは、トリミング後にこの構造に来るでしょう。

それでは、「Hello World!」のコードから理解してみましょう。 以下の要素は、すべてのHTMLファイルに必須の部分です。

  • <!DOCTYPE html> =これはHTMLファイルであることをブラウザに宣言しています。 <html>タグの前に指定する必要があります。
  • <html> </ html> =これはHTMLファイルのルート要素です。 あなたが書いたものはすべて、<html>と</ html>の間に入ります。
  • <head> </ head> =これはブラウザのメタ情報部分です。 このタグの内部のコードには視覚的な出力はありません。
  • <body> </ body> =これはWebブラウザがレンダリングする部分です。 ウェブサイトに正確に表示されるのは、<body>と</ body>のコードのレンダリングです。


GO TOP

2- HTMLタグ

HTMLは何百もの異なるタグのコラボレーションです。 彼らはどのように動作するかを学ぶ必要があります。 また、彼らが正しい方法でそれらを使用していることを確認する必要があります。

HTMLタグには通常、開始タグと終了タグがあります。 開始タグには、より小さい(<)およびより大きい(>)記号で囲まれたキーワードがあります。 終了タグはすべて同じですが、より小さい(<)記号の後に余分なスラッシュ(/)があります。

(2a)ヘッドタグ

すべてのheadタグは<head>と</ head>の間にあります。 それらには、Webブラウザと検索エンジン用のメタ情報が含まれています。 基本的に視覚的な出力はありません。

<title> </ title>

タイトルタグは、ブラウザタブに表示されるウェブページのタイトルを定義します。 この情報は、Webプログラムや検索エンジンで使用されます。 HTMLファイルごとに最高のタイトルを1つ持つことができます。

コード:

<title>私の最初のウェブページ</ title>
タイトルタグはブラウザの上部に表示されます。

<link>

LinkタグはHTMLページを外部リソースにリンクします。 主な用途は、HTMLページとCSSスタイルシートをリンクすることです。 これは自己終了タグであり、終了は必要ありません</ link>。 ここで、relはファイルとの関係を表し、srcはソースとの関係を表します。

コード:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<meta>

メタは、HTMLファイルのメタ情報を提供する別の自己閉じタグです。 検索エンジンやその他のWebサービスは、これらの情報を使用します。 検索エンジン用にページを最適化する場合は、メタタグが必須です。

コード:

<meta name = "description" content = "これは検索エンジンが表示する短い説明です"

<script> </ script>

scriptタグは、サーバーサイドスクリプトのインクルードまたは外部スクリプトファイルへのリンクの作成に使用されます。 開始タグには2つの属性があります。 1つはタイプであり、もう1つはソース(src)です。

コード:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

Noscriptタグは、Webブラウザでスクリプトが無効になっているときに機能します。 それは彼らのウェブブラウザでスクリプトを許さない彼らと互換性のあるページを作ります。

コード:

<noscript> <p>悲しいかな! スクリプトは無効になっています。</ p> </ noscript>

(2b)ボディータグ

すべてのbodyタグは<body>と</ body>の間にあります。 彼らには視覚的な出力があります。 これが最も多くの作業が行われる場所です。 これらのタグを使用してメインページのコンテンツを構成する必要があります。

<h1> </ h1>〜<h6> </ h6>

これらは見出しタグです。 最も重要な見出しは<h1>でタグ付けされ、最も重要でない見出しは<h6>でタグ付けされます。 それらを正しい階層で使用する必要があります。

コード:

<h1>これはh1見出しです</h1> <h2>これはh2見出しです</h2> <h3>これはh3見出しです</h3> <h4>これはh4見出しです</hXXUMX> >これはh4の見出しです。</h5> <h5>これはh5の見出しです。</h6>

出力:

タグの書式設定

HTMLファイルのテキストは、多くの書式設定タグを使用して書式設定できます。 あなたのコンテンツから単語や行を強調表示する必要があります。

コード:

<p>さまざまな方法でテキストを強調表示できます。</p> <p> <strong>太字</strong>、<u>下線</u>、<em>イタリック</em>、<マークできます。 >マーク</mark>、<サブスクリプト</sub>、<sup>スーパースクリプト</sup>など!</p>

出力:

< - >

コメントタグを使用して、レンダリングからいくつかのコードを逸脱することができます。 コードはソースコードに表示されますが、レンダリングされません。 このタグの主な用途は、将来参照できるようにHTMLファイルのドキュメントを作成するためです。

例:

<! -  <p>このようにコードを囲んでコメントすることができます。</ p>  - >

(2c)その他の重要なHTMLタグ

<a> </a>

アンカーは、ほとんどどこでも使用されている貴重なタグです。 少なくとも1つのアンカーリンクがなければ、Webページはオンラインで表示されません。

構造は同じです。 それにはオープニング<a>とクローズパーツ</a>があります。 アンカーするテキストは、<a>と</a>の間に入ります。

ユーザーがクリックした後の場所と方法を定義する属性がいくつかあります。

  • ahref = "" =宛先リンクを定義します。 リンクは二重引用符で囲まれます。
  • target = "" =新しいブラウザタブまたは同じタブでURLを開くかどうかを定義します。 target = "_ blank"は新しいタブ用で、target = "_ self"は同じタブで開くためのものです。
  • rel = "" =現在のページとリンクされたページの関係を定義します。 リンク先のページが信頼できない場合は、rel =” nofollow”を定義できます。

コード:

<p> <a target="_blank" href="https://www.google.com/">ここをクリック</a>してGoogleにアクセスしてください。 新しいタブで開きます。</p> <p> <a target="_self" href="https://www.google.com/">ここをクリック</a>。 Googleにもアクセスできますが、現在のタブで開きます。</p>

出力:

<img />

イメージタグは、イメージベースの多くのWebサイトを想像することができない重要なタグです。

<img />は自己終了タグです。 </img>のような伝統的な終結は必要ありません。 正しく使用する前に知っておく必要がある属性がいくつかあります。

  • src = "" =これはイメージのソースリンクを定義するためのものです。 二重引用符の間にリンクを置きます。
  • alt = "" =代替テキストを表します。 画像が読み込まれていない場合、このテキストはユーザーに不足している画像に関するアイデアを提供します。
  • width = "" =画像の幅をピクセル単位で定義します。
  • 高さ= "" =画像の高さをピクセル単位で定義します。

例:

<p>これは8月のGoogleプレックス2014です。</p> <p>この画像の幅は500ピクセル、高さは375ピクセルです。</p> <img src = "https://upload.wikimedia。 org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" 8月のGoogle本社2014 "width =" 500 "height =" 375 "/>

出力:

ヒント:クリック可能な画像を挿入したいですか? 画像コードを<a>タグで囲みます。 それがどうなるか見てみましょう。

<ol> </ ol>または<ul> </ ul>

リストタグは、アイテムのリストを作成するためのものです。 <ol>は順序付きリスト(番号付きリスト)を表し、<ul>は順序なしリスト(箇条書きポイント)を表します。

<ol>または<ul>のリスト項目には<li> </ li>というタグが付けられています。 liはリストを表します。 親<ol>タグまたは<ul>タグの中に、必要な数だけ<li>を置くことができます。

コード:

<p>これは番号付きリストです。</p> <ol> <li>商品1 </li> <li>商品2 </li> <li>商品3 </li> </ol> <p>これは番号なしリストです。</p> <ul> <li>アイテム1 </li> <li>アイテム2 </li> <li>アイテム3 </li> </ul>

出力:

<table> </ table>

テーブルタグは、データテーブルを作成するためのタグです。 表のヘッダー、行および列を定義する内部レベルのタグがいくつかあります。

<table> </ table>は外側の親コードです。 このタグでは、<tr>は表の行を表し、<td>は表の列を表し、<th>は表のヘッダーを表します。

コード:

<table> <tr> <th>名前</th> <th>年齢</th> <th>職業</th> </tr> <tr> <td> Jo <td> 27 </td> < td>ビジネスマン</td> </tr> <tr> <td>キャロル</td> <td> 26 </td> <td>ナース</td> </tr> <tr> <td> Simone < / td> <td> 39 </td> <td>教授</td> </tr> </table>

出力:

注:最初の<tr>の中の値は見出しです。 そこで、太字のテキスト効果をテキストに適用する<th>を使用しました。

テーブルのグループ化

表のグループ化要素を使用して表の機能を拡張できます。 複数のページに分割された大きな表を作成する必要がある場合があります。

ヘッダー、本文、フッターにテーブルデータをグループ化すると、独立したスクロールが可能になります。 ヘッダーと本文部分は、テーブルがスパンしているすべてのページに印刷されます。

テーブルのグループ化タグは次のとおりです。

  • <thead> </ thead> =表の見出しを折り返します。 これは、テーブルのすべての分割ページに印刷します。
  • <tbody> </ tbody> =テーブルのメインデータを折り返すため。 あなたは必要なだけ多くの<tbody>を持つことができます。 タグは、データの別個のグループを意味する。
  • <tfoot> </ tfoot> =表のフッター情報を折り返すため。 これは、テーブルのすべての分割ページに印刷します。

グループ化は必須ではありません。 より大きなテーブルを読みやすくするために使用することができます。 一部の特別な開発者は、CSSセレクタとしてこれらのタグを著しく使用しています。

ここでは、例示したテーブルを<thead>、<tbody>、<tfoot>にグループ化する方法を示します。

コード:

<table> <thead> <tr> <th>名前</th> <th>年齢</th> <th>職業</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> 27 </td> <td>ビジネスマン</td> </tr> <tr> <td> Carol </td> <td> 26 </td> <td>看護師</ td> </tr> <tr> <td> Simone </td> <td> 39 </td> <td>教授</td> </tr> </tbody> <tfoot> <tr> <td>総人数:</td> <td> 3 </td> </tr> </tfoot> </table>

出力:

<form> </ form>

フォーム要素は、Webページ用のインタラクティブフォームを作成するために使用されます。 HTMLフォームには、いくつかの連続する要素が含まれています。 たとえば、<label>、<input>、<textarea>などです。

フォーム内のアクション属性は非常に重要です。 これは、情報を処理するためのサーバー側またはサードパーティのページを指します。 処理のために、まずメソッドを定義する必要があります。

getまたはpostの2つの方法のいずれかを使用できます。 Getは、Postがメッセージ本文に情報を送信するURL形式ですべての情報を送信します。

フォームには多くのタイプの入力があります。 非常に基本的な入力タイプはテキストです。 <input type = "text">と書かれています。 タイプは、ラジオ、チェックボックス、電子メールなどであってもよい。 送信ボタンを作成するには、下部に送信タイプの入力が必要です。

<label>タグは、ラベルを作成して入力に関連付けるために使用されます。 ラベルを入力と関連付けるルールは、入力のlabel属性とid属性のfor = ""属性で同じ値を持つルールです。

コード:

<form action = "#"> <label for = "firstname">名:</label> <input type = "テキスト" id = "firstname"> <br> <label for = "lastname">姓: </label> <input type = "テキスト" id = "姓"> <br> <label for = "bio">短い説明:</label> <textarea id = "bio"行= "10" cols = " 30 "placeholder ="ここにあなたの略歴を入力してください... "> </textarea> <br> <label>性別:</label> <br> <label for =" male ">男性</label> <input type = "radio" name = "性別" id = "male"> <br> <label for = "female">女性</label> <input type = "radio" name = "性別" id = "female"> <br > <input type = "送信" value = "送信"> <フォーム>

出力:

注:私は情報を処理するためにどのサーバーにも接続されていないため、アクションをnull値に設定しました。


GO TOP

3- HTML属性

属性は、HTMLタグの修飾子の1つです。 HTMLタグに新しい設定を追加します。

属性はattributename = ""のように見え、開始HTMLタグに座っています。 属性の値は二重引用符で囲まれます。

id = ""およびclass = ""

idとclassはHTMLタグの識別子です。 識別子を使用して異なるHTML要素に異なる名前が指定されます。 複数の要素に1つのクラス識別子を使用できます。 しかし、複数の要素に対して1つのID識別子を使用することはできません。

コード:

<h1 class = "heading">これは主要なタイトルです。</ h1>

href = ""

hrefはHypertext Referenceの略です。 ユーザーは参照リンクを指し示します。 アンカータグ<a>はhrefを使用してユーザーをリンク先URLに送信します。

コード:

<a href="https://www.google.com/"> Google </a>

src = ""

srcはsourceを表します。 これは、HTMLファイルで使用しているメディアまたはリソースのソースを定義します。 ソースは、ローカルURLまたは第三者URLのいずれかです。

コード:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

altは代替の略です。 これは、HTML要素を読み込めない場合に使用されるバックアップテキストです。

コード:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Googleの本社" />

style = ""

スタイル属性はHTMLタグでよく使用されます。 それは、HTMLタグ内のCSSの仕事をします。 スタイルのプロパティは二重引用符で囲みます。

コード:

<h2 style = "color:red">これは別のタイトルです</ h2>


GO TOP

4-コード表示:ブロック対インライン

いくつかの要素は常に新しい行から始まり、利用可能な幅全体を使います。 これらは「ブロック」要素です。

例:<div>、<p>、<h1> - <h6>、フォームなど

いくつかの要素は必要なスペースだけを取り、新しい行から始めません。 これらは「インライン」要素です。

例:<a>、<span>、<br>、<strong>、<img>など

CSSスタイルを使用するときは、ブロック要素をインラインから区別する必要があります。 このHTMLガイドでは、それほど必要ではありません。

コード:

<!DOCTYPE html> <html> <head> <title>最初のWebページ</title> </head> <body> <h2>これはH2見出しです。 ブロック表示です。</h2> <h2>これは<u>他の</u> H2の見出しです。 ここでは下線タグにインライン表示があります。</h2> </body> </html>

出力:


GO TOP

5-二重引用符とHTMLの一重引用符

この質問は非常に明白です。 HTMLで何を使うべきですか? 一重引用符または二重引用符? 人々は両方を使うように見えますがどちらが正しいですか?

HTMLでは、一重引用符と二重引用符は同じです。 出力に違いはありません。

あなたは好きな人を使うことができます。 しかし、コードのページで両方を混ぜることは、悪い習慣とみなされます。 あなたはそれらのいずれかと一貫しているべきです。


GO TOP

6-セマンティックHTMLと非セマンティックHTML

セマンティックHTMLはHTMLの最新バージョンであり、HTML5とも呼ばれます。 それは、非セマンティックHTMLとXHTMLの開発版です。

HTML5はなぜ優れていますか? 以前のバージョンでは、HTML要素はID /クラス名で識別されていました。 たとえば、<div id = "article"> </ div>は記事と見なされました。

HTML5では、<article> </ article>タグは、ID /クラス識別子を必要とせずに記事として表現します。

HTML5のために、検索エンジンや他のWebアプリケーションがWebページをよりよく理解できるようになりました。 セマンティックウェブサイトはSEOの方が優れていることが証明されています。

以下は、人気のあるHTML5タグのリストです:

  • <メイン> </メイン> =これは、視聴者に見せたい主なコンテンツをラップするためのものです。
  • <header> </ header> =これは、タイトルや著者のメタなどのコンテンツのヘッダー部分をマークアップするためのものです。
  • <記事> </記事> =視聴者にユーザー定義のコンテンツまたは独立したコンテンツを指定します。
  • <section> </ section> =ヘッダー、フッター、サイドバーなどのコードをグループ化できます。 あなたは言うことができる、それはdivの意味形式です。
  • <footer> </ footer> =これは、フッターの内容、免責事項または著作権のテキストが属する場所です。
  • <audio> </ audio> =プラグインに問題がなくオーディオファイルを挿入することができます。
  • <video> </ video> = <audio>のように、このタグを使ってプラグインに問題のないビデオを挿入することができます。

単純なHTML5構造体は次のようになります。

<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title>最初のWebページ</title> </head> <body> <header> <nav> <ul> < li>メニュー1 </li> <li>メニュー2 </li> </ul> </nav> </header> <main> <article> <header> <h2>これは記事のタイトルです</ h2> <p> John Doeによる投稿</p> </header> <p>記事の内容はこちら</p> </article> </main> <footer> <p> Copyright 2017 John Doe </ p> </footer> </body> </html>


GO TOP

7- HTML検証

ほとんどのWebプロフェッショナルは、コードの完成後にコードを検証します。 コードが正常に動作しているときに、そのコードを検証する必要があるのはなぜですか?

コードを検証する理由は2つあります。

  1. これは、クロスブラウザとクロスプラットフォームに対応したコードを作成するのに役立ちます。 現在のブラウザではコードが表示されない場合がありますが、別のブラウザでエラーが発生する可能性があります。 コードの検証によって修正されます。
  2. エラーがある場合、検索エンジンや他のWebプログラムはあなたのページのクロールを停止するかもしれません。 検証を通じて、大きなエラーがないことを確認できます。

W3Cバリ コード検証のための最も一般的なサービスです。 彼らはコードを検証するいくつかの方法を持っています。 ファイルをアップロードするか、コードを検証エンジンに直接入力することができます。


GO TOP

8-その他の参考資料

HTMLは常に学習のトピックです。 より多くの更新版のHTMLがより早く提供される可能性があります。 だからあなたは更新して練習を続けなければなりません。 練習はHTMLのエースです。

以下はあなたに役立つリソースです: