Scribd
Upload
42 views

Unit 1 HTML

B.SC NOTES

Uploaded by

SRI VIDYA VAHINI DEGREE COLLEGE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Unit 1 HTML

B.SC NOTES

Uploaded by

SRI VIDYA VAHINI DEGREE COLLEGE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

2023

WEB INTERFACE DESIGNING TECHNOLOGIES

5/9/2023
Unit - I
HTML
Introduction to web designing, difference between web applications and desktop applications, introduction to HTML, HTML
structure, elements, attributes, headings, paragraphs, styles, colours, HTML formatting, Quotations, Comments, images, tables, lists,
blocks and classes, HTML CSS, HTML frames, file paths, layout, symbols, HTML responsive.

What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications.
Let's see what is meant by Hypertext Markup Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link
which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text
document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be
identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static
web pages.
Advantages

 HTML is platform independent.


 It is freely available for use.
 It is case-insensitive.
 HTML is very easy to learn and use.
 It has features like tables and applets.

Disadvantages

 Dynamic web pages cannot be created using HTML.


 HTML does not have good security features.
 HTML does not pass information to web pages.
 Most of the browsers may not support all the tags of HTML.

Introduction To Web Designing:


 Web design is the planning and creation of websites.
 This includes a number of separate skills that all fall under the umbrella of web design.Some examples of these skills are
information architecture, user interface, site structure, navigation, layout, colors, fonts, and overall imagery.
 All of these skills are combined with the principles of design to create a website that meets the goals of the company or individual
from whom that site is being created.
This article will take a look at the basics of website design and the various disciplines or skills that are a part of this industry
Difference Between Web Applications And Desktop Applications:
DESKTOP APPS WEB APPS
They are accessible through web
They require installation on the computer to
browsers and do not require
run.
installation.
Generally, desktop apps do not require an Web apps cannot run without an
internet connection to run. internet connection.
They are accessible from anywhere
They are accessible only in the machine they and through any device with an
are installed in. internet connection and a web
browser.
They take space on the hard drive of the local They take up space on the remote
computer. server.
Deployment and updating are to be done Deployment and updating are done
individually on each computer. only on the server.
Web apps are hardware independent
They have strict hardware requirements for
and just require a web browser and
proper functionality.
internet connection to function.
As web apps are accessible to all
As they are confined to a device and single or
through the internet, they are less
limited users, they are highly secure.
secure than desktop apps.
Generally, they are faster than web Generally, they are slower than
applications. desktop applications.

Html Structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

HTML Elements
An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An
element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically,
an element is a collection of start tag, attributes, end tag, content between them.
Such as:
1. <p> Hello world!!! </p>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>
Test it Now

o All the content written between body elements are visible on web page.

HTML Attribute:

o HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the
HTML element.
o Each element or tag can have attributes, which defines the behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax
1. <element attribute_name="value">content</element>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>
Output:
The title attribute in HTML
Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link
or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with
paragraph tag and heading tag.
Example
With <h1> tag:

1. <h1 title="This is heading tag">Example of title attribute</h1>


With <p> tag:

1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
9.
10. </body>
11. </html>

Output:
The href attribute in HTML
Description: The href attribute is the main attribute of <a> anchor tag. This attribute gives the link address which is specified in that
link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.
Example
With link address:

1. <a href="https://www.javatpoint.com/html-anchor">This is a link</a>


The src Attribute
The src attribute is one of the important and required attribute of <img> element. It is source for the image which is required to
display on browser. This attribute can contain image in same directory or another directory. The image name or source should be
correct else browser will not display the image
Example
1. <img src="whitepeacock.jpg" height="400" width="600">
Output:
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place
the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the
number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the
least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.
See this example:

1. <h1>Heading no. 1</h1>


2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Heading elements</title>
5. </head>
6. <body>
7. <h1>This is main heading of page. </h1>
8. <p>h1 is the most important heading, which is used to display the keyword of page </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if
14. required.
15. </p>
16. </body>
17. </html>
HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a
notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new
paragraph.
See this example:

