SlideShare a Scribd company logo
HTML
H.M.D.S.B.Herath
WHAT IS HTML?

 HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup
        language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
HTML TAGS

 HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like

   <html>

 HTML tags normally come in pairs like <b> and </b>

 The first tag in a pair is the start tag, the second tag is the end tag

 Start and end tags are also called opening tags and closing tags
HTML DOCUMENT EXAMPLE

<html>
     <body>
          This is my first paragraph.
     </body>
</html>
HTML DOCUMENT EXAMPLE

<html>
      <head>
            <title>My First Web</title>
      </head>
      <body>
            This is my first paragraph.
      </body>
</html>
HTML HEADINGS

 <h1>This is a heading 1</h1>
 <h2>This is a heading 2</h2>
 <h3>This is a heading 3</h3>
 <h4>This is a heading 4</h4>
 <h5>This is a heading5</h5>
 <h6>This is a heading 6</h6>
HTML LINES

<h1>This is a heading</h1>

<hr />
<h2>This is a heading</h2>

<hr />
<h3>This is a heading</h3>

<hr />
HTML COMMENTS




<!-- This is a comment -->
HTML TEXT FORMATTING

<b>Bold</b>        <small>small</small>

<i>Italic</i>      <strong>Strong</strong>

<u>Underline</u>   <sub>subscript</sub>

<big>big</big>     <sup>superscript</sup>
HTML LINE BREAKS




    <br> or <br />
H T M L PA R A G R A P H S




<p>This is a paragraph</p>
H T M L < F O N T > TA G



<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
H T M L < C E N T E R > TA G




<center>This text will be centered.</center>
HTML LINKS

 <a href="http://www spmmv.sch.lk/" target="_blank">Visit
  spmmv.sch.lk!</a>

 <a href="page 01.html" target="_blank">Visit About Us </a>

 <a href="C:Documents and
  SettingsAdministratorDesktopfirst.html"
  target="_blank">Click here to visit first page</a>
HTML IMAGES



<img src="boat.gif" alt="Big Boat" />

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
H T M L TA B L E S - 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>
H T M L TA B L E S - 2

<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>
</table>
H T M L TA B L E S - 3

<table border="1“ bgcolor=“red” width=“50%” Align=“left”>
          <caption>Monthly savings</caption>
          <tr>
                    <th>Month</th>
                    <th>Savings</th>
          </tr>
          <tr>
                    <td>January</td>
                    <td>$100</td>
          </tr>
</table>
H T M L TA B L E S - 4

<table border="1“width=“50%” >
            <thead>
                        <tr> <th>Month</th> </tr>
            </thead>
            <tbody>
                       <tr><td>January</td></tr>
                       <tr><td>February</td></tr>
            </tbody>
            <tfoot>
                       <tr><th>Sum</th> </tr>
            </tfoot>

</table>
H T M L TA B L E S - 5

<table border="1">
           <tr bgcolor=“red” align=“center”>
                      <td width=“20%”>Header 1</td>
                      <td width=“80%”>Header 2</td>
           </tr>
           <tr>
                      <td align=“right” height=“50”>row 1, cell 1</td>
                      <td valign=“top”>row 1, cell 2</td>
           </tr>
</table>
H T M L TA B L E S ‘ S PA N N I N G ’ – 6

<table border="1">
         <tr>
                 <td rowspan=“2”>row 1, cell 1</td>
                 <td>row 1, cell 2</td>
                 <td>row 1, cell 2</td>
         </tr>
         <tr>
                 <td colspan=“2”>row 2, cell 1</td>
         </tr>
</table>
H T M L TA B L E S ‘ PA D D I N G ’ - 7

<table border="1“ cellspacing=“15” cellpadding=“10”>
         <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>
HTML LISTS

 Unordered Lists

       <ul>
                    <li>Coffee</li>
                    <li>Milk</li>
       </ul>
HTML LISTS

 Ordered Lists

       <ol>
                  <li>Coffee</li>
                  <li>Milk</li>
       </ol>
HTML LISTS

Nested List
     <ol>
               <li>Flower</li>
                      <ul>
                               <li>red</li>
                               <li>White</li>
                      </ul>
               <li>Fruits</li>
     </ol>
