Scribd
Upload
302 views

Introduction To Web Technology: Unit 3 HTML

The document provides an introduction to HTML (Hypertext Markup Language) including: - A brief history of HTML versions from 1991 to present. - How HTML is used to structure documents and format web pages using tags. - Common HTML elements like headings, paragraphs, links, and images are demonstrated with examples. - HTML attributes are described which provide additional information about elements.

Uploaded by

anagha2982
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
302 views

Introduction To Web Technology: Unit 3 HTML

The document provides an introduction to HTML (Hypertext Markup Language) including: - A brief history of HTML versions from 1991 to present. - How HTML is used to structure documents and format web pages using tags. - Common HTML elements like headings, paragraphs, links, and images are demonstrated with examples. - HTML attributes are described which provide additional information about elements.

Uploaded by

anagha2982
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 49

Introduction to Web

Technology
Unit 3 HTML
Introduction

 HTML stands for Hyper Text Markup Language, which is the most widely


used language on Web to develop web pages.
  HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995.
 HTML 4.01 was a major version of HTML and it was published in late 1999.
 Though HTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published in
2012.
Why HTML?

 HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers.
 Now, HTML is being widely used to format web pages with the help of different
tags available in HTML language.
 HTML is a MUST for students and working professionals to become a great
Software Engineer specially when they are working in Web Development
Domain.
Advantages of HTML

• Create Web site - You can create a website or customize an existing web
template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional web
designer, HTML and CSS designing is a must skill.
• Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
• Learn other languages - Once you understands the basic of HTML then other
related technologies like javascript, php, or angular are become easier to
understand.
Applications of HTML

• Web pages development - HTML is used to create pages which are rendered
over the web. Almost every page of web is having html tags in it to render its
details in browser.
• Internet Navigation - HTML provides tags which are used to navigate from one
page to another and is heavily used in internet navigation.
• Responsive UI - HTML pages now-a-days works well on all platform, mobile,
tabs, desktop or laptops owing to responsive design strategy.
• Offline support HTML pages once loaded can be made available offline on the
machine without any need of internet.
• Game development- HTML5 has native support for rich experience and is now
useful in gaming developent arena as well.
Simple HTML Document

 <!DOCTYPE html>
 <html>
 <head>
 <title>Page Title</title>
 </head>
 <body>
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>
 </body>
 </html>
Simple HTML Document

 Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML Tags

 <tagname>content goes here...</tagname>


• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted
before the tag name
HTML Versions

 Since the early days of the web, there have been many versions of HTML:

Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014
HTML Documents

 All HTML documents must start with a document type declaration: <!DOCTYPE
html>. The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and </body>. Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings and Paragraphs

 HTML headings are defined with the <h1> to <h6> tags.


 <h1> defines the most important heading. <h6> defines the least important
heading:
 Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
 HTML paragraphs are defined with the <p> tag:
 Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links

 HTML links are defined with the <a> tag:


<!DOCTYPE html>
<html>
<body>
 
<a href="https://www.google.com”>This is a link</a>
 
</body>
</html>
 The link's destination is specified in the href attribute.
 Attributes are used to provide additional information about HTML elements.
HTML Images

 HTML images are defined with the <img> tag.


 The source file (src), alternative text (alt), width, and height are provided as attributes:
 Example
 <img src="w3schools.jpg" alt=“google.com" width="104" height="142">
HTML Elements

 HTML Elements
 An HTML element usually consists of a start tag and end tag, with the content inserted in
between:
 <tagname>Content goes here...</tagname>
 The HTML element is everything from the start tag to the end tag:
 <p>My first paragraph.</p>
 Empty HTML Elements
 HTML elements with no content are called empty elements.
 <br> is an empty element without a closing tag (the <br> tag defines a line
break). Empty elements can be "closed" in the opening tag like this: <br />.
 HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
HTML Attributes

 All HTML elements can have attributes


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

 The width and height Attributes


 Images in HTML have a set of size attributes, which specifies the width and height
of the image: Example
 <img src="img_girl.jpg" width="500" height="600">
 The style Attribute
 The style attribute is used to specify the styling of an element, like color, font,
size etc. Example
 <p style="color:red">I am a paragraph</p>
HTML Attributes

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


<h1> defines the most important heading. <h6> defines the least
important heading. Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings
Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute:
Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Attributes

 HTML Horizontal Rules


 The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
 The <hr> element is used to separate content (or define a change) in an
