メインページの準備ができたhtmlコード。 メモ帳でのHTMLページの作成:ダミーの説明

ここで、このページを作成するために使用したタグについて少し説明します。

例からのhtmlタグの説明

1. -これらのタグは、すべてのWebページに存在する必要があります。 彼らはこれがhtmlページであることをブラウザと検索エンジンに伝えます。

すべてのhtmlページの構造は次のとおりです。

... ヘッダータグ ... ...ページの本文..。

2. -ページのすべての表示コンテンツは、これらのタグで囲まれています。

4. -これらのタグの間にページタイトルが書き込まれ、ブラウザの最上部に表示されます。 ちなみに、検索エンジンで何かを検索すると、最初に表示されるのはページの名前です。 鬼ごっこ 多くの場合、「タイトル」と省略されます。 記事を読むことをお勧めします:タグの作成方法 </p> <p>それでは、htmlページの本文(内部)にあるタグに移りましょう。 <body>と</body> ).</p> <p>5. <center></center>-これらのタグは、内部のすべてを中央に揃えます。 この場合、中央が画面の中央になります。 今後、これらのタグを使用しないことをお勧めします。</p> <p>6. <h1></h1>見出しタグのクラスの1つです <h1>..<h6>、通常、ページのタイトルはその中に囲まれています。 たとえば、このページには「htmlページの作成例」という見出しタグがあります。</p>ノート <p>これらのタグはサイトのランキングで大きな重みを持っているため、慎重かつ賢明に使用する必要があります。</p> <p>htmlコードを作成するときは、単純なルールに従う必要があります。見出しタグを最初に配置する必要があります。 <h1>、そして彼らはすでに行くことができます <h2> , <h3>NS。 主なことは、最初のものがないということです <h2>、 後 <h1>、 後 <h3>NS。 厳密な階層が必要です。 ヘッダー <h2> , <h3>NS。 多分たくさん。</p> <p>7. <br/>は単一のタグであり、終了タグは必要ありません。 次の行に移動します。 私の例では、次の行に2回移動するために、2つの単一タグを続けて記述しました。</p> <p>8. <span><img src='https://i0.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span>画像を表示する単一のタグです。</p> <ul><li>srcは必須パラメーターであり、画像アドレスを指定します(IMAGE_URLの代わりに、画像が保存されているアドレスを書き込む必要があります)。 <br><u>ノート</u>: <ul><li>画像がhtmlページと同じフォルダにある場合は、画像の名前を書き込むだけで十分です。それ以外の場合は、絶対URLまたは相対URLのいずれかを書き込む必要があります。</li> <li>画像拡張子を含めることを忘れないでください。 たとえば、.jpg、.gif、.jpegです。</li> </ul></li> <li>altまたはtitle-これらのパラメータで、画像の説明を書くことができます。 画像にカーソルを合わせると、この説明が表示されます。 これらのパラメータは、特に画像検索において、ウェブサイトのプロモーションにとって重要です。 画像を読み込めなかった場合は、このテキストが表示されます。これもプラスです。</li> </ul><p>9. <font></font>-これらのタグは、フォント、背景、サイズなどを変更するために作成されます。 つまり、テキストの書式設定に関連するすべてのものを1つのタグで構成できます。 このタグにはかなりの数の属性がありますが、これについては別のチュートリアルで説明します。</p> <p>注:-同様のタグ。</p> <p>これらすべてのパラメータを設定できるCSSフォントプロパティもあります。</p> <p>10.-太字で強調表示します。 その間のすべて <b>と</b>太字で強調表示されます。 たとえば、コンテンツの最初に書き込み、最後に閉じると、ページ上のすべてのテキストが太字で強調表示されます。 これはかなり一般的なタグであり、その類似物は <strong></strong> .</p> <p>検索エンジンは、キーワードの影響を増幅するという観点から、このタグに注意を払っています。 ただし、キーワードを太字で強調表示するたびにスパムとして認識されるため、注意が必要です。</p> <p>Webページを開くと、サイトのタイプとフォーカスに応じて変化しない一般的な要素が含まれています。 例4.1は、基本的なタグを含む単純なドキュメントのコードを示しています。</p> <p>例4.1。 Webページのソースコード</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプルWebページ

見出し

第一段落。

2番目の段落。

