GD 65 Class 01B

Topics

  • Frontend versus Backend
  • The Web Design “Layer Cake”
  • HTML Basics
  • CSS Basics
  • Creating a web page using a Simple Text Editor

Frontend Versus Backend Development

You may hear web designers and developers say that they specialize in either the “frontend” or “backend” of website creation.

Frontend design

“Frontend” refers to any aspect of the design process that appears in or relates directly to the browser. Our textbook book focuses primarily on frontend web design. The following tasks are commonly considered to be frontend disciplines:

  • Graphic design
  • Interface design
  • Information design as it pertains to the user’s experience of the site
  • Site production, including HTML documents, style sheets and JavaScript

Backend development

“Backend” refers to the programs and scripts that work on the server behind the scenes to make web pages dynamic and interactive. In general, backend web development falls in the hands of experienced programmers, but it is good for all web designers to be familiar with backend functionality. The following tasks take place on the backend:

  • Information design as it pertains to how the information is organized on the server
  • Forms processing
  • Database programming
  • Content management systems
  • Other server-side web applications using Perl/CGI, PHP, ASP, JSP, Ruby on Rails, Java and other programming languages.

Web-related programming “languages” in order of increasing complexity:

Note: HTML/CSS aren’t really “languages” per se.

  1. HTML/HTML5
  2. Style sheets (CSS)
  3. JavaScript/DOM scripting
  4. Server-side scripting
  5. XML
  6. Java

The Web Design “Layer Cake”

Contemporary web design is commonly visualized as being made up of three separate “layers.”

  1. The content of the document with its HTML markup makes up the Structure Layer. It forms the foundation upon which the other layers may be applied.
  2. Once the structure of the document is in place, you can add style sheet information (CSS) to control how the content should appear. This is called the Presentation Layer.
  3. Finally, the Behavior Layer includes the scripts (for example, JavaScript) that make the page an interactive experience.

HTML Basics

Figure 1 shows the anatomy of a typical HTML element.

typical_html

Figure: Anatomy of an HTML element.

Tags

An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

What the heck is a “div”?

The <div> tag defines a division or a section in an HTML document. The <div> tag is often used to group elements to format them with styles. With divs you’ll be able to create one-column, two-column and three-column layouts. These layouts are the beginning structure for most page layouts.

<head> & <body> sections

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including text markup, links to websites, links for images, and links to other pages.


Basic HTML

A simple example of a web page

VIDEO: The Basics of HTML


CSS Basics

The Anatomy of a CSS Rule


Basic CSS

A simple example of a CSS style for a webpage

VIDEO: The Basics of CSS

Creating a web page using a Simple Text Editor

Creating a new document in Notepad (Windows users) (See page 51 in our textbook)

These are the steps to creating a new document in Notepad on Windows 7:

  1. Open the Start menu and navigate to Notepad (in Accessories).
  2. Click on Notepad to open a new document window, and you’re ready to start typing.
  3. Next, we’ll make the extensions visible. This step is not required to make HTML documents, but it will help make the file types clearer at a glance. Select “Folder Options…” from the Tools menu and select the View tab. Find “Hide extensions for known file types” and uncheck that option. Click OK to save the preference, and the file extensions will now be visible.

Creating a new document in TextEdit (Macintosh users) (See page 52 in our textbook)

By default, TextEdit creates “rich text” documents, that is, documents that have hidden style formatting instructions for making text bold, setting font size, and so on. You can tell that TextEdit is in rich text mode when it has a formatting toolbar at the top of the window (plain text mode does not). HTML documents need to be plain text documents, so we’ll need to change the Format.

  1. Use the Finder to look in the Applications folder for TextEdit. When you’ve found it, double-click the name or icon to launch the application.
  2. TextEdit opens a new document. The text-formatting menu at the top shows that you are in Rich Text mode. Here’s how you change it.
  3. Open the Preferences dialog box from the TextEdit menu.
  4. There are three settings you need to adjust: On the “New Document” tab, select “Plain text”. On the “Open and Save” tab, select “Ignore rich text commands in HTML files” and turn off “Append ‘.txt’ extensions to plain text files”.
  5. When you are done, click the red button in the top-left corner.
  6. When you create a new document, the formatting menu will no longer be there and you can save your text as an HTML document. You can always convert a document back to rich text by selecting Format ➝ Make Rich Text when you are not using TextEdit for HTML.

Leave a comment