芸大 - 芸術情報演習デザイン(Web) 第2回 - HTML入門

ܳज़৘ใԋशσβΠϯ XFC ୈճɿ)5.-ೖ໳ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$ ୲౰ɿాॴ३

888Λࢧ͑Δͭͷ͘͠Έ 63- )551 )5.-

888ͷ͘͠Έ ‣ ࣗ෼ͷ1$Ͱ8FCϖʔδΛݟ͍ͯΔͱ͖Կ͕ى͍ͬͯΔͷ͔ ! ‣ Ӿཡ͍ͨ͠8FCϖʔδͷΞυϨεΛೖྗ ‣ ྫɿIUUQBNDHFJEBJBDKQHVJEFBCPVU

888ͷ͘͠Έ ‣ 8FCϒϥ΢β͸ɺΞυϨε͔Βαʔόͷ৔ॴΛ୳ͩ͢͠ ‣ lIUUQBNDHFJEBJBDKQzͷ෦෼͕͜Εʹ૬౰ IUUQBNDHFJEBJBDKQ

888ͷ͘͠Έ ‣ ΞυϨεͷ࢒Γͷ෦෼͔Βɺαʔό಺ͷ֘౰σʔλΛಛఆ ‣ lHVJEFBCPVUzͷ෦෼͕͜Εʹ૬౰ /guide/about

888ͷ͘͠Έ ‣ ࣗ෼ͷPCͰWebϖʔδΛݟ͍ͯΔͱ͖ɺԿ͕ى͍ͬͯΔͷ͔ ‣ WebϖʔδͷσʔλΛαʔό͔ΒखݩͷPCʹૹ৴

888ͷ͘͠Έ ‣ ࣗ෼ͷPCͰWebϖʔδΛݟ͍ͯΔͱ͖ɺԿ͕ى͍ͬͯΔͷ͔ ‣ PCଆͰड৴ͨ͠৘ใ͔ΒɺWebϖʔδΛੜ੒͠දࣔ

888Λࢧ͑Δͭͷ࢓૊Έ ‣ 63- ΋͘͠͸63* ‣ 6OJGPSN3FTPVSDF-PDBUPS ‣ ωοτϫʔΫ্ͷ৘ใΛҰҙʹಛఆ͢ΔΞυϨεࢦఆํ๏ !
‣ )551 ‣ )ZQFS5FYU5SBOTGFS1SPUPDPM ‣ ίϯϐϡʔλಉ͕࢜৘ใΛ΍ΓͱΓ͢Δϧʔϧ ! ‣ )5.- ‣ )ZQFS5FYU.BSLVQ-BOHVBHF ‣ ؀ڥʹ͔͔ΘΓͳ͘888Λهड़͢ΔͨΊͷจॻهड़ݴޠ

888ͷ͘͠Έ ‣ ઌ΄ͲͷྫͰ͍͏ͱ ‣ ͭͷ͘͠Έ 63- )551 )5.- ʹ͍ͭͯཧղ͢Δ )551
)551 )5.- URL

)5.-ͱ͸

)5.-ͱ͸ ‣ ࠓ೔͸ͭͷ࢓૊Έͷͻͱͭ)5.-Λ࣮ࡍʹॻ͍͍͖ͯ·͢ ! ‣ )5.- )ZQFSUFYU.BSLVQ-BOHVBHF ͱ͸Կ͔ ‣
ͦΕͧΕͷύʔπ͝ͱʹҙຯΛཧղ͢Δ

)5.-ͱ͸ ‣ )ZQFS5FYU ! ‣ ʮςΩετΛӽ͑Δʯ ‣ ෳ਺ͷจॻΛ૬ޓʹؔ࿈෇͚ɺ݁ͼ෇͚Δ࢓૊Έ

)5.-ͱ͸ ‣ .BSLVQ ϚʔΫΞοϓ ! ‣ จॻͷதʹ໨ҹ ϚʔΫ Λ෇͚͍ͯ͘͜ͱ
‣ )5.-Ͱ͸ɺจॻͷߏ଄ΛϚʔΫΞοϓ͢Δ ‣ ࠓ೔ͷतۀ಺༰ͷϝΠϯ

)5.-ͱ͸ ‣ -BOHVBHF ‣ ݴޠ

)5.-ͱ͸ ‣ ͭ·Γ)5.-ͱ͸ ‣ ʮจॻͷཁૉʹ໨ҹ͕͚ͭΒΕͨɺϋΠύʔςΩετΛهड़ ͢ΔͨΊͷݴޠʯ

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ྫ͑͹ҎԼͷΑ͏ͳจॻ͕͋ͬͨͱ͢Δ ೥݄೔ ӡಈձ࣮ߦҕһձ ! ӡಈձ։࠵ͷ͓஌Βͤ ! དྷΔɺ݄೔ʹୈճӡಈձΛڍߦ͍ͨ͠·͢ɻօ༷ʹ͓͔Ε·ͯ͠ ͸ɺ;Δͬͯ͝ࢀՃ͍ͩ͘͞·͢Α͏͓ئ͍͍ͨ͠·͢ɻ
! ͳ͓Ӎఱͷ৔߹͸ཌिʹԆظ͠·͢ɻதࢭͷࡍͷ࿈བྷ͸ɺϗʔϜϖʔδ ʹهࡌ͠·͢ͷͰɺͦͪΒΛ͝ࢀর͍ͩ͘͞ɻ ! ˓˓େֶººֶ෦ IUUQIPHFDPN UFM

