Web Basics

Fundamentals of the Internet

This content is adapted from the website: Tutorials Point

What is the World Wide Web?

The Internet is essentially a global network of computing resources. You can think about the Internet as a physical collection of routers and circuits as a set of shared resources or even as an attitude about interconnecting and intercommunication. Some common definitions given in the past include:

  • A network of networks based on the TCP/IP communications protocol.
  • A community of people who use and develop those networks.
  • A community of people who use and develop those networks.

Internet Based Services:

Some of the basic services available to Internet users are:

  • Email: A fast, easy, and inexpensive way to communicate with other Internet users around the world.
  • FTP: Allows a user to transfer virtually every kind of file that can be stored on a computer from one Internet-connected computer to another.
  • World Wide Web (WWW): A hypertext interface to Internet information resources.

What is WWW?

This stands for World Wide Web. A technical definition of the World Wide Web is : all the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP).

A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the World Wide Web Consortium (W3C):

The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge.

In simple terms, The World Wide Web is a way of exchanging information between computers on the Internet, tying them together into a vast collection of interactive multimedia resources.

What is HTTP?

This stands for HyperText Transfer Protocol. This is the protocol being used to transfer hypertext documents thats makes the World World Wide possible.

A standard web address such as http://www.yahoo.com/ is called a URL and here the prefix http indicates its protocol

What is URL?

URL stands for Uniform Resource Locator, and is used to specify addresses on the World Wide Web. A URL is the fundamental network identification for any resource connected to the web (e.g., hypertext pages, images, and sound files).

A URL will have the following format:

protocol://hostname/other_information

The protocol specifies how information from the link is transferred. The protocol used for web resources is HyperText Transfer Protocol (HTTP). Other protocols compatible with most web browsers include FTP, telnet, newsgroups, and Gopher.

The protocol is followed by a colon, two slashes, and then the domain name. The domain name is the computer on which the resource is located.

Links to particular files or subdirectories may be further specified after the domain name. The directory names are separated by single forward slashes.

What is Website?

Currently you are on our website tutorialspoint which is a collection of various pages written in HTML markup language. This is a location on the web where people can find tutorials on latest technologies. Similar way there are millions of websites available on the web.

Each page available on the Website is called a web page and first page of any web site is called home page for that site. The home page is the introduction to the website, providing information about the site's general purpose and content.

While there are exceptions, most home pages are saved as "index" pages, either index.htm or index.html, and are often referred to as the index page. If you fail to save your home page with the name "index," a web browser may not be able to locate and load your home page.

What is Web Server?

Every Web site sits on a computer known as a Web server. This server is always connected to the internet. Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 256 separated by periods, for example, 68.178.157.132 or 68.122.35.127.

When you register a Web address, also known as a domain name, such as tutorialspoint.com you have to specify the IP address of the Web server that will host the site.

We will see different type of Web servers in a separate chapter.

What is Web Browser?

To access the Web you need a software program called a web browser, such as Chrome, Firefox, Microsoft Internet Explorer or Opera. These browsers are installed on devices such as your desktop PC computer, tablet, laptop, or smartphone.

Because there are so many different kinds of devices used to access the web, it is important to design a website that can display the same information in a similar manner, regardless of the screen size, resolution. A website with this ability is known as a cross-platform website.

Despite advances in WYSIWYG technology, the only way the designer can be certain that a website looks basically the same on multiple browsers, operating systems, or platforms is the rigorously test the site in different viewing situations.

Currently you must be using any sort of Web browser while you are navigating through my site tutorialspoint.com. On the Web, when you navigate through pages of information this is commonly known as browsing or surfing.

What is SMTP Server?

This stands for Simple Mail Transfer Protocol Server. This server takes care of delivering emails from one server to another server. When you send an email to an email address, it is delivered to its recipient by a SMTP Server.

What is ISP?

This stands for Internet Service Provider. They are the companies who provide you service in terms of internet connection to connect to the internet.

You will buy space on a Web Server from any Internet Service Provider. This space will be used to host your Web site.

What is HTML?

This stands for HyperText Markup Language. This is the language in which we write web pages for any Website. Even the page you are reading right now is written in HTML.

