A web page starts with three files working together: HTML for structure, CSS for appearance, and JavaScript for interactivity

You do not need special software or coding experience to create a web page. A web page is simply a text file written in a language called HTML (HyperText Markup Language), styled with CSS (Cascading Style Sheets), and made interactive with JavaScript. Your browser reads these files and displays them as the page you see. You can write all three using nothing but a text editor — the same program you would use to write a plain text document.

The simplest web page contains only HTML. It will have no colors, no fonts, no buttons that do anything — just text and links. Adding CSS makes it look the way you want. Adding JavaScript makes it respond when someone clicks, types, or scrolls. You can build a complete, working page with just HTML and CSS. JavaScript is optional and comes later.

Key Takeaways

  • HTML is the skeleton of a web page — it holds the text, images, and links that make up the content.
  • CSS is the skin and clothes — it controls colors, fonts, spacing, and layout without changing the HTML itself.
  • You write both in a plain text editor like Notepad (Windows), TextEdit (Mac), or VS Code, then save the file with the correct extension (.html or .css).
  • A browser reads your HTML file and displays it as a web page; you can open your own file directly in a browser without uploading it to the internet.
  • The three files (HTML, CSS, and JavaScript) communicate through file names and references you write inside the HTML.

Setting up your text editor and first HTML file

Open a plain text editor. On Windows, use Notepad (search for "Notepad" in the Start menu). On Mac, use TextEdit, but you must change one setting first: open TextEdit, go to Format menu, and select "Make Plain Text". This prevents the editor from adding invisible formatting that will break your code.

Type this into your editor:

<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello World</h1> <p>This is my first web page.</p> </body> </html>

Save this file. Go to File → Save As. Name it index.html — the .html extension tells your computer this is a web page. Choose a folder you can find again, like your Desktop or Documents. Do not save it as a .txt file.

Now open your file in a browser. Find the file on your computer, right-click it, and select "Open with" → choose your browser (Chrome, Firefox, Safari, or Edge). The page will open and display "Hello World" as a heading and "This is my first web page" as regular text below it. You have just created and viewed a web page.

Understanding the parts of an HTML file

DOCTYPE tells the browser this is an HTML5 file (the current standard). Always put it on the first line.

The html tags wrap everything else. Everything between <html> and </html> is part of your page.

The head section (between <head> and </head>) contains information about the page that does not display on the page itself. The <title> tag sets the text that appears in the browser tab. You will also put CSS and JavaScript references here later.

The body section (between <body> and </body>) contains everything the visitor sees: headings, paragraphs, images, links, and buttons. The <h1> tag creates a large heading. The <p> tag creates a paragraph of regular text. There are also <h2>, <h3>, and smaller heading sizes for different levels of importance.

Adding content and structure with more HTML tags

HTML uses tags to label different types of content. A tag is a word surrounded by angle brackets: <tagname>. Most tags come in pairs — an opening tag and a closing tag (which has a slash). Everything between them is that type of content.

Here are the tags you will use most often:

  • <h1> through <h6> — headings, from largest to smallest
  • <p> — a paragraph of text
  • <a href="url"> — a link (the href attribute holds the web address or file name)
  • <img src="filename"> — an image (the src attribute holds the file name)
  • <ul> and <li> — an unordered (bulleted) list and list items
  • <ol> and <li> — an ordered (numbered) list and list items
  • <button> — a clickable button
  • <div> — a container to group other elements together

Try adding these to your page. Replace the content between <body> and </body> with:

<h1>My Website</h1> <p>Welcome to my page. Here are my favorite things:</p> <ul> <li>Reading</li> <li>Coding</li> <li>Coffee</li> </ul> <p><a href="https://www.example.com">Visit Example</a></p>

Save the file and refresh your browser (press F5 or Ctrl+R on Windows, Command+R on Mac). You will see the heading, paragraph, a bulleted list, and a clickable link. The link does not have to go to a real website — you can link to another HTML file you create by using its file name instead of a web address.

Styling your page with CSS

CSS controls how your page looks: colors, fonts, spacing, and layout. You can write CSS in two places: inside your HTML file (in the head section) or in a separate CSS file.

For your first page, write CSS inside the HTML file. Add this between <head> and </head>, after the <title> tag:

<style> body { background-color: lightblue; font-family: Arial, sans-serif; } h1 { color: darkblue; } a { color: red; } </style>

