Web Design
Uploaded by
ppdc.anany2001Web Design
Uploaded by
ppdc.anany2001Web designing
Web Design
Web design refers to the design of websites that are
displayed on the internet
Web designing is of three kinds, to be specific
Static - fixed data
Dynamic or CMS - Convey dynamic Data
E-commerce - Store which involves
sales, then you need an E-Commerce website or e-store
HTML
HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages.
HTML is the standard markup language for creating Web pages
Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus, the link available on a webpage is called
Hypertext.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was
the first standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late
1999. Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.
Why need of HTML?
As mentioned before, HTML is one of the most widely used language over the web.
I'm going to list few of them here:
Web pages development - HTML is used to create pages which are rendered over the web.
Almost every page of web is having html tags in it to render its details in browser.
Internet Navigation - HTML provides tags which are used to navigate from one page to
another and is heavily used in internet navigation.
Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs,
desktop or laptops owing to responsive design strategy.
Offline support HTML pages once loaded can be made available offline on the machine
without any need of internet.
Game development- HTML5 has native support for rich experience and is now useful in
gaming development arena as well.
Prerequisites
Basic working knowledge with Windows or Linux
operating system, additionally you must be familiar with −
Experience with any text editor like notepad, notepad++,
or Edit plus etc.
How to create directories and files on your computer.
How to navigate through different directories.
How to type content in a file and save them on a
computer.
Understanding about images in different formats like
JPEG, PNG format.
HTML Editors
HTML Using Notepad or TextEdit
➔ Web pages can be created and modified by using professional HTML
editors.
➔ However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
➢ Step 1: Open TextEdit (Mac)
➢ Step 2: Write Some HTML
➢ Step 3: Save the HTML Page
➢ Step 4: View the HTML Page in Your Browser
Basic HTML Document
In its simplest form, following is an example of an HTML document −
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Output:
This is a heading
Document content goes here.....
HTML Tags & Description
1 <!DOCTYPE...>
This tag defines the document type and HTML version.
2 <htm l>
This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and
document body w hich is represented by <body>...</body> tags.
3 <head>
This tag represents the document's header w hich can keep other HTML tags like <title>, <link> etc.
4 <title>
The <title> tag is used inside the <head> tag to mention the document title.
The <title> element specifies a title for the HTML page (w hich is shown in the brow ser's title bar or in the page's tab)
5 <body>
This tag represents the document's body w hich keeps other HTML tags like <h1>, <div>, <p> etc.
6 <h1>
This tag represents the heading.
7 <p>
This tag represents a paragraph.
HTML Page Structure
Below is a visualization of an HTML page 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>
The content inside the <body> section (the white area above) will be displayed in
a browser. The content inside the <title> element will be shown in the browser's
title bar or in the page's tab.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to
understand the version of the HTML used in the document. \
Current version of HTML is 5 and it makes use of the following
declaration:
<!DOCTYPE html>
HTML – BASIC TAGS
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Example: OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go
in between an opening <p> and a closing </p> tag as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
This will produce the following result:
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line.
This tag is an example of an empty element
EX:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello</br>You delivered your assignment on
time.</br>Thanks</br> Mahnaz</p>
</body>
</html>
This will produce the following result:
Hello
You delivered your assignment on time.
Thanks
Mahnaz
➔ Centering Content
You can use <center> tag to put any content in the center of the page or
any table cell.
➔ Horizontal Lines
Horizontal lines are used to visually break-up sections of a document.
The <hr> tag creates a line from the current position in the document to the right
margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in
the given example below:
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In
these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body> This will produce the following
<pre> result:
function testFunction( strText ){ function testFunction( strText ){
alert (strText) alert (strText)
} }
</pre>
</body>
</html>
Non breaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser
to split the "12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity instead of a normal space. For example, when coding
the "12 Angry Men" in a paragraph, you should use something similar to the following
code:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
The HTML Attributes
HTML attributes provide additional information about HTML elements.
⚫ All HTML elements can have attributes
⚫ Attributes provide additional information about elements
⚫ Attributes are always specified in the start tag
⚫ Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
<img src="img_girl.jpg">
The width and height & alt Attributes
The <img> tag should also contain the width and height attributes, which specify
the width and height of the image (in pixels):
Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values. Places a background color behind an element
background URL Places a background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.
height Numeric Value Specifies the height of tables, images, or table cells.
title User Defined "Pop-up" title of the elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
This will display the following result:
This is left aligned
This is center aligned
HTML – FORMATTING
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a bold typeface
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown
below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses an italicized typeface.
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as
shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses an underlined typeface
Strike Text
Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a strikethrough typeface.
Monospaced
Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts
are known as variable-width fonts because different letters are of different widths (for
example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each
letter has the same width. TYPE WRITING EFFECT
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a typeface.
Superscript
Text
The content of a <sup>...</sup> element is written in superscript; the font size used
is the same size as the characters surrounding it but is displayed half a character's
height above the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
This will produce the following result:
Subscript
Text
The content of a <sub>...</sub> element is written in subscript; the font size used is
the same as the characters surrounding it, but is displayed half a character's height
beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
This will produce the following result:
Larger
Text
The content of the <big>...</big> element is displayed one font size larger
than the rest
of the text surrounding it as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a big typeface.
Smaller
Text
The content of the <small>...</small> element is displayed one font size smaller
than the rest of the text surrounding it as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a small typeface.
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML Quotation
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL(hue saturation lightness), RGBA, or HSLA(hsl alpha) values.
Color Names
Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet,LightGray
HTML supports 140 standard color names.
RGBA Value
An RGBA color value is specified with:
rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at all):
rgb(255, 99, 71)
#ff6347
Hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
HTML Definition Lists
HTML and XHTML supports a list style which is
called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or other
name/value list.
<ul> − An unordered list. This will list items using plain
bullets.
<ol> − An ordered list. This will use different schemes of
numbers to list your items.
<dl> − A definition list. This arranges your items in the
same way as they are arranged in a dictionary.
lists
HTML offers web authors three ways for specifying lists
of information. All lists must contain one or more list
elements. Lists may contain −
<ul> − An unordered list. This will list items using plain
bullets.
<ol> − An ordered list. This will use different schemes
of numbers to list your items.
<dl> − A definition list. This arranges your items in the
same way as they are arranged in a dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no
special order or sequence. This list is created by using
HTML <ul> tag. Each item in the list is marked with a bullet.
The type Attribute
You can use type attribute for <ul> tag to specify the type of
bullet you like. By default, it is a disc. Following are the possible
options −
▪ <ul type = "square">
▪ <ul type = "disc">
▪ <ul type = "circle">
HTML Ordered Lists
If you are required to put your items in a numbered list instead of
bulleted, then HTML ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one and is incremented by
one for each successive ordered list element tagged with <li>.
The type Attribute
You can use type attribute for <ol> tag to specify the type
of numbering you like. By default, it is a number. Following are
the possible options −
▪ <ol type = "1"> - Default-Case Numerals.
▪ <ol type = "I"> - Upper-Case Numerals.
▪ <ol type = "i"> - Lower-Case Numerals.
▪ <ol type = "A"> - Upper-Case Letters.
▪ <ol type = "a"> - Lower-Case Letters.
HTML Definition Lists
HTML and XHTML supports a list style which is
called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way
to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
▪ <dl> − Defines the start of the list
▪ <dt> − A term
▪ <dd> − Term definition
▪ </dl> − Defines the end of the list
HTML <style> Tag
⚫ The <style> tag is used to define style information (CSS) for a document.
⚫ Inside the <style> element you specify how HTML elements should render in a
browser.
⚫ Example:
⚫ <html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
SCROLLING TAG
Marquee is one of the important tags introduced in HTML to support such
scrollable texts and images within a web page.
SCROLL UP:
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
SCROLL DOWN
<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>
SCROLL LEFT TO RIGHT
<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>
SCROLL RIGHT TO LEFT
<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>
SCROLLING SPEED
Marquee speed can be changed using the "scrollmount" attribute. For example,
if you are using scrollmount = "1" then it sets the marque to scroll very slowly,
and as you increase the "scrollmount," the scrolling speed will also increase.
<marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast
Scrolling</marquee>
HTML <img> Tag
Definition and Usage
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:
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
Note: Also, always specify the width and height of an image. If width and
height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside
an <a> tag (see example below).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of inserting img</title>
</head>
<body>
<p>This is some text. <img
src="https://wc.wallpaperuse.com/wallp/1- 12770_s.jpg" alt="Smiley
face" style="float:left"></p>
</body>
</html>
Linking Documents
A link is specified using HTML tag <a>. This tag is
called anchor tag and anything between the
opening <a> tag and the closing </a> tag
becomes part of the link and a user can click that
part to reach to the linked document. Following is
the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-
list>Link Text</a>
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it
was
clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<!DOCTYPE html>
<html>
<body>
<h1>Add a hyperlink </h1>
<p><a href="http://www.ppdcagra.dcmsme.gov.in/">MSME PPDC
</a></p>
</body>
</html>
Add link to image
Example:Add link to image
<!DOCTYPE html>
<html>
<body>
<h1>Add a hyperlink to an image</h1>
<p><a href="http://www.ppdcagra.dcmsme.gov.in/">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQpzBAuvKtOgLtx5fL0Ml3lKLT
lioHTClKI3H40bIMzfBvA0IAmcHY17LE2xUN_PENyYac&usqp=CAU"
alt="/www.ppdcagra.dcmsme.gov.in" width="100" height="132">
</a></p>
</body>
</html>
Grouping Content
The <div> and <span> elements allow you to group together several
elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page
within a <div> element to indicate that all of the elements within that
<div> element relate to the footnotes.
You might then attach a style to this <div> element so that they appear
using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
SPAN
The <span> element, on the other hand, can be used to group inline
elements only. So, if you have a part of a sentence or paragraph
which you want to group together, you could use the <span> element
as follows
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and
the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.
Table Heading is Defined by <th>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table
cell.
<!DOCTYPE html>
<html>
<body>
<h2>A basic HTML table</h2>
<table border=1>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To undestand the example better, we have added borders to the table.</p>
</body>
</html>
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or
columns.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table border=1 cellpadding= “2” cellwspacing=”2”>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
</body>
</html>
HTML – FRAMES
The HTML frameset and frame elements were used to create page layouts
in which certain content remained visible while other content was
scrollable.
The basic concept behind frames is pretty simple:
⚫ Use the frameset element in place of the body element in an HTML
document.
⚫ Use the frame element to create frames for the content of the web page.
⚫ Use the src attribute to identify the resource that should be loaded inside
each frame.
Create a different file with the contents for each frame.
Frame1.html
Frame2.html
<!DOCTYPE html>
<html> <!DOCTYPE html>
<body> <html>
<h1>Frame 1</h1> <body>
<p>Contents of Frame 1</p> <h1>Frame 2</h1>
</body> <p>Contents of Frame 2</p>
</html> </body>
</html>
Frame3.html Frame4.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h1>Frame 3</h1> <h1>Frame 4</h1>
<p>Contents of Frame 3</p> <p>Contents of Frame 4</p>
</body> </body>
</html> </html>
Frames.htm
l
<!DOCTYPE html>
<html>
<frameset cols="50,20,30">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
HTML Forms
An HTML form is used to collect user input. The user input is most often
sent to a server for processing.
The <form> Element
HTML
The HTML <form> element is used to create an HTML form for user input:
Syntax:
Forms
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
The HTML <form> Elements
➢ <label> : It defines label for <form> elements.
➢ <input> : It is used to get input data from the form in various types
such as text, password, email, etc by changing its type.
➢ <button> : It defines a clickable button to control other elements or execute a
functionality.
➢ <select> : It is used to create a drop-down list.
➢ <textarea> : It is used to get input long text content.
➢ <fieldset> : It is used to draw a box around other form elements and group the
related data.
➢ <legend> : It defines caption for fieldset elements.
➢ <datalist> : It is used to specify pre-defined list options for input controls.
➢ <output> : It displays the output of performed calculations.
➢ <option> : It is used to define options in a drop-down list.
➢ <optgroup> : It is used to define group-related options in a drop-down list.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type
attribute.
Here are some examples:
The <label> Element
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices.
<!DOCTYPE
Examplehtml>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
Example:
choices.
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
Calendar
<input type=“date” name=“bday”>
calendar with local time.
<input type=“datetime-local” name=“bdaytime”>
Email validation
<input type=“email” name=“email”>
URL validation
<input type=“url” name=“sitename”>
If you want to display textbox with number range you can set type to number.
<input type=“number” name=“quantity” min=“1” max=“5”>
If you want to display a range control you can use type as range.
<input type=“range” min=“0” max=“10” step=“2” value=“6”>
Want to make text box as search engine box.
<input type=“search” name=“googleengine”>
Time input.
<input type=“time” name=“usr_time”>
If you want to make text box to accept telephone numbers.
<input type=“tel” name=“mytel”>
The <select> Element
The <select> element defines a drop-down list:
<!DOCTYPE html>
<html>
<body> Note:
<h2>The select Element</h2> The <option>
<p>The select element defines a drop-down list:</p> elements defines
<form action="/action_page.php"> an option that can
<label for="cars">Choose a car:</label> be selected.
<select id="cars" name="cars">
<option value="volvo">Volvo</option> By default, the
<option value="saab">Saab</option> first item in the
<option value="fiat">Fiat</option> drop-down list is
<option value="audi">Audi</option> selected.
</select>
<input type="submit">
</form>
<select id="cars" name="cars" size="3">
</body>
</html>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form>
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit"> Note: style="width:200px;
</form>
</body> height:600px;
</html>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
The <button> Element
The <button> element defines a clickable
button:
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')" name=”ok”>Click
Me!</button>
</body>
</html>
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a
form. This element is used with <legend> element which provide caption for
the grouped elements.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
Form Attribute
Example of Action & required attribute:
<!DOCTYPE html>
<html>
<body>
<h2>Demo of action attribute of form element</h2>
<form action="action.html" method="post">
<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<label>Account holder name</label><br>
<input type="text" name="uname" size="40" required><br><br>
<input type="submit">
</form>
<p><b>It will redirect to a new page "action.html" when you click on submit
button</b></p>
</body>
</html>
⚫ Input Type Color
⚫ <input type="color" id="favcolor" name="favcolor">
⚫ Input Type Image
⚫ <input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
⚫ Input Type File
⚫ <label for="myfile">Select a file:</label>
⚫ <input type="file" id="myfile" name="myfile">
⚫ Input Type Month
⚫ <label for="bdaymonth">Birthday (month and
year):</label>
⚫ <input type="month" id="bdaymonth"
name="bdaymonth">
⚫ Input Type Reset
⚫ <input type="reset">
HTML Input Attributes
1.The value Attribute
The input value attribute specifies an initial value for an input
field:
<input type="text" id="fname" name="fname" value="John">
2.The readonly Attribute
The input readonly attribute specifies that an input field is read-
only.
A read-only input field cannot be modified (however, a user can
tab to it, highlight it, and copy the text from it).
<input type="text" id="fname" name="fname" value="John"
readonly>
3.The disabled Attribute
The input disabled attribute specifies that an input field should be
disabled.
A disabled input field is unusable and un-clickable.
<input type="text" id="fname" name="fname" value="John"
⚫ The maxlength Attribute
⚫ The input maxlength attribute specifies the maximum number of
characters allowed in an input field.
⚫ <label for="pin">PIN:</label><br>
⚫ <input type="text" id="pin" name="pin" maxlength="4" size="4">
⚫ The multiple Attribute
⚫ The input multiple attribute specifies that the user is allowed to enter more
than one value in an input field.The multiple attribute works with the
following input types: email, and file.
⚫ <label for="files">Select files:</label>
⚫ <input type="file" id="files" name="files" multiple>
⚫ The placeholder Attribute
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search,
url, tel, email, and password.
<input type="tel" id="phone" name="phone"
placeholder="9980780990"
The list Attribute
The input list attribute refers to a <datalist> element that contains
pre- defined options for an <input> element.
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a
webpage). The HTML <iframe> tag defines an inline frame, hence it is also
called as an Inline frame.
An HTML iframe embeds another document within the current HTML document
in the rectangular region.
The webpage content and iframe contents can interact with each other using
JavaScript.
Iframe Syntax
<iframe src="URL"></iframe>
BASICS OF CSS
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
What is CSS?
CSS stands for Cascading Style Sheets
CSS saves a lot of work. It can control the layout of multiple web
pages all at once
External style sheets are stored in CSS files
Development of large websites, where fonts and color information
were added to every single page, became a long and expensive
process.
To solve this problem, the World Wide Web Consortium (W3C)
created CSS.
CSS SYNTAX
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your
document. A style rule is made of three parts −
Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could
be color, border etc.
Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
Example − You can define a table border as follows −
table{ border :1px solid #C00; }
Eg:
p{
color: red;
text-align: Center;
}
Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and Center is the property value
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class
name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center; (All are inside the <style>.......</style>)
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.
The <p> element will be styled according to class="center" and to class="large"
Note: it won’t affect other element eg <h1>
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to
select one unique element!
To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Three Ways to Insert CSS
There are three ways of inserting a
style sheet:
⚫ External CSS
⚫ Internal CSS / Embedded CSS
⚫ Inline CSS
External CSS
The <link> element can be used to include an external stylesheet file in your
HTML document.
Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
An external style sheet is a separate text file with .css extension. You define all
the Style rules within this text file and then you can include this file in any HTML
document using <link> element.
Here is the generic syntax of including external CSS file −
<head> <link type = "text/CSS" href = "..."
media = "..." /></head>
Example:
<!DOCTYPE html> "mystyle.css"
<html> body {
<head> background-color: lightblue;
<link rel="stylesheet" type=”text/css” }
href="mystyle.css">
</head> h1 {
<body> color: navy;
margin-left: 20px;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p>
</body>
</html>
Embedded CSS/ Internal CSS
The internal style is defined inside the <style> element, inside the head section.
The <style> Element -
You can put your CSS rules into an HTML
document using the <style> element. This tag is placed inside the
<head>...</head> tags. Rules defined using this syntax will be applied to all
the elements available in the document.
<head>
<st yle t ype = "text/css" >
body {background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
The style Attribute
You can use style attribute of any HTML element to
define style rules. These rules will be applied to that
element only. Here is the generic syntax −
<element style = "...style rules....">
Example
Inline styles are defined within the "style" attribute of the relevant element:
<!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>
Imported CSS - @import Rule
@import is used to import an external stylesheet in a
manner similar to the <link> element. Here is the generic
syntax of @import rule.
1. <head>
@import "URL";
</head>
2. <head>
@import url("URL");
</head>
CSS Rules Overriding
We have discussed four ways to include style sheet
rules in a an HTML document. Here is the rule to
override any Style Sheet Rule.
Any inline style sheet takes highest priority. So, it will
override any rule defined in <style>...</style> tags or
rules defined in any external style sheet file.
Any rule defined in <style>...</style> tags will
override rules defined in any external style sheet file.
Any rule defined in external style sheet file takes
lowest priority, and rules defined in this file will be
applied only when above two rules are not
applicable.
CSS Comments
Many times, you may need to put additional
comments in your style sheet blocks. So, it is very
easy to comment any part in style sheet. You can
simple put your comments inside /*.....this is a
comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in
similar way you do in C and C++ programming
languages.
Set the Background Color
The background-color property is used to set the
background color of an element.
The background-image property is used to set the
background image of an element.
The background-repeat property is used to control the
repetition of an image in the background.
The background-position property is used to control the
position of an image in the background.
The background-attachment property is used to control
the scrolling of an image in the background.
The background property is used as a shorthand to specify
a number of other background properties.
EX: for background color, Text color , both & border.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet
</p>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:#867890;">Lorem ipsum...</p>
<h1 style="background-color:DodgerBlue;color:Tomato;">Hello World</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
</body>
</html>
CSS background-image
Property
The background-image property specifies an image to use as the background of
an element.
By default, the image is repeated so it covers the entire element.
Example
Use the shorthand property to set the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
CSS background-image Property
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRnIX_WtVC8SLDNymWVIVzhV1CwH6-NNvXJ7y- zNpUK1A5s7y-
DCyf2jZUOs1uB3- y1k44&usqp=CAU");
}
#example1 {
border: 2px solid black;
padding: 25px;
background: url("https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-
2148902771.jpg?w=2000");
background-size: auto;
}
</style>
</head>
<body>
<h1 style="background-color:white">The background-image Property</h1>
<div id="example1">
<h2>Hello World</h2>
</div>
</body>
</html>
Set the Font Family
The font-family property is used to change the face of a font.
The font-style property is used to make a font italic or oblique.
The font-variant property is used to create a small-caps effect.
The font-weight property is used to increase or decrease how bold or light a font appears.
The font-size property is used to increase or decrease the size of a font.
The font property is used as shorthand to specify a number of other font properties.
font: italic small-caps bold 12px/30px Georgia,
serif;
The Image Border Property
CSS plays a good role to control image display. You
can set the following image properties using CSS.
The border property is used to set the width of an
image border.
The height property is used to set the height of an
image.
The width property is used to set the width of an image.
The border-style Property
The border-radius property is used to add rounded borders to an element:
➢ Normal border
➢ Round border
➢ Rounder border
➢ Roundest border
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
➢ dotted Defines a dotted border
➢ Dashed Defines a dashed border
➢ solid Defines a solid border
➢ double Defines a double border
➢ groove Defines a 3D grooved border. The effect depends on the border-color value
➢ ridge Defines a 3D ridged border. The effect depends on the border-color value
➢ inset Defines a 3D inset border. The effect depends on the border-color value
➢ outset Defines a 3D outset border. The effect depends on the border-color value
➢ none Defines no border
➢ hidden Defines a hidden border
The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).
EXAMPLE
<!DOCTYPE html>
<html> <h2>The border-style Property</h2>
<head><style> <p>This property specifies what kind of
p.dotted {border-style: dotted;} border to display:</p>
p.dashed {border-style: <p class="dotted">A dotted border.</p>
dashed;} <p class="dashed">A dashed border.</p>
p.solid {border-style: solid;} <p class="solid">A solid border.</p>
p.double {border-style: double;} <p class="double">A double border.</p>
p.groove {border-style: groove;} <p class="groove">A groove border.</p>
p.ridge {border-style: ridge;} <p class="ridge">A ridge border.</p>
p.inset {border-style: inset;} <p class="inset">An inset border.</p>
p.outset {border-style: outset;} <p class="outset">An outset border.</p>
p.none {border-style: none;} <p class="none">No border.</p>
p.hidden {border-style: hidden;} <p class="hidden">A hidden border.</p>
p.mix {border-style: dotted <p class="mix">A mixed border.</p>
dashed solid double;} </body>
</style> </html>
CSS Rounded Corners
The CSS border-radius property defines the radius of an element's
corners. #rcorners3 {
Example: border-radius: 25px;
background: url(paper.gif);
<!DOCTYPE html> background-position: left top;
<html> background-repeat: repeat;
<head> padding: 20px;
<style> width: 200px;
#rcorners1 { height: 150px;
border-radius: 25px; }
background-color: </style>
#73AD21; </head>
padding: 20px; <body>
width: 200px;
height: 150px; <h1>The border-radius Property</h1>
}
<p>Rounded corners for an element with a specified background
#rcorners2 { color:</p>
border-radius: 25px; <p id="rcorners1">Rounded corners!</p>
border: 2px solid #73AD21; <p>Rounded corners for an element with a border:</p>
padding: 20px; <p id="rcorners2">Rounded corners!</p>
width: 200px; <p>Rounded corners for an element with a background image:</p>
height: 150px; <p id="rcorners3">Rounded corners!</p>
}
</body>
</html>
CSS Outline
An outline is a line drawn outside the element's border. Eg::
p{
CSS has the following outline properties:
⚫ outline-style
margin: 30px;
⚫ outline-color border: 1px solid
⚫ Outline-width black;
⚫ outline-offset outline: 1px solid red;
⚫ outline outline-offset: 15px;}
<p style=outline-style: dashed;>A groove outline. The effect depends on the outline-
color value.</p>
CSS Outline - Shorthand property
p.ex3 {outline: 5px solid yellow;}
CSS Outline Offset
The outline-offset property adds space between an outline and the edge/border of
an element.
Set the Text Color
The color property is used to set the color of a text.
The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the letters that make up a word.
The word-spacing property is used to add or subtract space between the words of a sentence.
The text-indent property is used to indent the text of a paragraph.
The text-align property is used to align the text of a document.
The text-decoration property is used to underline, ov erline, and strikethrough text.
The text-transformproperty is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
CSS Text Alignment
The text-align property is used to set the horizontal alignment of a
text.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
P
{
text-align: justify;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
<html> <body>
<head>
<style> <h1>Using the text-transform
p.uppercase { property</h1>
text-transform: uppercase;
} <p class="uppercase">This text is
p.lowercase { transformed to uppercase.</p>
text-transform: lowercase; <p class="lowercase">This text is
} transformed to lowercase.</p>
p.capitalize { <p class="capitalize">This text is
text-transform: capitalize; capitalized.</p>
}
</style> </body>
</head> </html
CSS Text Spacing
CSS Text Indentation, Letter Spacing, Line Height, Word Spacing, and
White Space
⚫ text-indent Eg:
⚫ letter-spacing text-indent: 50px;
⚫ line-height letter-spacing: 5px;
⚫ word-spacing line-height: 1.8;
⚫ white-space word-spacing: 10px;
CSS Text Shadow
<!DOCTYPE html>
<html>
<head>
<style> *specify the horizontal shadow (2px)
h1 { *The vertical shadow (2px)
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; *color (red) to the shadow
}
</style> *blur effect (5px) to the shadow
</head>
<body>
<h1>Text-shadow with red and blue neon
glow!</h1>
</body>
</html>
CSS Links
The four links states are:
⚫ a:link - a normal, unvisited link
⚫ a:visited - a link the user has visited
⚫ a:hover - a link when the user mouses over it
⚫ a:active - a link the moment it is clicked
<!DOCTYPE html> a:active {
<html> background-color: hot pink;
<head> }
<style> </style>
a:link { </head>
background-color: red; <body>
}
<h2>Styling a link with background-color property</h2>
a:visited {
background-color: cyan; <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
} <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
a:hover { <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in
background-color: lightgreen; order to be effective.</p>
}
</body>
</html>
Link Buttons
<!DOCTYPE html> a:hover, a:active {
<html> background-color: green;
<head> }
<style> </style>
a:link, a:visited { </head>
background-color:#f44336; <body>
color: white; <h2>Link Button</h2>
padding: 14px 25px; <p>A link styled as a button:</p>
text-align: center; <a href="default.asp" target="_blank">This is a
text-decoration: none; link</a>
display: inline-block; </body>
} </html>
Example for cursor:
<span style="cursor:auto">auto(or)text</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
CSS Lists
The list-style-type Property
We have the following five CSS properties, which
can be used to control lists −
The list-style-type allows you to control the shape or
appearance of the marker.
The list-style-position property specifies the position of
the list-item markers (bullet points).(inside/ outside)
The list-style-image specifies an image for the marker
rather than a bullet point or number.
The list-style serves as shorthand for the preceding
properties.
The marker-offset specifies the distance between a
marker and the text in the list.
<!DOCTYPE html>
<html> <body>
<head>
<style> <h1>Styling Lists With Colors</h1>
ol {
background: #ff9999;
padding: 20px; <ol>
} <li>Coffee</li>
ul { <li>Tea</li>
background: #3399ff; <li>Coca Cola</li>
padding: 20px; </ol>
list-style-type: circle;
}
ol li { <ul>
background: #ffe5e5; <li>Coffee</li>
color: darkred; <li>Tea</li>
padding: 5px; <li>Coca Cola</li>
margin-left: 35px;
</ul>
list-style-type: upper-roman;
}
ul li { </body>
background: #cce5ff; </html>
color: darkblue;
margin: 5px;
}
</style>
</head>
CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a
combinator.
There are four different combinators in CSS: 1. Descendant
⚫ descendant selector (space) div p {
⚫ child selector (>) background-color: yellow;
⚫ adjacent sibling selector (+) }
⚫ general sibling selector (~) 2.Child Selector (>)
Example
3. Adjacent Sibling Selector (+) div > p {
The adjacent sibling selector is used to select an background-color: yellow;
element that is directly after another specific }
element. Example
div + p {
background-color:
yellow;}
4. General Sibling Selector (~)
The general sibling selector selects all elements that are next siblings of a specified element.
Example
div ~ p {
background-color: yellow;
}
CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single
border: Example
table {border-collapse: collapse;}
CSS Table Alignment
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of
the content in <th> or <td>.
Eg:text-align: center
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>.
Eg:vertical-align: bottom;
CSS Table Style
Table Padding
To control the space between the border and the content in a table, use the padding property
on <td> and <th> elements:
Example
th, td {
padding: 15px;
text-align: left;
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:
Example
th, td {
border-bottom: 1px solid #ddd;
}
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
Example
tr:hover {background-color: coral;}
Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-
color to all even (or odd) table rows:
Example
tr:nth-child(even) {background-color: #f2f2f2;}
Table Color
The example below specifies the background color and text color of <th>
elements:
Example
th {
background-color: #04AA6D;
color: white;
}
CSS Layout – Overflow
The overflow property specifies whether to clip the content or to add scrollbars when
the content of an element is too big to fit in the specified area.
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the
element's box
Hidden - The overflow is clipped, and the rest of the content will be invisible
Scroll - The overflow is clipped, and a scrollbar is added to see the rest of the
content
auto - Similar to scroll, but it adds scrollbars only when necessary
Example::
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's
box:</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow
property specifies what happens if content overflows an element's box.</div>
</body>
</html>
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to change the overflow of content
just horizontally or vertically (or both):
overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.
Eg:
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on
which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the
text in a container.
The float property can have one of the following values:
⚫ left - The element floats to the left of its container
⚫ right - The element floats to the right of its container
⚫ none - The element does not float (will be displayed just where it occurs in the text). This
is default
⚫ inherit - The element inherits the float value of its parent
⚫ In its simplest use, the float property can be used to wrap text around images.
Example - float: right;
The following example specifies that an image should float to the right in a text:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h2>Float Left</h2>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.
Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Float Next To Each Other
Normally div elements will be displayed on top of each other. However, if we use float: left
we can let elements float next to each other:
Example:
<!DOCTYPE html>
<html> <body>
<head>
<style> <h2>Float Next To Each Other</h2>
div {
float: left; <p>In this example, the three divs will float
padding: 15px; next to each other.</p>
}
.div1 { <div class="div1">Div 1</div>
background: red; <div class="div2">Div 2</div>
} <div class="div3">Div 3</div>
.div2 {
background: yellow; </body>
} </html>
.div3 {
background: green;
}
</style>
</head>
CSS Layout - clear and clearfix
The clear Property
When we use the float property, and we want the next element below (not on
right or left), we will have to use the clear property.
The clear property specifies what should happen with the element that is next to
a floating element.
The clear property can have one of the following values:
none - The element is not pushed below left or right floated elements. This is
default
left - The element is pushed below left floated elements
right - The element is pushed below right floated elements
both - The element is pushed below both left and right floated elements
inherit - The element inherits the clear value from its parent
The clearfix Hack
If a floated element is taller than the containing element, it will "overflow"
outside of its container. We can then add a clear fix hack to solve this problem:
Example: <body>
<style> <h2>Without Clearfix</h2>
div { <p>This image is floated to the right. It is also taller than the element
border: 3px solid containing it, so it overflows outside of its container:</p>
<div>
#4CAF50;
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170"
padding: 5px; height="170">
} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
.img1 { imperdiet...
float: right; </div>
} <h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the
.img2 {
containing element:</p>
float: right; <div class="clearfix">
} <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170"
.clearfix { height="170">
overflow: auto; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
} imperdiet...
</div>
</style> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<style> <body>
.div1 {
float: left; <h2>Without clear</h2>
padding: 10px; <div class="div1">div1</div>
border: 3px solid #73AD21; <div class="div2">div2 - Notice that div2 is after div1 in the HTML
} code. However, since div1 floats to the left, the text in div2 flows
.div2 { around div1.</div>
padding: 10px; <br><br>
border: 3px solid red;
} <h2>With clear</h2>
.div3 { <div class="div3">div3</div>
float: left; <div class="div4">div4 - Here, clear: left; moves div4 down below the
padding: 10px; floating div3. The value "left" clears elements floated to the left. You
border: 3px solid #73AD21; can also clear "right" and "both".</div>
}
.div4 { </body>
padding: 10px; </html>
border: 3px solid red;
clear: left;
}
</style>
</head>
CSS Layout - The display Property
The display property is the most important CSS property for controlling layout.
The display Property
⚫ The display property specifies if/how an element is displayed.
⚫ Every HTML element has a default display value depending on what type of element it
is. The default display value for most elements is block or inline
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
<span>
<a>
<img>
Display: none;
display: none; is commonly used with JavaScript to hide and show elements
without deleting and recreating them. Take a look at our last example on this page if you want
to know how this can be achieved. The <script> element uses display: none; as default.
Example:
<!DOCTYPE html> <body>
<html> <h1>Display links as block elements</h1>
<head> <a href="/html/default.asp" target="_blank">HTML</a>
<style> <a href="/css/default.asp" target="_blank">CSS</a>
a{ <a href="/js/default.asp" target="_blank">JavaScript</a>
display: inline; </body>
} </html>
</style>
CSS Layout - The position Property
Position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
⚫ static
⚫ relative
⚫ fixed
⚫ absolute
⚫ sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently depending
on the position value.
1. position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:
CSS Fixed Positioning
The fixed positioning property helps to put the text fixed on the browser. This
fixed test is positioned relative to the browser window, and doesn't move even you
scroll the window.
Example:
<!DOCTYPE html> <html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 50px;
right: 5px;
color: blue;
}
</style>
</head>
<body>
<p>Some text...</p><p>Some text...</p><p>Some text...</p><p>........</p><p>.... ...</p
><p>........</p><p>........</p><p>........</p><p>........</p>
<p>........ </p>
<p class="pos_fixed">This is the fix positioned text.</p>
</body>
</html>
CSS Relative Positioning
The relative positioning property is used to set the element relative to its normal position.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -10px; }
h2.pos_right {
position: relative;
left: 30px; }
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>
<p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>
<p>The style "left:30px" adds 30 pixels to the element's original left position.</p>
</body>
</html>
CSS Absolute Positioning:
The absolute positioning is used to position an element relative to the first parent element that
has a position other than static. If no such element is found, the containing block is HTML.
With the absolute positioning, you can place an element anywhere on a page.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>
</head>
<body>
<h2>This heading has an absolute position</h2>
<p> The heading below is placed 150px from the left and 250px from the top of the page.</p>
</body>
</html>
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.A sticky element
toggles between relative and fixed, depending on the scroll position.
Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below).
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
</div>
</body>
</html>
Combined Example
<html>
<head> div.fixed { <body>
<style> position: fixed; <h2>position: relative;</h2>
div.sticky { bottom: 0; <div class="sticky">I am sticky!</div>
right: 0; <p>An element with position: relative; is
position: -webkit-sticky; positioned relative to its normal
width: 300px;
position: sticky; border: 3px solid #73AD21; position:</p>
top: 0; <div class="static">
} This div element has position: static;
padding: 5px; div.relative1 { </div></br></br></br>
background-color: #cae8ca; position: relative; <div class="relative">
border: 2px solid #4CAF50; width: 400px; This div element has position: relative;
} height: 200px; </div></br></br></br></br></br></br>
<div class="fixed">
div.relative { border: 3px solid #73AD21; This div element has position: fixed;
position: relative; } </div></br></br></br>
left:100px; div.absolute { <div class="relative1">This div element
border: 3px solid #73AD21; position: absolute; has position: relative;
top: 80px; <div class="absolute">This div element
} has position: absolute;</div>
div.static { right: 0;
</div>
position: static; width: 200px;
<div style="padding-bottom:2000px">
height: 100px; </div>
border: 3px solid #73AD21;
border: 3px solid #73AD21; </body>
} }</style></head> </html>
Example for sentence position inside the Image
<!DOCTYPE html>
<html>
<head>
<style> .bottomleft {
.container { position: </head>
position: relative; absolute; <body>
} bottom: 8px; <div class="container">
.topleft { left: 16px; <img src="1.jpg" alt="Cinque Terre" width="1000"
position: absolute; font-size: 18px; height="300">
top: 8px; } <div class="topleft">Top Left</div>
.topright { <div class="center">Centered</div>
left: 16px;
position: absolute; <div class="bottomright">Bottom Right</div>
font-size: 18px;
top: 8px; <div class="bottomleft">Bottom Left</div>
} <div class="topright">Top Right</div>
right: 16px;
.center { font-size: 18px; </div>
position: absolute; } </body>
top: 50%; img { </html>
width: 100%; width: 100%;
text-align: center; height: auto;
font-size: 18px; opacity: 0.3;
} }
.bottomright { </style>
position: absolute;
bottom: 0px;
right: 0px;
CSS Opacity / Transparency
The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-
over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
<html>
<head>
<style>
div.background { <body>
background: url(klematis.jpg)
repeat; <div class="background">
border: 2px solid black; <div class="transbox">
} <p>This is some text that is placed in the
transparent box.</p>
div.transbox { </div>
margin: 30px; </div>
background-color: #ffffff;
border: 1px solid black; </body>
opacity: 0.6; </html>
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
CSS Navigation Bar
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links
1. CSS Vertical Navigation Bar
Example explained:
display: block; - Displaying the links as block elements makes the whole link area
clickable (not just the text), and it allows us to specify the width (and padding, margin,
height, etc. if you want)
EXAMPLE OF BASIC VERTICAL NAVIGATION BAR
<!DOCTYPE html>
<html> /* Change the link color on hover */
<head> li a:hover {
<style> background-color: #555;
ul { color: white;}
list-style-type: none; </style>
margin: 0; </head>
padding: 0; <body>
width: 200px; <h2>Vertical Navigation Bar</h2>
background-color: #f1f1f1; <ul>
} <li><a href="#home">Home</a></li>
li a { <li><a href="#news">News</a></li>
display: block; <li><a
color: #000; href="#contact">Contact</a></li>
padding: 8px 16px; <li><a href="#about">About</a></li>
text-decoration: none; </ul>
} </body>
</html>
<!DOCTYPE html>
<html> li a:hover:not(.active) {
<head> background-color: #555;
<style> color: white;
ul { }
list-style-type: none; </style></head>
margin: 0; <body>
padding: 0; <h2>Vertical Navigation Bar</h2>
width: 200px; <p>In this example, we create an "active" class
background-color: #f1f1f1;} with a green background color and a white text.
li a { The class is added to the "Home" link.</p>
display: block; <ul>
color: #000; <li><a class="active"
padding: 8px 16px; href="#home">Home</a></li>
text-decoration: none; <li><a href="#news">News</a></li>
} <li><a href="#contact">Contact</a></li>
li a.active { <li><a href="#about">About</a></li>
background-color: #04AA6D; </ul>
color: white;} </body>
</html>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */}
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is
set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the
sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
Horizontal Navigation Bar Examples
Create a basic horizontal navigation bar with a dark background color and change the
background color of the links when the user moves the mouse over them
li a {
<!DOCTYPE html> display: block;
<html> color: white;
<head> text-align: center;
<style> padding: 14px 16px;
ul { text-decoration: none;}
list-style-type: none; li a:hover {background-color: #111;}
margin: 0; </style></head>
padding: 0; <body>
overflow: hidden; <ul>
<li><a class="active" href="#home">Home</a></li>
background-color: #333;
<li><a href="#news">News</a></li>
}
<li><a href="#contact">Contact</a></li>
li { <li><a href="#about">About</a></li>
float: left; </ul>
} </body>
</html>
CSS Dropdowns
Create a dropdown menu that allows the user to choose an option from a list
HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button>
element.
Use a container element (like <div>) to create the dropdown content and add whatever you
want inside of it.
Wrap a <div> element around the elements to position the dropdown content correctly with
CSS.
CSS) The .dropdown class uses position:relative, which is needed when we want the
dropdown content to be placed right below the dropdown button (using position:absolute).
The .dropdown-content class holds the actual dropdown content. It is hidden by default,
and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to
change this. Tip: If you want the width of the dropdown content to be as wide as the
dropdown button, set the width to 100% (and overflow:auto to enable scroll on small
screens).
Instead of using a border, we have used the CSS box-shadow property to make the
dropdown menu look like a "card".
The :hover selector is used to show the dropdown menu when the user moves the mouse
over the dropdown button.
CSS Dropdowns
<html> .dropdown-content a:hover {background-color: #f1f1f1}
<head><style> .dropdown:hover .dropdown-content {
.dropbtn { display: block;
background-color: #4CAF50; }
color: white; .dropdown:hover .dropbtn {
padding: 16px; background-color: #3e8e41;
font-size: 16px; }
border: none; </style>
cursor: pointer;} </head>
.dropdown { <body>
position: relative; <h2>Dropdown Menu</h2>
display: inline-block;} <p>Move the mouse over the button to open the dropdown
.dropdown-content { menu.</p>
display: none; <div class="dropdown">
position: absolute; <button class="dropbtn">Dropdown</button>
background-color: #f9f9f9; <div class="dropdown-content">
min-width: 160px; <a href="#">Link 1</a>
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); <a href="#">Link 2</a>
z-index: 1;} <a href="#">Link 3</a>
.dropdown-content a { </div>
color: black; </div>
padding: 12px 16px; <p><strong>Note:</strong> We use href="#" for test links. In a real
text-decoration: none; web site this would be URLs.</p>
display: block;} </body>
</html>
Dropdown Image
How to add an image and other content inside the dropdown box
<html>
<head> <body>
<style> <h2>Dropdown Image</h2>
.dropdown { <p>Move the mouse over the image below to
position: relative; open the dropdown content.</p>
display: inline-block; <div class="dropdown">
} <img src="1.jpg" alt="Cinque Terre"
.dropdown-content { width="100" height="50">
display: none; <div class="dropdown-content">
position: absolute; <img src="1.jpg" alt="Cinque Terre"
background-color: #f9f9f9; width="300" height="200">
min-width: 160px;
<div class="desc">Beautiful Cinque
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
Terre</div>
} </div>
.dropdown:hover .dropdown-content { </div>
display: block;} </body>
.desc { </html>
padding: 15px;text-align: center;
}</style></head>
CSS Image Gallery
CSS can be used to create an imagegallery.
<!DOCTYPE html> <body>
<html> <div class="gallery">
<head> <a target="_blank" href="img_5terre.jpg">
<style> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
div.gallery { </a>
<div class="desc">Add a description of the image here</div>
margin: 5px;
</div>
border: 2px solid #ccc; <div class="gallery">
float: left; <a target="_blank" href="img_forest.jpg">
width: 180px; <img src="img_forest.jpg" alt="Forest" width="600" height="400">
} </a>
div.gallery:hover { <div class="desc">Add a description of the image here</div>
border: 1px solid #777; </div>
} <div class="gallery">
div.gallery img { <a target="_blank" href="img_lights.jpg">
width: 100%; <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
height: auto; </a>
<div class="desc">Add a description of the image here</div>
}
</div>
div.desc { <div class="gallery">
padding: 15px; <a target="_blank" href="img_mountains.jpg">
text-align: center; <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
} </a>
</style> <div class="desc">Add a description of the image here</div>
</head> </div></body>
CSS Forms
The example above applies to all <input> elements. If you only want to style a specific input type,
you can use attribute selectors:
input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
etc..
<!DOCTYPE html>
<html> <body>
<head> <h2>Input fields with color</h2>
<style> <form>
input[type=text] { <label for="fname">First Name</label>
width: 100%; <input type="text" id="fname" name="fname"
padding: 12px 20px; value="John">
margin: 8px 0; <label for="lname">Last Name</label>
box-sizing: border-box; <input type="text" id="lname" name="lname" value="Doe">
border: none; </form>
background-color: #3CBC8D; </body>
color: white;
</html>
}
input[type=text]:focus {
background-color: lightblue;}
</style>
</head>
Styling Textareas Styling Select Menus
Tip: Use the resize property Example
to prevent textareas from select {
width: 100%;
being resized (disable the
padding: 16px 20px;
"grabber" in the bottom right
border: none;
corner): border-radius: 4px;
background-color: #f1f1f1;
textarea { }
width: 100%; Styling Input Buttons
height: 150px; Example
padding: 12px 20px; input[type=button], input[type=submit],
box-sizing: border-box; input[type=reset] {
border: 2px solid #ccc; background-color: #04AA6D;
border-radius: 4px; border: none;
background-color: #f8f8f8; color: white;
resize: none; padding: 16px 32px;
} text-decoration: none;
margin: 4px 2px;
cursor: pointer;
CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;}
p::first-line {
color: #0000ff;
font-variant: small-caps;}
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and
the first line of a text!</p>
</body>
</html>
The following properties The following properties apply to
apply to the ::first-line the ::first-letter pseudo- element:
pseudo-element:
⚫ font properties
⚫ font properties ⚫ color properties
⚫ color properties ⚫ background properties
⚫ background properties ⚫ margin properties
⚫ word-spacing ⚫ padding properties
⚫ letter-spacing ⚫ border properties
⚫ text-decoration ⚫ text-decoration
⚫ vertical-align ⚫ vertical-align (only if "float" is
⚫ text-transform "none")
⚫ line-height ⚫ text-transform
⚫ clear ⚫ line-height
⚫ float
⚫ clear
All CSS Pseudo Elements
Selector Example Example description
::after p::after Insert something after the content of each <p>
element
::before element Insert something before the content of each <p>
::first-letter p::first-letter Selects the first letter of each <p> element
::marker ::marker Selects the markers of list items
::selection p::selection Selects the portion of an element that is selected
by a user
::first-line p::first-line Selects the first line of each <p> element
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(https://media.tenor.com/6LrqOkPYWa4AAAAM/bye-im.gif);
}
h1::after {
content: url(https://media.tenor.com/6LrqOkPYWa4AAAAM/bye-im.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h2>This is a heading</h2>
</body>
</html>
Example for
marker: <body>
<ul>
<!DOCTYPE <li>Coffee</li>
html> <li>Tea</li>
<li>Milk</li>
<html>
</ul>
<head> <ol>
<style> <li>First</li>
::marker { <li>Second</li>
color: red; <li>Third</li>
font-size: 23px; </ol>
} </body>
</style> </html>
</head>
CSS Counters
CSS counters are "variables" maintained by CSS whose values can be incremented by
CSS rules (to track how many times they are used). Counters let you adjust the
appearance of content based on its placement in the document.
Automatic Numbering With Counters
CSS counters are like "variables". The variable values can be incremented by CSS
rules (which will track how many times they are used).
To work with CSS counters we will use the following properties:
counter-reset - Creates or resets a
counter
Counter-increment - Increments a counter value
content - Inserts generated
content
counter() or counters() function - Adds the value of a counter to an element
To use a CSS counter, it must first be created with counter-reset.
The following example creates a counter for the page (in the body selector), then
increments the counter value for each <h2> element and adds "Section <value of the
Example for Nesting Counters::
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
<!DOCTYPE html>
h1 {
<html> counter-reset: subsection;
<head> }
<style> h1::before {
counter-increment: section;
body {
content: "Section " counter(section) ". ";}
counter-reset: section;} h2::before {
h2::before { counter-increment: subsection;
counter-increment: section; content: counter(section) "." counter(subsection) " ";}
</style>
content: "Section " counter(section) ": ";}
</head>
</style> <body>
</head> <h1>HTML/CSS Tutorials</h1>
<body> <h2>HTML</h2>
<h2>CSS</h2>
<h1>Using CSS Counters</h1>
<h2>Bootstrap</h2>
<h2>HTML Tutorial</h2> <h2>W3.CSS</h2>
<h2>CSS Tutorial</h2> <h1>Scripting Tutorials</h1>
<h2>JavaScript Tutorial</h2> <h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>Python Tutorial</h2>
<h2>React</h2>
<h2>SQL Tutorial</h2> <h1>Programming Tutorials</h1>
</body> <h2>Python</h2>
</html> <h2>Java</h2>
<h2>C++</h2>
CSS Website Layout
A website is often divided into headers, menus, content and a footer
Header
A header is usually located at the top of the website (or right below a top
navigation menu). It often contains a logo or the website name:
Example
<html lang="en">
<head><title>CSS Website Layout</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>
Body{
Margin:0;}
.header {
color: #F1F1F1;
text-align: center;
padding: 20px;
}</style></head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body></html>
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through
your website:
<!DOCTYPE html>
<html lang="en">
<head> /* Change color on hover */
<title>CSS Website Layout</title> .topnav a:hover {
<meta charset="utf-8"> background-color: #ddd;
<meta name="viewport" content="width=device-width, initial- color: black;
scale=1">
}
<style>
*{ </style>
box-sizing: border-box;} </head>
body { <body>
margin: 0;} <div class="header">
/* Style the top navigation bar */ <h1>Header</h1>
.topnav { </div>
overflow: hidden;
<div class="topnav">
background-color: #333;
} <a href="#">Link</a>
/* Style the topnav links */ <a href="#">Link</a>
.topnav a { <a href="#">Link</a>
float: left; </div>
display: block; </body>
color: #f2f2f2;
</html>
text-align: center;
padding: 14px 16px;
Content
The layout in this section, often depends on the target users. The most common
layout is one (or combining them) of the following:
1-column (often used for mobile browsers)
2-column (often used for tablets and laptops) <div class="row">
3-column layout (only used for desktops) <div class="column">
Example:: <h2>Column</h2>
.column { <p>Lorem ipsum dolor sit amet,
float: left; consectetur adipiscing elit. Maecenas
width: 33.33%; sit amet pretium urna. Vivamus
padding: 15px; venenatis velit nec neque ultricies,
} eget elementum magna tristique.
/* Clear floats after the columns Quisque vehicula, risus eget aliquam
*/ placerat, purus leo tincidunt eros, eget
.row:after { luctus quam orci in velit. Praesent
content: ""; scelerisque tortor sed accumsan
display: table; convallis.</p>
Unequal Columns
The main content is the biggest and the most important part
of your site.
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Footer
The footer is placed at the bottom of your page. It often contains information
like copyright and contact info:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="footer">
<p>Footer</p>
</div>
Eg:Website
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given
duration.
In this chapter you will learn about the following properties:
⚫ transition
⚫ transition-delay
⚫ transition-duration
⚫ transition-property
⚫ Transition-timing-function
⚫ To create a transition effect, you must specify two things:
⚫ the CSS property you want to add an effect to
⚫ the duration of the effect
⚫ Note: If the duration part is not specified, the transition will have no effect, because
the default value is 0.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
Transition + Transformation
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
</body>
CSS Animations
CSS allows animation of HTML elements without using JavaScript or
Flash!
In this chapter you will learn about the following properties:
⚫ @keyframes
⚫ animation-name
⚫ animation-duration
⚫ animation-delay
⚫ animation-iteration-count
⚫ animation-direction
⚫ animation-timing-function
⚫ animation-fill-mode
⚫ animation
What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times as you
want.
To use CSS animation, you must first specify some keyframes for the
animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body></html>
Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property specifies whether an animation should be
played forwards, backwards or in alternate cycles.
The animation-direction property can have the following values:
normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards(to make the
animation run forwards first, then backwards)
alternate-reverse - The animation is played backwards first, then forwards(to
make the animation run backwards first, then forwards)
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style></head>
<body>
<h1>CSS Animation</h1>
<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in
alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first,
Specify the fill-mode For an Animation
CSS animations do not affect an element before the first keyframe is played or after the
last keyframe is played. The animation-fill-mode property can override this behavior.
The animation-fill-mode property specifies a style for the target element when the
animation is not playing (before it starts, after it ends, or both).
The animation-fill-mode property can have the following values:
none - Default value. Animation will not apply any styles to the element before or after it
is executing
forwards - The element will retain the style values that is set by the last keyframe
(depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe
(depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards, extending
the animation properties in both directions
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the
style values from the last keyframe when the animation ends:</p>
<div></div>
</body>
Animation Shorthand Property
The example below uses six of the animation properties:
Example
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The same animation effect as above can be achieved by using the shorthand animation
property:
Example
div {
animation: example 5s linear 2s infinite alternate;
}
CSS Box Sizing
The CSS box-sizing property allows us to include the padding and border in
an element's total width and height.
Without the CSS box-sizing Property
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often
appears bigger than you have set (because the element's border and
padding are added to the element's specified width/height).
Without the CSS box-sizing Property With the CSS box-sizing Property
<!DOCTYPE html>
<html> The box-sizing property allows us to
<head> include the padding and border in an element's
<style>
.div1 { total width and height.
width: 300px;
height: 100px;
border: 1px solid blue; If you set box-sizing: border-box; on an element,
} padding and border are included in the width and
.div2 { height:
width: 300px;
height: 100px;
padding: 50px; Syntax:
border: 1px solid red; box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Without box-sizing</h1>
<div class="div1">This div is smaller (width is 300px and height
is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and
height is 100px).</div>
</body>
</html>
CSS3 Introduced Media Queries
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style
sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and
Android phones).
Media Query Syntax
A media query consists of a media type and can contain one or more expressions,
which resolve to either true or false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px
wide or wider.</p>
</body>
</html>
CSS Buttons
Use the :hover selector to change the style of a button when you move
the mouse over it.
Tip: Use the transition-duration property to determine the speed of the
"hover" effect:
<html> <body>
.button1 { .button3:hover {
<head> <h2>Hoverable
background-color: white; background-color:
<style> #f44336; Buttons</h2>
color: black;
.button { color: white; <p>Use the :hover selector
border: 2px solid #4CAF50; to change the style of the
background- } }
color: #4CAF50; .button4 { button when you move the
.button1:hover { mouse over it.</p>
/* Green */ background-color: white;
background-color: color: black; <p><strong>Tip:</strong>
border: none; #4CAF50; Use the transition-duration
border: 2px solid #e7e7e7;
color: white; color: white; } property to determine the
padding: 16px } .button4:hover {background- speed of the "hover"
32px; .button2 { color: #e7e7e7;} effect:</p>
text-align: background-color: white; .button5 { <button class="button
color: black; background-color: white; button1">Green</button>
center; <button class="button
border: 2px solid #008CBA; color: black;
text-decoration: button2">Blue</button>
} border: 2px solid #555555;
none; } <button class="button
display: inline- .button2:hover { button3">Red</button>
.button5:hover {
block; background-color: background-color: <button class="button
font-size: 16px; #008CBA; #555555; button4">Gray</button>
margin: 4px 2px; color: white; color: white; <button class="button
} } button5">Black</button>
transition- </body>
.button3 { </style>
duration: 0.4s; </head> </html>
cursor: pointer; background-color: white;
color: black;
Shadow Buttons & Disabled Buttons
Use the box-shadow property to add shadows to a button:
Example:
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
Disabled Buttons
Use the opacity property to add transparency to a button (creates a "disabled" look).
Tip: You can also add the cursor property with a value of "not-allowed", which will display
a "no parking sign" when you mouse over the button:
Example:
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Button on Image
<!DOCTYPE html>
<html>
<head> .container .btn:hover {
<style> background-color: black;
.container { color: white;
position: relative; }
width: 100%; </style>
max-width: 400px;} </head>
.container img { <body>
width: 100%; <h2>Button on Image</h2>
height: auto;} <p>Add a button on an image:</p>
.container .btn {
position: absolute;
<div class="container">
top: 50%;
<img src="1.jpg" alt="Snow"
left: 50%;
background-color: #f1f1f1; style="width:100%">jgjhghgfghghfghgfh
color: black; <button class="btn">Button</button>
font-size: 16px; </div>
padding: 16px 30px;
border: none; </body>
cursor: pointer; </html>
border-radius: 5px;
Animated Buttons
Add an arrow on hover:
.button span {
.button { cursor: pointer;
<body>
display: inline-block; display: inline-block;
border-radius: 4px; position: relative; <h2>Animated
background-color: transition: 0.5s; Button</h2>
}
#f4511e;
border: none; .button span:after {
<button
color: #FFFFFF; content: '\00bb'; class="button">
text-align: center; position: absolute; <span>Hover </span>
font-size: 28px; opacity:0; </button>
transition: 0.5s;
padding: 20px;
}
width: 200px; </body>
transition: all 0.5s; .button:hover span { </html>
cursor: pointer; padding-right: 25px;
margin: 5px; }
.button:hover span:after {
}
opacity:1;
}
Animated Button-"ripple" effect on click:
<!DOCTYPE html>
<html> position: absolute;
<head> padding-top: 300%;
<style> padding-left: 350%;
.button { margin-left: -20px !important;
position: relative; margin-top: -120%;
background-color: #4CAF50; opacity: 0;
border: none; transition: 0.8s
font-size: 28px; }
color: #FFFFFF; .button:active:after {
padding: 20px; padding: 0;
width: 200px; margin: 0;
text-align: center; opacity: 1;
transition-duration: 0.4s; transition: 0s
text-decoration: none; }
overflow: hidden; </style>
cursor: pointer; </head>
} <body>
.button:after { <h2>Animated Button - Ripple Effect</h2>
content: ""; <button class="button">Click Me</button>
background: #f1f1f1; </body>
display: block; </html>
Animated Button - "Pressed Effect"
<!DOCTYPE html>
<html>
<head>
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none; color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translate(80px);}
</style></head><body>
<h2>Animated Button - "Pressed Effect"</h2>
JAVA SCRIPTS
JavaScript is a dynamic computer programming language. It is
lightweight and most commonly used as a part of web pages,
whose implementations allow client-side script to interact with the
user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities.
JavaScript is a lightweight, interpreted programming language.
Designed for creating network-centric applications.
Complementary to and integrated with Java.
Complementary to and integrated with HTML.
Open and cross-platform
OOPS concepts
Object-Oriented Programming is a methodology
or paradigm to design a program using classes and
objects. It simplifies software development and
maintenance by providing some concepts:
Object
Any entity that has state and behavior is known as
an object
Example: A dog is an object because it
has states like color, name, breed, etc. as well as
behaviors like wagging the tail, barking, eating, etc.
Class
Collection of objects is called class. It is a logical
entity.
Inheritance
When one object acquires all the properties and behaviors of a parent object, it
is known as inheritance. It provides code reusability.
Polymorphism
If one task is performed in different ways, it is known as polymorphism.
Abstraction
Hiding internal details and showing functionality is known as abstraction. For
example phone call, we don't know the internal processing.
Encapsulation
Binding (or wrapping) code and data together into a single unit are known as
encapsulation. For example, a capsule, it is wrapped with different medicines.
Network-centric applications are applications that send data to
the server and are interconnected by a communications network.
Eq:FB
(The network-centric content model allows a user to access data from any
device connected to the Internet. )
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must
learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Applications of Javascript
Programming
Client side validation - This is really important to verify any user input before
submitting it to the server and Javascript plays an important role in validting
those inputs at front -end itself.
Manipulating HTML Pages - Javascript helps in manipulating HTML page on the
fly. This helps in adding and deleting any HTML tag very easily using javascript
and modify your HTML to change its look and feel based on different devices
and requirements.
User Notifications - You can use Javascript to raise dynamic pop-ups on the
webpages to give different types of notifications to your website visitors.
Back-end Data Loading - Javascript provides Ajax library which helps in
loading back-end data while you are doing some other processing. This really
gives an amazing experience to your website visitors.
Presentations - JavaScript also provides the facility of creating presentations
which gives website look and feel. JavaScript provides RevealJS and
BespokeJS libraries to build a web-based slide presentations.
Server Applications - Node JS is built on Chrome's Javascript runtime for
building fast and scalable network applications. This is an event based library
Features of JavaScript
There are following features of JavaScript:
➢ All popular web browsers support JavaScript as they provide built-in execution
environments.
➢ JavaScript follows the syntax and structure of the C programming language.
Thus, it is a structured programming language.
➢ JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
➢ JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
➢ It is a light-weighted and interpreted language.
➢ It is a case-sensitive language.
➢ JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
➢ It provides good control to the users over the web browsers.
JavaScript implementation
JavaScript can be implemented using JavaScript
statements that are placed within the <script>...
</script> HTML tags in a web page.
You can place the <script> tags, containing your
JavaScript, anywhere within your web page, but it is
normally recommended that you should keep it
within the <head> tags.
The <script> tag alerts the browser program to start
interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear
as follows.
<script ...> JavaScript code</script>
JavaScript implementation
The script tag takes two important attributes −
Language − This attribute specifies what scripting
language you are using. Typically, its value will be
javascript. Although recent versions of HTML (and
XHTML, its successor) have phased out the use of
this attribute.
Type − This attribute is what is now recommended
to indicate the scripting language in use and its
value should be set to "text/javascript".
So your Jav aScript segment will look like −
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>
Similarities between java script and java:
1. Both java script and java having same kind of operators
2. Java script uses similar control structures of java
3. Nowadays both are used as languages for use on internet.
4. Labeled break and labeled continue both are similar
Difference between java script and java:
1. Java is object –oriented programming language where as java script
is object-based programming language.
2. Java is full –featured programming language but java script is not.
3. Java source code is first compiled and the client interprets the code.
Java script code is not compiled, only interpreted.
3 Places to put JavaScript code
➢ Between the body tag of html
➢ Between the head tag of html
➢ In .js file (external JavaScript)
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML
page, or in both.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
External JavaScript
Scripts can also be placed in external files:
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different
web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source)
attribute of a <script> tag:
Example
<script src="myScript.js"></script>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is
located.
External scripts cannot contain <script> tags.
External JavaScript Advantages
Placing scripts in external files has some advantages:
⚫ It separates HTML and code
⚫ It makes HTML and JavaScript easier to read and maintain
⚫ Cached JavaScript files can speed up page loads
Function Definition
A Jav aScript function is a block of code designed to perform a particular task.
A Jav aScript function is executed when "something" inv okes it (calls it).
A Jav aScript function is defined with the function keyword, followed by a name, followed
by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as
v ariables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
Syntax
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Eg: <script type = "text/javascript">
function sayHello() {
alert("Hello there"); }
</script>
Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the
invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
Example
JavaScript Output
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
⚫ Writing into an HTML element, using innerHTML.
⚫ Writing into the HTML output using document.write().
⚫ Writing into an alert box, using window.alert().
⚫ Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use the
document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines
the HTML content:
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Note:Changing the innerHTML property of an HTML element is a common way to
display data in HTML.
Using document.write()
For testing purposes, it is convenient to use
document.write():
Example:
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has
finished loading.
It will overwrite the whole document.</p>
<script>
document.write(9 + 6);
</script>
</body>
Using document.write() after an HTML document is loaded, will delete all
existing HTML:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
The document.write() method should only be used for testing.
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Note:You can skip the window keyword.
In JavaScript, the window object is the global scope object. This means that
variables, properties, and methods by default belong to the window object. This also
means that specifying the window keyword is optional
Using console.log()
For debugging purposes, you can call the console.log() method in the browser
to display data.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the
browser to print the content of the current window.
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
JavaScript Statements
JavaScript Programs
A computer program is a list of "instructions" to be "executed" by a computer.
In a programming language, these programming instructions are called
statements.
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are
written.JavaScript programs (and JavaScript statements) are often called
JavaScript code.
Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to make it more
readable.
The following lines are equivalent:
let person = "Hege";
let person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
let x = y + z;
JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it is after an
operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";
JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.
The purpose of code blocks is to define statements to be executed together.
One place you will find statements grouped together in blocks, is in JavaScript functions:
Example
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
Javascript Data Types
JavaScript provides different data types to hold different types of values.
There are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as
follows:
JavaScript non-primitive data types
The non-primitive data types are as follows:
Data Type Description
Object represents instance through which we can
access members
Array represents group of similar values
RegExp represents regular expression
JavaScript Data Types
JavaScript variables can hold different data types: numbers, strings, objects and more:
let length = 16; // Number
let lastName = "Johnson"; // String
let x = {firstName:"John", lastName:"Doe"}; // Object
The Concept of Data Types
In programming, data types is an important concept.
Without data types, a computer cannot safely solve this:
1. JavaScript Strings
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
Example
let carName1 = "Volvo XC60"; // Using double quotes
let carName2 = 'Volvo XC60'; // Using single quotes
2. JavaScript Numbers
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
Example
let x1 = 34.00; // Written with decimals
let x2 = 34; // Written without decimals
3. JavaScript Booleans
Booleans can only have two values: true or false.
Example
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
4. JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car
names):
Example
const cars = ["Saab", "Volvo", "BMW"];
Array indexes are zero-based, which means the first item is [0], second is [1], and so
on.
5. JavaScript Objects
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
Example
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
EXAMPLES
<!DOCTYPE html> let x = 5;
<html> let y = 5;
<body> let z = 6;
<h2>JavaScript Strings & NUMBERS</h2> document.getElementById("demo3").innerHTML =
<p id="demo1"></p> (x == y) + "<br>" + (x == z);
<h2>JavaScript NUMBERS</h2>
<p id="demo2"></p> const cars = ["Saab","Volvo","BMW"];
<h2>JavaScript BOOLEAN</h2>
<p id="demo3"></p> document.getElementById("demo4").innerHTML = cars[0];
<h2>JavaScript ARRAY</h2>
<p id="demo4"></p>
<h2>JavaScript OBJECT</h2> const person = {
<p id="demo5"> firstName : "John",
<script> lastName : "Doe",
let carName1 = "Volvo XC60"; age : 50,
let carName2 = 'Volvo XC60'; eyeColor : "blue"
document.getElementById("demo1").innerHTML = };
carName1 + "<br>" +
carName2; document.getElementById("demo5").innerHTML =
let x1 = 34.00; person.firstName + " is " + person.age + " years old.";
let x2 = 34; </script>
let x3 = 3.14; </body>
document.getElementById("demo2").innerHTML = </html>
x1 + "<br>" + x2 + "<br>" + x3;
JavaScript Objects
Real Life Objects, Properties, and Methods
In real life, a car is an object.
A car has properties like weight and color, and methods like start and
stop:
All cars have the same properties, but the property values differ from car
to car.
All cars have the same methods, but the methods are performed at
different times.
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
const car = {type:"Fiat", model:"500", color:"white"};
Note: It is a common practice to declare objects with the const keyword.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>
</body>
Object Definition
You define (and create) a JavaScript object with an object literal:
Example
const person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Spaces and line breaks are not important. An object definition
can span multiple lines:
Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
Object Properties
The name:values pairs in JavaScript objects are called properties:
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]
Object Methods
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
FullName function() {return this.firstName + " " + this.lastName;}
A method is a function stored as a property.
Example
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
In the example above, this refers to the person object.
I.E. this.firstName means the firstName property of this.
I.E. this.firstName means the firstName property of person.
JavaScript Variables
4 Ways to Declare a JavaScript Variable:
⚫ Using var
⚫ Using let
⚫ Using const
⚫ Using nothing
What are Variables?
Variables are containers for storing data (storing data values).
In this example, x, y, and z, are variables, declared with the var keyword
& a, b, and c, are variables, declared with the let keyword & aa,bb,and
cc, are undeclared variables.
When to Use JavaScript var?
Always declare JavaScript variables with var,let, orconst.
The var keyword is used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
If you want your code to run in older browsers, you must use var.
When to Use JavaScript const?
If you want a general rule: always declare variables with const.
If you think the value of the variable can change, use let.
Example:
<!DOCTYPE html> let a = 5;
<html> let b = 7;
<body> let c = a + b;
<h1>JavaScript Variables</h1> document.getElementById("demo2").innerHTML =
"The value of c is: " + c;
<p>In this example, x, y, and z are variables.</p>
aa = 5;
<p id="demo1"></p> bb = 8;
<p id="demo2"></p> cc = aa + bb;
<p id="demo3"></p> document.getElementById("demo3").innerHTML =
"The value of cc is: " + cc;
<script> </script>
var x = 5; </body>
var y = 6; </html>
var z = x + y;
document.getElementById("demo1").innerHTML =
"The value of z is: " + z;
JavaScript Identifiers
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age,
sum, totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
⚫ Names can contain letters, digits, underscores, and dollar signs.
⚫ Names must begin with a letter.
⚫ Names can also begin with $ and _ (but we will not use it in this tutorial).
⚫ Names are case sensitive (y and Y are different variables).
⚫ Reserved words (like JavaScript keywords) cannot be used as names.
Note :JavaScript identifiers are case-sensitive.
JavaScript Let
The let keyword was introduced in ES6 (2015).
⚫ Variables defined with let cannot be Redeclared.
⚫ Variables defined with let must be Declared before use.
⚫ Variables defined with let have Block Scope.
Cannot be Redeclared The Original JavaScript ES1 ES2 ES3 (1997-1999)
The First Main Revision ES5 (2009)
The Second Revision ES6 (2015)
Variables defined with let cannot be redeclared. All Yearly Additions (2016, 2017, 2018, 2019, 2020)
You cannot accidentally redeclare a variable.
With let you can not do this:
let x = "John Doe";
let x = 0; // SyntaxError: 'x' has already been declared
With var you can:
Example
var x = "John Doe";
var x = 0;
Block Scope
Before ES6 (2015), JavaScript had only Global Scope and Function Scope.
ES6 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope in JavaScript.
Variables declared inside a { } block cannot be accessed from outside the block:
Example
{
let x = 2;
}
// x can NOT be used here
Variables declared with the var keyword can NOT have block scope.
Variables declared inside a { } block can be accessed from outside the block.
Example
{
var x = 2;
}
// x CAN be used here
Redeclaring Variables
Redeclaring a variable using the var keyword can impose problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:
Example
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
Redeclaring a variable using the let keyword can solve this problem.
Redeclaring a variable inside a block will not redeclare the variable outside the block:
Example
let x = 10;// Here x is 10
{
let x = 2;// Here x is 2
}
// Here x is 10
JavaScript Const
The const keyword was introduced in ES6 (2015).
⚫ Variables defined with const cannot be Redeclared.
⚫ Variables defined with const cannot be Reassigned.
⚫ Variables defined with const have Block Scope.
Cannot be Reassigned
A const variable cannot be reassigned:
Example
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Correct
const PI = 3.14159265359;
Incorrect
const PI;
PI = 3.14159265359;
When to use JavaScript const?
Always declare a variable with const when you know that the value should not
be changed.
Use const when you declare:
A new Array
A new Object
A new Function
A new RegExp
Constant Arrays
const cars = ["Saab", "Volvo", "BMW"];
Constant Objects
const car = {type:"Fiat", model:"500", color:"white"};
JAVASCRIPT OPERATOR
Types of JavaScript Operators
There are different types of JavaScript operators:
➢ Arithmetic Operators
➢ Assignment Operators
➢ Comparison Operators
➢ Logical Operators
➢ Conditional Operators
➢ Type Operators
Note:
The numbers (in an arithmetic operation) are called operands.
The operation (to be performed between the two operands) is
defined by an operator.
JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).
Operator Description
+ Addition
- Subtraction
EX:
* Multiplication
<p id="demo"></p>
** Exponentiation (ES2016)
/ Division
% <script>
Modulus (Division Remainder)
++ Increment3;
let a =
-- let x = (100 + 50) * a;
Decrement
document.getElementById
Arithmetic Operations ("demo").innerHTML = x;
A typical arithmetic operation operates on two numbers. </script>
The two numbers can be literals or variables or expressions:
Example:
let x = 100 + 50; let x = a + b; let x = (100 + 50) * a;
Incrementing
The increment operator (++) increments numbers.
Example
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The ++ Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
x++;
let z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Decrementing
The decrement operator (--) decrements numbers.
Example
let x = 5;
x--;
let z = x;
Exponentiation
The exponentiation operator (**) raises the first operand to the power of
the second operand.
Example
let x = 5;
let z = x ** 2;
Note : x ** y produces the same result as Math.pow(x,y):
Operator Precedence
Operator precedence describes the order in which operations are performed in an arithmetic
expression.
Example
let x = 100 + 50 * 3;
Is the result of example above the same as 150 * 3, or is it the same as 100 + 150?
Is the addition or the multiplication done first?
As in traditional school mathematics, the multiplication is done first.
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
And (as in school mathematics) the precedence can be changed by using parentheses:
Example
let x = (100 + 50) * 3;
When using parentheses, the operations inside the parentheses are computed first.
When many operations have the same precedence (like addition and subtraction), they are computed
from left to right:
Example
let x = 100 + 50 - 3;
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
The = Operator
The Simple Assignment Operator assigns a value to a variable.
Simple Assignment Examples
let x = 10;
let x = 10 + y;
The += Operator
The Addition Assignment Operator adds a value to a variable.
Addition Assignment Examples
let x = 10;
x += 5;
let text = "Hello"; text += " World";
The -= Operator
The Subtraction Assignment Operator subtracts a value from a variable.
Subtraction Assignment Example
let x = 10;
X -= 5;
The *= Operator
The Multiplication Assignment Operator multiplies a variable.
Multiplication Assignment Example
let x = 10;
x *= 5;
Conditional Statements (JavaScript -
if...else Statement)
JavaScript supports conditional statements which are used to perform
different actions based on different conditions. Here we will explain the if..else
statement.
Flow Chart of if-else
The following flow chart shows how the if-else statement works.
Decision Making
JavaScript supports the following forms of if..else statement −
if statement
if...else statement
if...else if... statement.
if statement
The if statement is the fundamental control statement that allows JavaScript to make
decisions and execute statements conditionally.
Syntax
The syntax for a basic if statement is as follows −
if (expression) {
Statement(s) to be executed if expression is true
}
Here a JavaScript expression is evaluated. If the resulting value is true, the given
statement(s) are executed. If the expression is false, then no statement would be not
executed. Most of the times, you will use comparison operators while making
decisions.
Example
<html>
<body>
<script type = "text/javascript">
<!--
var age = 20;
if( age > 18 ) {
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
if...else statement
The 'if...else' statement is the next form of control statement that allows JavaScript to
execute statements in a more controlled way.
Syntax
if (expression) {
Statement(s) to be executed if expression is true
} else {
Statement(s) to be executed if expression is false
} Example:
<html>
<body>
<script type = "text/javascript">
var age = 15;
if( age > 18 ) {
document.write("<b>Qualifies for driving</b>");
} else {
document.write("<b>Does not qualify for driving</b>");
}
</script>
<p>Set the variable to different value and then try...</p>
</body>
The else if Statement
Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
<html>
<body>
<script type = "text/javascript">
var book = "maths";
if( book == "history" ) {
document.write("<b>History Book</b>");
} else if( book == "maths" ) {
document.write("<b>Maths Book</b>");
} else if( book == "economics" ) {
document.write("<b>Economics Book</b>");
} else {
document.write("<b>Unknown Book</b>");
}
</script>
<p>Set the variable to different value and then try...</p>
</body>
<html>
JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each time with
a different value.
Often this is the case when working with arrays:
Instead of writing:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
You can write:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Different Kinds of Loops
JavaScript supports different kinds of loops:
for - loops through a block of code a number of times
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true.
The For Loop
The for statement creates a loop with 3 optional expressions:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Expression 1 is executed (one time) before the execution of the code block.
Expression 2 defines the condition for executing the code block.
Expression 3 is executed (every time) after the code block has been executed.
<!DOCTYPE html> From the example above, you can read:
<html>
<body>
Expression 1 sets a variable before the loop starts (let i =
<h2>JavaScript For Loop</h2> 0).Normally you will use expression 1 to initialize the variable
used in the loop (let i = 0).
<p id="demo"></p>
<script> This is not always the case. JavaScript doesn't care. Expression
let text = ""; 1 is optional.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>"; You can initiate many values in expression 1 (separated by
} comma):
document.getElementById("demo").innerHTML =
text;
Expression 2 defines the condition for the loop to run (i must be
</script> less than 5).Often expression 2 is used to evaluate the condition
of the initial variable.If expression 2 returns true, the loop will
</body> start over again. If it returns false, the loop will end.
</html>
Expression 3 increases a value (i++) each time the code block
in the loop has been executed.
The While Loop
The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
// code block to be executed
}
Example
In the following example, the code in the loop will run, over and over again, as long as a variable (i) is
less than 10:
<!DOCTYPE html>
<html>
<body> Note: If you forget to increase the
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
variable used in the condition, the loop
<script> will never end. This will crash your
let text = ""; browser.
let i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
The Do While Loop
The do while loop is a variant of the while loop. This loop will execute the code block
once, before checking if the condition is true, then it will repeat the loop as long as the
condition is true.
Syntax
do {
// code block to be executed
}
while (condition);
Example
The example below uses a do while loop. The loop will always be executed at least on
even if the condition is false, because the code block is executed before the condition
tested:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Do While Loop</h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript Switch Statement
The switch statement is used to perform different actions based on different
conditions.
The JavaScript Switch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
This is how it works:
➢ The switch expression is evaluated once.
➢ The value of the expression is compared with the values of each
case.
➢ If there is a match, the associated block of code is executed.
➢ If there is no match, the default code block is executed.
The objective of a switch statement is to give an expression to
evaluate and several different statements to execute based on the
value of the expression. The interpreter checks each case against the
value of the expression until a match is found. If nothing matches, a
default condition will be used.
The break statements indicate the end of a particular case. If they
were omitted, the interpreter would continue executing each
statement in each of the following cases.
<html>
<body>
<script type = "text/javascript">
var grade = 'A';
document.write("Entering switch block<br />");
switch (grade) {
case 'A': document.write("Good job<br />");
break;
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break;
case 'D': document.write("Not so good<br />");
break;
case 'F': document.write("Failed<br />");
break;
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
FORM VALIDATION
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form validation code will come here.
function validate() {
if( document.myForm.Name.value == "" ) {
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a zip in the format ######." );
document.myForm.Zip.focus() ;
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit =
"return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[choose yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
Dialog Box
JavaScript supports three important types of dialog boxes.
⚫ Alert Dialog Box
⚫ Confirmation Dialog Box
⚫ Prompt Dialog Box
Alert Dialog Box
An alert dialog box is mostly used to give a warning message to the users.
For example, if one input field requires to enter some text but the user does
not provide any input, then as a part of validation, you can use an alert box
to give a warning message.
Example:
<html>
<head>
<script type = "text/javascript">
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>
Confirmation Dialog Box
A confirmation dialog box is mostly used to take user's consent on any option. It displays a
dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true. If
the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation
dialog box as follows.
<html>
<head>
<script type = "text/javascript"> <body>
<p>Click the following button to see the result:
function Confirmation() { </p>
var retVal = confirm("Do you want to continue ?"); <form>
if( retVal == true ) { <input type = "button" value = "Click Me"
document.write ("User wants to continue!"); onclick = "Confirmation();" />
return true; </form>
} else { </body>
document.write ("User does not want to continue!"); </html>
return false;
}
}
</script>
</head>
Prompt Dialog Box
The prompt dialog box is very useful when you want to pop-up a text box to
get user input. Thus, it enables you to interact with the user. The user needs
to fill in the field and then click OK.
This dialog box is displayed using a method called prompt() which takes two
parameters:
(i) a label which you want to display in the text box
and (ii) a default string to display in the text box.
ADDITION OF TWO NUMBERS
<html>
<html>
<head>
<title>addition</title> <head>
<script> <title>addition</title>
let number1 = prompt("Enter your 1st Number: "); <script>
let number2 = prompt("Enter your 2nd Number: "); var a = prompt("Enter first number");
let result = parseFloat(number1) + var b = prompt("Enter second
parseFloat(number2); number");
alert(result); var x=parseInt(a);
var y=parseInt(b);
</script>
alert(x+y);
</head>
</html> </script>
</head>
</html>
JavaScript Events
HTML events are "things" that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
HTML Events
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
In the following example, an onclick attribute (with code), is added to a <button> element:
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<button onclick="this.innerHTML=Date()">The time is?</button>
<p id="demo"></p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo1").innerHTML = Date();
}
</script>
<p id="demo1"></p>
</body>
</html>
Common HTML Events
Here is a list of some common HTML events:
JavaScript HTML DOM
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add,
or delete HTML elements.
JavaScript - HTML DOM Methods
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or change.
The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming
languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML
element).
A method is an action you can do (like add or deleting an HTML element).
Example
The following example changes the content (the innerHTML) of the <p> element with
id="demo":
The getElementById Method
The most common way to access an HTML element is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.
The innerHTML Property
The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The innerHTML property can be used to get or change any HTML element, including <html>
and <body>.
JavaScript HTML DOM
Document
The HTML DOM Document Object
The document object represents your web page.
If you want to access any element in an HTML page, you always start with
accessing the document object.
Below are some examples of how you can use the document object to access and
manipulate HTML.
Finding HTML Elements
Method
Description
document.getElementById(id) Find an element by element
id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name
JavaScript HTML DOM
Elements
Finding HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are several ways to do this:
⚫ Finding HTML elements by id
⚫ Finding HTML elements by tag name
⚫ Finding HTML elements by class name
⚫ Finding HTML elements by CSS selectors
⚫ Finding HTML elements by HTML object collections
Finding HTML Element by Id
The easiest way to find an HTML element in the DOM, is by using the element
id.
This example finds the element with id="intro":
Example
Finding HTML Elements by Tag Name
This example finds all <p> elements:
Example
const element = document.getElementsByTagName("p");
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id="demo"></p>
<script>
const element = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' +
element[0].innerHTML;
</script>
</body>
</html>
JavaScript HTML DOM Animation
A Basic Web Page
To demonstrate how to create HTML animations with JavaScript, we will use
a simple web page:
Animation Code
JavaScript animations are done by programming gradual changes in an
element's style.
The changes are called by a timer. When the timer interval is small, the
animation looks continuous.
The basic code is:
Example
id = setInterval(frame, 5);
function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */ }}
<!DOCTYPE html>
<html> <script>
<style> function myMove() {
#container { let id = null;
width: 400px; const elem =
height: 400px; document.getElementById("animate");
position: relative; let pos = 0;
background: yellow; clearInterval(id);
} id = setInterval(frame, 5);
#animate { function frame() {
width: 50px; if (pos == 350) {
height: 50px; clearInterval(id);
position: absolute; } else {
background-color: red; pos++;
} elem.style.top = pos + "px";
</style> elem.style.left = pos + "px";
<body> }
<p><button onclick="myMove()">Click }
Me</button></p> }
<div id ="container"> </script>
<div id ="animate"></div> </body>
</div> </html>
Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks on an
HTML element.
To execute code when a user clicks on an element, add JavaScript code to an HTML
event attribute:
onclick=JavaScript
Examples of HTML events:
⚫ When a user clicks the mouse
⚫ When a web page has loaded
⚫ When an image has been loaded
⚫ When the mouse moves over an element
⚫ When an input field is changed
⚫ When an HTML form is submitted
⚫ When a user strokes a key
JavaScript HTML DOM Events
Assign Events Using the HTML DOM
The HTML DOM allows you to assign events to HTML elements using
JavaScript:
Example
Assign an onclick event to a button element:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
In the example above, a function named displayDate is assigned to an
HTML element with the id="myBtn".
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
The onmousedown, onmouseup and onclick Events
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click.
First when a mouse-button is clicked, the onmousedown event is triggered, then, when
the mouse-button is released, the onmouseup event is triggered, finally, when the
mouse-click is completed, the onclick event is triggered.
Example:
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}</script></body></html>
JavaScript return
Definition and Usage
The return statement stops the execution of a function and returns a value.(The return statement is
used to return a particular value from the function to the function caller. The function will stop executing
when the return statement is called. The return statement should be the last statement in a function
because the code after the return statement will be unreachable.)
Syntax
return value;
Parameters Parameter Description
Value Optional.
The value to be
returned.
If omitted, it returns
undefined
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Statements</h1>
<h2>The return Statement</h2>
<p>Call a function that performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
HTML Multimedia
What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you
can hear or see, like images, music, sound, videos, records, films, animations,
and more.
Web pages often contain multimedia elements of different types and formats.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file
extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4,
.mpg, .wmv, and .avi.
Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.
Common Video Formats
Common Audio Formats
MP3 is the best format for compressed recorded music. The term MP3 has become
synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
HTML
Video
The HTML <video> element is used to show a video on a web page.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set,
the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
HTML Audio
The HTML <audio> element is used to play an audio file on a web
page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</body>
</html>
Make Image Slider Using HTML CSS JavaScript
https://swiperjs.com
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="C:\Users\Admin\OneDrive\Desktop\images\1.jpg"></div>
<div class="swiper-slide"><img src="C:\Users\Admin\OneDrive\Desktop\images\2.jpg"></div>
<div class="swiper-slide"><img src="C:\Users\Admin\OneDrive\Desktop\images\3.jpg"></div>
<div class="swiper-slide"><img src="C:\Users\Admin\OneDrive\Desktop\images\4.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
autoplay: {
delay:3000,
disableOnInteraction: false,},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
style.css
* {margin:0px;
padding:0px;
box-sizing:border-box}
.container{
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:#222;
}
.swiper{
width:80%;
height:fit-content;
}
.swiper-slide img{
width:100%;
}
.swiper .swiper-button-prev, .swiper .swiper-button-next{
color:white;}
.swiper .swiper-pagination-bullet-active{background-color:#fff;}
You might also like
- E-Note 25291 Content Document 20241001040321PMNo ratings yetE-Note 25291 Content Document 20241001040321PM50 pages
- Website Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253No ratings yetWebsite Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 076857225356 pages
- Basic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are LinkedNo ratings yetBasic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked41 pages
- Programming - Programming QuickStart Box Set - HTML, Javascript & CSS (Programming, HTML, Javascript, CSS, Computer Programming) (PDFDrive)No ratings yetProgramming - Programming QuickStart Box Set - HTML, Javascript & CSS (Programming, HTML, Javascript, CSS, Computer Programming) (PDFDrive)223 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML3 pages
- Class: XII Subject: Computer: Features of HTMLNo ratings yetClass: XII Subject: Computer: Features of HTML40 pages
- Fundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked TogetherNo ratings yetFundamentals of HTML: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked Together31 pages
- National Liberty Alliance CLGJ Letter To District Court JudgesNo ratings yetNational Liberty Alliance CLGJ Letter To District Court Judges20 pages
- X U Data Sheet Technical Information ASSET DOC 2597808No ratings yetX U Data Sheet Technical Information ASSET DOC 259780810 pages
- Political Deadlock To The Great Coalition WorksheetNo ratings yetPolitical Deadlock To The Great Coalition Worksheet6 pages
- Lab 4.5.1 Observing TCP and UDP Using Netstat (Instructor Version)No ratings yetLab 4.5.1 Observing TCP and UDP Using Netstat (Instructor Version)7 pages
- Database-Introduction-Installation-Guide-Win7No ratings yetDatabase-Introduction-Installation-Guide-Win75 pages
- System Security Lecture Notes Stonybrook Cse509 Itebooks Instant DownloadNo ratings yetSystem Security Lecture Notes Stonybrook Cse509 Itebooks Instant Download46 pages
- A Series of Enthalpy-Entropy Charts For Natural Gases: f:1H, f:1M f:1MZNo ratings yetA Series of Enthalpy-Entropy Charts For Natural Gases: f:1H, f:1M f:1MZ12 pages
- Applied Entrepreneurship Prototype Lesson Plan Module 2 Q4No ratings yetApplied Entrepreneurship Prototype Lesson Plan Module 2 Q45 pages
- 9/11 Commission Interview Requests For Defense Department PersonnelNo ratings yet9/11 Commission Interview Requests For Defense Department Personnel6 pages
- A Review of Evaporative Cooling TechnologiesNo ratings yetA Review of Evaporative Cooling Technologies8 pages
- Obj To Report of No Distribution (Original As Filed)No ratings yetObj To Report of No Distribution (Original As Filed)10 pages
- Sub: Clean Overdraft/ DPN Facility To Employees - Modification of GuidelinesNo ratings yetSub: Clean Overdraft/ DPN Facility To Employees - Modification of Guidelines3 pages
