Web Development.pptx

WEB
DEVELOPMENT
P R I N S T O N S M A R T E N G I N E E R S

AGENDA
Internship Structure.
How People Access the Internet?
How the WEB Works?
Web Development Introduction.
HTML Introduction.
Creating Web Page on your PC.
PRINSTON SMART ENGINEERS

INTERNSHIP STRUCTURE
PHASE 1
HTML, CSS, JavaScript, PHP, MySQL.
PHASE 2
PROJECT WORK.

HOW PEOPLE ACCESS THE WEB?
WEBPAGE
A web page is a specific collection of information provided by a website and
displayed to a user in a web browser.
WEBSITE
It is a collection of web pages.
BROWSERS
A web browser is a software application for accessing information on the World Wide
Web. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera.
WEB SERVER
Web servers are special computers that are constantly connected to the Internet, and are
optimized to send web pages out to people who request them.

HOW THE WEB WORKS?

WEB DEVELOPMENT

HTML - INTRODUCTION
• HTML – HYPERTEXT MARKUP LANGUAGE
• HTML is a Standard Markup Language which is used for creating web pages
and web applications.
• HTML defines the structure of a Web Page.
• It provides HTML elements to create the Web Pages. So these elements are
represented by Tags.

HTML ELEMENTS, TAGS
HTML Uses Elements to Describe the Structure of Pages.
Tags act like containers. They tell you something about the information that lies
between their opening and closing tags.

ATTRIBUTES
• Attributes Tell Us More About Elements.
• It provides additional information about the contents of an element. They
appear on the opening tag of the element and are made up of two parts:
• a name and a value, separated by an equal to sign.

STRUCTURE OF A HTML DOCUMENT

BODY, HEAD & TITLE
<head>
This element is used to pass additional information to the Browser. It contains
information about the page.
<title>
Contents of this element are visible one the Title Bar of the page or on the tab
for that page.
<body>
This element forms the body of the HTML Document. Everything inside this
element will be shown in the main browser window.

CREATING WEB PAGE ON YOUR PC
Text Editors:
• Notepad.
• Sublime Text.
• Notepad++.
• Visual Studio Code.

SUMMARY
• HTML pages are text documents.
• HTML uses tags (characters that sit inside angled brackets) to give the
information they surround special meaning.
• Tags usually come in pairs. The opening tag denotes the start of a piece of
content; the closing tag denotes the end.
• Opening tags can carry attributes, which tell us more about the content of
that element.
• Attributes require a name and a value.

TEXT
HEADING TAGS
• HTML has 6 levels of headings starting
from <h1> to <h6>.
• <h1> element is used for Main
Headings.
• <h2> element is used for Sub Headings
and so on.
• <h1> is the largest headings and <h6> is
the smallest/ least significant heading.
• Example - <h1> This is a Main Heading
</h1>

PARAGRAPH ELEMENT
• HTML defines a Paragraph using the <p> tag.
• To create a paragraph, surround the words that make up the paragraph with an
opening <p> tag and closing </p> tag.
• By default, a browser will show each paragraph on a new line with some space
between it and any subsequent paragraphs.
BOLD & ITALIC
• In HTML we can make any word/sentence bold by surrounding the content
within the <b></b> tags.
• Similarly in order to make characters appear italic we can place them between
the <i></i> tags.

SUBSCRIPT & SUPERSCRIPT ELEMENT
• The <sub></sub> element is used to display text as a Subscript.
• Similarly, the <sup></sup> element is used to display text as a
Superscript.
HORIZONTAL RULE
• The <hr> element can be used to bring about a thematic change to
the page. It is an empty tag.
BREAK ELEMENT
• A line break inside the middle of a paragraph can be added using <br> tag.

TRY YOURSELF
Create a simple HTML Page that demonstrates the various text Markups.
Format the Web page as follows :
• Make the heading look distinct from the other text.
• Draw a Line across the web page after the Main Heading.
• Make the sub headings look distinct from the heading and other text.
• Make use of the Subscript and the Superscript Elements anywhere.

IMAGES IN HTML
Images in HTML can be added by using the <img> Element. It is an empty
element. The img tag accepts many attributes like,
• src – This attribute tells the browser where the image is. The value of this
attribute is usually a relative URL of the image.
• alt – This attribute provides the alternate text that must be displayed in case
when the image is not visible.
• title – You can also provide a title to the image.
• width – This attribute specifies the width of the image in pixels.
• height – this specifies the height of the image in pixels.

FIGURE AND FIGURE CAPTION
• <figure> - HTML has introduced an element that contains the
images along with their captions so that the two are associated.
• <figcaption> - The figcaption element has been added to HTML5 in
order to allow web page authors to add a caption to an image.

HTML offers 3 different types of lists.
1. ORDERED LIST
• They are lists where each item in the list is numbered.
• Ordered Lists are created using the <ol> </ol> Element.
• The <li></li> element is used to define the lists. Each item in the list is placed
within the <li></li> element.
LISTS IN HTML

2. UNORDERED LIST
• They are lists that begin with a bullet points.
• Unordered Lists are created by using the <ul></ul> element.
• Like the Ordered List, unordered Lists also use <li></li> Tag to define the items
of the list.
• Definition lists - are made up of a set of terms along with the definitions for
each of those terms.

3. DEFINITION LIST
• They are made up of a set of terms along with the definitions for each of those
terms.
• The definition Lists are created using the <dl> element and usually consists of
series of terms and their description.
• The <dt></dt> contains the term to be defined. (Definition Term).
• The <dd><dd> contains the definition of the term.

AGENDA
Links in HTML
Create a Table in HTML.
HTML Forms.

LINKS IN HTML
• In HTML, links are created using the Anchor tag <a> </a>.
• The <a> </a> element has an attribute called href whose value is the URL of
the page you want the user to go on clicking the link.

We will come across the following types of links:
• Links from one website to another
• Links from one page to another on the same website
• Links from one part of a web page to another part of the same page
• Links that open in a new browser window
• Links that start up your email program and address a new email to someone

TYPES OF LINKS
ABSOLUTE URL/LINK
• An absolute URL starts with the domain name for that site, and can be
followed by the path to a specific page. If no page is specified, the site will
display the homepage.
• Example- https://www.google.co.in
RELATIVE URL/LINK
• These are like a shorthand version of absolute URLs because you do not need
to specify the domain name.
• Example – Table.html

EMAIL LINKS
• To create a link that starts up the user's email program and addresses an email
to a specified email address, you use the element. However, this time the
value of the href attribute starts with mailto: and is followed by the email
address you want the email to be sent to.
• Example – <a href=“mailto:sara@gmail.com”> Send mail </a>
• when the link is clicked on, the user's email program will open a new email
message and address it to the person specified in the link.

TARGET ATTRIBUTE
• Anchor Element has another attribute called target that specifies where to
open the linked document/page.
• Target attribute has multiple values it accepts like –
_self – This specifies that the link be opened in the current page.
_blank – This opens the link in a new page.
• Example- <a href=https://www.google.co.in target=“_self”>Click Me </a>

TABLES IN HTML
• The <table> Element is used to create a table. The contents of the table are
written out row by row.
• The <tr> element can be used to define each row of the table.
• Each cell of the table is defined by the <td></td> tag. The cells of a particular
row are placed between the <tr></tr> elements.
• The <th></th> element can be used to add the headings to the row or columns
of the table. The browser usually displays the content of the <th> tag in bold
and in the center of the cell.

ATTRIBUTES OF TABLE
SCOPE
• You can use the scope attribute on the <th> element to indicate whether it is a
heading for a column or a row.
SPANNING COLUMN
• colspan can be used within the <td> or <th> tag to indicate how many columns
the cell should run for. It accepts numeric values.
• Example - <td colspan=“3”> geography </td>
SPANNING ROW
• rowspan can be used within the <td> or <th> tag to indicate how many rows
the cell should run for. It accepts numeric values.
• Example - <td rowspan=“2”> geography </td>

FORMS

FORM STRUCTURE
• The Form controls live inside the <form></form> Element.
• Each Form element must have the action and method attribute.
• Action attribute – It’s value is the URL for the page on the server that will
receive the information in the form when it is submitted.
• Method attribute – there are 2 methods Get, Post.
• With the get method, the values from the form are added to the end of the
URL specified in the action attribute.
• With the post method the values are sent in what are known as HTTP headers.

