レッスン
開始
勉強を始める
CodeGym /コース /Python SELF JA /HTMLとの出会い

HTMLとの出会い

Python SELF JA
レベル 29 , レッスン 0
使用可能

1. HTMLのタグ

HTMLって何？

HTML (HyperText Markup Language) は、ウェブページを作成して構造化するのに使用されるマークアップ言語だよ。HTMLを使って、ページの内容を整理し、さまざまなタグと属性を使ってブラウザに情報の表示方法を教えることができる。この講義では、タグ、タグのツリー、属性、一部の閉じないタグ、HTMLドキュメントの基本構造など、HTMLの基本概念を学ぼう。

HTMLでは、タグは内容をマークアップするための基本要素だよ。タグはテキストや他の要素を囲んで、ブラウザがそれをどのように表示するかを理解する助けになるんだ。例えば、<h1>と<p>タグは、ブラウザにそれぞれの中身がヘッダーや段落であることを示すよ。

タグは<>の角括弧で記述されるよ。ほとんどのタグはオープニングタグとクロージングタグのペアで成り立っている。例えば：

HTML 
                      
                        <h1>これはヘッダーです</h1>
                        <p>これは段落のテキストです。</p>

ここで<h1>はオープニングタグで、</h1>はクロージングタグだよ。

タグツリー

HTMLドキュメントは階層構造になっていて、タグが互いに入れ子状に配置されて、ツリーのような構造を作るよ。この「タグツリー」は、ページ上の要素がどのように関連していて、どの順番で表示されるべきかを定義するんだ。

こちらは簡単なタグツリーの例だよ:

Python 

<html>
<head>
  <title>ページの例</title>
</head>
<body>
  <h1>ページのヘッダー</h1>
  <p>ここには段落のテキストがあります。</p>
</body>
</html>

この例では、<html>タグがルート要素で、その中に<head>と<body>が含まれているよ。<body>の中には<h1>と<p>タグが配置されてる。こういった構造が、ページの内容を論理的に整理するのに役立つよ。

属性

HTMLの属性は、タグに追加の情報を付加するために使われるよ。それらはオープニングタグに記述され、名前と値から構成されてる。例えば：

HTML 

<a href="https://example.com">サイトへのリンク</a>
<img src="image.jpg" alt="画像の説明">
  • hrefはリンクのアドレスを指定するよ。
  • srcは画像のパスを指定するよ。
  • altは画像が読み込まれなかった時に表示される代替テキストだよ。

属性を追加すると、要素にID (id)、クラス (class)、スタイル (style)などの追加情報を付けられるよ。

単一タグ

HTMLの中には、内容がなくてクロージングタグを必要としないタグもあるよ。これを「単一タグ」って呼ぶんだ。例えば、<img>タグは画像を挿入するために使われ、このような構成になってる：

HTML 
  
    <img src="image.jpg" alt="画像の説明">

他の単一タグの例：

  • <br> — 改行のため。
  • <hr> — 水平線を追加するため。

2. HTMLドキュメントとの出会い

HTMLドキュメントは<!DOCTYPE html>という宣言から始まるよ。これはブラウザに「この文書はHTML5だよ」って教えるんだ。その後、ルートタグ<html>が続いて、<head>と<body>タグを含むよ。<head>にはドキュメントのメタデータ（タイトル、スタイル、スクリプト）が、<body>にはページの主な内容が含まれるよ。

HTMLドキュメントの例

Python 
      
        <!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="UTF-8">
          <title>私の最初のページ</title>
        </head>
        <body>
          <h1>ようこそ！</h1>
          <p>これはHTMLドキュメントの例です。</p>
          <a href="https://example.com">私たちのサイトを訪問してね</a>
        </body>
        </html>
  • <!DOCTYPE html>はこの文書がHTML5を書かれていることをブラウザに知らせるよ。
  • <html lang="ja">は文書の言語を指定してるよ。
  • <meta charset="UTF-8">はエンコーディングを定義して、文字が正しく表示されるようにしてるよ。
  • <title>はブラウザのウィンドウのタイトルに表示されるページタイトルだよ。

<head>の追加タグ

<head>タグの中には、ページに直接表示されないけど、サイトの機能に重要な情報を入れることができるよ。以下のタグを追加することができる：

  • <meta name="description" content="ページの説明"> — 検索エンジン向けのページの簡単な説明。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — モバイルデバイスに対応させるためのもの。
  • <link rel="stylesheet" href="styles.css"> — CSSファイルを読み込んでスタイリングするよ。
  • <script src="script.js"></script> — 外部JavaScriptファイルを読み込む。

これらのタグは、ユーザー体験を向上させたり、検索エンジンに最適化したり、必要なリソースを追加したりするのに役立つよ。

コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION