[HTML] Embedded/Metadata Contents

11774 ワード
Metadata web img frontend TIL html テキストリンク

📷 Embedded Contents


画像やビデオなどの外部ソースをインポートまたは挿入するための要素.

<iframe> tag

  • は、現在のドキュメントに他のhtmlページを挿入するために使用されます.
    ex)ページ内の地図等
    • <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

    🖼️ <img> tag

    <img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">
     
<img class="aaa" width="100" heigh="150">
  • ドキュメントに画像を入れるために使用されます.
  • srcプロパティ:必須で、含める画像のパスを指定します.
  • altプロパティ:画像のテキスト説明.必要ではありませんが、スクリーンリーダーはaltの値を読み取り、ユーザーに画像を説明します.これはアクセス性の面で非常に役立ちます.また、ネットワークエラー、コンテンツブロック、デッドリンクなどの画像を表示できない場合は、このプロパティの値も表示されます.
  • 絶対パスはすべての人が近づくことができ、相対パスはそうではありません.
    • (私のパソコンのみ)
  • widthで、heightプロパティでサイズを制御できます.
  • srcsetプロパティ:反応型画像を作成できます.
    • <img src="imag/large.png" > srcset은 IE에서 지원이 안되므로 기본 이미지 하나 주기.
	 srcset="imag/small.png 300w, 
     		 imag/medium.png 450w, > 화면이 450보다 커지면 medium 이미지로 나옴 
             imag/large.png 600w"> > 화면이 600보다 커지면 large 이미지로 나옴
  • sizeプロパティで画像サイズを固定できます.
    • <img src="imag/large.png"
	 srcset="imag/small.png 300w, 
     		 imag/medium.png 450w, 
             imag/large.png 600w"
      sizes="(min-width: 600px) 600px, > 화면이 600보다 커지기 전까지는 300으로 고정
      		 (min-width: 450px) 450px, > 화면이 450보다 커지기 전까지는 300으로 고정
             300px">

    Webで使用する画像の種類


    TypeAbbreviationMIME typeFile extension(s)SummarybitmapJPEGimage/jpeg.jpg, .jpeg, .jfif, .pjpeg, .pjp静止画像の損失圧縮に適しています.(現在の使用頻度が最も高い.)bitmapPNGimage/png.png元の画像をより正確に表示するか、透明度が必要な場合に優先します.bitmapGIFimage/gif.複数のgif画像からなるアニメーションを表示できます.bitmapWEBPimage/webp.Webpの品質、圧縮率などに優れていますが、サポートされているブラウザは限られています.vectorSVGimage/svg+xml.さまざまなサイズのsvgを正確に描画する必要がある場合に使用します.ビットマップ画像と比較して、拡大しても画像は破砕しません.
                         vector 이미지 / bitmap 이미지 차이

    🎥 <video> tag

    <video src="/media/cc0-videos/flower.mp4">
</video>

<video controls width="250">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">
</video>
  • ビデオを挿入します.
  • srcプロパティはオプションです.ソースラベルが使えるからです.含めるビデオのパスを指定します.
  • コントロールのプロパティ:ボリュームの調整、ビデオの閲覧、一時停止/再起動(リカバリ)が可能なコントロール
    • を提供します.
  • autoplayプロパティ:ブールプロパティ(boolean)です.このプロパティを指定すると、ビデオはデータロードを完了するために停止することなく、最速の時間に再生を開始します.ただし、急に音声のある動画が再生された場合、UXはあまり良くない可能性があるので、muted属性を使ってすぐに再生することができます.
  • widthで、heightプロパティでサイズを制御できます.
  • ポスターのプロパティ:ユーザーがビデオを再生または閲覧する前にサムネイルを設定できます.

    • 🔊 <audio> tag

  • srcプロパティ:1つ以上のソースプロパティを使用してオーディオソースを指定し、ブラウザで最適なソースを選択できます.
  • controlsプロパティ、autoplayプロパティ、mutedプロパティは同じです.

    • 📘 Metadata Contents


    データを記述するデータ(本の著者、翻訳者、写真の日付、場所など)

    📌 <title> tag

  • ブラウザのタイトルバーまたはページラベルに表示されるドキュメントタイトルを定義します.
  • 単語からなるタイトルは避けるべきです.
    • 詳細な説明
  • を記入したほうがいいです.

    • 📌 <meta> tag

  • は、他のメタデータ関連要素として使用できないメタデータを表す.
    • <meta name="viewport">



  • nameプロパティとcontentプロパティを組み合わせて、ドキュメントを提供できるメタデータを名前-値ペアとして使用します.nameは名前を担当し、contentは値を担当します.

  • <標準メタデータ名>
  • アプリケーション-name:Webページで実行中のアプリケーションの名前.
  • 作者:文書作者.
  • の説明:ページの短くて正確な要約.多くのブラウザ(FirefoxやOperaなど)は、お気に入りページのデフォルトの説明としてdescriptionメタデータを使用しています.
  • ジェネレータ:ページを生成するソフトウェアの識別子.
  • キーワード:ページの内容に関連するカンマで区切られたキーワードのリスト.
  • 転診器:文書からの要求を制御するHTTP Refererヘッダを下表に示す.



  • viewport:ブラウザ全体でWebページを表示する領域

  • ブラウザの画面を移動中に表示するために使用します.

    • 📌 <link> tag

  • 外部リソースの関係を示します.たとえば、htmlにcssまたはiconを追加します.
    •   	<link href="main.css" rel="stylesheet"> -외부 스타일시트 연결
  	<link rel="icon" href="favicon.ico"> -아이콘
  • MIME type
    htmlがどのファイルであるかを確認するために(ファイルパスが分からない場合)、typeを指定します.
    •    	text/plain, text/html, image/jpeg, image/png

    📌 <script> tag


  • 外部JavaScriptコードのロードに使用します.

  • 通常はbodyの最後に位置決めすることをお勧めします.
    	&lt;script src="javascript.js">&lt;/script>
    • 新年運勢コードギフトバッグ01
    SLF4J