[go: up one dir, main page]
Scribd
Upload
16 views64 pages

HTML Unit1

HTML (Hypertext Markup Language) is the standard markup language for creating web pages, invented by Tim Berners-Lee in the late 1980s. The document outlines the evolution of HTML through various versions, from HTML 1.0 to HTML 5, and explains the structure of HTML documents, including elements, attributes, and basic tags for text, images, lists, tables, and forms. It also discusses the use of forms for data collection and the different input types available in HTML.

Uploaded by

prakashaimcahod
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views64 pages

HTML Unit1

HTML (Hypertext Markup Language) is the standard markup language for creating web pages, invented by Tim Berners-Lee in the late 1980s. The document outlines the evolution of HTML through various versions, from HTML 1.0 to HTML 5, and explains the structure of HTML documents, including elements, attributes, and basic tags for text, images, lists, tables, and forms. It also discusses the use of forms for data collection and the different input types available in HTML.

Uploaded by

prakashaimcahod
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 64

Origins and evolution of HTML

HTML (Hypertext Markup Language) is a markup language which is used to create web pages

HTML stands for HyperText Markup Language. It is the standard language used to create and
structure content on the web. It tells the web browser how to display text, links, images, and other
forms of multimedia on a webpage.

It was invented by Tim Berners-Lee in around 1989 and 1990.

Versions of HTML
Original intent of HTML: General layout of documents that could be displayed by a wide variety of
computers.

HTML 1.0

• HTML 1.0 was the first release of HTML to the world

• The language was very limiting.

HTML 2.0

• HTML 2.0 included everything from the original 1.0 specifications

• HTML 2.0 was the standard for website design until January 1997

• Defined many core HTML features for the first time.

HTML 3.2 - 1997

• The browser-specific tags kept coming.

• First version developed and standardized exclusively by the W3C.

HTML 4.0 – 1997

• Introduced many new features and deprecated many older features.

• Support for HTML’s new supporting presentational language, CSS.

HTML 4.01 – 1999

• A cleanup of 4.0,

• it faces 2 problems - it specifies loose syntax rules

HTML 5 – January 2008


• Latest specification of the HTML.

• HTML5 was published as a Working Draft by the W3C.

HTML Element

An HTML element is a basic building block to create a webpage, and It is created by a start tag,
content, and end tag

The basic syntax of an HTML element is

Example:

Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!

HTML Attributes

Attributes contain additional pieces of information. Attributes take the form of an opening tag and
additional info is placed inside.

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

In this instance, the image source(src) and the alt text (alt) are the attributes of <img> tags.

Standard HTML Document Structure

HTML page structure (or, HTML basic structure) consists of the essential elements that are required
to create an HTML document that can be displayed on the browser.
1. <!DOCTYPE html>:

It defines the document type as HTML.

2. <html> </html> :

The html element includes an attribute lang .Which specifies the language in which the document is
written.

<html lang=“en>

An html document consist of 2 parts: head and body.

The head element provides information about the document .

The head element always contains 2 simple elements,

 title element
 meta element.

The content of the title element is displayed by the browser in the browser window’s title bar.

The meta tag specifies the character set used to write the document.

3. Body

It defines the body of the webpage, all elements that are used to display content on the browser
placed inside the body tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Basic Text Markup:


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.

 This will produce the following result:

Paragraph Tag
The 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
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, where you do not need opening and closing tags, as there is nothing
to go in between them.
Horizontal Lines
Image

This element indicates a media object to be included in an (X)HTML document.

The HTML <img> tag is used to embed an image in web pages by linking them. It creates a
placeholder for the image, defined by attributes like src, width, height, and alt, and does not
require a closing tag.

Insert Image

syntax to use this tag

The <img> tag has two required attributes

 Src – specifies path to the image


 Alt – specifies alternate text for the image.

Syntax

<img src="url" alt="alternatetext">


Example:

<html>

<head>

<title>work with image</title>

</head>

<body>

<img src="sleepycat.jpg" alt="sleepycat" style="width: 500px;height: 500px;">

</body>

</html>

Set Image Width/Height

You can set image width and height based on your requirement using width and height attributes.

You can specify width and height of the image in terms of either pixels or percentage of its actual
size.

Eg:

<img src="C:\Users\s\Desktop\53.jpg" alt="Sleepy cat" width="500" height="600">

You can use the style attributes to specify the width and height of image

<img src="C:\Users\s\Desktop\53.jpg" alt="Sleepy cat" style="width:100px;height:200px;">

Set Image Border

By default, image will have a border around it, you can specify border thickness in terms of pixels
using border attribute. A thickness of 0 means, no border around the picture.

Eg:

<img src="C:\Users\s\Desktop\53.jpg" alt="Sleepy cat" width= 500 height=600 border="3"/>

Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it in the
center or right.
<img src="C:\Users\s\Desktop\53.jpg" alt="Sleepy cat" border="3” align=“right”/>

