web designing (kit-401) unit 1 - codersacademy.in

Web Designing(KIT-401)

Unit 1

Prepared By

Abhishek KesharwaniAssistant Professor,UCER Naini,Allahabad

By Abhishek Kesharwani Assistant Professor ,UCER Prayagraj

Index• Introduction

• Basic principles involved in developing a web site

• Planning process

• Domains and Hosting,

• Responsive Web Designing ,

• Types of Websites (Static and Dynamic Websites)

• Web Standards and W3C recommendations


• Introduction to HTML: What is HTML

• HTML Documents

• Basic structure of an HTML document

• Creating an HTML document

• Mark up Tags

• Heading

• Paragraphs

• Line Breaks


What is Website

• A website is a collection of publicly accessible,interlinked Web pages that share a singledomain name.

• Websites can be created and maintained by anindividual, group, business or organization toserve a variety of purposes.

• Together, all publicly accessible websitesconstitute the World Wide Web.


• Website will convey the brand and product information of business, group, or organization.

• An impressive and excellent user experience website will increase the sales.

But, design your own website is not easy right?


7 simple Steps to design a Website

Step1. Figure out why to create a website page

Step2. Combine the latest web design trends

Step3. Design a website layout quickly

Step4. Discuss with other designers and developers

Step5. Develop your website design

Step6. Get a web hosting and publish your website

Step7. Test, research and improveBy Abhishek Kesharwani Assistant Professor

,UCER Prayagraj

Step1. Figure out why to create a website page

Before you start to design your website, you should firstlyfigure out your design purposes for defining your designstrategies.


Ask yourself the following questions

• Do you need a web page to introduce yourproducts or services?

• Do you need a website to sell more productsor services?

• Do you need an eye-catching website toattract users and get sign-ups?


Different answers may lead todifferent design strategies

• If you merely want to introduce products andservices online, you might want to pay particularattention to creating a more intuitive layout sothat everything can be seen easily and clearly.

• If you simply want to create a commercialwebsite to promote your existing products andservices online, then showcase your productswith descriptions.

• If you merely want to get more sign-ups online, auser-friendly signup form is really a must.


Step2. Combine the latest web design trends

Some key website design trends for 2020 that would be useful references:

• Oversize lettering. Oversized and bold typographyhas become more and more popular. So, select aunique font and be ambitious when you set the fontsize!

• Micro-interaction. Micro-interaction design meansadding animations and interactions to some buttons,icons or other tiny details on a web page as a way ofimproving UX.


• 3D design. 3D elements are widely used in thegaming and movie industries, creating moreengaging, more interesting and more attractivepages.

• Minimalist website design. A minimalist websiteuses hidden navigation systems, white space and thesimplest copy to describe its products and offer usersa more pleasant experience.

• Videos and animations. Using vivid videos andanimations is a sure-fire way to improve yourwebsite.

• Voice user interface. Voice user interface allowsusers to interact with your website through voicecommands. By Abhishek Kesharwani Assistant Professor

,UCER Prayagraj

Step3. Design a website layout quickly


1). Define the framework of your website. A website page often consists of header, footer, navigation, content, contact and other parts

2). Map out your main pages.

3). Select the web theme, color scheme, logo and brand.

4). Decide on motions. Designing the motions for the site is key. This is how you make sure your site is interactive and engaging. You need to decide which elements on the site will have interactions, exactly what interactions you want to use, and how to ensure that users can use them to get around the site easily.

5). Prototype and test your designs.

6). Adjust and improve. Once you have your prototype, test, test, and test again. Keep refining and adjusting the details until you are happy with the result.


Step5. Develop your website designAfter completing the UI/UX design process, yournext step is to develop your website design.

Step6. Get a web hosting and publish yourwebsite

After designing and coding your website, youneed to arrange web hosting, register a domainname, and publish it so that it can be foundeasily in searches and viewed.

Step7. Test, research and improve

Good designers never stop, even after their websites have gone live. In fact, it is always the case that problems appear after a site is live.


Web Development Process


1. Strategy:

· Decide Goals and objectives

· Team building

· Review your Strategy

· Create Final Project proposal


2. Design and Specification:

· Developing concept

· Content planning

· Rough design

· Final design

3. Produced desired Result:

· Build prototype

· Prototype testing

· Original design

· Satisfy the clients need


4. Testing and maintenance:

· Test the code· Maintain the web server.

5. Register with ISP:

· Register domain name· Get web space

6. Launch:

· Connect domain name with web server· Finally host the web accordingly.


Websites Hosting

• Web hosting is a service of providing onlinespace for storage of web pages.

• These web pages are made availablevia World Wide Web.

• The companies which offer website hostingare known as Web hosts.

