SlideShare uma empresa Scribd logo
1 de 7
Baixar para ler offline
>>                                                                       MMD2093| FUNDAMENTAL OF WEB DESIGN


>>
                                                     HTML

What you need?

     1. A web browser
          A browser is the program that makes it possible to browse and open websites.
          E.g – Internet Explorer, Opera, Mozilla Firefox
     2. Simple text editor
        Notepad, Wordpad

What is HTML?

     1. Hyper is the opposite of linear. In the good old days - when a mouse was
        something the cat chased - computer programs ran linearly: when the
        program had executed one action it went to the next line and after that,
        the next line and so on. But HTML is different - you can go wherever you
        want and whenever you want. For example, it is not necessary to visit
        MSN.com before you visit HTML.net.
     2. Text is self-explanatory.
     3. Mark-up is what you do with the text. You are marking up the text the same
        way you do in a text editing program with headings, bullets and bold text
        and so on.
     4. Language is what HTML is. It uses many English words.




HTML Element

     1.   An HTML element starts with a start tag / opening tag
     2.   An HTML element ends with an end tag / closing tag
     3.   The element content is everything between the start and the end tag
     4.   Some HTML elements have empty content
     5.   Empty elements are closed in the start tag
     6.   Most HTML elements can have attributes




                                     Start Tag




                                            Empty Element

                                             End Tag




                                       Khairul Noor Azwa binti Kamarudin                                  I
                        Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
>>                                                                       MMD2093| FUNDAMENTAL OF WEB DESIGN


HTML Attributes

     1.   HTML elements can have attributes
     2.   Attributes provide additional information about an element
     3.   Attributes are always specified in the start tag
     4.   Attributes come in name/value pairs like: name="value"




                                                       Attributes




Attribute        Value                       Description
class            classname                   Specifies a classname for an element
id               id                          Specifies a unique id for an element
style            style_definition            Specifies an inline style for an element
title            text                        Specifies extra information about an element

Example for Title attribute




Example for Style attribute




                                       Khairul Noor Azwa binti Kamarudin                                  II
                        Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
>>                                                                   MMD2093| FUNDAMENTAL OF WEB DESIGN

Example for Class attribute




Example for ID attribute




HTML Element

Tag             Description
<!--...-->      Defines a comment
<!DOCTYPE>      Defines the document type
<a>             Defines an anchor
<abbr>          Defines an abbreviation
<acronym>       Defines an acronym
<address>       Defines contact information for the author/owner of a
                document
<applet>        Deprecated. Defines an embedded applet
<area />        Defines an area inside an image-map
<b>             Defines bold text
<base />        Defines a default address or a default target for all links on


                                   Khairul Noor Azwa binti Kamarudin                                 III
                    Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
>>                                                                  MMD2093| FUNDAMENTAL OF WEB DESIGN


               a page
<basefont />   Deprecated. Defines a default font, color, or size for the
               text in a page
<bdo>          Defines the text direction
<big>          Defines big text
<blockquote>   Defines a long quotation
<body>         Defines the document's body
<br />         Defines a single line break
<button>       Defines a push button
<caption>      Defines a table caption
<center>       Deprecated. Defines centered text
<cite>         Defines a citation
<code>         Defines computer code text
<col />        Defines attribute values for one or more columns in a table
<colgroup>     Defines a group of columns in a table for formatting
<dd>           Defines a description of a term in a definition list
<del>          Defines deleted text
<dfn>          Defines a definition term
<dir>          Deprecated. Defines a directory list
<div>          Defines a section in a document
<dl>           Defines a definition list
<dt>           Defines a term (an item) in a definition list
<em>           Defines emphasized text
<fieldset>     Defines a border around elements in a form
<font>         Deprecated. Defines font, color, and size for text
<form>         Defines an HTML form for user input
<frame />      Defines a window (a frame) in a frameset
<frameset>     Defines a set of frames
<h1> to <h6>   Defines HTML headings
<head>         Defines information about the document
<hr />         Defines a horizontal line
<html>         Defines an HTML document
<i>            Defines italic text
<iframe>       Defines an inline frame
<img />        Defines an image
<input />      Defines an input control
<ins>          Defines inserted text
<isindex>      Deprecated. Defines a searchable index related to a

                                  Khairul Noor Azwa binti Kamarudin                                 IV
                   Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
>>                                                                MMD2093| FUNDAMENTAL OF WEB DESIGN


             document
<kbd>        Defines keyboard text
<label>      Defines a label for an input element
<legend>     Defines a caption for a fieldset element
<li>         Defines a list item
<link />     Defines the relationship between a document and an
             external resource
<map>        Defines an image-map
<menu>       Deprecated. Defines a menu list
<meta />     Defines metadata about an HTML document
<noframes>   Defines an alternate content for users that do not support
             frames
<noscript>   Defines an alternate content for users that do not support
             client-side scripts
<object>     Defines an embedded object
<ol>         Defines an ordered list
<optgroup>   Defines a group of related options in a select list
<option>     Defines an option in a select list
<p>          Defines a paragraph
<param />    Defines a parameter for an object
<pre>        Defines preformatted text
<q>          Defines a short quotation
<s>          Deprecated. Defines strikethrough text
<samp>       Defines sample computer code
<script>     Defines a client-side script
<select>     Defines a select list (drop-down list)
<small>      Defines small text
<span>       Defines a section in a document
<strike>     Deprecated. Defines strikethrough text
<strong>     Defines strong text
<style>      Defines style information for a document
<sub>        Defines subscripted text
<sup>        Defines superscripted text
<table>      Defines a table
<tbody>      Groups the body content in a table
<td>         Defines a cell in a table
<textarea>   Defines a multi-line text input control
<tfoot>      Groups the footer content in a table


                                Khairul Noor Azwa binti Kamarudin                                 V
                 Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
>>                                                            MMD2093| FUNDAMENTAL OF WEB DESIGN


<th>      Defines a header cell in a table
<thead>   Groups the header content in a table
<title>   Defines the title of a document
<tr>      Defines a row in a table
<tt>      Defines teletype text
<u>       Deprecated. Defines underlined text
<ul>      Defines an unordered list
<var>     Defines a variable part of a text

Example

Font




Table




                            Khairul Noor Azwa binti Kamarudin                                 VI
             Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
>>                                                              MMD2093| FUNDAMENTAL OF WEB DESIGN

Image source




                              Khairul Noor Azwa binti Kamarudin                                VII
               Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak

Mais conteúdo relacionado

Semelhante a Html

Punit summer traning report.pdf
Punit summer traning report.pdfPunit summer traning report.pdf
Punit summer traning report.pdfAliFaramarz
 
INTRODUTION TO HTML.pptx
INTRODUTION TO HTML.pptxINTRODUTION TO HTML.pptx
INTRODUTION TO HTML.pptxHarshaJumde1
 
chapter-17-web-designing2.pdf
chapter-17-web-designing2.pdfchapter-17-web-designing2.pdf
chapter-17-web-designing2.pdfstudy material
 
html5-tag-cheat-sheet-2019.pdf
html5-tag-cheat-sheet-2019.pdfhtml5-tag-cheat-sheet-2019.pdf
html5-tag-cheat-sheet-2019.pdfshwan it
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)GOPAL BASAK
 
Computer skills for web designing and video editing_Lab Manual.pdf
Computer skills for web designing and video editing_Lab Manual.pdfComputer skills for web designing and video editing_Lab Manual.pdf
Computer skills for web designing and video editing_Lab Manual.pdfBobby Murugesan
 
MTA html5 organization, input, and validation
MTA html5 organization, input, and validationMTA html5 organization, input, and validation
MTA html5 organization, input, and validationDhairya Joshi
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningRasan Samarasinghe
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1Sónia
 

Semelhante a Html (20)

Punit summer traning report.pdf
Punit summer traning report.pdfPunit summer traning report.pdf
Punit summer traning report.pdf
 
WEB DESIGNING.pdf
WEB DESIGNING.pdfWEB DESIGNING.pdf
WEB DESIGNING.pdf
 
Web designing
Web designingWeb designing
Web designing
 
html-tags.docx
html-tags.docxhtml-tags.docx
html-tags.docx
 
List of html tags
List of html tagsList of html tags
List of html tags
 
INTRODUTION TO HTML.pptx
INTRODUTION TO HTML.pptxINTRODUTION TO HTML.pptx
INTRODUTION TO HTML.pptx
 
Basic of HTML
Basic of  HTMLBasic of  HTML
Basic of HTML
 
chapter-17-web-designing2.pdf
chapter-17-web-designing2.pdfchapter-17-web-designing2.pdf
chapter-17-web-designing2.pdf
 