Use <img> tag as a link

We can also link an image with other page or we can use an image as a link. To do this, put <img>
tag inside the <a> tag.

Eg:

<a href=https://livelongandpawspurr.com/blog/20-cat-quotes-for-cat-lovers">

<img src="C:\Users\s\Desktop\53.jpg" alt="Sleepy cat" width= 500 height=600 border="3"


align="right"/></a>

Image Formats:

1. GIF (Graphic Interchange Format)

8-bit color (256 different colors)

2. JPEG (Joint Photographic Experts Group)

It has 24-bit color representation (16 million different colors). Both use compression, but JPEG
compression is better.

3. Portable Network Graphics (PNG)

It is relatively new. Should eventually replace both gif and jpeg

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.
<html>
<body>
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>
</html>

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

Eg:

<ul type="circle">
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>

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>.
Eg:
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
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 −
Eg:
<ol type="1">
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

HTML Description Lists


HTML also supports description lists
 A description list is a list of terms, with a description of each term.
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 Table
HTML table tag is used to display data in tabular form (row * column). There can be many columns
in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> ,
<td>, and <th> elements.
In Each table, table row is defined by <tr> tag,
table header is defined by <th>,
and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body
content, footer section etc..
Table Cell
Each table cell is defined by <td> and </td>
Everything between <td>and </td>is the content of the table cell

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If
you do not need a border, then you can use border = "0".

Table Heading
Table heading can be defined using <th> tag
Headings, which are defined in <th> tag are centered and bold by default.

Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which you will use to adjust the white
space in your table cells.
The cellspacing attribute defines space between table cells, while cellpadding represents the
distance between cell borders and the content within a cell.
Difference between Cellpadding and Cellspacing
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.

Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.

Table Height and Width


 You can set a table width and height using width and height attributes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.

Table Caption
 The caption tag will serve as a title or explanation for the table and it shows up at the top of
the table.
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same for
every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.

HTML – Forms
An HTML form is a webpage section usually used for collecting data from the users and then
sent to a server for further processing.

HTML forms allow users to input data into a website or app, which can then be processed by
a server. Forms are a fundamental part of web development and are used for many tasks,
including:

 Collecting user information: Such as contact details, login credentials, or search terms

 Processing orders: Such as when entering shipping or credit card data

 Updating the interface: Such as adding items to a list or showing or hiding a feature

 Creating surveys or registration processes: Such as for signing up for an email or


making a purchase

The form elements

We use the HTML <form> element to create forms in HTML.

<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 <input> Element

An <input> element can be displayed in many ways, depending on the type attributes

Text Input Controls

There are three types of text input used on forms −

 Single-line text input controls

 Password input controls

 Multi-line text input controls

Attributes

Following is the list of attributes for <input> tag for creating text field.
Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Password input controls

 This is also a single-line text input but it masks the character as soon as a user enters it.
They are also created using HTML <input>tag but type attribute is set to password.

Example

 Here is a basic example of a single-line password input used to take user password −

Checkbox Control

 Checkboxes are used when more than one option is required to be selected. They are
also created using HTML <input> tag but type attribute is set to checkbox..

Example
 Here is an example HTML code for a form with two checkboxes −

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
Select Box Control

A select box, also called drop down box which provides option to list down various options in
the form of drop down list, from where a user can select one or more options.

Example

Here is example HTML code for a form with one drop down box
File Upload Box

 If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.

Example

 Here is example HTML code for a form with one file upload box –

Attributes
Button Controls

There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button. The type
attribute can take the following values –
Form attributes

HTML form attributes provide different functionalities,

such as redirection to other web pages,

auto-completion of text,

specifying data validation rules,

controlling the behavior of form submissions,

The action attribute

The action attribute of <form>element transmits the user's input to a backend script for
processing.

it is important to pass the URL of a program to the action attribute

<form action = "https://www.tutorialspoint.com">

<!-- to take input -->

Name: <input type = "text" name = "your_name" required/> <br><br>

Email: <input type = "email" name = "mail" required/> <br><br>

<!-- to submit the data -->

<input type = "submit"> </form>

The method attribute

The method attribute determines which HTTP method should be used by the browser while
uploading the form information. The most commonly used methods are as follows:
1.GET: It is the default method for form submission, which means if we don't specify the
method name explicitly, the form will use the GET method to send data.

2. POST: It is used to send form data inside HTTP request body. It is safer than GET method.

The Target attributes

The target attributes determines the target window or frame where the result of the script
will be displayed after submitting the form.

The default target is the current window.

The target attribute accepts the following values:

Distinguishing Between a Radio Button and Checkbox


Frames

 The browser screen can be divided in to multiple windows

 Each windows can be loaded with different contents.

 The <frameset>tag is used to split the browser screen

 The <frameset> elements hold one or more<frame> elements.each<frame>element


