基本のタグを使ってHTMLを書いてみよう!

スポンサードリンク
レクタングル広告(大)

基本のタグを使ったHTMLファイルを作成しよう

HTMLの記述ルールや基礎的なタグを使って、簡単なHTMLを記述し、どのように表示されるか確認してみましょう。
今回使うタグは以下のタグ(要素)です。

  1. html
  2. head
  3. body
  4. title
  5. h1
  6. h2
  7. p

また、作業手順の概要と作成イメージは以下の通りです。

  1. メモ帳を開いてHTMLを記述する
    (サクラエディタを利用してもOK→サクラエディタについて
  2. ブラウザで確認する
  3. 変更点があれば修正後、再度確認する

完成イメージ(IEでの確認イメージ)
作成するWebページのイメージ

1.メモ帳を開いてHTMLを記述する

メモ帳(もしくは他のテキストエディタ)を開いてHTMLを記述します。

  1. 「スタートボタン」をクリック
  2. 「すべてのプログラム」をクリック(またはポイント)
  3. 「アクセサリ」をクリック
  4. 「メモ帳」をクリック

HTMLは以下のように記述して下さい。(「」は入力しません)

  1. html、head、bodyを記述しましょう
  2. タイトル(titleタグ)は「パスタの種類」
  3. h1には「パスタの種類」を設定
  4. h2には「ロングパスタ」「ショートパスタ」をそれぞれ設定
  5. ロングパスタの下には以下の文章を段落設定して記述します
    「ロングにカットされている棒状のパスタ。スパゲッティやスパゲッティーニ、リングィーネ等がある。」
  6. ショートパスタの下には以下の文章を段落設定して記述します
    「ロングに比べて短くカットされているパスタで形状も様々。マカロニやペンネなどが有名。」

入力ができたら保存します。

  1. メニューバーのファイルから「名前を付けて保存」をクリック
  2. 保存場所(任意:下図ではマイドキュメント)を指定した後、ファイル名に「pasta.html」(ドットhtmlの入力ミス注意)と入力し、「保存」をクリック
    メモ帳を利用して保存

※名前や拡張子を間違ってしまった場合、保存した場所へ移動し、右クリックの「名前の変更」で名前や拡張子を変更しましょう。

2.ブラウザで確認する

保存されたHTMLファイルをブラウザで確認します。

  1. ブラウザを起動します
  2. pasta.htmlを保存した場所を表示します
  3. htmlファイルをダブルクリックするか、ブラウザにドラッグします

※編集がある場合、ブラウザはそのままにしておきましょう。

3.変更点があれば修正後、再度確認

修正があれば、再度メモ帳で編集後(ブラウザでは編集はできない)、再度ブラウザで確認します。

  1. メモ帳を起動する(pasta.htmlがメモ帳で開いている場合は3から)
  2. pasta.htmlの保存されている場所を開き、pasta.htmlのファイルをメモ帳にドラッグする
  3. 変更後、メニューバーの「上書き保存」をクリックする
  4. pasta.htmlのブラウザ画面を表示し、編集前の状態の場合、キーボードの「F5」を押して更新する
スポンサードリンク
レクタングル広告(大)
レクタングル広告(大)

コメントをどうぞ

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)