Pm shandilya-s-wcodew-web-methodology

3
4
5
6
10
15
17
20
24
26
30
Table of Contents
About the book
Copyright
About the author
1. Introduction To Websites
2. Elements Of HTML
3. An Introduction To CSS
4. Web SQL & JS
5. Web Design
6. Domain Name Technique
7. Web Uploading
Thanking You...
2

About the book
The book in your hands is strictly based upon the syllabus prescribed by Wcodew
Online Tutorial Of Web Technology, India. The book has been written according
home study basis. The book has been number One among teachers and students
all over India for its clear presentation, effective, approach of solving all problems
and attractive figure. We hope this book will learn you all methodology.
Features Of The Book :
• Simple language and easily reproducible digram.
• Large variety of pdf.
• This book is full with all web fetures
• Easily to understand.
• Its first edition of this book but very powerful.
3

Copyright
Author
PM Shandilya
Editor
Wcodew Tutorial Of Web Technology
Copyright © 2015 Wcodew Tutorial Publication
First Published 2015
Book Code: 084100
This book may be purchased for educational, business, or sales promotional use.
Online edition is also available for this title. For more information, contact our
corporate/institutional sales department: ebooks-wcodew@post.com or
www.wcodew.page.tl
While every precaution has been taken in the preparation of this book, the
publisher and authors assume no responsibility for errors or omissions, or for
damages resulting from the use of the information contained herein.
4

About the Author
The author of this book PM Shandilya is a web
technologist.His short stories have appeared in numerous publications, including
Founder Online Tutorial Of Wcodew. He also is a regular contributor to Wcodew
Tutorial Pub.
He has developed hundred websites & in this time he teach online
web technology on Wcodew Tutorial at your home. His qualification is BCA
Information Technology. And he has learnt web developing to Germen. You can
contact him on www.prashantms.page.tl or email to pmshandilya@post.com so
thank.
A Note To The Students :
• Learn and teach.
• Qualification is not important but important is knowledge.
• Life is very short time period so learn all time.
• Life is learning lab.
• We wishes your future.
5

1. Introduction To Websites
In This Chapter: Websites, History of www, Webmatrix (Uses and publishing),
Types of websites
Websites:
A website, also written as web site,or simply site, is a set of
related web pages typically served from a single web domain. A website is hosted
on at least one web server, accessible via a network such as the Internet or a
private local area network through an Internet address known as a uniform
resource locator (URL). All publicly accessible websites collectively constitute the
World Wide Web.
Web pages, which are the building blocks of websites, are
documents, typically written in plain text interspersed with formatting
instructions of Hypertext Markup Language (HTML, XHTML). They may
incorporate elements from other websites with suitable markup anchors. Webpages
are accessed and transported with the Hypertext Transfer Protocol (HTTP),
which may optionally employ encryption (HTTP Secure, HTTPS) to provide
security and privacy for the user of the webpage content. The user's application,
often a web browser, renders the page content according to its HTML markup
instructions onto a display terminal.
The pages of a website can usually be accessed from a simple
Uniform Resource Locator (URL) called the web address. The URLs of the pages
organize them into a hierarchy, although hyperlinking between them conveys the
reader's perceived site structure and guides the reader's navigation of the site
which generally includes a home page with most of the links to the site's web
content, and a supplementary about, contact and link page.
Some websites require a subscription to access some or all of
their content. Examples of subscription websites include many business sites, parts
of news websites, academic journal websites, gaming websites, file-sharing
websites, message boards, web-based email, social networking websites, websites
providing real-time stock market data, and websites providing various other
6