HTML LISTS

 Definition Lists
          <dl>
                     <dt>Coffee</dt>
                           <dd>- black hot drink</dd>
                     <dt>Milk</dt>
                           <dd>- white cold drink</dd>
          </dl>
HTML FRAMES

 Column frame

     <frameset cols="25%,75%">
            <frame src="frame_a.html" />
            <frame src="frame_b.html" />
     </frameset>
HTML FRAMES

 Row frame

     <frameset rows="*,*">
            <frame src="frame_a.html" />
            <frame src="frame_b.html" />
     </frameset>
HTML FRAMES

 Nesting frame
        <frameset cols="25%,75%">
              <frame src="frame_a.html" />
                      <frameset rows="*,*">
                      <frame src="frame_a.html" />
                      <frame src="frame_b.html" />
        </frameset>
HTML I FRAMES



<iframe src="demo_iframe.htm"
width="200" height="200"></iframe>
HTML FORMS AND INPUT

 HTML Forms

<form>
.
input elements
.
</form>
HTML FORMS AND INPUT

 Text Fields

<input type="text" />
HTML FORMS AND INPUT

 Password Field

<input type="password" />
HTML FORMS AND INPUT

 Submit Button

<input type="submit" />
HTML FORMS AND INPUT

 Submit Button

<input type="submit" />

More Related Content

What's hot

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and FormsDoncho Minkov
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTMLDoncho Minkov
 
Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTML
Mustafa Kamel Mohammadi
 
Html basics 7 table
Html basics 7 tableHtml basics 7 table
Html basics 7 tableH K
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
American Antiquarian Society
 
HTML Table Tags
HTML Table TagsHTML Table Tags
HTML Table Tags
Kainat Ilyas
 
Web I - 03 - Tables
Web I - 03 - TablesWeb I - 03 - Tables
Web I - 03 - Tables
Randy Connolly
 
Web technology lab manual
Web technology lab manualWeb technology lab manual
Web technology lab manual
neela madheswari
 
Session3 part2
Session3 part2Session3 part2
Session3 part2banputer
 
html
htmlhtml
HTML Tables
HTML TablesHTML Tables
HTML Tables
Nisa Soomro
 
Table structure introduction
Table structure introductionTable structure introduction
Table structure introduction
nobel mujuji
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
nobel mujuji
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
Arvind Kumar
 
HTML
HTMLHTML
HTML
Spy Seat
 
HTML basic
HTML basicHTML basic
HTML basic
Yoeung Vibol
 
Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)club23
 
Html tables
Html tablesHtml tables
Html tables
Sikandar Pandit
 

What's hot (20)

HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTML
 
Html basics 7 table
Html basics 7 tableHtml basics 7 table
Html basics 7 table
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
 
HTML Table Tags
HTML Table TagsHTML Table Tags
HTML Table Tags
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
Web I - 03 - Tables
Web I - 03 - TablesWeb I - 03 - Tables
Web I - 03 - Tables
 
Web technology lab manual
Web technology lab manualWeb technology lab manual
Web technology lab manual
 
Session3 part2
Session3 part2Session3 part2
Session3 part2
 
html
htmlhtml
html
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
Table structure introduction
Table structure introductionTable structure introduction
Table structure introduction
 
Frames tables forms
Frames tables formsFrames tables forms
Frames tables forms
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
HTML
HTMLHTML
HTML
 
HTML basic
HTML basicHTML basic
HTML basic
 
Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)
 
Css1
Css1Css1
Css1
 
Html tables
Html tablesHtml tables
Html tables
 

Viewers also liked

Git exam short note
Git exam short note Git exam short note
Git exam short note
NoteGun LMS
 
කාර්යාල ක්‍රම
කාර්යාල ක්‍රමකාර්යාල ක්‍රම
කාර්යාල ක්‍රම
Fahim Fana
 
Innovating Digital Education #ind15
Innovating Digital Education #ind15Innovating Digital Education #ind15
Innovating Digital Education #ind15
Oliver Quinlan
 
Computing in English Education #ind15
Computing in English Education #ind15Computing in English Education #ind15
Computing in English Education #ind15
Oliver Quinlan
 
ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?
ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?
ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?
Aurora Computer Studies
 
PHI class I application 2016
PHI class I application 2016PHI class I application 2016
PHI class I application 2016
Manjula Lakshakumara
 