೥݄೔ ӡಈձ࣮ߦҕһձ ! ӡಈձ։࠵ͷ͓஌Βͤ ! དྷΔɺ݄೔ʹୈճӡಈձΛڍߦ͍ͨ͠·͢ɻօ༷ʹ͓͔Ε·ͯ͠ ͸ɺ;Δͬͯ͝ࢀՃ͍ͩ͘͞·͢Α͏͓ئ͍͍ͨ͠·͢ɻ ! ͳ͓Ӎఱͷ৔߹͸ཌिʹԆظ͠·͢ɻதࢭͷࡍͷ࿈བྷ͸ɺϗʔϜϖʔδ ʹهࡌ͠·͢ͷͰɺͦͪΒΛ͝ࢀর͍ͩ͘͞ɻ
! ˓˓େֶººֶ෦ IUUQIPHFDPN UFM ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ͜ͷจॻͷߏ଄ ϔομʔ େݟग़͠ ஈམ ஈམ ϑολʔ

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ )5.-Λॻ͘ͱ͍͏͜ͱ͸ɺจॻͷߏ଄Λॻ͘ͱ͍͏͜ͱ ! ‣ จॻͷͲͷ෦෼͕Ͳͷཁૉͳͷ͔Λ໨ҹ ϚʔΫΞοϓ ʹ Αͬͯࣔ͢ ‣
λΠτϧ ‣ ݟग़͠ ‣ ஈམ ‣ Ҿ༻ ‣ ϦετFUD

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ Ͳ͔͜ΒͲ͜·Ͱ͕ͦͷཁૉͳͷ͔Λʮλάʯͱݺ͹ΕΔ໨ ҹͰهड़͍ͯ͘͠ ‣ จॻͷ෦෼͝ͱͷҙຯʹԠͯ͡ɺλάΛద੾ʹ࢖͍ͬͯ͘͜ ͱ͕ɺ)5.-࡞੒ͷओͳ࡞ۀͱͳΔ

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ʮλάʯͱݺ͹ΕΔ໨ҹΛهड़͍ͯ͘͠ ! ‣ هड़͢Δ಺༰͸ͭ ‣ Ͳ͔͜Β։࢝λά ‣ Ͳ͜·Ͱऴྃλά
‣ ཁૉͷछྨཁૉλΠϓ ! ‣ จॻͷ෦෼͝ͱͷҙຯʹԠͯ͡ɺཁૉʹద੾ͳλάΛద༻͢ Δ͜ͱ͕ɺ)5.-࡞੒ͷओͳ࡞ۀͱͳΔ

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͸͡ΊʹI

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͸͡ΊʹI ։࢝λά

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͸͡ΊʹI ։࢝λά ऴྃλά

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͸͡ΊʹI ։࢝λά ऴྃλά ཁૉ಺༰

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ϚʔΫΞοϓͷهड़ྫ I͸͡ΊʹI ։࢝λά ऴྃλά ཁૉ಺༰ Iཁૉ

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ։࢝λά ɺऴྃλάͷৄࡉ ‣ ։࢝λά ! ! ! !
! ‣ ऴྃλά I λάͷ࢝఺ λάͷऴ఺ ཁૉλΠϓͷछྨ I λάͷ࢝఺ λάͷऴ఺

ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ։࢝λάͰཁૉͷ࢝఺Λࢦఆͨ͠ΒɺඞͣऴྃλάͰด͡Δ ‣ Q͜ͷཁૉ͸ஈམΛҙຯ͍ͯ͠·͢ɻQ ! ‣ ։࢝λάͱऴྃλά͕ͻͱͭʹͳͬͨಛघͳλά͕ଘࡏ͢Δ ‣ CSվߦ
‣ JNHTSDzIPHFKQHzBMUzIPHFzը૾ ! ‣ λά͸ɺඞͣ൒֯ӳ਺จࣈͷখจࣈͰ

