IT 1NOTE パソコンスクール

岡山市北区・静かな住宅街のパソコン教室。仕事、日常生活でパソコン活用術。 スマホやタブレット~資格取得まで。IT1NOTE(アイティーワンノート) パソコンスクールつしま校

TEL.086-252-7585

〒700-0088 岡山市北区津島笹が瀬10-16

ホームページ作成

自分でHP作成をしたい、学生さんから自営業の方まで

岡山市北区 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン

講師きびだんご桃子
教室ブログTOP

 

 

教室で習いたいご要望の中で、「自分でHP作成をしたい」という

ご要望もございます。

※HPでも通じるのですが、Webサイトが正しい意味になります。

 

HPに興味がある、自分でHPを作ってみたい、自分のお店のHPを

新たにリニューアルをしたい等、年齢問わず、学生さんから社会人、

シニアの方までと、ブログと合わせてHP作成もというお声もございます。

 

タイピング

 

学生の生徒様は、プログラミング言語でHP作成をしております。

 

また自営業でお店を持たれてる生徒様は、

お店のHP作成の内容だけでなく、業務の書類作成や、データ管理、

セキュリティ関連など、幅広い内容を習われております。

 

それぞれHPでもご要望によってレッスンの内容や進め方が違います。

ご興味のある方はぜひご相談下さいませ。

 

 

パソコン初心者の方、シニアの方、大歓迎!

もしご検討されてる方は、見学、無料体験もございますので、

どうぞお気軽にお問い合わせ下さいませ。

* 無料体験&無料カウンセリングでお待ちしております。

 

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No10 brタグって何?

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

8. HP作成No8 Webページ写真の準備

9. HP作成No9 Webページに写真

 

スキマ時間講座も10回目になりました。
このページから入った方は、
上記1~9までの工程を順を追って作業確認して下さい。
決して難しいことはしていないはずです。

さて、今回の目的は文字の改行についてです。

さっそく始めます。

デスクトップ → 2016tabiフォルダー → index.html

これをメモ帳で開きます。(下図参照)

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

次のような文章を写真挿入タグの下に追加入力します。

「2016年11月17日(木) 晴れた中のサイクリングは最高!」

下図赤丸内を参照

20161117br%e3%82%bf%e3%82%b03

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

ファイル → 上書き保存

完成したindex.htmlをブラウザ表示で確認します。

①index.htmlの上で右クリック。
②プログラムから開く → InternetExplorer

下図のようにIEのブラウザで表示確認ができます。

20161117br%e3%82%bf%e3%82%b01

よくみると、
「2016年11月17日(木)晴れた中のサイクリングは最高!」

が写真横に。

一つ改行できたら、下に下がるのでは?と発想してみます。

そこで、brタグ(強制改行)を文の前に入力します。

<br>
2016年11月17日(木)晴れた中のサイクリングは最高!

 

20161117br%e3%82%bf%e3%82%b04

ファイル → 上書き保存

index.htmlファイルをブラウザ表示で開いて確認。

①index.htmlの上で右クリック。
②プログラムから開く → EnternetExplorer

20161117br%e3%82%bf%e3%82%b02

文字が下に落ちてくれました。
brタグは強制改行してくれるのです。

でも少し窮屈にみえます。
そこで、もう一度brタグを入力してみます。
思い切って2つ追加、計3つになりました。
3行分改行するイメージです。

<br>
<br>
<br>
2016年11月17日(木)晴れた中のサイクリングは最高!

下図参照

20161117br%e3%82%bf%e3%82%b05

ファイル → 上書き保存

index.htmlファイルをブラウザ表示で開いて確認。

①index.htmlの上で右クリック。
②プログラムから開く → EnternetExplorer

20161117br%e3%82%bf%e3%82%b06

すると・・・。

どうでしょうか?上手く文字が配置された感じです。

brタグ(強制改行)は
<>開始タグ ~ </>終了タグで1セットのタグと違い単独で使えます。

終了タグがないのです。

<br>とよく似ているのに<br />がありますが、同じ意味です。

ここでは長くなるので解説を省きます。
興味のある方は、下記の用語で検索をかけてみて下さい。

<br>   <br />   html  Xhtml html5

brタグを覚えるとホームページの修正に役立ちますね。

スキマ時間で覚えていきましょう♪

 

HP作成No10
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No9 Webページに写真

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

8. HP作成No8 Webページ写真の準備

 

今回の目的はWebページへ写真を挿入します。