FORM CONTROLS
• INPUT – This element is used to create several different form controls. The
value of the type attribute determines what kind of input they will be creating.
• The different type values are – Text, Password, Email, Radio, Checkbox, file,
submit.
• Basic format - <input type=“text” name=“ ” value=“ “>………</input>
• Name attribute - The value of this attribute identifies the form control and is
sent along with the information they enter to the server.

<select></select>
• This element is used to create a drop down list box. It contains two or more <option>
elements.
<option></option>
• This element is used to specify the options that the user can select from. The words
between the opening and closing tags will be shown to the user in the drop down box.
<textarea></textarea>
• element is used to create a mutli-line text input. Unlike other input elements this is not
an empty element. It should therefore have an opening and a closing tag.

GROUPING FORM ELEMENTS
<fieldset> </fieldset>
• You can group related form controls together inside this element.
• Most browsers will show the fieldset with a line around the edge to show how
they are related.
<legend></legend>
• This element can come directly after the opening of the <fieldset> element.
• It contains a caption which helps identify the purpose of that group of form
controls.

AGENDA
Doctypes & Comments.
ID & Class Attributes.
Block & Inline Elements.
Grouping Elements.

DOCTYPES & COMMENTS
• Each web page should begin with a DOCTYPE declaration to tell a browser
which version of HTML the page is using (although browsers usually display the
page even if it is not included).
• The doctype declaration for a HTML 5 document is <!DOCTYPE html>.
COMMENTS
• Comments in HTML can be defined using the following tag.
• 
• Comment will not be visible in the browser.

ID ATTRIBUTE
• Every HTML element can carry the id attribute. It is used to uniquely identify
that element from other elements on the page.
• Its value should start with a letter or an underscore (not a number or any other
character).
• It is important that no two elements on the same page have the same value for
their id attributes (otherwise the value is no longer unique).
• The id attribute is known as a global attribute because it can be used on any
element.
• Example - <p id=“para_one”>……………</p>

CLASS ATTRIBUTE
• Every HTML element can also carry a class attribute.
• Sometimes, rather than uniquely identifying one element within a document,
you will want a way to identify several elements as being different from the
other elements on the page.
• By default, using these attributes does not affect the presentation of an
element. It will only change their appearance if there is a CSS rule that
indicates it should be displayed differently.
• If you would like to indicate that an element belongs to several classes, you can
separate class names with a space.

BLOCK & INLINE ELEMENTS
BLOCK ELEMENTS –
• Some elements will always appear to start on a new line in the browser
window. These are known as block level elements.
• Example - <h1>, <p>, <ul>, <li>, etc.
INLINE ELEMENTS –
• Some elements will always continue to appear on the same line as their
neighboring elements. These are known as inline elements.
• Example - <a>, <img>, <b>, etc.

GROUPING ELEMENTS IN A BLOCK
• The <div> element allows you to group a set of elements together in one
block-level box.
• In a browser, the contents of the <div> element will start on a new line, but
other than this it will make no difference to the presentation of the page.
• It can also make it easier to follow your code if you have used <div> elements
to hold each section of the page.
• By using the id/class attribute to the <div> element you can style it with
the help of CSS properties.
• For example - A <div> element can be created to hold all the elements
of a nav bar of the web page (like the logo and the navigation).

AGENDA
Iframes.
Video’s in HTML.
Audio’s in HTML.

IFRAMES
• The term iframe is an abbreviation of inline frame. An iframe is like a little
window that has been cut into your page — and in that window you can see
another page.
• Some attributes used in <iframe> element are-
• Src - The src attribute specifies the URL of the page to show in the frame.
• Height - The height attribute specifies the height of the iframe in pixels.
• Width - The width attribute specifies the width of the iframe in pixels.
• An iframe can be used as the target frame for a link. The target attribute of the
link must refer to the name attribute of the iframe.

VIDEO & AUDIO
VIDEO –
• A video can be added to a web page using the <video> element.
• An Audio can be added to a HTML document by using the <audio> element.
• Both audio and video elements have a no. of attributes that help control the
audio/video playback.
• Src - This attribute specifies the path to the video/audio.
• Controls - When used, this attribute indicates that the browser should supply
its own controls for playback.

• Autoplay - When used, this attribute specifies that the file should play
automatically.
• Loop - This attribute specifies that the audio track should play again once it has
finished.
• Poster - This attribute allows you to specify an image to show while the video
is downloading or until the user tells the video to play.
• Height, Width - These attributes specify the size of the video player in pixels.

