中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

子どものホームページの作り方を教えるための重要なポイントと説明

子どものホームページの作り方を教えるための重要なポイントと説明 Web

子どもにホームページの作り方を教えるための重要なポイントを簡単に説明していきます。まずはどんな知識が必要なのかを知りたい方に向けた記事になっています。

ポイント

子どもにホームページの作り方を教えるための主要なポイントを以下にリスト化します。

  1. パソコンの使い方、及びタイピング能力
  2. HTML、CSS、JavaScript の基礎知識
  3. ウェブサイトの構造とレイアウトの計画と設計
  4. テキストエディタとブラウザの使い方
  5. レイアウト、色、タイポグラフィなどの基本的なWebデザイン原則
  6. 画像、動画、リンクの追加
  7. 画面サイズに応じたレスポンシブなデザイン
  8. ウェブサイトを公開するための基礎知識(サーバー・ドメインなど)
  9. 検索エンジン最適化のためのウェブサイトの最適化
  10. ウェブサイトのセキュリティとプライバシーに関する考慮事項
  11. ウェブサイトデザインにおいて創造力と個人的な表現を促すこと

HTMLで沢山使う要素とサンプルコード

HTMLは基礎中の基礎。どんなコードがあるのか表で纏めています。

ElementSample CodeMeaning
<html><html> </html>Webページを定義する
<head><head> </head>文書に関するメタデータを含む
<title><title>Page Title</title>Webページのタイトルを指定する(ブラウザのタブに表示される)
<body><body> </body>Webページのメインコンテンツを含む
<h1> – <h6><h1>Heading</h1>ページのセクションの見出しを定義する(h1が最も重要で、h6が最も重要でない)
<p><p>This is a paragraph.</p>テキストの段落を定義する
<a><a href=”https://ma-san.org/</a>別のWebページまたはリソースへのハイパーリンクを定義する
<img><img src=”image.jpg” alt=”Image”>Webページに画像を表示する
<ul><ul> <li>Item 1</li> <li>Item 2</li> </ul>箇条書きリスト(順不同リスト)を定義する
<ol><ol> <li>Item 1</li> <li>Item 2</li> </ol>番号付きリスト(順序付きリスト)を定義する
<br><p>Line 1<br>Line 2</p>改行する
<hr><hr>罫線を挿入する

上記のよく使うタグをベースに、マークアップをしたサンプルコードは下記となります。

<!DOCTYPE html>
<html>
  <head>
    <title>Webサイトのタイトル</title>
  </head>
  <body>
    <header>
      <h1>Webサイトのタイトル</h1>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="about">
        <h2>About</h2>
        <p>ここにWebサイトに関する情報が入ります。</p>
      </section>
      <section id="services">
        <h2>Services</h2>
        <p>ここにWebサイトが提供するサービスに関する情報が入ります。</p>
      </section>
      <section id="contact">
        <h2>Contact</h2>
        <p>ここにWebサイトに連絡する方法に関する情報が入ります。</p>
      </section>
    </main>
    <footer>
      <p>Copyright &copy; Webサイトのタイトル</p>
    </footer>
  </body>
</html>

こちらのサンプルコードを「index.html」というファイル名で保存をすると簡単なWebサイトの表示が可能です。

とはいえタイピング能力が重要

寿司打
「寿司打」はローマ字入力用のタイピング練習ゲームです。無料&ブラウザで遊べますので、ちょっとした空き時間の練習や暇つぶしにどうぞ。複数の入力に対応しており、表示されているキー以外にもお好みの打ち方でタイピングいただけます。

タイピングは必須のスキルで、これがままならないとプログラミングなどを覚えるどころではありません。

楽しくタイピングを学ぶためには寿司打さんのようなタイピング練習を公開してくれているWebサイトで学習すると良いと思います。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

Web
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました