Webpage Basics – HTML & CSS

HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a webpage using tags.

HTML documents need three tags: html, head, and body. Here is the code to create a simple webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Simple Website</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

You can open an html file with the simple website code. Save a plaintext file as simple.html

View the simple website.

simple html site — A simple website displayed in the browser.

CSS

Cascading Style Sheets (CSS) describe how HTML elements are to be displayed on screen. It can control the layout of multiple web pages all at once.

We can add CSS styles in a separate document, in a style tag in the html head, or inline on an html tag.

Here is an example of some simple CSS rules:


body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    width: 600px;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

CSS rules apply to specific parts, tags, ID's, and classes. For example, the rules under body are contained within {} curly braces. Those rules do the following:

Set the display font for the entire webpage
Adjust the margin on the top of the page to zero and automatically adjust the left & right margins. This will center the page on the browser.
Set the width to be 600px

The rule under the h1 tag changes the color of the text for all heading 1 elements. The for all paragraphs (p).

View the simple website with CSS.