1 / 17

Web デザイン基礎 坪倉、伊藤 日本文理大学

Web デザイン基礎 坪倉、伊藤 日本文理大学. 先週 ガイダンス Ｗｅｂの歴史 HTML 基礎 今週 @learn について（出席と課題提出） HTML 　画像、ハイパーリンク、文字書式. 復習 （ファイルと、パスとアドレス）. Ｗｅｂページについて 色々なファイルが構成されて、 1 つのＷｅｂページに ファイルについて 授業用ファイルの保存について 授業用フォルダ　 z:hypertext____________ 日付フォルダ　　 z:hypertext ____________ ____________ ＵＲＬについて

rooney-white
Download Presentation

Web デザイン基礎 坪倉、伊藤 日本文理大学

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Webデザイン基礎坪倉、伊藤日本文理大学 先週 ガイダンス Ｗｅｂの歴史 HTML基礎 今週 @learnについて（出席と課題提出） HTML　画像、ハイパーリンク、文字書式

  2. 復習（ファイルと、パスとアドレス） • Ｗｅｂページについて • 色々なファイルが構成されて、1つのＷｅｂページに • ファイルについて • 授業用ファイルの保存について • 授業用フォルダ　z:\hypertext\____________ • 日付フォルダ　　 z:\hypertext\ ____________ \ ____________ • ＵＲＬについて • （仮に上記日付フォルダにindex.htmlがあるとして） • フォルダパス • ファイルパス • ＵＲＬ

  3. <html> <head> <title>タイトル：練習１</title> </head> <body> 本文 </body> </html> 練習１　ファイル名　ex1.html 復習（ＨＴＭＬはじめ） • タグについて • ＨＴＭＬ：　（ 　Hypertext Markup Language　 ） • <＊>　＃＃　</＊> • <＊>　　：　←　このタイプは、今週沢山でてくる

  4. Webページの作成(HTML)第１課　プログラミングの基礎Webページの作成(HTML)第１課　プログラミングの基礎 複数行の入力 段落分割と改行 • <p>～～</p> • (段落分割)は、改行の後に空白行を追加する。 • <br> • (改行)は改行の後に空白行を追加しない • 練習１　下記のプログラムを入力し、動作を確認しなさい。 • ファイル名　ex01.html <html> <head> <title>PとBR</title> </head> <body> <P>Ｐタグで囲まれている。</P> <P>１行目 ２行目</P> 行末にBRタグがついてる<br> １行目<br>２行目<br> </body> </html>

  5. Webページの作成(HTML)画像 • 画像の追加 • 主な画像ファイルの種類 • GIF : Graphics Ionterchange Format • イラストに多く使用される • 使用する色の数で圧縮　256色まで使用可能 • 可逆性圧縮 • 透過GIF、アニメーションGIF • 拡張子　.gif • JPEG : Joint Photographic Experts Group • 写真に多く使用される • 圧縮率を指定して圧縮 • フルカラー使用可能 • 不可逆性圧縮 • 拡張子　.jpg

  6. Webページの作成(HTML)画像 • 画像の掲載 • <img>　指定したファイルの画像をページに掲載 • 練習２　講義用画像素材のページより、一枚、画像を本日の講義ディレクトリに保存。下記のプログラムのページを確認しなさい。 • ファイル名　：　ex02.html • 画像ファイル名　：　 • （画像を保存する時、ファイル名に注意） • パス： z:\hypertext\ • URL： http://www.nbu.ac.jp/ ~ • 練習2α　複数の写真を掲載しなさい <html> <head> <title>画像掲載の練習</title> </head> <body> 画像掲載の練習<br> <img src=“画像ファイル名“> </body> </html>

  7. Webページの作成(HTML)画像 • 背景の変更 • <body>タグのオプションにより、背景の色、画像を指定可能 • 単色：　<bodybgcolor=“色指定”> • 色の名前（ただし、ブラウザーによって異なる場合がある） • red, blue, white, yeallow,green,lime,aqua,gray,teal等 • 練習3　右記のプログラムのページを確認しなさい。また３種類程度の色を試しなさい。 • ファイル名　：　ex03.html • パス： z:\hypertext\ • URL： http://www.nbu.ac.jp/ ~ • 細かな色指定の方法 • 16進数RGB方式 • 各色2桁の16進数表記(00~ff) • 表記例　#00ff00 <body bgcolor=“#00ff00”> • 練習3α　練習２のページを16進表記にて　　　　　　　　　　　　　　　　　　　　　　色指定しなさい <html> <head> <title>背景の練習</title> </head> <body bgcolor="red"> 背景の練習<br> </body> </html> #00 ff 00 R G B

  8. Webページの作成(HTML)ハイパーリンク • ハイパーリンク：他のWebページへのリンクを「ハイパーリンク」と呼ぶ • アンカータグ　<a>文字列</a> • 例）<a href=”http://www.nbu.ac.jp”>日本文理大</a> • 練習4　下記のプログラムのページを確認しなさい。 • ファイル名：　ex01.html • パス：　z:\hypertext\ • URL：　http://www.nbu.ac.jp/ ~ • 練習4α　４つ程度サイトをリストアップし、各サイトへのリンクを張りなさい。 • 練習4α２　<a>タグで囲む文字を画像に変えてみなさい <html> <head> <title>ハイパーリンク</title> </head> <body> ハイパーリンク<br> <a href="http://www.nbu.ac.jp">日本文理大学</a> </body> </html>

  9. Webページの作成(HTML)ハイパーリンク • 絶対指定：他のサイトへのリンク、必ずhttp://から始まる。 • 例：<a href=”http://www.nbu.ac.jp”>日本文理大</a> • 指定アドレスは世界中で通用する • 相対指定：同じサイト内でのリンク、http://から始めない。 • 指定アドレスは、同サイト内でだけ使える。アドレスの指定は短く済む • 例： • 同じフォルダ内にsite.html, page.htmlがある場合 • <a href=”site.html”>サイト</a> • <a href=”page.html”>ページ</a> • 1つ上の階層にup.htmlがある場合 • <a href=”../page.html”>ページ</a> • フォルダ内にフォルダ「down」があり、その中にshita.htmlがある場合 • <a href=”down/page.html”>ページ</a> MY PAGE

  10. Webページの作成(HTML)文字書式 • フォントの属性（ページ全体） • フォントの色 ：<body text=“色指定”> • 例１）<body text=“red”> • 例２）<body text=“#ff0000”> • リンクの色：<body link=“色指定” alink=“色指定” vlink=“色指定”> • link :クリックしてない, alink :クリック中, vlink :クリック後 • 例） <body link=“blue” alink=“#ff0000” vlink=“#00ff00”> • デフォルト（標準）のフォント(basefontタグ以降の文字への指定) • 例） <basefont face=“verdana, helvetica, arial”> • デフォルトのサイズ(basefontタグ以降の文字への指定) • 例） <basefont size=“4”> • 複数属性の設定 • 例） <basefont face=“ “ color=“ “ size=“ “>

  11. Webページの作成(HTML)文字書式 • 文章内での個々の属性の設定 • 文字書式タグによる簡単な効果 • 各種文字書式タグで囲む事により、属性を変更できる。 • 練習３： • 左下の表を埋め、右下のソースを打ち込みページを確認しなさい。 • （他に必要なタグは各自で追加すること） • ファイル名：　ex03.html 文字書式<br> <b>太字</b> <i>斜体</i> <strong>強調表示</strong> <s>取り消し線</s> <center>中央揃え</center>

  12. Webページの作成(HTML)文字書式 • 文章内での個々の属性の設定 • <font>タグ　fontタグでは、文章中の文字に対し、文字サイズ、色など、細かな設定が可能となる。各種の設定には属性タグを用いる • 例：<font color=“#0000ff” size=“+1”>文字</font>

  13. 提出課題 • 私のリンク集というテーマでページを作ってください。 • ４項目程度のリンク • 各項目に対して、コメントをつけてください。 • 各行の文字サイズを変更すること • 好き嫌い、利用頻度　等 • コメントの文字列に好きな色をつけてください NBU　：　日本文理大 Yahoo　：　ポータルサイト Amazon : 本屋さん

  14. タグのまとめ(Webページの制作　基本タグ)

  15. Webページの作成(HTML)プログラミングの基礎 • ネットワーク構成とURLについて • nbuでは、Z:\hypertext以下が個人のホームページ用領域として設定 • URL: http://www.nbu.ac.jp/ ~ログインＩＤ/ファイル名 • 例） • 学籍番号　0124001 • ログインＩＤ　s124001 • ファイルパス　Z:\hypertext\bwd\20050410\index.html • URLhttp://www.nbu.ac.jp/ ~s124001/bwd/20050410/index.html • ファイルパスからＵＲＬに変換してください • URL http:// \→/ フォルダパス（ディレクトリパス） ファイルパス URL

  16. Webページの作成(HTML)画像 • 背景の追加 • 繰り返し画像の背景 • 背景：　<bodybackground=“画像ファイル名”> • 練習3　講義用画像素材のページより、一枚、画像を本日の講義ディレクトリに保存。下記のプログラムのページを確認しなさい。 • ファイル名　：　ex03.html • 画像ファイル名　：　 • パス： z:\hypertext\ • URL： http://www.nbu.ac.jp/ ~ <html> <head> <title>背景画像の練習</title> </head> <body background=“画像ファイル名”> 背景画像の練習<br> </body> </html>

  17. Webページの作成(HTML)ハイパーリンク • 画像への指定：文字列以外に画像を用いる • <a href=“ “>画像の指定</a> • 例：<a href=“http://www.nbu.ac.jp”><img src=“photo.jpg”></a> • 同一ページの別の場所へのリンク • <a name=“ “>：アンカータグのname属性 • 例　 <a href=“#link”>Linkへ移動 ～色々な行があって～ <a name=“link”>ここからLINK集です</a>

More Related