Unit-I Widt-Ug
Unit-I Widt-Ug
HTML structure: All HTML documents follow the same basic structure. They
have a head which contains control information used by the browser and server
and a large body. The body contains the content that displays on the screen and
tags which control how that content is formatted by the browser. The basic
document is:
<html>
Krishnaveni Degree College :: Narasaraopet Page No. : 1
Web Interface Designing Technologies UNIT: I
<head>
<title>A Minimal HTML document</title>
</head>
<body>
<h1>The Largest Heading</h1>
<p>A sample paragraph showing formatting and
followed by a line across the screen.</p>
<hr>
</body>
</html>
<html> tag: The <html> tag encloses all other HTML tags and associated text
within the document. It is an optional tag. You can create an HTML document
with out this tag and the web browser can still read it and display it. But it is
always a good form to include the start and end html tags.
<head> tag: This tag comes after the HTML start tag. It contains <title> tag to
give the document title that displays on the browsers title bar at the top. The
other tags that are used in the head are <style> and <link>.
Example: <title>First Web Page</title>
<body> tag: The actual content of the webpage are placed in the body section.
The body tag contains all the text and graphics which are to be displayed in the
web page. The tag consists of various attributes. They are bgcolor, link, alink,
vlink, text.
Example: <body bgcolor=”red” alink=”blue” vlink=”yellow”>
The body tag uses various tags such as <h1>, <p> and <hr>. <h1> tag is
used to display the heading in a larger font. <p> is used to write the text in a
paragraph and <hr> can be used to draw a horizontal line in the web page.
HTML elements: An HTML file is made of HTML 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. Thus an element is a collection of
start tag, attributes, end tag, content between them.
Some elements does not have end tag and content, these elements are
termed as empty elements or self-closing element or void elements.
Ex: <p> Welcome to HTML world!!! </p>
Ex: <hr>
HTML provides over 90 different elements. These elements fall into
different categories. They are
Krishnaveni Degree College :: Narasaraopet Page No. : 2
Web Interface Designing Technologies UNIT: I
1. Top-level elements: html, head, and body.
2. Head elements: elements placed inside head, including title (page title),
style (rendering style), link (related documents), meta (data about the
document), base (URL of document), and script (client-side scripting).
3. Block-level elements: elements behaving like paragraphs, including h1|h6
(headings), p(paragraph), pre (pre-formatted text), div (designated block),
ul, ol, dl (lists), table(tabulation), and form (user input forms). When
displayed, a block-level (or simply block) element always starts a new line
and any element immediately after the block element will also begin on a
new line.
4. Inline elements: elements behaving like words, characters, or phrases
within a block, including a (anchor or hyperlink), br (line break), img
(picture or graphics), em (emphasis), strong (strong emphasis), sub
(subscript), sup (superscript), code (computer code), var (variable name),
kbd (text for user input), samp (sample output), span (designated inline
scope).
5. When an element is placed inside another, the containing element is the
parent and the contained element is the child.
6. Comments in an HTML page are given as <!-- a sample comment -->.
Text and HTML elements inside a comment tag are ignored by browsers.
Be sure not to put two consecutive dashes (--) inside a comment. It is good
practice to include comments in HTML pages as notes, reminders, or
documentation to make maintenance easier.
7. In an HTML document certain characters, such as < and &, are used for
markup and must be escaped to appear literally. Other characters you may
need are not available on the keyboard. HTML provides entities (escape
sequences) to introduce such characters into a Web page. For example,
the entity < gives < and ÷ gives ¥.
Title: Title attribute is used to provide a title for the element. The title must be
text-only, and it is shown in the web page when the cursor is placed on the
element.
<!-- HTML Program to demonstrate usage of title attributes-->
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h1Title="myHeader">My Header</h1>
<h1 >My Second Header</h1>
</body>
</html>
Style: Style attribute is used to provide presentation styles for the individual
element.
Krishnaveni Degree College :: Narasaraopet Page No. : 4
Web Interface Designing Technologies UNIT: I
<body style="background-color: cyan">
The above statement gives the color value cyan to the style property
background-color for this element. Several style properties separated by
semicolons (;) can be given. The style attribute is a direct but inflexible way to
specify presentation style.
<!--Program to demo style attribute-->
<html>
<head>
<title>style Attribute</title>
</head>
<body >
Class: Class attribute is used to specify the style class for the element. Thus,
HTML elements may use different classes and the specified presentation styles
are applied to elements belonging to the same class.
<!--Program to demo class atribute-->
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="head1">This is a heading</h1>
<h1 id ="head2">This is a paragraph.</h1>
</body>
</html>
Other useful HTML attributes: Apart from core attributes, there are other useful
attributes that are used with other HTML elements.
href Attribute: The href attribute is used to link to another page or another web
address. It is used in a tag. It provides a URL to the link.
<!--Program to demo href atribute in anchor tag-->
<html>
<head>
<title >Href attribute </title>
</head>
<body>
<a href="file:///E:/htmlprac/clsatr.html">This is first Link</a>
</body>
</html>
src Attribute: src attribute is used to define file location. It accepts the URL of the
resource. It is used with <img> , <iframe>, <audio>, <video>, etc.
<!--Program to demo src atribute in image tag-->
<html>
<head>
<title >Href attribute </title>
</head>
<body>
<img src="file:///E:/htmlprac/build.jpeg" width="200" height="200">
</body>
</html>
alt Attribute: The alt attribute is added as an alternate text in a <img> tag. It
holds a description of the image.
The text provided in the alt attribute is shown when the image is not loaded due
to the unavailability of an image or some error. It is not mandatory to
Headings: HTML offers six heading elements, h1 through h6, for level-one to
level-six section headings. Headings are block elements and are usually
displayed with a heavier font weight followed by a blank line. Use h1 for top-
level section headings, and h2 for subsections within top-level sections, and so
on. Unless otherwise specified, browsers use increasingly larger fonts to render
higher level headings. It is advisable to use h1 for the most prominent heading
such as the headline of an article.
<!-- HTML Program to demonstrate usage of six heading elements -->
<! DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
</body>
</html>
Paragraphs: The <p> tag in HTML defines a paragraph. These have both
opening and closing tags. So anything mentioned within <p> and </p> is
Styles: Browsers follow built-in default presentation styles and styles based on
end-user preferences to render Web pages. It is usually important for the Web
developer to control the presentation style in order to achieve well-designed
visual effects. Document presentation can be controlled by attaching style rules
to elements. There are three ways to attach style rules:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
Using the style attribute inside HTML element: The style attribute inside the html
element takes more precedence over styles in the <style> element. <style>
element takes more precedence over those specified in separate style sheets.
A style attribute is given in the general form:
style="property1:value1; property2:value2 . . . "
For example,
<h1 style="color: blue;font=verdana">The Styled Heading</h1>
<!--Program to demo inline style sheet-->
<html>
<head>
<title>inline style sheet</title>
</head>
<body >
Krishnaveni Degree College :: Narasaraopet Page No. : 8
Web Interface Designing Technologies UNIT: I
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
Using the <style> element in the <head> section: The <style> element in the
<head> section is used to define a style for a single HTML page.
A style element is given in the general form:
<style>
Html element {property1:value1; property2:value2 . . . }
</style>
For example,
<style>
H1 {color: blue;font:verdana}
</style>
<!Program to demo inline style sheet>
<html>
<head>
<title>internal style sheet</title>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body >
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Using a <link> element to link to an external CSS file: An external style sheet is
used to define the style for many HTML pages. To use an external style sheet,
add a link to it in the <head> section of each HTML page.
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension. Here is what
the "styles.css" file looks like:
body
Krishnaveni Degree College :: Narasaraopet Page No. : 9
Web Interface Designing Technologies UNIT: I
{
background-color: powderblue;
}
h1
{
color: blue;
}
p
{
color: red;
}
renders the heading in blue. All three ways of attaching style rules can be used
in the same page. The style attribute takes precedence over styles in the <style>
element which takes precedence over those specified in separate style sheets.
!Program to demo external style sheet>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML formatting: One of the most important design aspect of a website is its
readability. The textual content of the site must be easily readable and the
designer's understanding of what factors enhance readability is absolutely
essential to Web development.HTML contains several elements for defining text
with a special meaning.
Bold text<b>: The HTML <b> element defines bold text, without any extra
importance.
Important text<strong>: The HTML <strong> element defines text with strong
importance. The content inside is typically displayed in bold. <i> - Italic text
Italix text<i>: The <i> tag is often used to indicate a technical term, a phrase
from another language, a thought, a ship name, etc.
Emphasized text<em>: The HTML <em> element defines emphasized text. The
content inside is typically displayed in italic.
Marked text<mark>: The HTML <mark> element defines text that should be
marked or highlighted Smaller text <small>:
Deleted text<del>: The HTML <del> element defines text that has been deleted
from a document. Browsers will usually strike a line through deleted text.
Inserted text<ins>: The HTML <ins> element defines a text that has been
inserted into a document. Browsers will usually underline inserted text.
Subscript text<sub>: The HTML <sub> element defines subscript text. Subscript
text appears half a character below the normal line, and is sometimes rendered
in a smaller font. Subscript text can be used for chemical formulas, like H2O.
Superscript text<sup>: The HTML <sup> element defines superscript text.
Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font. Superscript text can be used for formulas,
like X2.
<!--Html Program to Text Formatting-->
<html>
Images: The <img> tag is used to embed an image in an HTML page. Images
are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image. The <img>
tag has two required attributes. They are
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed
<!--Program to demo image tag-->
<html>
<head>
<title >Image </title>
</head>
<body>
<img src="file:///E:/htmlprac/build.jpeg"
alt=”no image” width="200" height="200">
</body>
</html>
Tables: Tables display information in a clear and concise fashion. The block
element table organizes and presents information in neatly aligned rows and
columns. It is often used to present tabular data.
Table Basics: A simple table simply has a number of rows, each row containing
the same number of columns. The table is enclosed in between<table> and
</table>. The common tags used in table are
<caption> : The <caption> tag is optional. It is used to display the heading for
the table.
<th> : The <th> tag is used to display the heading for the column or row.
<tr> : The <tr> tag is used to write rows in the table.
<td> : The <td> tag is used to write data in the cell. The <td> tag is embedded
in <tr> tag.
Table Formatting: The common attributes used in table are
</tr>
<tr>
<td>102</td>
<td>Gita</td>
<td>MSCS</td>
</tr>
<tr>
<td>103</td>
<td>Kiran</td>
<td>MECS</td>
</tr>
</table>
</body>
Krishnaveni Degree College :: Narasaraopet Page No. : 16
Web Interface Designing Technologies UNIT: I
<html>
Table Positioning: A table is normally positioned left adjusted by itself on the
page. To center a table horizontally on the page use the margin style properties
(Ex: CenteredTable):
<table style="margin-left: auto; margin-right: auto">
Table Width and Height: The width and height of a table is automatically
computed to accommodate the contents in the table cells. The width of the table
can be specified using the width attribute of table. The attribute width="wd"
speciifies the overall width of the table in pixels (width="400")or as a percentage
(width="100%") of the available horizontal space. Use a percentage rather than
a fixed length whenever possible. The height of the table can be specified using
the height attribute of table. The attribute height="ht" speciifies the overall
height of the table in pixels or as a percentage of the available vertical space.
Use a percentage rather than a fixed length whenever possible.
Row and Column Spans: A table cell can span multiple rows and/or columns. Use
the rowspan attribute to specify the number of rows a table cell spans. Use the
colspan attribute to specify the number of columns a table cell spans.
<!-- Html Program to demo Column Span -->
<html>
<head>
<title>Column Span</title>
</head>
<body>
<table border="2" width="60%" >
<tr align="center" >
<td colspan = "2" style="width:10%">10%</td>
<td style="width:30%">20%</td>
</tr>
<tr align="center" >
<td style="width:10%">10%</td>
<td style="width:30%">20%</td>
<td style="width:40%">30%</td>
</tr>
</table>
</body>
<html>
Lists: In addition to headings and paragraphs, lists can be used to organize and
present information for easy reading. Three block-level list elements are
available. They are
Bullet list: The ul element provides an unordered list where the ordering of the
items is unimportant. A ul is usually presented as a set of bullet items.
Ordered list: The ol element offers an numbered list where the ordering of the
items is important. An ol is typically displayed as a sequence of enumerated
items.
Definition list: The dl element is handy for a definition list where each term
(<dt>) is given a definition or description. <!--Html Program to demo
unordered, ordered and definition lists-->
<html>
<head>
<title>Lists</title>
</head>
<body>
<ul type="square">
<li>Fruits</li>
<li>Cereal</li>
<li>Meats</li>
</ul>
<ol type="I">
<li>Fruits</li>
<li>Cereal</li>
<li>Meats</li>
</ol>
<dl>
Krishnaveni Degree College :: Narasaraopet Page No. : 19
Web Interface Designing Technologies UNIT: I
<dt>Fruits</dt> <dd>Mango is an example of fruit</dd>
<dt>Cereal</dt> <dd>Cereals are example of Pulses</dd>
</dl>
</body>
<html>
Blocks and Classes: Styles can be used to change the appearance of individual
elements but often want to change the way that every instance of an element
appears. A class is a definition of a set of styles which can be applied as required.
Classes can be applied to a single type of element, or may be anonymous and
hence applicable to any element. The following code shows the difference
between the two types:
h1 {
color: red;
border: thin groove;
}
h2.some {
color: green;
margin-left: 60%;
}
.anyelement {
text-align: right;
color: purple;
}
The style defined for h1 applies to all h1 elements in the document. The h2 style
is only applied when it is explicitly called by using the below statement.
<h2 class="some">...</h2>
The .anyelement style can be applied wherever it is needed:
<h2 class=anyelement>...</h2>
<p class=anyelement>...</p>
Divisions: An elements for which same style can be applied are inserted <div>.
</div> pair of tags. Any formatting that needs adding is placed inside the div
tag thus:
<div class="anyelement">
<p>. . . < / p>
<h2>. . . </h2>
<hr>
Krishnaveni Degree College :: Narasaraopet Page No. : 20
Web Interface Designing Technologies UNIT: I
</div>
A division is now a logical part of the document and treat divisions as individual
items.
Spans: A simple and efficient model to format a part of the element is to use
span tag. Spans are used as follows:
<p><span class="anyelement">The</span> span tag
The div and span tags have identical parameters but the effects of those
parameters are altered by the context in which they are used.
Each can have an id so that it can be identified by other elements on the page.
This is not generally useful on a static page of text but it is useful in the context
of Dynamic HTML. Styles are applied to span and div through either the class or
style parameters. A set of styles can be defined within the tag and applied
though style while a predefinedclass is applied through class.
HTML CSS: A Web page has two important aspects, document structure and
presentation style. Cascading Style Sheets (CSS) is a language to specify the
presentation style. CSS provides the means to implement that well-designed
style.
selector
{ property1 : value1 ;
property2 : value2 ;
...
propertyn : valuen
}
Figure : Structure of A Style Rule
Inheritance and cascading rules: CSS defines how values for properties assigned
to an HTML element are inherited by its child elements. For example, because
of inheritance, font and background settings for body can affect the entire HTML
document. Also because of no inheritance, margin, padding and border
declarations do not affect child elements. CSS documents the inheritance status
of each style property. When conflicting style declarations happen on a single
HTML element, cascading rules govern which declaration will apply.
Style Sheets: A style sheet is a file with the .css as suffix that contains one or
more style rules. In a style sheet, comments may be given between /* and */. A
style sheet is just a set of style rules.
For example, the rule
h1 { font-size: large }
specfies the font size for all first-level headers to be large, a CSS predefined size.
And the two rules
h2 { font-size: medium }
This external file approach allows to easily attach the same style sheet to
multiple pages of your website. The same style sheets can be used at other sites
by giving a full URL for the href. The above Figure shows the relation between a
Web page and its style sheet.
A .html file may have one or more link rel="stylesheet" elements. At the
beginning of a style sheet file (before all style rules), the other style files can be
included with the statement
@import url("target-sheet-url");
Instead of a separate file, the rules can be included directly in a Web page
via the style element
<style type="text/css">
body { font-size: small }
HTML frames: Normally a browser window displays one Web page. The
frameset element, used instead of body, allows to divide a window into
rectangular regions, called frames, and display a different page in each frame.
Frequently, frames are used to divide a window into fixed-display and variable-
content regions. Frames can give a page a “broken-up" look or a monotonous
look. Use the rows and cols attributes of <frameset> to subdivide the browser
window into frames.
Attributes of Frameset tag: The attributes commonly used for frameset tag are
cols: The cols attribute is used to create vertical frames in web browser. This
attribute is basically used to define the no of columns and its size inside the
frameset tag. The size or width of the column is set in the frameset in the
following ways:
1. Use absolute value in pixel
Example:
<frameset cols = "300, 400, 300">
2. Use percentage value
Example:
<frameset cols = "30%, 40%, 30%">
3. Use wild card values:
Example:
<frameset cols = "30%, *, 30%">
In the above example * will take the remaining percentage for
creating vertical frame.
rows: The rows attribute is used to create horizontal frames in web browser. This
attribute is used to define no of rows and its size inside the frameset tag. The
size of rows or height of each row use the following ways:
1. Use absolute value in pixel
Example:
<frameset rows = "300, 400, 300">
Krishnaveni Degree College :: Narasaraopet Page No. : 24
Web Interface Designing Technologies UNIT: I
2. Use percentage value
Example:
<frameset rows = "30%, 40%, 30%">
3. Use wild card values
Example:
<frameset rows = "30%, *, 30%">
In the above example * will take the remaining percentage for creating
horizontal frame.
border: This attribute of frameset tag defines the width of border of each frames
in pixels. Zero value is used for no border.
Example:
<frameset border="4" frameset>
frameborder: This attribute of frameset tag is used to specify whether the three-
dimensional border should be displayed between the frames or not. For this use
two values 0 and 1, where 0 defines for no border and value 1 signifies for yes
there will be border.
framespacing: This attribute of frameset tag is used to specify the amount of
spacing between the frames in a frameset. This can take any integer value as an
parameter which basically denotes the value in pixel.
Example:
<framespacing="20">
It means there will be 20 pixel spacing between the frames
Attributes of Frame Tag: The attributes commonly used for frame tag are
name: This attribute is used to give names to the frame. It differentiate one frame
from another. It is also used to indicate which frame a document should loaded
into.
Example:
<frame name = "top" src = "build.jpeg" />
<frame name = "main" src = " fontatr.html " />
<frame name = "bottom" src = " fontatr.html " />
Here we use three frames with names as left center and right.
src: This attribute in frame tag is basically used to define the source file that
should be loaded into the frame. The value of src can be any url.
Example:
<frame name = "top" src = "e:/htmlprac/build.jpeg" />
In the above example name of frame is left and source file will be loaded from
“e:/htmlprac/build.jpeg” in frame.
File paths: A file path describes the location of a file in a web site's folder
structure. File paths are used when linking to external files, like:
1. Web pages
2. Images
3. Style sheets
4. JavaScripts
Absolute File Paths: An absolute file path is the full URL to a file.
Example
<img src="https://www.kvdcnrt.com/images/picture.jpg" alt="Mountain">
The <img> tag uses the filepath in the src attribute to identify the location of
the external file.
Relative File Paths: A relative file path points to a file relative to the current page.
Example
<img src="/images/picture.jpg" alt="Mountain">
Krishnaveni Degree College :: Narasaraopet Page No. : 26
Web Interface Designing Technologies UNIT: I
In the following example, the file path points to a file in the images folder
Best Practice: It is best practice to use relative file paths (if possible). When using
relative file paths, the web pages will not be bound to current base URL. All links
will work on your own computer as well as on your current public domain and
your future public domains.
Layout: Websites often display content in multiple columns. HTML has several
elements that define the different parts of a web page. They are
<header> - Defines a header for a document or a
section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-
contained content
<aside> - Defines content aside from the content
(like a sidebar)
<footer> - Defines a footer for a document or a
section
<details> - Defines additional details that the
user can open and close on demand
<summary> - Defines a heading for the <details>
element
Layout Techniques: There are four different techniques to create multicolumn
layouts. Each technique has its pros and cons. They are
1. CSS framework
2. CSS float property
3. CSS flexbox
4. CSS grid
CSS framework: CSS framework comprises several CSS stylesheets ready for use
by web developers and designers. With a CSS framework, the user has a
completed CSS stylesheet, and they only have to code the HTML with accurate
classes, structure, and IDs to set up a web page. The framework already has
classes built-in for common website elements – footer, slider, navigation bar,
etc.
Advantages:
1. Speeds up your development
2. Enforces good web design habits
3. Provides symmetrical layouts
Krishnaveni Degree College :: Narasaraopet Page No. : 27
Web Interface Designing Technologies UNIT: I
Disadvantages:
1. Restricts your freedom
2. Adds extra code
CSS float property: The float property specifies whether an element should float
to the left, right, or not at all. Absolutely positioned elements ignore the float
property. Elements next to a floating element will flow around it.
Advantages:
1. Float is easy to learn
Disadvantages:
1. Floating elements are tied to the document flow
CSS flexbox: CSS flexbox layout ensures that elements behave predictably when
the page layout must accommodate different screen sizes and different display
devices.
Advantages:
1. Ability to compose complex layout
2. Work well with existing HTML layout.
3. Easy to understand.
Disadvantages:
1. Older browsers will not support
2. Different concepts need to learn
CSS Grid Layout: The CSS Grid Layout Module offers a grid-based layout system,
with rows and columns, making it easier to design web pages without having to
use floats and positioning.
Advantages:
1. Low cost
2. Speed of development
3. Simple to use
Disadvantages:
1. Plain Design
2. Offers limited browsing
Symbols: Entities are used to display reserved characters in HTML and symbols
that are not present on the keyboard. Some characters such as less than (<) or
greater than (>) signs are reserved in HTML. An HTML entity is a piece of text
("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ). If
these symbols are in the text then < and > are to be used. To display a
less than sign (<) we can also use <. A commonly used entity in HTML is the
non-breaking space is . This non-breaking space is used to create a space
Krishnaveni Degree College :: Narasaraopet Page No. : 28
Web Interface Designing Technologies UNIT: I
between the words in a line. Symbols that are not present on the keyboard can
also be added by using entities. They are
Sailaja --- 9348133355
Char Entity Description
< < LESS THAN
> > GREATER THAN
∀ ∀ FOR ALL
∃ ∃ THERE EXISTS
∈ ∈ ELEMENT OF
∉ ∉ NOT AN ELEMENT OF
∏ ∏ N-ARY PRODUCT
Α Α GREEK CAPITAL LETTER ALPHA
Β Β GREEK CAPITAL LETTER BETA
Γ Γ GREEK CAPITAL LETTER GAMMA
HTML responsive: Responsive web design is about creating web pages that
look good on all devices. A responsive web design will automatically adjust for
different screen sizes. It uses HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices such as desktops,
tablets, and phones.
Setting The Viewport: To create a responsive website, add the following <meta>
tag to all the web pages.
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set the viewport of the page, which will give the browser instructions
on how to control the page's dimensions and scaling.
Responsive Images: Responsive images are images that scale nicely to fit any
browser size. It can be done in two ways. They are
1. Using the width Property: If the CSS width property is set to 100%, the image
will be responsive and scale up and down.
Example: <img src="img_girl.jpg" style="width:100%;">
2. Using the max-width Property: If the max-width property is set to 100%, the
image will scale down if it has to, but never scale up to be larger than its
original size.
Example: <img src="img_girl.jpg" style="max-width:100%;height:auto;">
3. Using Different Images Depending on Browser Width: The HTML <picture>
element allows you to define different images for different browser window
sizes.
Example:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
Krishnaveni Degree College :: Narasaraopet Page No. : 29
Web Interface Designing Technologies UNIT: I
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size: The text size can be set with a "vw" unit, which means the
"viewport width". That way the text size will follow the size of the browser
window.
Example: <h1 style="font-size:10vw">Hello World</h1>