HTMLとは

HTML

HTMLとは、Hyper Text Markup Langauageの略です

部分的に説明するとHyper Text とは、ハイパーリンクを埋め込むことができるすごいテキストで、ハイパーリンクとはwebページにある下線が付いたテキストをクリックすると別のページに移動する事ができるというとても便利な機能。

Markup とは、文章に目印(タグ)を付ける事ができる。<h1>や<p>などのタグを付けることによってその文章に意味を持たせることができる。

Languageとは、言語。

まとめるとHTMLとは、ハイパーリンクを埋め込むことができタグを付けることでテキストに意味を与えることができる言語。

htmlの歴史

wwwsシステムの発明

1989年(CERN)のティムバー ナーズ=リーが研究状況の確認、論文の資料検索、数千人に及ぶ研究者に必要な情報を効率よく行渡らせる環境を作るためのシステムを考案

wwwシステムの実装と公開

1990年wwwをより実体化した提案書を発表
HTML,URL,HTTPの元になる仕組みやブラウザ、サーバなどのツールも構築し人類初のウェブページが公開された。

W3C設立

wwwで使用される技術を標準化する為にティム バーナーズ=リーがW3Cという非営利団体がつくられた

W3Cが勧告している規格

WWW=インターネットではない

インターネットはインターネット プロトコルを利用して相互接続されたコンピュータネットワーク全体のことを言っていてwwwはあくまで一部の機能である

インターネットに含まれる主な技術

  • telnet
  • 電子メール
  • ファイル転送
  • チャット
  • ネットニュース
  • WWW

目印の正式名称

例<h1>内藤 滉太</h1>

  • このようにテキストにつけた目印のことをタグという
  • 先頭についているタグを開始タグ、一番後ろについているタグを終了タグという
  • タグで全体を囲ったテキストを要素という
  • h1のタグはh1タグといい、h1で囲った要素はh1要素という
  • 要素の英語はelementタグはtag

タグのルール

  • タグの途中でスペースと改行を使わない
  • 基本的にはすべ全てこもじ全て小文字にするとよい

タグの種類

見出しに使われる1~6は順番に使う。

p

文章、段落を決める

ul,ol,li

箇条書きなどに使われるulは順不同リスト、olは番号順リスト

頻繁に使われるタグの意味やスペルをわすれずになおかつ適切なタグをつけるためにページ全体の構造と文章の内容や役割を理解することが大切!

HTMLの基本構造

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    <h1>内藤 滉太</h1>
    <ul>
      <li>2001年5月5日</li>
      <li>愛知</li>
      <li>O</li>
    </ul>
  </body>
</html

html要素

HTMLの始まりと終わりをしていする
全てのHTML文書に使われている

head要素

文書についての機械可読な情報(メタデータ)を記述できる
webブラウザには表示されない

body要素

HTML文書の本文を記述する
bodyに記述した文がwebブラウザに表示される

最低限のメタデータ

文字コード

<meta charset=="UTF-8">
文字化けを防ぐために<head>要素の上のほうに記述する。

title要素

webページのタイトルを記述する。ブラウザの検索結果を表示される

その他の属性と要素

br

文章を改行する。
改行には終了タグが存在しない。brのようなタグは空タグという

a

ハイパーリンクを設定する
href属性でリンク先を指定する

img

画像を表示する
src属性で画像ファイルの場所を指定する範囲がないので空タグになる

DOCTYPE宣言

バージョンによって多少の違いがあるのでそのファイルがどのバージョンで書かれているかを最初に宣言しないといけない。

属性とは

 <a href="xxx.html" target="_blank">愛知県</a>

  • 要素に追加するもの
  • 開始タグにスペースを空け属性名と属性値を=でつないでセットに追加しておく
  • 属性値は"もしくは'で囲む
  • 複数指定する場合は、さらにスペースを空ける。
  • 要素ごとに追加できる属性は決められているので主要なものを覚えるのがおすすめ
  • 属性は英語でattribute

まとめ

htmlはリンクを使って行き来きできるテキストで書いてある文章にタグを付けコンピュータに構造を理解させ効率よく情報の収集や閲覧ができるすごいテキスト