providing real-time stock market data, and websites providing various other
services (e.g., websites offering storing and/or sharing of images, files and so
forth).
History Of www:
The World Wide Web (WWW) was created in 1990 by the
British CERN physicist Tim Berners-Lee.[3] On 30 April 1993, CERN
announced that the World Wide Web would be free to use for anyone.[4]
Before the introduction of HTML and HTTP, other protocols such as File Transfer
Protocol and the gopher protocol were used to retrieve individual files from a
server. These protocols offer a simple directory structure which the user navigates
and chooses files to download. Documents were most often presented as plain text
files without formatting, or were encoded in word processor formats.
WebMatrix
WebMatrix is a free web development tool that provides the easiest way to build
websites.
WebMatrix contains:
Web examples and templates
Support for many different web languages
A web server (IIS Express)
A database server (SQL Server Compact)
With WebMatrix you can start with an empty web site and a blank home page,
or you can build on templates using PHP, ASP, Umbraco, DotNetNuke, Drupal,
Joomla, WordPress and more.
WebMatrix also has built-in tools for databases, security, search engine
optimization, and web publishing.
To install WebMatrix, follow this link:
http://www.microsoft.com/web/gallery/install.aspx?appid=WebMatrix
7

Create an Empty Web Site
Follow the three simple steps below to create an empty web site with WebMatrix:
Select a Template
Edit the Home Page
Run the Web Site
The 3 steps below, creates an empty HTML web site. If you want to create an
PHP Site, an ASP site, or a Node.js site, look at the bottom of this page.
Step 1: Select a TemplateStart WebMatrix, select New.
From the template gallery, select Empty Site from HTML templates. Name the
site demoweb (or anything you like)and click Next:WebMatrix creates a new web
site and displays a workspace window. In the left pane, select the Files workspace:
Step 2: Edit the Home Page
To edit your home page, double-click the file wcodew_ebook.html. Put the
following content into the file:
wcodew_ebook.html
<!DOCTYPE html><html><head>
<title>My First Web Page</title>
</head><body>
<h1>My best book</h1>
</body></html>
Step 3: Run Your Web Site In WebMatrix, click Run: WebMatrix starts a web
server and runs the page in your default browser:
8

Types Of Websites
There are following types of websites:
Copyright © 2015 Wcodew Tutorial Publication | Author: PM Shandilya
9

2. Elements Of HTML
In This Topic: Introduction To HTML, Versions Of HTML, Elements Of HTML
(Body, Color, Table, Menu, Form)
What IS HTML
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Ttex Markup Language. A markup language is a set of
markup tags. HTML documents are described by HTML tags ,Each HTML tag
describes different document content. For eg, we give a structure of HTML;
Eg.htm
<html><head><title>title</title></head>
<body><h1>heading</h1>
<p>paragraph</p></body></html>
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
We use editor to perform HTML like Notepad. You can open it by this method;
Start<All Programs<Accessories<Notepad. But if you use windows8 than open
10

it as; Start Screen<Type Notepad.
Getting Starts:
1. Write some as Eg.html
2. It save with .htm or .html format.
3. Run it on your browser. then you can get your Eg.htm documents like this on
your browser,
Eg.htm
heading
paragraph
Elements Of HTML;
Body:
• to Heading big to small sizeto,
• Paragraph ,
• line break,
• Color of body,
• Color of fonts,
• Size of font,
• Style of font like vardana, Times new roman,
• Link
• my image
*Hint: You can use these tag any where script for eg you can add link tag as
image as hyperlink, size or color tag can be use as any paragraph, model etc.
Head:
<title> my title </title>
Table:
We make table by help of following tags
11

<table border="1" style="width:100%">
<tr>
<td>SSV</td>
<td>School</td>
<td>50</td>
</tr>
<tr>
<td>Dr. VK</td>
<td>Institute</td>
<td>94</td>
</tr>
</table>
After run we get;
Jill Smith 50
Eve Jackson 94
Menu:
Unordered lists and ordered lists are commonly used in HTML:
Unordered List
• The first item
• The second item
Ordered List
1. The first item
2. The second item
To performed this list we run this eg;
For unordered list- <ul><li>the first item</li><li>the second
item</li></ul>
For ordered list- <ul><ol>the first item</ol><ol>the second
item</ol></ul>
Form:
HTML forms are used to pass data to a server. A form can contain input elements
12