%SFBN8FBWFSͰ)5.-࡞੒ ‣ ૣ଎ɺ)5.-Λ࡞੒ͯ͠Έ·͠ΐ͏ ‣ ͜ͷतۀͰ͸ɺ"EPCF%SFBNXFBWFSΛ࢖༻͠·͢

%SFBN8FBWFSͰ)5.-࡞੒ ‣ %SFBNXFBWFSΛىಈ ‣ ·ͣ͸ɺ؀ڥઃఆ ‣ %SFBNXFBWFS؀ڥઃఆ৽نυΩϡϝϯτ ‣ ॳظઃఆυΩϡϝϯτλΠϓ %5%
Λʮ)5.-ʯʹ ‣ ΤϯίʔυॳظઃఆΛʮ6OJDPEF65'ʯʹ

%SFBN8FBWFSͰ)5.-࡞੒ ‣ ؀ڥઃఆ

%SFBN8FBWFSͰ)5.-࡞੒ ‣ ৽ن࡞੒)5.-Λબ୒

%SFBN8FBWFSͰ)5.-࡞੒ ‣ ʮ෼ׂʯදࣔΛબ୒

%SFBN8FBWFSͰ)5.-࡞੒ ‣ πʔϧόʔͷ஍ٿͷϚʔΫΛԡ͢ͱɺ8FCϒϥ΢βͰදࣔ

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>無題ドキュメント</title> </head>
<body> </body> </html> %SFBN8FBWFSͰ)5.-࡞੒ ‣ ͳʹ΍Βطʹهड़͕ʜ ‣ )5.-ͷجຊͷςϯϓϨʔτ͕ࣗಈ࡞੒͞Ε͍ͯΔ

)5.-ͷࠎ૊Έ ‣ ࠎ૊ΈͱͳΔ)5.-จॻʹؚ·ΕΔͭͷཁૉ ‣ IUNMཁૉɺIFBEཁૉɺCPEZཁૉ IUNMཁૉ IFBEཁૉ CPEZཁૉ

)5.-ͷࠎ૊Έ ‣ IUNMཁૉ ‣ )5.-จॻͷ࢝·ΓͱऴΘΓΛࢦఆ͍ͯ͠Δ ‣ શͯͷ)5.-จॻ͸ɺIUNMཁૉͰғ·Ε͍ͯΔ

)5.-ͷࠎ૊Έ ‣ IFBEཁૉ ‣ จॻࣗ਎ͷ৘ใΛهड़͢Δཁૉ ‣ λΠτϧɺจࣈίʔυɺݴޠɺ$44ϑΝΠϧͷ৔ॴͳͲ ‣ IFBEཁૉʹهड़ͨ͠಺༰͸ɺ8FCϒϥ΢β಺ʹ͸දࣔ͞ Εͳ͍

)5.-ͷࠎ૊Έ ‣ CPEZཁૉ ‣ )5.-จॻͷ಺༰Λهड़͢Δ ‣ ͜͜ʹهड़ͨ͠෦෼͕8FCϒϥ΢βʹදࣔ͞ΕΔ

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するWebページ</title> </head>
<body> </body> </html> ϖʔδʹλΠτϧΛ෇͚Δ ‣ IFBEཁૉ಺ʹUJUMFཁૉͱͯ͠هड़͢Δ ‣ ʮແ୊υΩϡϝϯτʯΛॻ͖׵͑Δ ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ

ϖʔδʹλΠτϧΛ෇͚Δ ‣ ΢Οϯυ΢ͷλΠτϧ͕มԽͯ͠Δ͸ͣ

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するWebページ</title> </head>
<body> <h1>こんにちは、HTML</h1> </body> </html> େݟग़͠ ‣ CPEZཁૉ಺ʹɺIཁૉͱͯ͠هड़͢Δ ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ

େݟग़͠ ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ

... 前略 ... ! <body> <h1>これはh1</h1> <h2>これはh2</h2> <h3>これはh3</h3> <h4>これはh4</h4> <h5>これはh5</h5>
<h6>これはh6</h6> </body> </html> ݟग़͠ͷछྨ ‣ ݟग़͠͸ɺI͔ΒI·Ͱஈ֊͕͋Δ ‣ ࢼͯ͠ΈΔ

