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 WcodewOnline Tutorial Of Web Technology, India. The book has been written accordinghome study basis. The book has been number One among teachers and studentsall over India for its clear presentation, effective, approach of solving all problemsand 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

http://wcodew.page.tl

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 ourcorporate/institutional sales department: [email protected] orwww.wcodew.page.tl

While every precaution has been taken in the preparation of this book, thepublisher and authors assume no responsibility for errors or omissions, or fordamages resulting from the use of the information contained herein.

4

http://prashantms.page.tl


About the Author

The author of this book PM Shandilya is a webtechnologist.His short stories have appeared in numerous publications, includingFounder Online Tutorial Of Wcodew. He also is a regular contributor to WcodewTutorial Pub.

He has developed hundred websites & in this time he teach onlineweb technology on Wcodew Tutorial at your home. His qualification is BCAInformation Technology. And he has learnt web developing to Germen. You cancontact him on www.prashantms.page.tl or email to [email protected] sothank.

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 ofrelated web pages typically served from a single web domain. A website is hostedon at least one web server, accessible via a network such as the Internet or aprivate local area network through an Internet address known as a uniformresource locator (URL). All publicly accessible websites collectively constitute theWorld Wide Web.

Web pages, which are the building blocks of websites, aredocuments, typically written in plain text interspersed with formattinginstructions of Hypertext Markup Language (HTML, XHTML). They mayincorporate elements from other websites with suitable markup anchors. Webpagesare accessed and transported with the Hypertext Transfer Protocol (HTTP),which may optionally employ encryption (HTTP Secure, HTTPS) to providesecurity 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 markupinstructions onto a display terminal.

The pages of a website can usually be accessed from a simpleUniform Resource Locator (URL) called the web address. The URLs of the pagesorganize them into a hierarchy, although hyperlinking between them conveys thereader's perceived site structure and guides the reader's navigation of the sitewhich generally includes a home page with most of the links to the site's webcontent, and a supplementary about, contact and link page.

Some websites require a subscription to access some or all oftheir content. Examples of subscription websites include many business sites, partsof news websites, academic journal websites, gaming websites, file-sharingwebsites, message boards, web-based email, social networking websites, websitesproviding real-time stock market data, and websites providing various other

6

providing real-time stock market data, and websites providing various otherservices (e.g., websites offering storing and/or sharing of images, files and soforth).

History Of www:

The World Wide Web (WWW) was created in 1990 by theBritish CERN physicist Tim Berners-Lee.[3] On 30 April 1993, CERNannounced 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 TransferProtocol and the gopher protocol were used to retrieve individual files from aserver. These protocols offer a simple directory structure which the user navigatesand chooses files to download. Documents were most often presented as plain textfiles without formatting, or were encoded in word processor formats.

WebMatrix

WebMatrix is a free web development tool that provides the easiest way to buildwebsites.

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 engineoptimization, and web publishing.

To install WebMatrix, follow this link:http://www.microsoft.com/web/gallery/install.aspx?appid=WebMatrix

7

http://www.microsoft.com/web/gallery/install.aspx?appid=WebMatrix

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 anPHP 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 thesite demoweb (or anything you like)and click Next:WebMatrix creates a new website 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 thefollowing 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 webserver 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 HTMLHTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Ttex Markup Language. A markup language is a set ofmarkup tags. HTML documents are described by HTML tags ,Each HTML tagdescribes 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 onyour 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 asimage 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 seconditem</li></ul>

For ordered list- <ul><ol>the first item</ol><ol>the seconditem</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 canalso contain select lists, textarea, fieldset, legend, and label elements. The tag isused 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 usedto select user information.An input element can vary in many ways, depending onthe 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 describedbelow.

Text Fields

<input type="text" name="box module name" value=" value of inputbox">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 fieldis 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 allregulation 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 wordswe can say that it perform how tho show style of html. CSS stands for CascadingStyle Sheets.

Background Color

The background-color property specifies the background color of an element. Thebackground 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 asfollowing 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 RunningASP.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 FROMCustomers");

$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 FROMCustomers");

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 codeinside 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 willonly spend a few seconds scanning it before he/she decide whether to leave or tostay.

Be sure to make your point in the very first sentence of the page! After that, try tokeep 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. Keepthe chapters as short as possible. Use a lot of space! Pages overloaded with textwill kill your audience. If you have a lot to say, break your information intosmaller chunks and place it on different pages!

Navigation

Create a consistent navigation structure that is used by all the pages in your Website.

Don't use hyperlinks inside each paragraph, to send visitors to every page of yourWeb. 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 themenu.

Download Speed

Sometimes developers are not aware of the fact that some pages take a long time todownload. Most visitors will leave a Web page that takes more than 7 seconds todownload. Test your web pages over a low-speed modem connection. If your pagestake 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 willgive you some valuable hints about what you could have done better. Provide asimple way to reach you, and you will get a lot of input from people with differentskills 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 problemsreading 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 monitordevelopment.

What Browsers Do They Use?

Don't forget to test your Web site on different browsers. The most popularbrowsers today are Internet Explorer, Firefox and Google Chrome. One wise thing

21

