: Web ページにインタラクティブ性を追加するための JavaScript コードを埋め込みます。
  • : Web ページ上でユーザーに表示されるコンテンツを囲みます。

    • よく使用される HTML 要素

    頻繁に使用する基本的な HTML 要素をいくつか示します:

    最初の HTML ファイルの作成

    HTML ファイルを作成するには、メモ帳や VS Code などのテキスト エディタを使用できます。簡単な例を次に示します:

    1. テキスト エディタを開いて次のコードを入力します。
      HTML Tutorial  
    Example Number 1
      
    Hello, world!
    1. ファイルを .html 拡張子で保存します (例:index.html)
    2. Web ブラウザでファイルを開いて、最初の HTML Web ページが動作していることを確認してください。
    3. コードを検査するには、Google Chrome で Ctrl Shift C を押して開発者ツールを開き、DOM 構造を調べます。
    4. 開発者ツールのネットワーク タブに移動し、ブラウザのタブを更新します。

    この画像のように保存した名前でリクエストがあることが分かります。
    \\\"Develop

    応答タブには、次の図のように記述したコードが表示されます
    \\\"Develop

    さて、HTML として保存したファイルを開くと、コンピュータはブラウザでそのファイルを実行し始めました。ブラウザは何か表示したいので、起動元のファイルへのリクエスト呼び出しを行いました。ファイルはブラウザにコードを提供し、それは応答セクションで見つかりました。これは HTML ファイルであるため、ブラウザは HTML コードを上から下に読み始めます。このプロセスは解析と呼ばれます。解析中に、ブラウザーはさまざまな HTML タグ (、、 など) を検出し、これらのタグに基づいて DOM と呼ばれる構造の構築を開始します。ブラウザは DOM を構築すると同時に、画面上にコンテンツをレンダリングします。

    テーブルの作成

    HTML で簡単なテーブルを作成して、さらに一歩進んでみましょう:

    1. 同じ HTML ファイルを開き、 タグ内に次のコードを追加します。
    Table Example
      
        Name    Power    Is Kurama Present  
      
        Naruto    Rasengan    Yes  
      
        Sasuke    Sharingan    No
    1. ファイルを保存し、ブラウザを更新して表が表示されることを確認します。

    見出しが段落タグによってレンダリングされていることに注目してください。あるいは、表の見出しを中央に配置する タグを使用することもできます。キャプション タグを試して更新し、変更を確認してください。

    タグは、

    開始タグの直後にのみ使用する必要があることに注意してください。

    これで、HTML で基本的なテーブルが正常に作成されました。 HTML 構文に慣れるために、行と列を追加して自由に試してみてください。

    結論

    HTML を使用した Web 開発への最初のステップが完了しました。おめでとうございます。 HTML をマスターする鍵は練習です。さまざまな要素を試し、独自の Web ページを作成し、間違いを恐れないでください。すべての間違いは学習の機会です。

    覚えておいてください、これはほんの始まりにすぎません。この基盤の上に構築を続けると、より複雑で動的な Web サイトをすぐに作成できるようになります。コードを 1 行ずつ進めて、ウェブをより良い場所にしましょう。

    この記事は、IT と機械エンジニアリングの両方の経験を持つ専門家である Anantha Krishnan によって書かれています。フルスタック開発の経歴と機械および電気システムへの情熱を持つ Anantha Krishnan は、現在、専門分野の初心者を支援する教育コンテンツの作成に注力しています。

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
    オンラインツール
    ソフトウェアチュートリアル
    サイトナビゲーション
    プログラミング
    表紙 > プログラミング > Web UI を構築できるように自分自身を開発する: パート HTML を理解する

    Web UI を構築できるように自分自身を開発する: パート HTML を理解する

    2024 年 8 月 20 日に公開
    ブラウズ：466

    Web 開発は、今日最も需要の高いスキルの 1 つです。これには、ブラウザ経由でアクセスできる、ユーザーフレンドリーで魅力的な Web サイトを作成することが含まれます。 Web 開発者になるための最初のステップは、HTML を理解することです。

    Develop yourself to build Web UIs: Part Understanding HTML

    HTML (ハイパー テキスト マークアップ言語) は、あらゆる Web ページのバックボーンです。これは、Web ページを構造化し、ブラウザーでのコンテンツの表示方法を決定するために使用される標準言語です。ページの外観は CSS (Cascading Style Sheets) によって決まり、その機能は JS (Javascript) によって決まりますが、HTML は、基本的なスケルトンまたは構造を担当します。

    コースのこの部分に入る前に、旅の中で使用される有名な専門用語や繰り返し使用される専門用語を理解することが重要です。これらは、作業を進めるにつれて概念を理解するのに役立ちます (また、作成者が物事を説明しやすくなります ;-) )。

    専門用語を理解する

    1. プログラミング言語: コンピューターが実行できる、特定の構文 (プログラミング言語の方法) で記述された一連の命令。コンピューターはバイナリ コード (1 または 0) のみを理解することを忘れないでください。コンピューターにロジックを理解させ、トレードオフを見つけるために、私たち (人間) は、簡単に理解できるようなプログラミング言語を作成しました。私たちはコーディングすることができ、またコンピューターもそれを理解することができます。
    2. コンパイラー: プログラミング言語で書かれたコードを、コンピューターが理解して実行できる機械語に変換するツール。
    3. 構文: プログラミング言語の構造を定義する規則。これは、文の中で意味をなすために単語を配置する方法だと考えてください。
    4. コメント: コードの特定の部分が何を行うかを説明するコード内のメモ。コメントは、他の開発者 (または将来のあなた) がコードの背後にあるロジックを理解するのに役立ちます。
    5. DOM (ドキュメント オブジェクト モデル): DOM は、HTML ドキュメントをツリー状に表現したものです。 HTML 内のすべてのタグは、このツリー内のノードになります。たとえば、HTML に タグがあり、その中に

      (段落) が含まれている場合、ブラウザは段落ノードを子として持つ body ノードを作成します。

    6. 子供たち: 上達するにつれて、これを理解できるようになります。別の要素内にネストされた要素。たとえば、HTML では、div タグ (
      ) 内の段落タグ (

      ) は div. の子とみなされます。

    7. ブロックレベル要素: 作業を進めていくと、この専門用語について学ぶことになります。この用語は通常、要素が利用可能な幅全体を占めるという要素の機能を説明します。

      8. HTML を起動する

      HTML は ハイパー テキスト マークアップ言語

      を表します。

      • ハイパー テキスト: 異なるドキュメントをリンクする HTML の機能を指します。

      • マークアップ言語: タグを使用してテキストに注釈を付け、ブラウザでの表示方法を定義します。

      HTML ドキュメントの基本構造は次のとおりです:

      
  
    HTML Tutorial
      Hello, world!

      • タグ: HTML では、タグは要素を定義するために使用されます。タグは、 や

        のように山かっこで囲みます。

      • 要素: 開始タグと終了タグで構成され、コンテンツが含まれる場合があります。たとえば、

        Hello, world!

        は段落要素です。

      HTML文書の構造

      すべての HTML ドキュメントは基本構造に従います:

      1. : HTML のドキュメント タイプとバージョンを宣言します。
      2. : 他のすべての HTML 要素を囲むルート要素。
      3. : タイトルやスタイルシートへのリンクなど、ドキュメントに関するメタ情報が含まれます。
      4. : ブラウザのタイトル バーまたはタブに表示される Web ページのタイトルを設定します。
      5. : 文字セット、作成者、ビューポート設定など、HTML ドキュメントに関するメタデータを提供します。自己終了タグです。
      6. : HTML 要素のスタイルを設定するための CSS コードを埋め込みます。
      7. : Web ページにインタラクティブ性を追加するための JavaScript コードを埋め込みます。
      8. : Web ページ上でユーザーに表示されるコンテンツを囲みます。

      よく使用される HTML 要素

      頻繁に使用する基本的な HTML 要素をいくつか示します:

      • : 段落を定義します。
      • : 他の要素をグループ化するために使用されるブロックレベルの要素。
      • : スタイル設定のためにテキストをグループ化するために使用されるインライン要素。
      • : セクションの紹介コンテンツまたはナビゲーション リンクを表します。

      • ～
        : 見出し。

        が最高レベル、

        が最低レベルです。

      • : 改行を挿入します (自己終了タグ - タグを閉じる必要がないことを意味します)。
      • : ユーザー入力用の HTML フォームを作成するために使用されます。
      • : 通常はフォーム内で使用される入力フィールドを作成します。
      • : ドロップダウン リストを作成します。
      • : テキストラベルをフォーム要素に関連付けます。
    : テーブルを定義します。
  • : テーブル内の行を定義します。
  • : テーブル行のセルを定義します。
  • : テーブル行のヘッダー セルを定義します。
  • : 順序なし (箇条書き) リストを定義します。
    • : 順序付き (番号付き) リストを定義します。
    2. : リスト項目を定義します。

      最初の HTML ファイルの作成

      HTML ファイルを作成するには、メモ帳や VS Code などのテキスト エディタを使用できます。簡単な例を次に示します:

      1. テキスト エディタを開いて次のコードを入力します。 
      

  HTML Tutorial
      Example Number 1
      
  
      Hello, world!
      1. ファイルを .html 拡張子で保存します (例:index.html)
      2. Web ブラウザでファイルを開いて、最初の HTML Web ページが動作していることを確認してください。
      3. コードを検査するには、Google Chrome で Ctrl Shift C を押して開発者ツールを開き、DOM 構造を調べます。
      4. 開発者ツールのネットワーク タブに移動し、ブラウザのタブを更新します。

      この画像のように保存した名前でリクエストがあることが分かります。
      Develop yourself to build Web UIs: Part Understanding HTML

      応答タブには、次の図のように記述したコードが表示されます
      Develop yourself to build Web UIs: Part Understanding HTML

      さて、HTML として保存したファイルを開くと、コンピュータはブラウザでそのファイルを実行し始めました。ブラウザは何か表示したいので、起動元のファイルへのリクエスト呼び出しを行いました。ファイルはブラウザにコードを提供し、それは応答セクションで見つかりました。これは HTML ファイルであるため、ブラウザは HTML コードを上から下に読み始めます。このプロセスは解析と呼ばれます。解析中に、ブラウザーはさまざまな HTML タグ (、

      、 など) を検出し、これらのタグに基づいて DOM と呼ばれる構造の構築を開始します。ブラウザは DOM を構築すると同時に、画面上にコンテンツをレンダリングします。

      テーブルの作成

      HTML で簡単なテーブルを作成して、さらに一歩進んでみましょう:

      1. 同じ HTML ファイルを開き、 タグ内に次のコードを追加します。 
      Table Example
      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. ファイルを保存し、ブラウザを更新して表が表示されることを確認します。

      見出しが段落タグによってレンダリングされていることに注目してください。あるいは、表の見出しを中央に配置する

      タグを使用することもできます。キャプション タグを試して更新し、変更を確認してください。

      タグは、 開始タグの直後にのみ使用する必要があることに注意してください。

      これで、HTML で基本的なテーブルが正常に作成されました。 HTML 構文に慣れるために、行と列を追加して自由に試してみてください。

      結論

      HTML を使用した Web 開発への最初のステップが完了しました。おめでとうございます。 HTML をマスターする鍵は練習です。さまざまな要素を試し、独自の Web ページを作成し、間違いを恐れないでください。すべての間違いは学習の機会です。

      覚えておいてください、これはほんの始まりにすぎません。この基盤の上に構築を続けると、より複雑で動的な Web サイトをすぐに作成できるようになります。コードを 1 行ずつ進めて、ウェブをより良い場所にしましょう。

      この記事は、IT と機械エンジニアリングの両方の経験を持つ専門家である Anantha Krishnan によって書かれています。フルスタック開発の経歴と機械および電気システムへの情熱を持つ Anantha Krishnan は、現在、専門分野の初心者を支援する教育コンテンツの作成に注力しています。

      3. リリースステートメント この記事は次の場所に転載されています: https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1- Understanding-html-4of9?1 侵害がある場合は、study_golang@163 までご連絡ください。 .comを削除してください
      最新のチュートリアル もっと>
      分類もっと>
      日本語を学ぶ 韓国語を学ぶ 中国語を学びます 外国語を学ぶ ゲーム よくある問題 テクノロジー周辺機器 AI ソフトウェアチュートリアル プログラミング 記事

      中国語を勉強する

      道具もっと>
      画像のbase64デコード
      中国語のピンイン
      Unicodeエンコーディング
      JS難読化暗号化圧縮
      URL 16 進暗号化ツール
      UTF-8エンコード変換ツール
      オンラインの Ascii エンコードおよびデコード ツール
      MD5暗号化ツール
      ハッシュ/ハッシュ テキストのオンライン暗号化および復号化ツール
      オンライン SHA 暗号化

      免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

      Copyright© 2022 湘ICP备2022001581号-3