演習1. Web サイトの作成

➨ 1 ❶㻌 WWW
₇⩦1.Web 䝃䜲䝖䛾సᡂ
Visual Studio 䜢฼⏝䛧䛶䚸㟼ⓗ䛺 HTML 䝗䜻䝳䝯䞁䝖䛻䜘䜛 Web 䝃䜲䝖䜢సᡂ䛧䜎䛩䚹
䛆᏶ᡂ౛䛇
䝇䝔䝑䝥1. 䝥䝻䝆䜵䜽䝖䛾సᡂ㻌
1.
Visual Studio 䛜㉳ື䛧䛶䛔䛺䛔ሙྜ䛿䚸[䝇䝍䞊䝖]-[䛩䜉䛶䛾䝥䝻䜾䝷䝮]-[Microsoft Visual
Studio 2012]-[Microsoft Visual Studio 2012]䜢ྑ䜽䝸䝑䜽䛧䛶⟶⌮⪅䛸䛧䛶ᐇ⾜䛧䜎䛩䚹
2.
䝯䝙䝳䞊䛛䜙[䝣䜯䜲䝹]-[᪂つసᡂ]-[Web 䝃䜲䝖]䜢㑅ᢥ䛧䜎䛩䚹
71
➨ 1 ❶㻌 WWW
3.
[᪂䛧䛔 Web 䝃䜲䝖]䝎䜲䜰䝻䜾䝪䝑䜽䝇䛛䜙䚸௨ୗ䛾㏻䜚䛻㑅ᢥ䚸ධຊ䛧䛶[OK]䝪䝍䞁䜢䜽䝸䝑䜽䛧䜎
䛩䚹
䝔䞁䝥䝺䞊䝖
Web 䛾ሙᡤ
ASP.NET ✵䛾 Web 䝃䜲䝖
HTTP
http://localhost/FirstWebSite
ゝㄒ
Visual Basic 䜎䛯䛿 C#
㻌
72
➨ 1 ❶㻌 WWW
䝇䝔䝑䝥2. 䝴䞊䝄䞊䜲䞁䝍䞊䝣䜵䜲䝇䛾సᡂ㻌
1.
䝯䝙䝳䞊䛛䜙䚸[Web 䝃䜲䝖]-[᪂䛧䛔㡯┠䛾㏣ຍ]䛷[HTML 䝨䞊䝆]䜢㏣ຍ䛧䜎䛩 (䝨䞊䝆ྡ䠖
HtmlPage.htm)䚹
2.
HTML 䝨䞊䝆䛜⾲♧䛥䜜䜎䛩䚹
73
➨ 1 ❶㻌 WWW
3.
[₇⩦⏝䝕䞊䝍]-[Image]-[➨ 1 ❶]䛛䜙 8 䛴䛾䝣䜯䜲䝹(HOMEButton.gif䚸SHOPButton.gif䚸
LINKButton.gif䚸ChangedHOMEButton.gif䚸ChangedSHOPButton.gif䚸
ChangedLINKButton.gif䚸Title.jpg䚸Wall.gif)䜢䝥䝻䝆䜵䜽䝖䛻䝁䝢䞊䛧䜎䛩䚹䝣䜯䜲䝹䜢䝁䝢䞊䛧䚸䝋
䝸䝳䞊䝅䝵䞁䜶䜽䝇䝥䝻䞊䝷䞊䛾䝥䝻䝆䜵䜽䝖ྡ (http://localhost/FirstWebSite/) ୖ䛷䝨䞊䝇䝖䛩䜛
䛸䚸䝥䝻䝆䜵䜽䝖䛻䝁䝢䞊䛷䛝䜎䛩䚹
4.
[䝕䝄䜲䞁]䝍䝤䜢䜽䝸䝑䜽䛧䛶䚸䝋䞊䝇⾲♧䛛䜙䝕䝄䜲䞁⾲♧䛻ษ䜚᭰䛘䜎䛩䚹
5.
䝯䝙䝳䞊䛾[䝒䞊䝹]-[䜸䝥䝅䝵䞁]䜢㑅ᢥ䛧䚸[HTML 䝕䝄䜲䝘]-[CSS 䝇䝍䜲䝹]䜢㑅ᢥ䛧䜎䛩䚹
74
➨ 1 ❶㻌 WWW
6.
௨ୗ䛾䝏䜵䝑䜽䝪䝑䜽䝇䜢㑅ᢥ䛧䜎䛩䚹
7.
䝒䞊䝹䝪䝑䜽䝇䛛䜙 HTML 䝁䞁䝖䝻䞊䝹䜢 Web 䝨䞊䝆ୖ䛻㓄⨨䛧䚸䝴䞊䝄䞊䜲䞁䝍䞊䝣䜵䜲䝇䜢స
ᡂ䛧䜎䛩䚹
< [䝒䞊䝹䝪䝑䜽䝇]-[HTML]䝁䞁䝔䝘>
䖃
㻌 Image 䝁䞁䝖䝻䞊䝹䜢 4 䛴㈞䜚௜䛡䜎䛩
䖃
㻌 Div 䝁䞁䝖䝻䞊䝹䜢 1 䛴㈞䜚௜䛡䜎䛩
䖃
㻌 TextArea 䝁䞁䝖䝻䞊䝹䜢 1 䛴㈞䜚௜䛡䜎䛩
㻵㼙㼍㼓㼑䐟㻌
㻵㼙㼍㼓㼑㻌䐠㻌
㻵㼙㼍㼓㼑䐡㻌
㻰㼕㼢㻌
㻵㼙㼍㼓㼑䐢㻌
㼀㼑㼤㼠㼍㼞㼑㼍㻌
75
➨ 1 ❶㻌 WWW
8.
䝕䝄䜲䞁⏬㠃ୖ䛷ྛ䝁䞁䝖䝻䞊䝹䜢䜽䝸䝑䜽䛧䛶㑅ᢥ䛧䚸[䝥䝻䝟䝔䜱]䜴䜱䞁䝗䜴䛷䝁䞁䝖䝻䞊䝹䛾䝥䝻
䝟䝔䜱䜢ኚ᭦䛧䜎䛩䚹
䝁䞁䝖䝻䞊䝹ྡ
䝥䝻䝟䝔䜱ྡ
<IMG>䐟
Src
<IMG>䐠
Src
<IMG>䐡
Src
<IMG>䐢
Src
ྛ<IMG>
<Div>
Style
Style
್䜎䛯䛿ᡭ㡰
•
䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䜢䜽䝸䝑䜽䛧䜎䛩䚹
•
䝣䜯䜲䝹 (Title.jpg)䜢㑅ᢥ䛧䜎䛩䚹
•
䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䜢䜽䝸䝑䜽䛧䜎䛩䚹
•
䝣䜯䜲䝹 (HOMEButton.gif)䜢㑅ᢥ䛧䜎䛩䚹
•
䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䜢䜽䝸䝑䜽䛧䜎䛩䚹
•
䝣䜯䜲䝹 (SHOPButton.gif) 䜢㑅ᢥ䛧䜎䛩䚹
•
䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䜢䜽䝸䝑䜽䛧䜎䛩䚹
•
䝣䜯䜲䝹 (LINKButton.gif) 䜢㑅ᢥ䛧䜎䛩䚹
•
䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䜢䜽䝸䝑䜽䛧䜎䛩䚹
•
[ᯟ⥺]䛾 border-style 䛷䚸䛂䛩䜉䛶ྠ䛨䛻䛩䜛䛃䛻䝏䜵䝑䜽
䜢䛴䛡䜎䛩䚹
•
top 䛷䚸㡯┠䛛䜙䠷none䠹䜢㑅ᢥ䛧䜎䛩䚹
•
䝎䜲䜰䝻䜾䝪䝍䞁 (...)䜢䜽䝸䝑䜽䛧䜎䛩䚹
•
[⫼ᬒ]䛾 background-color 䛷䚸ⓑ (#FFFFFF) 䜢㑅ᢥ
䛧䜎䛩䚹
•
[䝋䞊䝇]䝍䝤䜢䜽䝸䝑䜽䛧䛶䚸䝋䞊䝇⾲♧䛻ษ䜚᭰䛘䜎䛩䚹
•
<body>䝍䜾䜢㑅ᢥ䛧䛯≧ែ䛷䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䜢
䜽䝸䝑䜽䛧䜎䛩䚹
DOCUMENT
䈜䝎䜲䜰䝻䜾䝪䝍䞁 (...) 䛜⾲♧䛥䜜䛺䛔ሙྜ䛿 body
Style
䛾ᚋ䛻䝇䝨䞊䝇䜢ᤄධ䛧䛶䛟䛰䛥䛔
•
[⫼ᬒ]䛾 background-image 䛷[ཧ↷]䝪䝍䞁䜢䜽䝸䝑䜽䛧䚸
䝣䜯䜲䝹 (Wall.gif) 䜢㑅ᢥ䛧䜎䛩䚹
9.
Web 䝨䞊䝆䝕䝄䜲䞁⏬㠃ୖ䛷䚸Div 䝁䞁䝖䝻䞊䝹䜢䜽䝸䝑䜽䛧䛶䝔䜻䝇䝖䜢ධຊ䛧䜎䛩䚹
䝁䞁䝖䝻䞊䝹ྡ
ධຊ䛩䜛ᩥᏐิ
䜘䛖䛣䛭 BRUE LeaF 䜈
ほⴥ᳜≀䛿‵ᗘ䞉 ᗘ䜢ㄪ⠇䛧䚸✵Ẽ䜢Ύί໬䛩䜛ാ䛝䜢ᣢ䛳䛶䛔䜎䛩䚹䛣䛣
<Div>
䛷䛿䚸䛒䛺䛯䛾⏕ά䜢㇏䛛䛻䛩䜛ほⴥ᳜≀䜢⤂௓䛧䛶䛔䜎䛩䚹
䖩᪂╔᝟ሗ
76
➨ 1 ❶㻌 WWW
10. ධຊ䛧䛯ᩥ❶䜢㑅ᢥ䛧䚸[᭩ᘧタᐃ]䝒䞊䝹䝞䞊䜢฼⏝䛧䛶䚸䝣䜷䞁䝖䛾Ⰽ䜔䝃䜲䝈䜢ぢᰤ䛘Ⰻ䛟ኚ᭦
䛧䜎䛩䚹
䈜᭩ᘧタᐃ䛾䝒䞊䝹䝞䞊䛜⾲♧䛥䜜䛶䛔䛺䛔ሙྜ䛿䚸䝒䞊䝹䝞䞊䜢ྑ䜽䝸䝑䜽䛧䛶[᭩ᘧタᐃ]䛻
䝏䜵䝑䜽䜢ධ䜜䜎䛩䚹
11. [䝋䞊䝇]䝍䝤䜢䜽䝸䝑䜽䛧䛶䚸䝕䝄䜲䞁⾲♧䛛䜙䝋䞊䝇⾲♧䛻ษ䜚᭰䛘䜎䛩䚹
12. <textarea䞉䞉䞉>䡚</textarea>䛻䚸textarea 䝁䞁䝖䝻䞊䝹ୖ䛷⾲♧䛥䛫䛯䛔ᩥ❶䜢ධຊ䛧䜎䛩䚹
<p>
<textarea id="TextArea1" name="S1">࣭7 ᭶ࡢほⴥ᳜≀ධⲴ㸟</textarea>
</p>
13. ᏶ᡂ౛䛿ୗᅗ䛾䜘䛖䛻䛺䜚䜎䛩䚹
77
➨ 1 ❶㻌 WWW
䝇䝔䝑䝥3. 䝝䜲䝟䞊䝸䞁䜽䛾タᐃ㻌
1.
䝋䝸䝳䞊䝅䝵䞁䜶䜽䝇䝥䝻䞊䝷䞊䛷䝥䝻䝆䜵䜽䝖ྡ (http://localhost/FirstWebSite) 䜢ྑ䜽䝸䝑䜽䛧䚸
[㏣ຍ]䜢㑅ᢥ䛧䜎䛩䚹
2.
[᪂䛧䛔㡯┠䛾㏣ຍ]䜢㑅ᢥ䛧䚸䝎䜲䜰䝻䜾䜴䜱䞁䝗䜴䛷[HTML 䝨䞊䝆]䜢㏣ຍ䛧䜎䛩 (䝨䞊䝆ྡ䠖
HtmlPage2.htm)䚹
3.
HTMLPage2.htm 䛾[䝕䝄䜲䞁]⏬㠃ୖ䛷䚸䛂‽ഛ୰䛃䛸ධຊ䛧䜎䛩䚹
4.
HTMLPage.htm 䛾䝕䝄䜲䞁⏬㠃䛷 Image 䝁䞁䝖䝻䞊䝹䐢䜢㑅ᢥ䛧䛶䚸䝋䞊䝇⾲♧䛻ษ䜚᭰䛘䚸
HTML 䝋䞊䝇䝁䞊䝗䛻䚸௨ୗ䛾䝁䞊䝗 (⥙䛛䛡㒊ศ)䜢㏣ຍ䛧䜎䛩䚹
<a href="HtmlPage2.html">
<img alt="" src="LINKButton.gif" style="border-style: none; z-index:
1; left: 11px; top: 330px; position: absolute; height: 50px; width:
200px;" />
</a>
78
➨ 1 ❶㻌 WWW
䝇䝔䝑䝥4. ືస☜ㄆ㻌
1.
䝒䞊䝹䝞䞊䛾
䜢䜽䝸䝑䜽䛩䜛䛛䚸䝯䝙䝳䞊䛛䜙[䝕䝞䝑䜾]-[䝕䝞䝑䜾㛤ጞ]䜢㑅ᢥ
䛧䛶䚸䜰䝥䝸䜿䞊䝅䝵䞁䜢ᐇ⾜䛧䜎䛩䚹䛣䛾䛸䛝䚸䝎䜲䜰䝻䜾䜴䜱䞁䝗䜴䛜⾲♧䛥䜜䛯䜙䚸䛂䝕䝞䝑䜾䛺䛧
䛷ᐇ⾜䛩䜛䛃䜢㑅ᢥ䛧䛶䛂OK䛃䜢䜽䝸䝑䜽䛧䜎䛩䚹
HtmlPage.htm 䛾䛂LINK䛃⏬ീ䛾䜽䝸䝑䜽䛷 HtmlPage2.htm 䛻⛣ື䛧䜎䛩䛛䠛
HTMLPage 䛾䛂LINK䛃⏬ീ䛾䜽䝸䝑䜽䛷 HTMLPage2.htm 䛻⛣ື䛧䜎䛩䛛䠛
2.
☜ㄆ䛜⤊஢䛧䛯䜙䚸Internet Explorer 䛾䛂㛢䛨䜛䛃䝪䝍䞁 (
⾜䜢⤊஢䛧䜎䛩䚹
79
) 䜢䜽䝸䝑䜽䛧䛶䚸䜰䝥䝸䜿䞊䝅䝵䞁䛾ᐇ

Download Report

演習1. Web サイトの作成

① ②

Paperzz.com

Your Paperzz