Computer networks
Computer networksComputer networks
Computer networks
Mahesh Kodituwakku
 
Study BIT-UCSC @ Aurora Computer Studies
Study BIT-UCSC @ Aurora Computer StudiesStudy BIT-UCSC @ Aurora Computer Studies
Study BIT-UCSC @ Aurora Computer Studies
Aurora Computer Studies
 
Team building and team work (Sinhala)
Team building and team work (Sinhala)Team building and team work (Sinhala)
Team building and team work (Sinhala)
Krishantha Jayasundara
 
Data Structure and Algorithms
Data Structure and AlgorithmsData Structure and Algorithms
Data Structure and Algorithms
Mahesh Kodituwakku
 
IEEE754 32 Bit
IEEE754 32 BitIEEE754 32 Bit
IEEE754 32 Bit
Mahesh Kodituwakku
 
How to study - Motivational facts
How to study - Motivational factsHow to study - Motivational facts
How to study - Motivational factsSuresh Wenuka
 
Joomla හි User Registration ගැන දැන ගනිමු
Joomla හි User Registration ගැන දැන ගනිමුJoomla හි User Registration ගැන දැන ගනිමු
Joomla හි User Registration ගැන දැන ගනිමු
Mahesh Kodituwakku
 
ඵලදායිව ඉගෙන ගන්නේ කොහොමද?
ඵලදායිව ඉගෙන ගන්නේ කොහොමද?ඵලදායිව ඉගෙන ගන්නේ කොහොමද?
ඵලදායිව ඉගෙන ගන්නේ කොහොමද?
Aurora Computer Studies
 
Doing your higher studies the right way
Doing your higher studies the right wayDoing your higher studies the right way
Doing your higher studies the right way
Aurora Computer Studies
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix note
Mahinda Gamage
 
ICT in Sinhala
ICT in SinhalaICT in Sinhala
ICT in Sinhala
Mahesh Kodituwakku
 
ICT Students Presentations
ICT Students PresentationsICT Students Presentations
ICT Students Presentations
Mahesh Kodituwakku
 

Viewers also liked (20)

Manava 6
Manava  6 Manava  6
Manava 6
 
Git exam short note
Git exam short note Git exam short note
Git exam short note
 
කාර්යාල ක්‍රම
කාර්යාල ක්‍රමකාර්යාල ක්‍රම
කාර්යාල ක්‍රම
 
Innovating Digital Education #ind15
Innovating Digital Education #ind15Innovating Digital Education #ind15
Innovating Digital Education #ind15
 
Computing in English Education #ind15
Computing in English Education #ind15Computing in English Education #ind15
Computing in English Education #ind15
 
ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?
ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?
ආර්ථිකව දියුණු රටක් ගොඩනගන්නේ කෙසේද?
 
PHI class I application 2016
PHI class I application 2016PHI class I application 2016
PHI class I application 2016
 
Computer networks
Computer networksComputer networks
Computer networks
 
Study BIT-UCSC @ Aurora Computer Studies
Study BIT-UCSC @ Aurora Computer StudiesStudy BIT-UCSC @ Aurora Computer Studies
Study BIT-UCSC @ Aurora Computer Studies
 
Team building and team work (Sinhala)
Team building and team work (Sinhala)Team building and team work (Sinhala)
Team building and team work (Sinhala)
 
Data Structure and Algorithms
Data Structure and AlgorithmsData Structure and Algorithms
Data Structure and Algorithms
 
Html sinhala(By Prasanga Amila-UCSC)
Html sinhala(By Prasanga Amila-UCSC)Html sinhala(By Prasanga Amila-UCSC)
Html sinhala(By Prasanga Amila-UCSC)
 
IEEE754 32 Bit
IEEE754 32 BitIEEE754 32 Bit
IEEE754 32 Bit
 
How to study - Motivational facts
How to study - Motivational factsHow to study - Motivational facts
How to study - Motivational facts
 
Joomla හි User Registration ගැන දැන ගනිමු
Joomla හි User Registration ගැන දැන ගනිමුJoomla හි User Registration ගැන දැන ගනිමු
Joomla හි User Registration ගැන දැන ගනිමු
 