can hold a separate document.

 The<frameset>element specifies mow many columns or rows there will be in the


frameset, and how much percentage/pixels of space will occupy each of them.

The <frame> Tag Attributes

Following are important attributes of <frame> tag:

 src

This attribute is used to give the file name that should be loaded in the frame. Its value
can be any URL. For example, src="/html/top_frame.htm" will load an HTML file
available in html directory.

 name

This attribute allows you to give a name to a frame.

 frameborder
This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> tag if one is
given, and this can take values either 1 (yes) or 0 (no).

 marginwidth

This attribute allows you to specify the width of the space between the left and right of
the frame's borders and the frame's content. The value is given in pixels. For example
marginwidth="10".

 marginheight

This attribute allows you to specify the height of the space between the top and
bottom of the frame's borders and its contents. The value is given in pixels. For
example marginheight="10".

 scrolling

This attribute controls the appearance of the scrollbars that appear on the frame. This
takes values either "yes", "no" or "auto". For example scrolling="no" means it should
not have scroll bars.

HTML Links – Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

The HTML <a> tag defines the hyperlink.

Syntax

<a href="url">link text</a>

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attributes attribute can have one of the following values:
HTML Features

 It has introduced new multimedia features which supports both audio and video
controls by using<audio>and<video>tags.

 There are new graphics elements including vector graphics and tags.

 Enrich semantic content by including<header>,<footer>,<article>,<section> are added.

 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.

 Web storage facility which provides web application methods to store data on the
web browser.

 Uses SQL database to store data offline.

 Allows drawing various shapes like triangle, rectangle, circle, etc.

 Capable of handling incorrect syntax.

 Easy DOCTYPE declaration i.e<!doctype html>

 Easy character encoding i.e., <meta charset=“UTF-8”>

CSS
Introduction

Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
• CSS handles the look and feel part of a web page.
• Using CSS, we can control the
• Color of the text.
• The style of fonts.
• The spacing between paragraphs.
• Columns are sized and laid out.
• Background images.
• Variety of other effects.

advantages of learning CSS:


• Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS,
you can control the color of the text, the style of fonts, the spacing between paragraphs,
how columns are sized and laid out, what background images or colors are used, layout
designs,variations in display for different devices and screen sizes as well as a variety of
other effects.
• Become a web designer - If you want to start a carrer as a professional web designer,
HTML and CSS designing is a must skill.
• Control web - CSS is easy to learn and understand but it provides powerful control over
the presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.
• Learn other languages - Once you understands the basic of HTML and CSS then other
related technologies like javascript, php, or angular are become easier to understand.

Applications of CSS
• CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
• Easy maintenance - To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
• Global web standards - Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

CSS Versions
• Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in
December 1996. This version describes the CSS language as well as a simple visual
formatting model for all the HTML tags.
• CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds
support for media-specific style sheets e.g. printers and aural devices, downloadable
fonts, element positioning and tables.

Style Specification Formats

Format depends on the level of the style sheet

1. Format for Inline Style sheets

• Inline: Style sheet appears as the values of the style attribute of a tag
An inline CSS is used to apply a unique style to a single HTML element.

General form:

style = "property_1: value_1;

property_2: value_2;

property_n: value_n;"

Ex: <p style="color:#009900;

font-size:50px;

font-style:italic;

text-align:center;">

Inline CSS

</p>

2. Internal or Embedded CSS


is defined within the HTML document's <style> element. It applies styles to specified HTML
elements. The CSS rule set should be within the HTML file in the head section, i.e.
the CSS is embedded within the <style> tag inside the head section of the HTML file.
Ex:
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

3. External CSS
External CSS contains separate CSS files that contain only style properties with the help of
tag attributes (For example class, id, heading, ... etc). CSS property is written in a separate
file with a .css extension and should be linked to the HTML document using a link tag.

Ex:

Selector Forms

The selector can have variety of forms:

1. Simple selector form


2. Class selector
3. Generic selector
4. Id selector
5. Contexual Selectors
6. Universal selector
7. Pseudo classes

1. Simple selectors (select elements based on name, id, class)

The element selector selects HTML elements based on the element name.

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

3.Generic Selectors
• A generic class can be defined if you want a style to apply to more than one kind of tag. A
generic class must be named, and the name must begin with a period Example
4. 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.

5.Contexual selectors
• Selectors can also specify that the style should apply only to elements in certain positions in
the document .This is done by listing the element hierarchy in the selector.
Eg: body b em {font-size: 24pt ;}
• In the eg, selector applies its style to the content of emphasis elements that are descendants
of bold elements in the body of the document. It is also called as descendant selectors. It will
not apply to emphasis element not descendant of bold face element.
6.Universal Selectors
• The universal selector denoted by an asterisk(*). It applies its style to all elements in the
document
For Eg: * {color : red}
Makes all elements in the document red

