Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
芸大 - 芸術情報演習デザイン(Web) 第2回 - HTML入門
Search
Atsushi Tadokoro
April 16, 2014
Technology
0
570
芸大 - 芸術情報演習デザイン(Web) 第2回 - HTML入門
Atsushi Tadokoro
April 16, 2014
Tweet
Share
More Decks by Atsushi Tadokoro
See All by Atsushi Tadokoro
デザイン言語総合講座 - クリエイティブ・コーディング
tado
0
2.6k
Tumblrを使う4 - Webサイトを構成する、固定ページとタグ
tado
0
1.8k
Tumblrを使う3- カスタムHTMLテーマの作成
tado
0
400
Processing.jsによるデータの可視化と生成的表現
tado
1
1.6k
Tumblrを使う2 - テーマをカスタマイズする
tado
0
330
Touchéの仕組みを理解 - ProcessingとArduinoの連携
tado
0
2.2k
Github Pagesで作品を公開、Automatic Page Generatorでサイトを生成
tado
0
1.4k
TumblrでWebサイトを作成
tado
0
680
bmaw14 第2回: Touchéセンサーを使う1 Touchéセンサーを作成する
tado
0
2k
Other Decks in Technology
See All in Technology
10分でわかるfreeeのQA
freee
0
230
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
任意コード実行の原理
ffri
0
170
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
3.9k
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
依存ライブラリはどこに?
takesection
0
110
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.4k
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
250
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
Featured
See All Featured
Music & Morning Musume
bryan
39
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Gamification - CAS2011
davidbonilla
76
4.5k
Optimizing for Happiness
mojombo
369
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
The Mythical Team-Month
searls
214
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
4 Signs Your Business is Dying
shpigford
174
21k
Transcript
ܳज़ใԋशσβΠϯ 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&ňจॻܕͷఆٛʼ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">
ࢀߟɿࡉ͔ͳهड़ͷҙຯ ! ! ! ‣ ͜ͷ෦จࣈίʔυʮ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 ‣ ϓϩάϥϜ͔ΒҙຯߏΛผͰ͖Δ ‣ αʔνΤϯδϯʹݕࡧ͞Εқ͍αΠτ ! ‣ ଞͷαΠτͷҾ༻సࡌ