It8074 soa-unit i
It8074 soa-unit iIt8074 soa-unit i
It8074 soa-unit i
 
html5-tag-cheat-sheet-2019.pdf
html5-tag-cheat-sheet-2019.pdfhtml5-tag-cheat-sheet-2019.pdf
html5-tag-cheat-sheet-2019.pdf
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
 
Html Simple Tutorial
Html Simple TutorialHtml Simple Tutorial
Html Simple Tutorial
 
Computer skills for web designing and video editing_Lab Manual.pdf
Computer skills for web designing and video editing_Lab Manual.pdfComputer skills for web designing and video editing_Lab Manual.pdf
Computer skills for web designing and video editing_Lab Manual.pdf
 
MTA html5 organization, input, and validation
MTA html5 organization, input, and validationMTA html5 organization, input, and validation
MTA html5 organization, input, and validation
 
PPT-203105353-1.pdf
PPT-203105353-1.pdfPPT-203105353-1.pdf
PPT-203105353-1.pdf
 
It8074 soa-unit i
It8074 soa-unit iIt8074 soa-unit i
It8074 soa-unit i
 
it8074-soa-uniti-.pdf
it8074-soa-uniti-.pdfit8074-soa-uniti-.pdf
it8074-soa-uniti-.pdf
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
Xml Lecture Notes
Xml Lecture NotesXml Lecture Notes
Xml Lecture Notes
 

Mais de sephia17584 (20)

Test
TestTest
Test
 
Open book q
Open book qOpen book q
Open book q
 
Group ofdmg11
Group ofdmg11Group ofdmg11
Group ofdmg11
 
Mmd 2093 ch2
Mmd 2093 ch2Mmd 2093 ch2
Mmd 2093 ch2
 
Microsoft excel
Microsoft excelMicrosoft excel
Microsoft excel
 
Quiz 01 _dnm
Quiz 01 _dnmQuiz 01 _dnm
Quiz 01 _dnm
 
Dia
DiaDia
Dia
 
Intro toflash
Intro toflashIntro toflash
Intro toflash
 
Mmd2153 intro
Mmd2153 introMmd2153 intro
Mmd2153 intro
 
Mmd2093 2 4
Mmd2093 2 4Mmd2093 2 4
Mmd2093 2 4
 
Mmd2093
Mmd2093Mmd2093
Mmd2093
 
Latihan
LatihanLatihan
Latihan
 
Microsoft excel
Microsoft excelMicrosoft excel
Microsoft excel
 
Quiz 2 oa
Quiz 2 oaQuiz 2 oa
Quiz 2 oa
 
Itc2093 intro
Itc2093 introItc2093 intro
Itc2093 intro
 
Quiz 3
Quiz 3Quiz 3
Quiz 3
 
Quiz 2 _ MMD2093_2
Quiz 2 _ MMD2093_2Quiz 2 _ MMD2093_2
Quiz 2 _ MMD2093_2
 
Quiz 2 _ MMD2193
Quiz 2 _ MMD2193Quiz 2 _ MMD2193
Quiz 2 _ MMD2193
 
Treatment sample
Treatment sampleTreatment sample
Treatment sample
 
Rangkakerja sampel
Rangkakerja sampelRangkakerja sampel
Rangkakerja sampel
 

Último

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 