HTML page: Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Source Code

 To find out, right-click in the page and select "View Page Source" (in Chrome)
or "View Source" (in IE), or similar in other browsers. This will open a window
containing the HTML source code of the page.
 Inspect an HTML Element:
 Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element"
to see what elements are made up of (you will see both the HTML and the CSS). You
can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Line Breaks

 The HTML <br> element defines a line break.


 Use <br> if you want a line break (a new line) without starting a new
paragraph:
 Example
 <p>This is<br>a paragraph<br>with line breaks.</p>
HTML <pre> element

 The HTML <pre> element defines preformatted text.


 The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
 Example
<pre>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Formatting Elements

 HTML also defines special elements for defining text with a special
meaning. HTML uses elements like <b> and <i> for formatting
output, like bold or italic text. Formatting elements were designed to
display special types of text:
Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text


HTML Comments

 You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
 Notice that there is an exclamation point (!) in the opening tag, but not in the closing
tag.
 Comments are not displayed by the browser, but they can help document your
HTML source code.
 With comments you can place notifications and reminders in
your HTML
HTML Colour

 HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
 Color Names
 In HTML, a color can be specified by using a color name:
 Tomato
 Orange
 DodgerBlue
 MediumSeaGreen
 Gray
 SlateBlue
 Violet
 LightGray
HTML Colour

 Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Hello</p>
 Text Color Example
<h1
style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">
Hello World.</p>
<p
style="color:MediumSeaGreen;
"> Hello World</p>
 Border Color Example
<h1 style="border:2px solid
Tomato;">Hello World</h1>
<h1 style="border:2px solid
DodgerBlue;">Hello
HTML Table

 An HTML table is defined with the <table> tag.


 Each table row is defined with the <tr> tag. A table header is defined with the
<th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.
 The <td> elements are the data containers of the table. They can contain all
sorts of HTML elements; text, images, lists, other tables, etc.
 Adding Border :
 If you do not specify a border for the table, it will be displayed without
borders.
 A border is set using the border property:
HTML Table

 Collapsed Border :
 If you want the borders to collapse into one border, add the border-collapse
property
 Cell padding
 Cell padding specifies the space between the cell content and its borders.
 If you do not specify a padding, the table cells will be displayed without
padding.
 To set the padding, use the padding property:
 Left align heading:
 By default, table headings are bold and centered.
 To left-align the table headings, use the text-align property
HTML Table

 Adding a Caption
 To add a caption to a table, use the <caption> tag
 A Special Style for One Table
 To define a special style for a special table, add an id attribute to the table
HTML Lists

 Unordered HTML 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
 nordered HTML List - Choose List Item Marker
 The list-style-type property is used to define the style of the list item marker
Value Description

  disc   Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

  square   Sets the list item marker to a square

none The list items will not be marked


HTML Lists

 Ordered HTML List


 An ordered list starts with the <ol> tag.
 Each list item starts with the <li> tag.
 The list items will be marked with numbers by default
 Ordered HTML List - The Type Attribute
 The type attribute of the <ol> tag, defines the type of the list item marker
HTML Description List

 HTML also supports description lists.


 A description list is a list of terms, with a description of each term.

 The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term
Block-Level Element

 A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
 The <div> element is a block-level element.
 Inline Elements
 An inline element does not start on a new line and only takes up as much width
as necessary.
 This is an inline <span> element inside a paragraph.
<div>

 The <div> element is often used as a container for other HTML elements.
 The <div> element has no required attributes, but both style and class are
common.
 When used together with CSS, the <div> element can be used to style
blocks of content:
 Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span>

 The <span> element is often used as a container for some text.


 The <span> element has no required attributes, but both style and class 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>
HTML class atrribute

 Using The class Attribute The class attribute specifies one or more class names for an
HTML element.
 The class name can be used by CSS and JavaScript to perform certain tasks for
elements with the specified class name.
HTML Iframe

 An iframe is used to display a web page within a web page.


 Iframe - Set Height and Width
 Use the height and width attributes to specify the size of the iframe.
 The attribute values are specified in pixels by default, but they can also be in percent
(like "80%").
 Iframe - Remove the Border
 By default, an iframe has a border around it.
 To remove the border, add the style attribute and use the border
property: Example
 <iframe src="demo_iframe.htm" style="border:none;"></iframe>
