មេរៀនទី១: ការណែនាំ HTML

មេរៀនទី១: ការណែនាំ HTML

បង្រៀនដោយលោកគ្រូ: ទាវ ឈុនណន
ព្រឹទ្ធបរុស មហាវិទ្យាល័យ វិទ្យាសាស្រ្ត និង បច្ចេកវិទ្យា
នៃ សាកលវិទ្យាល័យកម្ពុជា
Tel: 077778647-070778647-0977778647
Yahoo, Skype, google: chhunnan
2
HTML ជាអក្សរបំព្រួញនៃ Hypertext Markup Language គឺជាភាសា​ សំរាប់បង្កើត ទំព័រឯកសារផ្សេងៗ សៀវភៅឯកសារអេឡិចត្រូនិក (E-book) និង សំរាប់បង្កើតគេហទំព័រវិបសាយ នៅក្នុង​ អ៊ីនធើណែត។ វាពន្យល់បកស្រាយ អំពី អត្ថបទ​ ពត៌មាននានា នៅក្នុងឯកសារ។ HTML​ ជាភាសាគំរូ និង ជាភាសាមានប្រសិទ្ធិភាពខ្ពស់ ដែលត្រូវបានគេ ប្រើ ប្រាស់យ៉ាង ទូលំទូលាយ ដើម្បីពណ៍នា អំពី គេហទំព័រ និង នៅតែ ត្រូវ បាន គេប្រើប្រាស់ សំរាប់ អន្តរភាសា នៅក្នុង គេហទំព័រ។

ប្រវត្តិរបស់ HTML HTML ត្រូវបានបង្កើតឡើងដោយ អ្នករូបនិយម ម្នាក់ឈ្មោះ Tim Berners-Lee(កើតនៅថ្ងៃទី ៨ ខែមិថុនា ឆ្នាំ១៩៥៥) ដែលជាអ្នកម៉ៅការងាររបស់អង្គការ CERN។

HTML Tags
HTML ត្រូវបានសរសេរឡើងដោយ Tags ដូចនេះជាធម្មតាត្រូវបានគេ ហៅថា HTML Tags។

  • HTML tag គឺជាពាក្យគន្លឹះ(ឈ្មោះ Tag) ដែលត្រូវបានសរសេរនៅក្នុង សញ្ញា angle brackets, ឧ. <htm>
  • HTML tag ជាធម្មតាត្រូវចាប់ផ្តើមដោយ បើកTag រួចបិទ Tag វិញ ឧ. <b>    </b>
  • រូបមន្ត <tagname>ពាក្យពីពណ័នា</tagname>

HTML Elements វាគឺជាអ្វីៗទាំងអសល់របស់ start tag ហើយនឹង end tag រួមទាំង Tags ខ្លួនវាផងដែរ។
HTML & CSSHTML Editors  ដើម្បីសរសេរកូដ HTML អ្នកអាចប្រើកម្មវិធី Professional HTML ដូចជា៖

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • FreshHTML
  • NotePad++
  • CoffeeCup HTML Editor

ទោះជាកម្មវីធីខាងលើនេះសុទ្ធតែជាកម្មវីធីដែលធ្វើអោយយើងមានអារម្មណ៍ ថាងាយស្រួលក៏ដោយ ប៉ុនតែបើអាច ពួកយើងសូមអោយ អ្នកទាំង អស់ គ្នាប្រើ កម្មវីធី Notepad របស់ Windows រឺក៏ប្រើត្រឹងតែ Notepad++ ទៅបានហើយ(សំរាប់ PC ដែលប្រើ Windows) ចំនែក Mac សូមប្រើTextEdit ដែលមាននៅលើម៉ាស៊ីនស្រាប់។

