Web development tasks can be largely categorized into two parts:
With the tasks becoming more granular, the following model is relevant as well:
Regardless of the scale or the complexity, all websites share the core architecture or logic. Refer to the appendix below to see the examples.
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:
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.
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.
<a href="{DESTINATION}">My website link</a>
<img src="{IMAGEPATH}" alt="{ALTTEXT}" />
<h1>First heading</h1>
<link href="{CSSPATH}" rel="stylesheet" >
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:
<a href="#" style="font-size:12px">Hello world</a>
<style>body { color: red }</style>
<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.
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 selectorcolor
and text-align
are propertiesred
and center
are valuesSelectors are used to target HTML elements, and there are three different ways to select one or more HTML elements:
You can simply use the HTML element name to affect all instances of that element. Examples include:
p
img
table
h1
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)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)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-color
background-image
background-position
background-repeat
color
letter-spacing
line-height
text-align
text-transform
font-size
font-family
font-style
font-weight