SlideShare a Scribd company logo
unitii.md 2023-10-17
1 / 25
LESSON NOTES
WEB PROGRAMMING
Subject Code:
3ZA
Year:
II
Semester:
III
Unit:
II
Syllabus
1. HTML - Introduction
2. Getting Started
3. Creating and saving an HTML document
4. Document Layout of HTML Page
5. HTML elements
6. Some other formatting Styles
7. Hypertext Links
HTML - Introduction
What is HTML?
unitii.md 2023-10-17
2 / 25
HTML Stands for HyperText Markup Language, where
HyperText stands for Link between web pages.
Markup Language means Text between tags that define the structure.
HTML is a markup language that is used to create web pages. It defines how the web page looks and
how to display content with the help of elements. It forms or defines the structure of our Web Page,
thus it forms or defines the structure of our Web Page. We must remember to save your file with .html
extension.
Applications of HTML
HTML is used for various purposes. Let us take a look at them
1. Web Pages Development HTML is famously used for creating web pages on the world wide web.
Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages.
Every page on the internet is written using HTML.
2. Navigating the Internet Navigating on the internet would have been quite a tedious task without
HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without
anchor tags, you would literally have to enter URL everytime. Using achor tags, you can also navigate
within a webpage.
3. Embedding Images and Videos HTML allows us to embed images and videos with ease and gives us
features to adjust height, position and even rendering type. You can adjust controls, thumbnails,
timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier
with the help of <video> tag.
4. Clinet-side storage HTML5 has made client-side storage possible using localStorage and IndexD due
to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and
characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward,
with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is
a larger and more capable client-side data store. With the user’s permission, the IndexDB database can
be enlarged.
5. Game development Although you cannot create complex high-end video games with HTML, the
<canvas> element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can
be run on browsers.
6. Data entry support With the usage of new HTML5 standards in all the latest browsers, developers can
simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several
new attributes for data-entry and validation purposes.
7. Interacting with Native APIs With the help of HTML, you can interact with your Operating system.
With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much
more.
Features of HTML
1. The learning curve is very easy (easy to modify)
2. Creating effective presentations
unitii.md 2023-10-17
3 / 25
3. Adding Links wherein we can add references
4. Can display documents on platforms like Mac, Windows, Linux, etc
5. Adding videos, graphics, and audios making it more attractive
6. Case insensitive language
HTML Editor
Simple editor: Notepad
Visual Studio Code
Notepad++
Atom
Best editor: Sublime Text
How does HTML work?
The average website includes several different HTML pages.
For instance, a home page, an about page, and a contact page would all have separate HTML files.
HTML documents are files that end with a .html or .htm extension.
A web browser reads the HTML file and renders its content so that internet users can view it.
All HTML pages have a series of HTML elements, consisting of a set of tags and attributes.
HTML elements are the building blocks of a web page.
A tag tells the web browser where an element begins and ends, whereas an attribute describes the
characteristics of an element.
The three main parts of an element are:
1. Opening tag – used to state where an element starts to take effect. The tag is wrapped with opening
and closing angle brackets. For example, use the start tag <p> to create a paragraph.
2. Content – this is the output that other users see.
3. Closing tag – the same as the opening tag, but with a forward slash before the element name. For
example, </p> to end a paragraph.
The combination of these three parts will create an HTML element:
<p>This is how you add a paragraph in HTML.</p>
Another critical part of an HTML element is its attribute, which has two sections – a name and attribute value.
The name identifies the additional information that a user wants to add, while the attribute value gives further
specifications.
For example, a style element adding the color purple and the font-family verdana will look like this:
<p style="color:purple;font-family:verdana">This is how you add a paragraph in
HTML.</p>
unitii.md 2023-10-17
4 / 25
Getting Started
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
You can declare all the elements
</body>
</html>
HTML Basic
<!DOCTYPE html>
Instruction to the browser about the HTML version.
<html>
1. Root element which acts as a container to hold all the code
2. The browser should know that this is an HTML document
3. Permitted content: One head tag followed by one body tag
<head>
1. Everything written here will never be displayed in the browser
2. It contains general information about the document
3. Title, definitions of CSS and script sheets
4. Metadata(information about the document)
<body>
1. Everything written here will be displayed in the browser
2. Contains text, images, links that can be achieved through tags
3. Examples:
- <p> This is our first paragraph. </p>
- <a href=”http://www.google.com”>Go To Google</a>
- <img src=”photo.jpg”>
HTML Comment
unitii.md 2023-10-17
5 / 25
Comments don’t render on the browser
Helps to understand our code better and makes it readable.
Helps to debug our code
Three ways to comment:
1. Single line
2. Multiple lines
3. Comment tag //Supported by IE
How Does HTML Work?
What are HTML tags?
Essentially, HTML tags are markers which tell the browser how the enclosed text should be displayed.
Here’s a simple example:
<b>This text should be bold.</b>
In this case, <b> and </b> are the HTML tags. They are marking the enclosed text as “bold”—hence, the
“markup” element of HTML. We’ll explain how to actually write tags in the next section.
Once the document is complete, the author saves it as a html file and opens it in their internet browser.
The browser then reads the file and follows the instructions to render the page in a certain way—as
provided by the HTML tags.
So, when you use the “bold” tags, you’re essentially telling the browser to display this sentence in bold:
<b>This text should be bold.</b>
When the browser reads this, it knows to display the sentence as described: This text should be bold. Of
course, the HTML tags themselves are not displayed in the browser (unless you make a mistake writing
them!).
Tags
HTML tags are written inside angle brackets, and tend to come in pairs—so, they consist of both an
opening and a closing tag.
For example, the <p> tag is used to indicate a new paragraph. The opening tag is written as follows:
<p>. After this tag, you write your paragraph. To finish, add your closing tag, which is the same as the
opening tag but with a forward slash. In this case, it would be: </p>.
A pair of tags with text enclosed is known as an element. Here are some examples of common HTML
elements and their corresponding tags:
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<b>This is a bold sentence</b>
<i>This is an italic sentence</i>
unitii.md 2023-10-17
6 / 25
Most HTML tags follow this open-and-closing pattern, but there are also some tags which only need an
opening tag to be valid. These are known as singleton tags, and include things like <br> to indicate a line
break, and <img> for including an image. The browser will understand and act on these tags without the need
for a closing tag.
Attributes
Attributes provide extra information about the text contained within the tags.
For example, if you wanted to hyperlink the phrase “my website” in your HTML document, you would
first use the tag pairs <a> and </a> to specify that the text should be linked.
To tell the browser where the text should be linked to—i.e. the link address—you use the href attribute.
Attributes, like the text, are always enclosed within the tags:
HTML: <a href=”https://www.google.com”>My website</a>
Most Used HTML Tags and HTML Elements
Block-Level Elements
A block-level element takes up the entire width of a page. It always starts a new line in the document. For
example, a heading element will be in a separate line from a paragraph element.
Every HTML page uses these three tags:
1. <html> tag is the root element that defines the whole HTML document.
2. <head> tag holds meta information such as the page’s title and charset.
3. <body> tag encloses all the content that appears on the page.
Other popular block-level tags include:
Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as
they move up to h6.
Paragraph tags – are all enclosed by using the <p> tag.
List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an
unordered list. Then, enclose individual list items using the <li> tag.
Inline Elements
An inline element formats the inner content of block-level elements, such as adding links and
emphasized strings.
Inline elements are most commonly used to format text without breaking the flow of the content.
For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in
italics.
Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s
destination:
<a href="https://example.com/">Click me!</a>
unitii.md 2023-10-17
7 / 25
Creating and saving an HTML document
unitii.md 2023-10-17
8 / 25
You can create your first HTML page by the following steps:
Step 1: Open the Text Editor
In this step, we have to open any text editor such as Notepad or Notepad++ for writing an HTML code. The
following image is the screenshot of the text editor (notepad++) for writing the HTML code.
Step 2: Type the HTML code.
In this step, we have to type the HTML code in the text editor. The HTML code is composed of various tags
and always begins with the opening tag of HTML and complete with the closing tag of HTML.
The following block describes the syntax for creating any HTML page:
<HTML>
<HEAD>
<!-- The Head tag is used to create a title of web page, CSS syntax for a web
page, and helps in written a JavaScript code. -->
</HEAD>
<BODY>
<!-- The Body tag is used to display the content on a web page, which is specified
between the body tag. -->
</BODY>
</HTML> <!-- It is the opening tag of any HTML -->
unitii.md 2023-10-17
9 / 25
In the above syntax, some important tags or elements are used, which are given below:
<HTML>: It is the opening tag of any HTML code.
<HEAD>: The Head tag is used to create a title of the web page, CSS syntax for a web page, and helps in
written a JavaScript code The <head> must be closed before the opening of <body> tag.
<BODY>: The Body tag is used to display the content or text on a web page, which is specified between
the body tag.-->
</HTML>: It is the Closing tag of any HTML code.
Example: The following example creates a simple HTML page as an example through which you can
understand easily:
<HTML> <!-- It is the opening tag of any HTML -->
<HEAD>
<!-- The Head tag is used to create a title of web page, CSS syntax for a web
page, and helps in written a JavaScript code. -->
<title> <!-- This tag is used to display the title of the Web Page -->
Simple HTML Page
</title>
<script>
<!-- This tag helps in written the JavaScript Code -->
</script>
<style>
/* This tag is used to create a Cascading Style Sheet for displaying the
attractive web page. */
</style>
</HEAD>
<BODY>
<center> <!-- This tag align the text as center -->
JavaTpoint
<!-- The Body tag is used to display the content on a web page which is specify
between the body tag. -->
</center>
</BODY>
</HTML>
Step 3: Save the HTML code.
After typing the complete HTML code, we have to save that file in a folder with .html extension. We can easily
save the html file by clicking on the File menu and then click on Save As option. After that, type the file name
with .html extension. The following screenshot describes how we save the above html code in a text editor.
unitii.md 2023-10-17
10 / 25
Step 4: Run the HTML file.
At the last step, we have to execute or run an HTML file from the location where we saved the file. The file will
run on a default browser. Consider the below output:
Document Layout of HTML Page
unitii.md 2023-10-17
11 / 25
HTML Layout
HTML layout refers to the way in which the content of a website is organized and structured. It makes the
website easy to navigate. For example,
HTML Layout Elements
There are various HTML Layout elements. They are as follows:
<header> tag
A <header> tag defines the document's header. For example,
<header>Programiz</header>
unitii.md 2023-10-17
12 / 25
<nav> tag
The <nav> tag represents a section of a page that links to other pages or to parts within the page.
<section> tag
The <section> tag in HTML represents a standalone section of content within a document.
<article> tag
The <article> tag in HTML represents a self-contained piece of content that can be reused.
<aside> tag
The <aside> tag is used to represent a portion of a document that is indirectly related to the main content. It
is most commonly used as a sidebar in the document.
<footer> tag
The HTML <footer> tag defines the footer of the HTML document or section.
<details> tag
The <details> tag provides additional details that the user can view or hide on demand. For example,
<details>
<summary>Click me</summary>
<p>Hidden content</p>
</details>
Example1
Let's create a simple layout using CSS.
<body>
<div class="box">
<section class="yellow">
</section>
<aside class="blue">
</aside>
unitii.md 2023-10-17
13 / 25
</div>
</body>
<style>
.box {
display: flex;
height: 200px;
}
.blue {
width:65%;
height: 200px;
background-color: blue;
}
.yellow {
width: 35%;
height: 200px;
background-color: yellow;
}
</style>
In the above example, we have created a <div> with a class box. Inside it, we have a <section> and an
<aside> element with class yellow and blue respectively. We have used CSS to arrange the elements.
Notice, the code,
.box {
display: flex;
height: 200px;
}
Here,
display: flex - arranges the box next to each other in a row
height: 200 px - sets the height to 200 pixels
unitii.md 2023-10-17
14 / 25
Then, we have also used CSS for the <div> with class blue and yellow.
.blue {
width:65%;
height: 200px;
background-color: blue;
}
.yellow {
width: 35%;
height: 200px;
}
Here,
width - sets the width of <div>
height - sets the height of <div>
background-color - sets the background color of <div>
Example2
Let's create a simple layout using CSS.
<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<article>
<h1>Home</h1>
<p>This is a home page.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
<style>
* {
box-sizing: border-box;
}
header {
background-color: lightblue;
unitii.md 2023-10-17
15 / 25
text-align: center;
padding: 2px;
font-size: 25px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
footer {
background-color: lightblue;
padding: 10px;
text-align: center;
color: white;
}
section::after {
content: "";
display: table;
clear: both;
}
</style>
unitii.md 2023-10-17
16 / 25
HTML elements
In HTML, an element is a section of an HTML document.
Some HTML elements represent visible components on a web page, such as text, images, or buttons,
while others denote different sections of the page or provide meta-information about the document.
"In the code itself, HTML elements are created with tags. An HTML tag consists of text between angle brackets
(<>)."
Most HTML elements consist of three parts:
1. The opening tag (or start tag) marks where the element’s content begins (<p> in the example above).
2. The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag is
identical to the opening tag with the addition of a forward slash (/) after the first angle bracket.
3. The content is placed between the element’s opening and closing tags (This is paragraph text. above).
unitii.md 2023-10-17
17 / 25
Empty HTML Elements
While most HTML elements are written with an opening and closing tag, some elements consist of a
single tag and do not have closing tags or content. These are called empty elements.
One empty element you’ll see often is the line break element, which adds a line break between text.
As you can see, simply using <br> creates the line break, no closing tag necessary. Other common
empty elements include <img> (image), <meta>, <link>, and <input>.
HTML Attributes
HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an
element that provides additional information about the element. An attribute may be optional or required.
HTML Element Nesting
HTML elements can also be placed inside of other elements — this is called nesting and is key to how
HTML documents are assembled.
Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested
inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the
paragraph element.
Block-Level Elements
A block-level element takes up the entire width of a page. It always starts a new line in the document. For
example, a heading element will be in a separate line from a paragraph element.
Every HTML page uses these three tags:
unitii.md 2023-10-17
18 / 25
1. <html> tag is the root element that defines the whole HTML document.
2. <head> tag holds meta information such as the page’s title and charset.
3. <body> tag encloses all the content that appears on the page.
Other popular block-level tags include:
Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as
they move up to h6.
Paragraph tags – are all enclosed by using the <p> tag.
List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an
unordered list. Then, enclose individual list items using the <li> tag.
Inline Elements
An inline element formats the inner content of block-level elements, such as adding links and
emphasized strings.
Inline elements are most commonly used to format text without breaking the flow of the content.
For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in
italics.
Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s
destination:
<a href="https://example.com/">Click me!</a>
Elements
<a>
Creates a link to another page or to a location in the current page.
<abbr>
Indicates an acronym or abbreviation of a longer word or phrase.
<acronym>
Creates text that will be displayed when hovered over.
<applet>
Used to embed Java applets in HTML documents but is no longer supported.
<audio>
Represents an interface for adding audio content to the page.
<b>
Used to draw attention to a section of text, usually rendered in boldface.
<basefont>
Used to be used to set the font of text. This is now deprecated.
<blink>
Used to make text flash on and off and is now obsolete, deprecated, and non-
unitii.md 2023-10-17
19 / 25
standard.
<blockquote>
Represents a section of a document which contains a longer quotation, usually
spanning multiple lines.
<br>
Represents a break in text. It is used when text needs to span multiple lines
rather than being in-line, such as in an address.
<button>
Represents a button meant to be clicked by the user.
<canvas>
Creates graphics and animations in the page for JavaScript and WebGL to interact
with
<center>
Displays its contents centered horizontally in the containing element. This is now
deprecated and CSS should be used instead.
<cite>
Represents a citation to a referenced work such as a book, a song, or a painting.
<code>
Represents source code contained in the text.
<datalist>
Displays pre-defined values to a user while typing into an input box.
<dd>
Describes details found inside a <dl> element. It usually comes with at least one
corresponding <dt> term tag.
<del>
Shows text that is to be removed from a document, usually rendered in strike-
through text.
<div>
Represents a generic division of content. It has no semantic meaning, but will
separate its contents from the rest of the document.
<dl>
Displays terms and details, commonly for metadata purposes.
<dt>
Describes a term found inside a <dl> tag. It usually comes with at least one
corresponding <dd> details tag.
<em>
Represents text which is emphasized. Browsers will show the enclosed text in
italics, by default."
<embed>
unitii.md 2023-10-17
20 / 25
Inserts external content such as a video, image, page, and more.
<font>
Used to be used to set the font characteristics of a text. This is now deprecated.
<form>
Represents an interface to collect and submit user supplied information. This can
include open ended text inputs, radio buttons, calendar information, and more.
<h1> - <h6>
Represents a text heading for a section of content, with <h1> being the highest
level of heading and <h6> being the lowest.
<head>
Represents a collection of metadata related to the current document. It is an
immediate child of the `<html>` element and may include other tags such as
<title>, <link>, <style>, and <script>.
<hr>
Represents a semantic, horizontal line break between text elements.
<html>
Represents the entire HTML document.
<i>
Used to set off HTML text for some reason, as idiomatic, technical, taxonomical
and so on. Typically rendered as italic.
<iframe>
Represents a container used to embed a second web page inside the current one. It
can be used for content from the same domain as the parent, or even from a second
domain.
<img>
Displays an image on the web page.
<input>
Creates an interactive element, usually used within a form to allow user input. It
can be used to make text boxes, color pickers, date pickers, and other UI
elements.
<kbd>
Emphasizes characters to look like keys on a keyboard.
<label>
Identifies captions for other elements in an HTML document.
<li>
Represents a single item in a list of items. It and the other list items must be
wrapped in an <ol>, <ul>, or <menu> tag.
<link>
Connects the current page with an external file.
unitii.md 2023-10-17
21 / 25
<menu>
Represents an unordered list of items with more semantic meaning than a regular ul
element.
<meta>
Represents an interface to provide metadata pertaining to the document. Metadata
is data that is used to describe the document that contains it.
<noscript>
Displays content within if JavaScript is disabled in the browser or not supported.
<object>
Represents an external resource such as an image, a nested browsing context, or
content to be handled by a browser plugin.
<ol>
Represents an ordered list of items.
<option>
Represents one option in a dropdown created by the select tag.
<output>
Displays the result of a calculation or user action.
<p>
Contains and displays a block of text that defines a paragraph.
<param>
Used to pass parameters to a resource defined in an object tag.
<picture>
Represents multiple possible image sources to be applied to different devices and
screen-sizes.
<q>
Used to represent a brief inline quotation.
<s>
Represents strike-through text that is no longer need, accurate, or correct.
<script>
Used to insert runnable code into a document, usually JavaScript. Can be used both
to include a script within the HTML document, or to load an external script from
another source.
<select>
Creates a drop-down list for the user to select from a number of option elements.
<source>
Represents an interface for adding source content to the page.
<span>
Used for grouping related text or elements for styling and scripting.
unitii.md 2023-10-17
22 / 25
<strong>
Used to identify text that is very important, or urgent.
<style>
Applies CSS styles to an HTML document.
<table>
Represents an interface for adding tabular data to the page. Tables are two
dimensional, made up of rows and columns, and can contain many types of content.
<textarea>
Displays multi-line plain-text input.
<track>
An HTML element that specifies subtitles, closed captioning, and other text files
for media elements.
<u>
Displays HTML text with a non-textual annotation. The default rendering of this is
a solid underline.
<ul>
Represents an unordered list of items.
<video>
Represents an interface for adding video content to the page.
Some other formatting Styles
HTML Formatting is a process of formatting text for better look and feel.
HTML provides us ability to format text without using CSS.
There are many formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined.
There are almost 14 options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
1. Physical tag: These tags are used to provide the visual appearance to the text.
2. Logical tag: These tags are used to add some logical or semantic value to the text.
Element name Description
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
unitii.md 2023-10-17
23 / 25
Element name Description
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
Hypertext Links
A link is an element that, when clicked, redirects the user to another web page.
Links are usually text-based, but they can also be an image or otherwise.
To create a link use the <a> tag -- this is called an anchor tag.
Syntax
The syntax for a link:
<a href="url">Link text</a>
The <a> tag defines an HTML link; a stands for anchor.
The href attribute defines the destination address (the URL or page the user will be taken to).
Link text is the visible part which will be displayed as a clickable text.
Note: Links are also known as hyperlinks -- there is no difference, they are the same.
Local Links
1. A local link points to a page on the same website -- i.e. the same domain.
2. Local links have a relative URL without the https://www.mysite.com part.
3. Most websites use local links almost exclusively.
unitii.md 2023-10-17
24 / 25
<p>
Please visit our <a href="/sql"> SQL Tutorial </a>
</p>
Note: Links that redirect to an external website are refered to as external links. The Google link above
is an example of an external link.
Link Colors
By default, a link will appear in these colors (all browsers support this):
An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.
Link target Attribute
The target attribute specifies where to open the linked page. It can be one of the following values:
VALUE DESCRIPTION
_self Opens the page in the same tab/window. This is the default.
_blank Opens the page in a new tab.
_parent Opens the page in the parent iframe. In the same iframe if there is no parent.
_top Opens the page in the topmost part of the iframe. In the same iframe if there is no topmost.
framename Opens the page in a named iframe.
Example
<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
Tip: If your web page is placed inside an iframe, you can use the target="_top" on the links to break
out of the iframe and show the target page in full browser window.
Creating Bookmark Anchors
You can also create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks
are especially helpful if you have a very long web page.
unitii.md 2023-10-17
25 / 25
Creating bookmarks is a two-step process: first add the id attribute on the element where you want to jump,
then use that id attribute value preceded by the hash sign (#) as the value of the href attribute of the <a> tag,
as shown in the following example:
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
Tip: You can even jump to a section of another web page by specifying the URL of that page along
with the anchor (i.e. #elementId) in the href attribute, for example, <a
href="mypage.html#topicA">Go to TopicA</a>.
Creating Download Links
You can also create the file download link in exactly the same fashion as placing text links. Just point the
destination URL to the file you want to be available for download.
In the following example we've created the download links for ZIP, PDF and JPG files.
<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>
Note: When you click a link that points to a PDF or image file, the file is not downloaded to your hard
drive directly. It will only open the file in your web browser. Further you can save or download it to
your hard drive on a permanent basis.
Ad

More Related Content

What's hot (20)

chapter-8-function-overloading.pdf
chapter-8-function-overloading.pdfchapter-8-function-overloading.pdf
chapter-8-function-overloading.pdf
study material
 
Javascript es6-ejercicios-resueltos-parte-2
Javascript es6-ejercicios-resueltos-parte-2Javascript es6-ejercicios-resueltos-parte-2
Javascript es6-ejercicios-resueltos-parte-2
josegmay
 
Pointers in C
Pointers in CPointers in C
Pointers in C
Kamal Acharya
 
Data types in python lecture (2)
Data types in python lecture (2)Data types in python lecture (2)
Data types in python lecture (2)
Ali ٍSattar
 
Basic i/o & file handling in java
Basic i/o & file handling in javaBasic i/o & file handling in java
Basic i/o & file handling in java
JayasankarPR2
 
Htmltag.ppt
Htmltag.pptHtmltag.ppt
Htmltag.ppt
anandha ganesh
 
Problem Solving Aspect of Swapping Two Integers using a Temporary Variable
Problem Solving Aspect of Swapping Two Integers using a Temporary VariableProblem Solving Aspect of Swapping Two Integers using a Temporary Variable
Problem Solving Aspect of Swapping Two Integers using a Temporary Variable
Saravana Priya
 
Functions in python
Functions in python Functions in python
Functions in python
baabtra.com - No. 1 supplier of quality freshers
 
Functions in Python
Functions in PythonFunctions in Python
Functions in Python
Shakti Singh Rathore
 
C++ tokens and expressions
C++ tokens and expressionsC++ tokens and expressions
C++ tokens and expressions
NabeelaNousheen
 
Templates in C++
Templates in C++Templates in C++
Templates in C++
Tech_MX
 
Constants Variables Datatypes by Mrs. Sowmya Jyothi
Constants Variables Datatypes by Mrs. Sowmya JyothiConstants Variables Datatypes by Mrs. Sowmya Jyothi
Constants Variables Datatypes by Mrs. Sowmya Jyothi
SowmyaJyothi3
 
Data members and member functions
Data members and member functionsData members and member functions
Data members and member functions
Harsh Patel
 
Listas y fecha en Python
Listas y fecha en PythonListas y fecha en Python
Listas y fecha en Python
Haylin Ellenes
 
Files in Python.pptx
Files in Python.pptxFiles in Python.pptx
Files in Python.pptx
Koteswari Kasireddy
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Anjan Banda
 
Programming Fundamentals Arrays and Strings
Programming Fundamentals   Arrays and Strings Programming Fundamentals   Arrays and Strings
Programming Fundamentals Arrays and Strings
imtiazalijoono
 
Python functions
Python functionsPython functions
Python functions
Prof. Dr. K. Adisesha
 
Memory allocation in c
Memory allocation in cMemory allocation in c
Memory allocation in c
Prabhu Govind
 
Polymorphism In c++
Polymorphism In c++Polymorphism In c++
Polymorphism In c++
Vishesh Jha
 
chapter-8-function-overloading.pdf
chapter-8-function-overloading.pdfchapter-8-function-overloading.pdf
chapter-8-function-overloading.pdf
study material
 
Javascript es6-ejercicios-resueltos-parte-2
Javascript es6-ejercicios-resueltos-parte-2Javascript es6-ejercicios-resueltos-parte-2
Javascript es6-ejercicios-resueltos-parte-2
josegmay
 
Data types in python lecture (2)
Data types in python lecture (2)Data types in python lecture (2)
Data types in python lecture (2)
Ali ٍSattar
 
Basic i/o & file handling in java
Basic i/o & file handling in javaBasic i/o & file handling in java
Basic i/o & file handling in java
JayasankarPR2
 
Problem Solving Aspect of Swapping Two Integers using a Temporary Variable
Problem Solving Aspect of Swapping Two Integers using a Temporary VariableProblem Solving Aspect of Swapping Two Integers using a Temporary Variable
Problem Solving Aspect of Swapping Two Integers using a Temporary Variable
Saravana Priya
 
C++ tokens and expressions
C++ tokens and expressionsC++ tokens and expressions
C++ tokens and expressions
NabeelaNousheen
 
Templates in C++
Templates in C++Templates in C++
Templates in C++
Tech_MX
 
Constants Variables Datatypes by Mrs. Sowmya Jyothi
Constants Variables Datatypes by Mrs. Sowmya JyothiConstants Variables Datatypes by Mrs. Sowmya Jyothi
Constants Variables Datatypes by Mrs. Sowmya Jyothi
SowmyaJyothi3
 
Data members and member functions
Data members and member functionsData members and member functions
Data members and member functions
Harsh Patel
 
Listas y fecha en Python
Listas y fecha en PythonListas y fecha en Python
Listas y fecha en Python
Haylin Ellenes
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
Anjan Banda
 
Programming Fundamentals Arrays and Strings
Programming Fundamentals   Arrays and Strings Programming Fundamentals   Arrays and Strings
Programming Fundamentals Arrays and Strings
imtiazalijoono
 
Memory allocation in c
Memory allocation in cMemory allocation in c
Memory allocation in c
Prabhu Govind
 
Polymorphism In c++
Polymorphism In c++Polymorphism In c++
Polymorphism In c++
Vishesh Jha
 

Similar to WEB PROGRAMMING bharathiar university bca unitII (20)

Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
VaibhavSingh887876
 
html -Hyper Text Markup Languagejjjjjjjjjjjjjjjjjjjjjjjjj
html -Hyper Text Markup Languagejjjjjjjjjjjjjjjjjjjjjjjjjhtml -Hyper Text Markup Languagejjjjjjjjjjjjjjjjjjjjjjjjj
html -Hyper Text Markup Languagejjjjjjjjjjjjjjjjjjjjjjjjj
NetajiGandi1
 
Html basics
Html basicsHtml basics
Html basics
Yernur Kassymbayev
 
Html basics
Html basicsHtml basics
Html basics
Zewaqar Khan
 
Html basics
Html basicsHtml basics
Html basics
Vivek Khandelwal
 
Html basics
Html basicsHtml basics
Html basics
Adityaroy110
 
Html basic file
Html basic fileHtml basic file
Html basic file
Md Mozaddidul Karim
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
Bhavani Testone
 
Html basics
Html basicsHtml basics
Html basics
Ashutosh Srivasatava
 
Html BASICS
Html BASICSHtml BASICS
Html BASICS
International College of Security Studies
 
Html basics
Html basicsHtml basics
Html basics
Adityaroy110
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
google
 
Html basics
Html basicsHtml basics
Html basics
Vjay Vijju
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
Hassan Nasir
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
FLYMAN TECHNOLOGY LIMITED
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
Vinay Vinnu
 
Html
HtmlHtml
Html
yugank_gupta
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
adelaticleanu
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
Durgadevi palani
 
Html basics
Html basicsHtml basics
Html basics
mcatahir947
 
Ad

Recently uploaded (20)

Causes of mortalities of eggs and spawn and remedies.pptx
Causes of mortalities of eggs and spawn and remedies.pptxCauses of mortalities of eggs and spawn and remedies.pptx
Causes of mortalities of eggs and spawn and remedies.pptx
anshumanmohanty9090
 
Influenza-Understanding-the-Deadly-Virus.pptx
Influenza-Understanding-the-Deadly-Virus.pptxInfluenza-Understanding-the-Deadly-Virus.pptx
Influenza-Understanding-the-Deadly-Virus.pptx
diyapadhiyar
 
Polymerase Chain Reaction (PCR).Poer Pint
Polymerase Chain Reaction (PCR).Poer PintPolymerase Chain Reaction (PCR).Poer Pint
Polymerase Chain Reaction (PCR).Poer Pint
Dr Showkat Ahmad Wani
 
Chromatography, types, techniques, ppt.pptx
Chromatography, types, techniques, ppt.pptxChromatography, types, techniques, ppt.pptx
Chromatography, types, techniques, ppt.pptx
Dr Showkat Ahmad Wani
 
Introduction to Mobile Forensics Part 1.pptx
Introduction to Mobile Forensics Part 1.pptxIntroduction to Mobile Forensics Part 1.pptx
Introduction to Mobile Forensics Part 1.pptx
Nivya George
 
Antonie van Leeuwenhoek- Father of Microbiology
Antonie van Leeuwenhoek- Father of MicrobiologyAntonie van Leeuwenhoek- Father of Microbiology
Antonie van Leeuwenhoek- Father of Microbiology
Anoja Kurian
 
Multydisciplinary Nature of Environmental Studies
Multydisciplinary Nature of Environmental StudiesMultydisciplinary Nature of Environmental Studies
Multydisciplinary Nature of Environmental Studies
Ashokrao Mane college of Pharmacy Peth-Vadgaon
 
Effect of nutrition in Entomophagous Insectson
Effect of nutrition in Entomophagous InsectsonEffect of nutrition in Entomophagous Insectson
Effect of nutrition in Entomophagous Insectson
JabaskumarKshetri
 
4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf
4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf
4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf
abayamargaug
 
Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...
Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...
Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...
Himarsha Jayanetti
 
amino compounds.pptx class 12_Govinda Pathak
amino compounds.pptx class 12_Govinda Pathakamino compounds.pptx class 12_Govinda Pathak
amino compounds.pptx class 12_Govinda Pathak
GovindaPathak6
 
RAPID DIAGNOSTIC TEST (RDT) overviewppt.pptx
RAPID DIAGNOSTIC TEST (RDT)  overviewppt.pptxRAPID DIAGNOSTIC TEST (RDT)  overviewppt.pptx
RAPID DIAGNOSTIC TEST (RDT) overviewppt.pptx
nietakam
 
whole ANATOMY OF EYE with eye ball .pptx
whole ANATOMY OF EYE with eye ball .pptxwhole ANATOMY OF EYE with eye ball .pptx
whole ANATOMY OF EYE with eye ball .pptx
simranjangra13
 
Polytene chromosomes. A Practical Lecture.pptx
Polytene chromosomes. A Practical Lecture.pptxPolytene chromosomes. A Practical Lecture.pptx
Polytene chromosomes. A Practical Lecture.pptx
Dr Showkat Ahmad Wani
 
Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...
Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...
Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...
Yasasi Abeysinghe
 
Quiz 3 Basic Nutrition 1ST Yearcmcmc.pptx
Quiz 3 Basic Nutrition 1ST Yearcmcmc.pptxQuiz 3 Basic Nutrition 1ST Yearcmcmc.pptx
Quiz 3 Basic Nutrition 1ST Yearcmcmc.pptx
NutriGen
 
APES 6.5 Presentation Fossil Fuels .pdf
APES 6.5 Presentation Fossil Fuels   .pdfAPES 6.5 Presentation Fossil Fuels   .pdf
APES 6.5 Presentation Fossil Fuels .pdf
patelereftu
 
Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...
Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...
Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...
Ali Raei
 
06-Molecular basis of transformation.pptx
06-Molecular basis of transformation.pptx06-Molecular basis of transformation.pptx
06-Molecular basis of transformation.pptx
LanaQadumii
 
Botany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdf
Botany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdfBotany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdf
Botany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdf
JseleBurgos
 
Causes of mortalities of eggs and spawn and remedies.pptx
Causes of mortalities of eggs and spawn and remedies.pptxCauses of mortalities of eggs and spawn and remedies.pptx
Causes of mortalities of eggs and spawn and remedies.pptx
anshumanmohanty9090
 
Influenza-Understanding-the-Deadly-Virus.pptx
Influenza-Understanding-the-Deadly-Virus.pptxInfluenza-Understanding-the-Deadly-Virus.pptx
Influenza-Understanding-the-Deadly-Virus.pptx
diyapadhiyar
 
Polymerase Chain Reaction (PCR).Poer Pint
Polymerase Chain Reaction (PCR).Poer PintPolymerase Chain Reaction (PCR).Poer Pint
Polymerase Chain Reaction (PCR).Poer Pint
Dr Showkat Ahmad Wani
 
Chromatography, types, techniques, ppt.pptx
Chromatography, types, techniques, ppt.pptxChromatography, types, techniques, ppt.pptx
Chromatography, types, techniques, ppt.pptx
Dr Showkat Ahmad Wani
 
Introduction to Mobile Forensics Part 1.pptx
Introduction to Mobile Forensics Part 1.pptxIntroduction to Mobile Forensics Part 1.pptx
Introduction to Mobile Forensics Part 1.pptx
Nivya George
 
Antonie van Leeuwenhoek- Father of Microbiology
Antonie van Leeuwenhoek- Father of MicrobiologyAntonie van Leeuwenhoek- Father of Microbiology
Antonie van Leeuwenhoek- Father of Microbiology
Anoja Kurian
 
Effect of nutrition in Entomophagous Insectson
Effect of nutrition in Entomophagous InsectsonEffect of nutrition in Entomophagous Insectson
Effect of nutrition in Entomophagous Insectson
JabaskumarKshetri
 
4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf
4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf
4. Chapter 4 - FINAL Promoting Inclusive Culture (2).pdf
abayamargaug
 
Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...
Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...
Infrastructure for Tracking Information Flow from Social Media to U.S. TV New...
Himarsha Jayanetti
 
amino compounds.pptx class 12_Govinda Pathak
amino compounds.pptx class 12_Govinda Pathakamino compounds.pptx class 12_Govinda Pathak
amino compounds.pptx class 12_Govinda Pathak
GovindaPathak6
 
RAPID DIAGNOSTIC TEST (RDT) overviewppt.pptx
RAPID DIAGNOSTIC TEST (RDT)  overviewppt.pptxRAPID DIAGNOSTIC TEST (RDT)  overviewppt.pptx
RAPID DIAGNOSTIC TEST (RDT) overviewppt.pptx
nietakam
 
whole ANATOMY OF EYE with eye ball .pptx
whole ANATOMY OF EYE with eye ball .pptxwhole ANATOMY OF EYE with eye ball .pptx
whole ANATOMY OF EYE with eye ball .pptx
simranjangra13
 
Polytene chromosomes. A Practical Lecture.pptx
Polytene chromosomes. A Practical Lecture.pptxPolytene chromosomes. A Practical Lecture.pptx
Polytene chromosomes. A Practical Lecture.pptx
Dr Showkat Ahmad Wani
 
Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...
Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...
Examining Visual Attention in Gaze-Driven VR Learning: An Eye-Tracking Study ...
Yasasi Abeysinghe
 
Quiz 3 Basic Nutrition 1ST Yearcmcmc.pptx
Quiz 3 Basic Nutrition 1ST Yearcmcmc.pptxQuiz 3 Basic Nutrition 1ST Yearcmcmc.pptx
Quiz 3 Basic Nutrition 1ST Yearcmcmc.pptx
NutriGen
 
APES 6.5 Presentation Fossil Fuels .pdf
APES 6.5 Presentation Fossil Fuels   .pdfAPES 6.5 Presentation Fossil Fuels   .pdf
APES 6.5 Presentation Fossil Fuels .pdf
patelereftu
 
Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...
Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...
Turkey Diseases and Disorders Volume 2 Infectious and Nutritional Diseases, D...
Ali Raei
 
06-Molecular basis of transformation.pptx
06-Molecular basis of transformation.pptx06-Molecular basis of transformation.pptx
06-Molecular basis of transformation.pptx
LanaQadumii
 
Botany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdf
Botany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdfBotany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdf
Botany-Finals-Patterns-of-Inheritance-DNA-Synthesis.pdf
JseleBurgos
 
Ad

WEB PROGRAMMING bharathiar university bca unitII

  • 1. unitii.md 2023-10-17 1 / 25 LESSON NOTES WEB PROGRAMMING Subject Code: 3ZA Year: II Semester: III Unit: II Syllabus 1. HTML - Introduction 2. Getting Started 3. Creating and saving an HTML document 4. Document Layout of HTML Page 5. HTML elements 6. Some other formatting Styles 7. Hypertext Links HTML - Introduction What is HTML?
  • 2. unitii.md 2023-10-17 2 / 25 HTML Stands for HyperText Markup Language, where HyperText stands for Link between web pages. Markup Language means Text between tags that define the structure. HTML is a markup language that is used to create web pages. It defines how the web page looks and how to display content with the help of elements. It forms or defines the structure of our Web Page, thus it forms or defines the structure of our Web Page. We must remember to save your file with .html extension. Applications of HTML HTML is used for various purposes. Let us take a look at them 1. Web Pages Development HTML is famously used for creating web pages on the world wide web. Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages. Every page on the internet is written using HTML. 2. Navigating the Internet Navigating on the internet would have been quite a tedious task without HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without anchor tags, you would literally have to enter URL everytime. Using achor tags, you can also navigate within a webpage. 3. Embedding Images and Videos HTML allows us to embed images and videos with ease and gives us features to adjust height, position and even rendering type. You can adjust controls, thumbnails, timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier with the help of <video> tag. 4. Clinet-side storage HTML5 has made client-side storage possible using localStorage and IndexD due to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward, with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is a larger and more capable client-side data store. With the user’s permission, the IndexDB database can be enlarged. 5. Game development Although you cannot create complex high-end video games with HTML, the <canvas> element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can be run on browsers. 6. Data entry support With the usage of new HTML5 standards in all the latest browsers, developers can simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several new attributes for data-entry and validation purposes. 7. Interacting with Native APIs With the help of HTML, you can interact with your Operating system. With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much more. Features of HTML 1. The learning curve is very easy (easy to modify) 2. Creating effective presentations
  • 3. unitii.md 2023-10-17 3 / 25 3. Adding Links wherein we can add references 4. Can display documents on platforms like Mac, Windows, Linux, etc 5. Adding videos, graphics, and audios making it more attractive 6. Case insensitive language HTML Editor Simple editor: Notepad Visual Studio Code Notepad++ Atom Best editor: Sublime Text How does HTML work? The average website includes several different HTML pages. For instance, a home page, an about page, and a contact page would all have separate HTML files. HTML documents are files that end with a .html or .htm extension. A web browser reads the HTML file and renders its content so that internet users can view it. All HTML pages have a series of HTML elements, consisting of a set of tags and attributes. HTML elements are the building blocks of a web page. A tag tells the web browser where an element begins and ends, whereas an attribute describes the characteristics of an element. The three main parts of an element are: 1. Opening tag – used to state where an element starts to take effect. The tag is wrapped with opening and closing angle brackets. For example, use the start tag <p> to create a paragraph. 2. Content – this is the output that other users see. 3. Closing tag – the same as the opening tag, but with a forward slash before the element name. For example, </p> to end a paragraph. The combination of these three parts will create an HTML element: <p>This is how you add a paragraph in HTML.</p> Another critical part of an HTML element is its attribute, which has two sections – a name and attribute value. The name identifies the additional information that a user wants to add, while the attribute value gives further specifications. For example, a style element adding the color purple and the font-family verdana will look like this: <p style="color:purple;font-family:verdana">This is how you add a paragraph in HTML.</p>
  • 4. unitii.md 2023-10-17 4 / 25 Getting Started HTML Skeleton <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> You can declare all the elements </body> </html> HTML Basic <!DOCTYPE html> Instruction to the browser about the HTML version. <html> 1. Root element which acts as a container to hold all the code 2. The browser should know that this is an HTML document 3. Permitted content: One head tag followed by one body tag <head> 1. Everything written here will never be displayed in the browser 2. It contains general information about the document 3. Title, definitions of CSS and script sheets 4. Metadata(information about the document) <body> 1. Everything written here will be displayed in the browser 2. Contains text, images, links that can be achieved through tags 3. Examples: - <p> This is our first paragraph. </p> - <a href=”http://www.google.com”>Go To Google</a> - <img src=”photo.jpg”> HTML Comment
  • 5. unitii.md 2023-10-17 5 / 25 Comments don’t render on the browser Helps to understand our code better and makes it readable. Helps to debug our code Three ways to comment: 1. Single line 2. Multiple lines 3. Comment tag //Supported by IE How Does HTML Work? What are HTML tags? Essentially, HTML tags are markers which tell the browser how the enclosed text should be displayed. Here’s a simple example: <b>This text should be bold.</b> In this case, <b> and </b> are the HTML tags. They are marking the enclosed text as “bold”—hence, the “markup” element of HTML. We’ll explain how to actually write tags in the next section. Once the document is complete, the author saves it as a html file and opens it in their internet browser. The browser then reads the file and follows the instructions to render the page in a certain way—as provided by the HTML tags. So, when you use the “bold” tags, you’re essentially telling the browser to display this sentence in bold: <b>This text should be bold.</b> When the browser reads this, it knows to display the sentence as described: This text should be bold. Of course, the HTML tags themselves are not displayed in the browser (unless you make a mistake writing them!). Tags HTML tags are written inside angle brackets, and tend to come in pairs—so, they consist of both an opening and a closing tag. For example, the <p> tag is used to indicate a new paragraph. The opening tag is written as follows: <p>. After this tag, you write your paragraph. To finish, add your closing tag, which is the same as the opening tag but with a forward slash. In this case, it would be: </p>. A pair of tags with text enclosed is known as an element. Here are some examples of common HTML elements and their corresponding tags: <h1>This is a heading</h1> <p>This is a paragraph</p> <b>This is a bold sentence</b> <i>This is an italic sentence</i>
  • 6. unitii.md 2023-10-17 6 / 25 Most HTML tags follow this open-and-closing pattern, but there are also some tags which only need an opening tag to be valid. These are known as singleton tags, and include things like <br> to indicate a line break, and <img> for including an image. The browser will understand and act on these tags without the need for a closing tag. Attributes Attributes provide extra information about the text contained within the tags. For example, if you wanted to hyperlink the phrase “my website” in your HTML document, you would first use the tag pairs <a> and </a> to specify that the text should be linked. To tell the browser where the text should be linked to—i.e. the link address—you use the href attribute. Attributes, like the text, are always enclosed within the tags: HTML: <a href=”https://www.google.com”>My website</a> Most Used HTML Tags and HTML Elements Block-Level Elements A block-level element takes up the entire width of a page. It always starts a new line in the document. For example, a heading element will be in a separate line from a paragraph element. Every HTML page uses these three tags: 1. <html> tag is the root element that defines the whole HTML document. 2. <head> tag holds meta information such as the page’s title and charset. 3. <body> tag encloses all the content that appears on the page. Other popular block-level tags include: Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as they move up to h6. Paragraph tags – are all enclosed by using the <p> tag. List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an unordered list. Then, enclose individual list items using the <li> tag. Inline Elements An inline element formats the inner content of block-level elements, such as adding links and emphasized strings. Inline elements are most commonly used to format text without breaking the flow of the content. For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in italics. Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s destination: <a href="https://example.com/">Click me!</a>
  • 7. unitii.md 2023-10-17 7 / 25 Creating and saving an HTML document
  • 8. unitii.md 2023-10-17 8 / 25 You can create your first HTML page by the following steps: Step 1: Open the Text Editor In this step, we have to open any text editor such as Notepad or Notepad++ for writing an HTML code. The following image is the screenshot of the text editor (notepad++) for writing the HTML code. Step 2: Type the HTML code. In this step, we have to type the HTML code in the text editor. The HTML code is composed of various tags and always begins with the opening tag of HTML and complete with the closing tag of HTML. The following block describes the syntax for creating any HTML page: <HTML> <HEAD> <!-- The Head tag is used to create a title of web page, CSS syntax for a web page, and helps in written a JavaScript code. --> </HEAD> <BODY> <!-- The Body tag is used to display the content on a web page, which is specified between the body tag. --> </BODY> </HTML> <!-- It is the opening tag of any HTML -->
  • 9. unitii.md 2023-10-17 9 / 25 In the above syntax, some important tags or elements are used, which are given below: <HTML>: It is the opening tag of any HTML code. <HEAD>: The Head tag is used to create a title of the web page, CSS syntax for a web page, and helps in written a JavaScript code The <head> must be closed before the opening of <body> tag. <BODY>: The Body tag is used to display the content or text on a web page, which is specified between the body tag.--> </HTML>: It is the Closing tag of any HTML code. Example: The following example creates a simple HTML page as an example through which you can understand easily: <HTML> <!-- It is the opening tag of any HTML --> <HEAD> <!-- The Head tag is used to create a title of web page, CSS syntax for a web page, and helps in written a JavaScript code. --> <title> <!-- This tag is used to display the title of the Web Page --> Simple HTML Page </title> <script> <!-- This tag helps in written the JavaScript Code --> </script> <style> /* This tag is used to create a Cascading Style Sheet for displaying the attractive web page. */ </style> </HEAD> <BODY> <center> <!-- This tag align the text as center --> JavaTpoint <!-- The Body tag is used to display the content on a web page which is specify between the body tag. --> </center> </BODY> </HTML> Step 3: Save the HTML code. After typing the complete HTML code, we have to save that file in a folder with .html extension. We can easily save the html file by clicking on the File menu and then click on Save As option. After that, type the file name with .html extension. The following screenshot describes how we save the above html code in a text editor.
  • 10. unitii.md 2023-10-17 10 / 25 Step 4: Run the HTML file. At the last step, we have to execute or run an HTML file from the location where we saved the file. The file will run on a default browser. Consider the below output: Document Layout of HTML Page
  • 11. unitii.md 2023-10-17 11 / 25 HTML Layout HTML layout refers to the way in which the content of a website is organized and structured. It makes the website easy to navigate. For example, HTML Layout Elements There are various HTML Layout elements. They are as follows: <header> tag A <header> tag defines the document's header. For example, <header>Programiz</header>
  • 12. unitii.md 2023-10-17 12 / 25 <nav> tag The <nav> tag represents a section of a page that links to other pages or to parts within the page. <section> tag The <section> tag in HTML represents a standalone section of content within a document. <article> tag The <article> tag in HTML represents a self-contained piece of content that can be reused. <aside> tag The <aside> tag is used to represent a portion of a document that is indirectly related to the main content. It is most commonly used as a sidebar in the document. <footer> tag The HTML <footer> tag defines the footer of the HTML document or section. <details> tag The <details> tag provides additional details that the user can view or hide on demand. For example, <details> <summary>Click me</summary> <p>Hidden content</p> </details> Example1 Let's create a simple layout using CSS. <body> <div class="box"> <section class="yellow"> </section> <aside class="blue"> </aside>
  • 13. unitii.md 2023-10-17 13 / 25 </div> </body> <style> .box { display: flex; height: 200px; } .blue { width:65%; height: 200px; background-color: blue; } .yellow { width: 35%; height: 200px; background-color: yellow; } </style> In the above example, we have created a <div> with a class box. Inside it, we have a <section> and an <aside> element with class yellow and blue respectively. We have used CSS to arrange the elements. Notice, the code, .box { display: flex; height: 200px; } Here, display: flex - arranges the box next to each other in a row height: 200 px - sets the height to 200 pixels
  • 14. unitii.md 2023-10-17 14 / 25 Then, we have also used CSS for the <div> with class blue and yellow. .blue { width:65%; height: 200px; background-color: blue; } .yellow { width: 35%; height: 200px; } Here, width - sets the width of <div> height - sets the height of <div> background-color - sets the background color of <div> Example2 Let's create a simple layout using CSS. <body> <header> <h2>Title</h2> </header> <section> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Learn HTML</a></li> <li><a href="#">About Us</a></li> </ul> </nav> <article> <h1>Home</h1> <p>This is a home page.</p> </article> </section> <footer> <p>Footer</p> </footer> </body> <style> * { box-sizing: border-box; } header { background-color: lightblue;
  • 15. unitii.md 2023-10-17 15 / 25 text-align: center; padding: 2px; font-size: 25px; color: white; } nav { float: left; width: 30%; height: 300px; background: #fff; padding: 20px; } nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; } footer { background-color: lightblue; padding: 10px; text-align: center; color: white; } section::after { content: ""; display: table; clear: both; } </style>
  • 16. unitii.md 2023-10-17 16 / 25 HTML elements In HTML, an element is a section of an HTML document. Some HTML elements represent visible components on a web page, such as text, images, or buttons, while others denote different sections of the page or provide meta-information about the document. "In the code itself, HTML elements are created with tags. An HTML tag consists of text between angle brackets (<>)." Most HTML elements consist of three parts: 1. The opening tag (or start tag) marks where the element’s content begins (<p> in the example above). 2. The closing tag (or end tag) marks the end of the element’s content (</p> above). The closing tag is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket. 3. The content is placed between the element’s opening and closing tags (This is paragraph text. above).
  • 17. unitii.md 2023-10-17 17 / 25 Empty HTML Elements While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or content. These are called empty elements. One empty element you’ll see often is the line break element, which adds a line break between text. As you can see, simply using <br> creates the line break, no closing tag necessary. Other common empty elements include <img> (image), <meta>, <link>, and <input>. HTML Attributes HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an element that provides additional information about the element. An attribute may be optional or required. HTML Element Nesting HTML elements can also be placed inside of other elements — this is called nesting and is key to how HTML documents are assembled. Going back to our <p> example, let’s see how an anchor element, which creates a hyperlink, is nested inside paragraph text. Here, the anchor element is placed between the opening and closing tags of the paragraph element. Block-Level Elements A block-level element takes up the entire width of a page. It always starts a new line in the document. For example, a heading element will be in a separate line from a paragraph element. Every HTML page uses these three tags:
  • 18. unitii.md 2023-10-17 18 / 25 1. <html> tag is the root element that defines the whole HTML document. 2. <head> tag holds meta information such as the page’s title and charset. 3. <body> tag encloses all the content that appears on the page. Other popular block-level tags include: Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as they move up to h6. Paragraph tags – are all enclosed by using the <p> tag. List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an unordered list. Then, enclose individual list items using the <li> tag. Inline Elements An inline element formats the inner content of block-level elements, such as adding links and emphasized strings. Inline elements are most commonly used to format text without breaking the flow of the content. For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in italics. Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s destination: <a href="https://example.com/">Click me!</a> Elements <a> Creates a link to another page or to a location in the current page. <abbr> Indicates an acronym or abbreviation of a longer word or phrase. <acronym> Creates text that will be displayed when hovered over. <applet> Used to embed Java applets in HTML documents but is no longer supported. <audio> Represents an interface for adding audio content to the page. <b> Used to draw attention to a section of text, usually rendered in boldface. <basefont> Used to be used to set the font of text. This is now deprecated. <blink> Used to make text flash on and off and is now obsolete, deprecated, and non-
  • 19. unitii.md 2023-10-17 19 / 25 standard. <blockquote> Represents a section of a document which contains a longer quotation, usually spanning multiple lines. <br> Represents a break in text. It is used when text needs to span multiple lines rather than being in-line, such as in an address. <button> Represents a button meant to be clicked by the user. <canvas> Creates graphics and animations in the page for JavaScript and WebGL to interact with <center> Displays its contents centered horizontally in the containing element. This is now deprecated and CSS should be used instead. <cite> Represents a citation to a referenced work such as a book, a song, or a painting. <code> Represents source code contained in the text. <datalist> Displays pre-defined values to a user while typing into an input box. <dd> Describes details found inside a <dl> element. It usually comes with at least one corresponding <dt> term tag. <del> Shows text that is to be removed from a document, usually rendered in strike- through text. <div> Represents a generic division of content. It has no semantic meaning, but will separate its contents from the rest of the document. <dl> Displays terms and details, commonly for metadata purposes. <dt> Describes a term found inside a <dl> tag. It usually comes with at least one corresponding <dd> details tag. <em> Represents text which is emphasized. Browsers will show the enclosed text in italics, by default." <embed>
  • 20. unitii.md 2023-10-17 20 / 25 Inserts external content such as a video, image, page, and more. <font> Used to be used to set the font characteristics of a text. This is now deprecated. <form> Represents an interface to collect and submit user supplied information. This can include open ended text inputs, radio buttons, calendar information, and more. <h1> - <h6> Represents a text heading for a section of content, with <h1> being the highest level of heading and <h6> being the lowest. <head> Represents a collection of metadata related to the current document. It is an immediate child of the `<html>` element and may include other tags such as <title>, <link>, <style>, and <script>. <hr> Represents a semantic, horizontal line break between text elements. <html> Represents the entire HTML document. <i> Used to set off HTML text for some reason, as idiomatic, technical, taxonomical and so on. Typically rendered as italic. <iframe> Represents a container used to embed a second web page inside the current one. It can be used for content from the same domain as the parent, or even from a second domain. <img> Displays an image on the web page. <input> Creates an interactive element, usually used within a form to allow user input. It can be used to make text boxes, color pickers, date pickers, and other UI elements. <kbd> Emphasizes characters to look like keys on a keyboard. <label> Identifies captions for other elements in an HTML document. <li> Represents a single item in a list of items. It and the other list items must be wrapped in an <ol>, <ul>, or <menu> tag. <link> Connects the current page with an external file.
  • 21. unitii.md 2023-10-17 21 / 25 <menu> Represents an unordered list of items with more semantic meaning than a regular ul element. <meta> Represents an interface to provide metadata pertaining to the document. Metadata is data that is used to describe the document that contains it. <noscript> Displays content within if JavaScript is disabled in the browser or not supported. <object> Represents an external resource such as an image, a nested browsing context, or content to be handled by a browser plugin. <ol> Represents an ordered list of items. <option> Represents one option in a dropdown created by the select tag. <output> Displays the result of a calculation or user action. <p> Contains and displays a block of text that defines a paragraph. <param> Used to pass parameters to a resource defined in an object tag. <picture> Represents multiple possible image sources to be applied to different devices and screen-sizes. <q> Used to represent a brief inline quotation. <s> Represents strike-through text that is no longer need, accurate, or correct. <script> Used to insert runnable code into a document, usually JavaScript. Can be used both to include a script within the HTML document, or to load an external script from another source. <select> Creates a drop-down list for the user to select from a number of option elements. <source> Represents an interface for adding source content to the page. <span> Used for grouping related text or elements for styling and scripting.
  • 22. unitii.md 2023-10-17 22 / 25 <strong> Used to identify text that is very important, or urgent. <style> Applies CSS styles to an HTML document. <table> Represents an interface for adding tabular data to the page. Tables are two dimensional, made up of rows and columns, and can contain many types of content. <textarea> Displays multi-line plain-text input. <track> An HTML element that specifies subtitles, closed captioning, and other text files for media elements. <u> Displays HTML text with a non-textual annotation. The default rendering of this is a solid underline. <ul> Represents an unordered list of items. <video> Represents an interface for adding video content to the page. Some other formatting Styles HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML. In HTML the formatting tags are divided into two categories: 1. Physical tag: These tags are used to provide the visual appearance to the text. 2. Logical tag: These tags are used to add some logical or semantic value to the text. Element name Description <b> This is a physical tag, which is used to bold the text written between it. <strong> This is a logical tag, which tells the browser that the text is important. <i> This is a physical tag which is used to make text italic.
  • 23. unitii.md 2023-10-17 23 / 25 Element name Description <em> This is a logical tag which is used to display content in italic. <mark> This tag is used to highlight text. <u> This tag is used to underline text written between it. <tt> This tag is used to appear a text in teletype. (not supported in HTML5) <strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5) <sup> It displays the content slightly above the normal line. <sub> It displays the content slightly below the normal line. <del> This tag is used to display the deleted content. <ins> This tag displays the content which is added <big> This tag is used to increase the font size by one conventional unit. <small> This tag is used to decrease the font size by one unit from base font size. Hypertext Links A link is an element that, when clicked, redirects the user to another web page. Links are usually text-based, but they can also be an image or otherwise. To create a link use the <a> tag -- this is called an anchor tag. Syntax The syntax for a link: <a href="url">Link text</a> The <a> tag defines an HTML link; a stands for anchor. The href attribute defines the destination address (the URL or page the user will be taken to). Link text is the visible part which will be displayed as a clickable text. Note: Links are also known as hyperlinks -- there is no difference, they are the same. Local Links 1. A local link points to a page on the same website -- i.e. the same domain. 2. Local links have a relative URL without the https://www.mysite.com part. 3. Most websites use local links almost exclusively.
  • 24. unitii.md 2023-10-17 24 / 25 <p> Please visit our <a href="/sql"> SQL Tutorial </a> </p> Note: Links that redirect to an external website are refered to as external links. The Google link above is an example of an external link. Link Colors By default, a link will appear in these colors (all browsers support this): An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red. Link target Attribute The target attribute specifies where to open the linked page. It can be one of the following values: VALUE DESCRIPTION _self Opens the page in the same tab/window. This is the default. _blank Opens the page in a new tab. _parent Opens the page in the parent iframe. In the same iframe if there is no parent. _top Opens the page in the topmost part of the iframe. In the same iframe if there is no topmost. framename Opens the page in a named iframe. Example <a href="/about-us.php" target="_top">About Us</a> <a href="https://www.google.com/" target="_blank">Google</a> <a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"> </a> Tip: If your web page is placed inside an iframe, you can use the target="_top" on the links to break out of the iframe and show the target page in full browser window. Creating Bookmark Anchors You can also create bookmark anchors to allow users to jump to a specific section of a web page. Bookmarks are especially helpful if you have a very long web page.
  • 25. unitii.md 2023-10-17 25 / 25 Creating bookmarks is a two-step process: first add the id attribute on the element where you want to jump, then use that id attribute value preceded by the hash sign (#) as the value of the href attribute of the <a> tag, as shown in the following example: <a href="#sectionA">Jump to Section A</a> <h2 id="sectionA">Section A</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> Tip: You can even jump to a section of another web page by specifying the URL of that page along with the anchor (i.e. #elementId) in the href attribute, for example, <a href="mypage.html#topicA">Go to TopicA</a>. Creating Download Links You can also create the file download link in exactly the same fashion as placing text links. Just point the destination URL to the file you want to be available for download. In the following example we've created the download links for ZIP, PDF and JPG files. <a href="downloads/test.zip">Download Zip file</a> <a href="downloads/masters.pdf">Download PDF file</a> <a href="downloads/sample.jpg">Download Image file</a> Note: When you click a link that points to a PDF or image file, the file is not downloaded to your hard drive directly. It will only open the file in your web browser. Further you can save or download it to your hard drive on a permanent basis.