IT 1NOTE パソコンスクール

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

５．　HP作成No5 見出しの設定

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

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

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

９．　HP作成No9 Webページに写真

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

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

さっそく始めます。

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

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

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

「2016年11月17日（木）　晴れた中のサイクリングは最高！」

下図赤丸内を参照

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

ファイル　→　上書き保存

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

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

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

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

が写真横に。

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

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

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

ファイル　→　上書き保存

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

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

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

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

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

下図参照

ファイル　→　上書き保存

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

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

すると・・・。

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

brタグ（強制改行）は
<>開始タグ　～　</>終了タグで１セットのタグと違い単独で使えます。

終了タグがないのです。

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

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

<br> 　 <br />　  html  Xhtml　html5

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

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

HP作成No10
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

５．　HP作成No5 見出しの設定

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

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

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

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

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

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

②imgフォルダーを開く

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

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

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

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

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

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

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

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

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

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

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

ファイル　→　上書き保存

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

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

また一歩前進です。

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

HP作成No9
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

５．　HP作成No5 見出しの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

上図の赤丸のように

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

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

HP作成No8
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

５．　HP作成No5 見出しの設定

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

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

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

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

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

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

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

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

<ul>〇〇〇</ul>

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

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

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

入力終了しましたら

ファイル→上書き保存

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

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

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

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

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

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

HP作成No7
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

５．　HP作成No5 見出しの設定

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

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

②　<h1>〇〇〇</h1> 　見出しレベル１（見出しレベルは１～６段階）

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

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

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

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

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

HP作成No6
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

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

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

②プログラムから開く

③メモ帳をクリック（メモ帳で編集）

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

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

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

ファイル　→　上書き保存

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

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

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

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

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

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

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

h1　見出し１　大見出し

h2　見出し２　中見出し

h3　見出し３　小見出し

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

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

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

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

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

HP作成No5
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

これまでの内容

１．　HP作成No1  はじめの一歩（メモ帳）

２．　HP作成No2 作成基本タグ（メモ帳）

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

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

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

②プログラムから開く

③メモ帳をクリック（メモ帳で編集）

メモ帳が開くので、さっそく下記のように文字入力してみる。

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

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

① ファイル　→　上書き保存

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

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

① index.htmlを右クリック

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

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

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

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

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

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

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

今回のポイントは３つ。

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

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

HP作成No4
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

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

前回の内容

１．　HP作成No1 はじめの一歩（メモ帳）

２．　HP作成No2作成基本タグ（メモ帳）

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

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

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

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

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

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

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

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

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

ホームページ作成ファイル（html　編集ファイル）と

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

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

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

HP作成No3
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

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

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

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

前回の内容

HP作成No1 はじめの一歩（メモ帳）

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

メモ帳を起動します。

以下の入力をします。

<html>
</html>

<html>  は開始タグ（ここから開始）

</html>は終了タグ（ここで終了）

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

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

html要素（要素は開始タグ～終了タグまでをいう）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HP作成No2
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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

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

IT１NOTE（ｱｲﾃｨｰﾜﾝﾉｰﾄ）パソコンスクール　つしま校
実践型個別指導　身体で覚える実践パソコン
講師きびだんご店長

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

数回に渡ってホームページ作成方法を記載します。

ホームページ作成で欠かせないのがメモ帳です。

Windows10でメモ帳の出し方を確認します。

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

これでメモ帳が起動します。

ホームページ作成のはじめの一歩です。

HP作成No1
To be continued

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

にほんブログ村　ランキング参加してます。ポチッとしてみて下さいね。宜しくです。

にほんブログ村

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