1. <p>This is first paragraph.</p>


2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,
10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13. </html>
Test it Now
Output:
HTML Formatting
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:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.
o Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting 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.

<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.

1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within
<b>............</b> element, is shown in bold letters.
See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>


2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in italic font, without any added importance. If you
write anything within <i>............</i> element, is shown in italic letters.
See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>


3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.
See this example:

1. <h2> I want to put a <mark> Mark</mark> on your face</h2>


Output:
I want to put a Mark on your face

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:

1. <p> <u>Write Your First Paragraph in underlined text.</u></p

Output:
Write Your First Paragraph in underlined text.

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin line which cross the
statement.
See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>


Output:
2. Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content within <tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because different letters have different width. (for example:
'w' is wider than 'i'). Monospaced Font provides similar space among every letter.
See this example:

1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>


Test it Now

Output:
Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript; means it is displayed half a character's height
above the other characters.
See this example:
1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Output:
Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed half a character's height
below the other characters.
See this example:

1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>


Output:
Hello Write Your First Paragraph in subscript.

9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.
See this example:

1. <p>Hello <del>Delete your first paragraph.</del></p>


Output:
Hello

10) Inserted Text


Anything that puts within <ins>..........</ins> is displayed as inserted text.
See this example:

1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>


Output:
Write another paragraph.

11) Larger Text


If you want to put your font size larger than the rest of the text then put the content within <big>.........</big>. It increase one font size
larger than the previous one.
See this example:

1. <p>Hello <big>Write the paragraph in larger font.</big></p

Output:
Hello Write the paragraph in larger font.
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the content within <small>.........</small>tag. It reduces one
font size than the previous one.
See this example:

1. <p>Hello <small>Write the paragraph in smaller font.</small></p>


Output:
Hello Write the paragraph in smaller font.

HTML Quotes:
HTML quotes are used to put a short quotation on your website. To do so, you need to use HTML q tag and HTML blockquote tag.

HTML q tag
HTML q tag is used to put small quotation. To do so, write your text within <q>.............</q> tag.

1. <p> Great quote on love and life.</p>


2. <p> Dr. Seuss once said : <q>Reality is finally better than your dreams.</q></p>
HTML Comments
 Comments are some text or code written in your code to give an explanation about the code, and not visible to the user.
Comments which are used for HTML file are known as HTML comments.
 Anything written between these tags will be ignored by the browser, so comments will not be visible on the webpage.
 Comments of any code make code easy to understand and increase readability of code.
 Comments are also part of the code, which gives an explanation of the code
Such as:

1. <!-- <p>There is some text</p>


2. <p>There is second text</p> -->
Example:
1. <!DOCTYPE html>
2. <html>
3. <!-- This is Header section -->
4. <head>
5. <!-- Internal CSS -->
6. <style>
7. body{
8. text-align: center;
9. background-color: #f0f8ff;
10. font-size: 30px;
11. color: red;
12. }
13. </style>
14. </head>
15.
16. <!-- This is body section, write code here which you want to display on web-page -->
17. <body>
18. <!-- heading tag -->
19. <h2>First WebPage</h2>
20.
21. <!-- Paragraph tag -->
22. <p>Write your Content here!!!</p>
23. </body>
24. </html>

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags
are not used in HTML image element.
Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>


2. <img src="good_morning.jpg" alt="Good Morning Friends"/>
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.
1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the
server.
The location of image may be on the same directory or another server.
2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in
words. The alt attribute is considered good for SEO prospective.
3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS
in place of width attribute.
4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now.
You should apply CSS in place of height attribute.
HTML Table:
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the page .
HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.


<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

Example:
1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

1) HTML Border attribute


You can use border attribute of table tag in HTML to specify border. But it is not recommended now.

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of
HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list
starts with <ol> tag and the list items start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with
<ul> tag and list items start with the <li> tag.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries
are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.
The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.


