役に立つヒント

HTMLページを作成する

Pin
Send
Share
Send
Send


「HTMLページの作成方法」レッスンでは、最も単純なWebページのレイアウトに焦点を当てます。 HTMLファイルを正しく保存する方法、ブラウザでHTMLページを正しく表示するために必要なエンコードを設定する方法、およびWebページにテキスト、リスト、画像を配置する方法を学習します。

このレッスンを学習した後、図1のように、最初のWebページを作成する方法を既に学習しています。

レッスン1.単純なHTMLページを作成する方法

一般的に、私は基礎研究の時間を評価します html 2〜8時間のように、残りはオプションです。もちろん、学習時間は関心に依存します。数日間、20〜30分に分割することをお勧めします。

準備はいいですかそれでは行きましょう!


HTMLページを作成するためにインターネット接続は必要ありません。

必要になります

1) 選ぶ テキストエディター。はじめて十分 メモ帳(メモ帳) (その中にはチームだけが必要です 名前を付けて保存)

すぐに専用のテキストエディターでプログラミングを開始する場合は、次のことに注意してください。
1)のために
メモ帳++ (ダウンロードまたはこちら)
タイプ (ダウンロード)

従来のテキストエディタとの違いは、自動的にインデントされることです!別のエンコーディングでファイルを再保存することを可能にします(将来、このファイルに遭遇することに注意してください)。レッスンの下部にあるコードなど、さまざまな色のカラータグ。通常のエディターでは、同じ色になります。

2) たとえば、インターネットブラウザ インターネットエクスプローラー 窓用または サファリ Mac OS XおよびiOS用。はい、できます Mozilla, Google Chrome, オペラ, ヤンデックス そして 郵便 ブラウザなど。

HTMLページを作成しましょう

1) デスクトップにフォルダーを作成します html 。これは、レッスンが構造化され、1つの場所に含まれるようにするために行います。

2)作成する たとえば、メモ帳(NotePad)などのテキストエディターでファイルを作成します。次へ 名前を付けて保存.

エンコーディングはUTF-8を選択してから選択することをお勧めします すべてのファイルタイプ そして、末尾に.htmlが付いたファイルの名前を選択します。例えば index.html

保存するディレクトリ(フォルダ)として選択します html
プッシュ 保存する。できた!

しばしば質問をする ファイル拡張子が表示されない。順番に取りましょう

ファイル名拡張子 -ファイル名に追加され、ファイルのタイプ(形式)を識別するための一連の文字。簡単に言うと、これは.txt .doc .exe .jpgなどで、ファイル名の末尾にあります

ファイル拡張子を表示する機能は、ファイルの種類を正確に判断するのに役立ち、手動で(コマンドを使用して) 改名)拡張子だけでなく、ファイルの種類(txtからhtmlなど)も変更します

次のようにはなりません。 写真、テキスト文書、ゲーム
次のようになります。 photo.jpg、テキストdocument.txt、game.exe

ただし、最初のバージョンと同じようにファイル名が残っている場合(たとえば、ファイル名の末尾にある.txt、jpg、.exeなど)、次の手順を実行します。

ファイルとフォルダーの設定を確認します。

のために 勝利XP 任意のフォルダーを開く-ツール(上部パネル)-フォルダーのプロパティ-表示-登録済みファイルの拡張子を非表示(チェックを外す)-適用

のために 7勝 任意のフォルダを開く-アレンジ-ファイルおよび検索オプション-表示-登録済みファイルタイプの拡張子を非表示(チェック解除)-適用

のために Mac OS デスクトップをクリックします-ファインダー-設定(詳細)-詳細-すべてのファイル拡張子を表示(拡張子を適用)のチェックボックスを選択します

3) 以下に示すコード全体を(コメントとともに)挿入します。

4) ファイルを開きます。別のブラウザを選択してこのファイルを開くことができます。そのためには、ファイルを右クリックします index.html - で開く リストからブラウザ、たとえばInternet Explorer、Google Chrome、Mozilla、Yandex Browserなどを選択します。

その結果、結果のインターネットブラウザを開く index.html 、この種のページが表示されるはずです。


図1

図1 その結果、ブラウザがページをどのように表示したかがわかります。次の要素のテキストは赤で強調表示されています。

以下に示すコードでは、htmlドキュメントの基本的な最小値を確認できます。それを学習し、場所の開始タグと終了タグを混同しないようにする必要があります。


タグ付け ドキュメントのヘッドを強調表示します。ページの要素(名前、キーワード、作成者など)を処理する際に主にブラウザの助けに関連する要素を規定します。その内容については後で説明します。

タグ付け タイトル ページ名の略です。これは、に含まれる唯一のタグです ページに表示されます。開始後、終了タグの前に入力する内容は、インターネット上のページのタイトルになります

