字幕付き動画のオンライン配信について
|
|
|
- つかさ ごみぶち
- 7 years ago
- Views:
Transcription
1 Do-It-Yourself (2) 2008a 1) SAMI SAMI 2 3 Windows Media Player (WMP) GOM Player ViPlay DirectVobSub WMP 3 WMP 2) SOMEYA, Yasumasa (2008b) Embedding subtitled video clips in your Web pages (Part 2 of the monograph, Adding subtitles to video clips and embedding them in your Web pages: A Do-It-Yourself manual for teachers of English wishing to introduce subtitle translation as part of their classroom activities. 2008) (c) 2008 Yasumasa Someya 1
2 2 Embedding subtitled video clips in your Web pages (Someya 2008b) HTML 2 3 Windows XP (SP2) Internet Explorer (Ver. 6 ) WMP (Ver. 7 ) 1. WMP 3) 3 1) 2) SAMI 3) HTML HTML 1) 2) 2008a 3) HTML 1 (User) 1) (mpg, wmv, avi, etc.) 2) (smi, srt, ass, sub, etc.) 3) HTML Web HTML HTML Web (Author) 1 WMP GOM Player ViPlay 4) 42
3 Part 2: 3 2. HTML WMP HTML WMP <embed> <object> World Wide Web Consortium (W3C) HTML XHTML Internet Explorer <object> <object> 5) a, p. 48<object> WMP HTML (1) WMP (2) (3) (4) 6) WMP (Lines 20-31) 2a Lines <object> Lines Line 21 classid WMP Version 7 Version A F 20 <object id="player" title="windows Media Player" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" width="370" height="340"> Line 20 id (identifier) Player title WMP Line 22 width height 7) 370px % (Lines 23-24) WMP URL URL 43
4 4 Embedding subtitled video clips in your Web pages (Someya 2008b) (URL = Uniform Resource Locator) Lines URL 23 <param name="url" value=" URL?sami= URLSAMI URL MediaFileURL?sami=SamiFileURL SAMI URL SAMI Lines SAMI?sami= SAMI URL WMP SAMI 8) (URL) SAMI URL c: d (pp. 7-9) (Lines 28-30) Lines autostart true falseuimode User Interface Mode none mini full 9) Line 30 captioningid (identifier=id) captions ID Line <param name="autostart" value="false"> 29 <param name="uimode" value="full"> 30 <param name="captioningid" value="captions"> 44
5 Part 2: 5 PARAM Elements in an OBJECT Element ([12] Microsoft Corp., (ND/2008a) (Lines 33-35) <object> WMP Lines <div id="captions" title="caption Window" 34 style="width:370px; height:70px; background:black;"> 35 </div> <div> <div></div> id class style id id= captions Line 30 captioningid WMP <div> title Line 20 div div Line 34 id="captions" width:370px; height:70px; background:black; (width) Line (width) background (black) SAMI (Lines 20-35) WMP 2a (HTML_Template1.txt) Lines URL 10) html htm (Internet Explorer) 1 2a HTML Internet Explorer 2b 45
6 6 Embedding subtitled video clips in your Web pages (Someya 2008b) 2a Lines WMP 2b 3 DirectVobSub 11) mpg avi WMP 2 wmv 2 12) mpg avi DirectVobSub 13) 2b 1 2a WMP Lines (px) width=370, height=340 (px) width=370, height=70 Lines [] WMP Ver. 7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) pp (refresh) 2 wmv mpg (mpeg-1) avi 3DirectVobSub mpg avi 46
![width=370, height=340 (px) width=370, height=70 Lines 33-35 [] WMP Ver.](/docs-images/48/20462510/images/page_6.jpg "7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) pp.")
7 Part 2: a 2a <object> WMP <style></style> 1 Lines 7-12 Adding Closed Captions to Digital Media (Microsoft Corp., 2001) (Lines 15-20) <head><.head> Lines Line 15 <script language = JScript... > Microsoft JScript 14) for= window event = onload Lines <script language="jscript" for="window" event="onload"> 16 Player.URL=" Player.closedCaption.SAMILang=CCLang.value; 19 Player.closedCaption.captioningID="captions"; 20 </script> Lines WMPVer. 7 SAMI Player Player.closedCaption Line 16 Player URL SAMI SAMILang (Line 18) CaptioningID (Line 19) 2 SAMI SAMI <div> (id) Lines (p. 4) SAMI URL HTML_Sample1.txt <object> <param name= URL value= MyMovie/Sample.wmv > 47
8 8 Embedding subtitled video clips in your Web pages (Someya 2008b) SAMI?sami= SAMI SAMI WMP 15) Player JScript Player Player URL (Lines 16-17) [MyMovies] Sample.wmv [MyMovies] 1 SAMI HTML 3 (=[MyMovies]) 2 SAMI HTML 1: SAMI HTML [MyMovies] (Current Folder) HTML_Sample.html Sample.wmv Sample.smi 16 Player.URL=.Samplewmv ; (.) (Current Folder) 8 Windows HTML (HTML_Sample.html) () 16). Samplewmv 2: SAMI HTML 48
![wmv [MyMovies] 1 SAMI HTML 3 (=[MyMovies]) 2 SAMI HTML 1: SAMI HTML [MyMovies] (Current Folder)](/docs-images/48/20462510/images/page_8.jpg "HTML_Sample.html Sample.wmv Sample.smi 16 Player.URL=.Samplewmv ; (.")
9 Part 2: 9 [MyFiles] (Current Folder) HTML_Sample.html [MyMovies] Sample.wmv Sample.smi 16 Player.URL=.MyMoviesSamplewmv ; 16 Player.URL= MyMoviesSamplewmv ; 3 HTML [Documents and Settings] SAMI C: [MyData] 3: HTML [Documents and Settings] SAMI C: [MyData] [C: Drive (Root Folder)] [MyData] Sample.wmv Sample.smi [Documents and Settings] [UserName] [My Documents] [MyMovies] (Current Folder) HTML_Sample.html 16 Player.URL= c:mydatasample.wmv ; [Documents and Settings] Windows 49
![URL= MyMoviesSamplewmv ; 3 HTML [Documents and Settings] SAMI C: [MyData] 3: HTML [Documents and Settings] SAMI C:](/docs-images/48/20462510/images/page_9.jpg "[MyData] [C: Drive (Root Folder)] [MyData] Sample.wmv Sample.")
10 10 Embedding subtitled video clips in your Web pages (Someya 2008b) C: D: SAMI 3 SAMI 2 4 SAMI SAMI C: [MyData] 4: HTMLSAMI C: [C: Drive (Root Folder] [MyData] Sample.smi [Documents and Settings] [UserName] [My Documents] [MyMovies] (Current Folder) HTML_Sample.html Sample.wmv 16 Player.URL=.Samplewmv ; 17 Player.closedCaption.SAMIFileName= c:mydatasample.smi ; 4 SAMI Player URL SAMI SAMIFileName SAMI (Sample.smi) 2 SAMI URL 1? 16 Player.URL=.Sample.wmv?sami=c:MyDataSample.smi ; Lines (p. 7) URL 50
![smi [Documents and Settings] [UserName] [My Documents] [MyMovies] (Current Folder) HTML_Sample.html Sample.wmv 16 Player.URL=.](/docs-images/48/20462510/images/page_10.jpg "Samplewmv ; 17 Player.closedCaption.SAMIFileName= c:mydatasample.smi ; 4 SAMI Player URL SAMI SAMIFileName SAMI (Sample.")
11 Part 2: WMP (Lines 33-38) Lines WMP HTML_Sample1.txt Lines captioningid WMP autostart uimode 2 2 (p. 4) 33 <object id="player" title="windows Media Player" 34 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 35 width="370" height="340"> 36 <param name="autostart" value="false"> 37 <param name="uimode" value="full"> 38 </object> (Lines ) WMP <div> <div> p. 5 Lines Line 19 (i.e., Player.closedCaption.captioningID = captions ) (background) 17) (2008a, pp. 2-7) SAMI 41 <div id="captions" title="caption Window" 42 style="width:370; height:70; background:black;"> 43 </div> Lines Player.closedCaption SAMILang onchange Player.closedCaption. SAMILang=CCLang.value option Japanese English 51
12 12 Embedding subtitled video clips in your Web pages (Someya 2008b) 45 <select id="captionlanguages" language="jscript" -- name="cclang" class="small" 46 onchange="player.closedcaption.samilang=cclang.value"> 47 <option selected value="japanese">japanese 48 <option value="english">english 49 </select> 50 <br><span class="small"></span> <select> <option> SAMI SAMI Japanese English 18).JACC { name:japanese; lang:ja; SAMIType:CC; font-family: Arial, Verdana,' ',' '; font-size:10pt;}.encc { name:english; lang:en-us; SAMIType:CC; font-family: Arial, Verdana,Tahoma; font-size:11pt;} SAMI 2 Lines selected <option selected value="japanese">japanese <option value="english">english <option value="french">french <option value="german">german </select> Line 50 <span> <span></span> <div> <div> <span> small 1, HTML_Template1.txt, Line 11 52
13 Part 2: 13 WMP 2 3a (HTML_Template2.txt) Lines URL.html.htm (Internet Explorer) 2 3a HTML Internet Explorer 3b 3a Line 51 3b a 3b 2 3a WMP Lines (px) width 370, height=340 (px) width=370, height=70 字 幕 Lines Lines [] WMP Ver. 7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) pp English (refresh) 2 wmv mpg (mpeg-1, 2) avi 3DirectVobSub mpg avi 53
![33-38 (px) width 370, height=340 (px) width=370, height=70 字 幕 Lines 41-43 Lines 45-50 [] WMP Ver.](/docs-images/48/20462510/images/page_13.jpg "7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) pp.")
14 14 Embedding subtitled video clips in your Web pages (Someya 2008b) (2.2) HTML ) SAMI SAMIStyle HTML 2 1) SAMI 2 3a HTML SAMI (Sample2.smi) Sample2.smi SAMI SAMI_Template2.smi 2008a, p.31 Sample2.smi SAMI_Template2.smi <STYLE TYPE="Text/css"><!-- P {margin-top:10pt; text-align:center; line-height:125%; color:white; background-color:transparent;}.jacc {name:japanese; lang:ja; SAMIType:CC; font-family: Arial,Verdana,Helvetica,' ', ' ',sans-serif; font-size:10pt;}.encc {name:english; lang:en-us; SAMIType:CC; font-family: Arial,Verdana,Helvetica,Tahoma; font-size:11pt;} --> </STYLE> 54
15 Part 2: 15 SAMI <style> P {... } # (unique name) P {...} #Emphasis {name: Big Bold; font-size: 14pt; text-align: center; color: blue; font-family: Arial,Verdana,Helvetica,Tahoma; font-weight: bold;} Emphasis {... } name HTML select WMP (12 points) (10 points) (15 points) (20 points) 4 4 #Standard 2008a, pp P {... }.JACC.ENCC <STYLE TYPE="Text/css"><!-- P {margin-top:10pt; text-align:center; line-height:125%; color:white; background-color:transparent;} #Standard {name:normaltxt_12pt; font-size:12pt;} #Small {name:smalltxt_10pt; font-size:10pt;} #Big1 {name:largetxt_15pt; font-size:15pt;} #Big2 {name:x-largetxt_20pt; font-size:20pt;}.jacc {name:japanese; lang:ja; SAMIType:CC; font-family: Arial,Verdana,Helvetica,,,sans-serif;}.ENCC {name:english; lang:en-us; SAMIType:CC; font-family:arial,verdana,helvetica,tahoma;} --> </STYLE> 55
16 16 Embedding subtitled video clips in your Web pages (Someya 2008b) SAMI.smi WMP 4 SAMI 4 4 WMP SAMI LargeTxt 15 Points WMP WMP HTML HTML 2) HTML SAMIStyle 2 3a 2 (HTML_Template2.txt) SAMI a) SAMIStyle 2 ClosedCaption SAMIStyle SAMI SAMIStyle Line 18 (Player.closedCaption.SAMILang=CCLang.value) ( 56
17 Part 2: 17 )Lines URL wmv smi URL 16 Player.URL=" Player.closedCaption.SAMILang=CCLang.value; Player.closedCaption.SAMIStyle=CCStyle.value; 19 Player.closedCaption.captioningID="captions"; width= 370 height= 340 (Line 35) width= 500 height= 440 Line 42 width 500 height 90 b) Lines select 8 <option> (value) SAMI (name) HTML Standard Txt (12pt), Small Txt (10pt), Large Txt (15pt), X- Large Txt (20pt) 48 <option value="english">english 49 </select> <select id ="CaptionsStyle" languag="jscript" name="ccstyle" class="reg" title="choose Font Size" onchange="player.closedcaption.samistyle=ccstyle.value"> <option selected value="normaltxt_12pt">standard Txt (10pt) <option value="smalltxt_10pt">small Txt (10pt) <option value="largetxt_15pt">large Txt (15pt) <option value="largetxt_20pt">x-large Txt (20pt) </select> 50 <br><span class="small"></span> <select> class= reg title= Choose Font Size 57
18 18 Embedding subtitled video clips in your Web pages (Someya 2008b) title Choose Subtitle Language Line width = 500 small8 reg10 <table border="0" style="width:500; height:30;"> <tr class="reg"> <td width="85" align="left"></td> <td width="415" align="left"></td> </tr> </table> HTML.html.htm Lines URL wmv smi HTML 4 3b, p
19 Part 2: [URL] SubtitleVideo/Public/HTML_Template2B.html SAMI (Sample2B.smi) <!-- P {margin-top:10pt; text-align:center; line-height:125%; color:white; background-color:transparent; } #Standard {name:normaltxt_12pt; font-size:12pt;} #Small {name:smalltxt_10pt; font-size:10pt;} #Big1 {name:largetxt_15pt; font-size:15pt;} #Big2 {name:largetxt_20pt; font-size:20pt;}.jacc {name:japanese; lang:ja; SAMIType:CC; font-family: Arial,Verdana,Helvetica,'', '', sans-serif;}.encc {name:english; lang:en-us; SAMIType:CC; font-family: Arial,Verdana,Helvetica,Tahoma;} --> SAMI HTML (pp ) 59
20 20 Embedding subtitled video clips in your Web pages (Someya 2008b) 2.3 WMP 20) 2a 3a < table> 6 2 <> <> <> 6 2 HTML <tr> Table Row <td> Table Data <td> <td> <br> <table> <tr> <td></td> <td></td> 60
21 Part 2: 21 </tr> </table> <td></td> align valign center, left, right, top, bottom <td align= center valign= top ></td> (center) (top) <td> align=left, valign=center HTML 2 WMP HTML 7 <object> WMP 2 <td> <div> <table...> <tr> <td...> <object...> <param...> <param...> <param...> </object> </td> <td...> <div...> </div> </td> </tr> </table> OBJECT WMP WMP WMP OBJECT DIV DIV 7 2 WMP HTML 61
22 22 Embedding subtitled video clips in your Web pages (Someya 2008b) 3 8a 3 Line 12 Lines WMP Lines Line 15 Line 30 <td> valign= top WMP (align) WMP 1, Lines (pp. 3-5) 2, Lines (p. 11) 1, Lines (p. 5) 2, Lines (p. 11) HTML 3 8a HTML Internet Explorer 8b silver (Line 12) white (Line 16, Line 31) silver Line 12 background white Line 31 color: white; background: black 2008a, p b 3 8a (px) height=300, width 310 (px) width=310, height=280 [] WMP Ver. 7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) pp
23 Part 2: 23 (current chunk) 1) 2) 3) 3 1) 2) HTML 3) ) ; Gottlieb 1998; Hatim & Mason 1997; DCMP ) 8 SAMI HTML SAMI HTML (2008a, 1, p. 12) 1) HTML <font color=****> </font> HTML <b></b> <font color=red></font> <b></b> 63
24 24 Embedding subtitled video clips in your Web pages (Someya 2008b) SAMI HTML 9 SAMI <SYNC START=500><P CLASS=JACC> <font color="red"><b></b></font> <SYNC START=2000><P CLASS=JACC> <font color="red"><b></b></font> <SYNC START=3500><P CLASS=JACC> <font color="red"><b> </b></font> <SYNC START=5000><P CLASS=JACC> <font color="red"><b> </b></font> 9 1 HTML 8b 10 pt 125% 2) HTML <u></u> 64
25 Part 2: 25 SAMI <u></u> SAMI <SYNC START=7200><P CLASS=JACC> <u></u>3 <SYNC START=8000><P CLASS=JACC> <u>3 </u> <SYNC START=9000><P CLASS=JACC> 3 <u></u> 10 2 HTML 8b 10 pt 125% 3) HTML (p. 11) HTML <span> SAMI (color) (background-color) <span style= color: black; background-color: silver ></span> 65
26 26 Embedding subtitled video clips in your Web pages (Someya 2008b) SAMI <SYNC START=12000><P CLASS=JACC> <span style="color: black; background-color: silver"> </span> <SYNC START=13500><P CLASS=JACC> <span style="color: black; background-color: silver"> </span> <SYNC START=15000><P CLASS=JACC> <span style="color: black; backgroundcolor: silver"></span> <SYNC START=17000><P CLASS=JACC> <span style="color: black; background-color: silver"></span> 11 3 HTML 8b 10 pt 125% 66
27 Part 2: 27 (readability) HTML 1) 2) 3) 4) Windows Windows (WMM) 5) WMM 6) 7) SAMI.smi 8) 3 (HTML_Template3.txt) URL pp WMP Microsoft Internet ExplorerVer. 5.5 writing-mode CSS 67
28 28 Embedding subtitled video clips in your Web pages (Someya 2008b) 4 12a HTML 3 Line 21 2 (Lines 24-37) (Lines 39-44) Line 35 SAMILang SAMI SAMI 35 <param name="samilang" value="japanese"> 4 Lines Line 42 <td></td> writing-mode 39 <td valign="top" 40 style="writing-mode:tb-rl; background:black; color:white; 41 width:65px; height:304px;"> 43 <div id="captions" title="caption Window"></div> 44 </td> Line 39 valign valign p. 21 style 65px 304pxLine 40 writing-mode 2 lr-tb tb-rl writing-mode lr-tb (left) (right) (top) (bottom) tb-rl (top) (bottom) (right) (left) 23) Line 43 <div> id="captions" ID (Line 34) Lines <td> <div> 4 12a HTML Internet Explorer 68
29 Part 2: 29 12b 12b 4 12a (px) width 320, height=304 (px) width=65, height=304 [] WMP Ver. 7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) [] pp MS 304px 65px 13 SAMI margin-left: 0pt; margin-right: 5pt; margin-top: 10pt; text-align: left; font-size: *; line-height: 125%; font-family: ' ', sansserif letter-spacing:1px; color: white; background-color: transparent; (9 pt) 69
30 30 Embedding subtitled video clips in your Web pages (Someya 2008b) HTMLWorld Wide Web Consortium (W3C) CSS3 (Cascading Style Sheets, Level 3) <ruby> Internet Explorer Windows Media Player 24) <ruby> SAMI HTML <ruby><rb></rb> <rp></rp><rt></rt><rp></rp> </ruby> <ruby> </ruby> <rb>, <rt>, <rp> 3 <rb> ruby base <rt> ruby text <rp> ruby parenthesis <rp> <ruby> <ruby> Internet Explorer (Ver. 5.5) <rp> 70
31 Part 2: DirectVobSub Windows Media Player DirectVobSub mpg (mpeg-1, 2) avi WMP 25) DirectVobSub 1, p. 2 1b 1b mpg/avi DirectVobSub (User) mpg avi SAMI HTML ( Web DirectVobSub mpg avi DirectVobSub mpg avi SAMI HTML HTML DirectVobSub 2008a, p. 2 pp DirectVobSub 5 14a HTML <object></object> Lines Lines <!----> 21 <object id="wmp" 22 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 23 width="640" height="544"> 24 <param name="url" value=" 71
32 32 Embedding subtitled video clips in your Web pages (Someya 2008b) 25 <!--URL Line 26 --> 27 <param name="autostart" value="false"> 28 <param name="uimode" value="full"> 29 <param name="stretchtofit" value="true"> 30 <!-- IE --> 31 <embed type="application/x-mplayer2" 32 pluginspage=" 33 windows&sbp=mediaplayer&ar=media&sba=plugin&" 34 width="640" height="544" 35 src=" 36 showcontrols="1" 37 autostart="0"/> 38 </object> <object> <embed> <object> WMP (Lines 21-23) URL, autostart, uimode, stretchtofit 4 (Line 24, Lines 27-29) Line 29 stretchtofit (true) 26) CPU DirectVobSub 14 captioningid Line 24 URL URL URL URL Line 33 SAMI mpg (mpeg) avi DirectVobSub URL.smi URL SAMI SAMIFileName 14 <object> <div> 72
33 Part 2: 33 <embed> WMP 5 Lines <embed> p. 3 5 HTML <object> WMP WMP Internet Explorer (IE) DirectVobSub Safari Firefox WMP IE Safari Firefox <object> <embed> WMP IE <object> <embed> <object></object> <embed> <embed> <embed> Line 31 (type)line 35 (src) Line 36 (showcontrols)line 37 (autostart) Lines pluginspage <object> classid WMP 1 <embed> <embed> <embed... /> 1 <embed> type= pluginspage width= height= src= showcontrols= autostart= MIME WMP application/x-mplayer2 <embed> URL 1 true 0 false autoplay= 1 true 0 false 73
34 34 Embedding subtitled video clips in your Web pages (Someya 2008b) 5 14a HTML WMP mpg avi DirectVobSub SAMI HTML 5 Internet Explorer 12b 5 Line (2008a, pp ) DirectVobSub mpg avi DirectVobSub VirtualDub VirtualDub TextSub VirtualDub 2008c 74
35 Part 2: 35 14b 5 14a (px) width=640, height=544 DirectVobSub [] WMP Ver. 7 and above Internet Explorer Ver. 7.0 Windows XP (SP2) [] MPEG-1 [] DirectVobSub 2.23 pp WMP DirectVobSub DirectVobSub DirectVobSub 2008a, p.2 pp mpg (mpeg-1) avi 3SAMI URL SAMI SAMIFileName 4DirectVobSub Direct VobSub Direct VobSub DirectVobSub (auto-loading version) [Text Settings] Outline, Shadow, Advanced Renderer [] HG M-PRO 14 5 CPU 6 WMP WMP 7 QuickTime mpg/mpeg QuickTime 75
36 36 Embedding subtitled video clips in your Web pages (Someya 2008b) 3. HTML 5 HTML DirectVobSub 2 2 B 1 WMP 2 Player Microsoft JScript HTML 2 (HTML_Template2B.html) 12 10, 12, 15, WMP 3 HTML 4 76
37 Part 2: 37 3 (2006) (N=5) (N=65) (2007) DirectVobSub WMP DirectVobSub 2008c 2 (p. 14) SAMI HTML SAMIStyle 2B (HTML_Template2B.html) WMP HTML SAMI (p. 19) 2008a, p. 6HTML 6 (HTML_ 77
38 38 Embedding subtitled video clips in your Web pages (Someya 2008b) Template6.txt, pp ) SAMI font-size 6 SAMI (Sample6.smi) font-size: 1.5em em (2008a) 7 ) Internet Explorer JavaScript (Lines 14-21) 5 onload <body> (Line 15) 78
39 Part 2: b (p. 27) 1) 2) 3) HTML 4) SAMI 5) 1) mini- (mcut.exe) [] Windows Vista 2) Windows Windows [XP] [Vista] 3) 4) (2008b) 36a 3 <HTML_Template3.txt> 5) (2008a) 2 SAMI 2 2 <SAMI_Template2.smi> (mcut.exe) 1 27) 4. 79
40 40 Embedding subtitled video clips in your Web pages (Someya 2008b) 1 (Slide1.jpg) 1) mcut.exe 2) [][] 3) 5. Windows Windows [] [] Windows (WMM) 6. WMMWMM 2 [] 1. 2 WMM 80
41 Part 2: [] ) 2) 81
42 42 Embedding subtitled video clips in your Web pages (Someya 2008b) ) 4) My Video 82
43 Part 2: 43 5) 1 5 6) [] WMV AVI 83
44 44 Embedding subtitled video clips in your Web pages (Someya 2008b) 16. SAMI HTML 17. SAMI (2008a) 2SAMI 2 2 <SAMI_Template2.smi> 1) SAMI (2008a, pp. 2-15) MS Gothic sans-serif ArialVerdana Helvetica % <STYLE TYPE="text/css"><!-- P {margin-left:8pt; margin-right:8pt; margin-top:10pt; font-size:10pt; line-height:125%; text-align:left; font-family: Arial,Verdana,Helvetica, MS Gothic,sans-serif;}.JACC {Name:Japanese; Lang:ja; SAMIType:CC;} --> </STYLE> 2) HTML CSS <div> <span> (Slide 1) 100ms 10000ms 10 2 (Slide 2) 10000ms 21000ms 11Slide 3 Slide 1 <img> SAMI HTML <img> WMP <img> WMP 84
45 Part 2: 45 <SYNC start=0><p class=jacc> <SYNC start=100><p class=jacc> <center><img src="images/aoyama-logo.jpg" height=41 width=126></center> <br> <div style="font-family: MS Gothic,sans-serif; font-size:12pt; fontweight:bold; text-align:center; line-height:150%;"> <br> </div> <br> <div style="font-family: Arial,Verdana,Helvetica, MS Gothic,sans-serif; font-size:10pt; text-align:center; line-height:150%;"> (MI) (CC) <br> <br> <br> </div> <SYNC start=10000><p class=jacc> [] (Mutual Information) 2 2 <br><br> <span style="font-size:8pt;">note: This simple method can only extract collocations of length two; however, Jelinek (1990) proposed a generalization of this method to include collocations of arbitrary length. See Jelinek, F. (1990), "Self-organized language modeling for speech recognition." In Waibel, A., and Lee, K.F. (Eds.), <i>readings in Speech Recognition</i>, pp Morgan Kaufmann Publishers. </span> <SYNC start=21000><p class=jacc> <SYNC start=*****><p class=jacc> n ***** <SYNC start=*****><p class=jacc> </BODY> 85
46 46 Embedding subtitled video clips in your Web pages (Someya 2008b) Slide 2 8 Slide 2 <span> <div> <span> (2008b, p. 12) 18. SAMI.smi 19. HTMLSAMI HTML (2008b) 3 3 <HTML_ Template3.txt> Line URL URL 3 (2008b, pp ) 22 <param name="url" value=" <!-- URL --> SAMI URL?sami= SAMI URL Line 12 ( )Line 16 () Line 20 (Windows Media Player ) Line 31 () 8 HTML_Template3B.html 12 <table style="height:370; width:820; background:silver;"> 16 style="height:370; width:410; background:white;"> 20 height="370" width="410" 31 style="height:370; width:410; color:black; background:white;"> 20. HTML 3 txt html htm8 HTML 86
47 Part 2: 47 Slide 1 Slide 2 8 SAMI [URL] 87
48 48 Embedding subtitled video clips in your Web pages (Someya 2008b) 1 2a <HTML_Template1.txt> 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 04 <title>: WMP HTML 05 </title> 06 <style type="text/css"><!-- 07.big {line-height:150%; font-size:12pt; font-family:arial,verdana, 08 Helvetica,' ',' ',sans-serif; color:blue;} 09.reg {line-height:150%; font-size:10pt; font-family:arial,verdana, 10 Helvetica,' ',' ',sans-serif; color:black;} 11.small {line-height:150%; font-size:7pt; font-family:arial,verdana, 12 Helvetica,' ',' ',sans-serif; color:black;} --> 13 </style> 14 </head> 15 <body text="#000000" bgcolor="#ffffff"> 16 <blockquote> 17 <p class= big >WMP HTML </p> 18 <hr width="100%"> 19 <!----> 20 <object id="wmp" title="windows Media Player" 21 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 22 width="370" height="340"> 23 <param name="url" value=" <!-- URL URL SAMI 26?sami= SAMI 27 (URL) --> 28 <param name="autostart" value="false"> 29 <param name="uimode" value="full"> 30 <param name="captioningid" value="captions"> 31 </object> 32 <!--: --> 33 <div id="captions" title="caption Window" 34 style="width:370px; height:70px; background:black;"> 35 </div> 36 <!----> 37 <p class="reg"> (refresh)<br> 40 2 wmv mpg avi <br> 43 3DirectVobSub 44 mpg avi </p> 45 <span class="small"> 46 <a href="javascript:parent.window.close()">close</a></span> 47 <hr width="100%"> 48 <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%"> 49 <tr><td class="small">this page created by Yasumasa Someya, June 5, (HTML_Template1.txt) </td></tr> 51 </table></blockquote> 52 </body> 53 </html> 88
49 Part 2: 49 EasyCapture ( 89
50 50 Embedding subtitled video clips in your Web pages (Someya 2008b) 2 3a <HTML_Template2.txt> 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 04 <title> 2: WMP HTML </title> 05 <style type="text/css"><!-- -- HTML_Template1.txt Lines > 12 </style> 13 <!-- onload 14 ID --> 15 <script language="jscript" for="window" event="onload"> 16 Player.URL=" 17 Subtitle/Sample2.smi"; 18 Player.closedCaption.SAMILang=CCLang.value; 19 Player.closedCaption.captioningID="captions"; 20 </script> 21 <!-- URL URL SAMI 26?sami= SAMI 27 (URL) 24 (pp.8-10) --> 25 </head> 26 <!-- HTML --> 26 <body text="#000000" bgcolor="#ffffff"> 27 <blockquote> 28 <br> 30 <p class="big">wmp HTML </p> 31 <hr width="100%"> 32 <!-- WMP --> 33 <object id="player" title="windows Media Player" 34 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 35 width="370" height="340"> 36 <param name="autostart" value="false"> 37 <param name="uimode" value="full"> 38 </object> 39 <br> 40 <!--DIV (id="captions")--> 41 <div id="captions" title="caption Window" 42 style="width:370; height:70; background:black;"> 43 </div> 44 <!--SELECT SAMILang --> 45 <select id="captionlanguages" language="jscript" name="cclang" class="small" 46 onchange="player.closedcaption.samilang=cclang.value"> 47 <option selected value="japanese">japanese 48 <option value="english">english 49 </select> 50 <br><span class="small"></span> 51 <!----> <hr width="100%"> 64 <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%"> 65 <tr><td class="small"> This script was written by Yasumasa Someya, June 64 30, 2008, based on a sample script provided in "Adding Closed Captions to 65 Digital Media" (Kim Vum, Microsoft Corp., August 2001). </td></tr> 67 </table></blockquote> 68 </body></html> 90
51 Part 2: 51 Internet Explorer 91
52 52 Embedding subtitled video clips in your Web pages (Someya 2008b) 3 8a <HTML_Template3.txt> 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 04 <title></title> 05 </head> 06 <body text="#000000" bgcolor="#ffffff"> 07 <blockquote><p style="font-family:arial,verdana,helvetica,' ', 08 sans-serif; font-size:12pt; color:blue;"></p> 09 <hr align="left" width="630"><br> 10 <!----> 11 <!-- silver white silver --> 12 <table style="width:630; height:300; background:silver;"> 13 <tr> 14 <!----> 15 <td valign="top" 16 style="height:200; width:300; background:white;"> 17 <!--Windows Media Player --> 18 <object id="wmp" title="windows Media Player" 19 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 20 width="310" height="300" 21 style="margin:2; border:0;"> 22 <param name="url" value=" <!-- URL --> 24 <param name="autostart" value="false"> 25 <param name="uimode" value="full"> 26 <param name="captioningid" value="captions"> 27 </object> 28 </td> 29 <!----> 30 <td valign="top" 31 style="width:310; height:280; color:black; background:white;"> 32 <!-- td div --> 33 <div id="captions" title="caption Window"> 34 <br><br><p style="font-family:arial,verdana,'',sans-serif; 35 font-size:10pt; color:black; text-align:center;"></p> 36 </div></td> 37 </tr> 38 </table> 39 <!----> 40 <p style="line-height:150%; font-size:10pt; font-family: Arial,Verdana, 41 Helvetica,' ',sans-serif; color:black;"> <br> <hr align="left" width="630"> 54 <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" > 55 <tr><td style="font-size:7pt;font-family:arial,verdana,helvetica; color: 56 black;">this page was created by Yasumasa Someya, June 30, 2008 (HTML_ 57 Template3. txt).</td></tr> 58 </table></blockquote> 59 </body> 60 </html> 92
53 Part 2: 53 93
54 54 Embedding subtitled video clips in your Web pages (Someya 2008b) 4 12a <HTML_Template4.txt> 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 04 <title></title> 05 <style type="text/css"><!-- -- HTML_Template1.txt Lines > 13 </style> 14 </head> 15 <body text="#000000" bgcolor="#ffffff"> 16 <blockquote><br> 17 <p class="big">wmp IE Ver. 5.5 </p> 18 <hr width="100%"> 19 <br> 20 <!----> 21 <table width="380" height="304" border=0" bordercolor="black" bgcolor="black"> 22 <tr> 23 <!----> 24 <td valign="top" style="width:300; height:200; background:white;"> 25 <!--Windows Media Player --> 26 <object id="player" title="windows Media Player" 27 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 28 width="320" height="304"> 29 <param name="url" value=" <!-- URL URL --> 32 <param name="autostart" value="false"> 33 <param name="uimode" value="full"> 34 <param name="captioningid" value="captions"> 35 <param name="samilang" value="japanese"> 36 </object> 37 </td> 38 <!-- : writing-mode:tb-rl --> 39 <td valign="top" 40 style="writing-mode:tb-rl; background:black; color:white; 41 width:65px; height:304px;"> 42 <!-- td div --> 43 <div id="captions" title="caption Window"></div> 44 </td> 45 </tr> 46 </table> 47 <!----> <span class="small"> 65 <a href="javascript:parent.window.close()">close</a></span> 66 <hr width="100%"> 67 <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%"> 68 <tr> 69 <td class="small">this page was created by Yasumasa Someya, June 5, (HTML_Template4.txt) </td> 71 </tr> 72 </table></blockquote> 73 </body> 74 </html> 94
55 Part 2: 55 Internet Explorer 95
56 56 Embedding subtitled video clips in your Web pages (Someya 2008b) 5 14a 5DirectVobSub <HTML_Template5.txt> 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 04 <title> 5WMP DirectVobSub 05 </title> 06 <style type="text/css"><!-- 07.big {line-height:150%; font-size:12pt;font-family: Arial,Verdana, 08 Helvetica,' ',' ',sans-serif; color:blue;} 09.reg {line-height: 150%; font-size:10pt; font-family: Arial,Verdana, 10 Helvetica,' ',' ',sans-serif; color:black;} 11.small {line-height: 150%; font-size:7pt; font-family:arial,verdana, 12 Helvetica,' ',' ',sans-serif; color:black;} --> 13 </style> 14 </head> 15 <body text="#000000" bgcolor="#ffffff" onload='alert("directvobsub 16 ");'> 17 <blockquote><br> 18 <p class="big">wmp DirectVobSub </p> 19 <hr width="100%"> 20 <!----> 21 <object id="wmp" 22 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 23 width="640" height="544"> 24 <param name="url" value=" 25 <!-- URL URL SAMI 26 SAMI URL --> 27 <param name="autostart" value="false"> 28 <param name="uimode" value="full"> 29 <param name="stretchtofit" value="true"> 30 <!-- IE --> 31 <embed type="application/x-mplayer2" 32 pluginspage=" 33 mediaplayer&ar=media&sba=plugin&" 34 width="640" height="544" 35 src=" 36 showcontrols="1" 37 autostart="0"/> 38 </object> 39 <!----> 40 <span class="reg"> 41 1 WMP DirectVobSub 42 DirectVobSub 43 DirectVobSub (2008a) </span> <hr width="100%"> 76 <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" > 77 <tr> 78 <td class="small">this page was created by Yasumasa Someya, June 5, (HTML_Template5.txt)</td> 80 </tr> 81 </table></blockquote> 82 </body> 83 </html> 96
57 Part 2: 57 97
58 58 Embedding subtitled video clips in your Web pages (Someya 2008b) 6 15a 6<HTML_Template6.txt> 01 <html> 02 <head> 03 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 04 <title> 6: </title> 05 <style type="text/css"><!-- 06.big {line-height:150%; font-size:1.5em; font-family: Verdana,Arial, 07 Helvetica, ' ', sans-serif; color:blue;} 08.reg {line-height:150%; font-size:1em; letter-spacing:1px; font-family: 09 Verdana,Arial,Helvetica,' ', sans-serif; color:black;} 10.small {line-height:150%; font-size:0.9em; font-family: Verdana,Arial, 11 Helvetica,' ', sans-serif; color:black;} 12 --> 13 </style> 14 <!--Internet Explorer --> 15 <script language="javascript"> 16 <!-- 17 var b=navigator.appname.touppercase(); 18 if(b.indexof("explorer")>=0){void(0);}else{alert(" Internet Explorer 18 ");} 20 //--> 21 </script> 22 </head> 23 <body text="#000000" bgcolor="#ffffff"> 24 <blockquote> 25 <br><p class="big"></p> 26 <hr width="100%"> 27 <span class="small"> Internet Explorer (Ver.6 or above) 28 </span><br><br> 29 <span class="small"><font color="red"><u></u></font> 30 > </span><br><br> 34 <!-- --> 35 <table border="0" style="width:650; height:20; background:black;"> 36 <tr><td></td></tr> 37 </table> 38 <object id="player" title="windows Media Player" 39 classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" 40 width="650" height="400"> 41 <param name="url" value=" <!-- URL URL SAMI 44?sami= SAMI 45 (URL) 46 SAMI 47 --> 48 <param name="autostart" value="false"> 49 <param name="uimode" value="full"> 50 <param name="stretchtofit" value="true"> 51 <param name="captioningid" value="captions"> 52 </object> (2/2) 98
59 Part 2: a<HTML_Template6.txt> (2/2) 53 <!--: --> 54 <div id="captions" title="caption Window" 55 style="width:650px; height:90px; background:black;"> 56 </div> 57 <!----> 58 <input type="button" value="" name="fullscrnbtn" 59 title="" 60 onclick="if (Player.playState==3) Player.fullScreen='true'"> 61 <span class="small"> Source Info.: 640x480, kbps, WMV9, 2.98MB</span> 63 <p class="reg"> 64 <a href=" target="_blank" 65 title="txt html IE 68 "></a> <a href= 69 " target="_blank" title="sami ">SAMI </a> 72 </p> 73 <!-- --> 74 <p class="reg"> [ESC] <br> 77 WMP <br> 80 wmv mpg (mpeg-1, 2) avi <br> 83 DirectVobSub 84 mpg avi <br> 85 <p class="small"> <hr width="100%"> 102 <table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" > 103 <tr> 104 <td class="small">this page was created by Yasumasa Someya, June 5, (HTML_Template6.txt) </td> 106 </tr> 107 </table> 108 </blockquote> 109 </body> 110 </html> 28 99
60 60 Embedding subtitled video clips in your Web pages (Someya 2008b) 100
61 Part 2: 61 1) (2008a) (2008c) (2008d) 2) 53 (2008a 32 3) FTP 4) QiuickTime RealPlayer mpg [mpeg] avi WMP WMP [] [] [] [] [OK] WMP 5) <object> Internet Explorer (IE) Safari Firefox <object> <object> WMP IE WMP <embed> WMP SAMI <object> WMP IE DirectVobSub Safari Firefox <embed> WMP (pp ) WMP <embed> (p. 67) IE IE Internet Explorer JavaScript HTML <head></head> <script language="javascript"> <!-- 101
62 62 Embedding subtitled video clips in your Web pages (Someya 2008b) var b=navigator.appname.touppercase(); if(b.indexof("explorer")>=0){void(0);}else{alert(" Internet Explorer ");} //--> </script> Safari; Firefox history back 1 Internet Explorer "); history.back();} 6) (2008a) WMP (closed caption pane) 7) (dot) 1 Windows 120 dpi (dots per inch) 1 dot width="370" height="340" width="320" height="300" height= width="320" height="240" (2008c, p. 23, pp ) 8) HTML (Sample.wmv) (Sample.smi) <param name="url" value="sample.wmv"> URL 1. HTML [MyMovies] sami [MyMovies] HTML_Sample.html Sample.wmv Sample.smi URL <param name="url" value="sample.wmv"> value=".sample.wmv"./ 102
63 Part 2: 63../ MyData../MyData/ 2. HTML [MyFiles] [MyMovies] sami [MyFiles] HTML_Sample.html [MyMovies] Sample.wmv Sample.smi URL <param name="url" value="mymovies/sample.wmv"> value="./mymovies/sample.wmv" pp ) invisible 10) 8 SAMI URL URL URL SAMIFileName URL URL <param name="url" value=" <param name="samifilename" value=" 11) DirectVobSub 2008a, p. 2 pp ) a, pp ) DirectVobSub 2008a, pp p ) JScript 1 JavaScript JavaScript Windows <script language= JavaScript... > Web <SCRIPT Language="JScript"> JScript Internet Explorer HTML JScript MSDN JScript (Microsoft Corp., ND/2008c ) 15) SAMI SAMI SAMI URL 16) JavaScript JScript cgi Perl 103
64 64 Embedding subtitled video clips in your Web pages (Someya 2008b) (.) 1 () () ( \ ) 17) (background) blue SAMI (background-color) 18) SAMI SAMI (2008a, pp. 7-11) 19) DirectVobSub GOM Player ViPlay WMP SAMI 2008a, p. 6 WMP pp ) Captions and Lyrics PowerToy SAMI WMP PowerToy PowerToy WMP WMP 21) ms [] 2008d, p
65 Part 2: 65 22) National Association of the Deaf Described and Captioned Media Program (DCMP) Captioning Keys: Guidelines and Preferred Techniques (2007) characters-per-line requirementwpm = words per minute 120 wpm wpm wpm It's time to stop talking about it, but we should act immediately before it's too late (240 wpm) It's time to act before it's too late. (4 8 = 120 wpm) (primacy effect) (recency effect) (information focus) (interlingual translation) (intralingual subtitling 1 23) writing-mode HTML writing-mode HTML <body> <div> <head> </head> div <body> <div style="writing-mode:tb-rl; font-family:' '; font-size:10pt; 105
66 66 Embedding subtitled video clips in your Web pages (Someya 2008b) line-height:150%; padding:5%;"> HTML 180 </div> </body> 24) <ruby>ie Ver. 7 WMP Vers. 10/11 WMP 25) wmv DirectVobSub wmv DirectVobSub mpg (mpeg-1, 2) 26) stretchtofit ( true falsetruefalse320240; mpeg stretchtofit wmv Player.StretchToFit = True Player.StretchToFit = False 27) Windows [Fn] + [PrtSc] 3. Windows [] [] Windows 4. [] [] 5. [] [] JPEG Windows Windows 106
67 Part 2: 67 28) html 3 (HNTML_Template3.html) html html 1. html.css mystyle.css mystyle.css html <style type="text/css"> <!--.big {line-height 150%; font-size:12pt; font-family:arial,verdana,helvetica, ' ',' ',sans-serif; color:blue;}.reg {line-height:150%; font-size:10pt; font-family:arial,verdana,helvetica, ' ',' ',sans-serif; color:black;}.small {line-height:150%; font-size:7pt; font-family:arial,verdana,helvetica, ' ',' ',sans-serif; color:black;} </style> 2. html <head></head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> 3. html style 2 link html head html link rel href <link rel="stylesheet" type="text/css" href="filename.css" /> rel stylesheet 5 <embed> <object> <embed> SAMI SAMIFileName, SAMIStyle, captioningid <object> URL <embed> src [URL] 5 <object> Internet Explorer SAMI width, height src <objedct> 107
68 68 Embedding subtitled video clips in your Web pages (Someya 2008b) <!-- IE --> <embed type="application/x-mplayer2" name="mediaplayer" pluginspage=" mediaplayer&ar=media&sba=plugin&" width="***" height="***" src="******" captioningid="captions" showcontrols="1" autostart="0"/> IE HTML_Template2.html HTML_Template2B.html HTML_Template4.html 3 <embed> IE <object> <embed> HTML_Template1.html -- HTML_Template2.html HTML_Template2B.html HTML_Template3.html HTML_Template3B.html HTML_Template4.html HTML_Template5.html DirectVobSub HTML_Template6.html HTML_Template7.html <embed> <embed> IE Internet Explorer [1] DCMP (2007) "Captioning Key: Guidelines for Preferred Techniques." Described and Captioned Media Program (DCMP), The National Association of the Deaf, U.S.A. [Online] [2] Gottlieb, Henrik (1998). Subtitling in M. Baker (ed.) Encyclopaedia of Translation Studies. London and New York: Rutledge. [3] Hatim, B. & Mason, I. (1997). The Translator as Communicator. London and New York: Rutledge. [4] Microsoft Corp. (2000/2002) Web Windows Media [Online] [5] (2000/2008a) Windows Media Player Active X MSDN > SDK > WMP 7 SDK) [Online] [6] (2000/2008b) Player MSDN > SDK > WMP 7 SDK > WMP Active X [Online] 108
69 Part 2: 69 [7] (2000/2008c) ClosedCaption MSDN > SDK > WMP 7 SDK > WMP Active X [Online] [8] (2000/2008d)Web (MSDN > SDK > Windows Media Player 7 SDK) [Online] [9] (2000/2008e)Internet Explorer [Online] [10] (2001) "Adding Closed Captions to Digital Media" (MSDN Library, written by Kim Vum, Microsoft Corp.) [Online] [11] (2002) SAMI 1.0 Demonstration Suite (An Overview of SAMI with s sample media clip and scripts) [Online] [12] (ND/2008a) PARAM Elements in an OBJECT Element (MSDN Library > WMP11 SDK > WMP Object Model > Using the WMP Control in a Web Page) [Online] [13] (ND/2008b) ClosedCaption Object (MSDN Library > WMP11 SDK > WMP Object Model > WMP Object Model Reference) [Online] [14] (ND/2008c) JScript (MSDN > Visual Studio ) [Online] [15] (ND/2008d) JScript (MSDN > Visual Studio ) [Online] [16] (2007) TV (pp ) [17] (2008a) Do-It-Yourself (1) [18] (2008c) Do-It- Yourself (3) [19] (2008d) SAMI Do-It-Yourself (4) [20] (2005) 5 pp [21] (2006) Vol.106, No.285 (pp ). ND [=Not Dated] URL
70 110
字 幕 付 き 動 画 の 作 成 と ウェブページへの 埋 め 込 み に 関 するテクニカルノート ~ 英 語 教 員 のための Do-It-Yourself マニュアル~ Adding subtitles to video clips and embedding them in your Web pages A do-it-yourself manual for teachers of English
動画への字幕の挿入について
Do-It-Yourself (1) 2 (subtitle translation) ( 2004, 2007) Windows XP (SP2) 1. 2 SOMEYA, Yasumasa (2008a), Adding subtitles to video clips (Part 1 of the monograph, Adding subtitles to video clips and embedding
HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17
1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML
eil2009062930_4.ppt
URL (Universal Resource Locator) WWW (World Wide Web) URL http://www.cs.kumamoto-u.ac.jp/ Web ftp://ftp.cc.kumamoto-u.ac.jp/ FTP (File Transfer Protocol) FTP World Wide Web (WWW) Web HTTP (HyperText Transfer
07_経営論集2010 小松先生.indd
19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT
1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................
CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS
(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >
HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript
インターネットマガジン1998年11月号―INTERNET magazine No.46
6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;
コンピュータサイエンス 1. ウェブの基本
1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /
経営論集2011_07_小松先生.indd
20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML
InfoPros13_digest.key
! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:
1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3...................
0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................
あいち電子自治体ガイドライン（第1章）
1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2
コンピュータサイエンス 4. ウェブプログラミング
4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html
27短01研01斉藤.indd
WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium
World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML
Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse
6 2 1
6 1 6 (1) (2) HTML (3) 1 Web 1 Web Web 1 Web HTML 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 takahagi
■新聞記事
情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]
字幕付き動画作成のためのSAMI ファイルの作成・編集について
字幕付き動画作成のための SAMI ファイルの作成 編集について Do-It-Yourself (4) 2008a SAMI (Synchronized Accessible Media Interchange) 2 SAMI (Ibid., pp. 13-15) 1 2 3 4 1. WMP SOMEYA, Yasumasa (2008d), Creating and Editing SAMI files
1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2
XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................
: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1
: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 2 : : 1 1 : 3 : 2 (.ppsx) (A0nxxyyy.ppsx) presen (1 ) ID:A0nxxyyy Name: Title: 3 HTML (HyperText Markup Language) 4 ( ) http://pweb.cc.sophia.ac.jp
3 1 5 1.1....................................... 6 1.2.......................................... 6 1.3..................................... 7 1.4.................................... 8 1.4.1.............................
1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................
HTML 1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ 4 2..................... 6 3.....................
PowerPoint プレゼンテーション
ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが
68 <td valign="top" class="c8"> 69 <p class="c13"><a name="マーク0"><span class="c9">⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign="top" class
ページ 内 のリンクでページ 内 に 移 動 の html のページの 追 加 方 法 三 宅 節 雄 Html 文 書 を TeraPad で 開 きます 1 2
388-356697252-2.pdf
専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]
WORD 98 入力の手引き
コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され
0序文‐1章.indd
本 書 に 記 載 されたURL 等 は 執 筆 時 点 でのものであり 予 告 なく 変 更 される 場 合 があります 本 書 の 使 用 ( 本 書 のとおりに 操 作 を 行 う 場 合 を 含 む)により 万 一 直 接 的 間 接 的 に 損 害 が 発 生 し ても 出 版 社 および 著 者 は 一 切 の 責 任 を 負 いかねますので あらかじめご 了 承 下 さい Microsoft
HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー
Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込
文 書 構 造 とスタイル
第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介
ホームページ制作スターターズ
HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述
Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet
2012 Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheets CSS2 CSS3 Web Web2.0 Web3.0 Web IT Web Homepage
Microsoft PowerPoint - InfPro_I9.pptx
今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ
2. HTML 2 3. 1 1 100 6 4. csh AWK 4. 4. AWK 1., 2., 3. 2 HTML HTML HyperText Markup Language WWW WWW (.html
1. 1 AWK HTML 18 8 14 1 HTML Yahoo! 3 Yahoo! (http://www.yahoo.co.jp/) 1 Yahoo! : http://headlines.yahoo.co.jp/hl ( ) ( ) Netscape 3.04 1. 2 Netscape 3.04 2. 1 Yahoo! 2. HTML 2 3. 1 1 100 6 4. csh AWK
m_sotsuron
iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone
「ハードサブ」動画の作成について
Do-It-Yourself (3) 3, 4 (3) (Subtitle Translation) 1) Subtitle Workshop Viplay 2) Viplay vsf Viplay Windows Media Player (WMP) WMP WMP 3) (2008a) (2008b) SOMEYA, Yasumasa (2008c). Creating Hard-Sub video
1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................
web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................
HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/
HTML文書の作成
99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text
卒 業 論 文
2210980107-4 2002 2 18 SMIL Web SMIL CG Flash SMIL 1 SMIL CG SMIL HTML RealText SMIL 2 Flash RealText RealText 10 16 9 23 1 3 3 1 2 SMIL RealPix 4 ISDN ADSL CATV Bush Goa TV Web [7] TV 3 3 SMIL CG RealSystem
1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............
1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................
1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................
1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................
JavaScript の使い方
JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static
Microsoft PowerPoint - 08回目.pptx
1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading
untitled
MoogaOne 1. MoogaOne... 1 2. MoogaOne... 1 3.... 1 4.... 1 5.... 2 6.... 2 1.... 2 2.... 2 3. Template.htm... 2 4. index.htm... 4 [ ]... 4 5.... 4 6.... 6 7.... 6 8.... 6 [Template.htm Template-e.htm
textbook.indd
02 XHTML+CSS part2 CSS Topics 前 回 習 得 した 基 礎 CSS を 元 に ボックス CLASS ID の 概 念 を 習 得 ボックスレイアウトを 用 いた 2 カラムのサイト 構 築 をします An Introduction to Webdesign + XHTML/CSS Coding 18 01. XHTML+CSS 2 19 20 21 22 23 24
Table of Contents... 3 XML... 3... 3... 4 XSL... 4 CSS XML... 5 CSS... 5 HTML+CSS... 6 CSS XML... 7 CSS... 8 XSLT XML HTML(+CSS)... 9 IE5 XML... 9 IE5
2001 2 Table of Contents... 3 XML... 3... 3... 4 XSL... 4 CSS XML... 5 CSS... 5 HTML+CSS... 6 CSS XML... 7 CSS... 8 XSLT XML HTML(+CSS)... 9 IE5 XML... 9 IE5... 9 XSLT... 10 XSLT... 11 XML HTML... 11 XML
問 題 1 背 景 色 という 文 字 列 の 背 景 をちょっと 青 っぽい 色 (#6699FF)で 表 示 するHMTLを 作 成 せよ <HTML><HEAD><TITLE>test11</TITLE> <BODY BGCOLOR="#FFFFFF"> この 部 分 は<STRONG STY
9.スタイルシートと JavaScript を 組 み 合 わせてみよう スタイルシートとは スタイルシートとは タグのみでは 実 現 不 可 能 なデザインレイアウトやページ 構 造 を 実 現 する 命 令 郡 です 主 に 次 の3つの 書 式 があります (1)インライン タグ 内 部 により 詳 細 なデザインを 組 み 込 む 書 式 です 例 : この 部 分 は
PowerPoint プレゼンテーション
HTMLガイダンス 1 HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種
6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1
6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)
¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ
HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24 3 : HTTP : HTML4 2 / 24 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac:
インターネットマガジン2004年3月号―INTERNET magazine No.110
C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;
Windows Macintosh 18 Java Windows 21 Java Macintosh
2 2 2 6 6 6 12 16 17 18 Windows Macintosh 18 Java Windows 21 Java Macintosh 23 25 26 26 27 33 34 40 48 55 57 60 Sun Sun Microsystems Java Java Sun Microsystems, Inc. Microsoft Windows Windows Microsoft
</BODY> </HTML> HTML HTML HTML HTML <HTML> </HTML> <HTML> </HTML> HTML <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BODY moji.htm <HTML> <HEAD> <TIT
HTML HTML.html.htm HTML HTML FTP HTML HTML HTML 1 HTML HTML HTML HTML HTML
"g10s.jpg", "g10.jpg", "(10) 菖 蒲 の 花 も 美 しい", 0] /* は "サムネイルファイル"," 写 真 ファイル"," 写 真 コメント", */ photo_holder[1] ="photo/" /* 写 真 ファイルのホルダ */ subfile_nam
![g10s.jpg, g10.jpg, (10) 菖 蒲 の 花 も 美 しい, 0] /* は サムネイルファイル, 写 真 ファイル, 写 真 コメント, */ photo_holder[1] =photo/ /* 写 真 ファイルのホルダ */ subfile_nam](/thumbs/39/20056651.jpg "g10s.jpg, g10.jpg, (10) 菖 蒲 の 花 も 美 しい, 0] /* は サムネイルファイル, 写 真 ファイル, 写 真 コメント, */ photo_holder[1] =photo/ /* 写 真 ファイルのホルダ */ subfile_nam")
城 南 宮 基 本 < md_main_b01.htm >
立ち読みページ
6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> HTML
HTML Flash Alt 2
1 HTML Flash Alt 2 [ ] [ ] HTML CSS [ ] 3 1 BGM 4 TAB IT 5 Ver1.0 HTML HTML HTML HTML URL HTML HTML.HTML.HTM 6 HTML h1 h6 *1 HTML title *1 7 HTML img ALT *1 *1 ALT HTML img ALT ALT img ALT ALT * - ALT
確 認 とアップロード (2) ブラウザを 使 用 して 確 認 内 容 の 修 正 ブラウザでファイルを 開 き 表 示 されるページを 確 認 エディタで 修 正 し 上 書 保 存 した 後 再 読 込 み( 更 新 ) ボタン 上 記 作 業 を 繰 り 返 す (3) 完 成 したファイル
Webによる 情 報 提 供 リクエスト Webサーバ レスポンス ブラウザ 宮 原 のホームページ
CONTENTS 0 1 2 3 4 5 6 7 8 9 10 0 viii ix x http://www.vector.co.jp/vpack/filearea/win/writing/edit/hm/index.html http://hidemaru.xaxon.co.jp/lib/macro/index.html ftp://ftp.m17n.org/pub/mule/windows/ http://www.yatex.org/
B 20 Web
B 20 Web 0753018 21 1 29 1 1 6 2 8 3 UI 10 3.1........................ 10 3.2 Web............ 11 3.3......... 12 4 UI 14 4.1 Web....................... 15 4.2 Web........... 16 4.3 Web....................
スタイルシートでデザインを整えよう
スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互
Microsoft PowerPoint - css [互換モード]
![Microsoft PowerPoint - css [互換モード]](/thumbs/39/20119160.jpg "Microsoft PowerPoint - css [互換モード]")
情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使
11
( 40 ) 1 ipad ) LAN (Local Area Network) WAN (Wide Area Network) 2 TCP/IP 3 LAN LAN EMOBILE WiMAX WILLCOM ) 4 ( www(world wide web,) ) 5 6 7 8 9 10 index.html Web IE, FireFox, Safari ( ) 11 IP IP xx.xx.xx.xx
PowerPoint プレゼンテーション
3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,
ホームページの作成
HTML5,CSS 資 料 HTML5 HTML の 文 法 HTML(Hyper Text Markup Language)は, 文 章 の 部 分 を Tag(タグ)と 呼 ばれ る 命 令 で 挟 んでいく タグは ... 開 始 終 了 のように 開 始 タグと 終 了 タグ 一 対 のペアになっている. タグは, 挟 まれた 部 分 がどのような 情 報 であるかを
インターネットマガジン1996年12月号―INTERNET magazine No.23
26 INTERNET magazine 1996/12 HTML S jhttp://www.microsoft.com/truetype/css/gall ery/spec2.htm S jhttp://www.hidaho.com/c/ S jhttp://www.microsoft.com/ie/most/howto/lay out/winston/wclub.htm
目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き
Ver.2 ユーザマニュアル スタートガイド 第 2 版 最 終 更 新 日 2011/7/12 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダーの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き
1" 3 3 4 5 9 15 16 17 18 20 22 22
- - 2014 8 TEL 03-4455-7453 FAX 03-6740-1754 Mail tamago-con@temona.co.jp 1" 3 3 4 5 9 15 16 17 18 20 22 22 2" 2 23 24 25 27 28 29 30 31 32 33 34 35 42 47 STEP1 3" 4" STEP2 URL URL 5" STEP3 2 STEP4 jpg
~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID
10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/
Network Computing の基礎
CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS
untitled
Excel Internet Explorer Excel Internet Explorer Excel Internet Explorer 1 Excel Excel 1.1 Excel Excel 2 1 1.1.1 Ctrl-C ( Sheet2) 2 OK 3 1.1.2 ( Sheet3) A1 =Sheet1!A1 Sheet1 A1 Sheet1 A1 Sheet3 A1 4 A1
クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに
Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522
189 2015 1 80
189 2015 1 A Design and Implementation of the Digital Annotation Basis on an Image Resource for a Touch Operation TSUDA Mitsuhiro 79 189 2015 1 80 81 189 2015 1 82 83 189 2015 1 84 85 189 2015 1 86 87
1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.
1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................
Web
Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................
html_text
HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web
目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方
Ver.2 ユーザマニュアル スタートガイド 第 5 版 最 終 更 新 日 2012/7/11 1 目 次 本 書 について... 3 はじめに... 5 第 1 章 コンテンツ 制 作 方 法... 6 1-1 テンプレートの 使 用... 6 1-2 キャラクタエンコーディング... 7 1-3 ヘッダの 書 き 方... 7 1-4 画 像 について... 8 1-5 CSS の 書 き 方...
インターネットマガジン1997年4月号―INTERNET magazine No.27
3.0 4.0 A N S W E R1 A N S W E R2 308 INTERNET magazine 1997/4 1 jhttp://www.tucows.com/ A { text-ecoration: none; } INTERNET magazine
HTMLとメタデータ
HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)
CSSの基礎
Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する
Microsoft PowerPoint - css.ppt [互換モード]
![Microsoft PowerPoint - css.ppt [互換モード]](/thumbs/41/22472741.jpg "Microsoft PowerPoint - css.ppt [互換モード]")
情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される
年刊EDP 2003
1 2 3 HDD HDD HDD HDD ( 4 !!! ( )!! HDD ( )!! ( )!!(ry YU-SHOW!!!!!!!! HxH 5 HDD ( 0123-456-789 ( e 6 PC PC psd 7 8 YO! WebPage http://mode.jp/ PowerTone 9 A4 Canon PIXUS850i 1,440dpi 720dpi A4 10 etc
演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z: W
Webデータ 管 理 HTML+CSS (4) (2 章 ) 2011/10/26( 水 ) 1/21 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください(Zドライブとして 使 用 できます) 演 習 名 使 用 するフォルダ 演 習 1 Z:
スライド 1
第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの
1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...
SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web
6 2 1
6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)
インターネットマガジン1999年2月号―INTERNET magazine No.49
A MagnaviIp990Htmltips +CD-ROM 3.0 3.0 A N S W E R A N S W E R 74 INTERNET magazine 999/ click here! 3
Microsoft Word - HTML.docx
ホームページを 見 る 環 境 (Web ブラウザの 種 類 やバージョン, 画 面 サイズなど)は 多 種 多 様 であり, 自 分 が 見 ている 状 態 と 必 ずしも 同 じではないことを 前 提 に 作 成 して ください 1 1. 文 書 のレイアウト, 文 字 の 書 式 原 則 として,タグと 属 性 は 大 文 字, 属 性 の 値 は"で 囲 んだ 小 文 字 で 記 述 します
ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3
Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...
PowerPoint Presentation
HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam
8 Web 8.1 Web Web 8.3 XHTML Web (1) (2) 2 8.1.1 Web Web Web Web 4 Web Web 2 5 PC Web Microsoft Internet Explorer Netscape Navigator Mozilla Firefox We
8 Web Web XHTML XHTML 1 Web Web 1 Web XHTML Web Web XHTML XHTML Extensible HyperText Markup Language( ) Web HTML XML HTML Web 2 XHTML XHTML HTML 4.01 XHTML XHTML 1.0 3 XHTML XHTML XHTML Web 1 2 Netscape
2 2 2 6 9 9 10 14 18 19 21 22 22 Java 23 24 25 25 26 30 31 32 39 46 53 55 58 2 2.0 2.0R Ver.2.0R Java Java 2.0 2.0R 2.0R 2.0 Ver2.0 2.0R Ver2.0R 19 Sun Sun Microsystems Java Java Sun Microsystems, Inc.
130 11 A B C A B C Ctrl (S) 5 A B C 11.2: 11.1.2 2 11.2 (F) (A) ( OK ) 3 (E) ( ) (E) 11.1.3 3
129 11 Web IT ( 11.1) 1990 2004 2006 JIS 1 Windows 2 Web Web 11.1: 11.1 11.1.1 1 Ctrl ( ) 11.2 (U) (A) ( OK ) (S) 1 (JIS X 8341-2) (JIS X 8341-3) FAX (JIS X 8341-4) 8341 JIS JIS X8341 http://www.jisc.go.jp/
モール管理者マニュアル Ver.1.0
1 Html 編 集 ツール 補 足 マニュアル Ver.1.0 株 式 会 社 ソフトクリエイト 2012/11/14 目 次 1. Html について... 3 1.1. Html とは... 4 1.2. Html タグの 基 本... 5 1.2.1. HTML タグの 基 礎... 5 1.2.2. HTML タグの 種 類 ( 主 要 タグ)... 7 2. Html 編 集 ツール...
山梨県ホームページ作成ガイドライン
17 7 ...1...4...4...4...4...5...5 W3C...5...6...6...6...7...8...8...10...10...10... 11...12...12...13...13...13...14...14...14...15...15...16...16...16...16...16...17...18 15 (2003 ) 69.7 81.1 43.6 19.6
情報公開システム論2.pptx
情 報 公 開 システム 論 (2) 神 戸 情 報 大 学 院 大 学 横 山 輝 明 電 子 文 書 としてのWebページ 2 ホームページ(1) ホームページ 自 由 に 作 成 安 価 世 界 中 に 公 開 多 彩 な 表 現 力 双 方 向 性 - 島 根 県 立 大 学 - 島 根 県 立 大 学 短 期 大 学 部 h,p://www.u- shimane.ac.jp/ 3 ホームページ(2)
_勉強会_丸山さつき_v3
CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS
Microsoft Word - 2016メディプロ1HTML統合版v1
2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な