http://www.w3schools.com/browsers/browsers_display.asp

to do when designing Web pages is to use correct HTML. Correct coding will helpthe browsers to display your pages correctly. Take a look at our browser statisticsto see the trends in browser development.

What Plug-Ins Do They Have?

Sound, video clips, or other multimedia content might require the use of separateprograms (plug-ins). Be sure that your visitors have access to the software neededto view them.

What About Disabilities?

Some people have viewing or hearing disabilities. They might try to read yourpages with Braille or speech-based browsers. Always add text alternatives forimages and graphic elements. Using the newest web standards improves thequality of your web site.

Use HTML 5

Writing your pages to the latest HTML5 standard, brings you as close as possibleto perfection. All HTML pages should contain a <!DOCTYPE> element todefine which HTML version it conforms to. The DOCTYPE gives importantinformation to your browser so it can render your page faster and moreconsistently. The DOCTYPE declaration also allows validating software to checkthe syntax of your page:

Use Separate CSS Files

Using Cascading Style Sheets (CSS) is the preferred way of separating contentfrom style, in quality web pages. Using CSS improves the quality of web sitesand increases the readability for many different browsers. Styles (sizes, fonts,colors, and more) should be set outside web pages, in separate CSS files. Using aseparate CSS file will also greatly reduce your web site development costs. With aseparate CSS file you can change the style of HTML elements by rewriting oneline of code. If you have used CSS inside your pages, you will have to edit all thesepages.

Web Validation

A validator is a software program that can check your web pages against the webstandards. When using a validator to check HTML and CSS documents, thevalidator returns a list of errors found, according to your chosen standard. Makesure you make it a habit to validate all your web pages before publishing.

22

http://www.w3schools.com/browsers/browsers_stats.asp

The Title Element

The <title> element is one of the most important HTML elements. Its mainfunction is to describe the content of a web page. Even if the title is not a visiblepart of your web page, it is important to the quality of your web site because:

It will be visible in search engine listsIt is visible in the browser's title barIt will be displayed in the user's bookmark

The title should be as short and descriptive as possibMake sure the title matchesthe content the user is looking for. Then it is more likely the user will click on thelink 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 tounderstand HTML, CSS, JavaScript, XML, and SQL tutorials with lots ofworking 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 bydefault, some web developers will use the <h2> element instead of the <h1>element for main headings. This will confuse most search engines and othersoftware 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 ADomain Name.

Domain names must be registered. When domain names are registered, they areadded to a large domain name register. In addition, information about the website, including the IP address, is stored on a DNS server.

DNS stands for Domain Name System. A DNS server is responsible forinforming all other computers on the Internet about the domain name and the website address.

A domain is a unique name like www.wcodew.page.tl, According to PMShandilya we can divide domains as two kinds;

1. Depending Domains : Whose depends on any other websites likejobpost.heck.in, csetube.co.nr etc.

2. Non - Depending Domains : Whose non depends it means directly buying likeFacebook.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 theyoffer a variety of domain name extensions that can be registered at the same time.

Choosing a Domain NameChoosing a domain name is a major step for any individual or organization.

New domain name extensions and creative thinking still offer thousands ofexcellent 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 iseasier to type, read, and remember.

• Meaningful - A short domain is nothing without meaning, 34i4nh.com is noteasy to enter or to remember. Select a domain that relates to your site in a waythat people will understand.

• Clear - Clarity is important when selecting a domain name. Avoid a name thatis difficult to spell or pronounce.

Exposure - Names that are short and easy to remember are an asset. In additionto visitors, also consider search engines. Search engines index your site and rank itfor relevance against terms people search for. In order to maximize your sitesexposure, 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 DreamweaverWith DreamWeaver you can easily create new pages, open an existing project orjust make a connection to an already published web site. The first step is to defineyour site in Dreamweaver. Select "Site" and click on the "New Site" option:

When the Site Definition window appears, select the Advanced -> Local Infocategory:

26

In the Site name field enter the name of your site. Specify the path to the rootfolder of your site stored on your local computer.

Check the Refresh local file list automatically and Enable cache options. In theHTTP Address field enter the URL that your remote Web site will use. This wayDreamweaver will be able verify the links within your site.

The next step is very important, so please pay close attention to it. Click on theRemote 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 typeyour domain name instead.

In the Host directory field you should type either public_html or www. This is thedirectory where you should store your web site.

Enter your FTP login details. You can test your connection by clicking on theTest button. It is very important to check the Use passive FTP option. In theTesting Server category select the remote server model you wish to use. Forexample, if your site is hosted on a Linux-based server and you are planning tocreate and execute PHP scripts using a MySQL database, you should choose PHPMySQL server model.

When you are finished setting your preferences, click OK and that will completeyour 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 thebutton to connect to the remote server. From the right list menu you can choose tobrowse your file either on your local computer or on the remote server. Select a fileor directory which you wish to upload and click the up arrow button. If you wantto 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 thisbook or more books of Wcodew Tutorial Publication go to www.Wcodew.page.tl


Learn Online Web Technology At Your Home

www.Wcodew.page.tlApply Now & Get Admission

30

http://wcodw.page.tl
