スライド 1

(1)

授業用ファイルのコピー

授業で使用するソフト ●ホームページビルダー（Ｖｅｒ１０以上）みなさんのパソコンに教材をコピーしてください。ホームページ講座受講者教材データＵＳＢメモリーで、フォルダーごとデスクトップかＣドライブへ。 Windows10でファイル名変換、画像リサイズなどが可能なフリーソフトの一例リサイズ超簡単!Proをインストールしてください。（任意ですのでデモを見ていただくだけでも結構です）

https://freesoft-100.com/review/resize_pro.php

リサイズ超簡単pro フォルダーの中の RCKP324.exe をダブルクリック

(2)

https://freesoft-100.com/review/resize_pro.php

シンプルな操作です。

これより高機能のフリーソフトXnViewはお勧めですが、操作が複雑になります。

(3)

時間配分

全てみなさんに実習していただくと時間的に難しく一部はデモで説明します

第１章ホームページ前知識１０：００～

第２章ホームページビルダーの使い方１３：００～

(4)

レイカディア大学同窓会

ホームページ講座

29年度HP管理班長教野弘孝

教野メール

[email protected]

２０１８／６／１１

第１章ホームページ前知識

(5)

第１章

ホームページ前知識

ＨＰの予備知識、ＨＰの素材

ホームページ、プロバイダー、ブラウザ、ＵＲＬ、ＨＴＭＬ

メモ帳,ＷＯＲＤでのＨＴＭＬの作成と基本的なタグについて

(6)

ホームページとは

レイカディア大学同窓会のＨＰの構成

各リンクについて説明します。

(7)

メニュートップ画面へ支部選択更新履歴 http://lacadia-dousoukai.com/ リンクデモお知らせ

(8)

インターネットでホームページを公開する構成契約会社（ＩＳＰ）のサーバー internet ホームページ更新担当者ホームページ一般閲覧一般閲覧ローカルプロバイダー wwwサーバー

(9)

Ｗｅｂブラウザの国内シェアランキング（2018/03）

1位

Chrome 46.11%

2位 IE 25.23%

3位 Firefox 13.11%

4位 Safari 7.1%

5位 Edge 6.27%

6位 Opera 0.92%

7位 Sleipnir 0.32%

8位 Vivaldi 0.2%

9位 Maxthon 0.17%

その他 0.57%

Windows10から

(10)

(11)

http://lacadia-dousoukai.com/

この、

http://・・・・・

を

ＵＲＬ

(Uniform Resource Locator)といいます。

Ｗｅｂのアドレス（住所）を示します。

http://

www.

lacadia-dousoukai.com/と同意に設定して

いるところもあります。

hｔｔｐとは？