6. Pseudo Classes
• Pseudo classes are styles that apply when something happens, rather than because the target
element(tag) simply exists. Names begin with colons
The style of hover pseudo classes apply when the mouse cursor is over the element.The style
of focus pseudo classes apply when an element has focus (mouse cursor over the element and
click the left mouse button)

Eg: • Input:hover {color: red;}


Pseudo Class Example
<html lang=”en”>
<head>
<title>Pseudoclasses</title>
<meta charset=”utf-8” />
<style type = "text/css">
input:hover {color: red;}
input:focus {color: green;}
</style>
</head>
<body>
<form action = "">
<p>
Your name:
<input type = "text" />
</p>
</form>
</body>
</html>

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

CSS Attribute Selectors


CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:
Property Value
CSS includes 60 different properties in seven categories
• Fonts
• Lists
• Alignment of text
• Margins
• Colors
• Backgrounds
• Borders

Property values can appear in a variety of forms.


• Keyword property values are used when there are only a few possible values and they are
predefined
Ex: large, medium, and small.
• Keyword values are not case sensitive, so Small, SmAlL, and SMALL are all the same as small.
• Number values are used when no meaningful units can be attached to a numeric property
value.
• A number value can be either an integer or a sequence of digits with a decimal point and can
be preceded by a sign
(+ or -).
• Length values are specified as number values that are followed immediately by a two
character abbreviation of a unit name.
• There can be no space between the number and the unit name.
• The possible unit names are px, for pixels; in, for inches; cm, for centimeters; mm, for
millimeters; pt, for points (a point is 1/72 inch); and pc, for picas, which are 12 points.
Ex:
• If the font size were set to 75%, it would make the new current size for the font 75 percent of
its previous value.
• Font size would stay at the new value until changed again.
• Percentage values can be signed.
• If preceded by a plus sign, the percentage is added to the previous value; if negative, the
percentage is subtracted.
• URL property values use a form that is slightly different from references to URLs in links.
The actual URL, which can be either absolute or relative, is placed in parentheses and
preceded by url, as in the following property url(tetons.jpg)
• There can be no space between url and the left parenthesis.
• Colour property values can be specified as colour names, as six-digit hexadecimal
numbers, or in RGB form. RGB form is just the word rgb followed by a parenthesized list
of three numbers that specify the levels of red, green, and blue, respectively.
• The RGB values can be given either as decimal numbers between 0 and 255 or as
percentages.
• Hexadecimal numbers must be preceded with pound signs (#), as in #43AF00. Ex:
powder blue could be specified as below Fuchsia or rgb(255, 0, 255) or #FF00FF
• Some property values are inherited by elements nested in the element for which the
values are specified. For example, the property background-color is not inherited, but
font-size is. Using a style sheet to set a value for an inheritable property for the
<body>tag effectively sets it as a default property value for the whole document, as in
body {font-size: 16pt}

Font Properties
We can set the following font properties of an element:
• 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 Families
• The font-family property is used to specify a list of font names.
• The browser uses the first font in the list that it supports.
• Ex: font-family: Arial, Helvetica, Futura
• Above style tells the browser to use Arial if it supports that font
• If not, it will use Helvetica if it supports it. If the browser supports neither Arial nor Helvetica,
it will use Futura if it can.
• If the browser does not support any of the specified fonts, it will use an alternative of its
choosing.
• A generic font can be specified as a font-family value. The possible generic fonts and
examples of each are shown in below table.
• Each browser has a font defined for each of these generic names.
• A good approach to specifying fonts is to use a generic font as the last font in the value of a
font-family property

Font Sizes
• The font-size property does what its name implies.
Ex: • The following property specification sets the font size for text to 10 points:
• font-size: 10pt
• Many relative font-size values are defined, including xx-small, x-small, small, medium, large,
x-large, and xx-large.
• In addition, smaller or larger can be specified.
• Furthermore, the value can be a percentage relative to the current font size.
• Using the relative font sizes has the disadvantage of failing to provide strict font size control.
Different browsers can use different values for them.
• For example, small might mean 10 points on one browser and 8 points on another.
• On the other hand, using a specific font size has the risk that some browsers may not support
that particular size, causing the document to appear different on different browsers.
Font Variants
• The default value of the font-variant property is normal, which specifies the usual character
font.
• This property can be set to small-caps to specify small capital characters.
• These characters are all uppercase, but the letters that are normally uppercase are
somewhat larger than those that are normally lowercase.
Font Styles
• The font-style property is most commonly used to specify italic, as in font-style: italic
• An alternative to italic is oblique, but when displayed, the two are nearly identical, so oblique
is not a terribly useful font style. In fact, some browsers do not support it, so they display all
oblique fonts in italic.
Font Weights
• The font-weight property is used to specify the degree of boldness, as in
• font-weight: bold
• Besides bold, the values normal (the default), bolder, and lighter can be specified.
• The bolder and lighter values are taken as relative to the current level of boldness.
• Specific numbers also can be given in multiples of 100 from 100 to 900, where 400 is the
same as normal and 700 is the same as bold.
Font Shorthands
• If more than one font property must be specified, the values can be stated in a list as the
value of the font property.
• The browser then has the responsibility for determining which properties to assign from the
forms of the values.

List properties
• Two presentation details of lists can be specified in XHTML documents
• The shape of the bullets that precede the items in an unordered list and the sequencing
values
• That precedes the items in an ordered list.
• The list-style-type property is used to specify both of these.
• The list-style-type property of an unordered list can be set to below values.
• Disc (Small filled circle)
• Circle (A circle is an unfilled circle)
• Square (A square is a filled square)
• None
Ex:

Ordered list styles


• An ordered list starts with the <ol>tag.
• Each list item starts with the <li>tag.
• The list items will be marked with numbers by default.
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Colour
• CSS uses color values to specify a color.
• Typically, these are used to set a color either for the foreground of an element (i.e., its text) or
for the background of the element.
• They can also be used to affect the color of borders and other decorative effects.
• You can specify your color values in various formats.
• Following table lists all the possible formats.

Hex Codes
• A hexadecimal is a 6 digit representation of a color.
• The first two digits (RR) represent a red value, the next two are a green value (GG), and the
last are the blue value (BB).
• A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
• Jasc Paintshop Pro, or even using Advanced Paint Brush.
• Each hexadecimal code will be preceded by a pound or hash sign ‘#’.
• Following are the examples to use Hexadecimal notation. Ex: #000000, #FF0000, #00FF00
RGB Values
• This color value is specified using the rgb( ) property.
• This property takes three values, one each for red, green, and blue.
• The value can be an integer between 0 and 255 or a percentage.
Alignment of text
• The text-indent property can be used to indent the first line of a paragraph.
• This property takes either a length or a percentage value.
• The text-align property, for which the possible keyword values are • Left • Center • Right •
Justify
• The float property is used to specify that text should flow around some element, often an
image or a table.
• The possible values for float are left, right, and none, which is the default.

span element or tag


• The HTML span element is a generic inline container for inline elements and content. It is used to
group elements for styling purposes (by using the class or id attributes), A better way to use it when
no other semantic element is available.
• The span tag is a paired tag means it has both open() tags, and it is mandatory to close the tag.
The span tag is used for the grouping of inline elements & this tag does not make any visual change
by itself.

div tag or element


The div tag is known as Division tag. The div tag is used in HTML to make divisions of
content in the web page like (text, images, header, footer, navigation bar, etc).
• Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag.

The Div is the most usable tag in web development because it helps us to separate out data in
the web page and we can create a particular section for particular data or function in the web
pages.
• Div tag is Block level tag
• It is a generic container tag
• It is used to the group of various tags of HTML so that sections can be created and style can
be applied to them.
• As we know Div tag is block-level tag in this example div tag contain entire width. It will be
displayed div tag each time on a new line, not on the same line.

Overview and features of CSS3

• CSS3 stands for Cascading Style Sheet level 3, which is the advanced version of CSS. It is used for
structuring, styling, and formatting web pages.

• Several new features have been added to CSS3 and it is supported by all modern web browsers.
The most important feature of CSS3 is the splitting of CSS standards into separate modules that are
simpler to learn and use.

JavaScript
is a lightweight, interpreted programming language. It is designed for creating network-
centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to
implement because it is integrated with HTML. It is open and cross-platform.

What is JavaScript?
• JavaScript is the programming language of HTML and the Web
. • JavaScript is a loosely typed language.
• JavaScript is client-side scripting language.
• JavaScript executes in the user's browser.
• JavaScript interact with html elements (DOM elements).

Why JavaScript
• JavaScript eliminates server-side processing.
• JavaScript executes on any OS.
• JavaScript can be used with any type of web page e.g. PHP, ASP.NET, Perl etc.
• JavaScript increases the performance of web page due to client-side execution
• Many JavaScript based application frameworks are available in the market to create Single
page web applications e.g. ExtJS, AngularJS, KnockoutJS etc.

Advantages of JavaScript
• An interpreted language
• Embedded within HTML
• Minimal Syntax and easy to learn.
• Quick Development.
• Designed for simple and small programs.
• High Performance.
• Procedural capabilities.
• Event driven.
• Easy debugging and testing.
• Platform independent and Architectural neutral.

Difference between JavaScript and Java


Java
• Java is programming language
• It is strongly typed language
• Types are known at compile time
• Objects in java are static
• Collection of data members and methods is fixed at compile time
• Object oriented programming language
JavaScript
JavaScript is a scripting language
It is dynamically typed language
• Compile time type checking is impossible
• JavaScript objects are dynamic
• The number of data members and methods of an object can change during execution
• Object based language

Uses of JavaScript
• The JavaScript was initially introduced to provide programming capability at both the server
and client ends of web connection.
• JavaScript therefore is implemented at 2 ends:
• Client end • Server end
• The client side JavaScript is embedded in XHTML documents and is interpreted by the
browser
• It also provides some means of computation, which serves as an alternative for some tasks
done at the server side
• Interactions with users through form elements, such as buttons and menus, can be
conveniently described in JavaScript. Because button clicks and mouse movements are easily
detected with JavaScript, they can be used to trigger computations and provide feedback to the
user.
• For example, when a user moves the mouse cursor from a text box, JavaScript can detect that
movement and check the appropriateness of the text box’s value (which presumably was just
filled by the user).
• Even without forms, user interactions are both possible and simple to program in
JavaScript. These interactions, which take place in dialog windows, include getting input
from the user and allowing the user to make choices through buttons. It is also easy to
generate new content in the browser display dynamically.
• This transfer of task ensures that the server is not overloaded and performs only required
task
• But client side JavaScript cannot replace serves side JavaScript; because serrver side software
supports file operations, database access, security, networking etc
JavaScript is also used as an alternative to java applets.
• Programming in JavaScript is much simpler than compared to java
• JavaScript support DOM [Document Object Model] which enables JavaScript to access and
modify CSS properties and content of any element of a displayed XHTML document

Javascript is divided into three parts


1) Core Javascript - Heart of the language , including its operators, expressions, statements
and subprogram.
2) Client-side JavaScript - Collections of JavaScript code scripts , not programs, support the
control of browsers and interaction with the user
3) Server side Javascript - Collection of objects that make the language useful on a web server