Último (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

Html

  • 1. >> MMD2093| FUNDAMENTAL OF WEB DESIGN >> HTML What you need? 1. A web browser A browser is the program that makes it possible to browse and open websites. E.g – Internet Explorer, Opera, Mozilla Firefox 2. Simple text editor Notepad, Wordpad What is HTML? 1. Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want. For example, it is not necessary to visit MSN.com before you visit HTML.net. 2. Text is self-explanatory. 3. Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on. 4. Language is what HTML is. It uses many English words. HTML Element 1. An HTML element starts with a start tag / opening tag 2. An HTML element ends with an end tag / closing tag 3. The element content is everything between the start and the end tag 4. Some HTML elements have empty content 5. Empty elements are closed in the start tag 6. Most HTML elements can have attributes Start Tag Empty Element End Tag Khairul Noor Azwa binti Kamarudin I Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
  • 2. >> MMD2093| FUNDAMENTAL OF WEB DESIGN HTML Attributes 1. HTML elements can have attributes 2. Attributes provide additional information about an element 3. Attributes are always specified in the start tag 4. Attributes come in name/value pairs like: name="value" Attributes Attribute Value Description class classname Specifies a classname for an element id id Specifies a unique id for an element style style_definition Specifies an inline style for an element title text Specifies extra information about an element Example for Title attribute Example for Style attribute Khairul Noor Azwa binti Kamarudin II Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
  • 3. >> MMD2093| FUNDAMENTAL OF WEB DESIGN Example for Class attribute Example for ID attribute HTML Element Tag Description <!--...--> Defines a comment <!DOCTYPE> Defines the document type <a> Defines an anchor <abbr> Defines an abbreviation <acronym> Defines an acronym <address> Defines contact information for the author/owner of a document <applet> Deprecated. Defines an embedded applet <area /> Defines an area inside an image-map <b> Defines bold text <base /> Defines a default address or a default target for all links on Khairul Noor Azwa binti Kamarudin III Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
  • 4. >> MMD2093| FUNDAMENTAL OF WEB DESIGN a page <basefont /> Deprecated. Defines a default font, color, or size for the text in a page <bdo> Defines the text direction <big> Defines big text <blockquote> Defines a long quotation <body> Defines the document's body <br /> Defines a single line break <button> Defines a push button <caption> Defines a table caption <center> Deprecated. Defines centered text <cite> Defines a citation <code> Defines computer code text <col /> Defines attribute values for one or more columns in a table <colgroup> Defines a group of columns in a table for formatting <dd> Defines a description of a term in a definition list <del> Defines deleted text <dfn> Defines a definition term <dir> Deprecated. Defines a directory list <div> Defines a section in a document <dl> Defines a definition list <dt> Defines a term (an item) in a definition list <em> Defines emphasized text <fieldset> Defines a border around elements in a form <font> Deprecated. Defines font, color, and size for text <form> Defines an HTML form for user input <frame /> Defines a window (a frame) in a frameset <frameset> Defines a set of frames <h1> to <h6> Defines HTML headings <head> Defines information about the document <hr /> Defines a horizontal line <html> Defines an HTML document <i> Defines italic text <iframe> Defines an inline frame <img /> Defines an image <input /> Defines an input control <ins> Defines inserted text <isindex> Deprecated. Defines a searchable index related to a Khairul Noor Azwa binti Kamarudin IV Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
  • 5. >> MMD2093| FUNDAMENTAL OF WEB DESIGN document <kbd> Defines keyboard text <label> Defines a label for an input element <legend> Defines a caption for a fieldset element <li> Defines a list item <link /> Defines the relationship between a document and an external resource <map> Defines an image-map <menu> Deprecated. Defines a menu list <meta /> Defines metadata about an HTML document <noframes> Defines an alternate content for users that do not support frames <noscript> Defines an alternate content for users that do not support client-side scripts <object> Defines an embedded object <ol> Defines an ordered list <optgroup> Defines a group of related options in a select list <option> Defines an option in a select list <p> Defines a paragraph <param /> Defines a parameter for an object <pre> Defines preformatted text <q> Defines a short quotation <s> Deprecated. Defines strikethrough text <samp> Defines sample computer code <script> Defines a client-side script <select> Defines a select list (drop-down list) <small> Defines small text <span> Defines a section in a document <strike> Deprecated. Defines strikethrough text <strong> Defines strong text <style> Defines style information for a document <sub> Defines subscripted text <sup> Defines superscripted text <table> Defines a table <tbody> Groups the body content in a table <td> Defines a cell in a table <textarea> Defines a multi-line text input control <tfoot> Groups the footer content in a table Khairul Noor Azwa binti Kamarudin V Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
  • 6. >> MMD2093| FUNDAMENTAL OF WEB DESIGN <th> Defines a header cell in a table <thead> Groups the header content in a table <title> Defines the title of a document <tr> Defines a row in a table <tt> Defines teletype text <u> Deprecated. Defines underlined text <ul> Defines an unordered list <var> Defines a variable part of a text Example Font Table Khairul Noor Azwa binti Kamarudin VI Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak
  • 7. >> MMD2093| FUNDAMENTAL OF WEB DESIGN Image source Khairul Noor Azwa binti Kamarudin VII Kolej Multimedia (Utara), Jalan Lumba Kuda, 34672 Taiping, Perak