Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Atsushi Tadokoro

April 16, 2014
Tweet

More Decks by Atsushi Tadokoro

Other Decks in Technology

Transcript

  1. 888Λࢧ͑Δͭͷ࢓૊Έ ‣ 63- ΋͘͠͸63*  ‣ 6OJGPSN3FTPVSDF-PDBUPS ‣ ωοτϫʔΫ্ͷ৘ใΛҰҙʹಛఆ͢ΔΞυϨεࢦఆํ๏ !

    ‣ )551 ‣ )ZQFS5FYU5SBOTGFS1SPUPDPM ‣ ίϯϐϡʔλಉ͕࢜৘ใΛ΍ΓͱΓ͢Δϧʔϧ ! ‣ )5.- ‣ )ZQFS5FYU.BSLVQ-BOHVBHF ‣ ؀ڥʹ͔͔ΘΓͳ͘888Λهड़͢ΔͨΊͷจॻهड़ݴޠ
  2. )5.-ͱ͸ ‣ .BSLVQ ϚʔΫΞοϓ  ! ‣ จॻͷதʹ໨ҹ ϚʔΫ Λ෇͚͍ͯ͘͜ͱ

    ‣ )5.-Ͱ͸ɺจॻͷߏ଄ΛϚʔΫΞοϓ͢Δ ‣ ࠓ೔ͷतۀ಺༰ͷϝΠϯ
  3. ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ྫ͑͹ҎԼͷΑ͏ͳจॻ͕͋ͬͨͱ͢Δ ೥݄೔ ӡಈձ࣮ߦҕһձ ! ӡಈձ։࠵ͷ͓஌Βͤ ! དྷΔɺ݄೔ʹୈճӡಈձΛڍߦ͍ͨ͠·͢ɻօ༷ʹ͓͔Ε·ͯ͠ ͸ɺ;Δͬͯ͝ࢀՃ͍ͩ͘͞·͢Α͏͓ئ͍͍ͨ͠·͢ɻ

    ! ͳ͓Ӎఱͷ৔߹͸ཌिʹԆظ͠·͢ɻதࢭͷࡍͷ࿈བྷ͸ɺϗʔϜϖʔδ ʹهࡌ͠·͢ͷͰɺͦͪΒΛ͝ࢀর͍ͩ͘͞ɻ ! ˓˓େֶººֶ෦ IUUQIPHFDPN  UFM
  4. ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ʮλάʯͱݺ͹ΕΔ໨ҹΛهड़͍ͯ͘͠ ! ‣ هड़͢Δ಺༰͸ͭ ‣ Ͳ͔͜Β։࢝λά ‣ Ͳ͜·Ͱऴྃλά

    ‣ ཁૉͷछྨཁૉλΠϓ ! ‣ จॻͷ෦෼͝ͱͷҙຯʹԠͯ͡ɺཁૉʹద੾ͳλάΛద༻͢ Δ͜ͱ͕ɺ)5.-࡞੒ͷओͳ࡞ۀͱͳΔ
  5. ϚʔΫΞοϓจॻͷߏ଄ͷهड़ ‣ ։࢝λά ɺऴྃλάͷৄࡉ ‣ ։࢝λά ! ! ! !

    ! ‣ ऴྃλά I λάͷ࢝఺ λάͷऴ఺ ཁૉλΠϓͷछྨ I λάͷ࢝఺ λάͷऴ఺
  6. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>無題ドキュメント</title> </head>

    <body> </body> </html> %SFBN8FBWFSͰ)5.-࡞੒ ‣ ͳʹ΍Βطʹهड़͕ʜ ‣ )5.-ͷجຊͷςϯϓϨʔτ͕ࣗಈ࡞੒͞Ε͍ͯΔ
  7. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>初めて作成するWebページ</title> </head>

    <body> </body> </html> ϖʔδʹλΠτϧΛ෇͚Δ ‣ IFBEཁૉ಺ʹUJUMFཁૉͱͯ͠هड़͢Δ ‣ ʮແ୊υΩϡϝϯτʯΛॻ͖׵͑Δ ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ
  8. <!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ཁૉͱͯ͠هड़͢Δ ‣ ϒϥ΢βͰ֬ೝͯ͠ΈΔ
  9. ... 前略 ... ! <body> <h1>これはh1</h1> <h2>これはh2</h2> <h3>これはh3</h3> <h4>これはh4</h4> <h5>これはh5</h5>

    <h6>これはh6</h6> </body> </html> ݟग़͠ͷछྨ ‣ ݟग़͠͸ɺI͔ΒI·Ͱஈ֊͕͋Δ ‣ ࢼͯ͠ΈΔ
  10. <!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ͷུ
  11. <!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> ࢀߟɿࡉ͔ͳهड़ͷҙຯ ‣ ςϯϓϨʔτ͔Β࡞੒͞Εͨهड़ͷҙຯ
  12. ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ %0$5:1&ňจॻܕͷఆٛʼnΛҙຯ͢Δ ‣ )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">
  13. ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ ͜ͷ෦෼͸จࣈίʔυʮ65'ʯΛࢦఆ͍ͯ͠Δ ! ‣ จࣈίʔυͱ͸ 1$ͰจࣈΛදݱ͢ΔͨΊͷମܥ

    ‣ ೔ຊޠͷจࣈίʔυ͸গ͠ෳࡶ ‣ *40+1ɺ&6$+1ɺ4IJGU@+*4ɺ65'ɺ65' ! ‣ 8FCͰ͸ͲͷจࣈίʔυΛ༻͍Δ΂͖͔  ‣ ͜Ε͔Βͷ8FC͸ଟݴޠରԠͷ65'͕͓קΊ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  14. )5.-͸ߏ଄ͷهड़ʹప͢Δ ‣ ͳͥɺߏ଄ͱମࡋΛ෼཭͢Δ΂͖ͳͷ͔  ! ‣ จॻ͸ৗʹ1$ͷ8FCϒϥ΢βͰӾཡ͞ΕΔΘ͚Ͱ͸ͳ͍ ‣ ܞଳɺεϚʔτϑΥϯɺΧʔφϏɺԻ੠ಡΈ্͛ ‣

    ͲͷϝσΟΞͰ΋ਖ਼͘͠ҙຯߏ଄͕දݱ͞ΕΔ΂͖ ‣ ਖ਼͍͠ߏ଄Λهड़͢Δඞཁੑ ! ‣ αʔνΤϯδϯ΁ͷ࠷దԽ 4&0  ‣ ϓϩάϥϜ͔Βҙຯߏ଄Λ൑ผͰ͖Δ ‣ αʔνΤϯδϯʹݕࡧ͞Εқ͍αΠτ ! ‣ ଞͷαΠτ΁ͷҾ༻΍సࡌ