ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLとは何ですか?

HTMLとは何ですか?

WBOY
WBOYオリジナル
2024-09-04 16:12:30752ブラウズ

ハイパーテキスト マークアップ言語 (HTML) は、インターネットに接続している誰もが閲覧できる Web サイトの作成を可能にする言語です。 調査によると、回答者の 55% 以上が HTML を使用していると回答しました。

さらに、HTML を学ぶことは、通常、Web 開発者の取り組みの最初のステップです。平均的な Web 開発者の年間収入は 61,718 ドルで、トップの開発者は 103,000 ドルの水準を超えています。

ハイパーテキストは、次のページに移動するハイパーリンクと呼ばれるテキストをクリックしてオンラインにアクセスする方法です。

HTMLとは何ですか?

重要なポイント

  • 基本的なコードは、doctype 宣言、HTML タグ、head タグ、title タグ、body タグで構成されます。
  • Windows、Mac、Linux などのあらゆる OS や、Google Chrome、Mozilla Firefox、Safari などのブラウザ上で実行できます。
  • 個人ブログ、詳細テーブル、登録フォーム、ランディング ページ、ニュースレター、オンライン ポートフォリオの作成など、さまざまなアプリケーションもあります。
  • 利点は、オープン スタンダードであり、学習が簡単で、優れたコミュニティ サポートにより初心者に優しく、検索エンジンに優しいことです。
  • 欠点としては、セキュリティの低さ、設計の柔軟性の欠如、さまざまなブラウザでの出力の一貫性のなさ、機能の制限などが挙げられます。

HTML のサブセット

1. XHTML (拡張可能なハイパーテキスト マークアップ言語)

  • XHTML は XML ベースのマークアップ言語です。つまり、厳密な構文と意味規則に準拠しています。
  • XHTML は HTML 4 の後継であり、言語をよりモジュール化して拡張可能にすることを目的としています。
  • XHTML ドキュメントは整形式かつ有効である必要があるため、作成がより困難になり、より一貫性があり、幅広いデバイスでアクセスできるようになります。

2. SGML (標準汎用マークアップ言語)

  • SGML は、HTML などのマークアップ言語を定義するために使用されるメタ言語です。
  • SGML は、ドキュメントの構造とコンテンツを記述するための標準構文を提供し、異なるシステム間で情報を交換するのに役立ちます。
  • SGML は複雑で強力なシステムですが、その構文と複雑さのため、HTML のような単純なマークアップ言語ほど広く使用されていません。

3. DHTML (動的 HTML)

  • DHTML とは、HTML、CSS、JavaScript を使用して動的でインタラクティブな Web ページを作成することを指します。
  • DHTML を使用すると、ページを更新することなく、ユーザーのアクションに応じて Web ページのコンテンツ、レイアウト、動作を操作できます。
  • DHTML は、ドロップダウン メニュー、ツールヒント、スライド ショーなどの動的な効果を作成するために広く使用されています。
  • 簡単なアニメーションやゲームも作成できます。

4. TTML2 (タイムド テキスト マークアップ言語 2)

  • TTML2 は、キャプションや字幕などの時間指定されたテキスト コンテンツを標準化された方法で表現するために使用されるマークアップ言語です。
  • TTML2 は、複数の言語やフォント スタイルのサポートを含む、時間指定されたテキストの書式設定とスタイル設定のための包括的な機能セットを提供します。
  • TTML2 は、聴覚障害者ユーザーのマルチメディア コンテンツへのアクセシビリティを確保し、すべてのユーザーのビデオ コンテンツの使いやすさを向上させるための重要なツールです。

HTML テンプレート

すべての HTML ページには基本的なテンプレートがあります。これは次のセクションで構成されます:

文書型宣言: HTML 文書の最初の行は、使用する HTML のバージョンを定義する doctype または文書型宣言です。

構文:

<!DOCTYPE html>

要素: 要素は HTML ドキュメントのルート要素であり、他のすべての要素が含まれます。

構文:

<html>...</html>

Head 要素: head 要素には、タイトル、メタデータ、スタイルシートなどの外部リソースへのリンクなど、ドキュメントに関する情報が含まれます。

構文:

<head>...</head>

Title 要素: title 要素は、ブラウザのタイトル バーに表示されるドキュメントのタイトルを定義します。

構文:

<title>Name of Web Page</title>

Body 要素: body 要素には、テキスト、画像、その他のメディアを含むドキュメントの主要なコンテンツが含まれます。