2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description
4. <dl>
5. <dt>Aries</dt>
6. <dd>-One of the 12 horoscope sign.</dd>
7. <dt>Bingo</dt>
8. <dd>-One of my evening snacks</dd>
9. <dt>Leo</dt>
10. <dd>-It is also an one of the 12 horoscope sign.</dd>
11. <dt>Oracle</dt>
12. <dd>-It is a multinational technology corporation.</dd>
13. </dl>
HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by
CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.)
character, followed by the name of the class for selecting elements.
A class attribute can be defined within <style> tag or in separate file using the (.) character.
In an HTML document, we can use the same class attribute name with different elements.
Defining an HTML class
To create an HTML class, firstly define style for HTML class using <style> tag within <head> section as following example
Example:
1. <head>
2. <style>
3. .headings{
4. color: lightgreen;
5. font-family: cursive;
6. background-color: black; }
7. </style>
8. </head>
We have define style for a class name "headings", and we can use this class name with any of HTML element in which we want to
provide such styling. We just need to follow the following syntax to use it.

1. <tag class="ghf"> content </tag>


Example 1:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .headings{
6. color: lightgreen;
7. font-family: cursive;
8. background-color: black; }
9. </style>
10. </head>
11. <body>
12. <h1 class="headings">This is first heading</h1>
13. <h2 class="headings">This is Second heading</h2>
14. <h3 class="headings">This is third heading</h3>
15. <h4 class="headings">This is fourth heading</h4>
16. </body>
17. </html>

Multiple Classes
You can use multiple class names (more than one) with HTML elements. These class names must be separated by a space.
Example:
Let's style elements with class name "fruit" and also with a class name "center".

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
5. background-color: orange;
6. color: white;
7. padding: 10px;
8. }
9.
10. .center {
11. text-align: center;
12. }
13. </style>
14. <body>
15.
16. <h2>Multiple Classes</h2>
17. <p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-
aligns the text.</p>
18.
19. <h2 class="fruit center">Mango</h2>
20. <h2 class="fruit">Orange</h2>
21. <h2 class="fruit">Apple</h2>
22.
23. </body>
24. </html>
HTML frames

 Frames are the sections created on the window.


 Each section can load a separate HTML document.
 The window is divided into frames in a similar way the tables are organized into rows and columns.
 Frames provide the facility to display multiple HTML document inside one browser window at a time.
 To create frames, we need <frameset> and <frame> tag.
1. <frameset> tag

 Collection of frames is called as frameset.


 If you are using frames on a page then use <frameset> tag instead of <body> tag.
 The rows attribute of <frameset> tag indicates horizontal frames and cols attribute indicates vertical frames.
Syntax:<frameset>...........</frameset>

<frameset> Tag Attributes:

Attributes Description

cols It specifies how many columns are to be contained in the frameset and the size of each column.
(Columns)

rows It works like the 'cols' attribute and takes the same values, but it is used to specify the number of rows in the
frameset.

border It specifies the width of the border of each frame in pixels. For example; border = “5”. A value of zero means no
border.

frame It specifies whether a three-dimensional border should be displayed between frames. It takes value either 1 (Yes)
or 0 (No). For example; frameborder = “0” specifies no border.

framespacing It specifies the amount of space between frames in a frameset. It can take any integer value. For example;
framespacing = “10” means there should be 10 pixels spacing between each frame.

2. <frame> tag
 <frame> tag is used to define a frame within a <frameset> tag.
 A frame should be used within a <frameset> tag.
Syntax:<frame src=”frm1.htm”>

<frame> Tag Attributes:

Attributes Description

src It is used to give the file name that should be located in the frame. Its value can be any URL, for example, src=
“/html/abc.html”
name It allows to give a name to a frame. This attribute is used to indicate that a document should be loaded into a
frame.

frameborder It specifies whether or not the borders of that frame are shown. This attribute overrides the value given in the
frameborder attribute on the <frameset> tag if one is given. This can take values either 1 (Yes) or 0 (No).

marginwidth It allows to specify the width of the space between the left and right of the frame's border and the content. The
value is given in pixels. For example; marginwidth = “10”.

marginheight It allows to specify the height of the space between the top and bottom of the frame's borders and its contents. The
value is given in pixels. For example; marginheight = “10”.

noresize By default, a user can resize any frame by clicking and dragging on the borders of a frame. It prevents a user from
being able to resize the frame. For example; noresize = “noresize”.

scrolling It controls the appearance of the scrollbars that appear on the frame. It takes values either “Yes”, “No” or “Auto”.
For example; scrolling = “no” means it should not have scroll bars.

longdesc It allows to provide a link to another page which contains a long description of the contents of the frame. For
example; longdesc = “framedescription.html”
Example: HTML Frame

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames Example</title>
</head>
<frameset cols="50%,50%">
<frame src="http://www.careerride.com/test-login.aspx" >
<frame src="http://careerride.com/" >
</frameset>
</html>
Output:
Create Vertical frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="frame1.html" >
8. <frame src="frame2.html">
9. <frame src="frame3.html">
10. </frameset>
11. </html>
Output:
Frame1.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #7fffd4;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is first frame</h2>
14. </div>
15. </body>
16. </html>
Frame2.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #2f4f4f;
7. height: 500px;
8.
9. }
10. </style>
11. </head>
12. <body>
13. <div>
14. <h2>This is Second frame</h2>
15. </div>
16. </body>
17. </html>
Frame3.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #c1ffc1;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is Third frame</h2>
14. </div>
15. </body>
16. </html>
Example 2:
Create Horizontal frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="frame1.html" >
8. <frame name="main" src="frame2.html">
9. <frame name="bottom" src="frame3.html">
10. </frameset>
11. </html>
Output:
Attribute
Tag-specific attribute

Attribute Value Description

frameborder 0 It specifies whether to display a border around the frame or not, and its default value is 1
1

longdsec URL It specifies a page which contains the long description of the content of the frame.

marginheight pixels It specifies the top and bottom margins of the frame.

marginwidth pixels It defines the height of the margin between frames.

name text It is used to assign the name to the frame.

noresize noresize It is used to prevent resizing of the frame by the user.

scrolling yes It specifies the existence of the scrollbar for overflowing content.
no
auto
src URL It specifies the URL of the document which we want to display in a frame.

HTML File Paths


An HTML file path is used to describe the location of a file in a website folder. File paths are like an address of file for a web browser.
We can link any external resource to add in our HTML file with the help of file paths such as images, file, CSS file, JS file, video, etc.
The src or href attribute requires an attribute to link any external source to HTML file.
Following are the different types to specify file paths:

1. <img src="picture.jpg"> It specifies that picture.jpg is located in the same folder as the current page.
2. <img src="images/picture.jpg"> It specifies that picture.jpg is located in the images folder in the current folder.
3. <img src="/images/picture.jpg"> It specifies that picture.jpg is located in the images folder at the root of the current web.
4. <img src="../picture.jpg"> It specifies that picture.jpg is located in the folder one level up from the current folder.
File paths are used on webpages to link external files like:

1. Web pages
2. Images
3. Style sheets
4. JavaScript
There are two types of File Paths:
1. Absolute File Paths
2. Relative File Paths
Absolute File Paths
Absolute file path specifies full URL address.
Example:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Full URL File Path</h2>
5. <img src="https://www.javatpoint.com/images/nature-1.jpg" alt="image" style="width:300px">
6. </body>
7. </html>
Relative File Paths
The relative file path specifies to a file which is related to the location of current page.
Example:
Let's take an example to see how the file path points to a file in the images folder located at the root of the current web.

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Using a Relative File Path</h2>
5. <img src="/images/nature-2.jpg" alt="Mountain" style="width:300px">
6. </body>
7. </html>
HTML Layouts
 HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that
HTML layout specifies a way in which the web pages can be arranged.
 Web-page layout works with arrangement of visual elements of an HTML document.
 Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional
with the great look.
 You can also use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing.