Object Orientation and JavaScript


• JavaScript is NOT an object-oriented programming language, it is an object based language.
• JavaScript does not have classes
• Without classes Javscript does not support class-based inheritance
• Without class based inheritance it cannot support polymorphism
• It uses a technique that can be used to simulate some aspects of inheritance
• This is done with prototype object. This form of inheritance is called prototype-based
inheritance.
• JavaScript has primitives for simple types
• The root object in JavaScript is Object – all objects are derived from Object
• All JavaScript objects are accessed through references

General Syntactic Characteristics


JavaScript are embedded in HTML documents
• Either directly, as in

Or indirectly, as a file specified in the src attribute of

• Identifier form: begin with a letter or underscore, or dollar sign ($) followed by any
number of letters, underscores, and digits
• Case sensitive
• 25 reserved words, plus future reserved words Eg: Break, continue, switch, case, if ,else,
while, for…
• Comments: both // and /* … */
• Scripts are usually hidden from browsers that do not support JavaScript interpreters by
putting them in special comments.

Semicolons can be a problem. They are “somewhat” optional


• Simple statements in JavaScript are generally followed by a semicolon character, just as
they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if
each of your statements are placed on a separate line. For example, the following code
could be written without semicolons.

Case Sensitivity

JavaScript is a case-sensitive language. This means that the language keywords, variables,
function names, and any other identifiers must always be typed with a consistent capitalization
of letters. So the identifiers Time and TIME will convey different meanings in JavaScript.
Comments in JavaScript
JavaScript supports both C-style and C++-style comments. Thus: · Any text between a // and
the end of a line is treated as a comment and is ignored by JavaScript. · Any text between the
characters /* and */ is treated as a comment. This may span multiple lines.
Primitives, Operations, & Expressions
1.Primitive Types
Five primitive types: Number, String, Boolean, Undefined, or Null.