まず、HP作成ファイルと写真のある場所の確認です。

①デスクトップにある2016tabiを開く
※ここまでの作業は上記No1~8で確認ください

②imgフォルダーを開く

20161115hp%e6%8c%bf%e5%85%a5%e5%86%99%e7%9c%9f%e7%a2%ba%e8%aa%8d

③2016kokubunji.JPGがある事を確認。
この写真をWebページに入れます。

一つ戻って
2016フォルダー内のindex.htmlをメモ帳で開く(下記図参照)

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b92

 

今回は<h2>晴れの国おかやま発~の旅記録</h2>の下に

写真を挿入してみます。まず、以下の画像の配置タグを入力。

<h2>晴れの国おかやま発~の旅記録</h2>
<img src />

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a51

次に<img src />タグの中に
画像がどこにあるのか?を示す 画像パス を入力します。

<img src=”img/2016kokubunji.jpg” />

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a52

更に下記のように入力しましょう。

<img src=”img/2016kokubunji.jpg” alt=”備中国分寺五重塔” />

alt=”〇〇〇”はalt属性といい、代替テキストの情報です。

※代替テキストとは?  画像のかわりに文字で表示
 ネット速度が遅い時代は、画像が出て来るのに時間がかかったのだ

img%e3%82%bf%e3%82%b0%e6%8c%bf%e5%85%a53

ファイル → 上書き保存

以下の図のように index.htmlファイルを
InternetExplorerで開いて確認しましょう。

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

下記のように写真入りの
Webページになっていれば成功です。

 

20161115%e7%94%bb%e5%83%8f%e5%85%a5%e3%82%8ahp%e5%ae%8c%e6%88%90

 

また一歩前進です。

スキマ時間で覚えていきましょう♪

 

HP作成No9
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No8 Webページ写真の準備

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

7. HP作成No7 リストを作成する

 

今回はWebページに写真を入れる準備です。
その前に。

Webページのファイル保存の確認です。
基本はアルファベットと数字で名前をつける事を覚えます。

日本語でのファイル名は、基本 × です。

文字化け等で、ややこしくなるので、

ファイル名は単純にアルファベットと数字と覚えましょう。

写真ファイルも同じです。

20161112%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e5%90%8d1

では、これからWebページで使う写真を用意します。

今回は、上記の国分寺の写真を用意してみました。

20161112%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%abimg1

 

デスクトップにある2016tabiフォルダーを開いて

imgフォルダーに写真をドラッグ&ドロップします。

※Webサイト(ホームページ)はこの2016tabiフォルダーで管理している

 

20161112%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%abimg2

 

上図の赤丸のように

写真がimgフォルダーに入っていれば、準備OKです。

 

スキマ時間で覚えていきましょう♪

 

HP作成No8
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No7 リストを作成する

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

6. HP作成No6 最初に覚えたい5つのHTMLタグ

 

今回はWebページにリストを作成します。

このリストは、後にメニュー項目に変えることができます。

下図教室Webページ メニュー項目を参照

web%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%aa%e3%82%b9%e3%83%88%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc

では、さっそく作成してみましょう。

前回作成のindex.htmlファイルをメモ帳で開きます。

※メモ帳で開く方法がわからない方は、HP作成No4を参考

以下のリスト全体を表すタグを入力します。(下図参照)

<ul>〇〇〇</ul>

20161110ul%e3%82%bf%e3%82%b01

次にul開始タグとul終了タグの間に

項目にするタグ<li>〇〇〇</li>を入力。(下図参照)

<ul>
<li>トップ</li>
<li>旅日記</li>
<li>旅写真</li>
<li>お知らせ</li>
</ul>

20161110ul%e3%82%bf%e3%82%b02

入力終了しましたら

ファイル→上書き保存

最後はWeb表示確認します。

① index.htmlの上で右クリック

② プログラムから開く→InternetExplorer

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

リスト表示ができていたら成功です。下図参照

20161110ul%e3%82%bf%e3%82%b03

 

ここまで、あまり難しいことはしていません。

スキマ時間で覚えていきましょう♪

 

HP作成No7
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No6 最初に覚えたい5つのHTMLタグ

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

5. HP作成No5 見出しの設定

 

今回は、ここまで使用した
HTMLタグと、よく使うHTMLタグを少し整理してみます。

20160202珈琲タイム

① <title>〇〇〇</title> Webページのタイトル(ブックマーク登録)

② <h1>〇〇〇</h1>  見出しレベル1(見出しレベルは1~6段階)

