Web Basics

Section 1: The Internet

"The Internet" is simply a catchall name for the vast, globe-spanning network of computers that are connected to each other and can transmit and receive data, shuttling information back and forth around the world at nearly the speed of light.

• The Internet has become so ubiquitous and pervasive, impacting so many aspects of modern life, that it's hard to imagine a world without it.

The World Wide Web is one facet of the Internet, like a bustling neighborhood in a much larger city.

• Other Internet "neighborhoods" include e-mail, news groups, and chat rooms.
• The Web is made up of millions of files and documents residing on different computers across the Internet, all interconnected to weave a web of information around the world, which is how it gets its name.
• In its relatively short history, the Web has grown and evolved far beyond the simple text documents it began with, carrying other types of information through the same channels: images, video, audio, and fully immersive interactive experiences.
• At its core, the Web is fundamentally a text-based medium, and that text is usually encoded in HTML.

Many different devices can access the Web: desktop and laptop computers, tablets, mobile phones, game consoles, and even some household appliances.

• Whatever the device, it in turn operates software that interprets HTML.
• These programs are technically known as user-agents, but the more familiar term is web browsers.
• A web browser is specifically a program intended to visually render web documents, whereas some user-agents interpret HTML but don't display it.

A browser or user-agent is also known as a client, because it is the thing requesting and receiving service.

• The computer that serves data to the client is called, not surprisingly, a server.
• The Internet spans a multitude of servers, all storing and processing data and delivering it in response to client requests.
• The client and the server are two ends of the chain, connected to each other through the Internet.

Section 2: How the Web Works

The World Wide Web is a global, interactive, dynamic, cross-platform, distributed, graphical hypertext information system that runs over the Internet.

The Web Is Interactive

• The act of selecting a link or clicking a button (like on these notes) is a form of interactivity.
• In a few weeks this course will shift focus to adding more sophisticated interactivity to a web page through JavaScript.

The Web Is Dynamic

• Many web sites undergo constant change as updates and corrections are made.

The Web Is Cross-Platform

• Cross-platform means that you can access web information equally well from any computer hardware running any operating system using any display.

The Web Is Distributed

• The Web is able to provide so much information because that information is distributed globally across millions of web servers.
• A web server is just a computer that listens for requests from web browsers and responds to those requests.

The Web Is Graphical and Easy to Navigate

• The original Internet involved simple text-only applications (see Gopher, Veronica, and Usenet).
• The first graphical web browser, Mosaic, paved the way for the Web to display both text and graphics in full color on the same page.
• Currently, the most popular browsers are Google Chrome, Apple Safari, Mozilla Firefox, and Microsoft Edge.

The Web Is a Hypertext Information System

• Hypertext, or more accurately hypermedia, enables you to read and navigate text and visual information in a nonlinear way by clicking links, or hyperlinks, within a web page.
• Links can be internal, meaning they point to locations within that same page, or external, meaning they point to pages on the same site or even to pages on other sites.

Here is another figure depicting the web response cycle:

Here is a video presentation about how the Internet works:

Section 3: Web Browsers

A web browser is the application you use to view pages and navigate the World Wide Web.

• The core purpose of a web browser is to connect to web servers, request documents, and then properly format and display those documents.
• Depending on the browser you use and the features it includes, however, you can also play multimedia files, read your mail, or use other advanced features that a particular browser offers.

How Browsers Work

The browser's main components are shown below:

Browser Main Components

Figure details:

• The user interface – this includes the address bar, back/forward button, bookmarking menu etc. Every part of the browser display except the main window where you see the requested page.
• The browser engine – directs the actions between the UI and the rendering engine.
• The rendering engine – responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
• Networking – used for network calls, like HTTP requests. It has platform independent interface and underlying implementations for each platform.
• JavaScript interpreter – used to parse and execute the JavaScript code.
• UI backend – used for drawing basic widgets like combo boxes and windows. It exposes a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.
• Data storage – used to ensure persistence. The browser needs to save all sorts of data on the hard disk, for example, cookies. The HTML specification (HTML5) defines 'web database' which is a complete (although light) database in the browser.
• For a detailed explanation, read How Browsers Work: Behind the Scenes of Modern Web Browsers or How a Web Browser Works.