_{http://lacadia-dousoukai.com/}

(12)

最後に ”/” を入れないと、ブラウザは自動的に”/” を入れて検索しに行きます。 http://lacadia-dousoukai.comと入力すると、 http://lacadia-dousoukai.com/を付けます。ＵＲＬの最後に、XXXX.htmlが無い場合は、フォルダー内に index.htmlまたはindex.htmがあることを前提にしています。 http://lacadia-dousoukai.com/の場合、サーバーのlacadia-dousoukai.comというフォルダー内のindexを探し、それを表示します。 http://lacadia-dousoukai.com/index.htmlと入力したのと同じ

html

と

htm

はブラウザでは同様に扱われます。

ちなみに、レイカ同窓会ではindex.htmです。

(13)

(14)

画像や文字が小さくて見にくい時は、虫めがねみたい

にちょっと拡大してみたいときに便利です。

ctrlキー

を

(15)

設定で文字サイズを固定することもできます。

文字（テキスト）だけのサイズが変わるので、画像とのバランスが合わなくなることがあります。一般に文字サイズは中（Ｍ）で閲覧されているので、ＷＥＢの設計もそれを前提にします。

(16)

サーバーを更新したのに閲覧に行っても画面が変わらない場合は、ブラウザの再表示（Ｆ５を押す）をしてください。サーバーへ最新の内容を取りに行きます。以前に閲覧したページの場合、パソコンはスピードを速くするため、記憶されていた内容（キャッシュ：一時ファイル）を表示することがあります。

(17)

クリックして再表示

(18)

クリックして再表示

(19)

URL（http:・・・・・）を直接入力します。

(20)

メモ帳,ＷＯＲＤでのＨＴＭＬの作成と基本的な

タグについて

(21)

ホームページを作ってみよう！

を表示する

(22)

右クリック

(23)

test.html

<html>

<head>

<title>例題</title>

</head>

<body>

ホームページを作ってみよう！<br>

</body>

</html>

(24)

<html>

<head>

<title>例題</title>

</head>

<body>

<B>

ホームページを作ってみよう！

</B>

<br>

</body>

</html>

下記の青色を入力します（Ｂは大文字でも小文字でもかまわない） <b> </b>

test1.html

(25)

test.htmlをダブルクリックします

ホームページを作ってみよう！

<html>

<head>

<title>例題</title>

</head>

<body>

<B>

<FONT COLOR=“RED”>

ホームページを作っ

てみよう！

</FONT>

</B><br>

</body>

</html>

次に、下記の青色を入力します小文字 _{<font color=“red”>・・・</font> でもかまわない} 太字で表示

test2.html

(26)

色の指定

<FONT COLOR=“RED”のように、色が名前で指定できるのは

ベースカラーと言います。１６色まであります

aqua black blue fuchsia gray green lime maroon

navy olive purple red silver teal white yellow

中間色などは１６進数で指定します。

<FONT COLOR=“#ff0000” ＝赤

<FONT COLOR=“#000000” ＝黒

<FONT COLOR=“#ffffff” ＝白

<FONT COLOR=“#adff2f” ＝黄緑

<FONT COLOR=“#191970” ＝ミッドナイトブルー

(27)

test.htmlをダブルクリックします

ホームページを作ってみよう！

<html>

<head>

<title>例題</title>

</head>

<body>

<B><ＦONT COLOR=“RED”

SIZE=“5”

>ホーム

ページを作ってみよう！</FONT></B><br>

</body>

</html>

次に、下記の青色を入力します赤色太字で表示

test3.html

(28)

test.htmlをダブルクリックします

ホームページを作ってみよう！

<html>

<head>

<title>例題</title>

</head>

<body>

<B><FONT COLOR=“RED” SIZE=“5” >

<I>

ホー

ムページを作ってみよう！

</I>

</FONT></B><br>

</body>

</html>

次に、下記の青色を入力します大きな文字で表示

test4.html

(29)

test.htmlをダブルクリックします

<html>

<head>

<title>例題</title>

</head>

<body><B><FONT color="RED" size="5"><I>ホーム

ページを作ってみよう！</I></FONT></B><br>

<IMG src="lacadia.jpg" width="400" height="535"

border="0"><br>

</body>

</html>

ホームページを作ってみよう！

斜体で表示

(30)

(31)

test.htmlをダブルクリックします

<html>

<head>

<title>例題</title>

</head>

<body>

<CENTER>

<B><FONT color="RED"

size="5"><I>ホームページを作ってみよう！

</I></FONT></B><br>

<br>

<IMG src="lacadia.jpg" width="400" height="535"

border="0"><br>

>

</CENTER>

</body>

</html>

ホームページを作ってみよう！

斜体で表示

(32)

(33)

ホームページは、XXXX.html または XXXX.htm のように、拡張子が html または htm のファイルでできています <html> <head> <title>例題</title> </head> <body> <B><FONT COLOR=“RED”><I>ホームページを作ってみよう！</I></FONT></B> </body> </html> test.htmlの中身 <html> </html> ：「HTMLですよ」という宣言。 <head> </head> ：ホームページの情報を間に埋め込む。 <title> </title> ：ページのタイトル。ブラウザの上に表示される。 <body> </body> ：この間にホームページ内容を書く。 <br> ：改行する。 <B> </B> <FONT > </FONT> のようにタグにはさまれた部分が表示に影響

(34)

基本タグ＊<html> HTMLまたはXHTMLの開始と終了を定義＊ <head> ヘッダ要素を定義ヘッダ関連＊ <title> ページのタイトルを定義 <base> リンクのベースとなるパスを定義 <meta> HTML/XHTML文書の情報を定義 <link> 他の文書との関係を定義 <style> 文書のスタイルを定義する <script> スクリプトを定義する <noscript> スクリプトに対応していないブラウザへの内容を定義基本タグ＊ <body> ボディ要素を定義テキスト表示 <h1>~<h6> 見出しを定義する <p> パラグラフ（段落）を定義 <div> ディビジョン（1つのブロック）を定義

(35)

リスト表示 <ul> リスト形式を定義 <ol> 番号付きリストであることを定義 <li> リスト形式の各リストを定義 <dl> 見出し付きリストであることを定義 <dt> リストの各項目を定義 <dd> リストの各項目を定義

(36)

意味の定義 <abbr> 単語の省略であることを示す <acronym>単語の頭文字をとった省略であることを示す <address> 住所を定義する <cite> 引用であることを示す <code> プログラム等のソースコードであることを示す <dfn> 特別な単語を定義 <em> テキストの強調 <kbd> キーボードから入力されるテキストを示す <samp> リテラル文字を表す <strong> テキストの強調 <var> プログラムの要素を等を示す編集用 <ins> 新しく追加された部分を指定 <del> 削除したい部分を指定

(37)

編集用 <ins> 新しく追加された部分を指定 <del> 削除したい部分を指定レイアウト＊ <br> 強制改行させる <pre> 改行、スペース等を保ったまま表示クォート <blockquote> ブロッククォートを定義する <q> 短い引用を定義するマルチメディア＊ <img> 画像を配置する <object> ムービー、サウンド等やアプレットを埋め込む <param> Javaアプレットにパラメータを渡すリンク＊ <a> アンカーを定義する <map> イメージマップの仕様を定義する <area> イメージマップのリンクを定義

(38)

テーブル＊ <table> テーブル（表）を定義 <caption> テーブルの表題を定義＊ <tr> テーブルに新しい行を定義 <th> ヘッダセル（項目名のセル）を定義＊ <td> データセル（通常のセル）を定義 <thead> テーブルのヘッダ部を定義＊ <tbody>テーブルのボディ部を定義 <tfoot> テーブルのフッタ部を定義 <colgroup> テーブルの列グループを定義 <col> 列グループの中で列を定義その他 <bdo> テキストの文字方向を指定 <span> テキストの範囲を指定（何もしないタグ）＊ <hr> 罫線を表示

(39)

フォーム <form> フォーム要素を定義 <input> 様々なフォーム要素を定義 <textarea> テキスト入力エリアを定義 <select> 選択リストを定義 <option> 選択リストの項目を定義 <optgroup>選択リストの項目をグループ化する <button> ボタン要素を定義 <label> フォーム要素にラベルを付ける <fieldset> フォーム要素をグループ化する <legend> グループ化されたフォーム要素にラベルを付ける

(40)

フォントスタイル＊ <b> テキストをボールド体にする <big> フォントサイズを大きくする <i> テキストをイタリック体にする <small> フォントサイズを小さくする <sub> テキストを下付きにする <sup> テキストを上付きにする <tt> テレタイプ文字にする計８０ほどあります。ブラウザの種類、バージョンによって有効無効なタグもあります。

(41)

(42)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja">

<HEAD>

<TITLE>滋賀県レイカディア大学同窓会</TITLE> </HEAD>

<DIV align="center"><FONT size="5" face="HGP創英角ﾎﾟｯﾌﾟ体"><B>滋賀県レイカディア大学同窓会 </B></FONT><IMG src="logo.gif" width="81" height="72" border="0" align="middle"><BR>

<TR>

<TD width="354" align="right"><FONT size="4"><B>同窓会会員数（平成29年10月）</B></FONT></TD> <TD align="center" width="106"><FONT size="4"><B>1572人</B></FONT></TD>

</TR> </TBODY> </TABLE> <BR>

<TR>

同窓会会長<BR> <BR>

堀江勇夫</B><BR> </FONT><B><BR>

<INPUT type="BUTTON" value="会長あいさつ" onclick="window.open('laca-dousoukaikaichou-speech.htm' , '' , 'width=1000,height=800')"><BR> <BR> </B></TD> </TR> </TBODY> </TABLE> <BR> これだけ書く必要があります

(43)

Ｗｏｒｄなどでも簡単なホームページは作れます。

Wordで文章を作り、保存するとき、

webページ（フィルター後）（htm、html）

(44)

Ｗｏｒｄなどでも簡単なホームページは作れます。

ホームページを作ってみよう！

を画面に表示するだけで複雑なＷＥＢページでも容易に作ったり修正したりする専用のソフトを使います。 Webページ（*.htm,*.html）で保存するとものすごい冗長タグができます。また、所詮、Ｗｏｒｄではあまり複雑なページは作ることができません。

(45)

p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0mm;

margin-bottom:.0001pt; text-align:justify;

(46)

平成３０年度同窓会総会のページに第２章のホームページビルダーのいろいろな機能を使っていますので紹介します。また、一部の修正を行い、サーバー更新しますので、概要をごらんください。

平成３０年度同窓会総会

リンク実習（30年度定期総会）の中の dousoukaisoukai-honbu-2018の中の 20180516_laca-dousoukai-honbu-soukai2018.htmに議事録（pdf）を加え、サーバー更新

(47)

スライド 1

授業用ファイルのコピー

https://freesoft-100.com/review/resize_pro.php

時間配分

レイカディア大学同窓会

ホームページ講座

29年度HP管理班長 教野弘孝

教野メール

[email protected]

２０１８／６／１１

第１章 ホームページ前知識

第１章

ホームページ前知識

ＨＰの予備知識、ＨＰの素材

ホームページとは

レイカディア大学同窓会のＨＰの構成

各リンクについて説明します。

Ｗｅｂブラウザの国内シェアランキング（2018/03）

1位

Chrome 46.11%

2位 IE 25.23%

3位 Firefox 13.11%

4位 Safari 7.1%

5位 Edge 6.27%

6位 Opera 0.92%

7位 Sleipnir 0.32%

8位 Vivaldi 0.2%

9位 Maxthon 0.17%

その他 0.57%

http://lacadia-dousoukai.com/

この、

http://・・・・・

を

ＵＲＬ

(Uniform Resource Locator)といいます。

Ｗｅｂのアドレス（住所）を示します。

http://

www.

lacadia-dousoukai.com/と同意に設定して

いるところもあります。

hｔｔｐとは？

http://lacadia-dousoukai.com/

html

と

htm

はブラウザでは同様に扱われます。

画像や文字が小さくて見にくい時は、虫めがねみたい

にちょっと拡大してみたいときに便利です。

ctrlキー

を

メモ帳,ＷＯＲＤでのＨＴＭＬの作成と基本的な

タグについて

ホームページを作ってみよう！

test.html

<html>

<head>

<title>例題</title>

</head>

<body>

ホームページを作ってみよう！<br>

</body>

</html>

<html>

<head>

<title>例題</title>

</head>

<body>

<B>

ホームページを作ってみよう！

</B>

<br>

</body>

</html>

test1.html

test.htmlをダブルクリックします

<html>

<head>

<title>例題</title>

</head>

<body>

29年度HP管理班長教野弘孝

第１章ホームページ前知識

_{http://lacadia-dousoukai.com/}