Javascript includes predefined objects that are closely related to primitive types named
Number ,string and Boolean.
These objects are called wrapper objects. Because each objects contains a property that stores
a value of the corresponding primitive type.
The purpose of Wrapper objects are used to provide properties and methods that are
convenient to use with the values of primitive types
The methods of Number and String objects can be used on variables of the corresponding
primitive types.
The difference between primitives and objects Suppose that prim is a primitive variable with
the value 17 and obj is a Number object with property value 17.
prim and obj are stored differently

2. Numeric & String Literals


Numeric literals – like Java All numeric values are stored in double-precision floating point.
Numeric values in Javascript are often called numbers.
Numeric literals can be either integer or floating point values.
72,7.2,.72,7E2,7e2 etc are valid numeric literals.
String literals are delimited by either ' or " .
Can include escape sequences (e.g., \n,\t).
Var str1=”Hello”;
Var str2=’Hello’;
To include a single quote character in a string delimited by single quotes, the embedded single
quote must be preceded by a backslash.
‘You \’re the best person I \’ve ever seen’
A double quote can be embedded in a double quoted string literal by preceding it with a
backslash.
• A null string (a string with no characters) can be denoted with ‘ ‘ or “ “.
• All string literals are primitive types.
3. Other Primitive Types
Boolean values are true and false.Used for evaluating Boolean Expressions.
Var boo1= true;
Var boo2=false;
The only value of type Null is reserved word null which means no value.
A variable is Null if it has not been explicitly declared or assigned a value. The only value of
type Undefined is undefined.
If a variable has been explicitly declared, but not assigned a value it has the value undefined.
A variable declared without a value will have the value undefined.
ex) var carName;
Document.write(carName)

