【WEB基礎】2−3章 Webページのチュートリアル

今回は、本当に簡単なウェブページを作成してみたいと思います。

ウェブページは以下を使用して作成します。

HTML
VSCode（Integrated Development Environment、IDE）
- エディタとも言います。
Chrome
MacOS

VSCodeのインストール

エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も多く利用されていると言われています。

上記の理由＋自分が慣れている理由で今回はVSCodeでやっていきたいと思います。

VsCodeは以下のサイトでインストールできます。

インストール際はコンピューターのOSに該当するファイルをインストールしてください。

https://code.visualstudio.com/

ウェブページの構成

簡単なウェブサイトなので、構成は以下のようにしたいと思います。

タイトル（ヘッダー）
ページ項目（ナビゲーション）
サブタイトル
画像（全画面同様）
説明文（複数の段落）

コーディング

デスクトップに「web」のフォルダを作成します。

次にVSCodeを開き、上記で作成した「web」フォルダを選択します。

「1.html」ファイルを作成（HTML内容）

２番目の赤を押します。
ファイル名を「1.html」のように記入してエンターを押します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Web Tutorial">
    <meta name="keywords" content="HTML, CSS">
    <meta name="author" content="anveloper">
    <title>Web site - HTML</title>
</head>

<body>
    <header>
        <h1>Web</h1>
    </header>
    <nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JAVASCRIPT</a></li>
        </ul>
    </nav>
    <main>
        <h3>HTML</h3>
        <p>
            <img src="sample.jpg" width="100%">
            <strong><u><a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language" target="_blank">HyperText
                        Markup
                        Language</a></u></strong>（ハイパーテキスト マークアップ
            ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。SGMLを元に開発された。World Wide
            Web（WWW）において、ウェブページ[注釈
            1]を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
        </p>
        <p>
            2019年6月以降[1]、WHATWG により仕様が作られ、それがW3C勧告となる流れになっている[2]。W3C は、XML ベースの規格である XHTML の勧告も行っている。
        </p>
    </main>
</body>

</html>

<head>タグ：<meta>タグを使って作成者やキーワード、説明を記述しました。
項目（HTML、CSS、JAVASCRIPT）は英語でリストになるので<li>タグを使用し、<li>タグは<ul>または<ol>タグと一緒に使います。ここでは順次がない項目なので、<ul>タグを使いました。
「<li><a href=”2.html”>CSS</a></li>」のことですが、項目を押したとき、CSS関連ページに遷移させたいため、ハイパーリンクタグである<a>タグを使い、「2.html」へ遷移できるように指定しています。
<main>：本文をこのタグで囲みます。
- ヘッダーやナビゲーションは本文ではないので、囲みません。
<h3>HTML</h3>：こちらはサブタイトルです。
- hタグには<h1>から<h6>までありますが、数字が低ければ低いほど文字のサイズが大きくなります。
<p>：段落を表現したいため、使いました。
- 今回、２個使用していますが、２段落で表示したいからです。
- 本文の内容はこちらのWIKIからコピペしました。
<img src=”sample.jpg” width=”100%”>：「sample.jpg」の画像を表示します。
- サンプル画像は無料サイトであるこちらでダウンロードして、分かりやすい名前に変更します。
- そのあと、webフォルダに格納すればOKです。
<strong>：その名の通り、このタグに囲まれる文字列は太文字で表示されます。
<u>：underlineの略語で、囲まれた文字列にアンダーラインをひきます。

「2.html」ファイルを作成（CSS内容）

「1.html」ファイルをコピーして<title>タグと「サブタイトル、本文」を変更するだけです。
CSSの本文はこちらのWIKIからコピペしてきました。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Web Tutorial">
    <meta name="keywords" content="HTML, CSS">
    <meta name="author" content="anveloper">
    <title>Web site - CSS</title>
</head>

<body>
    <header>
        <h1>Web</h1>
    </header>
    <nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JAVASCRIPT</a></li>
        </ul>
    </nav>
    <main>
        <h3>CSS</h3>
        <p>
            <img src="sample.jpg" width="100%">
            Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日:
            段階スタイルシート[1]）は、HTMLやXMLの要素をどのように修飾（表示）するかを指示する仕様の一つで、World Wide Web Consortium (W3C)
            がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。
        </p>
        <p>
            CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。以下の点を特徴とする。
        </p>
        <ul>
            <li>ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。</li>
            <li>ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる。[注釈 1]</li>
        </ul>
    </main>
</body>

</html>

「3.html」ファイルを作成（Javascript内容）

「1.html」ファイルをコピーして<title>タグと「サブタイトル、本文」を変更するだけです。

Javascriptの本文はこちらのWIKIからコピペしてきました。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Web Tutorial">
    <meta name="keywords" content="HTML, CSS">
    <meta name="author" content="anveloper">
    <title>Web site - Javascript</title>
</head>

<body>
    <header>
        <h1>Web</h1>
    </header>
    <nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JAVASCRIPT</a></li>
        </ul>
    </nav>
    <main>
        <h3>Javascript</h3>
        <p>
            <img src="sample.jpg" width="100%">
            JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
        </p>
        <p>
            利用される場面はWebサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバ、デスクトップからスマートフォンまで多岐にわたっている。
        </p>
        <p>
            Javaと似た名称を持つが、異なるプログラミング言語である（#歴史を参照）。
        </p>
    </main>
</body>

</html>