2024/05/08
HTMLを書いてみよう
リストタグの種類と書き方。スタイルを書いてみよう。
先週までのコーディング
マークアップが終わっていない方は、こちらのテキストをコピペして仕様してください。
以下コードをコピー【CTRL+C】して自分のindex.htmlにペースト【CTRL+V】してください。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML課題</title>
</head>
<body>
<h1>Web 【ウェブ】 WWW / World Wide Web / ワールドワイドウェブ</h1>
<p>Webとは、インターネット上で標準的に用いられている文書の公開・閲覧システム。文字や図表、画像、動画などを組み合わせた文書を配布することができる。文書内の要素に別の文書を指し示す参照情報（ハイパーリンク）を埋め込むことができる「ハイパーテキスト」（hypertext）と呼ばれるシステムの一種である。</p>
目次
概要
WebサーバとWebブラウザ
WebページとWebサイト
Webアプリケーション・Webサービス
歴史と名称
この分野の用語
他の辞典の解説
<h2>WEB</h2>
<p>“web” とは「蜘蛛の巣」を意味する英単語で、多数の文書が互いにリンクを介して複雑に繋がり合っている様子を蜘蛛の巣の網目状の構造になぞらえている。</p>
<h2>WebサーバとWebブラウザ</h2>
<p>Webで情報を提供するコンピュータやソフトウェアを「Webサーバ」（web server）、利用者の操作によりサーバから情報を受信して表示や処理を行うコンピュータやソフトウェアを「Webクライアント」（web client）という。</p>
<p>Webクライアントのうち、受信したページの内容を整形して画面に表示し、人間が閲覧するために用いるものを特に「Webブラウザ」（web browser）という。サーバとクライアントの間の通信には「HTTP」（Hypertext Transfer Protocol）と呼ばれる通信規約（プロトコル）が標準的に用いられる。</p>
<p>Web上の情報資源の所在の指定には、「https://www.example.co.jp/index.html」といった形式の「URL」（Uniform Resource Locator）という表記法が用いられる。Webサーバを表すドメイン名（ホスト名）と、Webサーバ上での資源の位置を指し示すパス（階層的なディレクトリ名とファイル名の組み合わせ）を繋げた形式になっている。</p>
<h2>WebページとWebサイト</h2>
<p>Webにおける情報の基礎的な単位は「Webページ」（web page/ウェブページ）で、見出しや文章などの文字情報をもとにHTML（Hypertext Markup Language）やCSS（Cascading Style Sheet）などのコンピュータ言語で体裁や構造、見栄えを記述する。</p>
<p>HTMLは記述された文字情報の中にソフトウェアへの制御情報を埋め込むことができるマークアップ言語と呼ばれる言語で、文字情報のこの部分が見出しで、本文はここからここまでで、段落の区切りはここである、といった指示を文書中に埋め込む形で記述することができる。</p>
<p>Webブラウザはこの制御情報に基づいて、見出しを太い大きな文字で表示したり、段落の間に空白を差し込むなどの整形を行い、閲覧者が文書の構造を把握しやすいように表示してくれる。</p>
<p>ページ内には文章だけでなく箇条書きや表、図形、画像、動画、入力要素（フォーム）などを掲載することができる。画像や動画など文字で書き表せない要素は外部のファイルをURLで指定して埋め込むことができる。</p>
<p>要素のページ内での配置や大きさ、枠線や罫線、文字の字形（フォント）や色といった具体的な見栄えに関する指定項目（スタイルという）は、当初はHTMLで構造とともに記述していたが、CSSという専用の言語で構造とは別に指定する方式が主流となっている。</p>
<p>ページ内の要素には外部の他の資源（多くの場合は他のWebページ）のURLを指し示すリンクを設定することができ、ブラウザ画面に表示されたリンクを指定して開くよう指示（クリックやタップなど）すると、表示がリンク中のURLで指定されたページに切り替わる。簡単な操作でリンクをたどって次々に文書から文書へ表示を切り替えていくことができる。</p>
<p>このリンク機能を利用して、本のように複数のページ群をまとめた単位を「Webサイト」（web site/ウェブサイト）という。サイト内のページからは外部のサイトのページへリンクを張ることもでき、Web全体がリンクを介して連結された巨大な地球単位の文書データベースとなっている。</p>
<h2>Webアプリケーション・Webサービス</h2>
<p>Webサーバには静的なファイルの送信だけでなく、ブラウザからの要求に基づいて動的にコンピュータプログラムを実行して何らかのデータ処理を行うこともできる。</p>
<p>また、Webブラウザにはページ上に記述された簡易なプログラム（スクリプトという）を実行し、サーバと任意のタイミングで通信したり、利用者の操作に応じて表示内容を変化させたりすることができる。</p>
<p>このような動的な仕組みを組み合わせ、サーバとブラウザが連携して利用者が対話的に操作することができるアプリケーションソフトを構築することができ、これを「Webアプリケーション」あるいは「Webサービス」という。著名な応用例として、ブラウザで買い物ができるオンラインショップ（ECサイト）や、利用者同士がコミュニケーションできるSNSなどのネットサービスがある。</p>
<h2>歴史と名称</h2>
<p>Webはインターネットがまだ学術機関を中心に利用されていた頃、1989年に欧州核物理学研究所（CERN）のティム・バーナーズ・リー（Tim Berners-Lee）氏が所内の論文公開・閲覧システムとして考案したものが基礎となっている。</p>
<p>1990年代にインターネットが一般に開放され普及していく過程で、電子メールなどと共にネットの代表的な応用システムとして広く利用されるようになった。2000年代中頃には主に日本を含む先進国で欠かすことのできない重要な情報インフラの一つに成長している。</p>
<p>もとは “World Wide Web”、略して「WWW」が正式名称で、現在もWebサーバのホスト名などにこの名が残っているものの、英語では次第に “the Web” （固有名詞のWeb）のように略されるようになり、さらに進んで現在では一般名詞の “web” がインターネットのWebを指すことが増えている。日本では当初「ホームページ」の名称で紹介され、現在も初心者向けの説明などで多用されるが、「ウェブ」「Web」の呼称が浸透しつつある。</p>
</body>
</html>
今日の授業のポイント①
リストタグを書く
リストタグには ulタグ・olタグ・dlタグ の三種類がある
<ul>
<li>リスト要素</li>
<li>リスト要素</li>
<li>リスト要素</li>
</ul>
<ol>
<li>リスト要素</li>
<li>リスト要素</li>
<li>リスト要素</li>
</ol>
<dl>
<dt>リストのタイトル</dt>
<dd>リスト要素</dd>
<dd>リスト要素</dd>
<dd>リスト要素</dd>
</dl>
今日の授業のポイント②
スタイルシートを書いてみよう
HTMLにスタイルシートを書く方法は主に３つある。
- ①HTMLタグに直接記入する方法
- ②HTML内にSTYLEタグを記入して記述する方法
- ③外部スタイルシートファイルに記述する方法