Menu

Subscribe

はじめての Web

HTML の基本から

Windows のスタートメニューから「メモ帳」を起動する。

次のテキストをまるごと、コピーし、メモ帳に貼り付ける。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのウェブページをつくる</title>
  <style type="text/css">
    body {
    color : burple;
      background-color : #d8da3d}
  </style>
</head>

<body>

<!-- メイン コンテンツ -->
<h1>私のはじめてのウェブページ</h1>


<p>まだ画像はありませんが、これからリンクやを入れます。</p>

<p>何かもっと書きたいのですが、まだ出来ません。</p>

<!-- 作成日時と名前をいれます -->
<address>作成日: 2018年11月13日<br>
  作成者: 自分</address>

</body>
</html>

メモ帳にコピーしたものをファイル名を付けて保存します。

  1. 名前を付けて保存する。
  2. 例えば、index.html と名付ける。
  3. 保存する場所は、デスクトップにする。
  4. メモ帳で保存するとき、文字コードをUTF-8、ユニコードにする。
  5. もし、UTF-8で保存できないときは、シフトJIS、メモ帳ではANSIで保存するが、charset="UTF-8"を charset="Shift_JIS"に変える。
  6. 保存できたら、デスクトップのindexアイコンをダブルクリックする。

画像を埋め込む

<img src="kirin.jpg" alt="きりん">

リンクの貼り方。テキスト115ページ。

たとえば、「Google.com」へのリンク。

<a href="https://google.com/">Google</a>

ここで、簡単にタグの意味を説明すると、
a href のa は、anchor 錨、のこと。href は、 hypertext reference、のこと。

https://google.com は、URL。ウェブブラウザの上部の窓に表示される。リンクを貼るには、その窓からコピーしてもよい。

練習問題

index.html ファイルをメモ帳を使って次のような編集をやってみよう。

  1. 自分の好きなゲームについてリンクを貼り、解説を書く。
  2. style で背景色を変更してみる。
  3. 画像を埋め込む。