構文:

<body>...</body>

これらの基本的なタグとは別に、コンテンツを追加して優れた Web サイトを作成するのに役立つ他のいくつかの要素が役立ちます。これらは-

見出し: 見出し (H1、H2、H3 など) は、コンテンツを構造化し、情報の階層を提供するのに役立ちます。

構文:

<h1>Main Heading</h1>

段落: 段落 (

) は、テキストのブロックを定義するのに役立ちます。

構文:

<p>Hello World</p>

リンク: リンク () を使用すると、ユーザーは他の Web ページまたは他のリソースに移動できます。

構文:

<a href="https://www.EDUCBA.com">Link to EDUCBA website</a>

Images: Images () can provide visual content in a document.

Syntax:

<img src="image.jpg" alt="Image Description">

Code:

<!DOCTYPE html>


EDUCBA’s Page


Hello World! This is EDUCBA’s first web page.

Output:

HTMLとは何ですか?

How to Create an HTML Table?

There are specific table tags to create a table – mainly,

, , and
,
.

Pre-requisites for HTML Table

For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.

  • : Defines a table
  • : Defines a table row
  • : Defines a table header cell
  • : Defines a table data cell

    Student Details Table

    John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.

    Name Mathematics Science
    Mary 78 92
    Susan 98 84
    Amy 63 79

    Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-

    Step #1: Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.

    Step #2: Select File > New Text File.

    HTMLとは何ですか?

    Step #3: Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.

    HTMLとは何ですか?

    Step #4: Again, go to File > Save As and save the file with the filename.html format.

    HTMLとは何ですか?

    HTMLとは何ですか?

    Step #5: Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    

    Output:

    HTMLとは何ですか?

    Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”

    HTMLとは何ですか?

    Step #6: Now, define the table using the

    tag inside the body tag. Define the first row using the tag, and add 3 headings cells – Name, Mathematics, and Science, using the tag, and adding the data in each cell using
    tag. Don’t forget to close the tags with a corresponding closing tag.

    Code:

    <table>
    <tr>
    <th>Name</th>
    <th>Mathematics</th>
    <th>Science</th>
    </tr>
    </table>

    Save the file and refresh the webpage to see the updated output:

    HTMLとは何ですか?

    Step #7: Add the student details by defining a row for each student using

    tag. Close the table with the
    tag.

    Code:

    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>

    Once again, save and refresh the webpage to see the final output:

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>
    
    Name Mathematics Science

    Applications of HTML

    Application How Does HTML Help?
    Web pages To create web pages, provide the structure and content for displaying information in a web browser.

     

    E-commerce To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.

     

    Landing pages To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.

     

    Newsletters It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.

     

    Online portfolios To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.

     

    Blogs One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.
    Documentation It helps to create documentation and help files, providing information and guidance to users of the software and other products.

     

    Advertisements It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.

     

    Forms To create a form, one can use
    elements.

     

    Advantages and Disadvantages

    Pros Cons
    Open Standard: It is free of cost and readily available. Limited Functionality: It cannot perform complex tasks like calculations or data storage.
    Easy to Learn: HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers. Poor Security: It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.
    Search Engine Friendly: Search engines can easily crawl and index the content of the pages. Inconsistent Browsers: Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.
    Community Support: It has large community support and many online resources available for learning and troubleshooting. Poor Design Flexibility: It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.

    Final Thoughts

    In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.

    FAQs

    Q1. How to convert an HTML to PDF?

    Answer: To convert, use a library or online service that supports HTML to PDF conversion.

    Q2. How to add an image in HTML?

    Answer: To add an image, use the tag with the src attribute pointing to the image file’s URL or local path. Example:

    <img src="image.jpg" alt="Alt text">

    Q3. Is HTML a programming language? What is the HTML used for?

    Answer: Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.

    Q4. How to add a video in HTML?

    Answer: To add a video, use the

    <video src="video.mp4"></video>

    One can also add controls to play, pause, and adjust volume with the controls attribute:

    <video src="video.mp4" controls></video>

    Q5. Is HTML case-sensitive?

    Answer: No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.

    Q6. How many tags are in HTML?

    Answer: There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.

    Q7. What is HTML doctype?

    Answer: The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:

    <!DOCTYPE html>

     Q8. What is an HTML header?

    Answer: The HTML

    tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.

    以上がHTMLとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事:HTML の概要次の記事:HTML の概要