🗂

精神と時の部屋日記2 | HTMLチュートリアル

2023/03/07に公開

htmlチュートリアルの備忘録です。
チュートリアル


HTMLを始めよう!

  • 目的:HTMLの基礎を知る。

HTMLとは?

  • HTML/Hypertext Markup Languageというマークアップ言語
  • コンテンツの一部を要素で囲み特徴的に表示する。
  • 大文字小文字は区別しない。基本全部小文字で書く。
    ex)
<p>this is tutorial</p>

this is tutorial

HTML要素の構成

  • 開始タグ、内容、終了タグ
  • 要素の入れ子ネスト
  • ブロック要素:改行されるやつ
  • インライン要素:部分的要素で改行なし
  • 空要素:単一タグ構成 imgとか
  • 属性:要素内追加情報 classとか引用符つける
  • 論理属性:disabledとか
  • 文書構成:html, head, meta charset="utf-8", title, body
  • ホワイトスペース:1文字に短縮される
  • 特殊文字エスケープ:
  • コメントアウト:
<!-- <></> -->

メタデータ取扱

  • 目的:ヘッドへの理解

ヘッド構成

  • メタデータ:表示されないデータ
  • title要素:html文書全体のタイトルである。メタデータ
  • meta要素:文字コード指定,name,content属性
  • icon:ファビコン
  • cssとjs:linkとscript要素で追加する。src属性
  • 言語:lang属性

HTMLテキストの基礎

  • 目的:理解度向上

基本

  • p要素:段落
  • h要素:見出し
  • span要素:CSS,js適用
  • ul, liでリスト
  • em強調 strong
  • iイタリック b太字 u下線

ハイパーリンクの作成

  • 目的:複数ファイルをリンクする

ハイパーリンク

  • aで囲み、titleで補足情報
  • aの中にimg参照することで画像をリンクに

URLとパス

  • 同ディレクトリ:ファイル名のみ
  • サブ:ディレクトリ/ファイル
  • 親ディレクトリ:../

フラグメント

  • id属性:特定箇所にリンク idにリンクするには#を語尾に例えば
    id=test contacts.html#test こんな感じ
  • 絶対URL:プロトコルとドメイン名含む
  • 相対:ファイルの相対的場所
  • download属性:ダウンロード時
  • mailto:メールリンク

高度なテキスト整形

  • 目的:高度な意味づけ機能を知る

説明リスト

  • dl,dt説明用語,dd説明定義 要素:インデントがある
  • blockquote要素とcite属性:引用
  • q要素:インライン引用
  • 略語abbr要素:省略語
  • address:連絡先
  • sup:上付き文字
  • sub:下つき文字
  • code:コード
  • pre:空白保持コードブラック
  • var:変数名マークアップ
  • kbd:入力マークアップ
  • samp:主力マークアップ
  • time:時間

文書とWebサイトの構造

  • 目的:文書の構造化と簡単なweb構造

基本

  • div:ブロックシンプルな
  • br:改行
  • hr:罫線

HTMLのデバッグ

  • 目的:デバッグ用ツールの使い方

デバッグ

  • 構文エラー:スペルミス
  • 論理エラー:コードが噛み合わない

Discussion