National Institute of Technology, Kochi College, KIMURA Ryushi Laboratory

LECTURE INFORMATION

よく使うショートカットキー

切り取り	Ctrl + X
コピー	Ctrl + C
貼り付け	Ctrl + V
すべてを選択	Ctrl + A
保存	Ctrl + S
ひとつ戻す	Ctrl + Z
ひとつ進む	Ctrl + Y

簡単な画像の加工

　(1)　”PRTSC”ボタンを押す。

　(2)　”ペイント”

を開き、”Ctrl + V”を押す。

　(3)　切り取りたい部分を”選択”し、”トリミング”ボタンを押す。

　　

　(4)　画像を名前を付けて保存（A)を選び、ファイル名を”半角英数”で書く。

　　　ファイルの種類を選択し、保存する。

　　

基本的なHTML

　(1)　表を描く。

2行 × 2列 <table border=1> <tr><td> 1 </td><td> 2 </td></tr> <tr><td> 3 </td><td> 4 </td></tr> </table>

1	2
3	4

2行 × 3列 <table border=1> <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr> <tr><td> 4 </td><td> 5 </td><td> 6 </td></tr> </table>

1	2	3
4	5	6

2行 × 3列　※1行目結合 <table border=1> <tr><td colspan="3"> 1-3 結合 </td></tr> <tr><td> 4 </td><td> 5 </td><td> 6 </td></tr> </table>

1-3 結合
4	5	6

　(2)　画像を貼る。

　1) 貼りたい画像の上で右クリックし、プロパティ（R)を開く。

　2) ”場所：”とファイル名を確認する。

　※ 下図の場合、場所は、
　　”C:\Users\ryushikimura\Desktop\kimuraHPfile\img”

　　ファイル名は、”mark.jpg” となる。

　3) <img src="場所 + \ + ファイル名">　を入力する。

<img src="C:\Users\ryushikimura\Desktop\kimuraHPfile\img\mark.jpg">

　(3)　リンクを張る。

　1)　リンクしたいhtmlファイルを作成する。

　-例-

　japanese.html、

　english.htmlをそれぞれ作成する。

　<A HREF="japanese.html">>> JAPANESE</A>

　>> JAPANESE

　<A HREF="english.html">>> ENGLISH</A>

　>> ENGLISH

　2)　-応用編-　アイコンを画像にする。

　<A HREF="japanese.html"><img src="./img/japanese_black.jpg"></A>

　

　(4)　オンマウス時に画像を変える。

　1)　画像を準備する。

　-元画像-　アドレス　./img/japanese_black.jpg

　

　-オンマウス時の画像-　アドレス　./img/japanese_orange.jpg

　

-アウトマウス時の画像-　アドレス　./img/japanese_black.jpg

　

　2)　コマンドに画像アドレスを記述する。
　　　<input type="image" name="test" src="./img/japanese_black.jpg" 　onmouseover="this.src='./img/japanese_orange.jpg'" 　onmouseout="this.src='./img/japanese_black.jpg'" />

　

　3)　同様に別画像を表示。
　　　<input type="image" name="test" src="./img/english_black.jpg" 　onmouseover="this.src='./img/english_blue.jpg'" 　onmouseout="this.src='./img/english_black.jpg'" />

　