Go Back   ManagementParadise.com | Management & Business Education Learning Platform PUBLISH / UPLOAD PROJECT OR DOWNLOAD REFERENCE PROJECT > Basics of Computers (P.C)

DESIGNING YOUR WEB PAGES

Discuss DESIGNING YOUR WEB PAGES within the Basics of Computers (P.C) forums, part of the PUBLISH / UPLOAD PROJECT OR DOWNLOAD REFERENCE PROJECT category; ...

Reply

 

Thread Tools Display Modes
DESIGNING YOUR WEB PAGES
Old
 (1 (permalink))
Shreya Das
shreyadas is a jewel in the roughshreyadas is a jewel in the roughshreyadas is a jewel in the rough
 
shreyadas
Student of Bachelor of Engineering at RAJENDRA INSTITUTE OF MEDICAL SCIENCES
Dhanbad, Jharkhand
Management Paradise Member
 
Status: Offline
Posts: 897
Join Date: May 2011
Location: Dhanbad, Jharkhand
DESIGNING YOUR WEB PAGES - January 31st, 2012

Just how should you design your web pages? Well, you should not design your pages only for appearance. You also need to design your pages for content. For example, you could add color to certain portions of text or you can highlight certain words with color to make them stand out. In your browser, it may look great. However, many people still use browsers that do not support coloring portions of text. So while it looks great in your browser, it will not give the same looks in other browsers, and text that you thought were highlighted by color will not be highlighted in these other browsers. Color is used to change the appearance of text. If a browser can't perform the appearance change, it has no way to determine an alternative. As a result the color attribute is simply ignored.
Also, you may be able to fit a heading neatly on one line in your browser while in another browser, the font size could be a little bigger and the heading will not fit on one line. Or the reverse could be true, a heading may not fit on one line in your browser, but in another browser with a little smaller font size, it will fit into one line. Thus the appearance of the heading in your browser could be different in another browser. Also keep in mind that some browsers and servers do not support graphics. A user also has the option of turning off graphics to speed up the loading of web pages. Of course we still want our web pages to be pleasing to the eye but we need to keep in mind that how something looks in one browser could look entirely different in another browser. One person told me how surprised she was to see her web pages look so differently in another browser. She now designs her pages with this in mind.
Consider this example: Suppose you want to have something printed by the browser in italics to set it apart from the rest of the text. Using the italics tag, you could tell the browser to "print these words in italics". But what if someone's browser does not support the italics tag? The browser will simply not be able to perform the requested "appearance" change and the tag will be ignored. The italics tag was originally a Netscape extension tag that was not recognized by a number of other browsers. Instead, it would be better to tell the browser to "emphasize" the text through the "emphasis tag". In most browsers, this would be italics but it could also be rendered as something else. In any event, the text will be emphasized in some manner. The same is true for bolding text. If you tell the browser to bold a portion of text to make it stand out from the rest of the text, you are assuming the browser will recognize the "boldface" tag. The boldface tag was also originally a Netscape extension tag and so not recognized by a number of browsers. Instead, it would be better to tell the browser to "strongly emphasize" the text. In most browsers this will be boldface, but it could also be something else. Now with the passing of time, browsers today do support the italics and bolding tags but there are still a number of other tags supported by some browsers and not by others. That is, there are still a number of tags out there that are browser specific. That is why you sometimes see a statement such as "This web page is best viewed in Internet Explorer."
The "emphasis" and "strong emphasis" tags are "content based" markup tags and the above examples illustrate why you should use "content based" markup tags to mark up your text. Content based markup allows for browser independence. Knowing the meaning of a piece of text through a content based tag allows a browser to pick the best way possible to display the text on the platform it is running. Tags that are based on content and not on appearance are called LOGICAL TAGS. You are encouraged to use logical tags because the browser can then pick the best way to display the text on the screen.
If all this sounds too confusing, don't quit on me. Just follow through on the following examples involving logical tags. It should all become clear. Then I would suggest you come back and read again this introduction on "Designing Your Web Pages".
________________________________________
| top | | bottom |
________________________________________
HEADER TAGS
Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in HTML documents to display headings. HEADER tags not only make your headings larger (or smaller), they also bold the headings at the same time.
There are only six HEADER tags and they range from H1 to H6.
H1 produces the largest size heading and is called the "level 1 heading".
H6 produces the smallest size heading and is called the "level 6 heading".
To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML document (this will also allow you to experiment with the document):


HEADING LEVELS


THIS IS H1.

THIS IS NORMAL SIZE.

THIS IS H2.

THIS IS NORMAL SIZE.

THIS IS H3.

THIS IS NORMAL SIZE.

THIS IS H4.

