Now you can bring everything together to build a small, complete web page. A good page combines a clear HTML structure with a linked CSS file for style. Planning the structure first makes the work much smoother.
Start with the skeleton
Begin with the HTML5 skeleton: the DOCTYPE line, then <html>, <head> and <body>. In the head, add a <title> and a <link> to your stylesheet.
<!DOCTYPE html>
<html>
<head>
<title>My Cafe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>Use semantic sections
Inside the body, use meaningful tags to describe the parts of the page. <header> holds the top area and title, <nav> holds the menu links, <main> holds the main content, and <footer> holds the bottom area. These semantic tags make the page clearer than using only <div>.
<header>
<h1>My Cafe</h1>
</header>
<main>
<p>Welcome to our cafe.</p>
</main>Add content, then style
Fill the sections with headings, paragraphs, images and lists. Once the structure is right, open your CSS file and style it: set fonts and colours, add padding for breathing room, and use flexbox in the nav to lay out the links in a row.
Test in the browser
Save both files in the same folder and open the .html file in a browser. Change something small, save, and refresh to see the result. Building step by step and checking often is the best way to learn.
Remember
- Start with the HTML5 skeleton and link your CSS.
- Use semantic tags like header, nav, main and footer.
- Build the structure first, then add style.
- Save, open in a browser, and refresh to test.