AGENDA
CSS Introduction.
Types of CSS.
CSS Selectors.

CSS INTRODUCTION
• CSS allows you to create rules that specify how the content of an element
should appear.
• CSS works by associating rules with HTML elements. These rules govern how
the content of specified elements should be displayed. A CSS rule contains two
parts: a selector and a declaration.

• CSS declarations sit inside curly brackets and each is made up of two parts: a
property and a value, separated by a colon.
• You can specify several properties in one declaration, each separated by a
semi-colon.

TYPES OF CSS
EXTERNAL STYLE –
• The <link> element can be used in an HTML document to tell the browser
where to find the CSS file used to style the page. It lives inside the <head>
element of the HTML document. It has the following attributes –
• Href – This specifies the path to the CSS file .
• Type – This attribute specifies the type of document being linked to. The value
should be text/CSS.
• Rel – This specifies the relationship between the HTML page and the file it is
linked to. The value should be stylesheet when linking to a CSS file.

INTERNAL CSS –
• You can also include CSS rules within an HTML page by placing them inside a
<style> element which usually sits inside the <head> element of the
Document.
• The <style> element should use the type attribute to indicate that the styles
are specified in CSS. The value should be text/ CSS.
INLINE CSS –
• You can add styling properties to a particular HTML element by using the style
attribute for the HTML element.

CSS SELECTORS
• There are many different types of CSS selector that allow you to target rules to
specific elements in an HTML document.

AGENDA
CSS Color Properties.
CSS Text Properties.
Boxes & Borders.

CSS COLOR PROPERTIES
1. COLOR: The color property allows you to specify the color of text inside
an element. You can specify any color in CSS in one of three ways: RGB
Values, HEX Code, Color names.
2. BACKGROUND-COLOR: CSS treats each HTML element as if it appears
in a box, and the background-color property sets the color of the
background for that box. Just like for the color property we can use the RGB
values, Hex values, color names for specifying the background color.

• RGB VALUES – These express colors in terms of how much red, green and blue are
used to make it up. Example - background-color:rgb(69, 82, 172)
• RGBA VALUES – It is an extension of RGB with the Alpha parameter. The value of Alpha
parameter can vary from 0.0 to 1.0. It is used to specify the Opacity of the color. 0.0 is
Fully transparent where as 1.0 is completely opaque.
• For Example – background-color:rgba(255, 100, 121, 0.5)
• HEX CODES – These are six-digit codes that represent the amount of red, green and
blue in a color, preceded by a pound or hash # sign (it is of the form #rrggbb) .
• Example - background-color:#84c7ff
COLORS

• HSL VALUES – It stands for Hue Saturation and Lightness. Hue is a degree on the color
wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
• Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
• For example - background-color:hsl(54, 100%, 64%)
• HSLA VALUES – it is an extension of the HSL value and specifies an Alpha parameter
which specifies the opacity. Its value ranges from 0 i.e., fully transparent to 1.0 which
is fully opaque.
• For example - background-color:hsla(9, 100%, 64%, 0.5)

TEXT
font-size:
The font-size property enables you to specify a size for the font.
• PIXELS - Pixels are commonly used as they give precise control over how much
space the text takes up. The number of pixels is followed by the letters px. The
default size of text is 16px.
• PERCENTAGE – The size can also be provided in %. 100% is equivalent to 16px.
So 75%=12px, 200%=32px.
• EMS – Another way to specify the size is by using em. 1em = 16px. So if you
want to calculate the em then you can use the formula: pixels/16.

font-family:
The font-family property allows you to specify the typeface that should be used
for any text inside the element(s) to which a CSS rule applies.
• You can specify a list of fonts separated by commas so that, if the user does
not have your first choice of typeface installed, the browser can try to use an
alternative font from the list.
• If a font name is made up of more than one word, it should be put in double
quotes.
• For example – font-family: ”Times New Roman”, Times, serif;

font-weight:
• The font-weight property allows you to create bold text. There are two values
that this property commonly takes:
• normal - This causes text to appear at a normal weight.
• bold - This causes text to appear bold.
font-style:
• If you want to create italic text, you can use the font-style property. There are
three values this property can take:
• normal - This causes text to appear in a normal style (as opposed to italic or
oblique).

