HTML Introduction

HTML INTRODUCTION
@CVRCE
Introduction
What Is Html?
• HTML is the standard markup language for creating Web pages.
✓ Stands for hyper text markup language
✓ Describes the structure of web pages using markup
✓ Elements are the building blocks of HTML pages
✓ Elements are represented by tags
✓ Tags label pieces of content such as "heading", "paragraph", "table", and so on
✓ Browsers do not display the HTML tags, but use them to render the content of the page
@CVRCE
• Hypertext:
This provides a way to create a link between information of the same page as well as among different pages.
• Markup Language
Markup refers to the special tags that a part of the HTML document, which specify how the document content should be
displayed.
@CVRCE
HTML Versions
VERSION Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
@CVRCE
HTML 1.0
✓ The first version of HTML that supported inline images and text controls .
✓ you could not:
• use tables or frames,
• specify fonts
• change page background
• use forms
• Because of these limitations, every web page created with HTML 1.0 looked the same with similar background and
the type of font used.
@CVRCE
HTML 2.0
• This specification supported more browsers. HTML 2.0 was considerably improved to support:
• It also supported:
• forms with limited set of form elements such as text boxes, and option buttons
• change of page background
• use of tables
HTML 3.2
• This version included support for creating tables and expanded options for form elements.
• This version also allowed web pages to include complex mathematical equations.
@CVRCE
HTML 4.01
• This version added support for style sheets and scripting ability for multimedia elements.
• It is focused on separating presentation styling information from the actual content by the use of style sheets.
• In HTML 4.0 with the use of style sheets, it is now possible to change the appearance/look of the website by changing
just the style sheet (s) itself.
• In comparison, in the earlier versions of HTML making the same changes for the entire website meant changing the
styling information in the individual pages!
@CVRCE
XHTML
• XHTML stands for EXtensible HyperText Markup Language.
• The XHTML 1.0 is the first document type in the XHTML family.
• XHTML is almost similar to HTML 4.01 with only few differences.
• If you already know HTML, then you need to give little attention to learn this latest version of HTML.
• XHTML was developed by World Wide Web Consortium (W3C) to help web developers make the transition from HTML to
XML.
@CVRCE
Page Structure
<Html>
<Head>
<Title>
</Title>
</Head>
<Body>
<H1>this Heading Tag</H1>
<P> This Paragraph Tag</P>
</Body>
@CVRCE
Write HTML Using Notepad
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen-> Type Notepad.
Step 2: Write Some HTML
Write HTML into Notepad.
@CVRCE
Step 3: Save the HTML Page
Select File > Save as in the Notepad menu.
Step 4: View the HTML Page in Your Browser
@CVRCE
HTML Tags
Syntax:
<tagname>Content goes here...</tagname>
➢ Tags are instructions that are embedded directly into the text of a HTML document.
➢ Each HTML tag describes that the browser should do something instead of simply displaying the text.
➢ In HTML, the tags begin with (<) and end with (>)
➢ HTML tags can be of two types. They are
1. Paired Tags
2. Unpaired Tags
@CVRCE
@CVRCE
Paired Tags
A tag is said to be a paired tag if the text is placed between a tag and its companion tag.
In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag.
Example:
<P>Web Technologies</P>
Unpaired Tags
An unpaired tag does not have a companion tag. Unpaired tags are also known as Singular or Stand-Alone Tags.
Example
<br>
<hr>
@CVRCE
Exercises 1
Welcome to Gmail
Gmail
@CVRCE
HTML Headings
✓ Search engines use the headings to index the structure and content of your web pages.
✓ Headings are defined with the <h1> to <h6> tags.
Example:
@CVRCE
Style Attribute
✓ Use the style attribute for styling HTML elements
Syntax:
<tagname style="property:value;">
Property
✓ background-color for background color
✓ color for text colors
✓ font-family for text fonts
✓ font-size for text sizes
✓ text-align for text alignment
@CVRCE
HTML Background Color
The background-color property defines the background color for an HTML element.
Example:
@CVRCE
Html Text Color
@CVRCE
HTML Fonts
The font-family property defines the font to be used for an HTML element:
Example
@CVRCE
HTML Text Size
@CVRCE
HTML Text Alignment
@CVRCE
Text Formatting
Tag Description
<b> bold text
<em> emphasized text
<i> italic text
<small> smaller text
<strong> important text
<sub> subscripted text
<sup> superscripted text
<ins> inserted text
<del> deleted text
<mark> marked/highlighted text
@CVRCE
HTML Lists
• HTML offers web authors three ways for specifying of information on web page
• Lists may contain −
✓ An unordered list.
▪ This will list items using plain bullets.
✓ An ordered list.
▪ This will use different schemes of numbers to list your items.
✓ A Description List.
▪ This arranges your items in the same way as they are arranged in a dictionary.
@CVRCE
Unordered List
✓ An unordered list starts with the <ul> tag.
✓ Each list item starts with the <li> tag.
✓ The list items will be marked with bullets (small black circles) by default
@CVRCE
Unordered List - Choose List Item Marker
• The list-style-type property is used to define the style of the list item marker
Value Description
disc To a bullet (default)
circle To a circle
square To a square
none The list items will not be marked
@CVRCE
Example
@CVRCE
Text Books:
1. Beginning HTML, XHTML, CSS, and JavaScript, Jon Duckett, Wrox

