Download presentation
Presentation is loading. Please wait.
1
情報スキル活用 第４週 基礎技術－４ : その１（タグのまとめ）
2
これまで（第１週～第３週）の内容 第１週 ：ガイダンス ：基礎技術－１ ① Ｗｅｂページの所在 ② Ｗｅｂページの基本構造確認
第１週 ：ガイダンス ：基礎技術－１ ① Ｗｅｂページの所在 ② Ｗｅｂページの基本構造確認 第２週 ：基礎技術－２ ① html文書と閲覧ソフトについて ② html文書について 第３週 ：基礎技術－３ ① Ｗｅｂページの標準規格 ② 学部・学科紹介のページ作成 2
3
本日（第４週）の内容 ： 基礎技術－４ ① ＨＴＭＬ文書とスタイルシート ② これまでに制作したページ ・大学紹介 CU.html
本日（第４週）の内容 ： 基礎技術－４ ① ＨＴＭＬ文書とスタイルシート ② これまでに制作したページ ・大学紹介 CU.html ・学部紹介 P.html （ここは各自の学部） ・学科紹介 PJ.html （ここは各自の学科） へのスタイルシートの適用 注 ： 各ﾍﾟｰｼﾞのﾌｧｲﾙ名は、各自が所属する学部・学科の ｺｰﾄﾞを使いなさい。 ここでは、現代教育学部、児童教育学科のｺｰﾄﾞを 使って例示することにします。 3 3
4
Webデザインは、単なる制作技法を理解するだけではクリエイティブなコンテンツを作ることはできません。
美的感性を磨くことのほかに、コンピューターや通信技術への理解とともに、プログラミングといった論理的な思考を基盤とした学習が不可欠です。 さらに、制作者としてデジタル化に伴う各種制作物の権利の保全や、その流通にかかわる問題把握、情報化社会に対する理解や倫理も同時に求められます。
5
Webサイトについて インターネットを介して各種のWebサービスを行うサーバー内のしくみをWebサイト（site）といいます。
この講義では、各自に用意した場所 www2.isc.chubu.ac.jp/学籍番号/ がそれぞれのサイトです。 講義では、このサイトの企画から制作、運用、そして評価までを体験することとします。
6
Webページを表現する言語 Webページは、HTML（ｴｲﾁ・ﾃｨｰ・ｴﾑ・ｴﾙ）と呼ばれる規格に従って記述します。
HTML : Hyper Text Markup Language HTMLで記述された文書をHTML文書と呼び、Webページの内容（文章など）の表現に使用します。 Webページの内容のデザイン（色や大きさなど）は、CSS（ｼｰ・ｴｽ・ｴｽ）と呼ぶコードで行います。 CSS : Cascading Style Sheets
7
HTML文書の基本 HTML文書は、Webページの内容を表現する要素（element）で記述します。
要素は、タグ（tag）という形で表現します。 ＜要素名＞要素の処理対象となる情報＜／要素名＞ ↑ ↑ ↑ 開始タグ 内 容 終了タグ
8
Webページの構成を表現するタグ <!DOCTYPE html> : 使用しているhtmlのﾊﾞｰｼﾞｮﾝ
<head> ～ </head> : 文書の構成 <body> ～ </body> : 表示する内容 HTML文書には必ず使います。 これらの基本的タグの使い方をまず理解することです。 これらのタグは最も基本となるものです。
9
基本タグとHTML文書の構成 <!DOCTYPE html> <html> <head>
① ここに内容についての情報を記載 </head> <body> ② ここに画面に表示する内容を記述 </body> </html> この順番が入れ替わることはありません。
10
<head>～</head>タグ
そのページ内全体を制御する機能をもった要素を記述します。 この講義で<head>～</head>の間で使うタグ ① <title> ～ </title> ② <link ・・・・> ③ その他
11
<body>～</body>タグ
body要素の中で使用するタグは、head要素で使用するタグ以外のものすべてが使えます。 まずつぎのタグを使用します。 ① <hα> ～ </hα> ：見出し(header) ② <p> ～ </p> ：段落(paragraph) ③ <br> ：改行(break line) ④ <hr> ：横罫線(horizontal rules) ⑤ <!-- ～ --> ：注釈(comment)
12
見出し ： <hα>～</hα>タグ
英字hは、headerのhです。 英字hに続くαは、１から６のいずれかの数で 表示する文字の大きさを指定します。 文字の大きさは、１が最も大きく、２，３と段々小さくなります。 見出しに使用した文字列も、 検索エンジンの重要なキーワードとなります。
13
段落 ： <P>～</P>タグ
段落（paragraph) 文章のまとまりに使用します。 指定された文章のまとまりごとに改行が行われます。
14
改行 ： <br>タグ 改行（break line） テキストの改行に使用します。 終了タグはありません。 14
15
横罫線 ： <hr>タグ 横罫線（horizontal rules) 用途は、上下の表示の区切りに使用します。
16
注釈 ： <!-- ～ -->タグ 注釈（comment） <!-- と --> との間に
注釈 ： <!-- ～ -->タグ 注釈（comment） <!-- と --> との間に 記述された文章が注釈として扱われ、 処理の対象とはなりません。
17
これまでに制作したWebページ ① 大学紹介のページ CU.html ② 学部紹介のページ 各自が所属している学部の紹介 学籍番号の先頭の英字 例：現代教育学部の場合 P ファイル名は P.html ③ 学科紹介のページ 各自が所属している学科の紹介 学籍番号の前から2文字の英字 例：児童教育学科の場合 PJ ファイル名は PJ.html
Similar presentations