4.Declaring variables
Like many other programming languages, JavaScript has variables. Variables can be thought of
as named containers. You can place data into these containers and then refer to the data simply
by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared
with the var keyword as follows.

• Storing a value in a variable is called variable initialization.


• You can do variable initialization at the time of variable creation or at a later point in
time when you need that variable.
For instance, you might create a variable named money and assign the value 2000.50 to it
later. For another variable, you can assign a value at the time of initialization as follows
JavaScript Variable Scope
The scope of a variable is the region of your program in which it is defined. JavaScript variables
have only two scopes.
· Global Variables: A global variable has global scope which means it can be defined anywhere
in your JavaScript code.
· Local Variables: A local variable will be visible only within a function where it is
defined.Function parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable with the
same name. If you declare a local variable or function parameter with the same name as a
global variable, you effectively hide the global variable. Take a look into the following example.

• Rules for variable names: –


• Variable names are case sensitive –
• They must begin with a letter or the underscore character strname – STRNAME (not
same)

JavaScript supports the following types of operators.


• · Arithmetic Operators
• · Comparison Operators
• · Logical (or Relational) Operators · Assignment Operators
• · Conditional (or ternary) Operators
Arithmetic Operators
JavaScript supports the following arithmetic operators:
Assume variable A holds 10 and variable B holds 20, then:
1. Comparison operator
2. Logical operator

3. Assignment Operator
Math Object
• Math Object provides collection of properties of Number objects and methods that
operate on Number objects. The math object has methods for the trignometric functions
such as sin(for sine) and cos(for cosine) as well as commonly used math operations such
as floor, round, max, min
• Floor-truncate a number , round- to round a number,max –returns the largest of two
numbers.
• All of the math methods are referenced through the Math object.
e.g., Math.cos(x)
JavaScript String Operators
The + operator can also be used to add (concatenate) strings.
txt1 = “smitha";
txt2 = “jacob";
txt3 = txt1 + " " + txt2;
o/p
smitha Jacob
txt1 = "What a very "; txt1 += "nice day";
o/p
What a very nice day
We will discuss two operators here that are quite useful in JavaScript: the conditional
operator (? :) and the typeof operator.
• Conditional Operator (? :) The conditional operator first evaluates an expression for a
true or false value and then executes one of the two given statements depending upon
the result of the evaluation.

• typeof Operator
JavaScript typeof operator is used to find the type of a JavaScript variable. The typeof operator
returns the type of a variable or an expression. Returns "number", "string", or "boolean" for
Number, String, or Boolean, "undefined" for Undefined,"function" for functions, and "object"
for objects and NULL . Objects do not have types. If the operand is a variable that has not been
assigned a value ‘typeof’ produces ‘undefined’ .
• typeof "" // Returns "string“
• typeof "John“ // Returns "string"
• typeof "John Doe“ // Returns "string“
• typeof 0 // Returns "number"
• typeof 314 // Returns "number"
• typeof 3.14 // Returns "number“
• typeof (3) // Returns "number"
• typeof (3 + 4) // Returns "number

The Date Object


