2>"HOW WEB PAGE WORK"?

GET the 65$ only signin in Only using this link:

https://www.bluehost.com/track/bhaiyaji/

Fundamentals of the Web

In this lesson, you’ll learn the fundamentals the Internet and the World Wide Web work and how designing for web differs from other methods of communication.

Starting up

 You will work with several files from the web02lessons folder in this lesson. Make sure you have loaded the web lessons folder onto your hard-drive from www.digitalclassroombooks.com/webdesign. See “Loading lesson files” in the Starting Up section of this book.

How web pages work 

You will benefit by understanding the structure and function of the systems that offer the work you design on the Internet. This lesson focuses on understanding the structure and function of the Internet and the World Wide Web. Understanding these systems will help you deliver your web design projects more effectively. Now you will quickly see how websites are hosted and how the pages you create end up on the screens of computers and mobile devices from visitors around the world.

The Internet and World Wide Web domain names

Internet domain names and the World Wide Web Internet is based on the fundamental concept that all computers must be able to communicate with each other through an address. Just like your home, department or school has an address where the post office or Fed Ex can contact you, or you have a phone number where someone can call you, all computers connected to the Internet have an address known as TCP / IP speaks to. TCP / IP means Transmission Control Protocol / Internet Protocol, but that is not critically important. What you need to know is that TCP / IP allows digital information packets, such as your website, to be sent over networks and then reassembled once you reach your destination. TCP / IP addresses are commonly referred to as IP addresses.
In the early 1990s, Sir Tim Berners-Lee took advantage of the linked nature of the Internet and created a method for his colleagues to remotely access the data he stored on his computer. A user anywhere in the world who had access to the Internet could connect to a server and request a page, which would then display on the user’s computer. Berners-Lee dubbed it the World Wide Web, and his program was a simple version of the first web browser. Web browsers and the information available have evolved greatly, but the technical concepts have not changed. One computer with a TCP/IP address is able to request information, such as a web page, from a computer located at another TCP/IP address. Researchers such as Berners-Lee appreciated the instant access to documents, and the World Wide Web was used at f rst primarily by academics for research purposes. Commercial uses of a web browser displaying text and graphics quickly evolved. In 1994 there were a mere handful of websites in existence, and a short five years later, there were over six million websites in existence.

Domain names and hosting 

Domain names help users find their way around the Internet. You already know domain names because they are commonly surrounded by www on the front and .com on the end. Domains can also include various endings such as .org, .edu, and .gov. Domain names exist because it’s not very convenient for you to use or remember IP addresses. Domain Name Servers (DNS) translate easy-to-understand domain names into IP addresses. A DNS converts a familiar string of letters, the “domain name,” to the numbered IP address. Instead of typing the IP address 72.32.147.166 into a web browser, you can type the domain name, such as www.digitalclassroombooks.com. A DNS on the Internet converts your requested domain into the appropriate IP address, which routes your request to the appropriate web server.
The web server is a computer that is much like a desktop PC. It generally runs either a version of Microsoft Windows Web Server or UNIX, but it may have additional processing power and redundant systems to handle traffic from thousands of users at the same time. Web servers maintain a constant connection to the Internet, so your websites are available 24 hours a day. Because most companies want their web servers to be available all day, every day, they are often maintained by web hosting companies. These firms are paid to maintain your web server so that it is always accessible and running. If you run a small website, they may put your site on a server that is shared with other sites. For more demanding sites, or sites with sensitive information, a business will pay higher fees for a dedicated server. Even large companies will often turn to hosting businesses to maintain their web servers, although some companies may elect to place their web servers within their own company.

The language of the web 

Hypertext Markup Language, or HTML, uses tags that enclose plain text. The tags describe how the text should appear and the function of the text. The web browser looks at the tags and displays them accordingly. A simple example of HTML text is: <p>Do you want to have lunch?</p> The text to be displayed, Do you want to have lunch?, is wrapped by two tags indicating that it is a paragraph. The first tag is the opening tag <p> and the second is the closing tag </p>. These tags are generally not displayed in the browser, which reads the text from the web server and formats the text as a paragraph to display on the viewer’s screen. HTML also lets designers create hyperlinks. Hyperlinks are areas of text, images, buttons, or other parts of a page where the viewer can click to navigate to additional content. Clicking a link can open a new web page, site, document, video, or animation.

The evolution of the web and web standards 

HTML is interpreted by web browsers, such as Internet Explorer, Firefox, Safari, and Chrome. Web designers have discovered that the same HTML code might be displayed differently on various web browsers. Because web browsers can interpret HTML code differently, you will need to consider browser testing in your design considerations, which we cover in more detail in Lesson 10. In the early days of the web, some browser developers created proprietary HTML tags. They created tags that were supported by only their browser, as they hoped that the unique capabilities might draw more users.
Soon designers discovered they could not rely on the same HTML code for all browsers. Designers added “hacks,” extra code, to pages, making certain that layouts worked in different browsers. Some designers would go so far as to create two versions of a site, and the appropriate version would be displayed based upon the browser being used by the viewer. Other designers would add badges to their sites, letting viewers know that the site performs best with a particular browser. To this day you can still see some sites with notices such as “This site is optimized for Internet Explorer” or some other browser.
Designers, businesses, and the companies developing browsers eventually discovered that inconsistency and proprietary tags that worked only with their browser were hurting the user experience and harmful to the vitality and growth of the web. The various browser manufacturers have started to recognize the importance of consistency, and most are working with the World Wide Web Consortium (W3C) and independent testing bodies to validate the compliance of their browser with accepted standards. Browser developers now promote their compliance with standards and speed at displaying standards-based pages. Now that you understand some of the history and concepts behind the web, you’ll start to examine some of the HTML code that powers web pages.