ជំហ៊ានទី១​ របៀបបើកកម្មវិធី ដើម្បីដំណើរការ កម្មវីធីដែលមាន ស្រាប់នៅក្នុង windows សុំចូលទៅកាន់
Start –>All Programs –> Accessories –>Notepad
រឺក៏ ចូលទៅកាន់Run (start+r) រួចវាយ notepad –> OK
HTML & CSSជំហ៊ានទី២​ សរសេរកូដក្នុង Notepad
វាយកូដ HTML ទៅក្នុង Notepad
HTML & CSSជំហ៊ានទី៣​ Save AS សូម Save File នេះនៅទីតាំងណា ដែលស្រួល ចាំ រួចបើកវាជាមួយ Browser ណាមួយ ដោយ Right Click លើFile ដែលយើងបាន Save –> Open with –> រើសbrowser រួច click==>បានលទ្ធផលដូចនេះ។
HTML & CSSHTML Basic សូមកុំបារម្មណ៍ ប្រសិនបើអ្នកមិនបានរៀនឧទាហរណ៍ អំពីរបៀបប្រើប្រាស់ Tags។
អ្នកនឹងបានរៀន អំពី Tags នៅមេរៀន បន្ទាប់ទៀត។ នៅ ក្នុង ចំនុច HTML Editors យើងបានបង្ហាញពីរបៀបសរសេរ HTMLL, Save, Run វារួចហើយ។ ប៉ន្តែក្នុងចំនុចនេះពួក យើង នឹងលំអិតអំពីវា។

 HTML Basic

HTML ត្រូវសរសេរដោយចាប់ផ្តើមជាមួយ បើកTags <HTML> & <BODY> ហើយបិទវិញជាមួយTags </HTML> & </BODY>

<html>
<body>
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
</body>
</html>

សាកល្បងនៅទីនេះ

HTML Comments

HTML Comments ប្រើសំរាប់ពិពណ៌នាអោយកូដណាមួយរបស់HTML ហើយComments គឺមិនបង្ហាញ នៅក្នុងBrowser ទេ។
Syntax: <!– …………….. –>

<!– This is a comment –>

សាកល្បងនៅទីនេះ

HTML Lines

HTML Lines ប្រើសំរាប់គូសបន្ទាត់ ពីក្រោមអត្ថបទណាមួយ។
Syntax: <hr>

<html>
<body>
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
<hr>
</body>
</html>

សាកល្បងនៅទីនេះ

Break Line

HTML Lines ប្រើសំរាប់ចុះបន្ទាត់
Syntax: <br>

<html>
<body>
សូមសរសេរអ្វីដែលអ្នកចង់បង្ហាញនៅទីនេះ!
<br>
Hello, World!

</body>
</html>

សាកល្បងនៅទីនេះ

HTML Output

អ្នកមិនអាចប្រាកដទេថា ការបង្ហាញលទ្ធផលរបស់ HTML ដូចគ្នា ព្រោះអាស្រ័យទៅលើទំហំ Screen កុំព្យូទ័រ ធំ​ រឺ តូច ដូចនេះលទ្ធផលដែលបង្ហាញនៅលើកុំព្យូទ័រគឺ វាមិនដូចគ្នាទេ។
ជាមួយនឹងកូដ HTML អ្នកមិនអាចកំនត់ចំនួន Spaces រឺ Line នោះទេ ព្រោះ Code HTML គិតតែមួយ Spaces ពេលយើង ចុចSpace ប៉ុន្តែបើយើងចង់បាន Space មួយទៀត យើងត្រូវប្រើ Syntax ដូចនេះ &nbsp;

<html>
<body>
R &nbsp;&nbsp;&nbsp;&nbsp;+ &nbsp;&nbsp;&nbsp;T = RT
<br>
<br>
<br>
<br>
<br>
Hello, World!
</body>
</html>

HTML Elements

HTML documents ត្រូវបានអោយអត្ថន័យដោយ HTML elements
HTML elements គឺជាអ្វីគ្រប់យ៉ាងដែលមាននៅក្នុង Open Tags និង End Tags

Start tag ជារឿយៗត្រូវបានគេហៅថា opening tag
End tag​ ជារឿយៗត្រូវបានគេហៅថា closing tag

Start tag *

Element content

End tag *

<p> នេះគឺជា កថាខណ្ឌ </p>
<a href=”default.htm”> នេះគឺជា ការភ្ជាប់ Files </a>
<br> នេះសំរាប់ចុះបន្ទាត់

**** សំរាប់ Tag ចុះបន្ទាត់យើងអាចសរសេរបានពីររបៀប គឺ <br> និង <br />

សង្ខេប

  • HTML element ត្រូវតែចាប់ផ្តើមដោយ start tag / opening tag
  • HTML element ត្រូវតែបញ្ចប់ដោយ end tag / closing tag ខ្លួនវា
  • element content គឺជាអ្វីៗដែលស្តិតនៅចន្លោះ start tag និង end tag
  • element content មានក៏បាន អត់ក៏បាន
  • ចំពោះ HTML Tags Name យើងអាចសរសេរជា តួអក្សរធំក៏បាន តូចក៏បាន ប៉ុន្តែយកល្អយើងគួរតែសរសេរ ជាតួរអក្សរតូច ពីព្រោះ វាជាការណែនាំដោយ W3C តាំងពីជំនាន់ HTML4 មកម្លេះ
  • ស្ទើតែគ្រប់ HTML Elements ទាំងអស់ អាចមាន attributes។

ចំពោះ attributes អ្នកនឹងរៀននៅមេរៀបបន្ទាប់ទៀត។

Nested HTML Elements វាគឺជា HTML Element ដែលប្ររួម គ្នា ក្នុង HTML Elements តែមួយ​ រួមទាំង​ HTML documents ផងដែរ។

ឧទាហរណ៍របស់ HTML Document

<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

នៅក្នុង ឧទាហរណ៍របស់ HTML មាន ៣ ដែលជា HTML Document៖

  • <html>
  • <body>
  • <p>

Empty HTML Elements វាគឺជា HTML Elements ទាំងឡាយ ណាដែលមិនចាំបាច់មាន Closing Tags។
ឧទាហរណ៍៖   <br> , <hr> …

HTML Attributes Attributes ផ្តល់នូវពត៌មានបន្ថែម អំពី HTML Elements
សូមមើលឧទាហរណ៍ខាងក្រោម

  • HTML Elements អាចមាន​ Attributes
  • Attributes ផ្តល់ពត៌មានបន្ថែមអំពី element
  • Attributes តែងតែស្ថិតនៅក្នុង Start Tags បន្ទាប់ពី Tag Name
  • Attributes មានឈ្មោះ/តំលែ ជាគូៗ ដូចជា name=”value”
  • នៅក្នុង Attributes អ្នកអាចប្រើ Double style quotes រឺ Single style quotes
  • Attributes អាចសរសេរជាអក្សរតូចក៏បាន ធំក៏បាន, ប៉ុន្តែយកល្អសូមសរសេរ ជាអក្សរតូច ព្រោះ ជំនាន់ថ្មីរបស់ (X) HTML នឹងប្រើជាមួយ តួរអក្សរតូច (ការណែនាំរបស់ W3C)

ចំនាំ កុំភ្លេចបិទ Quotes វិញផង

HTML Headings HTML Headings គឺវាមានស្រាប់នៅក្នុង HTML documents
គេប្រើវាដើម្បីអោយ តួអក្សរមានទំហំធំ ហើយឌិតជាងមុន។
Headings មានពី <h1> រហូតដល់ <h6> ដែល <h1>ធំជាងគេ។
Headings វាពិតជាមានសារៈសំខាន់នៅក្នុងការបង្ហាញ document structure។

HTML Headings Headings ប្រើសំរាប់បញ្ជាក់ទៅលើ តួអក្សរ ដើម្បីអោយអក្សរកាន់តែធំ ហើយដិត

<html>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
</body>
</html>

HTML Paragraphs

Paragraphs យើងប្រើវាសំរាប់សរសេរអត្ថបទជាកថាខណ្ឌ។
នៅក្នុង Paragraph មា​ន Attributes ជាច្រើន ដូចនេះយើងនឹងលើកយក Attribute មួយ ដែលពេញនិយមយកមកប្រើ គឺ Align=””
គ្រប់ Browsers ស្ទើតែទាំងអស់វាបង្ហាញលទ្ធផងដូចធម្មតា ទោះបីយើងមិនបាន បិទ Tag paragraph ក៏ដោយ។
Syntax: <p align=”left”>……</p>

 HTML Paragraphs

Paragraphs សំរាប់សរសេរអត្ថបទជា កថាខណ្ឌ ៗ។
នៅក្នុង Open Tags <p> យើងអាចប្រើជា៖
<p align=”left”> តំរឹមអត្ថបទខាងឆ្វេង
<p align=”right”> តំរឹមអត្ថបទខាងស្តាំ
<p align=”center”> តំរឹមអត្ថបទមកកណ្តាល
<p align=”justify”>តំរឹមអត្ថបទទាំងសងខាង

<html>
<body>
<p aling=”left”>This is a Paragraphs 1</p>
<p align=”right”>This is a Paragraphs 2</p>
<p align=”center”>This is a Paragraphs 3</p>
</body>
</html>

HTML Formatting

យើងអាចកំនត់អក្សរ អោយក្លាយជាអក្សរទ្រេត រឺក៏អក្សរដឹត ទៅតាម Elements ស្រាប់ៗ របស់HTML៖
<b>…</b> សំរាប់បង្ហាញអក្សរដិត
<strong>…</strong> សំរាប់បង្ហាញអក្សរដិត
<em>…</em> សំរាប់បង្ហាញអក្សរទ្រេត
<i>…</i> សំរាប់បង្ហាញអក្សរទ្រេត

​ HTML Paragraphs

<html>
<body>
<em> Hello! Webkhmerlearning.com</em>
</body>
</html>

HTML Links

Links សំរាប់ភ្ជាប់ទៅកាន់ Files ឬ URL ផ្សេង ដែលស្ថិត នៅទីតាំងជាមួយគ្នា រឺផ្សេងគ្នា។ ដើម្បីប្រើវាបាន អ្នកត្រូវ សរសេរបើកTags <a> និងបិទវិញដោយ </a>។
នៅ ក្នុង Tag <a> មាន Attributes ដូចជា៖
href=”” ផ្លូវទៅកាន់ File រឺ URL

title=”hello” សំរាប់ដាក់ពាក្យពិពណ៌នា
target=”” ពាក្យបង្គាប់ Page ថ្មី
សូមមើលរបៀបប្រើ Target=””
target=”_blank”​ បោះ Page ចេញទៅ Tap ថ្មីមួយទៀត
target=”_parent” បោះ Page ជំនួស Page ដើម
target=”_self” បោះ Page ជំនួស Page ដើម
target=”_top” បោះ Page ជំនួស Page ដើម

<html>
<body>
<a href=”http://www.facebook.com/GB_Hunter” target=”_blank” title=”This is my Facebook Page!”> សាកល្បងនៅទីនេះ </a>
</body>
</html>

HTML Head

Head Element វាគឺជា element មួយប្រភេទ​ ដែលសំខាន់ជាងគេក្នុង HTML ព្រោះវាមានលទ្ធភាពគ្រប់គ្រង Element របស់ភាសារ ផ្សេង ទៀតបាន ទាំងនៅក្នុងFile ខ្លួនឯង និងនៅខាងក្រៅបាន។
Tags ដែលនៅខាងក្រោយនេះត្រូវបាន Add ចូលទៅ Head Tag តាមតម្រូវការ ផ្សេងៗគ្នាដូចជា <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base&g;

The HTML <title> Element

Tags នេះប្រើសំរាប់បង្ហាញចំនងជើង រឺមតិកាផ្សេងៗក្នុង Browser toolbar។

  • ជាអ្នកកំណត់ Title ជាក់លាក់មួយសំរាប់ Page មួយក្នុង Browser toolbar
  • បង្ហាញការពិពណ៌នាសំរាប់ Page Website នៅពេលគេប្រើ search-engine

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>>

</html>

មើលលទ្ធផល

The HTML <base> Element

<base> tags កំនត់ទីតាំងជាក់លាក់របស់ URL/targetដែលទាក់ទងនឹង URL នៅក្នុងPage ណាមួយ។

<head>
<base href=”http://www.w3schools.com/images/” target=”_blank”>
</head>

The HTML <link> Element

<link> tags ជានាក់កំនត់ទំនាក់ទំនងរវាង ឯកសារនៅខាងក្នុង នឹងប្រភពឯកសារនៅខាងក្រៅ។
ជាធម្មតាវាប្រើជាមួយ style sheets(CSS)។

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

The HTML <meta> Element <meta> tags ជាពត៍មានអំពី ទិន្នន័យ របស់វេបសាយ ដែលយើងបានសរសេរដាក់ពីលើ ហើង វាមានឥទ្ធិពលនៅពេលគេប្រើ ការស្វែងរក (Search Engines) តាមរយះ Google រឺ Yahoo…។
គ្រប់ទិន្នន័យរបស់ Meta មិនបានបង្ហាយចេញនៅលើ Pages ខ្លួនវាទេ ប៉ុន្តែវាបង្ហាញ ចេញនៅពេលគេ Search Engines។ គ្រប់ Attributes របស់ Meta ត្រូវបានប្រើបា្រស់ខុសៗគ្នា៖

កំនត់ពាក្យគន្លឹងសំរាប់ប្រើក្នុង ការស្វែងរក (Search Eninges)

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

កំនត់ការពីពណ៌នាសំរាប់ Website <meta name=”description” content=”Free Web tutorials on HTML and CSS”>

បង្ហាញឈ្មោះអ្នកនិពន្ធ វេបសាយ

<meta name=”author” content=”រុន​ រដ្ឋា (Run Rotha)”>

កំនត់រយៈពេល សំរាប់ការ Refresh Webpage។

ឧទាហរណ៍៖ ចង់ refresh 30 វិនាទីម្តង

<meta http-equiv=”refresh” content=”30″>

The HTML <style> Element

<style> tags សំរាប់កំនត់រូបរាង រឺពណ៌របស់ web page

<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML CSS គេប្រើ CSS សំរាប់រចនាវេបសាយ អោយកាន់តែ ស្រស់ស្អាត ជាងមុន នឹងងាយស្រួលសរសេរជាងមុន

ពាក្យបំព្រួញរបស់ CSS គឺ Cascading Style Sheets

រៀបសរសេរ CSS ជាមួយ HTML (Styling HTML with CSS)

យើងអាចសរសេរ CSS បាន ៣​ បៀប គឺ៖

  • Inline ប្រើAttribute ឈ្មោះ style ក្នុង HTML Element
  • Internal ប្រើ <style> element នៅក្នុង <head>
  • External សរសេរនៅក្នុង File មួយផ្សេងទៀត

Inline Styles កំនត់ពណ៌ Background តាម Element នីមួយៗ

<!DOCTYPE html>
<html>

<body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>This is a heading</h2>
<p style=”background-color:green;”>This is a paragraph.</p>
</body>

</html>

កំនត់ពណ៌ ទំហំ ម៉ូត អក្សរ

<!DOCTYPE html>
<html>

<body>
<h1 style=”font-family:verdana;”>A heading</h1>
<p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p>

</body>
</html>

Internal Style Sheet យើងត្រូវសរសេរ វាក្នុង <head> element

<!DOCTYPE html>
<html>

<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

<body>
</body>
</html>

External Style Sheet

ប្រើ Link element សំរាប់ភ្ជាប់ទៅ file នៅខាងក្រៅឈ្មោះ mystyle.css

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

HTML Images

<img> tag ប្រើសំរាប់បង្ហាញរូបភាពនៅលើ web page

Attribtutes របស់ <img> tag មានដូចជា ៖

  • src=”” ផ្លូវទៅកាន់រូបភាព
  • title=”” ពាក្យពិពណ៌នានៅលើ រូបភាព
  • width=””​ កំនត់ប្រវែងរូបភាព
  • height=”” កំនត់កំពស់រូបភាព
  • border=”” កំនត់កំរាសស៊ុម

សូមមើលឧទាហរណ៍ យើងមានរូបភាពឈ្មោះ my photo.jpg

<img src=”my photo.jpg” alt=”photo in wonderful day!” width=”300″ height=”260″ border=”5″ />

HTML Tables

ដើម្បីបង្កើតតារាបាន យើងចាំបាច់ត្រូវចាប់ផ្តើមដោយ open tag <table> និងបញ្ចប់ដោយ close tag </table>។

តារា កើតឡើងដោយ បន្ទាត់ដេក(ជួរដេក) ហៅថា (Rows) និង បន្ទាត់ឈរ(ជួរឈរ) ហៅថា (Columns)

Tags Row គឺ <tr> …… </tr>

Tags Column គឺ <td>……</td>

សូមមើលឧទាហរណ៍

Ex:1

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Result 1

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

បង្កើតក្បាលតារាង ដោយប្រើ Tags <th>……</th>

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Result:

Header 1

Header 2

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

ចង់បានកំរាស់បន្ទាត់ស្តើងជាងមុន

<table border=”1″ cellpadding=”0″ cellspacing=”0″ >
<tr>
<th>Header 1</th>
<th>Header 2</th>

</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Header 1

Header 2

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

ភ្ជាប់ Table ជាមួយ CSS

<table border=”1″>
<tr>
<th style=”background:#0099FF;”>Header 1</th>
<th style=”background:#FF3333; color:#FFFFFF;”>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

Header 1

Header 2

row 1, cell 1 row 1, cell 2

HTML Lists List ដែលប្រើច្រើនមាន ២ប្រភេទគឺ ordered និង unordered lists។

Ordered

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Result:

  1. Coffee
  2. Milk

HTML Unordered Lists

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Result:

  • Coffee
  • Milk

HTML Definition Lists

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Result:

Coffee

– black hot drink

Milk

– white cold drink

HTML Blocks យើងប្រើ ខ្ចប់element នៅក្នុងក្រុមជាមួយគ្នាបាន ដោយប្រើ <div>…..</div> ហើយនឹង <span>…..</span>

Block level elements ជាធម្មតាតែងតែចាប់ផ្តើម(start) និងបញ្ចប់(end)ជាមួយនឹងបន្ទាត់ថ្មី នៅពេលបង្ហាញនៅក្នុង browser។

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements ជាធម្មតាមិនដែលចាប់ផ្តើមដោយបន្ចាត់ថ្មីទេ នៅពេលបង្ហាញ។

Examples: <b>, <td>, <a>, <img>

The HTML <div> Element គឺជា Block Level element សំរាប់ដាក់ HTML element ជាក្រុមៗ

<div>
<p style=”background-color:#0099FF;”> Hello world!</p>
<h2> This is Heading 2</h2>
<p aling=”left”>this is second paragraph</p>
</div>
<div>
<h2>This is block image </h2>
<img src=”my photo.jpg” title=”This is my photo” />
<p align=”center”> Lovely Photo </p>
</div>

Result: how to use DIV
HTML & CSSThis is Heading 2

this is second paragraph

This is block Image

The HTML <span> Element

<span>
<h3>This is block Span</h3>
<p style=” text-align:right; color:#0000FF; background-color:#00CC00″>
Block Span
</p>
</span>