SlideShare una empresa de Scribd logo
1 de 14
images and attributes
The <img> tag is used to embed an
image in an HTML page.
 Images are not technically inserted into a web page;
images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
 The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image, if the
image for some reason cannot be displayed
<img src="img_name.jpg" alt=“Name to display if image not loaded
" width="500" height="600">
How to add a hyperlink to an image:
<a href="https://www.google.com">
<img src=“imag_name.jpg" alt=“image name
" width="100" height="132">
</a>
Add image border
 <img src="smiley.gif" alt="Smiley
face" width="42" height="42" style="border:5p
x solid black">
Add left and right margins to
image
<img src="smiley.gif" alt="Smiley
face" width="42" height="42" style="vertical-
align:middle;margin:0px 50px">
HTML - Lists
HTML offers web authors three ways for specifying
lists of information. All lists must contain one or
more list elements. Lists may contain −
 <ul> − An unordered list. This will list items using
plain bullets.
 <ol> − An ordered list. This will use different
schemes of numbers to list your items.
 <dl> − A definition list. This arranges your items
in the same way as they are arranged in a
dictionary.
HTML Unordered Lists
 An unordered list is a collection of related items
that have no special order or sequence. This list
is created by using HTML <ul> tag. Each item in
the list is marked with a bullet.
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
•Beetroot
•Ginger
•Potato
•Radish
The type Attribute
You can use type attribute for <ul> tag to specify
the type of bullet you like. By default, it is a disc.
Following are the possible options −
 <ul type = "square">
 <ul type = "disc">
 <ul type = "circle">
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
HTML Ordered Lists
If you are required to put your items in a numbered
list instead of bulleted, then HTML ordered list will
be used. This list is created by using <ol> tag.
The numbering starts at one and is incremented
by one for each successive ordered list element
tagged with <li>.
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
1. Beetroot
2. Ginger
3. Potato
4. Radish
The type Attribute
You can use type attribute for <ol> tag to specify
the type of numbering you like. By default, it is a
number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
1. Beetroot
2. Ginger
3. Potato
4. Radish
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
A. Beetroot
B. Ginger
C. Potato
D. Radish
The start Attribute
 You can use start attribute for <ol> tag to specify
the starting point of numbering you need.
Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
HTML Definition Lists
 HTML supports a list style which is
called definition lists where entries are listed like
in a dictionary or encyclopedia. The definition list
is the ideal way to present a glossary, list of
terms, or other name/value list.
 Definition List makes use of following three tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

Más contenido relacionado

Similar a Lecture-3.pptx (8)

Html tags-chart
Html tags-chartHtml tags-chart
Html tags-chart
 
Html-list
Html-listHtml-list
Html-list
 
v3-html-list-210321161325.pdf
v3-html-list-210321161325.pdfv3-html-list-210321161325.pdf
v3-html-list-210321161325.pdf
 
Code HTML Lengkap
Code HTML LengkapCode HTML Lengkap
Code HTML Lengkap
 
Lesson-05.pptx
Lesson-05.pptxLesson-05.pptx
Lesson-05.pptx
 
Html3
Html3Html3
Html3
 
Html3
Html3Html3
Html3
 
Creating lists
Creating listsCreating lists
Creating lists
 

Más de vishal choudhary

Más de vishal choudhary (20)

SE-Lecture1.ppt
SE-Lecture1.pptSE-Lecture1.ppt
SE-Lecture1.ppt
 
SE-Testing.ppt
SE-Testing.pptSE-Testing.ppt
SE-Testing.ppt
 
SE-CyclomaticComplexityand Testing.ppt
SE-CyclomaticComplexityand Testing.pptSE-CyclomaticComplexityand Testing.ppt
SE-CyclomaticComplexityand Testing.ppt
 
SE-Lecture-7.pptx
SE-Lecture-7.pptxSE-Lecture-7.pptx
SE-Lecture-7.pptx
 
Se-Lecture-6.ppt
Se-Lecture-6.pptSe-Lecture-6.ppt
Se-Lecture-6.ppt
 
SE-Lecture-5.pptx
SE-Lecture-5.pptxSE-Lecture-5.pptx
SE-Lecture-5.pptx
 
XML.pptx
XML.pptxXML.pptx
XML.pptx
 
SE-Lecture-8.pptx
SE-Lecture-8.pptxSE-Lecture-8.pptx
SE-Lecture-8.pptx
 
SE-coupling and cohesion.ppt
SE-coupling and cohesion.pptSE-coupling and cohesion.ppt
SE-coupling and cohesion.ppt
 
SE-Lecture-2.pptx
SE-Lecture-2.pptxSE-Lecture-2.pptx
SE-Lecture-2.pptx
 
SE-software design.ppt
SE-software design.pptSE-software design.ppt
SE-software design.ppt
 
SE1.ppt
SE1.pptSE1.ppt
SE1.ppt
 
SE-Lecture-4.pptx
SE-Lecture-4.pptxSE-Lecture-4.pptx
SE-Lecture-4.pptx
 
SE-Lecture=3.pptx
SE-Lecture=3.pptxSE-Lecture=3.pptx
SE-Lecture=3.pptx
 
Multimedia-Lecture-Animation.pptx
Multimedia-Lecture-Animation.pptxMultimedia-Lecture-Animation.pptx
Multimedia-Lecture-Animation.pptx
 
MultimediaLecture5.pptx
MultimediaLecture5.pptxMultimediaLecture5.pptx
MultimediaLecture5.pptx
 
Multimedia-Lecture-7.pptx
Multimedia-Lecture-7.pptxMultimedia-Lecture-7.pptx
Multimedia-Lecture-7.pptx
 
MultiMedia-Lecture-4.pptx
MultiMedia-Lecture-4.pptxMultiMedia-Lecture-4.pptx
MultiMedia-Lecture-4.pptx
 
Multimedia-Lecture-6.pptx
Multimedia-Lecture-6.pptxMultimedia-Lecture-6.pptx
Multimedia-Lecture-6.pptx
 
Multimedia-Lecture-3.pptx
Multimedia-Lecture-3.pptxMultimedia-Lecture-3.pptx
Multimedia-Lecture-3.pptx
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Último (20)

80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 

Lecture-3.pptx

  • 2. The <img> tag is used to embed an image in an HTML page.  Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.  The <img> tag has two required attributes:  src - Specifies the path to the image  alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed <img src="img_name.jpg" alt=“Name to display if image not loaded " width="500" height="600">
  • 3. How to add a hyperlink to an image: <a href="https://www.google.com"> <img src=“imag_name.jpg" alt=“image name " width="100" height="132"> </a>
  • 4. Add image border  <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5p x solid black">
  • 5. Add left and right margins to image <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical- align:middle;margin:0px 50px">
  • 6. HTML - Lists HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −  <ul> − An unordered list. This will list items using plain bullets.  <ol> − An ordered list. This will use different schemes of numbers to list your items.  <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
  • 7. HTML Unordered Lists  An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. <body> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> •Beetroot •Ginger •Potato •Radish
  • 8. The type Attribute You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options −  <ul type = "square">  <ul type = "disc">  <ul type = "circle"> <body> <ul type = "square"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body>
  • 9. HTML Ordered Lists If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>. <body> <ol> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> 1. Beetroot 2. Ginger 3. Potato 4. Radish
  • 10. The type Attribute You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options − <ol type = "1"> - Default-Case Numerals. <ol type = "I"> - Upper-Case Numerals. <ol type = "i"> - Lower-Case Numerals. <ol type = "A"> - Upper-Case Letters. <ol type = "a"> - Lower-Case Letters.
  • 11. <body> <ol type = "1"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> 1. Beetroot 2. Ginger 3. Potato 4. Radish <body> <ol type = "A"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> A. Beetroot B. Ginger C. Potato D. Radish
  • 12. The start Attribute  You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options − <ol type = "1" start = "4"> - Numerals starts with 4. <ol type = "I" start = "4"> - Numerals starts with IV. <ol type = "i" start = "4"> - Numerals starts with iv. <ol type = "a" start = "4"> - Letters starts with d. <ol type = "A" start = "4"> - Letters starts with D.
  • 13. HTML Definition Lists  HTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.  Definition List makes use of following three tags. <dl> − Defines the start of the list <dt> − A term <dd> − Term definition </dl> − Defines the end of the list
  • 14. <body> <dl> <dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd> </dl> </body> HTML This stands for Hyper Text Markup Language HTTP This stands for Hyper Text Transfer Protocol