例のタグの左側のインデントはすべてオプションです。これらは説明のために作成されているため、タグのペアが表示されます。

タグ付け ページの本文を示します。開始タグと終了タグの後に入力するもの ページのコンテンツになります


HTMLのほぼすべてのタグ 開閉 (例外、たとえば、イメージの挿入を示すimgタグ)。


繰り返しますが、私は書くことを忘れないことが重要であることを思い出します 終了タグ 他のすべてのタイプのタグの場合、ブラウザは、この要素またはその要素を終了したい場所を正確に理解しません。以下の通り:


太字という単語の後、終了タグbを意図的に忘れました。その結果、ブラウザは次を表示しました

テキストを強調したい 大胆で、これはすでに 斜体で

ご覧のとおり、テキストは最後まで太字で強調表示され、斜体で示されたものは太字および斜体になります。だから注意してください!

5) ファイル内の何かを編集する場合 index.html (そして、ブラウザでのみデフォルトで開かれるようになりました)、ファイル上でマウスの右ボタンをクリックします index.html -選択してください で開く リストからテキストエディターを選択すると、 メモ帳(英語のメモ帳)、またはインストールした別のテキストエディター。

原則として、基本を説明しました。 htmlページは非常にシンプルに見えますが、次のレッスンでは、これらの要素やその他の要素とその目的について詳しく説明します-画像を挿入し、リンクを作成し、その他多くの興味深いことを行います)

最初のHTMLページ(Webページ)を作成する

レッスン番号2
最初のウェブページを作成する

インターネット上のサイトは、通常の本が紙のページで構成されているように、HTMLページで構成されていますが、本のページとは異なり、HTMLページはバインドではなくリンクによって接続されています。しましょう 最初のHTMLページを作成します.

するために ウェブサイトを作る、最初にHTMLページを作成する必要があります。複数のHTMLページを作成し、リンクを使用してリンクすることにより、サイトを取得します。

HTMLページは次を使用して作成されます HTML言語、およびこの言語のコードはテキストエディター、たとえばWindowsの通常のメモ帳で作成されます。メモ帳を開き、そこにHTMLコードを入力し、結果のドキュメントを.html拡張子のファイルに保存することにより、ブラウザーを使用して表示できるHTMLファイルを取得します。

次のようにWindowsでメモ帳を開くことができます。

スタート-すべてのプログラム

メモ帳で、次のコードを入力します。

または、単にコピーしてメモ帳に貼り付けます。

次に、結果のドキュメントを、名前インデックスと拡張子.htmlを持つファイルとしてデスクトップに保存します

これを行うには、ボタンをクリックします。
ファイル-名前を付けて保存...

表示されるウィンドウで、[デスクトップ]を選択し、ファイル名にindex.htmlを記述して、ボタンをクリックします。
保存する

これで、デスクトップに保存したindex.htmlファイルをブラウザーで開き、結果のHTMLページを見ることができます。これを行うには、index.htmlファイルを右クリックして、使用しているブラウザーから選択します。通常、FireFoxブラウザーを使用します。
Open With-FireFox

FireFoxブラウザーがコンピューターにインストールされていない場合は、他のブラウザー、たとえばOpera、Google Chrome、Internet Explorer、Safariでindex.htmlファイルを開くことができます。

FireFoxブラウザーで開かれたIndex.htmlファイル:

これについては、最初のレッスン HTMLチュートリアル終わった。次のレッスンでは、HTMLコードを詳細に調べ、HTMLコードがどの部分で構成されているかを調べます。

3.画像を挿入する

「HTMLページの作成方法」の記事では、Webページに画像を配置する方法について説明します。

画像を挿入するには、タグを使用します . このタグに必要なのは属性です src (英語SouRCe-ソースから)。画像ファイルへのパスを定義し、その画像をWebページに表示する必要があります。

画像を挿入するには、次のコマンドを使用します

alt属性は、欠落した画像の代わりに無効な画像モードでWebページを表示するときに、alt属性に登録されている碑文があるようにするために必要です。また、常に代替テキストを使用することをお勧めします。検索エンジンは、画像を検索するときにそれらをキーワードとして分析します。

画像ファイルは次の形式にすることができます jpg、gif、pngおよび常にカラーモデルRGB.

練習6

1.家のエリアのリストの後に、コテージプロジェクトの画像をWebページに挿入します プロジェクト_1.jpg そして プロジェクト_2.jpg フォルダーから Cd / html_css_1。これを行うには、最初にこれらの2つの画像をmain.htmlファイルがあるフォルダーにコピーします。画像を挿入するためのコードは次のようになります(図18)。

2.結果をブラウザーで表示します(図19)。