This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic publishing, the specific standard used for the World Wide Web.

What is Hyperlink?

A hyperlink or simply a link is a selectable element in an electronic document that serves as an access point to other electronic resources. Typically, you click the hyperlink to access the linked resource. Familiar hyperlinks include buttons, icons, image maps, and clickable text links.

What is DNS ?

DNS stands for Domain Name System. When someone types in your domain name, www.example.com, your browser will ask the Domain Name System to find the IP that hosts your site. When you register your domain name, your IP address should be put in a DNS along with your domain name. Without doing it your domain name will not be functioning properly.

What is W3C?

This stands for World Wide Web Consortium which is an international consortium of companies involved with the Internet and the Web.

The W3C was founded in 1994 by Tim Berners-Lee, the original architect of the World Wide Web. The organization's purpose is to develop open standards so that the Web evolves in a single direction rather than being splintered among competing factions. The W3C is the chief standards body for HTTP and HTML.

On the simplest level, the Web physically consists of following components:

  • Your personal computer - This is the PC at which you sit to see the web.
  • A Web browser - A software installed on your PC which helps you to browse the Web.
  • An internet connection - This is provided by an ISP and connects you to the internet to reach to any Web site.
  • A Web server - This is the computer on which a web site is hosted.
  • Routers & Switches - They are the combination of software and hardware who take your request and pass to appropriate Web server.

The Web is known as a client-server system. Your computer is the client and the remote computers that store electronic files are the servers.

Here's how web works:

When you enter something like http://www.google.com, the request goes to one of many special computers on the Internet known as Domain Name Servers (DNS). All these requests are routed through various routers and switches. The domain name servers keep tables of machine names and their IP addresses, so when you type in http://www.google.com, it gets translated into a number, which identifies the computers that serve the Google Web site to you.

When you want to view any page on the Web, you must initiate the activity by requesting a page using your browser. The browser asks a domain name server to translate the domain name you requested into an IP address. The browser then sends a request to that server for the page you want, using a standard called Hypertext Transfer Protocol or HTTP.

The server should constantly be connected to the Internet.ready to serve pages to visitors. When it receives a request, it looks for the requested document and returns it to the Web browser. When a request is made, the server usually logs the client's IP address, the document requested, and the date and time it was requested. This information varies server to server.

An average Web page actually requires the Web browser to request more than one file from the Web server and not just the HTML / XHTML page, but also any images, style sheets, and other resources used in the web page. Each of these files including the main page needs a URL to identify each item. Then each item is sent by the Web server to the Web browser and Web browser collects all this information and displays them in the form of Web page.

In short:

We have seen how a Web client - server interaction happens. We can summaries these steps as follows:

  • A user enters a URL into a browser (for example, http://www.google.com). This request is passed to a domain name server.
  • The domain name server returns an IP address for the server that hosts the Web site (for example, 68.178.157.132).
  • The browser requests the page from the Web server using the IP address specified by the domain name server.
  • The Web server returns the page to the IP address specified by the browser requesting the page. The page may also contain links to other files on the same server, such as images, which the browser will also request.
  • The browser collects all the information and displays to your computer in the form of Web page.

All content copyright © by the original copyright holder. This information reproduced for educational purposes.

Back to top.

Types of Websites

This content is adapted from the website: Orthodoxdaily

In order to know what types of websites to build, it’s important to know the different types of websites there are. Websites are classified into various categories. Below is a list of the different types of websites based on the content and features offered. However, content can be varied, and with this in mind, we have tried to make segregation as intuitive as possible. Please note that these categories of websites are not distinct and can overlap, sometimes to a large degree.

(a) Search Engines & Portals 

Google.com

These are some of the most popular types of websites in the world. Some search engine companies, like Google or Gigablast, prefer to keep their homepage simple and stress on only one service, while Yahoo! and MSN have a more “portal” look which many services are advertised to the user like email, news etc. The portal provides a broader platform for the company to promote their different services but it also fragments the visitors. Classified directories and yellow pages websites list businesses (both online and offline) segregated into different categories or geographic locations. These may also include an internal search engine that helps users quickly locate information.

(b) Social Networking

Facebook.com

The new mantra on the web is social networking. These websites can be classified as Web 2.0 sites but their sheer number and popularity demands we have a separate category. Facebook, Orkut, LinkedIn, Twitter have been the rage past couple of years. From helping you locate schoolmates and past colleagues to microblogging, these websites have a whole array of utilities and features with more being added each day.

(c) Business

NorthAmerican.com

Company websites are by far the most important. Company websites range from the very small to the very large and can be a non-profit or for-profit business. Company websites have pages of information on the business, its services and clients. Company websites are often “static”. In other words, they don’t change much or very often. These are more like “online brochures” However, with modern Web 2.0, interactions with users and websites are becoming extremely popular and lots of companies are integrating new types of services and features into their sites.

(d) Information/Educational

Wikipedia.org

A major informational site is wikipedia.org, the online encyclopedia. And it is unique, because it allows visitors to contribute and edit articles. Now your small business may not want such a comprehensive site, but if you have information to share of sell, an informational website would fill the bill. Suppose you have a landscaping business. You could create a website that lists plants with their definitions and planting and caring instructions. This would be helpful to people, and you would use it to lead people to your nursery. Of course you could "hybrid" this site with e-commerce and also sell your plants online. Original source info from: website-types

(e) News

CNN.com

These are the types of websites which are dedicated to the purpose of providing information – whether free or paid. These informational websites might be catering to a niche industry or be wider in their scope because of which they can be labeled as “news portals”. Information website can also contain updated time tables, TV guides, reference material, sports data (like cricket scores), weather and stock data.

(f) Personal

Daniel White Home Page

With tons of tools and services available, creating a website is no longer rocket science. The astronomical number of personal types of websites one finds on the web is mind-blowing! Personal websites and blogs are the fastest growing types of web site. Personal websites can contain any kind of information and are usually administered by a single individual who can choose whatever content they would like to put online. This example of a personal website is built on the Bootstrap 3 framework.

(g) Blog

Endgadget.com

Blogs are like online diaries (the irony is, though you keep your hard-copy diary under lock-and-key, you want more and more visitors to read the online one). Blogs can be created by anyone using free services like Blogger.com (Google) or Windows Live Spaces (Microsoft). You can also install blog software to your pre-existing website and start putting your thoughts online in a matter of minutes! Because blogs are so easy to create, manage and even earn from (there are a lot of profitable blogs online, if you didn’t know), the web has increased manifold. And it’s all thanks to the many free blog services and a strong enthusiasm by the ever growing blogging community who keep maintaining and updating their web space regularly. From ramblings of a wandering mind to detailed and specific information on technical fields, the content of blog types of web site can vary widely.

(h) Cloud-Based

flickr.com

In this example, cloud-based websites are very similar to web 2.0 websites. Web 2.0 is an amorphous concept and primarily encompasses websites that offer a particular service. The purpose of these websites can be varied – information storage, communication etc. Sites like Flickr.com, Google docs, del.icio.us fall into this category. Imagine it like this, browsers have upgrades such as the new Internet Explorer Version 10, and the World Wide Web is transitioning from static webpages into an interactive, highly-personalized experience. This is Web 2.0: the next “version” of the web.

(i) E-commerce

eBay.com

The web is primarily used for communication and information search, but many companies have set up shops online. In fact, some companies like the popular Amazon don’t have brick-and-mortar shops – the entire buying and selling takes place online. Online shops are not restricted to selling tangible products; they can also provide services and a good example of this would be travel and matrimony websites. Furthermore, you can integrate payment gateways, like Paypal.com and moneybookers.com, in your online shopping mall and process the orders and receive funds.

(j) Entertainment

E! Online

Entertainment websites put the focus on entertainment, mixing streaming video, audio, etc. often connected with popular culture. While they do contain much information, the content is designed to keep the user entertained, rather than to strictly inform the user about a particular subject matter. Examples of entertainment websites can also include Netflix, a provider of online streaming video.

All content copyright © by the original copyright holder. This information reproduced for educational purposes.

Back to top.

Website Planning Overview

This content is adapted from the website htmlbasictutor.

Additional information: astreetweb.com

When you decide to have a website for your business or personal interest there are a number of things you have to consider before you start actually building your website. Website planning has various steps:

  1. Purpose of Website

    Why are your building this site?

    The first step of website planning should be deciding on the purpose of the website. Determine what it is that you wish to accomplish with the website. Taking the time to clearly define the purpose of the website will affect how successfully you reach the goals you set for the project.

  2. Determine Target Audience

    What is your target audience?

    Ask yourself, "Who is going to be looking at my site?" Determining your target audience during the website planning stage will give you a wealth of information that can be used as the website is further developed. The target audience is the group of intended visitors to your page. This information can be used when deciding on the type of website features you need and what the target audience is looking for.

  3. Website Technical Considerations

    Ask yourself, "What technologies do I need?"

    The website technologies you will require will depend on the type of website you are building and what type of audience you have decided to target and accommodate. Have your list of website technologies required ready before you move to the next step, securing hosting.

As you can see, website planning has a number of steps to go through before actually building the website. The more time you spend on website planning, the better results you will get meeting your website goals, meeting your target audience's expectations, invest in the right website technologies, select the right website hosting package and remain within your website budget.

All content copyright © by the original copyright holder. This information reproduced for educational purposes.

Back to top.

Website Design Basics

This content adapted from the website: about.com

Elements of Good Design

Good web design is the same as good design. If you understand what makes something good design you'll be able to apply those rules to your web design. The elements of good design apply whether you are designing a web page, a business card, or a t-shirt. And the links below will help you understand the important features of good design.

How to Design the Layout of a Web Page

Many people think that the layout is the design, and in many ways it is. Layout is the way the elements are positioned on the page. Once you understand the basic principles of web design you can start placing the elements on the page. By creating an amazing web layout, you create the bones of an amazing design. And the links below will help you learn what makes a great layout great and how to apply that to your web designs.

Responsive Website Design

The primary focus of Responsive Website Design is to change the layout depending upon the width or size of the device viewing the page.

Fonts and Typography

Fonts are the way your text looks on a Web page. And most Web pages have large amounts of text. When you're thinking of design, you need to think about how the text looks on a micro-level (the font glyphs, what font family, etc.) as well as the macro-level (positioning blocks of text and adjusting the size and shape of the text). These resources explain how to work with fonts on Web pages.

How to Use Color

Color is everywhere. It's how we dress up our world and how we see things. Color has meaning beyond just "red" or "blue" and color is an important design element. These color resources teach how to use color effectively in Web design.

Graphics and Images

Graphics are the fun part of most Web pages. As the saying goes "a picture is worth 1,000 words" and that's also true in Web design. Images can be used very effectively as a focal point, and can give viewers an immediate cue about the page content. Learn how to get the most out of your Web images with the following links.

Tackling Web Navigation

Navigation is how your customers get around from one page to another on a Web site. Navigation provides movement and gives your customers the chance to find other elements of your site. You need to make sure that the structure of your Web site (the information architecture) makes sense so that your customers aren't forced to simply use search.

Accessibility and Usability

Accessibility and usability are often seen as a detriment to Web design, but a good designer focuses on making their site useful to as many people as possible. The links below take you through the basics of making an accessible site without compromising the design.

Web Design Software

Most Web designers prefer to work in WYSIWYG or "What You See Is What You Get" editors because they provide a visual interface to the design. But finding the best Web design software is more than just WYSIWYG or not. Plus there are other tools you will need to build Web pages beyond just the Web editor.

Publishing Your Website

After you have completed the design of your website, implementing your project plan, adding graphics and links, and testing your new site on all available platforms, you still need to upload, or publish, all your files from your computer to an online server. After the site is uploaded, you need to test the online version thoroughly to make certain the all the pages, content, images, streaming video, etc. has been uploaded as well.

Due to specific naming issues, files that work properly on a local computer may not be recognized when the site is uploaded. This is frequently because of issues with file name capitalization. To be safe, always use all lower-case characters for file names. For example, use image.jpg, rather than image.JPG.

All content copyright © by the original copyright holder. This information reproduced for educational purposes.

Back to top.


Wayne Joness
West Los Angeles College, cs952
Fall 2016