HTML Layouts

 Websites often display content in multiple columns (like a magazine or


newspaper).
 HTML5 offers new semantic elements that define the different parts of a web
page:
 • <header> - Defines a header for a document or a section
 • <nav> - Defines a container for navigation links
 • <section> - Defines a section in a document
 • <article> - Defines an independent self-contained article
 • <aside> - Defines content aside from the content (like a sidebar)
 • <footer> - Defines a footer for a document or a section
 • <details> - Defines additional details
 • <summary> - Defines a heading for the <details> element
HTML Form

 The HTML <form> element defines a form that is used to collect user input:
 <form>
 .
 form elements
 .
 </form>
 an HTML form contains form elements.
 Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
HTML Form

 The <input> Element


 The <input> element is the most important form element.
 The <input> element can be displayed in several ways, depending on the type
attribute. Here are some examples:
Type Description

  <input type="text">   Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of many


choices)

  <input   Defines a submit button (for submitting the form)


type="submit">
Image Mapping

 Image Map is a list of coordinates relating to a specific Image that allows users
to access different web pages by clicking on different areas of an Image.
 Elements required in Mapping an Image :
 There are three basic html elements which are required for creating a
mapped image.
1. Map : It is used to create a map of the image with clickable areas.
2. Image : It is used for the image source on which mapping is done.
3. Area : It is used within the map for defining clickable areas.
Image Mapping

 Steps to create a mapped image :


 Determining Image size :
 Determining the size of the image is very important because if the size of the
image is changed then the area coordinates will also require updation.
 Creating a map for overlaying the image :
 Determine the coordinates of the areas that you want to map :
 It can be done in three shapes which are rectangle, circle and polygon. Coordinates
can be found easily by using MS-Paint.
Image Mapping

 Server-side and client-side image maps


 The implementation of image maps requires the processing of the mouse click
coordinates in conjunction with knowing the image areas and their associated
hypertext links. The processing can take place in one of two places:
• On the server where the Web pages are stored.
• In the Web browser.
 Originally, the only option for processing image maps was to do so on the
server. However, later versions of HTML have added features allowing client-
side processing. Many people are now developing their new pages (and
updating older pages) to process image maps in the Web browser itself, thus
reducing the amount of processing required by the server.
Server-side image mapping

 Server-side image mapping uses images, .map files and CGI scripts. Often
server-side image maps use the Imagemap programme.
 The programme processing image maps needs to be on the server, usually in
the cgi-bin/ directory.
 The HREF attribute of server side imagemaps is always a hyperlink to the cgi-
bin directory:
<a href="/cgi-bin/imagemap/user_dir/image.map">
<img src="/user_dir/image.gif">
</a>
Server-side image mapping

 In fact, the HREF path can sometimes be interpreted as a combination of two paths:
 The location of the "imagemap" programme, such as /cgi-bin/imagemap
 The location of the (coordinate) map for the image, user_dir/image.map. This
describes the various areas of the image.
 A major disadvantage of server-side image maps is that their implementation can
differ between different server systems. This means that the author of the website
using image maps needs to communicate closely with the Web server's administrator
to ensure that the maps work correctly.
 Since there are so many advantages to client-side imagemaps, and almost all
current browser versions support them, we shall not explore server-side image maps
further in this unit (although most image map programmes still provide features to
output/edit server-side map files).
Client-side image mapping

 Clients-side image maps have a number of advantages over server-side maps.


• Reduced server load, since the mapping is done on the client.
• There is no need to communicate with server side scripts.
• The user can see the image maps associated hypertext URLs in the status bar
of their browser before clicking.
JSON

 JSON or JavaScript Object Notation is a lightweight text-based open standard designed


for human-readable data interchange. JSON stands for JavaScript Object Notation.
• The format was specified by Douglas Crockford.
• It was designed for human-readable data interchange.
• It has been extended from the JavaScript scripting language.
• The filename extension is .json.
• JSON Internet Media type is application/json.
• The Uniform Type Identifier is public.json.
Uses of JSON

• It is used while writing JavaScript based applications that includes browser


extensions and websites.
• JSON format is used for serializing and transmitting structured data over
network connection.
• It is primarily used to transmit data between a server and web applications.
• Web services and APIs use JSON format to provide public data.
• It can be used with modern programming languages.
Characteristics of JSON

• JSON is easy to read and write.


• It is a lightweight text-based interchange format.
• JSON is language independent.

You might also like