Separating structure, style, and interactivity 

Modern websites often consist of pages with HTML or XHTML for the page structure and content, Cascading Style Sheets (CSS) for the style, and JavaScript, Flash, or Silver light for the interactivity. In this exercise, you will look at three examples of source code. Each page has the same content, but has a different appearance and functionality. If you have not done so already, be sure to copy the lesson folders for this book onto your local system.
1> Open your web browser — it doesn’t matter if it is Internet Explorer, Firefox, Chrome, Safari, or another browser. Choose File > Open and browse to the web02lessons folder, choose the file plain.html, and then click Open. The page loads into your browser. The page displays in your browser. The HTML defines the structure of this page and contains content such as the text and images.
2 In your web browser, choose File > Open and browse to the document plain_with_styles.html located in the web02lessons folder, and click Open. Your browser displays a more highly formatted web page. It includes a two-column layout, and background colors for the page. The content on this page is identical to the previous document; however, the style is being provided by a number of style rules in a Cascading Style Sheet or CSS.
3 In your web browser, choose File > Open and browse to the document plain_with_styles_js.html located in the web02lessons folder, and click Open. This page includes a collapsible panel which you can activate by clicking the title to expand the content section. JavaScript makes this interactivity possible by registering the mouse click which triggers the expansion or collapse of the panel.
As you can see, the same HTML content can be enhanced and modifi ed using CSS and also by adding interactivity, in this example it was through the use of JavaScript. As you work through this book, you’ll learn diff erent ways to have HTML work in concert with CSS and interactive elements and even multimedia to create the page and message you need for the sites you create.

Designing for the web

 The best designed websites are those that meet the expectations of a user, are easy to use, and meet the objective of the publisher — whether a business, organization, or individual. There are several considerations that should always be a part of your decision-making process when starting to create a design.

Know your audience

 A bank site provides a sense of safety, stability, and professionalism. The kind of image you want from someone that will hold on to your money. It also provides easy access to log-in to your account if you are a user, and has easy-to access links to move to the parts of the site off ering various services. The design and navigation is easy to follow, regardless of the age or technical skill of the user.

An entertainment site that targets a teenage audience includes a more visual approach, updated news, and links to social networking sites that might be used by the audience. Information about shows and personalities is front-and-center. The site manages to be trendy and still provides easy access to information that viewers are likely to be seeking.

Know that your site’s viewers are impatient

 The viewers coming to your site are impatient. A recent study of retail websites found that if users reach a website and the page does not load within four seconds, they are likely to leave the site, never waiting for the page to load. The same study found that more than one-third of online shoppers would abandon a site immediately if they have a poor online experience. The majority of those who said they would abandon a site indicated they would not return.

1 As a designer you can help provide a great experience on your sites by keeping the following in mind:

• Use images only when they add value to the page.

 • When using images, optimize their size for online use so they load faster. 

• Use a common Cascading Style Sheet to standardize layout, navigation and colors.

 • Separate long content into multiple pages so it loads faster. 

• Only add multimedia such as video, audio, Flash, and Silverlight.

Designing for the screen

 When designing websites, consider where they will be viewed. If your audience will primarily be on a desktop or laptop computer, the pages should be horizontal rather than vertical. This keeps users from needing to scroll unnecessarily. Similarly, if your audience is primarily working on mobile devices, consider reducing the content and designing for a smaller, vertical screen. Displays are available in different sizes, and can display varying amounts of information. The amount of information that can be displayed on screen is known as the resolution of a display, and it is measured in pixels. The word pixel is derived from “picture element” and is the smallest unit of measurement on the screen (when used for web graphics there are often 72 pixels per inch). Two of the most common monitor resolutions on the web are 1024 pixels wide × 768 pixels high and also 1280 pixels wide × 800 pixels high. As you can see in the table below, the same page displayed at various resolutions provides different experiences for the viewer.

As screen sizes get larger and display resolutions increase, there are a greater number of discrepancies that can occur, making it even more important to design for all the displays on which your site will be viewed and we discuss how to tackle this dilemma in Lesson 7. While it is impossible to design a site that looks the same in every browser at every resolution, you can still create designs that work across various devices and displays.

Understanding how your audience will read your web content

 Most web users gain information they are seeking through reading. But writing for a website should diff er from writing for brochures or other printed documents. Web readers are more likely to “scan” stories rather than read them in full detail. Effective content is organized, edited, and structured so it works well on a site; it isn’t merely copied and pasted from printed brochures. You’ll discover that you want to create headings that clearly mark the separation of a story from other content, or format text so it does not span the entire width of a monitor. You’ve discovered several key concepts about how the web works, the technical underpinnings of websites, and some key design considerations. We wrap up this section with some self-study ideas and review questions before jumping into the next lesson.

Understanding how your audience will read your web content Most web users gain information they are seeking through reading. But writing for a website should diff er from writing for brochures or other printed documents. Web readers are more likely to “scan” stories rather than read them in full detail. Effective content is organized, edited, and structured so it works well on a site; it isn’t merely copied and pasted from printed brochures. You’ll discover that you want to create headings that clearly mark the separation of a story from other content, or format text so it does not span the entire width of a monitor. You’ve discovered several key concepts about how the web works, the technical underpinnings of websites, and some key design considerations. We wrap up this section with some self-study ideas and review questions before jumping into the next lesson.

SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•