Publications, 2010
2. Head First Servlets and JSP, 2nd Edition, Bryan Basham, Kathy
Sierra and Bert Bates, O’Reilly Media, 2008
3. Core Java Volume II: Advanced Features, Cay Horstmann and Gary
Cornell, 9th Edition,
Prentice Hall, 2013 (Only Chapter 4 for Database Programming)
@CVRCE
HTML Attributes
✓ Attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
✓ Type of attributes
• The href Attribute
• src Attribute
• The width and height Attributes
• The alt Attribute
@CVRCE
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute
Syntax:
<a href=“Address of site">Text</a>
Example
<a href="https://www.google.com">This is a link</a>
@CVRCE
Src Attribute and
✓ HTML images are defined with the <img> tag.
✓ The filename of the image source is specified in the src attribute
Syntax:
<img src=“location_name" width="500" height="600">
Example:
<img src="E:\co notes/img.jpg" width="500" height="600">
@CVRCE
The width and height Attributes
Syntax:
<img src=“location_name" width="500" height="600">
Example:
<img src="E:\co notes/img.jpg" width="500" height="600">
@CVRCE
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
Syntax:
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
@CVRCE
HTML Elements
HTML elements can be divided into two categories : block level and inline elements.
HTML block level
1. HTML block level elements can appear in the body of an HTML page.
2. It can contain another block level as well as inline elements.
3. By default, block-level elements begin on new lines.
4. block level elements create larger structures .
List of block level elements

• h1, h2, h3, h4, h5, h6
• div
• fieldset
• form
• table
@CVRCE
HTML inline elements
1. HTML inline level elements can appear in the body of an HTML page.
2. It can contain data and other inline elements.
3. By default, inline elements do not begin on new lines.
4. inline elements create shorter structures
List of inline elements

✓ b, big, i, small, tt
✓ a, bdo, br, img, map, object, q, script, span, sub, sup
✓ button, input, label, select, textarea
@CVRCE
Div Tag
✓ The HTML <div> tag is used to group the large section of HTML elements together.
✓ The div tag is generally used by web developers to group HTML elements together and apply CSS styles to many elements
at once.
✓ The <div> element has no required attributes, but style, class and id are common.
Example:
✓ If you wrap a set of paragraph elements into a div element so you can take the advantage of CSS styles and apply font style to
all paragraphs at once instead of coding the same style for each paragraph element.
@CVRCE
Syntax:
<div style=“property:value”>
<tag_name>some text</tag_name>
<tag_name>some text</tag_name>
</div>
Example:
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to New_gen, Here you will learn live to life better way.</p>
<p>This is second paragraph</p>
</div>
@CVRCE
The <span> Element
• The <span> element is often used as a container for some text.
• The <span> element has no required attributes, but style, class and id are common.
• When used together with CSS, the <span> element can be used to style parts of the text
Example:
<h1>My <span style="color:red">Important</span> Heading</h1>
@CVRCE
Image Map Element
✓ image maps are still a valuable way to display complex sets of links
✓ used to create navigation menus on lots of websites
✓ The basic idea behind an image map is that you combine two different components:
▪ A map of defined linked areas
▪ An image
✓ In HTML the image and the clickable areas are coded separately.
✓ it appears that portions of the image itself are linked to different destination.
@CVRCE
HTML Elements Used to Create Image Maps
There are three HTML elements used to create image maps:
img:
specifies the location of the image to be included in the map.
map:
is used to create the map of clickable areas.
area:
is used within the map element to define the clickable areas.
@CVRCE
Syntax for img
<img src=“Path of image location " width="" height="" alt="" usemap=“map_name">
Syntax for map
<map name=“map_name">
List of area tags
</map>
Syntax for area
<area shape="rect" coords="" alt="Sun" href=“path of file">
@CVRCE
What is HTML5?
• HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers.
• It incorporates all features from earlier versions of HTML, including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to use.
• It is still a work in progress. No browsers have full HTML5 support.
New Elements in html5

