Nagashima Laboratory

HTMLの基本・Webページ制作の練習

環境の確認

作業を始める前に環境を確認します。

▶拡張子の表示

▶エディタソフトの確認

▶アップロード用のソフト

▶フォルダの準備

  • Webサイト用のフォルダを作る
フォルダ構成の例

HTMLファイルの基本形

HTMLファイルを作っていきます。ここでは、Visual Studioコードでの手順を説明します。

準備：「html_sample_01」という名前のフォルダを予め作成しておきます

①新規>新しいテキストファイル を選び、新しいファイルを作成します

②「言語の選択」をクリックし、検索窓に「html」と入力、HTMLを選択します

③下記にあるサンプルコードをコピー＆ペーストします

④ index.html という名前で保存します（予め作成しておいたフォルダ内に保存）

▼サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <title>サンプルページ</title>
  </head>
    <body>
      <h1>ページタイトル</h1>
      <p>文章を入力します</p>
  </body>
</html>

※日本語部分はサンプルなので、適宜書き換えOKです。

動作確認

  • ブラウザで開いて表示を確認します
  • 作成したindex.htmlをダブルクリックしてブラウザで開きます
  • 使用するブラウザを指定したい場合は、右クリック＞アプリケーション指定

HTMLの書式

  • <>で囲まれている「タグ」と呼ばれる文字列を使って、文章を挟むことで意味付けをしていきます
  • 始めに使うタグを「開始タグ」、終わりに使うタグを「終了タグ」といいます。終了タグは、要素名の前にスラッシュを記載します。
  • HTMLのタグは半角英数字で記述します。大文字・小文字は区別しませんが、一貫性を保つため、通常小文字で表記します（参考：HTMLを始めよう）

HTMLの基本構造

  • <!DOCTYPE html>から始まります
  • 全体が<html>タグで囲まれています
  • <head>要素には主にページの基本情報が含まれます。<head>要素の内容はページの表側には表示されません。
  • <body>要素には、実際にページに表示される中身が含まれます
  • タグは入れ子構造にできます（下記図参照）

サンプルコードの中身

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <title>サンプルページ</title>
  </head>
    <body>
      <h1>ページタイトル</h1>
      <p>文章を入力します</p>
  </body>
</html>

<head>要素内

参考：ヘッド部には何が入る？

<body>要素内

リンク（別のファイルを作ってリンク）

  • 先に作ったindex.html を複製して、about.htmlと名前変更します
  • <body>〜</body>の間に次の文を追加します

▼index.html内に追記

<p>
 <a href="about.html">aboutページへ</a>
</p>

※ここでは<p>はなくても機能しますが、 基本的にテキストはタグの中に入る形を取ります

▼about.html内に追記

<p>
 <a href="index.html">ホームへもどる</a>
</p>

画像の表示

  • 画像を準備して、半角英数字で名前をつけます（sample.png など）
  • 手元に画像がない方は、下記をダウンロード（右クリック→保存）して使用してください
  • Webサイト用のフォルダ内、imagesフォルダに入れて、次のコードを書きます

▼index.html内に追記

<p>
  <img src="images/sample.png" alt="画像">
</p>
  • <img>タグには終了タグがありません。単独のタグで動作します（空要素）
  • src→source ソース=源 画像がある場所のこと
  • alt→alternate text オルト 代替テキストのこと 画像が表示されないときに代わりに表示されたり、読み上げソフトで読まれる情報。画像検索の参考情報。

《参考》

リンク（外部サイトへリンク）

<p>
  <a href="https://www.google.com/" target="_blank">google</a>
</p>

リンクしたいページのURLを

href=""

のところに入力します。

target="_blank"

を入れると、別タブで開くようになります

《参考》

() Category: 資料 Tags: