Html

Raheescv
raheescv1992@gmail.com
www.facebook.com/raheescv
twitter.com/raheescv
in.linkedin.com/in/raheescv
09633155669
HTML Basics

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

HTML
• Hyper Text Markup Language
– The Language of Web Pages on the World Wide Web.
• Text formatting language.
• A simple markup languages.
– Markup:
 Embedded codes in documents
 Codes are called `tags’
 Codes
Describe the structure documents
Include instructions for processing

Structure of HTML
• All HTML documents start with <HTML> and end
with </HTML>
• Every HTML webpage has 2 sections which are denoted
by HTML tags
– <Head>
– <Body>
• 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
<Tagname>Content</Tagname>
• The browser does not display the HTML tags
• Tags are not case sensitive
• Tags order matters
• hallow Baabta

HTML page
• <!DOCTYPE HTML>
• <html>
• <head>
• <h1> <title>Baabtra World</title></h1>
• </head>
• <body>
• hallow baabtra
• </body>
• </html> show

• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>
HTML header

• <!DOCTYPE HTML>
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>
HTML body

HTML Head section
• This section always begins with <head> and ends with
</head>
• This section will not be visible in the body of the web
browser
• 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…
• example

HTML Paragraph tags
• HTML paragraphs are defined with the tag.
• example

Character formating
• Change the color and size of your text
• Align your text
• some examples are
 Bold 
 Italic 
 Underline

bold
 italicized
 underlined
 Samplesuperscript
 Samplesubscript
 strong
 emphasized
<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
<A href="http://www.google.com">Google</A>

HTML Elements
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
break
Empty elements are closed in the start tag
Most HTML elements can have attributes

HTML Attributes
Attributes provide additional information about the
element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

HTML Lists
• There is an easy way in HTML to have numbered,
unnumbered, and definition lists
•Unnumbered 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>.
–<ul>
•<li> list item 1
•<li> list item 2
•<li> list item 3
–</ul>

• Numbered lists:
• Here is the same list using a numbered list format:
– <ol>
• <li> list item 1
– </ol>
Here is how that list would display:
– 1. list item 1
– 2. list item 2
– 3. list item 3 Example

List Elements
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, ……

HTML Tables
• 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
cell.
– Headings in a table are defined with the <th> tag
• example

HTML Images
• 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

HTML Forms
• 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.
• example

HTML Special Characters
££British Pound
€€Euro
""Quotation Mark
¥¥Japanese Yen
——Em Dash
 Non-breaking Space
&&Ampersand
>>Greater Than
<<Less Than
™™Trademark Sign
®®Registered Trademark Sign
©©Copyright Sign
SymbolHTML EntitySymbol Name

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
@ baabtra.com
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,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Cafit Square,
Hilite Business Park,
Near Pantheerankavu,
Kozhikode
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com
Contact Us

Html

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Html

Semelhante a Html (20)

Mais de baabtra.com - No. 1 supplier of quality freshers

Mais de baabtra.com - No. 1 supplier of quality freshers (20)

Último

Último (20)

Html