like text fields, checkboxes, radio-buttons, submit buttons and more. A form can
also contain select lists, textarea, fieldset, legend, and label elements. The tag is
used to create an HTML form:
<form> input elements</form>
HTML Forms - The Input Element
The most important form element is the input element. The input element is used
to select user information.An input element can vary in many ways, depending on
the type attribute. An input element can be of type text field, checkbox, password,
radio button, submit button, and more.The most used input types are described
below.
Text Fields
<input type="text" name="box module name" value=" value of input
box">defines a one-line input field that a user can enter text into:
First Name<input type="text" name="first name"><br>
Last Name<input type="text" name="last name">
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field
is 20 characters.
Password Field
Password <input type="password" name="psw" value="mypassword">
Password ••••••••••
Check Box
<input type="checkbox" name="accept" value="accept terms"> I accept all
regulation and terms of www.wcodew.page.tl
I accept all regulation and terms of www.wcodew.page.tl
Radio
<input type="radio" name="sex" value="male">Male <input type="radio"
name="sex" value="female">Female
13

Male Female
Buttons
Button like Submitting of form it depends on form action according to server like
<form action="url/.png"> then submit option as
<input type="button" name="submit" value="Submit To Wcodew">
Submit To Wcodew
File Upload
<input type="file" name="img" multiple">
No file selectedChoose File
Textarea
<input type="textarea">
14

3. An Introduction To CSS
In This Chapter: CSS, Background Color, Style Sheet
CSS is used for designed background of webpages, box models etc. In other words
we can say that it perform how tho show style of html. CSS stands for Cascading
Style Sheets.
Background Color
The background-color property specifies the background color of an element. The
background color of a page is set like this:
body {
background-color: #b0c4de;
}
* If we want to color diferint background of diferint script than we use as
following method:
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
Style Sheet
For examples create a new file named site.css.
15

Put the following code inside the CSS file:
mystylesheet.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius: 0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
font-size: 30px;
}
16

4. Web SQL & JS
In This Chapter: Server, Server Running PHP and SQL, Server Running
ASP.NET, An Introduction To JS
Now, we shall create a serever by SQL with PHP.
Server Running PHP and MySQL
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT CompanyName, City, Country FROM
Customers");
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>
Server Running ASP.NET, Razor and SQL Lite
17

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM
Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c
+ ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp
Web JS:
JS stands for JavaScript.
Create JavaScript
In the demoweb folder, create a new file named script.js. Put the following code
inside the file:
script.js
document.getElementById("foot01").innerHTML =
"
18

© " + new Date().getFullYear() + " W3Schools. All rights reserved.
";
19

5. Web Design
In This Chapter: Introduction To Web Desgining, Fetures Of Webs
Designing a web site needs careful thinking and planning.
The most important thing is to KNOW YOUR AUDIENCE.
Users are Scanners
A typical visitor will NOT read the entire content of your Web page!
No matter how much useful information you put into a Web page, a visitor will
only spend a few seconds scanning it before he/she decide whether to leave or to
stay.
Be sure to make your point in the very first sentence of the page! After that, try to
keep the user occupied with short paragraphs, and new headers down the page.
Less is More
20

