- 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” 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
“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.
- Style sheets (CSS)
- Server-side scripting
The Web Design “Layer Cake”
Contemporary web design is commonly visualized as being made up of three separate “layers.”
- 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.
- 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.
Figure 1 shows the anatomy of a typical HTML element.
Figure: Anatomy of an HTML element.
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
A simple example of a web page
<p>Some text for a web page that demonstrates the basic
form of HTML in a web page.</p>
VIDEO: The Basics of HTML
The Anatomy of a CSS Rule
A simple example of a CSS style for a webpage
font-family: Arial, Helvetica, sans-serf;
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:
- Open the Start menu and navigate to Notepad (in Accessories).
- Click on Notepad to open a new document window, and you’re ready to start typing.
- 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.
- 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.
- 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.
- Open the Preferences dialog box from the TextEdit menu.
- 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”.
- When you are done, click the red button in the top-left corner.
- 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.