• Italic - This causes text to appear italic.
• Oblique - This causes text to appear oblique.
text-transform:
• The text-transform property is used to change the case of text giving it one of
the following values:
• uppercase - This causes the text to appear uppercase.
• lowercase - This causes the text to appear lowercase.
• capitalize - This causes the first letter of each word to appear capitalized.

text-decoration:
The text-decoration property allows you to specify the following values:
• none - This removes any decoration already applied to the text.
• underline - This adds a line underneath the text.
• overline - This adds a line over the top of the text.
• line-through - This adds a line through words.
line-height:
In CSS, the line-height property sets the height of an entire line of text.
Increasing the line-height makes the vertical gap between lines of text larger.

text-align:
The text-align property allows you to control the alignment of text. The property
can take one of four values:
• left - This indicates that the text should be left-aligned.
• right - This indicates that the text should be right-aligned.
• center - This allows you to center text.
• justify - This indicates that every line in a paragraph, except the last line,
should be set to take up the full width of the containing box.
text-indent:
The text-indent property allows you to indent the first line of text within an
element. The amount you want the line indented by can be specified in a
number of ways but is usually given in pixels or ems.

text-shadow:
It is used to create a drop shadow, which is a dark version of the word just
behind it and slightly offset. It can also be used to create an embossed effect by
adding a shadow that is slightly lighter than the text.
• For example- text-shadow: 1px 1px 0px #000000;
• The first length indicates how far to the left or right the shadow should fall.
• The second value indicates the distance to the top or bottom that the shadow
should fall.
• The third value is optional and specifies the amount of blur that should be
applied to the drop shadow.
• The fourth value is the color of the drop shadow

BOXES
Every box has three available properties that can be adjusted to control its appearance:
• Border - Every box has a border (even if it is not visible or is specified to be 0 pixels
wide). The border separates the edge of one box from another
• Margin - Margins sit outside the edge of the border. You can set the width of a margin
to create a gap between the borders of two adjacent boxes.
• Padding - Padding is the space between the border of a box and any content
contained within it. Adding padding can increase the readability of its contents.
• If you specify a width for a box, then the borders, margin, and padding are added to
its width and height.

BORDER
border-width:
• The border-width property is used to control the width of a border. The value of this
property can either be given in pixels or using one of the following values: thin,
medium, thick.
• You can control the individual size of borders using four separate properties:
• border-top-width, border-bottom-width,
• border-right-width, border-left-width.
• OR - border-width: 2px 1px 1px 2px;
• The values here appear in clockwise order: top, right, bottom, left.

border-style:
• You can control the style of a border using the border-style property. This property
can take the following values:
• solid - a single solid line
• dotted - a series of square dots (if your border is 2px wide, then the dots are 2px
squared with a 2px gap between each dot)
• dashed - a series of short lines
• double - two solid lines (the value of the border-width property creates the sum of
the two lines)
• hidden / none - no border is shown
• You can individually change the styles of different borders using:
• border-top-style, border-left-style,
• border-right-style, border-bottom-style.

border-color:
• You can specify the color of a border using either RGB values, hex codes or CSS color
names as well as hsl values.
• It is possible to individually control the colors of the borders on different sides of a
box using:
• border-top-color, border-bottom-color,
• border-right-color, border-left-color.
• It is also possible to use a shorthand to control all four border colors in the one
property:
• border-color: darkcyan deeppink darkcyan deeppink;
• The values here appear in clockwise order: top, right, bottom, left.

SHORTHAND
border:
• The border property allows you to specify the width, style and color of a border in one
property (and the values should be coded in that specific order).
• For example: border: 3px dotted #0088dd;
padding:
• The padding property allows you to specify how much space should appear between
the content of an element and its border. It can be specified in px, em or %.
• You can specify different values for each side of a box using:
• padding-top, padding-right,
• padding-bottom, padding-left.
• Or padding: 10px 5px 3px 1px;

margin:
• The margin property controls the gap between boxes. Its value is commonly given in
pixels, although you may also use percentages or ems.
• You can specify values for each side of a box using:
• margin-top, margin-right,
• margin-bottom, margin-left.
• OR margin: 1px 2px 3px 4px;
• In order to center a box on the page, you need to set a width for the box (otherwise it
will take up the full width of the page).
• Once you have specified the width of the box, setting the left and right margins to
auto will make the browser put an equal gap on each side of the box. This centers the
box on the page (or within the element that the box sits inside).

