Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
• Hyper Text Markup Language
– The Language of Web Pages on the World Wide Web.
• Text formatting language.
• A simple markup languages.
Embedded codes in documents
Codes are called `tags’
Describe the structure documents
Include instructions for processing
Structure of HTML
• All HTML documents start with <HTML> and end
• Every HTML webpage has 2 sections which are denoted
by HTML tags
• The Head section will always open & close before the
Body section opens
HTML Tag section
• HTML markup tags are usually called HTML tags
• Tags are written within angle brackets( < > )that describe
the way you want content to appear on a page
• The browser does not display the HTML tags
• Tags are not case sensitive
• Tags order matters
• <em><strong>hallow Baabta</strong></em>
HTML Head section
• This section always begins with <head> and ends with
• This section will not be visible in the body of the web
• The name of the webpage that appears in the title bar is
placed in this section
• Example: <title>My First Page</title>
HTML body section
• Information displayed in this section will be displayed in the body
of the web browser
• The closing body tag will always proceed the closing HTML tag.
HTML heading tags
• Inside the BODY element, heading elements H1 through
H6 are generally used for major divisions of the document
• H1: should be used as the highest level of heading
• H2 as the next highest,…..
• H6 is the smallest heading…
HTML Paragraph tags
• HTML paragraphs are defined with the <p> tag.
• Change the color and size of your text
• Align your text
• some examples are
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
HTML Hyperlink Tags
• HTML links are defined with the <a> tag.
• which is used to link from one page to another
• By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
An HTML element starts with a start tag / opening tag
and ends with an end tag / closing tag
The element content is everything between the start and
the end tag
Some HTML elements have empty content . Eg.line
Empty elements are closed in the start tag
Most HTML elements can have attributes
Attributes provide additional information about the
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
• There is an easy way in HTML to have numbered,
unnumbered, and definition lists
•Unnumbered lists are started with the <ul> tag, followed by
the actual list items, which are marked with the <li> tag. The
list is ended with the ending tag </ul>.
•<li> list item 1
•<li> list item 2
•<li> list item 3
• Numbered lists:
• Here is the same list using a numbered list format:
• <li> list item 1
• <li> list item 2
• <li> list item 3
Here is how that list would display:
– 1. list item 1
– 2. list item 2
– 3. list item 3 Example
TYPE Numbering Styles
1(default) Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
• Tables are defined with the <table> tag
• A table is divided into rows (with <tr> tag), andeach row
is divided into data cells (with <td> tag)
– where td stands for "table data," which is the content of a data
– Headings in a table are defined with the <th> tag
• Add images to your pages
• <IMG>This element defines a graphic image on the page.
Width (WIDTH): is the width of the image in pixels.
Height (HEIGHT): is the height of the image in pixels.
Border (BORDER): is for a border around the image,
specified in pixels
Alternate Text (ALT): This is a text field that describes an
image or acts as a label. It is displayed when they position the
cursor over a graphic image.
Alignment (ALIGN): This allows you to align the image on
your page. Example
• A form is an area that can contain form elements that
allow the user to enter information (like text fields,
textarea fields,radio buttons, checkboxes) in a form
• A form is defined with the <form> tag.
Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many contents online?
Do you want to learn things quickly?
Tired of spending huge amount of money to become a Software professional?
Do an online course
We put industry standards to practice. Our structured, activity based courses are so designed
to make a quick, good software professional out of anybody who holds a passion for coding.
Follow us @ twitter.com/baabtra
Like us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ slideshare.net/BaabtraMentoringPartner
Connect to us @ in.linkedin.com/in/baabtra
Give a feedback @ massbaab.com/baabtra
Thanks in advance
www.baabtra.com | www.massbaab.com |www.baabte.com
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Ph: + 91 – 495 40 25 550
Hilite Business Park,
Start up Village