Web UI を構築できるように自分自身を開発する: パート HTML を理解する
Web 開発は、今日最も需要の高いスキルの 1 つです。これには、ブラウザ経由でアクセスできる、ユーザーフレンドリーで魅力的な Web サイトを作成することが含まれます。 Web 開発者になるための最初のステップは、HTML を理解することです。
HTML (ハイパー テキスト マークアップ言語) は、あらゆる Web ページのバックボーンです。これは、Web ページを構造化し、ブラウザーでのコンテンツの表示方法を決定するために使用される標準言語です。ページの外観は CSS (Cascading Style Sheets) によって決まり、その機能は JS (Javascript) によって決まりますが、HTML は、基本的なスケルトンまたは構造を担当します。
コースのこの部分に入る前に、旅の中で使用される有名な専門用語や繰り返し使用される専門用語を理解することが重要です。これらは、作業を進めるにつれて概念を理解するのに役立ちます (また、作成者が物事を説明しやすくなります ;-) )。
専門用語を理解する
- プログラミング言語: コンピューターが実行できる特定の構文 (プログラミング言語の方法) で記述された一連の命令。コンピューターはバイナリ コード (1 または 0) のみを理解することを忘れないでください。コンピューターにロジックを理解させ、トレードオフを見つけるために、私たち (人間) は、簡単に理解できるようなプログラミング言語を作成しました。私たちがコードを書くだけでなく、コンピューターもそれを理解することができます。
- コンパイラー: プログラミング言語で書かれたコードを、コンピューターが理解して実行できる機械語に変換するツール。
- 構文: プログラミング言語の構造を定義する規則。これは、文中で意味をなすために単語を配置する方法と考えてください。
- コメント: コードの特定の部分が何を行うかを説明するコード内のメモ。コメントは、他の開発者 (または将来のあなた) がコードの背後にあるロジックを理解するのに役立ちます。
-
DOM (Document Object Model): DOM は、HTML ドキュメントをツリー状に表現したものです。 HTML 内のすべてのタグは、このツリー内のノードになります。たとえば、HTML に がある場合、
のタグ(段落) その中に、ブラウザは段落ノードを子として持つ本文ノードを作成します。
-
子供: 上達するにつれて、これを理解できるようになります。別の要素内にネストされた要素。たとえば、HTML では、div タグ () 内の段落タグ (
) は div の子とみなされます。
- ブロックレベル要素: 作業を進めていくと、この専門用語を学ぶことになります。この用語は通常、要素が利用可能な幅をすべて占めるという要素の機能を表します。
HTML を起動する
HTML は ハイパー テキスト マークアップ言語
を表します。ハイパー テキスト: 異なるドキュメントをリンクする HTML の機能を指します。
マークアップ言語: タグを使用してテキストに注釈を付け、ブラウザーでの表示方法を定義します。
HTML ドキュメントの基本構造は次のとおりです:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <p>Hello, world!</p> </body> </html>ログイン後にコピータグ: HTML では、タグは要素を定義するために使用されます。タグは、 のように山括弧で囲みます。または
要素: 開始タグと終了タグで構成され、コンテンツが含まれる場合があります。たとえば、
Hello, world!
は段落要素です。
HTML文書の構造
すべての HTML ドキュメントは次の基本構造に従います。
- : Declares the document type and version of HTML.
- : The root element that encloses all other HTML elements.
- : Contains meta-information about the document, such as the title and links to stylesheets.
-
: Sets the title of the webpage, displayed in the browser's title bar or tab. - : Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
- : Embeds CSS code to style the HTML elements.
- <script></script>: Embeds JavaScript code for adding interactivity to the webpage.
- : Encloses the content that will be visible to users on the webpage.
Commonly Used HTML Elements
Here are some basic HTML elements you’ll use frequently:
- : Defines a paragraph.
- : A block-level element used to group other elements together.
- : An inline element used to group text for styling purposes.
-
: Represents the introductory content or navigational links of a section. -
to : Headings, with
being the highest level and
the lowest.
-
: Inserts a line break (self-closing tag — meaning there is no need to close the tag). - : Used to create an HTML form for user input.
- : Creates an input field, typically used within a form.
- : Creates a dropdown list.
- : Associates a text label with a form element.
-
: Defines a table.
-
: Defines a row in a table. -
: Defines a cell in a table row. -
: Defines a header cell in a table row. -
-
- : Defines a list item.
Creating Your First HTML File
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
- Open your text editor and type the following code:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
ログイン後にコピー- Save the file with a .html extension (e.g., index.html)
- Open the file in your web browser to see your first HTML webpage in action!
- To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
- Go to the network tab in the Developer Tools and refresh your browser tab.
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.
Creating a Table
Let’s take a step further by creating a simple table in HTML:
- Open the same HTML file and add the following code inside the tag:
<p>Table Example</p> <table> <tr> <th>Name</th> <th>Power</th> <th>Is Kurama Present</th> </tr> <tr> <td>Naruto</td> <td>Rasengan</td> <td>Yes</td> </tr> <tr> <td>Sasuke</td> <td>Sharingan</td> <td>No</td> </tr> </table>ログイン後にコピー- Save the file and refresh your browser to see the table displayed.
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
tag, which will center the heading of the table. Experiment with the caption tag and refresh to see the changes. Note that
tag should only be used immediately after the opening tag.
You’ve now successfully created a basic table in HTML. Feel free to experiment with additional rows and columns to get more comfortable with HTML syntax.
Conclusion
Congratulations on completing your first steps into web development with HTML! The key to mastering HTML is practice. Experiment with different elements, create your own webpages, and don’t be afraid to make mistakes — every error is a learning opportunity.
Remember, this is just the beginning. As you continue to build on this foundation, you’ll soon be able to create more complex and dynamic websites. Let’s make the web a better place, one line of code at a time.
この記事は、IT と機械工学の両方の経験を持つ専門家である Anantha Krishnan によって書かれています。フルスタック開発の経歴と機械および電気システムへの情熱を持つ Anantha Krishnan は、現在、専門分野の初心者を支援する教育コンテンツの作成に注力しています。
以上がWeb UI を構築できるように自分自身を開発する: パート HTML を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
KB5055612を修正する方法Windows 10にインストールできませんか？4週間前 By DDD<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法4週間前 By 尊渡假赌尊渡假赌尊渡假赌<🎜>：庭を育てる - 完全な突然変異ガイド3週間前 By DDDNordhold：Fusion System、説明4週間前 By 尊渡假赌尊渡假赌尊渡假赌マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Java チュートリアル
1673
14
CakePHP チュートリアル
1428
52
Laravel チュートリアル
1333
25
PHP チュートリアル
1278
29
C# チュートリアル
1257
24
See all articles
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScript通訳者とコンパイラにおけるC/Cの役割
Apr 20, 2025 am 12:01 AM
CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
Python vs. JavaScript：ユースケースとアプリケーションと比較されます
Apr 21, 2025 am 12:01 AM
Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
