ckportfolio.com - Web Development: HTML and CSS

Web Development: HTML and CSS

Tasks in Web Development

Web development tasks can be largely categorized into two parts:

  • Front-end: What is shown to the user? How can the user interact?
  • Back-end: What hidden processes are taking place?

With the tasks becoming more granular, the following model is relevant as well:

  • Client-side: What is the user seeing? How is the user interacting?
  • Server-side: What information is being requested and served?
  • Database: What information is being saved and accessed?

Regardless of the scale or the complexity, all websites share the core architecture or logic. Refer to the appendix below to see the examples.


HTML

As one of the earliest technologies used to create websites, HTML (HyperText Markup Language) is a simply text file with special declarations and tags. This technology is responsible for dictating what elements appear in the page.

<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <meta name="description" content="Free Web tutorials on HTML and CSS">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/
        1.6.4/jquery.min.js"></script>
    </head>
    <body>
        <img src="image.jpg" />
        <h1>Lorem ipsum</h1>
        <p>My first paragraph.</p>
        <p>My <a href="http://google.com">second paragraph.</a></p>
    </body>
</html>

Despite the complex exterior, note that the code is plain text file. Unlike Photoshop or Illustrator files, a developer can build a website using any basic text editor.

Note that a typical HTML page consists of two main parts:

<body> tag

Whatever that is placed in this section is shown (by default) to the users, unless CSS is used to override this. Elements placed in this section include text objects, hyperlinks, images, and tables.

<head> tag

This section contains metadata (necessary for SEO) as well as linkage to other documents. While elements in this section do not display to the user, they perform as the "thinking" portion of your code.

Examples

Hyperlink

<a href="{DESTINATION}">My website link</a>

Images

<img src="{IMAGEPATH}" alt="{ALTTEXT}" />

First headings

<h1>First heading</h1>

CSS link

<link href="{CSSPATH}" rel="stylesheet" >


CSS

First introduced in 1994, CSS (Cascading Style Sheet) allows the developer to describe the presentation style of individual elements in the HTML document. There are three ways to implement this technology in HTML:

Inline style

<a href="#" style="font-size:12px">Hello world</a>

Declarations in <head>

<style>body { color: red }</style>

External file (preferred)

<link rel="stylesheet" type="text/css" href="style.css">

It is best to keep all CSS code in a separate file, and simply make a connection between two files.

Syntax

Each CSS snippet consists of three basic parts: selector, property, and value.

p
{
    color:red;
    text-align:center;
}

Based on the above example:

  • p is selector
  • color and text-align are properties
  • red and center are values

Selectors are used to target HTML elements, and there are three different ways to select one or more HTML elements:

General: HTML element

You can simply use the HTML element name to affect all instances of that element. Examples include:

  • p
  • img
  • table
  • h1

Group of elements - class name

If you would like to select a specific group of elements (ex. a select group of images), you can attach a "class" to HTML elements and select using the following selector:

  • .portfolio_thumbnail (period followed by class name)

Single, unique element - ID attribute

Should there be a single, unique element (ex. logo image), you can assign an "ID" to a specific element and select using the following:

  • #header (hashtag followed by identifier)

Sample CSS properties

There are more than 100 CSS properties that are available to web developers. Today's web development tools offer autocomplete features, and online resources offer a complete list of available CSS properties. Below is a partial list of frequently used properties.

Background

  • background-color
  • background-image
  • background-position
  • background-repeat

Text

  • color
  • letter-spacing
  • line-height
  • text-align
  • text-transform

Font

  • font-size
  • font-family
  • font-style
  • font-weight

Appendix: Website Desconstruction

Facebook

Server-side

  • Posting user’s status update to the database
  • Parsing the latest news from friends
  • Pulling relevant ads based on user’s activities

Database

  • User information
  • List of friends
  • Advertisements

Client-side

  • Blue-indigo template
  • Placement of text, images, and hyperlinks
  • Object animation and interactivity

Google

Server-side

  • Making requests to the server based on user query
  • Pulling relevant sponsored ads to the front

Database

  • User search history
  • Website relevance
  • Metadata

Client-side

  • Simple layout, complete with logo, input field, and buttons
  • Search results template
  • Object animation
  • Autocomplete, preview, etc.

Vogue

Server-side

  • Searching for articles based on user query
  • Receiving newsletter signups

Database

  • Article information and versions
  • Users: editors, contributors, admins
  • Metadata

Client-side

  • Page layout
  • Iconic typography
  • Placement of image, title text, and body text
Fin