Keep the paragraphs as short as possible. Keep the pages as short as possible. Keep
the chapters as short as possible. Use a lot of space! Pages overloaded with text
will kill your audience. If you have a lot to say, break your information into
smaller chunks and place it on different pages!
Navigation
Create a consistent navigation structure that is used by all the pages in your Web
site.
Don't use hyperlinks inside each paragraph, to send visitors to every page of your
Web. This will destroy the feeling of a consistent navigation structure.
If you must use hyperlinks, add them to the bottom of a paragraph, or to the
menu.
Download Speed
Sometimes developers are not aware of the fact that some pages take a long time to
download. Most visitors will leave a Web page that takes more than 7 seconds to
download. Test your web pages over a low-speed modem connection. If your pages
take a long time to download, consider removing graphic or multimedia content.
Let your Audience Speak!
Feedback is a very good thing! Your visitors are your "customers". Often they will
give you some valuable hints about what you could have done better. Provide a
simple way to reach you, and you will get a lot of input from people with different
skills and knowledge.
Visitor's Monitor
Not everyone on the internet has the same monitor as you.
If you design a Web site to be displayed on a monitor with a high resolution,
visitors with lower resolution monitors (like 800x600) might have problems
reading your pages.
Make sure you test your Web site on different monitors.
Take a look at our browser display statistics to see the trends in monitor
development.
What Browsers Do They Use?
Don't forget to test your Web site on different browsers. The most popular
browsers today are Internet Explorer, Firefox and Google Chrome. One wise thing
21

to do when designing Web pages is to use correct HTML. Correct coding will help
the browsers to display your pages correctly. Take a look at our browser statistics
to see the trends in browser development.
What Plug-Ins Do They Have?
Sound, video clips, or other multimedia content might require the use of separate
programs (plug-ins). Be sure that your visitors have access to the software needed
to view them.
What About Disabilities?
Some people have viewing or hearing disabilities. They might try to read your
pages with Braille or speech-based browsers. Always add text alternatives for
images and graphic elements. Using the newest web standards improves the
quality of your web site.
Use HTML 5
Writing your pages to the latest HTML5 standard, brings you as close as possible
to perfection. All HTML pages should contain a <!DOCTYPE> element to
define which HTML version it conforms to. The DOCTYPE gives important
information to your browser so it can render your page faster and more
consistently. The DOCTYPE declaration also allows validating software to check
the syntax of your page:
Use Separate CSS Files
Using Cascading Style Sheets (CSS) is the preferred way of separating content
from style, in quality web pages. Using CSS improves the quality of web sites
and increases the readability for many different browsers. Styles (sizes, fonts,
colors, and more) should be set outside web pages, in separate CSS files. Using a
separate CSS file will also greatly reduce your web site development costs. With a
separate CSS file you can change the style of HTML elements by rewriting one
line of code. If you have used CSS inside your pages, you will have to edit all these
pages.
Web Validation
A validator is a software program that can check your web pages against the web
standards. When using a validator to check HTML and CSS documents, the
validator returns a list of errors found, according to your chosen standard. Make
sure you make it a habit to validate all your web pages before publishing.
22

The Title Element
The <title> element is one of the most important HTML elements. Its main
function is to describe the content of a web page. Even if the title is not a visible
part of your web page, it is important to the quality of your web site because:
It will be visible in search engine lists
It is visible in the browser's title bar
It will be displayed in the user's bookmark
The title should be as short and descriptive as possibMake sure the title matches
the content the user is looking for. Then it is more likely the user will click on the
link to visit your web site.
Good title examples:
<title>HTML Tutorial</title>
<title>XML Introduction</title>
Bad title examples:
<title>Introduction</title>
<title>Chapter 1</title>
<title>Wcodew has a collection of award winning, well organized, and easy to
understand HTML, CSS, JavaScript, XML, and SQL tutorials with lots of
working examples and source code. </title>
Heading Elements
The <h1> element is used to describe the main heading of a web page.
Because some web browsers display the <h1> element in a very large font by
default, some web developers will use the <h2> element instead of the <h1>
element for main headings. This will confuse most search engines and other
software that will try to "understand" the structure of the web page. Use <h1>
for main headings, and <h2> and <h3> for lower level headings.
23