Save and refresh your browser. The background is now light blue, the heading is dark blue, and the link is red. The text uses Arial font instead of the default.

CSS works by selecting an HTML element (like h1 or a) and then setting properties (like color or font-family). Each property has a value (like darkblue or Arial). You can style any HTML tag this way. Common properties include background-color, color (text color), font-size, margin (space outside), and padding (space inside).

As your page grows, keeping CSS in a separate file becomes cleaner. Create a new file, name it style.css, and save it in the same folder as your HTML file. Move all the CSS code (everything between <style> and </style>, but not those tags themselves) into the CSS file. Then replace the <style> section in your HTML with this single line in the head:

<link rel="stylesheet" href="style.css">

Save both files and refresh. The page looks the same, but now your HTML and CSS are separate.

Making your page interactive with JavaScript

JavaScript makes your page respond to what the visitor does. A button can show a message, a form can check that someone typed their name, or clicking an image can make it bigger. JavaScript is optional — many pages work fine without it — but it adds interactivity.

Like CSS, you can write JavaScript inside your HTML file or in a separate file. For a first example, add this button to your HTML body:

<button onclick="alert('You clicked me!')">Click Me</button>

Save and refresh. Click the button. A popup message appears. The onclick attribute tells the browser what to do when someone clicks the button. The alert() function displays a popup with whatever text you put in the parentheses.

This is JavaScript in its simplest form. More complex interactivity — like a form that validates input, or a menu that opens and closes — requires writing JavaScript code in a separate file and linking it in your HTML head the same way you linked CSS. That is beyond a first page, but the principle is the same: write the code in a file, save it with the .js extension, and reference it from your HTML.

Uploading your page to the internet

Right now your page exists only on your computer. To make it visible to others on the internet, you need to upload it to a web server — a computer that runs all the time and is connected to the internet.

You can rent space on a web server from a hosting company. Popular options include Bluehost, GoDaddy, Namecheap, and Netlify. Most charge a monthly fee, though some offer free tiers for small projects. You upload your HTML, CSS, and JavaScript files using an FTP program (like FileZilla) or a control panel the hosting company provides.

When you upload, name your main page index.html. The server looks for this file by default when someone visits your domain. If you have other pages, name them something descriptive (about.html, contact.html) and link to them from index.html using the <a> tag.

You also need a domain name — the web address people type to visit your page. You can buy a domain from a registrar like Namecheap or GoDaddy, usually for $10 to $15 per year. Some hosting companies include a free domain with their plans.

Common mistakes and how to avoid them

The most common mistake is forgetting to save your file after making changes. Always save (Ctrl+S or Command+S) before refreshing your browser.

The second is misspelling tag names or forgetting closing tags. Every opening tag like <p> needs a closing tag like </p>. If you forget, the browser may display your page strangely. Use your text editor's search function to find matching pairs.

The third is file name mismatches. If you write <img src="photo.jpg"> but your image file is named Photo.jpg (capital P), the image will not load. File names are case-sensitive on most web servers. Use lowercase for all file names and avoid spaces — use hyphens instead (my-photo.jpg, not my photo.jpg).

The fourth is saving files with the wrong extension. Make sure your HTML files end in .html, CSS files end in .css, and JavaScript files end in .js. If you save an HTML file as .txt, the browser will not recognize it as a web page.

Frequently Asked Questions

Do I need to know programming to create a web page?

No. HTML is not a programming language — it is a markup language that labels content. You can create a complete, working page with just HTML and CSS, which are not programming. JavaScript is a programming language, but it is optional and only needed if you want interactivity.

Can I use Microsoft Word or Google Docs to write HTML?

No. Word and Docs add invisible formatting that breaks HTML code. You must use a plain text editor like Notepad, TextEdit (set to plain text), or VS Code. If you want a more advanced editor, VS Code is free and designed for writing code.

What is the difference between a web page and a website?

A web page is a single HTML file. A website is a collection of web pages linked together. Your index.html is one page; if you create about.html and contact.html and link them from index.html, you have a website.

How do I add a picture to my page?

Use the <img src="filename"> tag. Save your image file (jpg, png, or gif) in the same folder as your HTML file, then write <img src="myimage.jpg"> in your HTML body. The image will display on the page.

Can I see my page on my phone before uploading it to the internet?

Yes. Save your HTML file, then email it to yourself or transfer it to your phone. Open the file in your phone's browser. It will look the same as on your computer. This is a good way to test how your page looks on different screen sizes before uploading it.