Learning web design (1)

From Wiki @ Karl Jones dot com
Jump to: navigation, search

This article introduces web design for the beginner.

What is web design?

Web design is the art and craft of making web pages.

The simple aspects of web design are very simple.

But web design is a very broad subject, encompassing several different languages and a wide range of associated skills.

For the complete beginner, knowing where to start can be difficult, and knowing what to do next more difficult.

This series of articles introduces fundamental principles for the beginner, in a step-by-step manner, with code samples and practical advice.

See Web design.

Web pages

The fundamental purpose of a web page is to display text.

See Web page.

Text

Text is written language. Working with text is a primary task web design.

In this content, "text" sometimes means "text content", in order to distinguish this text from other text, such as markup languages.

See Text.

Text files

Text is commonly stored in text files.

Text files often have the .txt filename extension, although many other file extensions also represent text files, while some text files have no file extension.

See Text file.

Text editors

A text editor is a computer program which allows the user to edit text files.

See Text editor.

Markup languages

A markup language is a writing system which adds meaning to text content.

See Markup language.

HTML

HTML is a well-known markup language, widely used on the World Wide Web.

See HTML and HTML5.

HTML elements

HTML elements are the vocabulary of the HTML.

Learning HTML means learning the important HTML elements, and how to use them.

See HTML element.

HTML tags

In a web page, HTML tags represent HTML elements.

Some tags work in pairs:

  • Opening (start) tag
  • Closing (end) tag

These tags can act as containers. Content between the two tags is said to be contained by the two tags.

Other tags work alone. These are known as empty tags.

See HTML tag.

Simple web page

The code below demonstrates a simple web page using HTML5: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Simple HTML5 page</title>
 </head>
 <body>
  <main>
   <h1>Simple web page</h1>
   <p>This is a simple web page.</p>
  </main>
 </body>
</html>

Document Declaration

The Document Declaration ("doctype") is not an HTML element. It declares the type of document.

The doctype for HTML5 is: 

<!DOCTYPE html>

html element

The html element is a container for the head element and the body element. 

<html> ... </html>

head element

The head element contains metadata about the document: 

<head> ... </head>

See header (HTML element). Not to be confused with the header element.

meta element

Meta elements specify metadata -- in this case, character set: 

<meta charset="utf-8" />

The title element must be inside the head element.

title element

Title element: 

<title>Home page - Example Site</title>

The title element must be inside the head element.

body element

The body element is a container for all page content: 

<body> ... </body>

All visible content must appear inside the body element. (The body element can also contain hidden or invisible content, such as scripts, as well.)

main element

The main element contains the main content for the page. 

<main> ... </main>

h1 element

The header 1 element indicates that the enclosed text is top-level header information: 

<h1>Simple web page</h1>

p element

The paragraph element encloses a unit of text information, just as it does in ordinary writing: 

<p>This is a simple web page.</p>

Learning web design (2)

See Learning web design (2) for further discussion of HTML elements.

See also

External links

Retrieved from "http://wiki.karljones.com/index.php?title=Learning_web_design_(1)&oldid=19828"