THIS IS NORMAL SIZE.
THIS IS H5.
THIS IS NORMAL SIZE.
THIS IS H6.
THIS IS NORMAL SIZE.



Note the following points:
1.

gives the largest size heading while

gives the smallest size heading.
2. In most browsers, the HEADER tags print the headings in boldface. A Level 1 heading (H1), because it is the largest heading, is considered to be the most prominent or most important heading. The Level 2 heading (H2) is the second most important heading. That is, it is more prominent than a Level 3 heading (H3) but less prominent than a Level 1 heading.
3. Good HTML form dictates that HEADER tags should be used in hierarchical order. Don't jump all over the place with your heading levels. For example, if you use a Level 2 heading for a title or heading, then the next size to use for a sub-title would be a level 3 heading.
Final remarks on the HEADER tags:
• After all that has been said here about the header tags, keep in mind that they are logical tags. This means that you cannot assume, for example, that H1 means "very large bold text" in every browser. It will in most browsers - but you can't assume true in all browsers. It can be anything the browser chooses it to be - which could be defined by the viewer.
• Some search engines give words appearing in headers more importance in their index. The headers are often used by these search engines to build an "outline" of the document which appears in the search results.
CENTERING TEXT
You can see from my lessons that I make good use of centering headings and titles. The center command is: ALIGN="CENTER" (no spaces around the equal sign) and must be used in conjunction with a HEADER tag or the PARAGRAPH tag as in:

a heading goes here


or

a paragraph or block of text goes here


Here are some points to remember concerning these two centering commands.
1. In the first example, a "heading" is centered (as indicated by the H2), and remember that because we are using a Header tag, a blank line will automatically be inserted before and after the heading. For this section, my heading "CENTERING TEXT" was centered using the H3 Header tag.
2. The second example is used to center whole portions of text - which could be several lines of text.
In other words, we are centering a "paragraph"
or "block of text" with each line centered on the screen
just as these lines are centered (hopefully).
To end centering a block of text,
we use the

tag which is the closing paragraph tag.
This

tag is a new tag for us
and one that you may not end up using all that often.
But it does have its uses and this is one of them.
Choose DOCUMENT SOURCE from the VIEW menu
if you want to see how I centered these lines.
3. In ALIGN="CENTER", the ALIGN part is called an attribute. In the first example, ALIGN is the attribute for the Header tag. In the second example, ALIGN is the attribute for the Paragraph tag. An attribute provides extra information about the tag and the text it encloses. An attribute can have a value. In our two examples, the ALIGN attribute has the value "CENTER". In the first example, the browser is told to place (align) the heading in the "center" of the line. If a viewer should make the browser screen smaller, the heading will still remain centered in whatever the new screen size is. In the next example, a heading will be centered. When you do the example, be sure to try also ALIGN="RIGHT" and ALIGN="LEFT" (which is the default value if the ALIGN attribute is not used).
4. The value must be enclosed in quotation marks if it contains anything more than letters, numbers, hyphens and/or periods. Otherwise placing the quotes around the value is optional. Since our two examples have only letters in the value ("CENTER"), the quotes may be omitted. If you are ever in doubt about the quotes, then just put them in. Of course the attribute and value do not have to be written in upper case (capital) letters either. They may be written in lower case. The maximum length of an attribute and its value is 1024 characters including the quotation marks if used.
5. ALIGN="CENTER" is also called a "command within a command". The first command (ALIGN), tells the browser to align something and the second command (CENTER) tells the browser to align it in the center.
6. Sometimes you will see documents use only the CENTER command (no ALIGN="CENTER") to center text as in:

.
.
all lines or blocks of text will be centered between these two tags
.
.

was one of the first Netscape extension tags and, as was the case with many of Netscape extension tags, not supported by a number of browsers at the time. ALIGN="CENTER" is an official part of HTML 3.2 and accepted by all browsers. You are therefore encouraged to use ALIGN="CENTER" for centering headings and paragraphs of text. If a browser does not support the CENTER tag, the headings and text will simply be left justified. We will be using the ALIGN="CENTER" command in the next example.
EMPHASIZING TEXT
There are two ways to emphasize text that I want to introduce here. These were alluded to at the beginning of this lesson under "Designing Your Web Pages". One is called ITALICS and the other is called BOLDFACE. Let's study both of them with the following example, which will also include the centering of the heading.
Please SWITCH to NOTEPAD and type in the following HTML document:



OUTDOOR LIVING - ONTARIO


OUTDOOR LIVING IN ONTARIO


POINTS OF INTEREST



Northern Ontario:

Five Mile Lake Provincial Park

1.5 square miles. Camping, fishing (walleye, northern pike, brook trout), canoeing, self-guided nature trails.

Recommended