③ <p>〇〇〇</p> 段落を定義
※段落とは一まとまりのグループのイメージ

④ <br>  改行を行います。単独で使うタグで/の終了タグはなし。

⑤ <table>〇〇〇</table> 表を定義

 

①と②は、ここまでに使い方を体験。
③~⑤の使い方は、これからです。

お仕事、生活のスキマ時間で覚えて行きましょう♪

 

HP作成No6
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No5 見出しの設定

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

4. HP作成No4 メモ帳文字入力とWeb表示

 

デスクトップの2016tabiフォルダーの
index.htmlファイルをメモ帳で開きます。

① index.htmlファイル上で右クリック

②プログラムから開く

③メモ帳をクリック(メモ帳で編集)

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b92

 

メモ帳が開くので、今回はbodyの中に
見出し開始タグ<h1> 見出し終了タグ</h1>を入力してみる。

<body>
<h1>晴れの国旅日記</h1>
<h2>晴れの国おかやま発~の旅記録</h2>
</body>

%e8%a6%8b%e5%87%ba%e3%81%97%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b1

入力出来たら上書き保存します。

ファイル → 上書き保存

保存ができたらファイルを閉じます。

 

%e3%83%a1%e3%83%a2%e5%b8%b3%e6%9c%ac%e6%96%872

 

前回同様、Web表示で確認してみましょう。

① 閉じたindex.htmlの上で右クリック

② プログラムから開く→ InternetExplorer クリック

 

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

これでWeb表示確認ができました。

今回は見出しタグを入力した表示に変わったはずです。

%e8%a6%8b%e5%87%ba%e3%81%97%e3%82%92%e3%81%a4%e3%81%91%e3%82%8b2

見出しタグはWebページの文書構成においての段落レベルです。

h1 見出し1 大見出し

h2 見出し2 中見出し

h3 見出し3 小見出し

 

h1はよくページタイトルとして使用、h2はサブタイトル等に使用。
以下h3、h4、・・・・と表示文字がだんだん小さくなっていく。

見出しは、文字の大きさを

統一したホームページにする事が簡単にできるメリットがあります。

また後に出て来るスタイルシート(CSS)設定に役立ちます。

 

まだ文字だけですが、大きな前進です。

 

HP作成No5
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No4 メモ帳文字入力とWeb表示

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法をシンプル解説にて記載。

これまでの内容

1. HP作成No1  はじめの一歩(メモ帳)

2. HP作成No2 作成基本タグ(メモ帳)

3. HP作成No3 HPファイルと素材の管理

 

前回デスクトップの2016tabiフォルダーを開いて
保存した index.htmlファイルをメモ帳で開いて編集します。

① index.htmlファイル上で右クリック

②プログラムから開く

③メモ帳をクリック(メモ帳で編集)

 

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b92
メモ帳が開くので、さっそく下記のように文字入力してみる。

<body>
晴れの国旅日記
晴れの国おかやま発~の旅記録
</body>

%e3%83%a1%e3%83%a2%e5%b8%b3%e6%9c%ac%e6%96%871

入力できたら更新(上書き保存)してみます。

① ファイル → 上書き保存

%e3%83%a1%e3%83%a2%e5%b8%b3%e6%9c%ac%e6%96%872

これで、更新(上書き保存)ができました。

前回と違い今回は body の中を入力しましたので
Web表示されるはずです。確認してみましょう。

① index.htmlを右クリック

②プログラムから開く → InternetExplorerをクリック

%e3%83%a1%e3%83%a2%e5%b8%b3%e9%96%8b%e3%81%8d%e6%96%b93

 

これでWeb表示で
先ほどの入力した文字が表示されているか確認できます。

ie11%e7%a2%ba%e8%aa%8d1

きちんとIE(InternetExplorer)で文字が表示されました。

注目することは、メモ帳で2行で編集した言葉。

晴れの国旅日記
晴れの国おかやま発~の旅記録

IEでは1行表示になっています。

つまり改行はWebブラウザ表示には影響されないのです。

今回のポイントは3つ。

1.メモ帳での編集の続き、保存。
2.IE等のWebブラウザ表示での確認。
3.メモ帳編集での改行はWeb表示に影響されない。

次回はさらに編集していきます。

 

HP作成No4
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No3 HPファイルと素材の管理

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法を記載します。
尚、なるべくシンプルに解説します。

その前に前回の内容をチェック

前回の内容

1. HP作成No1 はじめの一歩(メモ帳)

