![Page 1: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/1.jpg)
![Page 2: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/2.jpg)
HTML INTRODUCTION
1. HTML first developed by TIM BERNERS LEE in 1991.
2. HTML describes the structure of Web pages using markup
3. HTML stands for Hyper Text Markup Language
4. Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.
HTML is a Markup Language tell a Web browser how to structure it to
display.
![Page 3: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/3.jpg)
HTML TAGS AND ELEMENTS
1. HEADING TAG
• Any document starts with a heading.
• You can use different sizes for your headings.
• HTML also has six levels of headings.
• Headings are defined with the <h1> to <h6>.
• <h1 defines the most important heading and <h6> defines the least
important heading.
Headings are defined with the <h1> to <h6> tags.Headings are defined with the <h1> to <h6> tags.
![Page 4: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/4.jpg)
HTML TAGS AND ELEMENTS
2. PARAGRAPH TAG
• <p> tag offers a way to structure your text into different paragraphs.
• Each paragraph of text should go in between an opening <p> and a closing </p>
tag.
3. LINE BREAK TAG
• <br> defines the line break without starting a new paragraph.
• <br> tag is an empty tag, which means that it has no end tag.
line break
The HTML <br> element defines a line break.The HTML <br> element defines a line break.
![Page 5: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/5.jpg)
HTML TAGS AND ELEMENTS
4. CENTER TAG
• <center> tag use to put any content in the center of the page .
5.HORIZONTAL TAG
• <hr/> tag are used to visually break-up sections of a document.
• <hr /> tag is an example of the empty element.
![Page 6: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/6.jpg)
FORMATTING ELEMENTS
• Formatting elements were designed to display special types of text like:
✓<b> tag for bold text
✓<strong> tag for strong text
✓<i> tag for italic text
✓<u>tag for underlined text
✓<mark> tag for marked/highlighted text
✓<small> tag for small text
![Page 7: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/7.jpg)
FORMATTING ELEMENTS
✓<ins>tag for inserted text
✓<del> tag for deleted tag
✓<sub> tag for subscript tag
✓<sup> tag for superscript tag
![Page 8: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/8.jpg)
HTML ATTRIBUTES
• Attributes provide additional information about HTML elements.
• Attributes are always specified in the start tag
• All attributes are made up of two parts − a name and a value
• The name is the property you want to set and the value is what you want
the value of the property to be set.
![Page 9: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/9.jpg)
HTML ATTRIBUTES
1. Id Attribute
• The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page.
• The id value can be used by CSS and JavaScript to perform certain tasks.
• In CSS, to select an element with a specific id, write a hash (#) character,
followed by the id of the element.
2. Src Attribute
• Specifies the URL (web address) for an image.
![Page 10: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/10.jpg)
HTML ATTRIBUTES3. Alt attribute
• Specifies an alternative text for an image, when the image cannot be displayed.
• Value of the attribute can be read by user.
4. href attribute
• Specifies the URL (web address) for a link.
• HTML link defined with <a> tag.
5. Width and height attribute
• Specifies the width and height of tables, images or table cells.
![Page 11: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/11.jpg)
HTML ATTRIBUTES
6. lang attribute
• Allow to indicate the main language used in a document.
• This attribute can be declared in <html> tag.
7.title attribute
• This tag gives a suggested title for the element.
• Title attribute is added to the <p> element.
• It displays the extra information about an element as a “tool tip”.
![Page 12: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/12.jpg)
8. Style attribute
• This attribute used to specify styling of an element like:
✓ background-color for background color
✓Color for text color
✓Font-size for text size etc
![Page 13: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/13.jpg)
COMMENT
• This tag used to insert comments in the HTML source code.
• Comments helps to understand code and increases code readability.
• Content placed within <!-- ... --> tags will be treated as comment and will
be completely ignored by the browser.
• HTML supports multi-line comments as well.
![Page 14: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/14.jpg)
HTML QUOTATIONS
• <abbr> tag for abbreviations.
• <address>tag for contact information.
• <cite> tag for work title.
• <q> tag for short inline quotation.
![Page 15: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/15.jpg)
Cascading Style Sheets (CSS)• CSS describes how HTML elements are to be displayed on screen, in prints
paper etc.
• CSS provide easy and effective alternatives to specify various attributes for the
HTML tags.
• Use CSS in three ways in your HTML document :
1) External Style Sheet- use external css file
2) Internal Style Sheet - use <style> tag in header section
3) Inline Style Sheet - use style attribute in HTML elements
![Page 16: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/16.jpg)
LINKS
• Links allow users to click their way from page to page.
• These links are known as hyperlinks.
• A link is specified using HTML tag <a>. This tag is called anchor tag
• Syntax: <a href="url">link text</a>
• A webpage can contain various links like (Text,Image,Email links)
![Page 17: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/17.jpg)
LINKS
• HTML Link- Colors
1) link: unvisited link is underlined and black
2) vlink: visited link is underlined and orange
3) alink: active link is underlined and purple
• HTML Link-Titles
✓Title attribute specifies extra information (often shown as a tooltip text) when the mouse moves over element.
• HTML Link-Image
✓It's simple to use an image as hyperlink.
✓ Use an image inside hyperlink at the place of text
![Page 18: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/18.jpg)
LINKS• HTML Link –Target attributes
✓Target attribute specifies where to open the linked document.
✓Target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same frame
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame
![Page 19: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/19.jpg)
TABLES
• In HTML tables allow to arrange data like (text,images,links) into rows and
columns of cells.
• HTML table is defined with :
✓ <table> tag is used to create tables
✓<tr> tag is used to create table rows
✓<td>tag is used to create data cells.
✓<th>tag is used to create table header
By default, Tables headings are bold and centered
![Page 20: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/20.jpg)
TABLES• Table- Header, Body, and Footer
✓<thead> used to create a separate table header
✓<tbody> used to indicate the main body of the table
✓<tfoot> used to create a separate table footer
• Table-Height and Width
You can set a table width and height using width and height attributes
• Table - Adding a Border
Use the CSS border property to add a border to the table.
![Page 21: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/21.jpg)
TABLES
• Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders
• Table - Adding Border Spacing
Border spacing specifies the space between the cells.
• Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute
• Table - Cells that Span Many Rows
To make a cell span more than one column, use the rowspan attribute
![Page 22: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/22.jpg)
LISTS
• HTML offers three ways for specifying lists of information.
• Lists may contain −
✓<ul> An unordered list: collection of related items that have no sequence.
✓<ol> An ordered list: put items in a numbered list instead of bulleted
✓<dl> A definition list: where entries are listed like in a dictionary
• Each list item starts with the <li> tag.
![Page 23: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/23.jpg)
LISTS
• Unordered list: Type attribute
✓<ul type=“square”> Sets the list item marker to a square
✓<ul type=“circle”> Sets the list item marker to a circle
✓<ul type=“disc”> Sets the list item marker to a bullet
✓<ul type=“none”> The list items will not be marked
• Ordered list: Type attribute
✓<ol type="1“> The list items will be numbered with numbers
✓<ol type=“A”> The list items will be numbered with uppercase letters
✓<ol type=“a”> The list items will be numbered with lowercase letters
✓<ol type=“i” The list items will be numbered with lowercase roman numbers
![Page 24: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/24.jpg)
LISTS
• Definition Lists
• Definition List makes use of following three tags:
✓<dl> tag defines the description list
✓<dt> tag defines the term (name)
✓<dd> tag describes each term
![Page 25: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/25.jpg)
BLOCKS AND INLINE ELEMENTS
• All the HTML elements can be categorized into two categories :
a) Block Level Elements
b) Inline Elements
• The default display value for most elements is block or inline.
Block level elements
• A block-level element always starts on a new line and anything that follows
them appears on its own new line
• Block level elements are: <p>, <h1>, <ul>, <ol>, <dl>, <pre>, <hr
/,<address>, <div>
![Page 26: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/26.jpg)
BLOCKS AND INLINE ELEMENTS
Inline level Elements
• An inline element does not start on a new line and only takes up as much
width as necessary.
• Inline level elements are: <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>,
<big>, <small>, <li>, <ins>, <del>, <code>
![Page 27: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/27.jpg)
BLOCKS AND INLINE ELEMENTS
• HTML Grouping Tags
<div> tag defines a section in a document (block-level)
<span> tag defines a section in the document(line- level)
![Page 28: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/28.jpg)
![Page 29: HTML INTRODUCTION - DigiiMento · HTML INTRODUCTION 1. HTML first developed by TIM BERNERS LEE in 1991. 2. HTML describes the structure of Web pages using markup 3. HTML stands for](https://reader034.vdocuments.site/reader034/viewer/2022042606/5f86f114f3321f79b8133617/html5/thumbnails/29.jpg)