freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 1.2 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

How websites work: HTML, CSS, and JavaScript

Covered here

  • What happens when you type a website address
  • The job of HTML, CSS, and JavaScript
  • The house analogy for the three front-end languages
  • Which one to learn first and why

Short answer

A website is a set of files stored on a web server. When you visit it, your browser requests those files and builds the page. HTML gives the page its structure, CSS controls how it looks, and JavaScript makes it interactive. These three are called front-end languages because they run in the browser, on the visitor's side.

What happens when you visit a website

  1. You type freecourses.digital in the address bar.
  2. DNS, the internet’s phone book, turns that domain name into an IP address of a server.
  3. Your browser sends an HTTP request to that web server.
  4. The server sends back an HTML file, plus CSS, JavaScript, and images.
  5. The browser renders everything into the page you see.

All of this happens in about one to two seconds on a good connection.

Three languages, three jobs

LanguageJobExample
HTMLStructure and meaningThis is a heading, this is a button
CSSStyle and layoutThe heading is blue, the button is rounded
JavaScriptBehaviorClicking the button opens a menu

Think of building a house. HTML is the frame: walls, rooms, doors. CSS is the paint, tiles, and furniture. JavaScript is the electricity: lights that switch on, a gate that opens.

See them working together

<button class="order">Order now</button>

<style>
  .order { background: green; color: white; }
</style>

<script>
  document.querySelector(".order").onclick = () => alert("Salamat!");
</script>

The HTML creates the button. The CSS paints it green. The JavaScript shows a message when someone clicks.

Front end vs back end

The front end is what runs in the visitor’s browser: HTML, CSS, JavaScript. The back end runs on the server: languages like PHP, Python, or Node.js, plus a database. WordPress, for example, uses PHP on the back end to generate HTML for the front end.

No matter which back end a site uses, the browser always receives HTML in the end. That is why HTML is the first skill to learn.

Try it: add style

The HTML is already here. Change the color value in the style block, for example from teal to crimson, and watch the heading change.

Live preview

Quick quiz

1. Which language controls how a page looks?
2. Which language adds interactivity like menus that open?
3. What does DNS do?
4. Which language does a browser always receive, even from a WordPress site?

Common mistakes

  • Styling with HTML tags. Old tags like <font> and <center> are obsolete. Use CSS for looks.
  • Starting with JavaScript frameworks. React and Vue are easier once you know plain HTML and CSS.
  • Mixing up front end and back end. HTML, CSS, and JavaScript run in the browser. PHP and databases run on the server.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Web server
A computer that stores website files and sends them to browsers.
Domain name
A readable website address, like freecourses.digital.
DNS
Domain Name System, which turns domain names into IP addresses.
HTTP request
The message a browser sends to ask a server for a file.
CSS
Cascading Style Sheets, the language for styling HTML.
JavaScript
The programming language that makes pages interactive.
Front end
The part of a website that runs in the visitor's browser.

Questions beginners ask

Should I learn HTML and CSS together?

Learn HTML first for a week or two, then add CSS. They work as a pair, but structure comes first.

Is WordPress HTML?

WordPress is a content management system written in PHP. It outputs HTML to the browser, and you can edit HTML in its block editor.

Do I need JavaScript for a simple website?

No. A business page with text, images, links, and a contact form works with HTML and CSS alone.

What is a static website?

A static website is a set of ready-made HTML files served as they are, without a database. It is fast and cheap to host.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.