基本的にタグを使用する原則HTML理解する必要があります。それらは同じ原則に従って使用されます。タグがコンテナである場合、つまり開始タグと終了タグです。タグが単一の場合、終了タグはありません。この場合、たとえば、右山括弧が終了山括弧の前に書き込まれます。タグがコンテナであるか単一であるかは、常に仕様で確認できます「要素」セクションのhtml401_ru.chm

4.サイト内のアドレス指定

最初のレッスン「HTMLページの作成方法」では、HTMLでのアドレス指定の概念について説明します。

サイトの異なるフォルダに配置できる画像をHTMLファイルに配置する必要がある場合のアドレス指定オプションについて考えてみましょう。

アドレッシングには2つのタイプがあります。

絶対アドレス指定 (コンピューターのドライブ名を使用) 未使用 (図20)

使用されている 相対アドレス指定 -1つのサーバー上のドキュメントまたはドキュメントセット内のアドレス指定。サイト内のファイルを参照するには、目的のファイルに到達するためにブラウザーがたどるパスを指定する必要があります。

画像は、HTMLドキュメントと同じフォルダーにあります(図21)。つまり、画像とHTMLファイルはファイルシステム内で同じレベルにあり、HTMLドキュメントはすぐに画像を添付できます。この場合、画像をWebページに挿入すると次のようになります。

実用的なタスク7

サンプル1を実装します(フォルダー、doc.htmlファイルを作成し、任意の画像を取得します)。画像はdoc.html Webページに挿入する必要があります。

画像 写真.jpg フォルダーにあります フォルダー_1。 HTMLドキュメントは、folder_1フォルダーの外部にあります。つまりサイトのファイルシステムでは、HTMLドキュメントは画像より1レベル高くなっています(図22)。フォルダfolder_1を入力してから、画像を添付する必要があります

実用的なタスク8

例2を実装します(フォルダー、doc.htmlファイルを作成し、任意の画像を取得します)。画像はdoc.html Webページに挿入する必要があります。

画像 写真.jpg フォルダーにあります フォルダー_1、フォルダ内にあります フォルダー_2。 HTMLドキュメントはこれらのフォルダーの外側にあります(図23)。したがって、HTMLドキュメントは画像より2レベル上に配置されます。必要です:

  • フォルダfolder_2を入力し、
  • 次に、フォルダーfolder_1を入力します。
  • その後、画像を添付します。

実用的なタスク9

実装例3(フォルダーの作成、doc.htmlファイル、任意の画像の取得)。画像はdoc.html Webページに挿入する必要があります。

HTMLドキュメントはフォルダーにあります フォルダー_1。画像はfolder_1フォルダー外にあります。つまりHTMLドキュメントは画像より1レベル下です(図24)。フォルダfolder_1を終了してから、画像を添付する必要があります。フォルダーを終了すると、構造によって示されます ../ (2つのポイントと右へのスラッシュ)。

実用的なタスク10

例4を実装します(フォルダー、doc.htmlファイルを作成し、任意の画像を取得します)。画像はdoc.html Webページに挿入する必要があります。

HTMLドキュメントはフォルダーにあります フォルダー_1、フォルダ内にあります フォルダー_2。画像はこれらのフォルダー外にあります。したがって、HTMLドキュメントは画像より2レベル下に配置されます(図25)。必要です:

  • フォルダfolder_1を終了し、
  • フォルダfolder_2を終了し、
  • 画像を添付します。

あなたは二度外出する必要があるので、デザイン ../ 2回繰り返した。

練習11

実装例5(フォルダーの作成、doc.htmlファイル、任意の画像の取得)。画像はdoc.html Webページに挿入する必要があります。

  • フォルダfolder_1を終了し、
  • フォルダfolder_2を終了し、
  • folder_3フォルダーに移動し、
  • フォルダfolder_4に移動し、
  • pic.jpg画像を添付

練習12

実装例6(フォルダーの作成、doc.htmlファイル、任意の画像の取得)。画像

doc.html Webページに挿入する必要があります。

  • フォルダfolder_1を終了し、
  • フォルダfolder_2を終了し、
  • フォルダfolder_3を終了し、
  • フォルダfolder_4を入力し、
  • pic.jpg画像を添付してください。

3回終了する必要があるため、デザイン ../ 3回繰り返した。

練習13

実装例7(フォルダーの作成、doc.htmlファイル、任意の画像の取得)。画像

doc.html Webページに挿入する必要があります。

したがって、何回終了する必要があるか、.. /コンストラクトを何回置くか、そして入った場合は、パスで遭遇したフォルダーの名前をリストします。

練習14

1. htmlドキュメントを作成し、画像を貼り付けて、画像パスが次のようになるようにします。

2. HTMLドキュメントに画像を挿入する独自の例を開発して、次の内容を含むようにします。 出る フォルダーから 入り口 フォルダーに。この例は、上記のすべての例と異なる必要があります。

このトピックの結果として、次のファイルを作成しておく必要があります。

Pin
Send
Share
Send
Send