0412 899 672

14 May 2011

Web Page Languages for Beginners


What is a Web Page?

A web page is simply a text file ‘marked up’ with (X)HTML code. (X)HTML forms the basis of all web pages and provides structure and content information to a browser i.e. The code tells the browser where to place headings, body text, images etc.

Web pages are styled using Cascading Style Sheets (CSS). Interactivity and effects (behaviours) can be created with JavaScript. Dreamweaver automatically writes (X)HTML, CSS and JavaScript code for you when working inside a web page.

Content vs. Styling

Content refers to the structural elements placed in a page. Examples:
<h1>  level one heading  </h1>
<p>  paragraph text  </p>
<table>  table  </table>

Style refers to the way those elements are formatted and to the page layout itself. Examples:
h1 {font-size:2em; color:#333;}
p {line-height:1.3em; padding-top:12px;}
table {border:solid 1px #000;}

Content, styling and behaviour code should be defined in separate files. The (X)HTML file references the CSS and JavaScript files so the browser knows where to find them.

Content Mark-up Languages

HTML is the original web mark-up language. It has traditionally been used to describe the content and formatting of web pages.

XML is a stricter but much more powerful language which can be used to create other mark-up languages and program interfaces. XML coding is beyond the scope of this course. What is important to note, is that XHTML (the current specification of HTML) follows the rules of XML.

XHTML is a combination of the above 2 mark-up languages HTML and XML. It combines HTML tags with XML’s structure and rules. It is the current standard for defining content in web pages. XHTML provides the power of XML with the flexibility of HTML and produces cleaner code that renders more reliably and faster in browsers.

What is CSS?

CSS (Cascading Style Sheets) are used to style the content of web pages. CSS is a completely different language to (X)HTML and has its own rules, syntax (structure) and terminology.

In the past, CSS was used only to format individual page elements e.g. paragraph text headings etc. However, in the last few years it has come to be used not only for styling individual page elements, but also to lay out entire pages.

As all the pages in a site can be linked to one external style sheet file, changes made in a style sheet can affect the entire site. This is in contrast to HTML formatting which styles individual instances of elements in individual pages.

CSS allows greater formatting precision and design flexibility than HTML formatting. Web pages styled with CSS are quicker to update and load more quickly.

What is JavaScript?

JavaScript is a scripting language that is used to create interactivity on a page e.g. rollover buttons, pop up windows, drop down menus etc. It should not be confused with Java or JScript which are different languages again.

Viewing Code in a Browser

The XHTML code for any web page can be viewed within a web browser.

  1. Launch a web browser such as Internet Explorer or Firefox.
  2. Navigate to a page.
  3. Select View menu > Source / Page Source.

Code Versions

There is considerable overlap between the technologies including different versions of the languages as well as variations or ‘flavours’ within those versions.

XHTML 1.1 is the latest content specification. The latest release of CSS is CSS3. HTML5 is currently in beta. It’s wide spread use and support by browsers is not expected for at least 5 years.
HTML 4 is still being used to create email newsletters (EDM’s).

What is the W3C?

The W3C is the organisation responsible for defining the specifications for *non-proprietary web code, including those mentioned above.* Non-proprietary: not protected by trademark or patent or copyright; non proprietary products are in the public domain and anyone can produce or distribute them

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.