CHANGE INLINE/BLOCK
display:
• The display property allows you to turn an inline element into a block-level element or
vice versa, and can also be used to hide an element from the page. The values this
property can take are:
• inline - This causes a block-level element to act like an inline element.
• block - This causes an inline element to act like a block-level element.
• inline-block - This causes a block-level element to flow like an inline element, while
retaining other features of a block-level element.
• none - This hides an element from the page. In this case, the element acts as though it
is not on the page at all (although a user could still see the content of the box if they
used the view source option in their browser).

HIDING BOXES
visibility:
• The visibility property allows you to hide boxes from users but It leaves a space where
the element would have been. This property can take two values:
• hidden - This hides the element.
• visible - This shows the element.
• If the visibility of an element is set to hidden, a blank space will appear in its place. If
you do not want a blank space to appear, then you should use the display property
with a value of none instead.

BOX SHADOWS
box-shadow:
• The box-shadow property allows you to add a drop shadow around a box. It must use
at least the first of these two values as well as a color:
• Horizontal offset - Negative values position the shadow to the left of the box.
• Vertical offset - Negative values position the shadow to the top of the box.
• Blur distance - If omitted, the shadow is a solid line like a border.
• Spread of shadow - If used, a positive value will cause the shadow to expand in all
directions, and a negative value will make it contract.
• The inset keyword can also be used before these values to create an inner-shadow.

BOX RADIUS
box-radius:
• CSS3 introduces the ability to create rounded corners on any box, using a property
called border-radius. The value indicates the size of the radius in pixels.
• You can specify individual values for each corner of a box using:
• border-top-right-radius, border-bottom-right-radius,
• border-bottom-left-radius, border-top-left-radius.
• You can also use a shorthand of these four properties (in clockwise order: top, right,
bottom, left).
• For example: border-radius: 5px, 10px, 5px, 10px;

AGENDA
List Styling in CSS.
Pseudo elements & Pseudo classes.
Table Styling Properties.
Form Properties.

LISTS
List-style-type:
• The list-style-type property allows you to control the shape or style of a bullet point (also
known as a marker).
Unordered Lists
• For an unordered list you can use the following values:
• none, disc,
• circle, square.
Ordered Lists
• For an ordered (numbered) list you can use the following values:
• Decimal (1 2 3), decimal-leading-zero (01 02 03),
• lower-alpha (a b c), upper-alpha (A B C),
• lower-roman (i. ii. iii.), upper-roman (I II III).

POSITIONING THE MARKER
list-style-position:
Lists are indented into the page by default and the list-style-position property indicates
whether the marker should appear on the inside or the outside of the box containing
the main points. This property can take one of two values:
• outside The marker sits to the left of the block of text. (This is the default behavior if
this property is not used.)
• inside The marker sits inside the box of text (which is indented).
• For example- list-style-position:inside;
SHORTHAND
• For example: list-style: inside circle;

PSEUDO ELEMENTS
• CSS introduces both pseudo elements and pseudo-classes.
• A pseudo-element acts like an extra element is in the code.
• A pseudo-class acts like an extra value for a class attribute.
:first-line
It acts as though there is an extra element around the first line.
:first-letter
It acts as though there is an extra element around the first line.

PSEUDO CLASSES
:link
• This allows you to set styles for links that have not yet been visited.
:visited
• This allows you to set styles for links that have been clicked on.
:hover
• This is applied when a user hovers over an element with a pointing device such
as a mouse.
:active
• This is applied when an element is being activated by a user; for example,
when a button is being pressed or a link being clicked.

TABLE PROPERTIES
You have already met several properties that are commonly used with tables.
Width, Border, Padding, Background-color, :hover, font-size, text-transform
Here are some tips for styling tables to ensure they are clean and easy to follow:
• Give the cells padding.
• Distinguish the headings, make them in caps and bold.
• Shade the alternate rows.
• Align the contents of the cells. In particular align numbers to the right.

border-spacing:
The border-spacing property allows you to control the distance between
adjacent cells. The value of this property is usually specified in pixels. You can
specify two values if desired to specify separate numbers for horizontal and
vertical spacing.
border-collapse:
Borders are collapsed into a single border where possible. (border-spacing will
be ignored and cells pushed together, and empty-cells properties will be
ignored.)