この例の内容をコピーして、example41.htmlとしてc:\ www \フォルダーに保存します。 その後、ブラウザを起動し、メニュー項目からファイルを開きます [ファイル]> [ファイルを開く](Ctrl + O)..。 [ドキュメントの選択]ダイアログボックスで、ファイルexample41.htmlを指定します。 ブラウザは図に示すウェブページを開きます。 4.1。

米。 4.1。 実行結果の例

エレメント現在のドキュメントのタイプ(DTD(ドキュメントタイプ定義、ドキュメントタイプの説明))を示すことを目的としています。 HTMLにはいくつかのバージョンがあり、HTMLに似ていますが構文が異なるXHTML(EXtensible HyperText Markup Language)もあるため、これはブラウザが現在のWebページの解釈方法を理解するために必要です。 ブラウザが「混乱」せず、Webページを表示する標準に従って理解し、コードの最初の行に設定する必要があるようにするため .

いくつかのタイプがあります、ターゲットとするHTMLのバージョンによって異なります。 テーブル 4.1。 主な種類のドキュメントとその説明が記載されています。

タブ。 4.1。 有効なDTD
DOCTYPE 説明
HTML 4.01
厳密なHTML構文。
移行HTML構文。
フレームはHTMLドキュメントで使用されます。
HTML 5
このバージョンのHTMLにはDoctypeが1つだけあります。
XHTML 1.0
厳密なXHTML構文。
移行XHTML構文。
ドキュメントはXHTMLで記述されており、フレームが含まれています。
XHTML 1.1
XHTML 1.1の開発者は、HTMLが徐々に置き換えられることを期待しています。 ご覧のとおり、構文は同じであり、明確な規則に従っているため、この定義には型への分割はありません。

厳密なドキュメント記述と一時的なドキュメント記述の違いは、ドキュメントコードを記述するための異なるアプローチです。 厳密なHTMLは、HTML仕様に厳密に準拠する必要があり、容赦がありません。 トランジショナルHTMLは、コードのいくつかの欠陥についてより「緩和」されているため、特定の場合にはこのタイプが推奨されます。

たとえば、厳密なHTMLおよびXHTMLでは、タグ トランジショナルHTMLでは省略または省略できます。 同時に、構文に一致するかどうかに関係なく、ブラウザはどのような場合でもドキュメントを表示することを忘れないでください。 このような検証はバリデーターを使用して実行され、主に開発者がドキュメントのエラーを追跡することを目的としています。</p> <p>以下では、主にstrictを使用します<!DOCTYPE>、 特に指定しない限り。 これにより、よくある間違いを回避し、構文的に正しいコードを作成する方法を学ぶことができます。</p> <p>多くの場合、使用せずにHTMLコードに出くわすことができます<!DOCTYPE>、このような場合でもWebページは表示されます。 ただし、使用時に同じドキュメントがブラウザで異なって表示される場合があります<!DOCTYPE>そしてそれなしで。 さらに、ブラウザはそのようなドキュメントを独自の方法で表示できます。その結果、ページは「崩れ」ます。 開発者が望んでいるのとはまったく異なる方法で表示されます。 このような状況を回避するには、常に追加します<!DOCTYPE>ドキュメントの先頭に。</p><p>鬼ごっこ <html>HTMLファイルの先頭を定義し、その中にヘッダー( <head>)およびドキュメント本文( <body> ).</p><p>ブロックは別名と呼ばれるため、ドキュメントのタイトル <head>、テキストとタグを含めることができますが、このセクションのコンテンツは、コンテナを除いて、ページに直接表示されません。 <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>鬼ごっこ <meta>はユニバーサルであり、特にメタタグを使用して、クラス全体の機能を追加します。このタグは一般的に呼ばれるため、ページエンコーディングの変更、キーワードの追加、ドキュメントの説明などを行うことができます。 ブラウザがUTF-8エンコーディング(Unicode変換形式)を処理していることを理解できるように、この文字列が追加されます。</p><p> <title>サンプルWebページ