Every website has a specific layout to display content in a specific manner.
Following are different HTML5 elements which are used to define the different parts of a webpage.

o <header>: It is used to define a header for a document or a section.


o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent self-contained article
o <aside>: It is used to define content aside from the content (like a sidebar)
o <footer>: It is used to define a footer for a document or a section
o <details>: It is used to define additional details
o <summary>: It is used to define a heading for the <details> element
Description of various Layout elements
HTML <header>
The <header> element is used to create header section of web pages. The header contains the introductory content, heading element,
logo or icon for the webpage, and authorship information.
Example:
1. <header style="background-color: #303030; height: 80px; width: 100%">
2. <h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to MyFirstWebpage</h1>
3. </header>

HTML <nav>
The <nav> elements is a container for the main block of navigation links. It can contain links for the same page or for other pages.
Example:
1. <nav style="background-color:#bcdeef;">
2. <h1 style="text-align: center;">Navgation Links</h1>
3. <ul>
4. <li><a href="#">link1</a></li>
5. <li><a href="#">link2</a></li>
6. <li><a href="#">link3</a></li>
7. <li><a href="#">link4</a></li>
8. </ul>
9. </nav>

HTML <section>
HTML <section> elements represent a separate section of a web page which contains related element grouped together. It can contain:
text, images, tables, videos, etc.
Example:
1. <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">
2. <h2>Introduction to HTML</h2>
3. <p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice
format on a web browser..</p>
4. </section>

HTML <article>
The HTML
tag is used to contain a self-contained article such as big story, huge article, etc.
Example:
1. <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">
2. <h2>History of Computer</h2>
3. <p>Write your content here for the history of computer</p>
4. </article>

HTML <aside>
HTML <aside> define aside content related to primary content. The <aside> content must be related to the primary content. It can
function as side bar for the main content of web page.
Example:
1. <aside style="background-color:#e6e6fa">
2. <h2>Sidebar information</h2>
3. <p>This conatins information which will represent like a side bar for a webpage</p>
4. </aside>
HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains information about author, copyright,
other links, etc.
Example:
1. <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">
2. <h3>Footer Example</h3>
3. <p>© Copyright 2018-2020. </p>
4. </footer>

HTML <details>
HTML <details> element is used to add extra details about the web page and use can hide or show the details as per requirement.
Example:
1. <details style="background-color: #f5deb3">
2. <summary>This is visible section: click to show other details</summary>
3. <p>This section only shows if user want to see it. </p>
4. </details>
HTML <summary>
HTML <summary> element is used with the <details> element in a web page. It is used as summary, captions about the content of
<details> element.
Example:
1. <details>
2. <summary>HTML is acronym for?</summary>
3. <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>
4. </details>
HTML Symbols
There are many mathematical, technical and currency symbols which are not present on a normal keyboard. We have to use HTML
entity names to add such symbols to an HTML page.
If there no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.
Example:

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h3>The Currency Symbols</h3>
5. <p>This is Indian Rupee symbol <b>₹<b></p>
6. <p>This is Euro symbol <b>€</b></p>
7. <p> This is Dollar symbol <b>#36;</b></p>
8. </body>
9. </html>
HTML Responsive
Responsive Web design
Responsive web design is used to make your web page look appropriate, good, and well placedon all devices (desktop, tablet,
smartphone etc.)
Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the content. It makes the content look good on
any screen.
Set the viewport
Let's see how to set the viewport.
how to set the viewport
Responsive Images
Images which can be scaled nicely to fit any browser size are known as responsive images.
How to make Image Responsive?
By using the width property
Set the CSS width property to 100% to make the image responsive and scale up and down.
Example

1. <!DOCTYPE html>
2. <html>
3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
4. <body>
5. <h2>Responsive Image</h2>
6. <p>When we set the CSS width property to 100%, it makes the image responsive.
7. Resize the browser window to see the effect.</p>
8. <img src="img_girl.jpg" style="width:100%;">( change image)
9. </body>
10. </html>

You might also like