Md. Ali Hosssain.Web Designer.Jr. Instructor, Graphic Arts Innstitute.Email:Students.gai@gmail.comPhone:01731402303

04/12/23

The World Wide Web (abbreviated as WWW or W3,[3] commonly known as the web), is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks.

•Born in London in 1955•Born in London in 1955

•The web was The web was developed between developed between March 1989 and March 1989 and December 1990. December 1990. • Mr. Mr. Tim Berners-Lee

•The web was The web was developed between developed between March 1989 and March 1989 and December 1990. December 1990. • Mr. Mr. Tim Berners-Lee

• Published language HyperText Published language HyperText Markup Language (HTML);Markup Language (HTML);

• The Hypertext Transfer The Hypertext Transfer Protocol(HTTP)Protocol(HTTP)

• Published language HyperText Published language HyperText Markup Language (HTML);Markup Language (HTML);

• The Hypertext Transfer The Hypertext Transfer Protocol(HTTP)Protocol(HTTP)

04/12/23

1. Domain NameThe domain name is the address name you will have on the Internet such as http://www.yourdomainname.com/ or yourdomainname.com.

2. Website HostingHosting is the electronic "space" you rent so that your website and email are accessible over the Internet.

3.Website DevelopmentA website developer is the person that builds your website property at your hosting provider. software developer who is specifically engaged in the development of World Wide Web applications, that are run over the Internet from a web server to a client, a web browser.

4. WebmasterIn terms of a completed small business site, the webmaster is the technical person responsible for administration and maintenance of the website.

Basic Website Requirements

04/12/23

StaticStatic websites can only really be updated by someone with a knowledge of website development.

Advantages of Static websites• Quick to develop • Cheap to develop • Cheap to host

DynamicDynamic applications on websites offer interactivity for you and your customers. Some example are content management system, e-commerce system, bulletin / discussion boards, intranet or extranet facilities, ability for clients or users to upload documents, ability for administrators or users to create content or add information to a site.

Advantages of dynamic websites•Much more functional website•Much easier to update•New content brings people back to the site and helps in the search engines

Web Application

04/12/23

04/12/23

Defining A Web SiteThe very first step in designing a Web site is to define it. And to properly define a site there are three questions that must be answered.What is the purpose of the site?Who will be visiting the site?How will the site serve the client?The answers to these questions will guide you as you construct the site Identify the Purpose of the SiteA Web site may have several purposes. In that case it is necessary to determine which is the primary purpose, which is secondary, and so on. A site that is intended to be strictly informative, such as a news site, is likely to look much different that a site that is designed to sell a product. On the other hand, a site for a college may have some subtle similarities to a site that sells books. The college site probably will be intended to present the school is a very positive and manner so that students will want to enroll. The retail book site will want to convince visitors that it is the best place to purchase reading material.  

04/12/23

Identify Who Will Visit the SiteDetermining who the visitors are likely to be is crucial in deciding not only the general appearance of the site, but also the technology that might be used to build the site.If the project is likely to have visitors who log in from home, it is necessary to design the pages with the understanding that some users may still have slow modem connections.Even with so-called "high speed access," Internet connect speeds vary wildly. Users with DSL will almost certainly notice slower page loading compared to those users who have cable or fiber optic access.While quick download times are preferred, some types of Web sites require technology that is not conducive to fast page loads. Such a site may be for a rock band or a high-tech company. Both of which might use Flash! or similar techniques.Serving the Needs of the ClientThe term "client" in this instance refers to anybody for whom a site is built, not just a paying customer. In the case of a Web site built for a family reunion, the client is the family. Will the site properly serve the need of the family by providing clear directions to the location of the reunion? Can the family photos be properly displayed?A client could be a history professor. In such an instance the message of the professor must be clearly understood. Will he or she want to post assignments and readings? Does the site involve explaining research projects? And who will update the site later?

Technologies include.....

Software Knowledge:

• Dreamweaver• Flash• PhotoShop• Illustrator• FireWorks• Contribute• Acrobat

• HTML• CSS• JavaScript• PHP• ASP• C Sharp• MySql

Platform CMS • Joomla• WoardPress• Durpal• Majento• Cushy CMS• Radiant CMS

04/12/23

Some of the goals that can be achieved by launching a website include the following:

1. Far Cheaper and Much More Flexible Than Print Advertising

2. Market Expansion

3. Diversify Revenue Streams

4. 24 7 365

5. Offer Convenience

6. Add Value and Satisfaction

7. Standardize Sales Performance

8. Improve credibility

9. Promote your Brick n Mortar Presence

10. Growth Opportunity

11. Two-Way Communicative Marketing

12. Cheap Market Research

12 Benefits Of Having A Website

04/12/23

Web Browser

04/12/23

What is HTML?HTML is the "mother tongue" of web browser.

• HTML is a language for describing web pages.• HTML stands for Hyper Text Markup Language• HTML is a markup language• A markup language is a set of markup tags• The tags describe document content • HTML documents contain HTML tags and plain text• HTML documents are also called web pages

04/12/23

VersionYear

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

Elements and tags?HTML markup tags are usually called HTML tags "HTML tags" and "HTML elements" are often used to describe the same thing.

• HTML tags are keywords (tag names) surrounded by angle brackets like <html>

• HTML tags normally come in pairs like <b> and </b>• The first tag in a pair is the start tag, the second tag is

the end tag• The end tag is written like the start tag, with a forward

slash before the tag name • Start and end tags are also called opening tags and

closing tags

<tagname>content</tagname>

HTML Version /Elements and Tag

04/12/23

The <!DOCTYPE> Declaration: The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.

Common DeclarationsHTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5: <!DOCTYPE html>

04/12/23

04/12/23

Create your first website<HTML>

<HEAD><TITLE> My Web Site </TITLE>

</HEAD>

<BODY>

<H1> Hello World </H1>

<p>Hurrah! This is my website. My name is kamrul Hasan </p>

</BODY>

</HTML>

Save Your HTML: Select Save as.. in Notepad's file menu. You save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

04/12/23

BODY Element<BODY attributename="attributevalue">Deprecated attributes (but still used)

BACKGROUND=“Sunset.jpg” (can be tiled)BGCOLOR=colorTEXT=colorLINK=color (unvisited links)VLINK=color (visited links)ALINK=color (when selected)

04/12/23

Headings

<H1 ...> text </H1> -- largest of the six<H2 ...> text </H2><H3 ...> text </H3><H4 ...> text </H4><H5 ...> text </H5><H6 ...> text </H6> -- smallest of the six

ALIGN="position" --left (default), center or right

04/12/23

Headings<HTML><HEAD> <TITLE>Document Headings</TITLE></HEAD><BODY>Samples of the six heading types:<H1>Level-1 (H1)</H1><H2 ALIGN="center">Level-2 (H2)</H2><H3><U>Level-3 (H3)</U></H3><H4 ALIGN="right">Level-4 (H4)</H4><H5>Level-5 (H5)</H5><H6>Level-6 (H6)</H6></BODY></HTML>

04/12/23

<P> Paragraph<P> defines a paragraphAdd ALIGN="position" (left, center, right)Multiple <P>'s do not create blank linesUse <BR> for blank lineFully-specified text uses <P> and </P>But </P> is optional

04/12/23

04/12/23