Web browsers read HTML documents from web servers and display the contents written in the file. An HTML document is simply a text file with a .html extension (like index.html). Browsers read these files from top to bottom, displaying elements in the order they appear.
The basic building blocks of an HTML document are:
Let's start be creating a simple web page. To do this, follow these instructions:
Note: index.html is the default page that a web server will load if nothing is specified specified. So when you go to www.duncanpriebe.com, the web browser will render www.duncanpriebe.com/index.html.
Bring up the text editor and enter the following code into your HTML file:
Now save the file and refresh your web browser. If you've done it right, you'll see something like this:
Paragraph
The text with < and > symbols around it is called a tag, and it defines the type of element we're creating. Let's take a closer look at the code one line at a time:
| Code | Description |
|---|---|
| <!DOCTYPE html> | Tells the web browser that this is an HTML file |
| <html> | Indicate where the HTML code starts |
| <head> | Describes information about the document |
| <title>Page Title</title> | Defines the text that appears in the upper-left corner of the web browser |
| <body> | Signals the start of page content to be displayed |
| <h1>Heading</h1> | An example of a heading element |
| <p>Paragraph</p> | An example of a paragraph element |
| </body> | Signals the end of page content |
| </html> | Indicates where the HTML code ends |
Notice that there are two kinds of tags: ones with a / symbol and ones without. These are start and end tags, and anything between them becomes the content of that particular element.
The beginning and end tags of an element can be on the same line, as it is with <h1>Heading</h1>, or separated with many lines of text between the tags, as it is with <body></body>.
Also note that the text between the start and end body and html tags is indented. Indentation is a common practice in programming because it helps make code easier to read and reduces the chance of error.
Try playing around with the code between the body tags. You can also try inserting some of these elements:
| Tag | Description | Example |
|---|---|---|
| <h2></h2> | Text between these tags is displayed as a smaller heading | <h2>Smaller Heading</h2> |
| <b></b> | Text between these tags is bold | <b>Bold Text</b> |
| <i></i> | Text between these tags is italic | <i>Italic Text</i> |
| <br> | Creates empty space between elements | <br> |
| <hr> | Creates a horizontal line (rule) between elements | <hr> |
| <a href=""></a> | Text inside the " " symbols defines the URL of a hyperlink, and text between the tags is what is displayed | <a href="http://www.duncanpriebe.com">My Website</a> |
| <img src=""></img> | Text inside the " " symbols defines the URL of the image | <img src="image.jpg"></img> |
So now we know how to use tags to create elements. In addition to specifying the text to be displayed between the tags, we can also define attributes of the element. Although there are many more, the three attributes that are primarily used to modify elements are:
Let's take a closer look at the first two. Copy this code and place it between the body tags in your file:
If you save the file and refresh your browser, you should see this:
Paragraph One
Paragraph Two
There's nothing special about the appearance of the content, but these elements can now be identified by their id or class attributes. This is essential when we learn to customize elements with CSS or manipulate elements with JavaScript later on.
For now, just remember that an id attribute specifies a unique element (there should only be one element with that id), while the class attribute specifies the element to be of a certain type (there can be multiple elements with the same class, and one element can have multiple classes).
Now let's take a look at the div tag. A div tag is used to specify a division or section in an HTML document. As we'll see later on, this will allow us to customize and manipulate whole sections of code. Copy the following code and place it between the body tags of your file:
Before moving on, make sure you have a basic grasp of creating various HTML elements, especially div elements.