ݟग़͠ͷछྨ ‣ I͔ΒIΛϒϥ΢βͰදࣔͯ͠ΈΔ

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するHTML</title> </head>
<body> <h1>こんにちは、HTML</h1> <p>このページは、はじめて作成したWebページです。きちんと表示されているでしょうか?</p> </body> </html> ஈམ ‣ CPEZཁૉ಺ʹɺQཁૉͱͯ͠هड़͢Δ ‣ Qཁૉ͸ɺzQBSBHSBQIzͷུ

ஈམ ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するHTML</title> </head>
<body> <h1>こんにちは、HTML</h1> <p>このページは、はじめて作成したWebページです。きちんと表示されているでしょうか?</p> </body> </html> ࢀߟɿࡉ͔ͳهड़ͷҙຯ ‣ ςϯϓϨʔτ͔Β࡞੒͞Εͨهड़ͷҙຯ

ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ %0$5:1&ňจॻܕͷఆٛŉΛҙຯ͢Δ ‣ )5.-ʹ͸༷ʑͳόʔδϣϯ͕ଘࡏ͢Δ ‣ )5.-
9)5.- 9)5.- )5.-ͳͲ ‣ %0$5:1&)5.-͸)5.-ͷจॻͰ͋Δ͜ͱΛҙຯ ! ‣ ͪͳΈʹɺ9)5.-ͷ৔߹͸ʜ <!DOCTYPE HTML> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ ͜ͷ෦෼͸จࣈίʔυʮ65'ʯΛࢦఆ͍ͯ͠Δ ! ‣ จࣈίʔυͱ͸ 1$ͰจࣈΛදݱ͢ΔͨΊͷମܥ
‣ ೔ຊޠͷจࣈίʔυ͸গ͠ෳࡶ ‣ *40+1ɺ&6$+1ɺ4IJGU@+*4ɺ65'ɺ65' ! ‣ 8FCͰ͸ͲͷจࣈίʔυΛ༻͍Δ΂͖͔ ‣ ͜Ε͔Βͷ8FC͸ଟݴޠରԠͷ65'͕͓קΊ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

)5.-͸ߏ଄ͷهड़ʹప͢Δ ‣ )5.-͸จॻͷߏ଄ͷهड़ʹઐ೦͢Δ͜ͱ ‣ ݱঢ়ϑΥϯτͷେ͖͞ɺ৭ɺϑΥϯτϑΣΠεɺߦؒɺ จࣈִؒͳͲͷจॻͷମࡋ͸ɺσϑΥϧτͷ·· ‣ ͪΐͬͱؾͷ͖͍ͨσβΠϯʹͯ͠Έ͍ͨʜ ‣ ͔͠͠ɺࠓͷஈ֊Ͱ͸͙ͬͱת͑ͯͦͷ··Ͱ
‣ จॻͷମࡋ σβΠϯ ͷࢦఆʹ͸ɺ$44ͱ͍͏ผͷݴޠΛ ࢖༻͠·͢

)5.-͸ߏ଄ͷهड़ʹప͢Δ ‣ ͳͥɺߏ଄ͱମࡋΛ෼཭͢Δ΂͖ͳͷ͔ ! ‣ จॻ͸ৗʹ1$ͷ8FCϒϥ΢βͰӾཡ͞ΕΔΘ͚Ͱ͸ͳ͍ ‣ ܞଳɺεϚʔτϑΥϯɺΧʔφϏɺԻ੠ಡΈ্͛ ‣
ͲͷϝσΟΞͰ΋ਖ਼͘͠ҙຯߏ଄͕දݱ͞ΕΔ΂͖ ‣ ਖ਼͍͠ߏ଄Λهड़͢Δඞཁੑ ! ‣ αʔνΤϯδϯ΁ͷ࠷దԽ 4&0 ‣ ϓϩάϥϜ͔Βҙຯߏ଄Λ൑ผͰ͖Δ ‣ αʔνΤϯδϯʹݕࡧ͞Εқ͍αΠτ ! ‣ ଞͷαΠτ΁ͷҾ༻΍సࡌ

芸大 - 芸術情報演習デザイン(Web) 第2回 - HTML入門

芸大 - 芸術情報演習デザイン(Web) 第2回 - HTML入門

More Decks by Atsushi Tadokoro

Other Decks in Technology

Featured

Transcript