• The servers on which web site is hostedremain switched on 24 x7.

• These servers are run by web hostingcompanies


• Each server has its own IP address.

• Since IP addresses are difficult to remembertherefore, webmaster points their domainname to the IP address of the server theirwebsite is stored on.

• It is not possible to host your website on yourlocal computer, to do so you would have toleave your computer on 24 hours a day.


Types of HostingS.No. Hosting Description

1. Shared Hosting• In shared hosting, the hosting company puts

thousand of website on the same physical server.

• Each customer has their own allocation of physical web space and a set of bandwidth limit.

• As all websites share same physical memory, MYSQL server and Apache server, one website on the server experiencing high traffic load will affect performance of all websites on the server.


S.No. Hosting Description

2. Virtual Private Server (VPS)• It is also known as Virtual Dedicated Server. • It is a server which is partitioned into

smaller servers.• In this customer is given their own partition,

which is installed with its own operatingsystem.

• Unlike shared hosting, VPS doesn’t sharememory or processor time rather itallocates certain amount of memory andCPU to use which means that any problemon a VPS partition on the same drive willnot affect other VPS customers.By Abhishek Kesharwani Assistant Professor

,UCER Prayagraj

S.No. Hosting Description

3. Dedicated ServerIn this kind of hosting, single dedicated server is setup for just one customer. It is commonly used by the businesses that need the power, control and security that a dedicated server offers.

4. Reseller HostingA reseller acts as a middle man and sells hosting space of someone else’s server.

5. Grid HostingInstead of utilizing one server, Grid Hosting spreads resources over a large number of servers. It is quite stable and flexible. The servers can be added or taken away from the grid without crashing the system.


Web - Domain Names

• A domain name is the part of your Internetaddress that comes after "www". Forexample, in xcellenttutorial.com the domainname is xcellenttutorial.com

• A domain name becomes your BusinessAddress so care should be taken to select adomain name. Your domain name should beeasy to remember and easy to type.


How to Get a Domain Name

• When you plan to put a site online, this is one of the important steps to buy a domain name.

• When you buy a domain name it is registeredand when domain names are registered theyare added to a large domain name register,and information about your site − includingyour Internet IP address is stored on a DNSserver and your contact information etc. isregistered with your registrar.


Domain Extension Types

• There are many types of domain extensionsyou can choose for your domain name. Thisdepends on your business nature.

• For example, if you are going to register adomain name for education purpose then youcan choose .edu extension.

• But there is no hard and fast rule to go for anyextension.

• Most commonly used is .com


Domain Extension Types• com − Stands for company/commercial, but it can be used

for any website.• .net − Stands for network and is usually used for a network

of sites.• .org − Stands for organization and is supposed to be for

non-profit bodies.• .us, .in − They are based on your country names so that you

can go for country specific domain extensions• .biz − A newer extension on the Internet and can be used to

indicate that this site is purely related to business.• .info − Stands for information. This domain name extension

can be very useful, and as a new comer it's doing well.• .tv − Stands for Television and are more appropriate for TV

channel sites.


What are Sub-Domains

• You can divide your domain into manysub domains based on your requirement.

• If you are doing multiple business usingthe same domain, then it would beuseful to have sub-domains for everybusiness.


Following are examples of some sub-domains

You must have seen google.com as a main domain butgoogle has created many subdomains based on theirbusiness. Some of them are as follows −

• adwords.google.com − This sub domain is being usedfor Google Adwords.

• groups.google.com − This sub domain is being usedfor Google Groups.

• images.google.com − This sub domain is being usedfor Google Images.


http://www.google.com/

http://adwords.google.com/

http://groups.google.com/

http://images.google.com/

Responsive Web Design

• Responsive web design makes your web pagelook good on all devices.

• Responsive web design uses only HTML and CSS.• Responsive web design is not a program or a

JavaScript.• Web pages can be viewed using many different

devices: desktops, tablets, and phones. Your webpage should look good, and be easy to use,regardless of the device.

• Web pages should not leave out information to fitsmaller devices, but rather adapt its content to fitany device.


• It is called responsive web design when youuse CSS and HTML to resize, hide, shrink,enlarge, or move the content to make it lookgood on any screen.


What is The Viewport

• The viewport is the user's visible area of a webpage.

• The viewport varies with the device, and willbe smaller on a mobile phone than on acomputer screen.

• Before tablets and mobile phones, web pageswere designed only for computer screens, andit was common for web pages to have a staticdesign and a fixed size.


Setting The Viewport

• HTML5 introduced a method to let webdesigners take control over the viewport,through the <meta> tag.

• You should include the following <meta>viewport element in all your web pages.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• A <meta> viewport element gives the browserinstructions on how to control the page'sdimensions and scaling.