Now load the document into your browser and your web page should look like the following:

= EMPHASIZE TEXT
is used to emphasize text. It is a logical tag and so describes the meaning of the text to be displayed rather than how the text is to be displayed. In most browsers, the meaning is italics. However, if the browser doesn't support italics or the viewer changes the meaning, the browser will pick the best alternative way to display the text on the screen.
= STRONGLY EMPHASIZE TEXT
is also a logical tag. It is used to strongly emphasize text. is distinct from . In most browsers, STRONG is identical to boldface. If a browser does not recognize boldface or if the viewer changes the meaning of STRONG, then the browser will pick the best alternative from the platform it is running on.
Using for Boldface or for Italics (Original Netscape Extension Tags)
is accepted by all browsers as a way of strongly emphasizing text which in most cases is boldface. Instead of the and tags for strongly emphasizing text, you will sometimes see and for bolding text. While is a "Logical Style Command", is not. is a "Physical Style Command". A physical style command cannot be rendered differently. Therefore if a browser does not accept the tag, then your text will simply not be bolded as the browser has no alternative way to display them on the screen.
The same reasoning is also be applied for using the tag to print in italics instead of the tag. Now if for some reason you want to ensure only italics or boldface and nothing else, then use the italic font or the boldface font .

Physical Tags
There are 10 physical tags each requiring a closing tag:
Italics: I am in italics
Bold: I am in bold
Underline: I am underlined
Strikethrough: I am struck!
Superscript: My superscript
Subscript: My subscript
Typewriter: I am in typewriter form
Bigger font: I am bigger
Smaller font: I am smaller
Strikethrough alternative: I am also struck!
Electronic commerce
Electronic commerce, commonly known as e-commerce, ecommerce or e-comm, refers to the buying and selling of products or services over electronic systems such as the Internet and other computer networks. However, the term may refer to more than just buying and selling products online. It also includes the entire online process of developing, marketing, selling, delivering, servicing and paying for products and services. The amount of trade conducted electronically has grown extraordinarily with widespread Internet usage. The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management, Internet marketing, online transaction processing, electronic data interchange (EDI), inventory management systems, and automated data collection systems. Modern electronic commerce typically uses the World Wide Web at least at one point in the transaction's life-cycle, although it may encompass a wider range of technologies such as e-mail, mobile devices and telephones as well.
A large percentage of electronic commerce is conducted entirely in electronic form for virtual items such as access to premium content on a website, but mostly electronic commerce involves the transportation of physical items in some way. Online retailers are sometimes known as e-tailers and online retail is sometimes known as e-tail. Almost all big retailers are now electronically present on the World Wide Web.
Electronic commerce that takes place between businesses is referred to as business-to-business or B2B. B2B can be open to all interested parties (e.g. commodity exchange) or limited to specific, pre-qualified participants (private electronic market). Electronic commerce that takes place between businesses and consumers, on the other hand, is referred to as business-to-consumer or B2C. This is the type of electronic commerce conducted by companies such as Amazon.com. Online shopping is a form of electronic commerce where the buyer is directly online to the seller's computer usually via the internet. There is often no intermediary service involved, and the sale or purchase transaction is completed electronically and interactively in real-time. However in some cases, an intermediary may be present in a sale or purchase transaction, or handling recurring or one-time purchase transactions for online games.
Electronic commerce is generally considered to be the sales aspect of e-business. It also consists of the exchange of data to facilitate the financing and payment aspects of business transactions
6 Things Needed to Start an E-Commerce Website
BY KOVICH ON FEBRUARY 8, 2010 UNDER RUNNING ONLINE BUSINESS
Ready to launch an e-commerce website and start earning money? Here are the six things you need to get up and running:
1. Hosting Service – A hosting server gives your website a place to reside on the Internet; without a hosting service, visitors cannot access your website. Most hosting services are available for a nominal monthly fee. Make sure the hosting service is compatible with your shopping cart software. (DreamHost offers great service and you can use the promotional code Kovich for $50 off!)
2. Website – Once you have place for your website online, next is the website itself. There are a myriad of available options when it comes to creating your website. If you already have an existing website, you can integrate e-commerce capabilities. If you are building the website from scratch, there are a handful of software programs that can help you build a website with no HTML skills or you can have your site designed by a website design professional or firm (typically the most expensive alternative).
3. Shopping Cart Software – In order for your customers to actually choose which products or services they want to purchase from your site, you need shopping cart software. Look for software that offers merchant tools, supports a myriad of payment options, shipping and taxes configurations, real-time statistics and reporting, and security features.
4. A Merchant Account – Available through conventional banks and financial institutions, merchant accounts allow a business to accept credit cards as payment. A merchant account is essentially a contract between the merchant and the bank and outlines how transactions will transpire.
5. Payment Services – In addition to a merchant account, you will also need payment services (also known as a payment gateway). This allows you to actually process payments and determines whether or not a customer’s credit card is accepted or declined.
6. Marketing – Your website is worthless if you don’t have any people visiting it. Be sure to market your website by engaging in the various search engine optimization (SEO) techniques that can help jumpstart your website’s rankings in the major search engines and attract more site visitors and even hand out business cards if needed. I’ll post about search engine optimization for e-commerce sites soon eCommerce, eBusiness, Marketing & Design Overview:
What are the Benefits of eCommerce & eBusiness?
The processes involved with conducting business on the Internet and opening an eCommerce shop to sell from have several benefits to both merchants and the customers who buy from them. The biggest benefits of conducting business Online include a cheaper upfront cost to the merchant, it's easier to set up and open the store and it's faster to get an Online business up, running and making sales.
Helps Create New Relationship Opportunities:
Open for Business 24x7:
Increases Brand or Product Awareness:
Helps Establish Customer Loyalty:
Potential to Increase Overall Business Sales:
Potential to Increase Company Profits:
Potential to Decrease Some Costs:
Expands Geographical or Customer Reach:
Allows for Smaller Market or Niche Targeting:
Allows for Easier Delivery of Information:
What is eCommerce Marketing?
eCommerce Marketing Defined:
eCommerce marketing can be defined in many different ways and can include both Online or Offline campaign strategies. Most often, it's considered to be the marketing of goods and services over the Internet or any other electronic network (like a mobile phone or pda). eCommerce marketing is commonly referred to as ecommerce optimization, online marketing, search engine marketing, sem, search engine optimization, seo, catalog optimization, catalog seo, product seo, merchant marketing and many more variations of those terms.
Beginning & Future of eCommerce Marketing:
Marketing Strategies & Techniques:
What are the Benefits of eCommerce Marketing?
The processes involved with marketing products on the Internet and increasing company or brand recognition among consumer markets have several benefits to both Online shoppers and merchant store owners. The biggest benefits of eCommerce marketing include less costs than print advertising, helps build customer relationships, brand credibility and it costs less to get an eCommerce marketing campaign running and operational.
Tax Breaks for Conducting Business Online:
Cheaper than Print Advertising:
Interactive Ads or Marketing Campaigns:
Flexible Ad or Marketing Campaigns:
Builds Lasting Customer Relationships:
Helps Build Brand Credibility:
Gather Feedback from Customers:
Conduct Cheap Market Research:
Lower Startup Costs Increase Efficiency:
Lower Startup Costs Increase Profitability:
Increases Growth or Opportunity Potential:
Global Market Reach:
With Potential to Market Any Product:
Flexible Schedule or More Personal Time:
Ability for Multiple Revenue Streams:
Streamlines Sales Process & Ad Copy:
What is eCommerce Web Design?
Beginning & Future of eCommerce Web Design:
eCommerce Design Methods & Features:
What are the Benefits of eCommerce Web Design?
Allows for Faster, Easier, Efficient Discovery:
Potential to Improve Accessibility:
Potential to Improve Usability:
Easier to Maintain Over Time:
Advertisements