ඵලදායිව ඉගෙන ගන්නේ කොහොමද?
ඵලදායිව ඉගෙන ගන්නේ කොහොමද?ඵලදායිව ඉගෙන ගන්නේ කොහොමද?
ඵලදායිව ඉගෙන ගන්නේ කොහොමද?
 
Doing your higher studies the right way
Doing your higher studies the right wayDoing your higher studies the right way
Doing your higher studies the right way
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix note
 
ICT in Sinhala
ICT in SinhalaICT in Sinhala
ICT in Sinhala
 
ICT Students Presentations
ICT Students PresentationsICT Students Presentations
ICT Students Presentations
 

Similar to Html

Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)Linux User's Group
 
Html.pptx
Html.pptxHtml.pptx
Session3 part2
Session3 part2Session3 part2
HTML
HTMLHTML
v4-html-table-210321161424.pptx
v4-html-table-210321161424.pptxv4-html-table-210321161424.pptx
v4-html-table-210321161424.pptx
HemantBansal35
 
01 HTML-Tables-1.pptx
01 HTML-Tables-1.pptx01 HTML-Tables-1.pptx
01 HTML-Tables-1.pptx
AhmedAlmughalis1
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
Mukesh Kumar
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
AliMUSSA3
 
Lecture-4.pptx
Lecture-4.pptxLecture-4.pptx
Lecture-4.pptx
vishal choudhary
 
Getting into HTML
Getting into HTMLGetting into HTML
Getting into HTML
ispkosova
 
Form & frame
Form & frameForm & frame
Form & frameaminsir
 
HTML Basic
HTML BasicHTML Basic
HTML Basic
Pranita Talwatkar
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
MuhammadAbdulSattarC
 
Unit 2 (it workshop)
Unit 2 (it workshop)Unit 2 (it workshop)
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
basic knowledge abot html
basic knowledge abot htmlbasic knowledge abot html
basic knowledge abot html
Ankit Dubey
 
Html and css
Html and cssHtml and css

Similar to Html (20)

Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)Web Developement Workshop (Oct 2009 -Day 1)
Web Developement Workshop (Oct 2009 -Day 1)
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Session3 part2
Session3 part2Session3 part2
Session3 part2
 
HTML
HTMLHTML
HTML
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
v4-html-table-210321161424.pptx
v4-html-table-210321161424.pptxv4-html-table-210321161424.pptx
v4-html-table-210321161424.pptx
 
01 HTML-Tables-1.pptx
01 HTML-Tables-1.pptx01 HTML-Tables-1.pptx
01 HTML-Tables-1.pptx
 
Unit 1wt
Unit 1wtUnit 1wt
Unit 1wt
 
Html&css lesson 2
Html&css lesson 2Html&css lesson 2
Html&css lesson 2
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
 
Lecture-4.pptx
Lecture-4.pptxLecture-4.pptx
Lecture-4.pptx
 
Getting into HTML
Getting into HTMLGetting into HTML
Getting into HTML
 
Form & frame
Form & frameForm & frame
Form & frame
 
Web technology
Web technologyWeb technology
Web technology
 
HTML Basic
HTML BasicHTML Basic
HTML Basic
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
 
Unit 2 (it workshop)
Unit 2 (it workshop)Unit 2 (it workshop)
Unit 2 (it workshop)
 
basic knowledge abot html
basic knowledge abot htmlbasic knowledge abot html
basic knowledge abot html
 
Html and css
Html and cssHtml and css
Html and css
 

Recently uploaded

June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
Jean Carlos Nunes Paixão
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
BhavyaRajput3
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
Anna Sz.
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
timhan337
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
Peter Windle
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
Pavel ( NSTU)
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 

Recently uploaded (20)

June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
 
Honest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptxHonest Reviews of Tim Han LMA Course Program.pptx
Honest Reviews of Tim Han LMA Course Program.pptx
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 

