HTML
Preparing
ไธ่ผไธฆๅฎ่ฃVSCode
้ๅVisual Studio codeVSCode
้ๅW3School HTML้จๆ็ถๅ่
้ๅไธๅ้ ่จญ่ณๆๅคพweb
ๆฐๅขๆชๆกindex.html
่ค่ฃฝไธฆ่ฒผไธHTML Basic็ๅ งๅฎน
ๅฎ่ฃLive Server Extension
Go Live
ๅฎ่ฃBeautify Extensionไปฅ่ชๅๅ็ธฎๆใๆด็็จๅผ็ขผใๆF1ๆBeautify๏ผๅณๅฏBeautifyไฝ ๆ้ธๆ็็จๅผ็ขผ๏ผๆๆดไปฝๆชๆกใ
What is element? and what is attribute of element?
What is
idandclass?
An HTML
ไปฅไธๆฏW3School็HTML็ฐกไป่ๆ่ฟฐ๏ผไฝ ๅฏไปฅๅ่W3School็็ถฒ้ ใ
ไป้บผๆฏHTML๏ผ HTMLๆฏ็จไพๆ่ฟฐ็ถฒ้ ็ไธ็จฎ่ช่จใ็บ่ถ ๆๆฌๆจ่จ่ช่จ(Hyper Text Markup Language)็็ธฎๅฏซใHTMLไธๆฏไธ็จฎ็ทจ็จ่ช่จ๏ผ่ๆฏไธ็จฎๆจ่จ่ช่จ(markup language)๏ผไฝฟ็จๆจ่จๆจ็ฑคไพๆ่ฟฐ็ถฒ้
HTMLๆจ็ฑคใHTMLๆจ่จๆจ็ฑค้ๅธธ่ขซ็จฑ็บHTMLๆจ็ฑค(HTML tag)ใ HTMLๆจ็ฑคๆฏ็ฑๅฐๆฌ่ๅ ๅ็้้ต่ฉ๏ผๆฏๅฆ๏ผไธ้ๅธธๆฏๆๅฐๅบ็พ็๏ผๆฏๅฆ
<b>ๅ</b>๏ผ็ฌฌไธๅๆจ็ฑคๆฏ้ๅงๆจ็ฑค๏ผ็ฌฌไบๅๆจ็ฑคๆฏ็ตๆๆจ็ฑคใHTMLๆชๆก=็ถฒ้ ใWeb็่ฆฝๅจ็ไฝ็จๆฏ่ฎๅHTMLๆๆช๏ผไธฆไปฅ็ถฒ้ ็ๅฝขๅผ้กฏ็คบๅบๅฎๅใ็่ฆฝๅจไธๆ้กฏ็คบHTMLๆจ็ฑค๏ผ่ๆฏไฝฟ็จๆจ็ฑคไพ่งฃ้้ ้ข็ๅ งๅฎน
ๅจindex.htmlไธญ่ผธๅ
ฅไปฅไธๅ
งๅฎนใไธๅ็จๅผ็ขผๆฏๅบๆฌ็HTMLๆไปถ๏ผๅ
ๅซๅฎฃๅ้ๆฏไธๅhtml5ๆไปถใ้ๆ<head>่<body>ๅ
ฉๅๅ
็ด ใ
Elements ๅ
็ด
ๅผๆElements๏ผๅ ็ด ๏ผใHTML Tags๏ผๆจ็ฑค๏ผๅAttribute๏ผๅ ็ด ็ๅฑฌๆง๏ผๆ็ๆฏไป้บผใ
ไปฅไธ็บๅ ฉๅไพ่ชGoogle Images็ๅๆช๏ผๅๅฅ็จไพ่ชชๆไฝ่ฌๆจ็ฑคใๅ ็ด ๅๅฑฌๆง๏ผไฝ ๅฏไปฅๅ็ ง่็ใไฝ่ซไฝ ่จไฝ๏ผไฝ่ฌๅ ็ด ใๆจ็ฑคใๅฑฌๆงใๅฑฌๆงๅผใๅๅ งๅฎน๏ผelement, tag, attribute, attribute value, content๏ผ๏ผๅฐๆๅฉๆผไฝ ๅญธ็ฟHTMLๅCSSใ
็้ขๅๅกๆจ็ฑค<div>
ไธๅๅณๆฏไธๅๆๅ ธๅ็็ถฒ้ ๏ผๅ ๅซไธ้ข็Bannerใๅทฆๅด็Outliner๏ผๆNavigator๏ผใไธญ้็MainTextใไธๆน็Footerใๅณๆน็Supporting Information๏ผOptional๏ผใๅจ้ๅFree CSS Layout้ฃ็ตไธญๅนพๅ็ถฒ้ ๅ งๅฎน้ฝไธๆจฃ๏ผๅฏไธ็ๅทฎๅฅๆฏlayoutใhttp://www.free-css.com/free-css-layouts/page1ใ
ๅๅ้ไบๅๅก็ๆนๆณ่ฆ็จ<div>๏ผไปฅๆงๅถๅชไบๆๅญ่ฆๆพๅจๅชไธๅๅๅกใไปฅไธๅ็บไพ๏ผๅ็บๅนพๅๅๅกใๅ ๅจ<div>ไธญๆฐๅขidๅฑฌๆง๏ผไพๆ็คบ่ฉฒ<div>็็จ้ใ
ๆฉซๅน ๅๅก<div id=โbannerโ></div>
็่ฆฝๅทฅๅ ทๅๅก<div id=โnavโ></div>
ไธปๆไปถๅๅก <div id=โcontentโ></div>
่จป่ ณๅๅก<div id=โfooterโ></div>
ๅ ถไปๅ งๅฎนๅๅก<div id=โsupportingโ></div>
<div>ๅบ็พ็้ ๅบ
ๅๅไธ็้ขๆฏ็ฑไธ่ไธ๏ผ็ฑๅทฆ่ๅณใ่ฅ่ฆๆๅบไธๅๅทฆๆน็็้ข๏ผ้กฏ็ถ่ฆไพ็ ง#bannerใ#contentใ#navใ#supportingใ#footerๆไธไพ๏ผ่ฅๆฏ่ฆๆๆๅณๆน็็้ข๏ผๅๆฏ่ฆๅ ๆ#bannerใ#navใ#contentใ#supportingใ#footerใ
ๅ
งๅฎน็ตๆงๆจ็ฑค<h1>, <p>
ๅๅฎๅๅกไปฅๅพๅฎ็พฉๆฌๆ็็ตๆงใไฝ่ฌใ็ตๆงใ๏ผไธ้ข็ๆจ้กไธใๆจ้กไบๆๅ่กจ็ญๅฐฑๆฏไธๅๆ็ซ ็็ตๆงใๅไธๆญฅ้ฉ็<div>ๅๅกๅ ็ด ๆฏ็บไบๅฎ็พฉๆดๅ่ฆ่ฆบๅ็้ข็็ตๆง๏ผไฝ้ๅ<h1>ใ<h2>ๅๆฏๆ็ซ ็็ตๆงใ
<p>paragraphs.<h1>~<h6>headings.
HTMLๆจ็ฑค่ฃก้ขๅฏ่ฝๅ ๅซๅฆไธ็ตๆจ็ฑค๏ผไฝไนๅฏ่ฝ็ดๆฅๅ ๅซๅ งๅฎน๏ผไพๅฆไธๅ็#navใ#banner็ญ้ฝๆฏ็ดๆฅๅ ๅซๅ งๅฎนใๅบๆฌ็ๅฐ่ฆฝๅๅก๏ผ#nav๏ผ็ๅ งๅฎนๅคไปฅไธไธ็ฏ็<li>ไพๅ็พ๏ผไธๆๅ็พๅจ้่ฃกใ
ไฝ้ๅธธไฝ ็ๅฐๅไธ่ฟฐๆไบๅ ถๅฏฆๆ่ฉฒๆพๅจๅไธๅๅก็ๅ งๅฎน๏ผ้ๅธธๆๅๅฅ็จ<div>ๅ ่ตทไพใๆ้ๆฐๆๅ งๅฎน็ต็นไธไธๅฆไธๅใ
่ณๆ็ตๆงๅๅ็พ็ๆจ็ฑค <li> <table>
็จ<li>, <ul>, <ol>ไพ่จญ่จ#nav็ๅฐ่ฆฝๆ้ๆ่ถ
้็ต
็พๅจๅ่จญๆๅธๆๅจๆ็็ถฒ็ซ่ฃก้ข็ข็ไธๅๅ่กจ๏ผไพๅฆsyllabus็calendar๏ผไธๅ ๅซๆฅๆใไธป้กๅๆดปๅ็ญไธ้ ่ณๆ๏ผ้ฃๆ่ฉฒ็จไป้บผๆนๅผๅ๏ผๆ็ฐกๅฎ็ๆนๅผๆฏ็จ<ul>ๅๅบๆๆ็ๆฅๆใไธป้กใๆดปๅ๏ผไฝ้้ ๅ งๅฎนๆฏใ่ฉฒๆฅๆๅไธป้กๆ่ฉฒๆดปๅใ๏ผๅฟ ้ ่ฆ็จ้ๅฑคๅผ็<ul>๏ผไพๅฆ<ul><li><ul></ul><li>ใ<ul>่กจ็คบunordered list๏ผ<ol>่กจ็คบordered listใ
<li>ๅฏ็จไพ่ฃฝไฝ่ถ
้็ต้ธๅฎใ
ไพๅฆๅฏไปฅๅจ#nav้ๅ<div>ๅ ๅ ฅไปฅไธ้ ็ฎ๏ผ้ ๆๅฑๆๅ ๅ ฅ่ถ ้็ตๅพ๏ผ้ป้ธๅพๅฏไปฅ่ทณๅฐ่ฉฒๅๆฎตใ
<table>
่ฅๅธๆๅๆ่กจๆ ผ๏ผ็จๅผ็ขผๅคง่ดๅฆไธ๏ผๅฏไธW3Schoolๆฅ้ฑ<table>็HTMLๅฏซๆณใ
<tr>็บtable row
<th>็บtable head๏ผๆจ้กๆฌไฝ๏ผ
<td>็บtable dataใ
่ฆๅฆไฝ่จญๅฎ่กจๆ ผๆๅ่กจ็ๆจฃๅผ๏ผ่ซ่ฆCSSไธ็ฏไน่กจๆ ผๆๅ่กจ็ๆจฃๅผๅใ
่ถ
้็ต<a>
ๆญคๆๆๅธๆ#navๅๅก็้็ตๆไบไปฅๅพ๏ผ#contentๅๅก็ๅ งๅฎนๅฐฑๆๆฒๅๅฐ็ธๅฐๆ็ไฝ็ฝฎใ้ฆๅ ่ฆ็บ#contentๅๅกไธญ็ๆฏไธๅๆฎต่ฝๅปบๅ<div>ไธฆๅๅid๏ผ่ฎไฝ #navๅๅก้็ตๆไบไปฅๅพๅฐฑ่ทณๅฐ็ธๅฐๆ็ๅๅก๏ผhrefไฝ ๅฏไปฅๆๅฎๅธๆhyper referenceๆฏ่ผๅฅฝ่จ๏ผใ
Navไธญ็่ถ
้็ต
ๆ นๆๅ้ข็#content<div>๏ผ#navๅคง่ดๅฆไธ๏ผไฝ ๅฏไปฅ็จ่ชๅทฑๆณ็จ็id๏ผใๆๆ็ก้่ฎ#navไธญๆฏไธๅ้ ็ฎ็contentๅ่ฉฒHyperlinkๆๆๅฐ็idไธๆจฃใ้ๆจฃๆฏ่ผๅฅฝ่จๅฅฝ็ฎก็ใ
ไฝ ไนๅฏไปฅ้จๆ็บidๅๅ๏ผๅฏ็จ่จไฝid่ฆ้ฃๅญ๏ผ้ฃๅญๅปบ่ญฐ็จๅบ็ท๏ผไธ่ฆ็จdash๏ผๆฅๅพ็ก่ซๅไปปไฝๆไฝ้ฝๆฏ่ผไธๆๆๅ้ก๏ผไฝ็ตๅฐไธ่ฆๆ็ฉบ็ฝใ
ๅ้ขๆๆ#็้็จฎๅจHTML+CSSไธญ้ฝไปฃ่กจid
้ๆๅๅฏ่ฝ่ถ ้็ตๆฒๅ็็ๆณๆไธๅฆ้ ๆ๏ผ้็ญๅฐCSS้ๆฎตๅๅไฟฎๆญฃใ
ๆไพๆจกๆฟ็่จญ่จๅธซ้ๅธธๆๅ ๆ่ฆๆพ่ถ ้็ต็ๅฐๆนๆจ่จป<a href=โ#โ>ใไปฃ่กจ้ฃๅๅฐๆน่ฆๆๅ ฅไธๅ่ถ ้็ตใ
ๅฝฑๅไฝ็บ่ถ
้็ต<img>
ๅฝฑๅๆฌ่บซไนๅฏไปฅๆฏhyperlink๏ผไพๅฆๆๅจๆ็ใไธป่ณๆๅคพใไธญๅปบไธๅๆฐ็assets่ณๆๅคพ๏ผไธฆๅจ่ฃก้ขๆพๅ็16.pngใ็ถๅพๆๆไธ้ข#about้ฃไธๅ้็ต็ใๅ งๅฎนใๆน็บๅฝฑๅๅฆไธ๏ผsrc is an attribute, standing for โsourceโ๏ผใ
ๅญๆจฃๆจ็ฑค<b><i><u>
้้ๅฐฑๆฏๆๅญ็ไฟฎ้ฃพไบ๏ผๅ ๅซ<b>ใ<i>ใ<u>็ญboldใitalicใunderlineๅญๆจฃใไฝไบๅฏฆไธ้ไบ้ฝๅฏไปฅๅพ็บ็จCSSไพ่ชฟๆด๏ผๅฆๆๆฏๆ๏ผๆๅๆญกๅจCSSๅไพ่ชฟๆดใๆฒไบไนไธ็จๅป็นๅฅ่ฃ้ฃพไฝ ็ๆๅญๆจฃๅผใ
<h1>ๆฏ็ตๆง้กๆจ็ฑค๏ผๅ่ฟฐ็<b>ใ<i>ใ<u>ๆๆฏๅญๆจฃๆจ็ฑค๏ผๅญๆจฃๆจ็ฑค็ก้ไนๆ็ซ ็ตๆงใ
็้ข็ทจๆ้ฒ้
็บไฝ็ถๅธธๅจๅฅไบบ็็ถฒ้ ไธญ็ๅฐๅพๅคๅฑค็<div>๏ผ็ฏไพhttps://www.twreporter.org/a/opinion-mountaineer-yang๏ผ๏ผ้ๆฏ็บไบ่ฃฝไฝ็้ข็ใ้ๅฑคๆงใใไธ้ขๅ ฉๅ็ถฒ้ ็่ตทไพๅพ็ธ่ฟ๏ผไฝๅ ถๅฏฆ็้ข็ตๆงๆงไธๅคช็ธๅใ
ๆนๆณไธ๏ผ็จ้ๅฑคๅผ็<div>ไพ่ฃฝไฝ็้ข็ๅ็ต
ๆญคๆ๏ผไธๅๅๆณๆฏ็จ<div>ๆ#bannerใ#contentใ#supportingใ#footer็พค็ตๅจไธ่ตท๏ผ็จฑ็บๅณๆน็พค็ต๏ผ๏ผ่#navๅ็บๅทฆๆน็พค็ตใๅฑๆๅฏไปฅ็จCSSๆJavaScriptๅ้ๆงๅถใ
ๆนๆณไบ๏ผๆๅฎๆฏๅ<div>็classๅฑฌๆงไพ่ฃฝไฝ็้ขๅ็ต
ๅฆไธ็จฎๅๆณๆฏๆๅฎ<div>็classๅฑฌๆง๏ผๅ่จด็่ฆฝๅจ่ชช๏ผๅชไบๅๅกๆฏไธ็ต็ใ
What is Class? ้กงๅๆ็พฉ๏ผๆๆ็ๅ ็ด ไธญ๏ผidๅฑฌๆง็ๅผๅฟ ้ ๆฏๅฏไธ็๏ผclass็ธ่ผๆผๆญค๏ผๆข็ถไปไธญๆ่ขซ็ฟป็บใ้กๅฅใ๏ผ้ฃๆๅณ่ๅคๅๅ ็ด ้ฝๅฏไปฅไฝฟ็จ้ๅ้กๅฅใ
Final HTML
ๆณจๆไบ้
HTMLไธญ็ฉบ็ฝ
HTML็็จๅผ็ขผไธญไธ็ฎกๆฏๆๅคๅฐๅ้ฃ็บ็ฉบ็ฝๅๅชๆ่ขซๅ็บไธๅ็ฉบ็ฝ๏ผๆไปฅๆไบ็จๅผ่จญ่จๅธซๆๅฉ็จ้ไบ็ฉบ็ฝไพ่ฎ็จๅผ็ขผๆๅๆดๅฅฝ็ใ่ฅ้่ฆ็ฉบ็ฝไธๅฏ๏ผๅฐฑ่ฆๆEscape character: http://www.w3schools.com/html/html_entities.asp
Meta tags
Last updated