ノートテキスト
ページ1:
IoT (Internet of Things) & HTML & CSS IoT คือ สกาเด ล้อมอันประกอบการสอนสั่ง ตามสายและเชื่อมต่อได้ผ่านโนะโทคอล สื่อสารข้อความและใช้ โดยรายหนึ่งต่างๆ มีเทรนการได้ ในบริบทของ IoT Components 0 . . . . . อุปกรณ์: การตรวจh Levices and Sensors) • • 1 (Network and Connectivity) Data Collection and storage) • MoveNA (Data Analytics) ขอข้อมูล (Obile, Visualization) mrome (Command and Control) Overview of the Internet . Network Edge - - Host A Computer Access networks, physical media - Network Care - pening Network it so routers Ter1 ISP Tier-2 ISP Tier-1 ISP Tier 2 ISP _Peering Tijer-3 Tier-3 Tier-3. ISP Tier-3 ISP ISP ISP All 7111 Local ISP . . Internet Users consumer, business,...) • ให้บริการเรือน, fice • IT transit on Tier-1 11A; Tier-2 . Privacy and Data Security Interoperability and Compatibility • Reliability and Availability . . Scalability and Performance Energy Efficiency * Internet och network 909 networks Intenet Service Provider (ISP) คือ ผู้คนเห็นโทษ is the เชื่อมโยง าก้ากัน * Internet โดยการน (Infraestructure) in - m origini application Ex. email, game, VoIP, Web, e-Commerce - ผู้ประกอบการในวันเดอร์เท เชื่อมต่อ Internet แต่ลุกตำนานของ หรือเก่ง ทน - May ISP 19th gateway so Internet หนทาง ISP 4 เป็นผู้แจก IP addres - Intercontinental ISP . . - ให้บริการลูกค้าจะทันชั่วโลก ในโmy tonsil ข้ามทวีป National ISP . 0 Aime transit on Tier-1
ページ2:
Web Client Web Blaser Foove index.html Janua index.html Web Server (Process Server- index.html Slide wale Web & Web Browser s index.html Processing > Web Browser : ในเกม เครื่อง Client มาเรีย เรียกดูเว็บ . . . . จัดงานผ่าน Uniform Resource Locator (URL) ซึ่งใช้ระบุที่อยู่กัน ที่อยู่ใน ที่อยู่ของกันปากต่าง, ในระบบ Internet Tammie dient client-side script) ith HTML, CSS, JavaScript ช่วยใหmou ส่งข้อมูลไปข้อ 1 burtones Hob Jerver in Protocol HTTP Protocol angu Hoo Developer (ทดสอบเส้นที่พัฒนาขึ้น Web Browser ทาการ เพื่อทดแท93 09 ลางาน > เสื้อผ้ามูล Coala Communication) : การโอน หรือแลกเปลี่ยนทาง ข้อมูล กากา โปอีก กห น ห อ า จ ะ จ าแนกใ, . 1.ข้อมูลที่ได้รับเป็นข้อมูลเกี่ยวกับข้อมูลที่ส่งไป 2. ผงชั่นการให้อยู่ในเหมาะแก่ท่าน 100 หรือส่งผ่าน > Protocol Architecture . . . เพื่อการพัฒนาระบบเครือข่ายได้ง่าย และงานออกเป็น module งานพัฒนาแขกกัน Module is for (Layer) Fynth stack from function Paragua แต่จะหาย ทำงานของฟังก์ชั่นในชั้นที่อยู่ข้างใต้ ประชนให้บริe unction ซึ่งที่อยู่เหนือขึ้นไป
ページ3:
> Protecpl . • จุด 3 จ ป นน คนอนุญาต Layer Huawei u no H ตามหานามาได้ เช่น Application Layer Suites client สั่งสมกับ > Hypertext Transfer Protocol (HTTP) . Application layer into web server ba Application Layer Protocol 1926 Protocol 8:0121 Application layer & method manning 1% GET > มาตามหน้าเ • . POST World Wide Web Consertrim (43C) - โดย: HTTP/2 (2015) ที่ใช้ในขนาดใหญ่ Server Server inom resource - เป็นอะตรรกะที่หัวเขาและส่วนมาตรฐานต่างๆ การเงิน HH W3C Standards sienas Open Web Platform in Heboh platform mainte 11216 MIN1521999 W3C 10% HTML, CSS, Graphics, Accessibility, Audio & Video HTML CHypertext Markup Language) เป็นยาที่ใช้ในทาง Chuchure) และสร้าง Building Blocks บทเรีย กำหนดเอาเอง เกม Hot แบบนม โอ CSS (Cascading Style Sheets) เป็นทางสายไหมให้กัน เช่น จิตนา งอน layout เพาเวอต่างๆ HTML 5 - - 1995 ของ ภาษา HTML เสร็จในปี 2014 : เป็นเวอร์ชั่นเล็ก 988 HTML ที่เป็น Machete we features เพิ่มเติมให้กับ สนับสนุน me ที่ปนเปลี่ยนได้ (dynamic) 1:29 รับออกประกอบมีเดีย its video, audio, animation anmma JavaScript, Flash, Silverlight DDAY TYN HTML Living Stamplard • HTML Document . · HHATHG ไฟล์ที่บรรจุทา HTML ซึ่งภาพเหตุโกเอะ 99 บาท ถูก loud, Toy web portster เพื่อแลกเป็นเว็บเพจ ยางชุดของ HTML Elements เข้ามา 240 เพื่อหาและสิ่งต่าง ปรับนา HTMAIL Element moon in allen wir Heading, Title, Paragraph, Image
ページ4:
HTML Document Head Title. Body Nested HTML Elements สามารถซ้อน (need) กันได้โดย dement หนึ่ง 21Tg element HTML Attributes - M0444รม A Croperties) และข้อมูลเพิ่มเ เกี่ยวกับ HTML elements เช่น การจัดทาแห่ง Root Node แคงซี้ดๆ Paragraph 1 Text... Paragraph 2 Text... parent child Image node Mrls (DQM tree) - Document Object Model COOM) INTO HTML DOM 19th object model in mia HTML momen DOM Living Standard TnY WHATWG - - - - DOM rider Interface nelle craw-platform 11A: language - independent on 100 HTML Document xum (Tree Structure) HTML document 10% HTML DOM Tree Ning Objects assistes document node HTML element intro Objects asistas element node HTML attributes to attributes nodes. Text Murray HTML Element ritur text node mon Properties, methods 117: events innies HTML elements Document Root Element html Element head Element body Element Element Attribute Element title paragraph image Source Text "Welcome" Element hyperlink Attributes Hyperlink Reference Text "home"
ページ5:
HTML Language & Torong . HTML-Hyper Text Markup language - - <> tag i HTML Elements HTML denunt ขายหอ ขนาดของเพื่อนของประกอบจะกวนเข้าเรียน เป็น Heading, Title, Paragraph, Image, Table 61:17:17 HTML page ( ) Tags :ร่านจะเป็น HiTei Elements เหล่านั้น เพื่อให้, Heb browser แปลงเพื่อนต่อได้ Tags HTML Elements Tour:q9nituriannatuzovs HTML Elements 1991 <h1> This is heading 1</h1> <p>This is paragraph </p> HTML Document Head Body • HTML Document: 107 HTML 0 Hebpage Head.. หาของเอกสาร HTML แพลุงดอนฯ 60nan; HTML 41% 19% Title Body: องค์ประทบ:11 บน ป . <!DOCTYPE html> HTML5 . . . • <html> ... </html>:: an HTML <head>...</head> :: ปานเทพ ของ Onan (Head Element) • <body> ... </body> :: √ U Tonant (Body Element) HTML Elements : 1 THAY tag on Amanday tag in <!DOCTYPE html> <html> Cnead> </head> <body> Ex. <_> เนื่อง1..</_ • Heading: № 69:191 HTML Element <h4>-<h6> </body> เทพพัง แต่จะผิวกับ <html> Paragraph: <p> .. in 4. </p>
ページ6:
. Global Attributes 1ts attribute 97 HTML Element andr.Am 15% * id : nun the element ให้ใช้งานง class: Jumannal element brommarine style sheet. ❤ title: Nanouch tooltip text ibininansus element of * hidden : หากฝน หมายความว่า element ไม่พองตัว เพื่อซ่อนไว้ • style: J:q1 css style 11919 inline 1799 element • Tobindex : จ. เลย กับของ เลือด เมืองมาใช้ปุ่ม Tab wont lionigale wit * di : ระบุทิศทางของกาม วันเพื่อหาใน Cement ชั้น ที่เป็นไปได้ • Irman left to right - 0 0 " rtl: namann right to left auto bi web browser inom cententeditable: 1:19097900 element runtutanibla invinmantidas - true : แขได้ • false: 115utrit " data-* : ธน imati ง element risiti broni css style não Java Script Atribute ของตัวใช้ได้ต้น HTML Element บางประเภทท่านั้น ♥ width, height tummin ve element (pixel) foren element <img>, <video>, <input>, <object> <canvas> <embed>, <iframe> * all นอกตามทางเลือกเพิ่มเติม กรณีที่ไม่สามารถแสดงเนื้อหาใน element ได้ เช่น เชื่อมงา nioryudanancia Brunu <img>, <area> <input> เทาประการฯ ก - mymangiannu (ordered List). 1. Honey 2. Sugar Mum 3. Butter > <ol>...</ol> Hangmang rosiz attribute polakš " * Star : ค่ากับเงินกัน เช่น ค่าเป็น 5 ลำดับในหยาดจะเริ่มที่ 5 reversed. หากมีการให้ ค่ากับจะเงากมากไปน้อย > Ordered List List > <li>...</li> Hucia:Myms (List Item) Torgas attribute mort
ページ7:
. - mymanian (Unordered List) . . •Honey Sugar Butter | Tham ตั้งได > <ul>...</ul> Hanson > Unordered List Urgmist > <li>...</li> rexnovonatura: Mums (List Item) เพื่อหาประเภททาง <table><table> reanganmori element untrim - <tr> ... </tr> ning element 19ting INNOKITAĂ 2 CELINU > Header Cell: <th>...</th> element > Data Cell: A now <td>...</Ad> element <table> <tr> <td>Orange</td> <td>30</td> </tr> <tr> <td>Apple</td> <td>50</td> Orange 30 Apple 50 </tr> </table> <td>...</sd) instead อมูล โดย bulk เพื่อทาง : เดอะดันและการจัดวงเง abby ระบุชื่อย่อของเขาทักทาย ไม่มั่นคง หลาย ให้ท่านเสีย screen reader headers ร 10 Nova vernis ที่เซลล์สัมพันธ์ ไม่มีผล หลาย ใช้ทาตานเสีย screen reader Scope ระบุของเขาที่จะกรอบกลุ่ม ไม่มีผล Hane ใช้ทาเนีย Screen reader col,Yod, , colgroup, rongroup > element อื่นที่ตามหาอยู่ในความได้ 0 <caption>...</caption> > Element Inami190958771-7211796 3 element <thead>...</thead> Konda:idušnem me desung <hr>...</b> . . malin <caption>...</caption> 112: <colgroup> ... </colgroup> nilidon<tbody>...</tbody>112: <tfoot>...<\/Hoot > LIA: <tr>…..</tr>
ページ8:
" |<tbody>...</body> Kind (body) . motion <caption>...</caption>, <colgroup>...</colgroup> #a: <thead>...</thead> • <Hoot>...</+bot > & (foot) . . mung (tr ...tr) nolin <caption>...</caption>, <colgroup>...</colgroup> <thead>...</thead> และ <fbedy >..< /body > > Web Browser If <thead>...</thead> <tbody>...</tbody> a: <treet>...</+bot > ในคนของนาง 19 " " ( Stol Man (body) Hey 19 เป็นกระจกและทาง เพื่อพิมพ์ที่มีขนาดใหญ่และกบคลุมหลายหน้าจะปรากฎส่วนหัวและตามหากในทุกหน้าพิมพ์ > <thead>...</thead> <tbody> ... </tbody> 112: <tfoot>...</tBot > Hins:mucio minist ในทาง โกษามาก css ในท่านได้ <a>...</a> marinton chyperlink of attribute giving > href: 8:4 URL 9909 document monimental > target: min turling document consumo minuto Yo • Man), เปิด document tonym บนหน้า แม่ขอเทปใหม่ -self an document ♥ - parent ian document a V muon (default) - top in document tonym บนหินที่เต็มขวดต่าง _8:4100 frame in document min > download ayhan dan document d'un gion attribute - M : เปน อไฟล์ ไก่ วงการ โหลด ... ให้คลึงลังก์ แสงเชื่อมโรยไปหนัก https://sit-tu.ac.th โทษลิงก์ 1-0 เมื่อเลือกทานว่า Sirindhorn International Institute of Technology. p -> • <a href="https://silt.tu.ac.th"> " Sirindhorn International Institute of Technology </a> A version 19th open in new tab → <a href = "https://silt. tu.ac.th" target="_blank"> Sirindhorn International Institute of Technology </a>
ページ9:
. Ex. ให้กดลงที่ 46 เชื่อมโรยไปเปิด my cute. pole แกงก็เป็น ย่อมว่า “Loop, File -> -> He download file <a href = "pdf/test.pdf "download > Load File </a> * เพื่อโหลกมาแล้วอาตให้เป็นชื่อ very cute. pc <a href = "pdf/test.pdf "download - "verycute. pdf "> Load File </a> - <nav>...</a> Woning (Navigation Links) rith <>...</a> เหี่ยม/ประเภทไฟล์:ปภาพ - King) เป็นแท็กสำหรับmeter ลงไปบนดอยผา Ex. xnama Bangtan.jpg manni BTS → <img src "image/Bangtan.jpg" alt="BTS"> Ex. laniralmal Bangtan.jpg 480 pixel → <img src "image/Bangtan.jpg" width="480"> .. -> - * กล้าให้ ตามเท้ เป็น 50%, 999หนักเห <img src "image/Bangtan.jpg" width="50%"> Ex. family Bangtan jpg แนะนำอันเซล โดยกำหนดในกาม 480 pixel messy 250 pixel • <img src "image/Bangtan.jpg" width="480" height="200"> Ex. numen ungtag <img> "\&muhamn <a>...</a> → <a href = "Bangtan.html" Ximg src="image/Bangtan.jpy" width 480"></a> hesponsive image : คือรูปเปนได้อย่างเหมาะสมกับขนาดหน้าจอ การจะเรียก และคุณสมบัติอื่นของหน้าจอ ทำให้แสดงผลได้ดีบนอุปกรณ์ตลาดขาย Ex. me: - ปรับขนาด 30 เพิ่มอร่อย แม้จะทำให้นอนได้มา แต่หาดใหญ่ เพื่อแสดงบนจอขนาดเล็กให้เปลืองมากก และ bandonisith : <img serum สร้าง responsive image โดยเลือกจากรูปเหมาะสมมากรกานนกผ่าน bate ต่อไปที่ aruse : ระบุทุกของ "ตา ไปขอทานยากรุงเทพ พร้อมต้องหากหนังข้อมูลเกี่ยวกับ แต่งรูปเพื่อใช้ web browser ตัดสินใจเลือกรูปภาพได้ 3 Malon mat image/Bangtom.jpg nt/18 1000 px, mal image / Got7.jpg 1898 520px <img srcset="image/chinatown-1g.jpg 1600w, image/chinatown-md.jpg 960w, image/chinatown-sm.jpg 520w" alt="China Town"> : mon attribute srcset vt attribute sizes
ページ10:
. -<img srcset="(MEDIA-CONDITION 1) WIDTH 1, (MEDIA-CONDITION 2) WIDTH 2, (MEDIA-CONDITION3) WIDTH 3,... "> - > MEDIA_CONDITION: 1: > OT: โดย Media Condition n.mian Media Query als: noun 2 min - Width กทม เงาหัวของลูก > max-width ru เอนโดทางเท้า หัวรอง ก > vw : Viewport Width ray กามภพเป็นสัดส่วนของส่วนหน้าจอที่มองทัพได้ > pw : Pixel การถวายภาพเช่น Pixel > em: Edhemeral rumanament as parent clement <img srcset="image/chinatown-1g.jpg 1600w, image/chinatown-md.jpg 960w, image/chinatown-sm.jpg 520w" sizes="100vw" alt="China Town"> เพื่อขา ประเภทสื่อผสม (Multimedia) HTML5 Tarimin tag ami element liang • <andio>...</audio> in mbi To attribute > orc > controls ระบุ UK ไป ไฟล์เสียง <img srcsete*image/chinatown-1g.jpg 1600, image/chinatown-nd.jpg 960w, image/chinatown-sm.jpg 520w" -sizes="(max-width: 520px) 100vw, (max-width: 960px) 80vw, (min-width: 961px) 1024px" alt="China Town"> (media) alimchon 1991 179 não audio stream agu > autoplay mnt 9 ก > muted > preload, แนน โลกเองพร้อมหน้ากัน : " metadata: Twan: metadata rooltários " Yone : ไฟโพง ไฟเสียง พมหาน caudio src="music/song.mp3 controls autoplayp Official Music </audio> <audio src "music/songl.mp3" controls preload-"none"> Official Music without pre-loading </audio> 001/707- ▶0:00/000
ページ11:
-
ทางใต้ tag (audio) สามารถระบุ ชุด แหล่งๆของเพื่อน จฯ tag source) เพื่อนแพง
1 {{ ส่งหรือมากกว่า
> Web Browser จะเลือกมากทั่วองซ
(source) ลายเซ็น audio ของ Shibute ต่อไปนี้
: URL ไปฟัง He› เสี่ยง
src
ทุ
type :
(MIME TYPE) or audio/ogg or audio/mpeg
<audio controls>
<source src="music/songl.mp3" type="audio/mpeg">
<source src="music/songl.ogg" type="audio/ogg">
Official Music
</audio>
▶0:00/7.07
- <video>...</video> initial:uminto i video or stream Asmin
♥ src - ระบุ URL ไปง้อลากิโอ
autoplay : man : จะเล่นก็ได้จัดโหมดพาชกใจพร้อมใช้งาน
♥ width
"
height : ระบุความของเรา ใจ (pixel)
:
poster : ระบุ URL ไปจัดไฟone โซนเทช เพื่อแสวงหาก ค. ก่อนใช้กล่อ
- preload, : รูปแบบกากๆ โอมอมหาเว็บ
• <audio> or <video>
♥ src
r label
• default
:
<video src="vdo/cargoship.mp4" poster-"image/shipposter.jpg" width="720"
controls autoplay>
Cargo VDO
</video>
NAME: var: nouhy tag <track> 112:21
T. URL ไปขอไฟล์ อ
: 1. File ของ ความป
inniu trach nioniostro default naisinmy track
- <track> an audio não video
" kind; briones vonwettings
> Captions สายมากเสียงและเสียงประกอบอ
> chapters sy title vorum
> descriptions mon audio or video
> metadata
> subtitles 19
script
<video controls poster "image/shipposter.jpg" width="720">
<source src="vdo/cargoship.mp4" type="video/mp4">
<track kind="captions" src="subititle/subtitle.vtt" srclang="en"
label "English" default>
Cargo VDO
</video>
- archang : Toner ของ Munของข้อความบนเพื่อ kind, เป็น subtitles
ページ12:
. เพื่อประเทฟอร์ม Comm) - HTML #นับสนุนหลักจากบนฟอร์ม กับสหกรณ์ ขนหางข้อมูล โดยรับ toput ทุกผู้ใช้ ท่านองค์ประกอบ (Control) ที่สามารถโอนได้ - HTML element ming, nife input onneto non (text fields) ✓ vormen (checkbox) " Ale button) • No, non cradio button) & attribute Touri " v id Astu Global Attribute vir: 10 409 lot iniutn element นางจึงได้ * action 11 URL มองจะหาข้อมูลไป เมื่อมีการจัดพล G " method : marina HTTP method 2 mon " - SET ส่งข้อมูลต่อทัศฯ UAL ไป ในรูปแบบของ name 2 value > POST vos form-data Isin-instine URL autocomplete 1 mm หนา 40 ไม่ > on neb browser in LA Input Element At HTML element o <input) แสดงองค์ประกอบที่รับ input จากผู้ใช้ โดยแสดงรูปแบบรัชแตกต่างไปตามชนิดของ input " attribute type :yoringoo imput > text > - Checkbox input สหบรับฟังความ 1 บรรทัด Possword input สำหรับรหัสผ่าน Toy10 ผลแบบฝึกหัด อนา input สำหรับทางเลือก ผ่านช่องทางแมง input สำหรับทางเลือก ผ่านมคัดเลือก mpu+l 09 ม > radio > button > submit > id > form > name > value > Atu Blobal Attribute vir: 10 40g input element : 10 909-95% ที่ input element war ระบุชื่อของ input element umerous input element placeholder นอกรอบรูปแบบที่ต้องการใช้กรอง ใน input > readonly motiv ves input element ที่จะเปลี่ยนแปลงไม่ได้ > disabled mnr:y imput element in disabled ʼn > size : input element > checked many
ページ13:
- Label Element • <label>...</label> กำหนดป่วนกับใช้กับ input element > to screen reader > > Attribute input mnnån label 909 input 41919, sinavian/in motion input for 8:4 10 was imput element label tim form 8:4 ID NASHOTT" label element rigor, - ♥ <select> ... </select> non dropdown list? > Attribute → > id V tag > form > name 7 8120 > multiple - required, option <select> 1771 tag > Attribute → valve > disabled > selected Atu Global Attribute vir: 10 409 input element 8:4 10 40s to input element surg oves dropdown list หายเลือด นกพัน หากระบุไว้ จะสามากเลยเรามาได want ได้ ผู้ใช้จำเป็นต้องเลือกก่อนจอง >..</option> แสดงตัวเลือกในกล่องดังเอก rumor vowal imput element mnr:uti option Ann disabled in กระได้ Option ที่จะกดเรียกใช้ <input type="text" id="lastname" name="lastname" placeholder "Your Last Name" size="20"> Dinner Option: <br> <select ide"dinner" name "dinner" size="3"> <option value "Salmon">Teriyaki Salmon Steak</option> <option value "Pork" selected Pork Chops in Creamy Mushroom Sauces/option> <option value="Chicken">Grilled Rosemary Chicken Breasts</option> coption value="Seafood">Seafood Medallions</option> </select> Dinner Option Teriyaki Salmon Steak Pork Chops in Creamy Mushroom Sauce Grilled Rosemary Chicken Breasts 12 11 </p> 14 <00 15 16 17 15 19 20 </p> 21 22 22 23 24 25 26 27 28 29 </form> 38 </body> 31 </ol> Languages <input type="radio" id="langTh" name="language" value="TH"> <label for="langTh">Thai</label> <input type="radio" id="langin" name="language" value="EN" checked> <label for="langin">English</label> </B> Session Time: <select id="session" name="session"> coption value="morning">9:00-12:00</option> <option value="afternoon">13:00-16:00</option> coption value afternoon">18:00-21:00</option> </select>
ページ14:
.
css Combinators Selector 8:4 combinator : wong selector mans des
โดย ทนแนน
> Descendant Selector r: element
ระบุ
กอดล ป ท 001 Tree
1
div p{
ที่เข้ากับเม
}
color:blue;
font-weight:bold;
font-family:Georgia,Garamond;
element 2112121 parent-child Invar,
-
Child Selector
ระบุ
-
div> p {
color:blue;
font-weight:bold;
font-family:Georgia,Garamond;
Adjacent Sibling ระบุ element ที่เข้ากับเพื่อนในความสัมพันธ์แขน Sibling ที่อยู่ติดกัน
}
h2.pl
color blue;
font-weight:bold;
font-family:Georgia,Garamond;
Beneral Sibling ระบุ element ที่เรากับเพื่อนใจกามสัมพันธ์แขน Sibling ต่อพญาน
r:
h2-pl
color:blue;
font-weight:bold;
font-family:Georgia,Garamond;
ページ15:
.
ระบบสี่
-
ระบุสี : (start 16 Toyota ยางแดง สีเขียว สีเงิน เพื่อสร้างเป็นที่ต่างๆ
หน งงหักของแต่ละสี - ค่าหนังในภาพ 10 (0-255)
->
-
elsei นาน 15 (00-R
> #000000 km mn red = 00 ( 0 ), green = 00 (m 0), blue = 00 (10)
in red = FF (Ah 255), green = FF cm 255), blue = FF (A² 255)
> #FFFFFF
> # FF0000 Jlling a red = FF (Ah 295), green = 00 ( 0), blue = 00 (0)
> # FFQOFF & magenta in red = FF LA 255), green - 00 (10), blue = FF (^' 225)
> # 983940 brown Ain red = 98 (152), green = 34 ( 58 ), blue = 40 (A1 64 )
> # 306371 & green an red = 3C (Ah 60 ), green = 63 cm 179), blue = 40 (A1 173)
<style>
P {
</style>
Ex. #RAGGBB
background-color: #ee82ee;
T
00-FF 00-FF 00-FF
red green blue
-
จะทนแต่ง เช่นฝ่ายเลขาฯ 10 ตั้งแต่ 0 - 255
รูป นนร ด
> rgb(0,0,0)
> rgb(255, 255, 255)
>
>
D
rgb(255,0,0)
rgb(255,0,255)
> rgb (152, 58, 64)
> rgb (60,179,113)
<style>
P {
</style>
nan red = 0, green = 0, blue = 0
in red = 255, green =255, blue = 265
Fling an red = 255, green = 0, blue = 0
magenta Mn red = 255, green = 0, blue = 255
brown An red = 152, green = 58, blue = 64
& green an red = 60,
background-color: rgb(238,138,238):
green - 179, blue = 13
Ex. rgb (Red, Green, Blue)
T I
0-2550-255
red green
0-255
blue
ページ16:
.
สามกว่าหมากแดงผลบวกทม หรือศึกษาหนอน (front) ได้ เพื่อสร้างรูปแบบของหน
> grannione inter css property font-size normation
1px unter pixel nor vanatori Thy default later 16px
V
<style>
P{
</style>
font-size: 24px;
en sins ephemeral สัมพันธ์กับหาดหอมที่ปัจจุบัน ตอนวัย เปลี่ยนจากผ่าน browser IN
vonlarning default 16px ramas sem
styles
M
font-size
Seng
</style>
font-sizer 1.25 .
Inspiring Quote
Inspiring
McCandless venture, chr Christopher
</body>
The very basic core of a man's living spirit is his passion for adventure
Christopher McCandless
> Houmarine manches css property font-famity
♥ Mr: nagasalom (Generic font Famity) nigh 1991
Serif 1991 Times New Roman
0
- Sans Serif คือฟอนต์ที่ไม่มีเชิง เช่น Arial
0
tanospace คือฟอนต์ที่มักหมมและอักษร เช่า เช่น Courier New
- Cursive Aroma1232114941341996 Lucida Handwriting
0
Fantasy Abeloum57492 1hr Papyrus
* Heb browser จะใช้ฟอนที่แรกในรายการที่ web browser ชีพ, รองรับ
การกำหนดต่ำสุดใน Generic Font Family เพื่อให้ web browser เลือกฟอนต์
Kstyles
h1 (
font-family: "Times New Roman", Times, serif;
P. (
font-family: Helvetica, Arial, sans-serif;
> รูปแนน กาม ท่านพาน (5)
- normal รูปแบบปกติ
italic
'
Oblique รูปแบบต่าง
property
<style>
</style>
font-style
font-style: italic;
ページ17:
> น้ำหนักข้อความ ว่ากาน 650 property font-weight "normal minuna "bold หา - bolder สามา ♥ lighter • inherit iymonaan parent element ตำหนดเป็นค่าช้างหัก 90 100 (ขายมาก), 200, 300, 400 (น้ำหนักปกติ),500,500,1000997),300,190 css Pseudo- classes rymas: (state) 900 element 1970 > เทพา le vie element เพื่อใช้ทำเนาไปทางซับ > เทพ Fle 999 Line ที่เข้าชมแล้วและยังไม่เข้าชม > เทพา style 909 element ที่ได้ขึ้นโพส > Anchor Pseudo- classes rington style you link Hain <a> mmas: ♥ link ปังไม่เข้าม alink ( colororange; font-weight:bold; <style> P1 } div ( </style> font-weight: lighter; font-weight: 300; " visited 19/29211197 ♥ hover เพื่อว่าเพาะกา * Active รางเลือก CSS Attributes Selectors เพื่อทํากด styling JU <style) color: Bueate athever ( </style background-color: skyblue; active <body> <a href="www.google.com">www.google.com</a> </body> www.gle.com background-color: tomatoj www.google.com color Quite เองไปเข้าอบ อบามาสไปทาน เอน่ากล I element n№ attribante richmen to w attribute nimameminan > css [attribute] Selector ingrain style 980 element nisi attribute immun Selector attribute) | css, propertytvokel; altarget ess.property2 value2 background-color orange; > css [attribute = "value"] selector inmurin style 980 element nis attribute immun Sector attribute value Las propertytvalue. ass property value2
ページ18:
.
พาวัดขนาด
-
Cascading Style Sheets (CSS) astumin
> width, font-size, margin
- ทางสายก่านคงหากทั้งสัมพัทธ์ (Absolute) เป็นการทั่
> Com
เขตเม
>
mm
มิลลิเมตร
> in
>
ฉัย Cinch)
5
> 20 สัมพันธ์กับขนาดฟอนที่ๆจุบัน
โดย Len = พาดฟอนต์จุบัน)
สัมพันธ์กับหาดฟอนต์ของ root element
> ingver viewport.
> 19
28
> pt
pixel toon) (1px = s เอ
point (1px = 1/72 911)
> pc
picas (1pc 12 pt)
> ทา
> 1.
โดย 100 w = ความของ viewpor
สัมพันธ์กับความสูงของ viewpor
Toy 400 vw = ความสูงของ viewpor
สัมพันธ์กับขนาดของ Some element
ดงผล เปนเอกในข
-
- Punyuura: 1186988 หนา Cis properly display
HTML element was on me to walny doll แปลได้ใน 2 แบบ
> Block-level Element et HTML element Filling
11
Ex. <h1>...</a> - <h6>...</h6>, <div>...</div>, <p>...</p>, <section>... </section>,
<form></form>
> Inline Blament เป็น HTML element ที่แสดงผลใหนเดิม และใช้ความเท่าที่จำเป็น
Ex. <img>...</img>,<a>...</a>
สามารถปรับเปลี่ยนรูปแบบ 130929 จากรูปแบบ debuilt มาเป็นรูปแบบที่ต้องให้
โก ใช้ css properly display ขององกับรูปแบบ
> inline และ เบน hine warp เกม และใช้ตามทางเข้าเป็น
> Block (tasual Block แบบใหม่ และแสดงผลงานทาง
> inline-block rangermans inline Helenamento: 1991 block container
> none ไม่แสดงผล
Ex. h1 { display: inline; }
ページ19:
. . m การง - -แบบจัดการ HTML Element ins ใช้ Css property position ที่ 19 รับค่ารูปแบบทาง 5 นา '> static bandama flow Unavoinnin default > relative banana สัมพันธ์กับการทางปกติ ของหมามารถตั้งกระจกรอบผ่าน properly left, right, top, bottom 1969900 dement left, right, top, bottom insig900 dement In49:79: Sims scroll > absolute banimals and element viste ancestor novimantan ขอพามาซึ่งการกรอบบาน properly left, right, toy, botomy เปนตาแหน่งของ dement Invitam scroll > stickey banoviny scroll bands (Box model) batu model formiding lay out in an HTML dement IA 521 ofer Content เพื่อหาที่แสวงหากัน เช่น จัดตาม, Tow - padding ศพ :: สวนใน ราง Content ขายใน10กล่อง > padding > padding-top > padding-bottom - โกงจน ก้านบน ก้านล่าง > padding-left ก้าน ง > padding-right ด้านงา border your naingia content 112: padding os margin ที่พระทางระหว่างแก้วแหลกกับ demand x อยู่หอกขอบกล่อง by C46 properly border border Content sudding margin > margin คงจบ > margin-top ด้านบน > margin-bottom 19 > margin-left ด้าน ง > margin-right - An - t element = left margin + left border + left padding + width + right padding + right border + right margin AN 2,990s element = top margin + top border + top padding + width + bottom padding + bottom border + bottom margin
ページ20:
. การแห่งแบนเฟล็กซี่ (Max) - Flexbox Layout Module DNMMM210 Tial responsive layout wa - Hexbox layout inmr layout instrum > Flex Container or element ♥ flex-direction minimumsforms Alex item A flex- container 0 Column) 5649กรมห์ 100% ค่าง 0 Column - reverse 669 กรมหลวกัน จากล่าง แบน row row - Tornie Mine หลากัน รับจากไปซ้าย * Alex - top me 0 0 0 up Map คนใหม่ norrap ไม่ปักหนาใหม่ เพื่อกินขอบเขต nnup - Yoverse ปักหนาใหม่ แบบหากัน Flex-Container Plea • flex-flow 3:14 mm flex-direction 114: flex-wrap 0 0 Ton-wrap 7-11 ใน 7 นัด ชนะทัดใหม่ column - reverse nonep 6640 มหากัน เรากล่างขึ้นบน ไม่ปักหนาใหม่ * Flex Item) องค์ประกอบที่อยู่ใน Hex Container Justify-content immincial191181191140s flex item for flex container > center คิดว่าแห 30 31 9 mon cuner ในHoney > flex-start annanthimin container 144141746291 > flex-end > > space - between 1:4 item align-items immincin longis flex item tas flex container > center > flex-start > flex-end > stretch > baseline ตึกแห 30 31 9 mm cuner ในแuang container จัดท าน า 9998 ton ciner insigma11917 baseline 900 flex item align-content mincin flex - spuce - between จัดแบ่งแนวเต็ม Flex ให้มีระยะห่างระหว่างกัน เท่าๆ กัน > Space Crowds จัดหาเย็น 14x ให้พระต่าง ๆ ทางกัน 1 ด้านหน้าและด้านหลัง โดยห่งแหวน hex ให้พี่ tan) กินทน ทั้งหมด > stretch > center วัดบางแหวน ex ให้พี่ tan อยู่กลาง Container ในแพงตั้ง container > flex-start in flex In item in > flex-end incillo flex T item inananan may container
ページ21:
•
-
-
Flex Item
> order
> Flex - bosis
คามทางเพศให้กับ: item key px (pixel)
baina: item (default = 0)
item (default = 1)
กบาด เมื่อเกินขอบเขต
> Flex-grow
> flex-shrink
* Flex - Top
digilargia
wrap
ป่า หน ทักแม่
- nonep
ไม่ปักหนา ทัดใหม่
V hrap-reverse ปักเหนาะทัดใหม่ แบบงงหลงกัน
CSS Variable to CSS Custom Properties ligonin
0999 HTML document ได้
e-name variable_name: value;
> yariable -1
> value
การทําหนดใช้กันตัวแปร
Ex-highlight-color: yellow;
ห่า า เ บ ไปงาน
> variable-name
var (--variable-name);
> Scope mition CSS Variable amongin parent - child element
Global Css Variable ratuoni motita root element 999 HTML document charcas :root
: root 2
Ex. :root
seceton
--variable-name: value1;
--variable-name: value 2;
--highlight-color: yellow;
}
}
CSS Variable
doby
sp class="contentI°> ภาคเหนือ เป็นพื้นที่ม
เขาใหญ่มากมาย และเป็นแหล่งต้นกำเนิดแม่น้ำหลายสาย</p>
class="content2"> (3) mal
ทั้งน้อยชาวไทยและนั่ง /2
body
-Strong-color: royalelves
-light-color: Duheat;
p.contene
font-family: Prompt, serif;
width: 200px;
color:var(strong-color);
background-color: var(--light-color);
P.contentz (
background-color: var(--strong-color);
color: var{--light-color);
Events Sulkistige Opas
www
s/styles
ページ22:
- เท่าที่เก็บไว้ไปใช้งาน สามารถกาหนดการทอง Choice) เป็นค่าที่จะถูกนำมาใช้ในการที่ไม่มีค่า
-
ที่จะหามาใช้ในกรณีที่ไม่มีปะ
> variable_name
สารอง
> fallback
แปะหันไปน
scope
ใ น
Ex. varc-- highlight-color: yellow);
CSS Functions anni: NAIˆÃ¶n brinuaremicionarniates css properties
> Function attrininin attribute 900 element of
attr cattribute-name);
> Function Calc ใช้ในการกา เอาผลลัพท์มาบ้าน
CSS Function
calc Cexpression);
<style>
<body>
<div>
<a href="https://www.chula.ac.th"
target="_blank"></a>
</div>
</body>
teway.chula.th
a:after {
content: attr(href);
}
div {
</style>
width: calc(100% - 200px);
background-color: pink;
- Function min ใช้ในงานเขาว่าง ในราช
เพื่อฆ่าผลลัพท์มาน
min (value, value2 value 3,...);
- Function mox ใช้ในการลงสุดในรายการ เพื่อหาผลลัพท์ งาน
CSS Function
maxcvalue value, value 3,...);
<p class="content"> ภาคเหนือ เป็นพื้นที่
เขาสูงใหญ่มากมาย
และเป็นแมลงต้นกำเนิดแม่น้ำหลายสาย</p>
</body>
<style:
</style>
Sont-family: Prompt, serif;
width: max(400px, 50%);
height: min(200px, Sev);
color: white;
background-color: royalblue;
333
gue. hae
Recommended
Undergraduate
Engineering
ช่วยแสดงวิธีการทำหน่อยได้มั้ยคะ
Undergraduate
Engineering
ช่วยอธิบายวิธีทำหน่อยนะคะ
Undergraduate
Engineering
รบกวนช่วยหน่อยค่ะ อธิบายเป็นขั้นๆให้หน่อยนะคะ
Undergraduate
Engineering
ทำยังไงคะมีใครเฉลยได้บ้างผมอยากรู้ว่าทำถูกหรือเปล่า
Undergraduate
Engineering
ช่วยหน่อยครับทำคล้ายๆรูป2ครับ🙏🏻
Undergraduate
Engineering
ช่วยหน่อยค่า
Undergraduate
Engineering
จำแนกประเภทโครงสร้างตากสูตร r=n+c
Undergraduate
Engineering
ช่วยหน่อยนะคะ
Undergraduate
Engineering
วิธีทำ
Undergraduate
Engineering
Comment
No comments yet