スライド 1

Size: px

Start display at page:

Download "スライド 1"

しなつかたづ
5 years ago
Views:

1 授業用ファイルのコピー授業で使用するソフトホームページビルダー (Ver10 以上 ) みなさんのパソコンに教材をコピーしてくださいホームページ講座受講者教材データ USB メモリーでフォルダーごとデスクトップか C ドライブへ Windows10 でファイル名変換画像リサイズなどが可能なフリーソフトの一例リサイズ超簡単!Pro をインストールしてください ( 任意ですのでデモを見ていただくだけでも結構です ) リサイズ超簡単 pro フォルダーの中の RCKP324.exe をダブルクリック

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

3 時間配分全てみなさんに実習していただくと時間的に難しく一部はデモで説明します第 1 章ホームページ前知識 10:00~ 第 2 章ホームページビルダーの使い方 13:00~ 第 3 章サーバー更新 5/29 に終了済み

4 レイカディア大学同窓会ホームページ講座第 1 章ホームページ前知識 2018/6/11 29 年度 HP 管理班長教野弘孝教野メール hiro@kyouno.com

5 第 1 章ホームページ前知識 HP の予備知識 HP の素材ホームページプロバイダーブラウザ URL HTML メモ帳,WORD での HTML の作成と基本的なタグについて ( この部分は初心者に向けたホームページのお話です )

6 ホームページとはレイカディア大学同窓会の HP の構成各リンクについて説明します

7 メニューお知らせ更新履歴トップ画面へ支部選択リンクデモ

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