• The width=device-width part sets the width ofthe page to follow the screen-width of thedevice (which will vary depending on thedevice).

• The initial-scale=1.0 part sets the initial zoomlevel when the page is first loaded by thebrowser.


Website

• Website is a collection of related web pagesthat may contain text, images, audio andvideo.

• The first page of a website is called homepage. Each website has specific internetaddress (URL) that you need to enter in yourbrowser to access a website.

• Website is hosted on one or more servers andcan be accessed by visiting its homepage usinga computer network


A website can be of two types

• Static Website

• Dynamic Website


Static website

• Static website is the basic type of website thatis easy to create. You don't need theknowledge of web programming and databasedesign to create a static website. Its webpages are coded in HTML.

• The codes are fixed for each page so theinformation contained in the page does notchange and it looks like a printed page.


Dynamic website

• Dynamic website is a collection of dynamicweb pages whose content changesdynamically.

• It accesses content from a database orContent Management System (CMS).

• Therefore, when you alter or update thecontent of the database, the content of thewebsite is also altered or updated.

• Dynamic website uses client-side scripting orserver-side scripting, or both to generatedynamic content.


• Client side scripting generates content at theclient computer on the basis of user input.

• The web browser downloads the web pagefrom the server and processes the code withinthe page to render information to the user.

• In server side scripting, the software runs onthe server and processing is completed in theserver then plain pages are sent to the user.


Difference between Static and Dynamic website


World Wide Web Consortium• The World Wide Web Consortium (W3C) is the main

international standards organization for the WorldWide Web.

• Founded in 1994 and currently led by Sir Tim Berners-Lee.

• The consortium is made up of member organizationswhich maintain full-time staff working together in thedevelopment of standards for the World Wide Web.

• As of 21 October 2019, the World Wide WebConsortium (W3C) has 443 members.

• The consortium also engages in education andoutreach, develops software and serves as an openforum for discussion about the Web.


• The organization tries to foster compatibilityand agreement among industry members inthe adoption of new standards defined by theW3C.

• Incompatible versions of HTML are offered bydifferent vendors, causing inconsistency inhow web pages are displayed.

• The consortium tries to get all those vendorsto implement a set of core principles andcomponents which are chosen by theconsortium.


Specification maturation

• Sometimes, when a specification becomes toolarge, it is split into independent moduleswhich can mature at their own pace.

• Subsequent editions of a module orspecification are known as levels and aredenoted by the first integer in the title (e.g.CSS3 = Level 3).

• Subsequent revisions on each level aredenoted by an integer following a decimalpoint (for example, CSS2.1 = Revision 1).


Working Draft (WD)

• After enough content has been gathered from'editor drafts' and discussion, it may bepublished as a working draft (WD) for reviewby the community.

• A WD document is the first form of a standardthat is publicly available.


Candidate recommendation (CR)

• A candidate recommendation is a version of astandard that is more mature than the WD.

• At this point, the group responsible for thestandard is satisfied that the standard meetsits goal.


Proposed recommendation (PR)

• A proposed recommendation is the version ofa standard that has passed the prior twolevels.

• The users of the standard provide input. Atthis stage, the document is submitted to theW3C Advisory Council for final approval.

• While this step is important, it rarely causesany significant changes to a standard as itpasses to the next phase.


W3C recommendation • This is the most mature stage of development.• At this point, the standard has undergone extensive

review and testing, under both theoretical andpractical conditions.

• The standard is now endorsed by the W3C, indicatingits readiness for deployment to the public, andencouraging more widespread support amongimplementers and authors.

• Recommendations can sometimes be implementedincorrectly, partially, or not at all, but many standardsdefine two or more levels of conformance thatdevelopers must follow if they wish to label theirproduct as W3C-compliant.


What is HTML?

• 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


HTML Basic Structure<!DOCTYPE html>

<html>

<head>This is header Part</head><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>


• The DOCTYPE declaration defines the document type. The <!DOCTYPE> declaration helps the browser to display a web page correctly.

• The text between <html> and </html> describes the web page

• The text between <body> and </body> is the visible page content

• The text between <h1> and </h1> is displayed as a heading

• The text between <p> and </p> is displayed as a paragraph


HTML Versions


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.


HTML Attributes

• HTML elements can have attributes

• Attributes provide additional informationabout an element

• Attributes are always specified in the start tag

• Attributes come in name/value pairs like: name="value"


Attribute Example

<a href="http://www.w3schools.com">

This is a link</a>


HTML Headings

• Headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading. <h6> defines the least important heading.

<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>


HTML Paragraphs

HTML documents are divided into paragraphs.

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p><p>This is another paragraph</p>


HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
