スライド 1

Size: px

Start display at page:

Download "スライド 1"

たつやいんそん
5 years ago
Views:

1 レイカディア大学同窓会ホームページ講座第 1 章 2015/6/23 広報部 HP 班長教野弘孝 ( 陶芸 32) 教野メール hiro@kyouno.com

2 当講座はレイカディア大学同窓会各支部 HP 担当者を対象にホームページを作成してもらうため実施します

3 第 1 章 HP の予備知識 HP の素材 6 月 23 日 1ホームページプロバイダーブラウザ URL HTML 2メモ帳,WORDでのHTMLの作成と基本的なタグについて 3デジタルカメラの知識 4 写真の取り込みと補正動画の編集第 2 章ホームページビルダーの使い方 7 月 7 日 5ホームページの構成市販のweb 作成ソフト紹介 6 専用ソフト ( ホームページビルダー ) でのHP 作成文章を入れる文字の色フォント大きさ修飾 7 画像のリサイズ GIFアニメ透明化画像の挿入 BGMの挿入動画の挿入表の挿入 8リンクを入れるパスワードつきリンク PDF 作成背景フレームその他

4 第 3 章今までの復習サーバー更新 7 月 21 日 9レイカディア大学同窓会 HPのドメインサーバ契約について 10サーバー構成各支部フォルダー 11サーバー更新の方法と注意事項 12リカバリー管理規約各支部のページ維持について

5 本日は第 1 章 HPの予備知識 HPの素材 1ホームページプロバイダーブラウザ URL HTML 2メモ帳,WORDでのHTMLの作成と基本的なタグについて ( この部分は初心者に向けたホームページのお話です ) 休憩 3デジタルカメラの知識 4 写真の取り込みと補正動画の編集

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

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

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

9 プロバイダーとはインターネットサービスプロバイダー (20MB) BIGLOBE (100MB) OCN (10MB) So-net (10MB) DION (100MB) ASAHIネット (100MB) Plala (20MB) BB.Exite (10MB) ケイオプチコム (20MB) 標準でもらえるディスク容量

10 Web ブラウザについて世界で使用されている web ブラウザは主にこの 5 種類ですブラウザシェア Internet Explorer (IE) 55% Firefox (FF) 12% Google Chrome 26% Safari 5% Opera 1% ホームページの一部のタグがブラウザによって無効なときがあります

12 IE(internet explorer) のバージョンによりブラウザの顔が違います現在は ie9,ie10,ie11 が一般的ですバージョンアップはネットから無料でできます {alt}+{h} ( ヘルプ ) でバージョンを確認できます

13 Windows10 が 7 月 29 日に発表されます今までの Windows(XP Vista 7 8 ) はサポート期間が限られました Windows 10 はサポート期限が設けられていません ( 最後の Windows) パソコンが壊れるまで無料でセキュリティアップデートを提供してくれますまた Windows 10 にすれば今後主流になるユニバーサル Windows プラットフォームを使用することができます ( Windows 7 / 8 では使用できません ) Windows 10 にアップグレードしないことは時代に取り残されていくことを意味します Windows 7 や 8 のサポート期限が切れたら約 2 万円を払ってアップグレードする必要が出てきます Windows7 で十分なんて言っていると数年後大損をすることになります Windows10 の発売後 1 年間は Windows7 8 に限り Windows10 に無償アップグレードできます

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

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

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

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

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

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

21 クリックして再表示

22 一時ファイルの削除

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

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

26 ホームページを作ってみよう! を表示する

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

28 <html> <head> <title> 例題 </title> </head> <body> <B> ホームページを作ってみよう!</B><br> </body> </html> (B は大文字でも小文字でもかまわない ) <b> </b> ホームページを作ってみよう! 太字で表示

29 <html> <head> <title> 例題 </title> </head> <body> <B><FONT COLOR= RED > ホームページを作ってみよう!</FONT></B><br> </body> </html> 小文字 <font color= red > </font> でもかまわないホームページを作ってみよう! 赤色太字で表示

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

30 色の指定 <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= # = 赤 = 黒 = 白 = 黄緑 =ミッドナイトブルーカラーチャート

31 <html> <head> <title> 例題 </title> </head> <body> <B><FONT COLOR= RED SIZE= 5 > ホームページを作ってみよう!</FONT></B><br> </body> </html> ホームページを作ってみよう! 大きな文字で表示

32 <html> <head> <title> 例題 </title> </head> <body> <B><FONT COLOR= RED SIZE= 5 ><I> ホームページを作ってみよう! </I></FONT></B><br> </body> </html> ホームページを作ってみよう! 斜体で表示

33 <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>

35 <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>

37 ホームページは 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( ハイパーテキストマークアップランゲージ )

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

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

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

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

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

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

44 フォントスタイル * <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 ほどありますブラウザの種類バージョンによって有効無効なタグもあります

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

46 これだけ書く必要があります

47 Word などでも簡単なホームページは作れます Word 文書を保存するときファイルの種類を変更します (htm または html にする Word は doc,docx など )

48 Word などでも簡単なホームページは作れます Web ページ (*.htm,*.html) で保存するとものすごい冗長タグができます Web ページ ( フィルタ後 )(*.htm,*.html) で保存すればいいですが所詮 Word ではあまり複雑なページは作ることができません

49 Word などでも簡単なホームページは作れます Word ではものすごい冗長タグができファイルの大きさも大きくなりますホームページを作ってみよう! を画面に表示するだけで Word で作った html の例複雑な WEB ページでも容易に作ったり修正したりする専用のソフトを使います

スライド 1

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