ダミーのための基本的なHTMLガイド

HTMLは、今日のインターネットのバックボーンです。 何百万ものウェブサイトが一緒にインターネットを形成しました。 ここで、HTMLはこれらすべてのWebサイトの構成要素です。 XNUMX年前、あなたが単なる趣味のブロガーであったとしても、あなたはいくつかのウェブを知らなければなりませんでした コー​​ディング 自分自身を保護したり、サイトに簡単な機能を追加したりするためです。 しかし、現在では、HTML の基本を知っている必要がなくなるほど多くのエディターやプラグインが利用できるようになりました。

The problem with this is that if you don't know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem.これに伴う問題は、いくつかの基本を知らないと、ブログで実際の問題に簡単に陥り、小さな問題を修正するために高価な開発者を雇わなければならないことです。 Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.それだけでなく、カスタムテキストウィジェットの追加など、ブログに変更を加えるには、少しの知識が必要です。

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

初心者に優しいウェブホスティング

初心者の方はお勧めです ホスティングプロバイダ それは手頃な価格で、簡単に始めることができます。 アカウントの即時アクティベーション、使いやすいコントロールパネル、包括的なユーザーガイド、およびいつでもすぐに利用できる役立つテクニカルサポートが重要な要件です。

始める前に–HTMLの基本

HTMLとは

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

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

なぜHTMLが必要なのですか？

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

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

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

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

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

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

コードエディタが必要です。 優れたコードエディタを使用すると、大きなコードを簡単に記述して整理できます。 私が使用し、お勧めします メモ帳+ + （フリー・アンド・オープンソース）を使用しています。 あなたが好きなエディタがあります サブライムテキスト, アトム 等々

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

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

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

また読む

• ウェブサイトを作成するための20以上のサイトビルダープラットフォーム
• 検討するのに最適なHTMLエディター

1. Hello World！

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

HTMLのコード

私の最初のウェブページ"こんにちは世界"

出力：

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

HTML構造の理解

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

それでは、「HelloWorld！」からそれを理解してみましょう。 コード。 次の要素は、すべてのHTMLファイルの必須部分です。

• =これはHTMLファイルであるというブラウザへの宣言です。 前に指定する必要があります鬼ごっこ。
• =これはHTMLファイルのルート要素です。 あなたが書くすべてはの間を行きますそして。
• =これはブラウザのメタ情報部分です。 このタグの内部のコードには視覚的な出力はありません。
• =これはWebブラウザがレンダリングする部分です。 あなたがウェブサイトで正確に見るのは、間のコードのレンダリングですそして。

2.HTMLタグ

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

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

ヘッドタグ

すべてのヘッドタグはそして。 これらには、Webブラウザと検索エンジンのメタ情報が含まれています。 基本的に視覚的な出力はありません。

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

コード：

私の最初のウェブページ

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

コード：

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

コード：

<meta name="description" content="This is the short description that search engines show"

スクリプトタグは、 サーバ側 スクリプトまたは外部スクリプトファイルへのリンクを作成します。 開始タグにはXNUMXつの属性を含めることができます。 XNUMXつはタイプで、もうXNUMXつはソース（src）です。

コード：

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

コード：

ああ！ スクリプトは無効になっています。

ボディタグ

すべてのbodyタグはそして。 それらは視覚的な出力を持っています。 これは、ほとんどの作業が行われる場所です。 メインページのコンテンツを構成するには、これらのタグを使用する必要があります。

に

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

コード：

これはh1の見出しですこれはh1の見出しですこれはh1の見出しですこれはh2の見出しですこれはh2の見出しですこれはh2の見出しです

出力：

タグの書式設定

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

コード：

テキストはさまざまな方法で強調表示できます。 太字、下線、斜体、 マーク、下付き文字、上付き文字など！

出力：

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

例：

You can comment out any code by surrounding them in this way -->

その他の重要なHTMLタグ

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

構造は同じです。 開閉部があります。 アンカーするテキストはとの間を行き来します。

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

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

コード：

Googleにアクセスするには、ここをクリックしてください。 新しいタブで開きます。 ここをクリックしてください。 また、Googleに移動しますが、現在のタブで開きます。

