Browsers
Which Web browser do you prefer to use? A Web browser is a program on a computer that displays Web pages and allows the user to browse the Web easily. You may be familiar with Internet Explorer, Google Chrome, Safari, Firefox, or Opera. These are all Web browsers. They provide handy features such as placing Web pages in multiple tabs for easy viewing, saving favorite Web sites, and easily navigating backward through your history.
URLs
To get started with a Web browser, we often set up a homepage at a search engine such as Google or Yahoo! in order to make browsing even easier. Other times, one begins browsing the Web by typing in a specific Web address. These addresses are called Uniform Resource Locators, or URLs, and every Web site has one. This URL may be in the form of an IP address (a set of numbers separated by periods) or a domain name (e.g. www.somewebsite.com). Additionally, specific Web pages may have an extra path or filename which is added to the IP/domain with a forward slash ( / ). For example, www.somewebsite.com/path/filename.html.
Request-Response Pattern
Whenever you type in an address, click on a hyperlink, or submit a form, your Web browser (also called a "client") makes a request that is sent out into the Internet cloud. This request includes information about the Web page you are trying to reach and the computer you are using. When the server that holds the page receives the request, it sends a response back to your computer. This response will be the Web page that you requested, or it will be a message about how the server could not find, create, or deliver the page you requested.
Pages v. Sites
A page is a web document accessible by a URL. This page might be constructed from many files, but it looks like 1 complete document to the user who visits the URL. Compare an individual page to a whole web site, which is a collection of related pages. They are often linked together with one common navigation menu. A site may be collected under one domain, sub-domain, or folder.
Viewing the Code of a Web Page
As a Web developer, it will be extremely helpful to quickly view the source code of Web pages from a browser. This means looking at the HTML and/or other code that was delivered to your browser in the response from the server. Each browser may do this as little differently. In Internet Explorer, right-click on the Web page and select "View Source" from the context menu. In Google Chrome, either right-click on the Web page and select "View Page Source" or press Ctrl+U. In other browsers, you may have to search for this feature or explore the browser's Help Documentation.
Modern browsers also have development tools which allow you to see the real-time hierarchical structure of the HTML by inspecting the elements of the page. Right-click on any element of the page and choose the "Inspect" option to examine the code as the browser has understood it, rather than how it was delivered by the server. A well-coded web site will not have much difference between how the code was delivered versus how the code was understood by the browser.
HTML and CSS
The acronymn HTML stands for HyperText Markup Language. The word HyperText implies that it is used for text-based content with hyperlinks to connect resources in a logical way. The term Markup Language implies that you use this code to "mark up" or add syntax to your content in order to give it more features than simply being a text document.
The primary purpose of HTML is to organize your content in a way that is meaningful for your audience, including human visitors, search engines, and even the browser itself. For example, there are 6 levels of headings that can be used to title your content in a hierarchical way. As another example, listed data can be put into two different kinds of list structures: an unordered (bulleted) list or an ordered (numbered) list.
The acronymn CSS stands for Cascading Style Sheets. In a future lesson we will learn more about the "cascade" but for now we will focus on the style sheets themselves.
The primary purpose of CSS is to format your content for your human visitors. This is where most of the work will be when we convert designs into sites. This is accomplished using CSS properties which have adjustable values, such as font-size.
Together, HTML and CSS are read by the web browser to render the visual representation of what you see when you open a web page in a web browser.
Basic Principles of Web Design
Users of web pages always need to be able to do these two things: get information and navigate. Thus, the two core principles of web design are readability and usability.
The concept of readability is all about making it easy for users to get information. The information must be organized and formatted clearly. Properties like contrast, size, and whitespace can all contribute to readability.
The concept of usability is all about making it easy for users to perform tasks like navigate, submit forms, and search. The ideas for making a website more usable are endless, but you might want to start by focusing on navigation, styling hyperlinks in consistent ways and limiting the number of clicks it takes to find information. There are also some design elements to avoid, such as obtrusive advertisements.
Good design has many additional elements, such as color schemes, layout, and graphics work. You will study these in more detail in future units of this course.