Learning web design (1)
This article introduces web design for the beginner.
Contents
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.
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.