鬼ごっこ Webページのタイトルを定義します。これは、多くの問題を解決するために設計された重要な要素の1つです。 Windowsオペレーティングシステムでは、タイトルテキストはブラウザウィンドウの左上隅に表示されます(図4.2)。</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>米。 4.2。 ブラウザのヘッダービュー</p> <p>鬼ごっこ <title>は必須であり、ドキュメントコードに存在する必要があります。</p><p>必ず終了タグを追加してください</head>ドキュメントのタイトルブロックが完了したことを示します。</p><p>ドキュメント本文 <body>Webページのタグとコンテンツに対応するように設計されています。</p><p> <h1>見出し</h1> </p><p>HTMLは、見出しの後のセクションの相対的な重要性を示す6つの異なるレベルのテキスト見出しを提供します。 だから、タグ <h1>最も重要な第1レベルの見出し、およびタグを表します <h6>第6レベルの見出しを示すのに役立ち、重要性が最も低くなります。 デフォルトでは、最初のレベルの見出しは最大の太字で表示され、次のレベルの見出しはサイズが小さくなります。 タグ: <h1>...<h6>はブロック要素であり、常に新しい行から始まり、その後に他の要素が次の行に表示されます。 さらに、見出しの前後に空白が追加されます。</p><p> <!-- Комментарий --> </p><p>一部のテキストは、コメントにすることでブラウザの表示から隠すことができます。 ユーザーにはそのようなテキストは表示されませんが、それでもドキュメントで送信されるため、ソースコードを見ると、隠されたメモを見つけることができます。</p> <p>Webページを開くと、サイトのタイプとフォーカスに応じて変化しない一般的な要素が含まれています。 例1は、基本的な要素を含む単純なドキュメントのコードを示しています。</p><p>例1.Webページのソースコード</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>サンプルWebページ

見出し

第一段落。

2番目の段落。

この例の内容をコピーして、example2.htmlとしてc:\ www \フォルダーに保存します。 その後、ブラウザを起動し、メニュー項目からファイルを開きます ファイル>ファイルを開く(Ctrl + O)。 ドキュメントを選択するためのダイアログボックスで、ファイルexample2.htmlを指定します。 ブラウザは、図7に示すWebページを開きます。 1.1。

米。 1.ブラウザでの例の結果

エレメント(jarg。doctype)は、現在のドキュメントのタイプ(DTD(ドキュメントタイプ定義))を示すことを目的としています。 HTMLにはいくつかのバージョン(最新のHTML5またはレガシーHTML4とXHTML)が存在するため、これはブラウザーが現在のWebページの解釈方法を理解するために必要です。 ブラウザが「混乱」せず、Webページを表示する標準に従って理解し、コードの最初の行に設定する必要があるようにするため.

将来的にはHTML5のみを使用するため、必要なのは短くて最新のDoctypeが1つだけです。

要素名は大文字と小文字で書くことができると述べました。 にこのルールも適用され、さまざまな方法で記述できます。 ただし、伝統的に、この要素の名前は大文字で書かれています。

オープニングタグ HTMLドキュメントの始まりを定義し、その中に「頭」( )およびドキュメントの「本文」( ).

このセクションの内容は、要素を除いて、ページに直接表示されません。 ..。 中身 <head>次の要素を見つけることができます。 <base> , <link> , <meta> , <script> , <style>また <title> .</p><p> <meta charset="utf-8"> </p><p>エレメント <meta>はユニバーサルであり、特にメタタグを使用して、クラス全体の機能を追加します。この要素は一般的に呼ばれるため、ブラウザや検索エンジン向けに、ページエンコーディングの変更、キーワード、ドキュメントの説明などを追加できます。 特に、ブラウザがUTF-8(Unicode変換形式)エンコーディングを処理していることを認識し、この文字列が追加されるようにします。</p><p> <title>サンプルWebページ

エレメント Webページのタイトルを定義します。 ブラウザでは、現在のタブに表示されます(図2)。</p><p><img src='https://i0.wp.com/webref.ru/assets/images/html-tutorial/title.png' height="62" width="367" loading=lazy loading=lazy></p><p>米。 2.ブラウザのWebページのタイトル</p><p>エレメント <title>は必須であり、ドキュメントコードに存在する必要があります。 内部にはテキストのみを書き込むことができ、他の要素は書き込むことができません <title>すべきではありません。 ただし、たとえば次のように、異なるテキスト文字を追加することは許可されています。 <span><title>Adobe™Photoshop® .

終了タグドキュメントの先頭が完全であることを示します。

ドキュメントの「本文」 Webページの要素とコンテンツに対応することを目的としています。

見出し