Attached Files
File Type: docx DESIGNING YOUR WEB PAGES.docx (28.3 KB, 3 views)


Help Others To Help Yourself !


How Can You Help? > Upload Notes, Projects, Solve Queries, Submit Articles, Scribble Blog and many more innovative Ideas in Your Mind Put it here
Friends: (0)
Reply With Quote
Reply

Bookmarks

Tags
designing, pages, web
Related to DESIGNING YOUR WEB PAGES
 

Similar Threads

Thread Thread Starter Forum Replies Last Post
FEATURES OF DNA YELLOW PAGES (FSD) Sunanda K. Chavan Marketing Management ( RM , IM ) 1 November 28th, 2017 05:49 PM
Concept of yellow pages (BVV) Sunanda K. Chavan Marketing Management ( RM , IM ) 1 November 21st, 2017 09:30 PM
History of yellow pages Sunanda K. Chavan Entrepreneurship / Intrapreneurship 1 April 1st, 2016 02:17 PM
SUBMITTING YOUR WEB PAGES Sunanda K. Chavan Basics of Computers 1 December 2nd, 2015 10:33 AM
200 Pages on Banking Vijith Pujari Banking and Insurance Final 100 marks projects 37 August 5th, 2010 02:54 PM
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are Off


ManagementParadise.com is not responsible for the views and opinion of the posters. The posters and only posters shall be liable for any copyright infringement.



Search Engine Optimization by vBSEO ©2011, Crawlability, Inc.