Html

  • 2. WHAT IS HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pages
  • 3. HTML TAGS  HTML markup tags are usually called HTML tags  HTML tags are keywords surrounded by angle brackets like <html>  HTML tags normally come in pairs like <b> and </b>  The first tag in a pair is the start tag, the second tag is the end tag  Start and end tags are also called opening tags and closing tags
  • 4. HTML DOCUMENT EXAMPLE <html> <body> This is my first paragraph. </body> </html>
  • 5. HTML DOCUMENT EXAMPLE <html> <head> <title>My First Web</title> </head> <body> This is my first paragraph. </body> </html>
  • 6. HTML HEADINGS <h1>This is a heading 1</h1> <h2>This is a heading 2</h2> <h3>This is a heading 3</h3> <h4>This is a heading 4</h4> <h5>This is a heading5</h5> <h6>This is a heading 6</h6>
  • 7. HTML LINES <h1>This is a heading</h1> <hr /> <h2>This is a heading</h2> <hr /> <h3>This is a heading</h3> <hr />
  • 8. HTML COMMENTS <!-- This is a comment -->
  • 9. HTML TEXT FORMATTING <b>Bold</b> <small>small</small> <i>Italic</i> <strong>Strong</strong> <u>Underline</u> <sub>subscript</sub> <big>big</big> <sup>superscript</sup>
  • 10. HTML LINE BREAKS <br> or <br />
  • 11. H T M L PA R A G R A P H S <p>This is a paragraph</p>
  • 12. H T M L < F O N T > TA G <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font>
  • 13. H T M L < C E N T E R > TA G <center>This text will be centered.</center>
  • 14. HTML LINKS  <a href="http://www spmmv.sch.lk/" target="_blank">Visit spmmv.sch.lk!</a>  <a href="page 01.html" target="_blank">Visit About Us </a>  <a href="C:Documents and SettingsAdministratorDesktopfirst.html" target="_blank">Click here to visit first page</a>
  • 15. HTML IMAGES <img src="boat.gif" alt="Big Boat" /> <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
  • 16. H T M L TA B L E S - 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>
  • 17. H T M L TA B L E S - 2 <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> </table>
  • 18. H T M L TA B L E S - 3 <table border="1“ bgcolor=“red” width=“50%” Align=“left”> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
  • 19. H T M L TA B L E S - 4 <table border="1“width=“50%” > <thead> <tr> <th>Month</th> </tr> </thead> <tbody> <tr><td>January</td></tr> <tr><td>February</td></tr> </tbody> <tfoot> <tr><th>Sum</th> </tr> </tfoot> </table>
  • 20. H T M L TA B L E S - 5 <table border="1"> <tr bgcolor=“red” align=“center”> <td width=“20%”>Header 1</td> <td width=“80%”>Header 2</td> </tr> <tr> <td align=“right” height=“50”>row 1, cell 1</td> <td valign=“top”>row 1, cell 2</td> </tr> </table>
  • 21. H T M L TA B L E S ‘ S PA N N I N G ’ – 6 <table border="1"> <tr> <td rowspan=“2”>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> <tr> <td colspan=“2”>row 2, cell 1</td> </tr> </table>
  • 22. H T M L TA B L E S ‘ PA D D I N G ’ - 7 <table border="1“ cellspacing=“15” cellpadding=“10”> <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>
  • 23. HTML LISTS  Unordered Lists <ul> <li>Coffee</li> <li>Milk</li> </ul>
  • 24. HTML LISTS  Ordered Lists <ol> <li>Coffee</li> <li>Milk</li> </ol>
  • 25. HTML LISTS Nested List <ol> <li>Flower</li> <ul> <li>red</li> <li>White</li> </ul> <li>Fruits</li> </ol>
  • 26. HTML LISTS  Definition Lists <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
  • 27. HTML FRAMES  Column frame <frameset cols="25%,75%"> <frame src="frame_a.html" /> <frame src="frame_b.html" /> </frameset>
  • 28. HTML FRAMES  Row frame <frameset rows="*,*"> <frame src="frame_a.html" /> <frame src="frame_b.html" /> </frameset>
  • 29. HTML FRAMES  Nesting frame <frameset cols="25%,75%"> <frame src="frame_a.html" /> <frameset rows="*,*"> <frame src="frame_a.html" /> <frame src="frame_b.html" /> </frameset>
  • 30. HTML I FRAMES <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
  • 31. HTML FORMS AND INPUT  HTML Forms <form> . input elements . </form>
  • 32. HTML FORMS AND INPUT  Text Fields <input type="text" />
  • 33. HTML FORMS AND INPUT  Password Field <input type="password" />
  • 34. HTML FORMS AND INPUT  Submit Button <input type="submit" />
  • 35. HTML FORMS AND INPUT  Submit Button <input type="submit" />