HTMLは、見出しの後のセクションの相対的な重要性を示すさまざまなレベルの6つのテキスト見出しを提供します。 だから、要素

最も重要な第1レベルの見出し、および要素を表します

第6レベルの見出しを示すのに役立ち、重要性が最も低くなります。 デフォルトでは、最初のレベルの見出しは最大の太字で表示され、次のレベルの見出しはサイズが小さくなります。 要素

...

はブロック要素であり、常に新しい行から始まり、その後に他の要素が次の行に表示されます。 さらに、ブラウザはタイトルの前後に空白を追加します。

一部のテキストは、コメントにすることでブラウザの表示から隠すことができます。 ユーザーにはそのようなテキストは表示されませんが、ドキュメントで送信されるため、ソースコードを確認すると、非表示のメモを見つけることができます。

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

このレッスンを完了すると、図1に示すように、最初のWebページを作成する方法をすでに学習できます。

写真1

1.htmlドキュメントの構造

HTMLファイルの拡張子は .htmまた .html.

通常、タグはペアになっています。開始タグと終了タグです。 イニシャル -<>、ファイナル、例えば

ペアタグは、 容器 .

一部のタグには必要なタグのペアがありません。そのようなタグは 独身 ..。 このようなタグは、たとえば、閉じ角括弧の前に右スラッシュを書き込むことによって閉じられます。

htmlドキュメントの構造は次のようになります(図2)。

図2

図2のリストの説明

最初の行で、DOCTYPE構造は、Webページレイアウト標準の1つを意味します。

タグ間 見出し部分が含まれています。 それは構造を含みます </b>と <b>. この名前は、ドキュメントが読み込まれるとブラウザのタイトルバーに表示されます(図3)。

図3

録音 文字がブラウザに正しく表示されるようにキリル文字をエンコードすることを意味します。 エンコーディングを指定しない場合、フォントは次のように表示されることがあります(図4)。

図4

エンコーディングを挿入した後の同じページ(図5)

図5

注:エンコードする代わりに charset = "windows-1251"エンコーディングを使用できます charset = " utf -8" 、世界に存在するすべての記号がそこに存在するため、多言語サイトを作成できます。 この場合、 メモ帳レイアウトと保存の前に++が必要html-トップメニューからファイルを選択 エンコーディング-にエンコードする UTF -8なし BOM (BOMなしのUTF-8)

この情報は、最初のドキュメントを作成するのに十分です。

実践課題1

1.フォルダを作成し、名前を付けます 僕の..。 すべてのフォルダとファイルの名前は、ラテン小文字で作成する必要があります。 ロシア語の名前は使用できません..。 名前は短く意味のあるものにしてください。

Webページのコードをメモ帳で記述します。 Windowsに付属のメモ帳ではなく、メモ帳++などのより「高度な」メモ帳を使用することをお勧めします。 配布キット メモ帳++フォルダにあります CD / distr.

2.メモ帳++を開きます。 アイテムのメニューで、ANSIエンコーディングが設定されていることを確認してください エンコーディング、設定位置 ANSIでエンコードする.

3.メモ帳++に図2のリストのコードを入力します。

図2のリストのコードは、さらにテンプレートとして機能するため、毎回htmlドキュメントの構造を入力する必要はありません。 ここからDOCTYPE構造をコピーします(暗記して暗記する必要はありません)。

4.ファイルを次のように保存します shablon.htmlフォルダ内 私の家、フィールドにいる間 ファイルの種類インストール いろんなタイプ(図6)そうでない場合、Webページは後でブラウザで開きません。

図6

5.保存後、実行します シャブロン. htmlダブルクリック。 その結果、ファイルは次のようになります(図7)。

図7

上の図のように結果が得られない場合は、コードにエラーがある可能性があります。 間違った文字が1つあれば十分であり、Webページは正しく表示されません。 図2のリストに対してコードを再度確認してください。

6.フォルダ内 私の家フォルダを作成する 公衆_ html..。 この名前は通常、実際のホスティングでホストされているときにサイトが保存されるフォルダーと呼ばれます(このフォルダーはwwwとも呼ばれます)。

7.ファイルを保存します シャブロン. htmlフォルダ内 公衆_ html新しい名前で 主要. html.

8.フォルダから CD/ html_css_1ファイルを開く text_main.txtメモ帳++で、名前で保存されたファイルも開きます 主要. html

