2. Lesson 1
Building Your First Web Page
Before we begin our journey to learn how to build
websites with HTML and CSS, it is important to
understand the differences between the two
languages, the syntax of each language, and some
common terminology.
3. What Are HTML & CSS?
ď‚› HTML, HyperText Markup Language, gives content
structure and meaning by defining that content as,
for example, headings, paragraphs, or images.
ď‚› CSS, or Cascading Style Sheets, is a presentation
language created to style the appearance of
content—using, for example, fonts or colors.
ď‚› As a rule, HTML will always represent content, and
CSS will always represent the appearance of that
content.
ď‚› With this understanding of the difference between
HTML and CSS, let’s dive into HTML in more detail.
4. Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>
5. Understanding Common HTML Terms
ď‚› Elements
ď‚› Elements are designators that define the structure
and content of objects within a page. Some of the
more frequently used elements include multiple
levels of headings and paragraphs, the list goes
on to include the <a>, <div>, <span>, <strong>,
and <em>elements, and many more.
ď‚› Elements are identified by the use of less-than and
greater-than angle brackets, < >, surrounding the
element name.
6. Tags and Attributes
ď‚› An opening tag marks the beginning of an element. It consists of a
less-than sign followed by an element’s name, and then ends with
a greater-than sign; for example,<div>.
ď‚› A closing tag marks the end of an element. It consists of a less-than
sign followed by a forward slash and the element’s name, and
then ends with a greater-than sign; for example, </div>.
ď‚› The content that falls between the opening and closing tags is the
content of that element.
ď‚› Attributes are properties used to provide additional information
about an element.
 Attributes are defined within the opening tag, after an element’s
name. Generally attributes include a name and a value. The
format for these attributes consists of the attribute name followed
by an equals sign and then a quoted attribute value. For example,
an <a> element including an href attribute would look like the
following:
<a href=“http://www.google.com”> Google </a>
8. Setting Up the HTML Document Structure
ď‚› HTML documents are plain text documents saved with an .html file
extension rather than a .txt file extension. To begin writing HTML,
you first need a plain text editor that you are comfortable using.
ď‚› All HTML documents have a required structure that includes the
following declaration and elements: <!DOCTYPE
html>, <html>, <head>, and <body>.
ď‚› Inside the <html> element, the <head> element identifies the top
of the document, including any metadata (accompanying
information about the page). The content inside
the <head> element is not displayed on the web page itself.
Instead, it may include the document title (which is displayed on
the title bar in the browser window), links to any external files, or
any other beneficial metadata.
ď‚› All of the visible content within the web page will fall within
the <body> element.
11. Classification of items: Write F if Formatting
tags, H for heading tags, S structural tags, and
SC to a separator/container tags.
1. <div> SC
2. <h1> H
3. <head> H
4. <strong> F
5. <p> S
6. <html> H
7. <hr> SC
8. <enter> S
9. <h3> H
10. <em> F