FORMS
• STYLING TEXT INPUTS:
You have already met several CSS properties that are commonly used for styling text
inputs like - width, border, padding, border-radius, background-color, :hover, font-size,
color, :focus.
• STYLING SUBMIT BUTTONS:
You can use properties like color, background-color, box-shadow, border, border-radius,
:hover, cursor.
• STYLING FIELDSETS AND LEGEND:
The same styling properties can be used to style these elements.

cursor:
The cursor property allows you to control the type of mouse cursor that should be
displayed to users. For example, on a form you might set the cursor to be a hand when
the user hovers over it.
Here are the most commonly used values for this property:
Crosshair, default, pointer,
Move, text,
Wait, help,
url("cursor.gif");
You should only use these values to add helpful information for users in places they
would expect to see that cursor. (For example, using a crosshair on a link might confuse
users because they are not used to seeing it.)

AGENDA
Float in CSS.
Clear.
Image Properties.

FLOAT
• The float property allows you to take an element in normal flow and place it as
far to the left or right of the containing element as possible.
• Anything else that sits inside the containing element will flow around the
element that is floated.
• For example: float:left;
• When you use the float property, you should also use the width property to
indicate how wide the floated element should be. If you do not, results can be
inconsistent but the box is likely to take up the full width of the containing
element (just like it would in normal flow).

CLEAR
The clear property allows you to say that no element (within the same
containing element) should touch the left or righthand sides of a box.
It can take the following values:
• left - The left-hand side of the box should not touch any other elements
appearing in the same containing element.
• right - The right-hand side of the box will not touch elements appearing in the
same containing element.
• both - Neither the left nor right-hand sides of the box will touch elements
appearing in the same containing element.
• none - Elements can touch either side

STYLING IMAGES
• You can control the size of an image using the width and height properties in
CSS, just like you can for any other box.
• Aligning Images – You can use the float property to align images.
• Center Aligning Images – as images are inline elements you must use the
display property and make them block element. Then you can make use of the
margin property and give the left and the right margin value as auto.
• Background-image: The background-image property allows you to place an
image behind any HTML element. This could be the entire page or just part of
the page.
• For example- Background-image:url();

