Responsive Web Foundations / M1

Meet the browser

What you will learn

• Explain the different jobs of HTML and CSS.
• Create, save and reopen an HTML file.

A web page starts with a document. HTML describes its content and structure: this is a heading, this is a paragraph, this is a link. CSS adds presentation, such as colour, spacing and layout. The browser reads these files and draws the page. In this course you will write both languages. You do not need JavaScript to complete the pilot.

Create a folder named my-first-page. Open a plain-text code editor and create index.html inside it. Paste the example below, then save. Check the complete filename: index.html.txt is a text file, not the HTML file you intended. Open index.html in a browser. Keep the editor and browser available together.

The angle brackets identify HTML tags. <p> begins a paragraph and </p> ends it. The words between them are its content. Keep the closing tag paired with its opening tag. A line break in your editor usually does not create a new paragraph in the browser; use another paragraph element.

The visible page is not the same thing as its source. Changing the file in your editor does not necessarily update an already-open browser tab. Save the file and refresh the tab to see your change. If the old words remain, check that the file you edited is the same file shown in the browser address bar.

The example is intentionally plain. Browser defaults already make headings and paragraphs readable. We will add our own stylesheet in module 3. Your job now is to connect a small source change to a visible result.

Working example

The HTML shown here is the body fragment. The download includes the complete document.

<h1>My first web page</h1>
<p>I am learning how websites work.</p>

Open in browser editor

Download working example

Try a change

Change the heading to a name of your choice. Add a second paragraph describing something you would like to build. Save and refresh.

What you should observe

The page shows your new heading and two separate paragraphs. The wording changes; there is no need to choose fonts or colours yet.

Check your understanding

You saved the file, but the browser still shows the old heading. What would you check first?