<header>, <footer>, <article>, and <section>.
New semantic elements like :
New attributes of form elements like number: date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
@CVRCE
Html5 Page Structure
<header>
<nav>
<section>
<aside>
<article>
<Footer>
@CVRCE
What is New in HTML5?
▪ The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
▪ The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
@CVRCE
<header> Element
The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
@CVRCE
<nav> Element
• The <nav> element defines a set of navigation links.
• Notice that NOT all links of a document should be inside a <nav> element.
• The <nav> element is intended only for major block of navigation links.
Example
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>
@CVRCE
<section> Element
✓ The <section> element defines a section in a document.
✓ "A section is a thematic grouping of content, typically with a heading."
✓ A home page could normally be split into sections for introduction, content, and contact information.
Example:
<Section>
<dl> wwo</dl>
<dd> world web organization…………</dd>
</Section>
@CVRCE
<article> Element
✓ The <article> element specifies independent, self-contained content.
✓ An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
Examples of where an <article> element can be used:
• Forum post
• Blog post
• Newspaper article
Example
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
@CVRCE
Nesting <article> in <section> or Vice Versa?
• The <article> element specifies independent, self-contained content.
• The <section> element defines section in a document.
• Can we use the definitions to decide how to nest those elements?
• No, we cannot!
• So, on the Internet, you will find HTML pages with <section> elements containing <article> elements, and <article> elements
containing <sections> elements.
• You will also find pages with <section> elements containing <section> elements, and <article> elements containing <article>
elements.
• Example for a newspaper:
The sport articles in the sport section, may have a technical section in each article.
@CVRCE
<aside> Element
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
The aside content should be related to the surrounding content.
Example
<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
@CVRCE
<footer> Element
The <footer> element specifies a footer for a document or section.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information,
etc.
You may have several <footer> elements in one document.
Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
@CVRCE
Removed Elements in HTML5
• The following HTML4 elements have been removed in HTML5:
Removed Element Use Instead

<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, or <del>
<tt> CSS
@CVRCE
Migration from HTML4 to HTML5
HTML4 HTML5
<div id="header"> <header>
<div id=“menu"> <nav>
<div id=“content"> <section>
<div id=“article"> <article>
<div id=“footer"> <footer>
@CVRCE
New HTML5 API's (Application Programming Interfaces)
The most interesting new API's in HTML5 are:
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML Server-Sent Events
@CVRCE

HTML Introduction

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Introduction

Uploaded by

Copyright:

Available Formats

HTML INTRODUCTION

• HTML is the standard markup language for creating Web pages.

✓ Stands for hyper text markup language

✓ Describes the structure of web pages using markup

✓ Elements are the building blocks of HTML pages

✓ Elements are represented by tags

✓ Tags label pieces of content such as "heading", "paragraph", "table", and so on

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

✓ you could not:

• use tables or frames,

• change page background

• change of page background

• XHTML is almost similar to HTML 4.01 with only few differences.

<H1>this Heading Tag</H1>

<P> This Paragraph Tag</P>

Step 4: View the HTML Page in Your Browser

<tagname>Content goes here...</tagname>

➢ HTML tags can be of two types. They are

✓ Headings are defined with the <h1> to <h6> tags.

<b> bold text

<em> emphasized text

<i> italic text

<small> smaller text

<strong> important text

<sub> subscripted text

<sup> superscripted text

<ins> inserted text

<del> deleted text

<mark> marked/highlighted text

• Lists may contain −

▪ This will list items using plain bullets.

▪ This will use different schemes of numbers to list your items.

✓ Each list item starts with the <li> tag.

disc To a bullet (default)

none The list items will not be marked

1. Beginning HTML, XHTML, CSS, and JavaScript, Jon Duckett, Wrox

• All HTML elements can have attributes

• Attributes are always specified in the start tag

• Attributes usually come in name/value pairs like: name="value"

• The href Attribute

• The width and height Attributes

• The alt Attribute

<a href=“Address of site">Text</a>

<a href="https://www.google.com">This is a link</a>

✓ The filename of the image source is specified in the src attribute

<img src=“location_name" width="500" height="600">

<img src="E:\co notes/img.jpg" width="500" height="600">

<img src=“location_name" width="500" height="600">

<img src="E:\co notes/img.jpg" width="500" height="600">

HTML block level

2. It can contain another block level as well as inline elements.

3. By default, block-level elements begin on new lines.

4. block level elements create larger structures .

List of block level elements

2. It can contain data and other inline elements.

3. By default, inline elements do not begin on new lines.

4. inline elements create shorter structures

List of inline elements

✓ a, bdo, br, img, map, object, q, script, span, sub, sup

✓ button, input, label, select, textarea

<p>This is second paragraph</p>

<h1>My <span style="color:red">Important</span> Heading</h1>