6. Domain Name Technique
In This Chapter : Domains, Types Of Domains, Register A Domain, Chosing A
Domain Name.
Domain names must be registered. When domain names are registered, they are
added to a large domain name register. In addition, information about the web
site, including the IP address, is stored on a DNS server.
DNS stands for Domain Name System. A DNS server is responsible for
informing all other computers on the Internet about the domain name and the web
site address.
A domain is a unique name like www.wcodew.page.tl, According to PM
Shandilya we can divide domains as two kinds;
1. Depending Domains : Whose depends on any other websites like
jobpost.heck.in, csetube.co.nr etc.
2. Non - Depending Domains : Whose non depends it means directly buying like
Facebook.com, Free-ebooks.net
Registering a Domain
Domains can be registered from domain name registration companies.
These companies provide interfaces to search for available domain names, and they
offer a variety of domain name extensions that can be registered at the same time.
Choosing a Domain Name
Choosing a domain name is a major step for any individual or organization.
New domain name extensions and creative thinking still offer thousands of
excellent domain names!
When choosing a name, it is important to consider the purpose of a domain name,
which is to provide an easy way to reach your web site.
The best domains have the following characteristics:
24

• Short - People don't like to type long domain names! A short domain name is
easier to type, read, and remember.
• Meaningful - A short domain is nothing without meaning, 34i4nh.com is not
easy to enter or to remember. Select a domain that relates to your site in a way
that people will understand.
• Clear - Clarity is important when selecting a domain name. Avoid a name that
is difficult to spell or pronounce.
Exposure - Names that are short and easy to remember are an asset. In addition
to visitors, also consider search engines. Search engines index your site and rank it
for relevance against terms people search for. In order to maximize your sites
exposure, consider including a relevant search term in your domain. Of course,
only consider this if it still maintains a short, clear and meaningful domain name.
25

7. Web Uploading
In This Chapter : Website Upload With Dreamwaver
Website Upload with Dreamweaver
With DreamWeaver you can easily create new pages, open an existing project or
just make a connection to an already published web site. The first step is to define
your site in Dreamweaver. Select "Site" and click on the "New Site" option:
When the Site Definition window appears, select the Advanced -> Local Info
category:
26

In the Site name field enter the name of your site. Specify the path to the root
folder of your site stored on your local computer.
Check the Refresh local file list automatically and Enable cache options. In the
HTTP Address field enter the URL that your remote Web site will use. This way
Dreamweaver will be able verify the links within your site.
The next step is very important, so please pay close attention to it. Click on the
Remote Info category:
Choose FTP from the Access drop-down menu. In FTP host field type the remote
27

server host name. If your domain name is pointed to the correct host, you can type
your domain name instead.
In the Host directory field you should type either public_html or www. This is the
directory where you should store your web site.
Enter your FTP login details. You can test your connection by clicking on the
Test button. It is very important to check the Use passive FTP option. In the
Testing Server category select the remote server model you wish to use. For
example, if your site is hosted on a Linux-based server and you are planning to
create and execute PHP scripts using a MySQL database, you should choose PHP
MySQL server model.
When you are finished setting your preferences, click OK and that will complete
your setup. In your Dreamweaver workspace there should be a window like this:
28

Choose your site from the list menu located on the top left corner and click on the
button to connect to the remote server. From the right list menu you can choose to
browse your file either on your local computer or on the remote server. Select a file
or directory which you wish to upload and click the up arrow button. If you want
to download a file or a directory you should click the down arrow button.
29

Thanking You...
I hope you will have like this book. To get letest edition of this
book or more books of Wcodew Tutorial Publication go to www.Wcodew.page.tl
Learn Online Web Technology At Your Home
www.Wcodew.page.tl
Apply Now & Get Admission
30

Pm shandilya-s-wcodew-web-methodology

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (17)

Similaire à Pm shandilya-s-wcodew-web-methodology

Similaire à Pm shandilya-s-wcodew-web-methodology (20)

Dernier

Dernier (20)

Pm shandilya-s-wcodew-web-methodology