Most Widely Used

• There are many sites that analyze the usage share of browsers, but Wikipedia's statistics seem to be acceptable.

Designing for Browsers

Although the most widely used is Chrome, you must take all the popular browsers into account when creating your Web pages or you will limit your audience substantially.

• Every visitor to your Web site will potentially use hardware and software configurations that are different than your own.
• You cannot control any aspect of what your visitors use when they view your site – their device types (desktop, laptop, tablet, Android, iPhone), their screen resolutions, their browser types, their browser window sizes, or their connection speeds.

While all Web browsers process and handle information in the same general way, there are some specific differences among them that result in things not always looking the same in different browsers.

• Even users of the same version of the same Web browser can alter how a page appears by choosing different display options and/or changing the size of their viewing windows.
• All the major Web browsers allow users to override the background and fonts specified by the Web page author with those of their own choosing.
• Screen resolution, window size, and optional toolbars can also change how much of a page someone sees when it first appears on their screens.
• You can ensure only that you write standards-compliant HTML and CSS.

You should always test your web sites with as many of these Web browsers as possible:

• Chrome
• Safari
• Firefox
• Edge
• Opera

You should also test your site on smart phones and tablets because their interfaces differ from web browsers.

Section 4: Web Servers

A web server is the program that runs on a computer and is responsible for replying to web browser requests for files.

• A web server is required for publishing documents on the Web.
• One point of confusion is that the computer on which a server program runs is also referred to as a server, so when someone uses the term web server, they could be referring to a program used to distribute web pages or the computer on which that program runs.

The Process

• When a browser requests a page on a website, that browser makes a web connection to a server using HTTP.
• The server accepts the connection, sends the contents of the requested files, and then closes the connection.
• The browser then formats the information it got from the server.
• Web servers do more than just serve files; they’re also responsible for managing form input and for linking forms and browsers with programs such as databases running on the server.

As with browsers, many different servers are available for many different platforms, each with many different features.

Section 5: Web Hosts

While you are developing a web site you generally save your work locally on your own computer, but in order to make it available on the Web, you need to move those files to a web server.

There are various hosting options for a website:

• Use web space provided by your ISP:
  • An Internet service provider (ISP) is the company that connects you to the Internet.
  • Many service providers offer a limited amount of web space where you can host your own site.
• Use free hosts:
  • Some companies provide free web hosting.
  • "Free" is a relative term because free web hosts are usually supplemented by advertising.
• Pay for web hosting:
  • Many companies specialize in hosting websites, and offer hosting packages for as little as $5 (US) per month.
  • They include more robust features than free hosting or ISP hosting provides (such as e-mail service, server-side scripting, and databases).
  • For more info, take INFO 4430 (Web Application Development).

You will also need to purchase and register a unique domain name to be your site's address on the Web.

• Some hosting companies offer domain registration as an included service.

Section 6: URLs

Every file or document available on the Web resides at a unique address called a Uniform Resource Locator (URL).

• The term Uniform Resource Identifier (URI) is sometimes used interchangeably with URL, though URI is a more general term; a URL is a type of URI.
• A URL is an address that allows a web-connected device to locate a specific file on a specific server in order to access it for a user.

Components of a URL

A web URL follows a standard form that can be broken down into a few key parts, diagrammed below:

Each segment of the URL communicates specific information to both the client and the server.