9.ファイルからすべてのテキストをコピーします text_main.txtファイルに貼り付けます 主要. html「Webページのコンテンツ」というフレーズの代わりに。 タグで 「家」という言葉を書いてください。 このような <b><title>家.

10.変更を保存して、ファイルを表示します 主要. htmlブラウザで。 書式なしテキストが表示されます。 ソーステキストにある改行でさえ、ブラウザはそうではありません(図8)。

図8

2.フォーマットウェブ-タグ付きのページHTML

このレッスン「HTMLページの作成方法」では、Webページをマークアップするために使用される基本的なタグについて説明します。

タグは、Webページのテキストをフォーマットするために使用されます。 タグのリストは、フォルダでより詳細に見つけることができます CD/ディレクトリHTMLディレクトリ内 html401_ru.chm(トップメニュー項目 要素).

いくつかのタグを見てみましょう。

要素 NS 1, NS 2, NS 3, NS 4, NS 5, NS 6

ドキュメント本文の構造化は要素内で行われます < > h1、h2、h3、h4、h5、h6要素によって定義されたヘッダーを使用します。

ヘッダー要素はペアになっているため、開口部が必要です < NS1> と閉じる NS1> タグ。

HTMLには、h1(最上部)、h2、h3、h4、h5、およびh6(最下部)の6つの見出しレベルがあります。 見出し要素の機能は、テキストエディタの通常の見出しスタイルに似ています。

これらの6つのタグの動作は、次の図に示されています。 1つの図はソースコード(図9)を示し、もう1つの図はブラウザービュー(図10)を示しています。

図9

図10

テキストを段落に分割する

鬼ごっこ < NS> 段落の先頭を設定し、段落の上部に距離を挿入します。これは、この段落を前の段落から分離するためのインデントです。

改行を強制する

鬼ごっこ
残りのテキストを次の行の段落で折り返すことができます。 これは対になっていないタグであり、段落タグとは異なり、行間隔は増加しません。

実践課題2

1.タイトル「建築プロジェクトのカタログ」をタグでフォーマットします

.

2.タイトル「ProjectsforYourFutureHome」をタグでフォーマットします

.

3.タグを使用して、タイトル「Projectsofhouses」と「Squaresofhouses」をフォーマットします。

.

4.タグを使用して本文を段落に分割します

最初の2つの段落内で、タグを使用します
改行用。 その結果、コードは次のようになります(図11)。

5.ブラウザで結果を表示します。

図11

箇条書きと番号付きリスト

HTMLを使用すると、番号(数値とアルファベット)およびさまざまな種類の箇条書きで箇条書きのリストを作成できます。

鬼ごっこ < ul>…ul> 箇条書きを作成します。

鬼ごっこ < ol>…ol> 番号付きリストを形成します。

