Imp Quest
Imp Quest
External CSS An external CSS file can be created with any text or HTML editor such as
“Notepad” or “Dreamweaver”. A CSS file contains no HTML or XHTML, only CSS. We simply
save it with the .css file extension. We can link to the file externally by placing one of the
following links in the head section of every HTML or XHTML file we want to style with the
CSS file. Example
External styles are defined within the <link> element, inside the <head> section of an
HTML page: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
● An inline style may be used to apply a unique style for a single
element. ● To use inline styles, add the style attribute to the relevant
element.
Eg:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a
heading</h1> <p style="color:red;">This is a
paragraph.</p>
</body>
</html>
Internal CSS
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style
is an effective way to style single pages. Using the CSS style for multiple web pages is time-
consuming because we require placing the style on each web page.
Eg <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: Red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</html>
2. HTML 5 ELEMENTS?
Ans.
1. The <section> element
• To group standalone sections within a web page containing logically connected
content (news block, contact information etc.).
<section>
<h1> Header 1 </h1>
<p>Some paragraph for example</p>
</section>
2. The <nav> element
• Defines a section of navigation links in a documents
• Internal links and external links
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/jquery/">jQuery</a>
</nav>
3. The <article> element
• To define an independent, self-contained content
• Article, blog posts, comments, etc
• We can display the information in this element in various format
<body>
<article>
<p>Text of the article</p>
</article>
</body>
4. The <aside> element
• To create a section that used to display information about the content of
other element Such as time, date, current news, weather report, etc. Also
used for typographical effect in the documents
• Such as sidebars for advertisement, links, notes and tips
<aside>
Enter some content related to the article
</aside>
5. The <header> element
• Provide the introductory content on a HTML page It contained headings,
paragraphs, links, etc.
• We can insert several header elements in one document
• But header element cannot placed any other <header>, <footer> or <address>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
3. Font Tag?
Ans. The <font> tag in HTML plays an important role in the web page to create an attractive and
readable web page. The font tag is used to change the color, size, and style of a text. The base font
tag is used to set all the text to the same size, color and face.
Syntax:
<font attribute = "value"> Content </font>
The font tag has basically three attributes which are given below:
We will discuss all these attributes & understand them through the examples.
Font Size: This attribute is used to adjust the size of the text in the HTML document using a font
tag with the size attribute. The range of size of the font in HTML is from 1 to 7 and the default size
is 3.
Syntax:
<font size="number">
Font Type: Font type can be set by using face attribute with font tag in HTML document. But the
fonts used by the user need to be installed in the system first.
Syntax:
<font face="font_family">
Font Color: Font color is used to set the text color using a font tag with the color attribute in an
HTML document. Color can be specified either with its name or with its hex code.
Syntax:
<font color="color_name|hex_number|rgb_number">
Eg:
<!DOCTYPE html>
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<p>
<p>
</p>
<p>
</body>
</html>
4. Image tag?
It is not supported by HTML 5. HTML 5 uses CSS property instead of this attribute.
Syntax:
<img align="left|right|middle|top|bottom">
Attribute Values:
The <img> height attribute is used to specify the height of the image in pixels.
Syntax:
<img height="pixels">
Attribute Values: It contains single value pixels which specify the height of the image in pixel.
The <img> alt attribute is used to specify the alternate text for an image. It is useful when the
image not displayed. It is used to give alternative information for an image.
Syntax:
<img alt="text">
Attribute Values: It contains single value text which specifies the alternative text for an image.
The <img> src attribute is used to specify the URL of the source image.
Syntax:
<img src="URL">
Attribute Values: It contains single value URL which specifies the link of source image. There are two
types of URL link which are listed below:
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines,
how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal
frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the frame.
6. Form elements?
Ans. 1. <input> Element
The <input> element can be displayed in several ways, depending on the type
attribute.
Eg:
<input type="text" id="firstname" >
2. <select> Element
● The <select> element defines a drop-down list.
● The <option> elements defines an option that can be selected.
● By default, the first item in the drop-down list is selected.
● To define a pre-selected option, add the selected attribute to the option.
● size attribute is used to specify the number of visible values.
● Use the multiple attribute to allow the user to select more than one value.
<select name="week" size="3" multiple>
<option value="sunday">Sunday</option>
<option value="monday"
selected>Monday</option> <option
value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
</select>
3. <textarea> Element
● The <textarea> element defines a multi-line input field.
● The rows attribute specifies the visible number of lines in a text
area. ● The cols attribute specifies the visible width of a text area.
Eg:
<textarea name="text1" rows="10"
cols="30"> //content..
</textarea>
4. <button> Element
The <button> element defines a clickable button.
Eg: <button type="button”> Click Me! </button>
5. <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<form action=Home.php">
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="Jishna"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" value="K"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
6. <datalist> Element
The HTML <datalist> element contains a set of <option> elements that represent
the permissible or recommended options available to choose from within other
controls. The <datalist> tag specifies a list of pre-defined options for an <input>
element. The <datalist> tag is used to provide an "autocomplete" feature for
<input> elements. Users will see a drop-down list of pre-defined options as they
input data. The <datalist> element's id attribute must be equal to the <input>
element's list attribute
The <datalist> element specifies a list of pre-defined options for an <input>
element.
The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
7. <output> Element
The <output> tag is used to represent the result of a calculation. The <output>
tag in HTML is used to represent the result of a calculation performed by the
client-side script such as JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Output Tag</title>
</head>
<body>
<p>Calculate the Sum of the two Numbers</p>
<form oninput="res.value=parseInt(a.value)+parseInt(b.value);">
<label>Enter First Value.</label><br>
<input type="number" name="a" value=""/><br>
+<br/>
<label>Enter First Value.</label><br>
<input type="number" name="b" value=""><br> <br>
Output is:<output name="res"></output>
</form>
</body>
</html>
8. <keygen> Element
The <keygen> element generates an encryption key for passing encrypted data
to a server. When an HTML form is submitted, the browser will generate a key
pair and store the private key in the browser's local key storage and send the
public key to the server.
<body>
<form action="demo_keygen.php" method="POST">
<label>Username: <input type="text"
name="username"></label>
<label>Encryption: <keygen name="key"></label>
<input type="submit" value="Submit"> <br><br> </form>
</body>
9. <progress> Element
The HTML <progress> element displays an indicator showing the completion
progress of a task, typically displayed as a progress bar.
HTML <progress> tag is used to display the progress of a task. It provides an
easy way for web developers to create progress bar on the website. It is mostly
used to show the progress of a file uploading on the web page.
<body>
<h3>The progess element</h3>
<label for="file">Downloading progress:</label>
<progress id="file" value="40" max="100"> 32% </progress>
</body>
10. <meter> Tag
The <meter> tag defines a scalar measurement within a known range, or a
fractional value. This is also known as a gauge. This element is mostly useful
when you need to display the disk usage and the relevance of a search result, or to
show some other measurement. You cannot use the meter element to display a
single number as it is used to display a range or to indicate progress as in a
progress bar. The HTML <meter> element represents either a scalar value within a
known range or a fractional value.
<body>
<label for="fuel">Fuel level:</label>
<meter id="fuel"
min="0"
max="100"
low="33" high="66" optimum="80" value="70"> at 50/100
</meter>
</body>
7. CSS functions
Ans. <head>
<title>CSS blur() Function</title>
<style>
H1{
color: green;
font-size:40px
font-weight: bold;}
body{
text-align: center;
.blur effect
{ filter:
blur(5px);
</style>
</head>
Color:
In CSS (Cascading Style Sheets), the `color` property is used to define the
text color of an element on a web page. It allows you to set the color of the
text content within that element. The `color` property can accept a variety of
values, including named colors (like "red" or "blue"), hexadecimal color
codes (like "#FF0000" for red), RGB values, HSL values, and more.
Text-align:
The `text-align` property is used to control the horizontal alignment of the
text within an element. It allows you to specify how the text content should
be positioned within the element's box. This property is commonly used to
align text within paragraphs, headings, and other block-level elements.
Blur:
The CSS code you've provided applies the `blur` filter to an element,
creating a visual effect of blurring the content. The `blur` filter is used to
soften the edges and details of the element, creating a blurry appearance.
Font-size:
The `font-size` property in CSS is used to set the size of the text within an
HTML element. It determines how large or small the text content should
appear. You can use various units to define the font size, such as pixels
(`px`), em units (`em`), percentages (`%`), and more.
Font-weight:
The `font-weight` property in CSS is used to control the thickness or
boldness of the text characters within an HTML element. It allows you to
adjust the visual weight of the text, making it appear lighter or bolder.
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
The frameset page divides the browser window into number of section so that different pages can be
loaded in each frame. The individual section of a frameset window is known as frame. The <frameset>
and <frame> tags are needed to create a frameset page. The <frameset> tag is a container tag. But the
<frame> tag is an empty tag. No <body> tag is needed for a frameset page.
Server-side
When you interact with a website by clicking links, submitting forms, or running
searches, your web browser sends HTTP requests to the respective web servers.
These requests contain information like the URL of the resource, the desired
action (GET, POST, etc.), and any additional data needed for the request.
The web server then processes these requests when they arrive, and it can
manipulate the content of the web page before sending it back to your browser as
an HTTP response. If the requested page is static, the server simply sends the
same copy of the page to the browser, which displays it directly. However, if the
page is dynamic and contains server-side scripts, the server executes those scripts
before returning the modified HTML to the browser.
Dynamic web pages allow for more interactive and personalized experiences, as
the server can customize the content based on the user's input or other factors.
This enables websites to display real-time data, process user input, and create
more engaging user interfaces.
In summary, when you interact with a web page, your browser sends requests to
the web server, which processes them and can modify the page's content using
server-side scripts before sending it back to your browser as an HTTP response.
Dynamic web pages enable more interactive and personalized experiences for
users and are made possible by the execution of server-side scripts.
Clpjient side
Client-side code, such as HTML, JavaScript, VBScript, Flash files, ActiveX
controls, and Java Applets, is executed directly on the user's web browser. It
allows for various features on web pages without the need to send data to the web
server, making tasks like data validation and special formatting possible. Client-
side scripts can be embedded within the HTML document or referenced as
external files. The user's browser executes the scripts and displays the document,
often responding to user actions without further server communication.
Client-side scripts have access to the user's browser information and functions,
while server-side scripts have access to the server's resources. They don't require
additional software on the server but rely on the user's browser understanding the
scripting language used. Popular web browsers heavily support client-side
scripting, leading to improved user interfaces and reduced page refreshing.