2. HP作成No2作成基本タグ(メモ帳)

前回デスクトップに保存した index.htmlファイルを
今回は、フォルダーを作成して管理します。

①デスクトップ上で右クリック → 新規作成 → フォルダー
(任意のフォルダ名をつける)※下記は2016tabiというフォルダー

②フォルダー作成ができたら index.htmlフィルを
先ほど作成したフォルダに、ドラッグ&ドロップする。

hp%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e6%95%b4%e7%90%861

 

デスクトップ上に作成したフォルダー(2016tabi)を
ダブルクリックで開いてみます。

※ホームページは、このフォルダー(2016tabi)で一括管理のイメージ

index.htmlのフィアルが保存されているのがわかります。

そこで今度は、「img」という名のフォルダーを作成します。

何もない所で 右クリック→新規作成→フォルダー(下記図参照)

下記のように フォルダ img  と index.htmlファイルがあればOK。

 

hp%e3%83%95%e3%82%a9%e3%83%ab%e3%83%80%e6%95%b4%e7%90%862

ホームページ作成ファイル(html 編集ファイル)と

フォルダー img (写真素材などを保存していく)

ホームページ(Webページ)は編集ファイルと写真は
別々に管理するのが、後で更新整理しやすいのです。

次回はいよいよ簡単ページ編集です。

 

HP作成No3
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ

HP作成No2 作成基本タグ(メモ帳)

岡山市北区 個別指導 実践型パソコン教室

IT1NOTE(アイティーワンノート)パソコンスクール つしま校
実践型個別指導 身体で覚える実践パソコン
講師きびだんご店長

好きな事をするフリ―講座での実践型個別指導の教室
フリー講座単価60分2,300円

 

数回に渡ってホームページ作成方法を記載します。
初めての方は、ぜひチャレンジしてみましょう。

尚、なるべくシンプルに解説します。
そのため本当は必要である解説を省き、
作業結果で覚えていきます。
その点をご了承ください。

 

その前に前回の内容をチェック

前回の内容

HP作成No1 はじめの一歩(メモ帳)

①スタート → ②Windowsアクセサリ → ③メモ帳

メモ帳を起動します。

windows10%e3%83%a1%e3%83%a2%e5%b8%b3%e3%81%ae%e5%87%ba%e3%81%97%e6%96%b92

以下の入力をします。

<html>
</html>

html%e5%85%a5%e5%8a%9b1

<html>  は開始タグ(ここから開始)

</html>は終了タグ(ここで終了)

この開始タグ~終了タグまでの間を 要素 と呼ぶ

※ホームページを作成する言語Hyper Text Markup Language

html要素(要素は開始タグ~終了タグまでをいう)

この調子で引き続き以下の入力をしていきます。

<html>
<head>
</head>
<body>
</body>
</html>

html%e5%85%a5%e5%8a%9b2

<head>は、Webページに表示されない情報を記述することが多い。

例えば 検索キーワードなどの情報

<body>は、本文の部分で、ここに記述したものが
ホームページ(Webページ)に表示されると思って良い。

 

では、これから<head>の中に(下記図参照)
ホームページ(Webページ)のタイトルを入力します。

html%e5%85%a5%e5%8a%9b3

このタイトルはお気に入り登録(ブックマーク)された時に
ページタイトルとして登録される。
※タイトルを入れないとブックマークがアドレス表示したりする。

上記は 「晴れの国旅日記」というタイトルに。(ブックマーク名)

※これはheadの中の情報なので保存しても
IE等のブラウザソフト表示でみると、白紙で何も表示はされない

 

この辺で保存しましょう。

ファイル→名前をつけて保存

html%e5%85%a5%e5%8a%9b4

① デスクトップをクリック
② index.html と入力
③ 文字コード UTF-8を選ぶ
④ 保存をクリック

html%e5%85%a5%e5%8a%9b6

 

デスクトップに保存されているか確認してみる。

html%e5%85%a5%e5%8a%9b7

まだこの段階ではbodyに記述していませんので、
ファイルを開いても何も表示されていません。
情報入力と作業保存したと思ってください。

 

HP作成No2
To be continued

 

この続きは教室で語り合いましょう♪

にほんブログ村 地域生活(街) 中国地方ブログ 岡山(市)情報へ
にほんブログ村 ランキング参加してます。ポチッとしてみて下さいね。宜しくです。
にほんブログ村 地域生活(街) 中国地方ブログ 岡山県情報へ
にほんブログ村

岡山県 ブログランキングへ