出力：

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

自己閉鎖タグです。 それはのような伝統的なクロージングを必要としません。 正しく使用する前に知っておく必要のある属性がいくつかあります。

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

これは2014年500月のグーグルプレックスです。 この画像の幅は375ピクセル、高さは0ピクセルです。

出力：

ヒント：クリック可能な画像を挿入したいですか？ 画像コードをタグでラップします。 それがどうなるか見てください。

または

リストタグは、アイテムのリストを作成するためのものです。 順序付きリスト（番号付きリスト）の略で、 順序付けられていないリスト（箇条書き）を表します。

内のリストアイテムまたはでタグ付けされています。 liはリストの略です。 あなたは多くを持つことができますあなたが親の中で望むようにまたは鬼ごっこ。

コード：

これは順序付きリストです： アイテム1 アイテム2 アイテム3 これは順序付けられていないリストです。 アイテム1 アイテム2 アイテム3

出力：

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

外側の親コードです。 このタグでは、 テーブル行の略で、 テーブル列を表し、 テーブルヘッダーを表します。

コード：

名前年齢職業ジョー27 ビジネスマンキャロル26 ナースシモーネ39 教授

出力：

注：最初の値の内側見出しです。 だから、私たちは使用しましたこれは、太字のテキスト効果をテキストに適用します。

テーブルのグループ化

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

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

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

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

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

例示したテーブルをグループ化する方法は次のとおりです。 、 そして：

コード：

名前年齢職業ジョン27 ビジネスマンキャロル26 ナースシモーネ39 教授総人数： 3

出力：

フォーム要素は、Webページのインタラクティブフォームを作成するために使用されます。 HTMLフォームには、いくつかの連続した要素が含まれています。 例： 、 、 等

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

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

フォームの入力には多くの種類があります。 非常に基本的な入力タイプはテキストです。 それは次のように書かれています。 タイプには、ラジオ、チェックボックス、電子メールなどもあります。 送信ボタンを作成するための送信タイプの入力が下部にあるはずです。

タグは、ラベルを作成し、それらを入力に関連付けるために使用されます。 ラベルを入力に関連付ける規則は、labelのfor =””属性とinputのid =””属性で同じ値を持つことです。

コード：

ファーストネーム： 苗字： ショートバイオ： 性別： 男性女性

出力：

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

3.HTML属性

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

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

id =””およびclass =””

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

コード：

これがメインタイトルです

href =””

hrefはハイパーテキストリファレンスの略です。 それらはユーザーに参照リンクを示します。 アンカータグはhrefを使用して、ユーザーをリンク先URLに送信します。

コード：

グーグル

src =””

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

コード：

alt =””

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

コード：

style =””

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

コード：

これは別のタイトルです

4.コード表示：ブロックvsインライン

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

例： 、 、 - 、フォームなど。

一部の要素は必要なスペースのみを使用し、新しい行から開始しません。 これらは「インライン」要素です。

例： 、、 、、 等

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

コード：

私の最初のウェブページこれはH2の見出しです。 ブロック表示です。 これは別のH2見出しです。 ここでは、下線タグにインライン表示があります。

出力：

5.HTMLでの二重引用符と一重引用符

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

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

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

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

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

HTML5が優れているのはなぜですか？ 以前のバージョンでは、HTML要素はID /クラス名で識別されていました。 例えば： 記事と見なされました。

HTML5では、 タグは、ID /クラス識別子を必要とせずに記事としてそれ自体を表します。

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

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

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

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

私の最初のウェブページメニュー8 メニュー1 これが記事のタイトルですJohnDoeによる投稿記事の内容はこちらCopyright 2 John Doe

7.HTML検証

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

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

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

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

8.その他の役立つリソース

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

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

• W3SchoolsHTMLチュートリアル
• チュートリアルポイント eBook
• Code AcademyHTMLガイド
• コードバースト[HTML]ウェブサイトを作ろう
• MozilaのHTMLチートシート

続きを読む

• リセラーのウェブホスティングプランの説明
• Webホスティングの顧客のオンボーディングプロセス