MODULE 1
PHP
Module 1
Introduction web-documents: Static, Dynamic, Active Web programming: client side and server side scripting.
HTML5: Document Structure, Elements, Attributes, Types of Elements and Attributes, Basic HTML Data types.
Using HTML5 form elements: datalist, keygen, output,progress, meter. File uploading using forms - Frameset and frames.
CSS: External CSS, CSS3 Syntax, Selector: Universal, Class, ID. Working with Lists and Tables, CSS ID and Class – Navigation Bar - Image Gallery – Image Opacity.
Web pages
● Web page is a document available on world wide web.
● Web Pages are stored on web server and can be viewed using a web browser.
● Collection of linked web pages on a web server is known as website.
● There is unique Uniform Resource Locator (URL) is associated with each web page.
Web pages are of 3 types:
● Static Web page
● Dynamic Web page
● Active Web page
Static Web page
● Also known as flat or stationary web page.
● They are loaded on the client’s browser as exactly they are stored on the web server.
● Such web pages contain only static information.
● User can only read the information but can’t do any modification or interact with the information.
● Static web pages are created using only HTML.
Dynamic Web page
● Dynamic web page shows different information at different point of time.
● Dynamic web pages are executed on the server and then sent to the client.
● It is possible to change a portion of a web page without loading the entire web page.
● It has been made possible using Ajax technology.
Active web page
● It is first downloaded on the client machine and then executed.
● Here the browser performs the logic instead of the server.
● Everything is happening inside your browser without the need to reload the page every time you want new information.
Scripting Languages
● It is a programming language designed for Integrating and communicating with other programming languages.
● Here instructions are written for a run time environment.
● Scripting language is used to create dynamic web pages.
● These scripts are interpreted not compiled and executed line by line.
Client-side Scripting
● Programs that are executed on client-side.
● Client-side scripts contains the instruction for the browser to be executed in response to certain user’s action.
● Does not need interaction with the server.
Commonly used Client-Side scripting languages:
● JavaScript
● ActionScript
● Dart
● VBScript
Server-side Scripting
● Server-side scripting acts as an interface for the client and also limit the user access the resources on web server.
● Server side scripting involves server for its processing.
● It can also collects the user’s characteristics in order to customize response.
Commonly used Server-Side scripting languages:
● ASP
● Java
● Python
● PHP
● Ruby
● ColdFusion
● C#
● C++
HTML5 Document Structure
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
● The <!DOCTYPE html> declaration defines that this document is an HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph
HTML Element
● An HTML element is defined by a start tag, some content, and an end
Tag:
<tagname>Content goes here...</tagname>
● The HTML element is everything from the start tag to the end tag.
● HTML is Not Case Sensitive. <P> means the same as <p>.
HTML Attributes
● All HTML elements can have attributes.
● Attributes provide additional information about elements.
● Attributes are always specified in the start tag.
● Attributes usually come in name/value pairs like: name="value"
HTML Form Elements
1.<input> Element
The <input> element can be displayed in several ways, depending on the type attribute.
Eg:
<input type="text" id="firstname" >
2.<select> Element
● The <select> element defines a drop-down list.
● The <option> elements defines an option that can be selected.
● By default, the first item in the drop-down list is selected.
● To define a pre-selected option, add the selected attribute to the option.
● size attribute is used to specify the number of visible values.
● Use the multiple attribute to allow the user to select more than one value.
<select name="week" size="3" multiple>
<option value="sunday">Sunday</option>
<option value="monday" selected>Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
</select>
3. <textarea> Element
● The <textarea> element defines a multi-line input field.
● The rows attribute specifies the visible number of lines in a text area.
● The cols attribute specifies the visible width of a text area.
Eg:
<textarea name="text1" rows="10" cols="30">
//content..
</textarea>
4.<button> Element
● The <button> element defines a clickable button. Eg:
<button type="button”> Click Me! </button>
5.<fieldset> and <legend> Elements
● The <fieldset> element is used to group related data in a form.
● The <legend> element defines a caption for the <fieldset> element.
<form action=Home.php">
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="Jishna"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" value="K"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
6. <datalist> Element
● The <datalist> element specifies a list of pre-defined options for an
<input> element.
● The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<form action="Home.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
</form>
7. <output> Element
● The <output> element represents the result of a calculation.
● Attributes :
1. For Specifies the relationship between the result of the calculation, and
the elements used in the calculation
2. Form Specifies which form the output element belongs to.
3. Name Specifies a name for the output element
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0<input type="range" id="a" name="a" value="50">100 +
<input type="number" id="b" name="b" value="50">=
<output name="x" for="a b"></output><br><br>
<input type="submit">
</form>
8. <keygen> Element
● Used to specify a key-pair generator field in a form.
● The purpose is to provide a secure way to authenticate users.
● When a form is submitted then two keys are generated, private key and public key.
Syntax:
<keygen name = "name">
9 <progress> Element
● Used to display the progress of a task.
● It is mostly used to show the progress of a file uploading.
● Attributes :
Value It defines that how much work the task has been completed. Max It defines that how much work the task requires in total.
Eg : <progress value="43" max="100"></progress>
10. <meter> Tag
● Use the meter element to measure data within a given range.
● The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
● Examples: Disk usage
Eg:
Disk usage C:
<meter id="disk_c" value="2" min="0" max="10"></meter>
HTML Input Types
● <input type="button">
● <input type="checkbox">
● <input type="color">
● <input type="date">
● <input type="datetime-local">
● <input type="number">
● <input type="password">
● <input type="radio">
● <input type="range">
● <input type="reset">
● <input type="file">
● <input type="hidden">
● <input type="image">
● <input type="month">
● <input type="tel">
● <input type="text">
● <input type="time">
● <input type="url">
● <input type="week">
● <input type="email">
● <input type="search">
● <input type="submit">
File uploading using forms
● Define a file-select field.
● The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
● To define a file-select field that allows multiple files to be selected, add the "multiple" attribute.
Eg:
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" >
Frameset and frames
● HTML frames are used to divide browser window into multiple sections where each section can load a separate HTML document.
● A collection of frames in the browser window is known as a frameset.
● The window is divided into frames in a similar way the tables are organized: into rows and columns.
● The <frameset> tag defines, how to divide the window into frames.
● The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.
● Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame by using src attribute.
<frameset rows= "10%,80%,10%">
<frame name = "top" src = "top_frame.htm" />
<frame name = "main" src = "main_frame.htm" />
<frame name = "bottom" src = "bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
● The <frameset> tag was used in HTML 4 to define a frameset. It is Not Supported in HTML5.
● Use the <iframe> tag to embed another document within the current HTML document.
Eg:
<iframe src="https://www.w3schools.com"></iframe>
HTML Data Types
● In HTML, a datatype is explained as the type of data that is used in the content of an element or in the value of an attribute.
● HTML has different data types classified under the following specifications:
■ Basic HTML Data Types
■ Data Types defined by RFC and IANA
■ Data Types defined by W3C
Basic Data Types
● Character Data type
○ Stores single alphanumeric text, which includes letters, numbers, symbols, space or punctuations.
● Text Data type
○ Stores a string.
● Name Data type
○ Refers to a name given to any particular data element,function etc.
● Number Data type
○ Store a number (positive or negative)
Data types by RFC and IANA
● Uniform Resource Identifier
● Content type
● Language code
● Character set
Uniform Resource Identifier
● URIs include URLs.
● A URL is the address to a file, given as the protocol followed by the path. The protocol is separated from the path by a colon (:)
Common Internet Protocols:
○ Http:
■ HyperText Transfer Protocol, designed specifically for the World Wide Web
○ ftp:
■ File Transfer Protocol
Content-type
● [content-type] values are media types
● There are five discreet top-level content types. These are followed by a slash (/) and a subtype.
Example: text/html, where text is the top-level media type, and html is the subtype.
The Five Discreet Top-Level Content Types:
● text
● image
● audio
● video
● application
Common Content Types:
● text/plain (.txt)
● text/html (.htm, .html)
● text/xml (.xml)
● text/css (.css)
● text/javascript (.js)
● text/rtf (.rtf)
● image/jpeg (.jpg, .jpeg)
● image/gif (.gif)
● image/png (.png)
● image/tiff (.tif, .tiff)
● audio/basic (.au, .snd)
● audio/aiff (.aif, .aiff)
● audio/wave (.wav)
● audio/midi (.mid, .midi)
● video/mpeg (.mpg, .mpeg)
● video/quicktime (.mov)
● video/msvideo (.avi)
● application/pdf (.pdf)
● application/zip (.zip)
● application/x-zip-compressed (.zip)
● application/msword (.doc)
Language code
● A language code consists of two parts: the primary language tag, optionally followed by a hyphen (-) and a hyphen-separated series of subtags.
Example: "en" is the code for English. To be more specific, it can also specify "en-US", indicating the US variant of English
Character Set
● It is a set of standard characters taken from several languages and script all over the world, and are represented with unique code points.
● Example: dollar symbol, lower case letters, upper case letters,
quotation mark etc.
Data types by W3C
● DateTime
● Red Green Blue (RGB) triplet
● Color names
● Link types
● Media types
DateTime
● [datetime] values use the ISO date format.
YYYY-MM-DDThh:mm:ssTZD
ie.,
[year]-[month]-[date]T[hour]:[minute]:[second][time zone designator]
Red Green Blue (RGB) triplet
● They are a six digit number in hexadecimal form.
● Each two digits represent a color:
○ The first two represent Red.
○ The next two represent Green.
○ The last two represent Blue.
Color names
Link types
Used to provide a variety of information to search engines.
● Stylesheet
○ Indicates an external style sheet.
● Script
○ Indicates an external script.
● Start
○ Indicates the first document in a series, of which the current document is a part.
● Next
○ Indicates the next document in the series.
● Contents
○ Indicates a table of contents for the current document
● Index
○ Indicates an index for the current document
● Glossary
○ Indicates a glossary for terms used in the current document
● Copyright
○ Indicates a copyright statement for the current document
● Chapter
○ Indicates a chapter in the current document
● Appendix
○ Indicates an appendix to the current document
● Help
○ Indicates a help section.
● Bookmark
○ Indicates a bookmark.
Media types
It specify how to present HTML documents in different media. The available media types are:
● Screen
○ For computer screens
● Tv
○ For television-type media
● Projection
○ For projectors
● Handheld
○ For handheld devices (small screen)
○ For paged media (printed materials, print preview).
● Braille
○ For braille devices (tactile).
● Aural
○ For speech browsers.
● All
○ For all media.
Cascading Style Sheets (CSS)
● CSS describes how HTML elements are to be displayed on screen.
● CSS is used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes.
● It can control the layout of multiple web pages all at once.
CSS Syntax
● A CSS rule-set consists of a selector and a declaration block.
● The selector points to the HTML element.
● The declaration block contains one or more declarations separated by semicolons.
● Each declaration includes a CSS property name and a value, separated by a colon.
● Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Syntax :
Selector { property:value; property:value }
Eg:
p { color: red; text-align: center; }
CSS Selectors
1. CSS element Selector
● The element selector selects HTML elements based on the element name.
Eg:
p {
text-align: center; color: red;
}
2. CSS id Selector
● The id selector uses the id attribute of an HTML element to select a specific element.
● To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Eg:
#para1
{
text-align: center; color: red;
}
3. 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.
Eg:
.center
{
}
text-align: center; color: red;
● We can also specify that only specific HTML elements should be affected by a class.
● Eg:
P.center{
text-align: center; color: red;
}
● In this example only <p> elements with class="center" will be center-aligned:
4. CSS Universal Selector
● The universal selector (*) selects all HTML elements on the page. Eg:
* {
text-align: center; color: blue;
}
5. CSS Grouping Selector
● The grouping selector selects all the HTML elements with the same style definitions.
Eg:
h1, h2, p {
text-align: center; color: red;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
● External CSS
● Internal CSS
● Inline CSS
External CSS
● With an external style sheet, the look of an entire website can be changed by just one file.
● An external style sheet must be saved with a .css extension.
● External styles are defined within the <link> element, inside the
<head> section of an HTML page.
Eg: <link rel="stylesheet" type="text/css" href="mystyle.css">
Internal CSS
● An internal style sheet may be used if one single HTML page has a unique style.
● Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
<head><style> body {
background-color: linen;
}
h1 {
color: maroon; margin-left: 40px;
}
</style></head>
Inline CSS
● An inline style may be used to apply a unique style for a single element.
● To use inline styles, add the style attribute to the relevant element.
Eg:
<h1 style="color:blue;text-align:center;">This is a heading</h1>
CSS - Working with Lists
The CSS list properties allows to:
● Set different list item markers for ordered lists.
● Set different list item markers for unordered lists.
● Set an image as the list item marker.
● Add background colors to lists and list items.
Different List Item Markers
● The list-style-type property specifies the type of list item marker. Eg:
ul.a {
}
ol.b {
}
list-style-type: circle;
list-style-type: upper-roman;
An Image as The List Item Marker
● The list-style-image property specifies an image as the list item marker.
Eg:
ul {
list-style-image: url('sqpurple.gif');
}
Position The List Item Markers
● The list-style-position property specifies the position of the list-item markers (bullet points).
● "list-style-position: outside;" means that the bullet points will be outside the list item. This is default.
● "list-style-position: inside;" means that the bullet points will be inside the list item.
Eg:
ul.a {
}
ul.b {
}
list-style-position: outside;
list-style-position: inside;
Remove Default Settings
● The list-style-type:none property can also be used to remove the markers/bullets.
● The list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>.
List - Shorthand property
● The list-style property is a shorthand property.
● It is used to set all the list properties in one declaration. Eg:
ul {
}
list-style: square inside url("sqpurple.gif");
Styling List With Colors
● style added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items.
Eg: ol {
}
ul li {
}
background: #ff9999;
background: #cce5ff;
CSS - Working with Table
Table Borders
● To specify table borders in CSS, use the border property. Eg:
table, th, td {
}
border: 1px solid black;
Collapse Table Borders
● The border-collapse property sets whether the table borders should be collapsed into a single border.
Eg:
table {
border-collapse: collapse;
}
Table Width and Height
● Width and height of a table are defined by the width and height properties.
Eg:
table { width: 100%; } th { height: 50px; }
Horizontal Alignment
● The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.
● By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned. Eg:
th {
text-align: left;
}
Vertical Alignment
● The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.
● By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements). Eg:
td {
height: 50px; vertical-align: bottom;
}
Table Padding
● To control the space between the border and the content in a table, use the padding property on <td> and <th> elements.
Eg:
th, td {
}
padding: 15px; text-align: left;
Horizontal Dividers
● Add the border-bottom property to <th> and <td> for horizontal dividers.
Eg:
th, td {
border-bottom: 1px solid red;
}
Hoverable Table
● Use the :hover selector on <tr> to highlight table rows on mouse over.
Eg:
tr:hover
{
}
background-color: green;
Striped Tables
● For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows.
Eg:
tr:nth-child(even)
{
background-color: red;
}
Table Color
Eg:
th {
}
background-color: #4CAF50; color: white;
Navigation Bar
● It is a section of a graphical user interface intended to aid visitors in accessing information.
● A navigation bar is basically a list of links, so using the <ul> and
<li> elements makes perfect sense. Eg: <ul>
<li><a href="default.asp">Home</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
2 Types of Navigation Bar
● Vertical
● Horizontal
Image Gallery
● Image Gallery is used to store and display collection of pictures.
● A basic gallery structure contains:
■ a number of div section.
■ Each div section contains an image and its description.
Image Opacity / Transparency
● The opacity property is used in the image to describes the transparency of the image.
● The value of opacity lies between 0.0 to 1.0 where a low value represents high transparent and high value represents low transparent.
നിങ്ങൾക്ക് ഉപകാരപ്പെട്ടെങ്കിൽ നിങ്ങളുടെ കൂട്ടുകാർക്ക് കൂടി ഷെയർ ചെയ്യുക
Share This
