CS 100 (Learn) — CS 100 (Web) — Module 07
In this section we are going to create our first HTML file together.
Open up your text editor, and type out the following text exactly (you can cut & paste), and then save it as hello.html.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
Hello, World!
</body>
</html>
As you might have guessed, this is an HTML file. It may look a little scary, but we will explain everything shortly.
You should be able to view the file in your web browser.
If you try to launch your hello.html file (for example, by "double-clicking" the file) it will most likely launch your web browser and display the Hello, World! message. Alternatively, you can try drag & dropping the file into an open web browser.
.html files are most likely associated with your web browser, so when you launch an .html file your web browser will open the file. Because of this, to edit (modify) an .html file, you will have to open it from within your text editor.
As we have seen, the web browser does not display the HTML directly. For example, the tags are not displayed.
In many ways, a web browser can be thought of as an "interpreter" or a "publisher". Web browsers read and interpret HTML and then display (or render) the content according to the "rules" (or specification) of HTML.
Try uploading the file to your personal web space as you did in a previous assignment (consult that assignment for further instructions).
If you upload the file correctly, you will be able to view your file by visiting it at your web page:
https://www.student.cs.uwaterloo.ca/~USERNAME/hello.html
Of course, replace USERNAME with your own username.
If you're especially proud of yourself, you can send this link to your friends or family to show off your first web page.
The <!DOCTYPE html> at the top of the file communicates to a web browser that what follows is an HTML document.
Strictly speaking, !DOCTYPE is not an HTML tag (or element), but part of a larger standard that can be used to identify different markup languages. The !DOCTYPE should be in uppercase.
As HTML and other languages evolve, web pages can become outdated, so the !DOCTYPE is also a way to specify the version of the language used in the document to ensure a web browser displays the information properly.
In this course, we simply start every HTML document with <!DOCTYPE html>, which corresponds to the current (most recent) version of HTML known as HTML5.
<html> tagAn HTML document is enclosed within <html> tags.
Every HTML element has an optional attribute for specifying the language of the element. This is considered very good practice and can help web browsers and search engines interpret your document.
If the entire document is in one language (which is usually the case) then it is best to add the attribute to the opening <html> tag.
<html lang="en">
An HTML document consists of two core elements: the <head> and the <body>.
<head> tagThe header (<head>) section specifies additional information about the document, but does not specify the content of the document itself (which is in the <body>).
Note that an HTML header (<head>) section is quite different than a "header" in a Word or Excel document, which is often used to place information (such as a page number) at the top of each page.
For now, the only tag in the header we are interested in is the title (<title>) tag, which specifies how the title of the web page will be displayed in the title bar of a browser window.
<title>Hello</title>
Note that in the web browser pictured above, the text on the tab says "Hello". This text was obtained from the <title> tag.
Try the following with your hello.html:
<title> elementYou should see the change. If you do not see a change, then make sure you are viewing the file that you modified.
<body> tagFinally, the main content of the web page is contained within the <body> element.
For this course, all of your HTML documents should contain the !DOCTYPE and the four HTML tags used in hello.html above: <html>, <head>, <title>, <body>.