• The protocol indicates one of a few different sets of rules that dictate the movement of data over the Internet.
  • The Web uses HyperText Transfer Protocol (HTTP), the standard protocol used for transmitting hypertext-encoded data from one computer to another.
  • The protocol is separated from the rest of the URL by a colon and two forward slashes (://).
  • We'll see later that that the creator of the World Wide Web regrets the // in a web address as being unnecessary (link).
• A hostname, which includes parts 2, 3, and 4 in the diagram above, is the name of the site from which the browser will retrieve the file.
  • The web server’s true address is a unique numeric Internet Protocol (IP) address, and every computer connected to the Internet has one.
    • cob.isu.edu is associated with the IP address 134.50.214.129 (Convert URL to IP tool)
    • A domain name is a more memorable alias that directs Internet traffic to an IP address.
  • Many web hostnames feature a domain prefix, further naming the particular server being accessed (especially when there are multiple servers within a single domain), though that prefix is frequently optional.
    • A prefix can be almost any short text label, but "www" is traditional.
    • It is often referred to as a third level domain.
    • It's possible for another entire website to exist separately within a domain under a different prefix, known as a subdomain.
    • Subdomains are commonly used by organizations that wish to assign a unique name to a particular department, function, or service related to the organization.
    • Consider www.isu.edu versus cob.isu.edu.
  • A hostname will also feature a domain suffix (sometimes called an extension) to indicate the domain’s category, such as ".com" for a U.S. commercial domain or ".edu" for a U.S. educational institution.
    • This is also referred to as the generic top-level domain.
  • Although it doesn't appear on the diagram, URLs for websites in countries other than the US include a country code immediately following the top-level domain, such as .au for Australia.
    • Every country also has its own domain extension. (Map of country code top-level domains)
• The path (5) specifies the directory on the web server that holds the requested document, just as files are saved in different virtual folders on a computer.
  • Files on a web server may be stored in subdirectories – folders within folders – and each directory in the path is separated by a forward slash (/).
  • This path is the route a client will follow to reach the ultimate destination file.
  • The top-level directory of a website (the one that contains all other files and directories) is called the site root directory and doesn’t appear in the URL.
• The file name and extension (6) identify a specific file to retrieve.
  • You can give your files just about any name you want, and a file extension indicates what type of file it is.
  • An HTML document will have an extension of .html or .htm (the shorter version is used on some servers that support only three-letter file extensions).
  • CSS files use the .css extension, JavaScript files use .js, and so forth.
  • Web servers are configured to recognize these extensions and handle the files appropriately, processing different types of files in different ways.
  • You won’t see a file name and extension in every URL you encounter.
    • Most web servers are configured to automatically locate a specially named file when a directory is requested without a specified file name.
    • This could be the file called index.html, default.html, or some other name, depending on the way the server has been set up.
• The anchor (7) refers to an internal link, or bookmark, within the html document.

Section 7: Development Stacks

A tech stack is broadly divided into the client side (front end) and server side (back end).

Front-end Developer

Front-end development refers to the client side, that is, a website’s interactive features.

• Front-end developers are responsible for a website’s user-facing code and the architecture of its immersive user experiences.
• Front-end developers work closely with designers or user experience analysts to bring mockups, or wireframes, from development to delivery.

Front-end developers must be adept at three main languages: HTML, CSS, and Javascript programming.

• In addition to fluency in these languages, front-end developers need to be familiar with frameworks like Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, and libraries like jQuery.

Back-end Developer

Back-end development refers to the server-side development.

• Back-end developers primarily develop and maintain the core functional logic and operations of a software application or information system.
• Back-end developers focus on databases, scripting, and the architecture of websites, along with the back-end code that helps to communicate the database information to the browser..
• A back-end developer typically has expert programming skills in Python, Ruby, C#, Java and other high-level programming languages.

Back-end developers also create and maintain the entire back end of a system, which consists of the core application logic, databases, data and application integration, API and other back-end processes.

• The key job role of a back-end developer is to ensure that the data or services requested by the front-end system or software are delivered through programmatic means.
• A back-end developer performs the testing and debugging of any back-end application or system.
• Knowledge of web services and the creation and consumption of REST and SOAP services is helpful.

Full-stack Developer

A full stack developer can work cross-functionally on the full stack of technology, i.e. both the front end and back end.

Here are some figures detailing the differences between front-end and back-end developers:

Section 8: Hypertext Markup Language (HTML)

HTML is the computer coding language that describes the structure of a web page.

It converts ordinary text into active text for display and use on the Web, and also gives plain, unstructured text the sort of structure human beings rely on to read it.

• The essence of a markup language is embedded instructions that a computer can follow in order to make content readable and usable by humans.
• HTML consists of encoded markers called tags that surround and differentiate portions of text, indicating the function and purpose of the content that those tags "mark up."
• Tags are embedded directly in a plain-text document where they can be interpreted by a browser.
• A browser doesn't display the tags themselves; tags only tell the browser how to treat the content between them.
• A matched pair of start and end tags (the end tag has a slash) forms an element, comprising the tags and everything in between them.

Standards

• You must follow certain rules when you author documents in HTML – there are certain ways they should be assembled to be sure they'll work properly.
• The Web runs on agreement, with all the different authors and programmers and clients and servers agreeing to abide by the same basic rules, collectively referred to as web standards.
• Standardizing web languages ensures that the Web can work consistently and reliably for everyone – users and authors alike.
• The technical specifications for many of the core languages (including HTML) that make up the Web are overseen and maintained by the World Wide Web Consortium (W3C), an international, non-profit organization founded to standardize the languages and map a clear path for the Web of the future.

HTML5

• The current version of HTML is HTML5.2. (The first draft of HTML5.3 was released in December 2017.)
• The HTML5 specification is still evolving, but it's relatively stable at this point in time.
• This latest version of HTML introduces a number of new, meaningful elements that were lacking in earlier versions.
  • In addition to the usual headings, paragraphs, tables, and lists, there are new elements for things like navigation, menus, articles, summaries, dates and times, figures with captions, and several new interactive form elements.
  • Also new in HTML5 are elements for embedding rich media in documents.
    • For years authors had to rely on third-party plug-in applications – such as Adobe's Flash or Apple's QuickTime – to play sound and video over the Web.
    • HTML5 makes it possible to play sound and video natively in the browser, without plug-ins.

Section 9: CSS

Separating Content from Presentation

HTML is intended to bestow a meaningful structure upon unstructured text, showing that different blocks of words are in fact different types of content.

• A headline is not the same as a paragraph; those two types of content should be marked up with different tags, making their innate difference clear to another computer.
• HTML has few means of influencing the display of content; it was strictly intended to provide structure, with only a few conceits to graphic design.

In 1996, the W3C introduced Cascading Style Sheets (CSS) specifically to describe how HTML documents should be visually presented while leaving the structural markup clean and meaningful.

• A style sheet written in CSS can be applied to an HTML document, adding an attractive layer of design without negatively impacting the markup that serves as its foundation.
• The code that gives the content its structure is kept separate from the code describing its presentation.

Separating content from presentation allows both aspects to become stronger and more adaptable.

• An HTML document can be changed without completely reconstructing it to correct the design.
• An entire website can be redesigned by changing a single style sheet without rewriting one line of structural markup.

Evolution of CSS

CSS has changed and adapted over the years, adding new features at each step along the way.

• CSS level 1 debuted in 1996.
• CSS level 2 expanded on it in 1998.
• No current browser has fully implemented every last aspect of CSS 2.1.
• CSS level 3 is vastly more complicated than CSS1 or CSS2.
  • The first two versions of CSS were focused on relatively basic aspects of presentation: font sizes, spacing, drawing boxes, defining colors, positioning elements on the page, and so on.
  • CSS3 provides multi-column layouts, color gradients, embedded typefaces, rounded corners, border images, shadows, transitions, animations, and much more.
• The latest version is CSS 4.15 December 2020.

Modularization

Given the breadth and depth of CSS3, the specification was split apart into a number of modules, each focusing on one particular area.

• Modules like Fonts, Animations, Backgrounds and Borders, Color, Grid Layout, Speech – over 40 modules in all – can each be drafted and rolled out independently.
• As such, there isn’t really a single specification called "CSS level 3," and there may never be a time when the whole thing could be considered "completed."
• Its modular nature means a number of CSS3 features are already stable and well supported in modern web browsers.
• Browser Support of CSS Properties & Selectors