The previous section demonstrates how to create a simple web
page. If you haven’t saved this example on your computer as
simple.php, do so
<html> <head> <title>A Simple Webpage</title> </head> <body> This is a simple webpage. </body> </html>
If you view
your browser, you will see the words “This is a simple
webpage” on a white or grey background. Where did everything
else go? And what are those words with the angle brackets,
A Brief Introduction to Elements
The web page
uses these elements:
Elements are delineated by angle brackets (
- Elements are “invisible”; they don’t directly appear in the web page. Instead, they serve as instructions to your browser. They can change your text’s appearance, create a link, insert an image, and much more.
An element starts with an
opening tag (
<element>) and ends with a closing tag (
</element>). Some elements do not require closing tags.
We’ll discuss the general properties of elements in some detail in “Elements”. For now, let’s focus on the particular elements in the “Simple Webpage” example.
Structure of the Simple Webpage
Although the “Simple Webpage” doesn’t look like much, its
body) are fundamental to the structure of
all HTML documents. Here’s what these elements mean:
<html>: “Here begins an HTML document.”
htmlelement helps identify a file as an HTML document.
<head>: “Here begins the header.”
The header contains elements that apply to the overall document. For example, it might contain elements that are designed for search engines to process or elements that change the overall appearance of the webpage. However, elements in the header do not display directly as normal webpage content.
The reasons you would be concerned about the header are a bit abstract at this stage, so we won’t worry about it much until later.
<title>: “Here begins the document title.” (Must be in the header)
If you view the file
simple.phpin your browser, along the top of your browser window you should see the words, “A Simple Webpage”. These words appear because of the
As an exercise, change the title of the
simple.phpl webpage to, “My First Webpage”. Save your changes and view them by clicking the browser’s Refresh or Reload button.
Titles might not seem important at first glance, but they’re actually quite useful. For example, if a search engine displays your page in a list of search results, it will probably display the
titleas your page’s title. If you omit the
titleelement, the search engine will make up one for you. This is Not a Good Thing.
You might have noticed that the
titleelement is contained within the
headelement. Is this kosher? Absolutely! In fact, many elements are designed to contain other elements, and you will be nesting elements within other elements quite frequently as you continue.
<body>: “Here begins the body.”
The body is where you put text and elements to be displayed in the main browser window. The reason that the words “This is a simple webpage” appear when you display
simple.phpis because you placed them in the
So why do we only see “This is a simple webpage” when we
simple.php in a
browser? The answer is, after you remove all the elements
that are not designed to display in the browser window, the
sentence “This is a simple webpage” is the only thing left.
In the next section, we’ll tinker with our example webpage, just to see what happens. After that, we’ll provide a more formal definition of elements and element properties.