のような単一のリストアイテム

    とで
      タグを使用して生成 < li> .

      実習3

      1.「ハウスプロジェクト」という見出しの下に番号付きリストを作成します。

      2.「ハウスエリア」という見出しの下に箇条書きを作成します。 コードは次のようになります(図12)。

      図12

      3.ブラウザでページを表示します。

      リストは、異なるマーカーを使用して相互にネストできます。

      ネストされたリストの例を図に示します。 13

      実習4

      1. 図13に示すコードを新しいファイルに実装します。
      2. ファイルをフォルダに保存します 私の家名前の下で spisok_ vlozh. html. 図の結果。 13

      図13.ネストされたリストの例

      書体

      鬼ごっこ -テキストを太字で表示できます。

      鬼ごっこ -テキストを斜体で表示できます。

      鬼ごっこ -下線付きのテキストを表示します。

      例えば:

      この場合、テキストが表示されます ボールドイタリック ただし、下線は付いていません。

      そしてこの場合、テキストは書かれます 太字の下線付きイタリック .

      下付き文字と上付き文字

      鬼ごっこ < サブ> サブ> 通常のテキストの半行下のテキストを省略できます。

      鬼ごっこ < sup> sup> テキストを通常のテキストより半行上に上げることができます。 これらのタグの間のテキストは、通常のテキストよりも小さいフォントで表示されます。

      実習5

      1.最初の段落でmyhouse.ruという名前を太字でフォーマットします(図14)。

      図14

      2. 2番目の段落で、「プロジェクトの95%以上」というフレーズを下線付きのイタリックでフォーマットします(図15)。

      図15

      3.平方メートルが使用されている上付き文字をフォーマットします(図16)。

      図16

      4.ファイルを保存します。 ブラウザを閲覧します。 Webページは次のようになります(図17)。

      図17

      3.画像の挿入

      私たちの記事「HTMLページを作成する方法」では、Webページに画像を配置する方法を見ていきます。

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

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

      例えば: " image1.jpg" alt = "(!LANG:画像" /> !}

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

      グラフィックファイルは次の形式にすることができます jpg、gif、png、常にカラーモデルRGB.

      実習6

      1.住宅地のリストの後に、コテージプロジェクトの画像をWebページに挿入します 事業_1.jpg事業_2.jpgフォルダから CD / html_css_1 ..。 これを行うには、最初にこれら2つの画像をmain.htmlファイルが配置されているフォルダーにコピーします。 画像埋め込みコードは次のようになります(図18)。

      図18

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

      図19

      基本的にタグを使用する原則HTML理解する必要があります。 これらは同じ原則に従って使用されます。タグがコンテナの場合、つまり開始タグと終了タグです。 タグが単一の場合、終了タグはありません。この場合、たとえば、閉じ角括弧の前に右スラッシュが書き込まれます。< br/>。 タグがコンテナ化されているか単一であるかにかかわらず、仕様で常に確認できます要素セクションのhtml401_en.chm。

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

      最初のチュートリアル「HTMLページを作成する方法」では、HTMLでのアドレス指定の概念を説明します。

      サイトのさまざまなフォルダにある可能性のあるhtmlファイルに画像を配置する必要がある場合は、アドレス指定オプションを検討しましょう。

      アドレス指定には2つのタイプがあります。

      • 絶対;
      • 相対的。

      絶対アドレス指定 (コンピューターディスクタイトルを使用) 使用されていない(図20)

      図20

      によって使われた 相対アドレス指定 -1つのサーバー上のドキュメントまたはドキュメントのコレクション内のアドレス指定。 サイト内のファイルにリンクするには、目的のファイルに到達するためにどのパスに移動するかをブラウザに指示する必要があります。

      例1

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

      / >

      図21

      実用的なタスク7

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

      例2

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

      図22

      実用的なタスク8

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

      例3

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

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

      図23

      実用的なタスク9

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

      例4

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

      / >

      図24

      実用的なタスク10

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

      例5

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

      • 出口フォルダfolder_1、
      • 出口フォルダfolder_2、
      • 画像を添付してください。

      あなたは二度出なければならないので、それから建設 ../ 2回繰り返されます。

      / >

      図25

      実践課題11

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

      例6 (図26)

      必要:

      • 出口フォルダfolder_1、
      • 出口フォルダfolder_2、
      • フォルダfolder_3に移動し、
      • folder_4フォルダーに移動します。
      • 画像を添付pic.jpg

      図26

      実践課題12

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

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

      7 (図27)

      必要:

      • 出口フォルダfolder_1、
      • 出口フォルダfolder_2、
      • 出口フォルダfolder_3、
      • folder_4フォルダーに入り、
      • 画像pic.jpgを添付してください。

      3回外出する必要があるので、工事 ../ 3回繰り返した。

      図27

      実践課題13

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

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

      したがって、終了する必要がある回数だけ../構文を配置し、終了する場合は、途中でフォルダーの名前をリストします。

      実践課題14

      1. htmlドキュメントを作成し、画像へのパスが次のようになるように画像を挿入します。

      " ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

      2. htmlドキュメントに画像を挿入する独自の例を作成して、 出力 フォルダから、そして 入口 フォルダに。 この例は、上記のすべての例とは異なる必要があります。

      このテーマの結果として、次のファイルを作成する必要があります。

      • shablon.html
      • main.html
      • spisok_vlozh.html
      • フォルダ内私の家フォルダがあるはずです公衆_ html将来のサイトのファイルで
      • プラクティス14からの相対アドレス指定の7つの例と制御の2つの例
トピックの続き:
ネットワーク

PDFをPowerPointプレゼンテーションに変換するPDFをプレゼンテーションに変換できますか? はい、できます! そして、それは簡単です! PDFのダウンロード:ドキュメントをドラッグアンドドロップできます...