ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko

Slides:



Advertisements
Similar presentations
Silverlight Producer コンテンツ作成 第一回 GKB48 セミナー 「学習型クラウド共有スペース GKB コモンズは何を目指すか」 2013.oct.30.
Advertisements

1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。
コンピュータ基礎実習上級 #4 拡張子、 URL 、ファイル名 一般教育研究センター 安田豊. ファイル名と拡張子 ファイルには名前が付けられている 区別のため。整理などに便利に利用するとよい。 abc.html ピリオドによってファイル名を前後に分ける習慣がある。 ピリオドの左は整理のために自由な名前を選べる.
1 ブログ操作マニュアル 2008 年 2 月 15 日作成:株式会社ちらし屋ドットコ ム. 2 ■ ログイン ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi へアクセスし、 ユーザー名、パスワードを入力し、サインインをクリックする。
コンピュータ基礎実習 ( 上級 ) 第三回 ウェブページの作成について2 清水淳紀. 前回までの内容  ページの簡単な作り方。  ページの編集・アップロード・確認 方法について。  ページはメモ帳や Kompozer 等で編集できる。 ウェブサー バーにアップロード  ページを公開するには、必要ファイル群をウェブサー.
Word の使い方 for Mac office Word 目次 1 スタイルの設定 2 簡単な図表番号の表示.
2011/12/17 Peace & Piece 画面設計書 Version1.0 著者: Peace & Piece 代表 江並公史.
目次 このドキュメントについて・・・前提条件……………………………………… 2
ASP入門 - Windows 2000 Server 活用 -.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
HTMLの基礎知識.
ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society
下左近研究室 ゼミ資料 ホームページの作り方(基礎編)
ウェブページの仕組みとCMS 田村貴紀.
プレゼンテーション用ソフトウェア Impress
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
HTMLの記述と WWWにおける情報公開 遠藤
法人e名刺 ブログ運用マニュアル 社外秘 目次 □ブログ運用ルール
Microsoft Office 2010 クイックガイド ~PowerPoint編~
HTML版パスファインダーの作成 CSSの利用 hp. infoseek. co. jp/cje10
ホームページの作り方.
プレゼンテーション用ソフトウェア Impress
ファイル・フォルダ名の大文字・小文字の区別 ファイル・フォルダ名の特殊記号およびスペースの混入
講議資料 コンピュータ プレゼンテーション 講議資料
ファイルの場所に関して.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第3章 第2節 ネットワークを活用した 情報の収集・発信 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開
専門ゼミⅠ 南ゼミ 特別授業③ 2002年6月7日 金曜日 4限目 今泉 裕隆.
9 Microsoft Word(1).
【トップページ-TOPICSの登録・編集】
コンピュータ基礎実習上級 #10 絶対パスによる指定
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
Webページを公開しよう! 公開前の点検とファイル転送 ユーザ名~user○○○ パスワード~自分で設定したもの
県立広島大学 全学共通教育科目 情報処理入門 第13回 2009年7月6日 県立広島大学 経営情報学部経営情報学科 准教授 小川 仁士.
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
WordPressに挑戦! WordPress(ワードプレス)は、ブログを 作成するためのWEBアプリケーションです。
ネットワーク de 情報発信 - コンテンツ作りのはじめの一歩 - 城西国際大学薬学部 二村 典行.
第3章 第2節 ネットワークを活用した情報の収集・発信(4) 情報Cプレゼン用資料(座学35) 担当 早苗雅史
データベース設計 第9回 Webインタフェースの作成(1)
Microsoft PowerPoint Netscape Communicator
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
スマホ追従バナー スクロールしてもついてくる! スマートフォンでの回遊性アーップ★.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
制作技術ー3 双方向通信 : CGIシステムと環境変数
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
売れるためのWEBサイト構築.
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
3.1 PowerPoint の概要 PowerPointを使ってできること
URLとファイルの対応 ユーザー s の Z:\www\ フォルダにある hello.html ファイル
コンピュータ プレゼンテーション.
Htmlの基本.
コンピュータ プレゼンテーション.
情報コミュニケーション入門b 第11回 Web入門(2)
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
第14回放送授業.
Microsoft Office 2010 クイックガイド ~PowerPoint編~
Presentation transcript:

2003.01.13 ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko Web Page の作成と公開 2003.01.13 ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko

今日の目標 WWWのしくみを理解する HTMLタグがある程度理解できるようになる ICUのWebページ発行手順を理解する とりあえず自分のページを作成する

WWWサーバーのしくみ

HTML とは? ブラウザで表示 HTML ファイル index.html

2017/3/15 基本的な HTML の構成 Web Page の作成と公開

ICUのWebページ発行手順

ページ公開の準備 ユーザ登録 w3 のトップページ から、 を行なう ※Step3 は必要ありません この作業は1回だけやればよい!

staging へアップロード [Step4]

[Step 4] staging に接続したところ

[Step 4] stagingのW3のフォルダをオープン

[Step 4] dgnet フォルダをオープン

w3 へコピー [Step5]

w3 へコピー [Step5]

サーバー(W3) 側では http://w3.icu.ac.jp/xx/xxxxxx/ 061234 index.html / 06 061235 index.html dgnet story.html 061236 examine.html picture.jpg

フォルダの構造と URL の関係 http://w3.icu.ac.jp/xx/xxxxxx/ index.html (w3) W3 2017/3/15 フォルダの構造と URL の関係 http://w3.icu.ac.jp/xx/xxxxxx/ index.html (w3) W3 index.html dgnet http://w3/xx/xxxxxx/dgnet/ story.html http://w3/xx/xxxxxx/dgnet/story.html (staging) examine.html picture.jpg Web Page の作成と公開

(3) [Step5] staging  w3 へのコピー ページの更新についてのポイント (1) HTMLファイルの編集・新規作成 (2) staging へのアップロード (3) [Step5] staging  w3 へのコピー (4) 確認

ファイルの保存場所は? Staging からページをダウンロード

ファイル名の約束 重要! 拡張子は .html をつける トップページは index.html とする ファイル名に日本語は使わない 「a…z」「A…Z」「0…9」「-」(ハイフン)「_ 」(アンダーバー)                    ×「/」「@」「スペース 」はダメ! 大文字・小文字に気をつける dgnet フォルダは必ず小文字で!

HTML タグの種類 挿入するもの 挟み込むもの HTMLタグ <BR><HR> など <TITLE>タイトル</TITLE> <H1>見出し</H1> <A HREF="">リンク</A> <UL>  <LI>箇条書き</LI> </UL>

改行やレイアウトについて 改行するには、<BR>タグなどが必要 HTMLファイルでは、複数のスペースや改行はスペース一つ分と同じ <H>タグや <UL>タグ、<P><BR>、 <TABLE>タグなどを利用する

文字の装飾 ヘッダー フォントの色 <H1>見出し</H1> HTMLタグ 文字の装飾 ヘッダー <H1>見出し</H1> <H2>見出し</h2> <H3>見出し</h3> フォントの色 <FONT COLOR="red">文字の色</FONT>

箇条書き HTMLタグ <UL> <LI></LI> </UL> HTMLの作成 ファイルの転送 W3へコピー <OL> <LI></LI> </OL> HTMLの作成 ファイルの転送 W3へコピー

画像ファイルの挿入 <IMG SRC="graph.jpg" ALT="アンケートの結果"> HTMLタグ 画像ファイルの挿入 <IMG SRC="graph.jpg"     ALT="アンケートの結果"> ALT 属性は、テキストブラウザ、音声読み上げなどのために必要 ファイルをアップロードするときは、画像ファイルも忘れずに!

リンク 同じページに表示 <A HREF="next.html">次へ</A> 別のウインドウに表示 <A HREF="others.html" TARGET="_blank"> xxxのページへ</A>

TABLE タグ TABLE タグは他にもいろいろな用途が... HTMLタグ <TABLE BORDER="1"> <TR><TD>Win</TD><TD>Win2000</TD><TD>120</TD></TR> <TR><TD>Mac</TD><TD>OS9</TD><TD>50</TD></TR> </TABLE> TABLE タグは他にもいろいろな用途が... Win Win2000 120 Mac OS9 50