Web Programming Basic topic.pptx

Presentation
Web Programming/(203 D1)
WEB PROGRAMMING LANGUAGES

INTRODUCTION
Md. Rifat Hasan
ID: 202002043
Dewan manhajul Islam
ID: 202002046
Rony ahmed
ID: 202002056
Shurav Podder
ID: 202002048
COURSE INSTRUCTOR
Lecturer
Green University of Bangladesh
Md. Noyan Ali

Cascading Style Sheets (CSS)
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
Types of CSS (Cascading Style Sheet)
There are three types of CSS which are given below:
 Inline CSS
o An inline CSS is used to apply a unique style to a single HTML element.
o An inline CSS uses the style attribute of an HTML element.
 Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

 Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
 EXAMPLE
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
 External CSS
 An external style sheet is used to define the style for many HTML pages.
 To use an external style sheet, add a link to it in the <head> section of each HTML page
 Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

CSS Tables
 Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:
 Full-Width Table
The table above might seem small in some cases. If you need a table that should span the entire screen (full-width),
add width: 100% to the <table> element:

Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border:
CSS Layout - float
 left - The element floats to the left of its container
 right - The element floats to the right of its container
 none - The element does not float (will be displayed
just where it occurs in the text). This is default
 inherit - The element inherits the float value of its
parent

CSS Positioning
 Positioning refers to the layout of the items on our page.
 It also refers to the “position” descriptor in CSS rules (more on this in a minute)
 position: static
• HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left, and right properties.
• An element with position: static; is not positioned in any special way; it is always positioned according to the normal
flow of the page
 position: relative
• An element with position: relative; is positioned relative to its normal position.
• Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the
element.

 position: fixed
• An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place
even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
• A fixed element does not leave a gap in the page where it would normally have been located.
 position: absolute
• An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed).
• However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along
with page scrolling.
 position: sticky
• An element with position: sticky; is positioned based on the user's scroll position.

JavaScript
 JavaScript is a client-side scripting language
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and
much more
Why use client-side programming?
usability: can modify a page without having to post back to the server (faster UI)
efficiency: can make small, quick changes to page without waiting for server
event-driven: can respond to user actions like clicks and keyPresses server-side programming (PHP) benefits:
security: has access to server's private data; client can't see source code

Embedding JavaScript in HTML
 Embedding JavaScript in HTML directly
 Embedding JavaScript as an external file
 Embedding JavaScript as an external file
• We place script in a separate file and include this in HTML code
• SRC attribute of the <SCRIPT> is used to include the external JavaScript file in HTML
• Are useful when you have lengthy scripts
• Improve the readability
 Embedding JavaScript in HTML directly
• The <SCRIPT> tag is used to embed JavaScript code in HTML documents
• JavaScript can be placed anywhere between <HTML> and </HTML> tags

Web Programming Basic topic.pptx

More Related Content

Similar to Web Programming Basic topic.pptx

Recently uploaded

Web Programming Basic topic.pptx