• The Date object is a datatype built into the JavaScript language. Create one with the new
operator & Date constructor (no params).
• var today = new Date();
• Local time methods of Date object:
• toLocaleString – returns a string of the date
• getDate – returns the day of the month
• getMonth – returns the month of the year (0 – 11)
• getDay – returns the day of the week (0 – 6)
• getFullYear – returns the year
• getTime – returns the number of milliseconds since January 1, 1970
• getHours – returns the hour (0 – 23)
• getMinutes – returns the minutes (0 – 59)
• getMilliseconds – returns the milliseconds (0 – 999)
Eg: to display date and time
<!DOCTYPE html>
<html lang=“EN”>
<head><title>My Javascript page</title>
<script type="text/javascript">
var today=new Date();
alert(today);
</script>
</head>
<body>
<h1>Welcome to AIMCA</h1>
</body>
</html>
Screen Output and Keyboard
Input Every web page resides inside a browser window which can be considered as an
object.An object of window is created automatically by the browser.
The javascript model for the browser display window is the Window object.
A document object represents HTML document. The model for the browser display window is
the Window object.
It represents the browser window.
The Window object has two properties, document and window, which refer to the Document
and Window objects , respectively .
The Document object has several methods and properties.
One method is write, which is used to create output.
The parameter is a string, often catenated from parts, some of which are variables e.g.,
document.write("Answer: " + result + “ ");

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 use document.getElementById(id)
• The id attribute defines the HTML element.
The innerHTML property defines the HTML content:
Eg:
<html><body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo">
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</p>
</body>
</html>

Using document.write()
• document.write() for writing
Example
<html>
<body>
<h1>my paragraph</h1>
<p>fjhjdskhfjhdfkjhfjkj</p>
<script type="text/javascript">
document.write("helllo.......");
</script>
</body</html>

The Window object has three methods for creating dialog boxes for user interactions , alert,
confirm , and prompt
Alert Box
• An alert box is often used if you want to make sure information comes through to the user. •
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax: window.alert("sometext");
The window.alert() method can be written without the window prefix.
Eg’;
<html lang =“en”>
<head><title>hi.html</title>
<meta charset = “utf-8” />
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Confirm Box
• A confirm box is often used if you want the user to verify or accept something.
• When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed
if the user clicks "OK", the box returns true.
• If the user clicks "Cancel", the box returns false.
Syntax: window.confirm("sometext");
The window.confirm() method can be written without the window prefix.
Prompt Box
• A prompt box is often used if you want the user to input a value before entering a page.
• When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed
after entering an input value.
• If the user clicks "OK" the box returns the input value.
• If the user clicks "Cancel" the box returns null.
Syntax window.prompt("sometext","defaultText");
The window.prompt() method can be written without the window prefix.

Console.log(): It is used for debugging purposes.


Syntax:
console.log()
Example: This example uses the console.log() property to display data.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h1>Heloooooooooo</h1>
<h2>
JavaScript Display
Using console.log()
</h2>
<script>
console.log(10 * 2);
</script>
</body>

</html>

Control Statements in JavaScript


JavaScript control statement is used to control the execution of a program based on a
specific condition. If the condition meets then a particular block of action will be executed
otherwise it will execute another block of action that satisfies that particular condition.

Types of Control Statements in JavaScript


 Conditional Statement: These statements are used for decision-making, a decision
is made by the conditional statement based on an expression that is passed. Either YES
or NO.
 Iterative Statement: This is a statement that iterates repeatedly until a condition is met.
Simply said, if we have an expression, the statement will keep repeating itself until and
unless it is satisfied.
JavaScript - Conditional Statements
JavaScript conditional statements allow you to execute specific blocks of code based on
conditions. If the condition is met, a particular block of code will run; otherwise, another block
of code will execute based on the condition.

1. Using if Statement
The if statement is used to evaluate a particular condition. If the condition holds true, the
associated code block is executed.
In JavaScript we have the following conditional statements:

The if Statement

• Use the if statement to specify a block of JavaScript code to be executed if a condition


is true.

Syntax

• if (condition) {
// block of code to be executed if the condition is true
}

Ex:

<script>

let a=90,b=50;

if(a<b)

document.write("a is gerater");

</script>

2. The else Statement

The else statement to specify a block of code to be executed if the condition is false.

Syntax
• if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}

Ex:

3. else if Statement
The else if statement in JavaScript allows handling multiple possible conditions and outputs,
evaluating more than two options based on whether the conditions are true or 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
}

ex:
3. Switch Statement

The switch statement is used to perform different actions based on different conditions.

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
}
4. Switch Statement

The switch statement is used to perform different actions based on different conditions.

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
}

JavaScript Loops

Loops can execute a block of code a number of times.

Different Kinds of Loops

JavaScript supports different kinds of loops:

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

Ex: <script>

let text = "";

for (let i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";

document.write(text);

</script>

2. The for...in Loop

• The for...in loop in JavaScript is used to loop through an object's properties. The
JavaScript for...in loop is a variant of the for loop.

• The for loop can't be used to traverse through the object properties. So, the for...in
loop is introduced to traverse through all object properties.

Syntax

The syntax of for...in loop in JavaScript is as follows


Ex: <script>

const person = {fname:"John", lname:"Doe", age:25};

let txt = "";

for (let x in person) {

txt += person[x] + " ";

document.getElementById("demo").innerHTML = txt;

</script>

3. JavaScript for...of Loop

The for...of loop in JavaScript is used to traverse elements of the iterable object.

Iterable objects include arrays, strings, maps, sets, and generators.

• Syntax

The syntax of 'for...of' loop in JavaScript in as follows


Ex:

<p id="demo"></p>

<script>

const cars = ["BMW", "Volvo", "Mini"];

let text = "";

for (let x of cars) {

text += x + "<br>";

document.getElementById("demo").innerHTML = text;

</script>

4. 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
}
Ex:

let text = "";

let i = 0;

while (i < 10) {

text += "<br>The number is " + i;

i++;

document.write(text);

</script>

5. 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);

Ex:

do {
text += "The number is " + i;
i++;
}
while (i < 10);

You might also like