9 Web ブラウザの国内シェアランキング (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 から

11 http とは? このを URL(Uniform Resource Locator) といいます Webのアドレス ( 住所 ) を示しますと同意に設定しているところもあります Hypertext Transfer Protocol

12 最後に / を入れないとブラウザは自動的に / を入れて検索しに行きますと入力するとを付けます URL の最後に XXXX.html が無い場合はフォルダー内に index.html または index.htm があることを前提にしていますの場合サーバーの lacadia-dousoukai.com というフォルダー内の index を探しそれを表示しますと入力したのと同じ html と htm はブラウザでは同様に扱われますちなみにレイカ同窓会では index.htm です

13 ブラウザ操作に関するヒント

14 画像や文字が小さくて見にくい時は虫めがねみたいにちょっと拡大してみたいときに便利です ctrl キーを押しながら + キーで拡大 - キーで縮小できます

15 設定で文字サイズを固定することもできます文字 ( テキスト ) だけのサイズが変わるので画像とのバランスが合わなくなることがあります一般に文字サイズは中 (M) で閲覧されているので WEB の設計もそれを前提にします

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

17 Ie の場合クリックして再表示

18 Edge の場合クリックして再表示

19 URL(http: ) を直接入力します検索ワードを入力します

20 メモ帳,WORD での HTML の作成と基本的なタグについて

21 ホームページを作ってみよう! を表示する教材の中の test.html をダブルクリック

22 右クリックソースの表示

23 test.html <html> <head> <title> 例題 </title> </head> <body> ホームページを作ってみよう!<br> </body> </html>

24 下記の青色を入力します test1.html <html> <head> <title> 例題 </title> </head> <body> <B> ホームページを作ってみよう!</B><br> </body> </html> (B は大文字でも小文字でもかまわない ) <b> </b>

25 test.html をダブルクリックしますホームページを作ってみよう! 次に下記の青色を入力します太字で表示 <html> <head> <title> 例題 </title> </head> <body> <B><FONT COLOR= RED > ホームページを作ってみよう!</FONT></B><br> </body> </html> 小文字 <font color= red > </font> でもかまわない test2.html

色の指定 <FONT COLOR= RED のように色が名前で指定できるのはベースカラーと言います 16 色まであります aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow

26 色の指定 <FONT COLOR= RED のように色が名前で指定できるのはベースカラーと言います 16 色まであります aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow 中間色などは 16 進数で指定します <FONT COLOR= #ff0000 <FONT COLOR= # <FONT COLOR= #ffffff <FONT COLOR= #adff2f <FONT COLOR= # = 赤 = 黒 = 白 = 黄緑 =ミッドナイトブルーカラーチャート

27 test.html をダブルクリックしますホームページを作ってみよう! 次に下記の青色を入力します test3.html 赤色太字で表示 <html> <head> <title> 例題 </title> </head> <body> <B><FONT COLOR= RED SIZE= 5 > ホームページを作ってみよう!</FONT></B><br> </body> </html>

28 test.html をダブルクリックしますホームページを作ってみよう! 次に下記の青色を入力します test4.html 大きな文字で表示 <html> <head> <title> 例題 </title> </head> <body> <B><FONT COLOR= RED SIZE= 5 ><I> ホームページを作ってみよう! </I></FONT></B><br> </body> </html>

29 test.html をダブルクリックします test5.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 test5.html

31 test.html をダブルクリックします test6.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 test6.html

33 ホームページは XXXX.html または XXXX.htm のように拡張子が html または htm のファイルでできています test.html の中身 <html> <head> <title> 例題 </title> </head> <body> <html> </html> : HTML ですよという宣言 <head> </head> : ホームページの情報を間に埋め込む <title> </title> : ページのタイトルブラウザの上に表示される <body> </body> : この間にホームページ内容を書く <br> : 改行する <B><FONT COLOR= RED ><I> ホームページを作ってみよう!</I></FONT></B> </body> </html> <B> </B> <FONT > </FONT> のようにタグにはさまれた部分が表示に影響 HTML:HyperText Markup Language( ハイパーテキストマークアップランゲージ )

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> テレタイプ文字にする <A> <ADDRESS> <AREA> <APPLET> <B> <BASE> <BASEFONT> <BGSOUND> <BIG> <BLINK> <BLOCKQUOTE> <BODY> <BR> <CENTER> <CITE> <CODE> <DD> <DIR> <DIV> <DFN> <DL> <DT> <EM> <FONT> <H> <HEAD> <HR> <HTML> <I> <IMG> <KBD> <LI> <LINK> <LISTING> <MAP> <MARQUEE> <MENU> <META> <MULTICOL> <NOBR> <NOSCRIPT> <OL> <P> <PARAM> <PRE> <Q> <S> <SAMP> <SCRIPT> <SMALL> <SPACER> <SPAN> <STRIKE> <STRONG> <STYLE> <SUB> <SUP> <TITLE> <TT> <U> <UL> <VAR> <WBR> <XMP>  計 80 ほどありますブラウザの種類バージョンによって有効無効なタグもあります

41 これだけ表示するだけで

42 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <meta name="generator" content="justsystems Homepage Builder Version for Windows"> <META name="keywords" content=" 滋賀県レイカディア大学同窓会 "> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <TITLE> 滋賀県レイカディア大学同窓会 </TITLE> </HEAD> <BODY text="#000000" link="#000099" alink="#400000" vlink="#004000" background="laca-wall.gif"> <DIV align="center"><font size="5" face="hgp 創英角ホッフ体 "><B> 滋賀県レイカディア大学同窓会 </B></FONT><IMG src="logo.gif" width="81" height="72" border="0" align="middle"><br> <FONT size="5"><b><font color="#ff0000" size="5"> 本部 </FONT></B></FONT><BR> <BR> <TABLE border="0" width="502"> <TBODY> <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> <TABLE border="0" width="335"> <TBODY> <TR> <TD valign="top" align="left" width="404"><b><img src="kaichou.jpg" width="121" height="161" border="0" hspace="8" vspace="1" align="left"></b><font face="ms ゴシック "><B><BR> 同窓会会長 <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 などでも簡単なホームページは作れます Word で文章を作り保存するとき web ページ ( フィルター後 )(htm html) を選択して保存します

44 Word などでも簡単なホームページは作れます Web ページ (*.htm,*.html) で保存するとものすごい冗長タグができますまた所詮 Word ではあまり複雑なページは作ることができませんホームページを作ってみよう! を画面に表示するだけで複雑な WEB ページでも容易に作ったり修正したりする専用のソフトを使います

45 <html> <head> <meta http-equiv=content-type content="text/html; charset=shift_jis"> <meta name=generator content="microsoft Word 15 (filtered)"> <style> <!-- /* Font Definitions {font-family:"ms 明朝 "; panose-1: {font-family:century; panose-1: {font-family:"cambria Math"; panose-1: 明朝 "; panose-1: ;} /* Style Definitions */ p.msonormal, li.msonormal, div.msonormal {margin:0mm; margin-bottom:.0001pt;

46 平成 30 年度同窓会総会のページに第 2 章のホームページビルダーのいろいろな機能を使っていますので紹介しますまた一部の修正を行いサーバー更新しますので概要をごらんください平成 30 年度同窓会総会リンク実習 (30 年度定期総会 ) の中の dousoukaisoukai-honbu-2018 の中の _laca-dousoukai-honbu-soukai2018.htm に議事録 (pdf) を加えサーバー更新

47 休憩後第 2 章

スライド 1

スライド 1 レイカディア大学同窓会ホームページ講座第 1 章 2015/6/23 広報部 HP 班長教野弘孝 ( 陶芸 32) 教野メール hiro@kyouno.com 当講座はレイカディア大学同窓会各支部 HP 担当者を対象にホームページを作成してもらうため実施します第 1 章 HP の予備知識 HP の素材 6 月 23 日 1ホームページプロバイダーブラウザ URL HTML 2メモ帳,WORDでのHTMLの作成と基本的なタグについて