Background-repeat:
• The background-repeat property can have four values:
• repeat - The background image is repeated both horizontally and vertically (the
default way it is shown if the background-repeat property isn't used).
• repeat-x - The image is repeated horizontally only.
• repeat-y - The image is repeated vertically only.
• no-repeat - The image is only shown once.
Gradient background:
• The gradient is created using the background-image property.
• Different browsers required a different syntax. Since it is not supported by all
browsers. So there are alternatives for defining the gradient.

BACKGROUND-POSITION
• When an image is not being repeated, you can use the background-position property
to specify where in the browser window the background image should be placed.
• This property usually has a pair of values. The first represents the horizontal position
and the second represents the vertical.
• The different values accepted are- left top, left center, left bottom, center top, center
center, center bottom, right top, right center, right bottom.
• If you only specify one value, the second value will default to center.
• For example – background-position: left center;
• You can also use a pair of pixels or percentages. These represent the distance from the
top left corner of the browser window .

JAVASCRIPT

JAVASCRIPT STATEMENTS & COMMENTS
• A script is a series of instructions that a computer can follow one-by-one. Each
individual instruction or step is known as a statement. Statements should start on a
new line and end with a semicolon.
• This makes your code easier to read and follow. The semicolon also tells the JavaScript
interpreter when a step is over, indicating that it should move to the next step.
COMMENTS:
• A single line comment can be defined by using //.
• Whereas a multi line comment can be defined by using /* ……. */.

VARIABLES
• Variables are containers that store data.
• The keyword var can be used to declare the variable.
• The keyword const can be used to define a variable that cannot be reassigned
• The keyword let can be used keyword to define a variable with restricted scope.

ASSIGNING A VALUE

DATA TYPES
NUMERIC DATA TYPE –
• The numeric data type handles numbers. It can be written with or without decimals.
• For example - var number1 = 24; var number2 = 24.01;
STRING DATA TYPE –
• The strings data type consists of letters and other characters.
• For example - var string1 = “this is a sample string”;
BOOLEAN DATA TYPE –
• Boolean data types can have one of two values: true or false.
• For example – (number1 == number2)

ARITHMETIC OPERATORS

JAVASCRIPT DISPLAY PROPERTIES
document.getElementById(id) –
• This method can be used to access an HTML element.
• The id attribute defines the HTML element.
• .innerHTML - property defines the HTML content.
Alert() –
You can create an alert box by using the alert() method inside the <script> tag.
consle.log() –
For debugging you can make use of this method.

FUNCTIONS
• Functions let you group a series of statements together to perform a specific task. If
different parts of a script repeat the same task, you can reuse the function.
• A function is defined by using the function keyword followed by the name of the
function and ().
• For example – function function_name();
• The parameters are placed within the parenthesis.

ARRAYS
• Array is a special variable that can hold more than one value at a time. An array can
hold many values under a single name
• Syntax – var array_name = [item1, item2, ……];
• You can access an element from the array by using the index values. Remember array
indices start from 0;
ARRAY METHODS
• array_name.length - gives the length of the array.
• array_name.push() – adds an element to the array.
• array_name.pop() – removes an element from the array.

CONDITIONS
If statements –
It evaluates a condition. If it evaluates to true the statement in the subsequent code
block is executed. If it evaluates to false the statements are not executed.
If else statements –
It checks a condition. If it resolves to true then the first code block is executed. If it
resolves to false the second code block is executed instead.
Switch statements –
It starts with a variable called the switch value. Each case indicates a possible value for
this variable and the code that should run if the variable matches that value.

COMPARISON OPERATORS

LOOPS
• Loops check a condition. If it returns true it will run a block of code. Then it will check
the condition again and if it returns true it will run the code again. It repeats until the
condition returns false.
FOR LOOP –
• It uses a counter as a condition. It instructs the code to run a specific number of
times. A for loop has three statements. Initialization, Condition, Update.
WHILE LOOP –
• It loops through a block of code as long as a specified condition is true.
DO WHILE LOOP –
• This will execute the code block once then check the condition. If it is true it will
continue to repeat till the condition becomes false.

PHP
HYPERTEXT PREPROCESSOR

PHP SYNTAX
• PHP code starts with a <?php and ends with ?>
• For example –
<?php
Code goes here
?>
• PHP statements end with a semicolon ;.
• The PHP keywords, user-defined functions are not case sensitive whereas the variable
names are case sensitive.
• Comments in PHP – use // or # for a single line comment and /*…*/ for a multiple line
comment.

VARIABLES
• Variables are containers for storing data.
• Variables in PHP start with a $ sign.
• They must start with a letter or an underscore.
• The variable name can only contain alpha numeric values or an underscore.
• The variable names are case sensitive.
• Unlike other languages PHP has no command for declaring the variable. The moment
you assign a value to it, it is created.
• For example –
<?php
$num1 = 20;
$text = “hello”;
?>

OUTPUT METHODS
• Both echo and print can be used to display content on the screen.
• The only difference is that print has a return value of 1 so it can be used in
expressions whereas echo does not return anything.
• You can use the echo statement with or without parenthesis.
• For example – echo “Hello World!”; OR echo (“Hello World!”);
• The print statement can also be used with or without the parenthesis.
• For example print “Hello World”; OR print(“Hello World!”);

DATA TYPES
• PHP supports different data types – Integer, String, Float, Array, Boolean etc.
• String data type text must be enclosed within quotes.
• For example – <?php
$text =“Hello World!”;
?>
• PHP is a loosely typed language. This means that a single variable may contain any
type of data—be it a number, a string of text, or some other kind of value—and may
store different types of values over its lifetime.
• For example - <?php
$text = 3;
?>

PHP CONDITIONAL STATEMENTS
• If statement – Performs some statements if a condition is true.
• If else statements – it executes some statements if a condition is true and
executes some other code if the condition is false.
• If elseif else statements – it executes different codes based on the different
conditions which is often more than two.
• Switch - selects one block of code to execute.

LOOPS IN PHP
• While - loops through a block of code as long as the specified condition is true.
• Do while - loops through a block of code once, and then repeats the loop as
long as the specified condition is true.
• For - loops through a block of code a specified number of times.
• For each - loops through a block of code for each element in an array.

Web Development.pptx

More Related Content

Similar to Web Development.pptx (20)

Recently uploaded (20)

Web Development.pptx