HTML Beginners Guide

HTML Beginners Guide

Learn the fundamentals of HTML to start building your own websites.

Get Started

Understanding HTML Basics

By Ryan Kopf, University of Iowa Computer Science
Last Updated May 11, 2024

HTML (HyperText Markup Language) is the backbone of the web. It's used to create the structural layer of websites, allowing you to define elements like headings, paragraphs, links, images, and more. This guide will introduce you to the basics of HTML, helping you to begin crafting your own websites.

What is HTML?

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or behave in a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, among other things.

Basic Structure of an HTML Document

Every HTML document begins with a declaration that defines the version of HTML. The document itself consists of a <head> section, where you include meta information and links to scripts and stylesheets, and a <body> section, where all the visible content of your page resides.

Creating Your First HTML Page

To start, you'll need a simple text editor. From there, you can create a new file, save it with a .html extension, and begin writing HTML. Start with a basic template that includes the doctype, and add elements like <h1> for headings, <p> for paragraphs, and <a> for links.

Essential HTML Tags

  • <h1>-<h6>: These are heading tags, with <h1> being the most important, and <h6> the least.
  • <p>: Represents a paragraph.
  • <a>: Stands for "anchor" used to create links, which are essential for navigating between web pages.
  • <img>: Used to embed images in your webpage.

Once you understand these tags, you can create a basic webpage. For detailed examples and more advanced features, consider visiting our complete guide on using Raven's templating features.

Where to Publish Your HTML Files

After creating your HTML files, you'll need a place to publish them so they can be accessed on the internet. For insights on where to publish, check out our article on where to publish personal HTML files.

So You've Published Your Files, Now What?

Congratulations on publishing your HTML files! While it's great to see your work online, you might notice that your pages look quite plain. This is where CSS (Cascading Style Sheets) comes into play. CSS is a stylesheet language used to describe the presentation of a document written in HTML. It allows you to control the layout, colors, fonts, and overall visual appearance of your website, transforming your simple HTML into a beautifully designed page.

To get started with CSS, you can link a stylesheet to your HTML using the <link> element in the head section of your document. Here's a basic example:

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

Inside the "styles.css" file, you could define some basic styles. For instance, setting the background color of your page, changing font types, or aligning text can make a significant impact:

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    color: #026466;
    text-align: center;
}

By adding CSS to your web pages, you enhance user experience, improve usability, and make your site visually appealing. If you're new to CSS, plenty of resources and tutorials are available online to help you start styling your pages. You can find some great CSS courses on YouTube to start with.

Finding Affordable Hosting

Hosting your website doesn't have to be expensive. For recommendations on affordable hosting solutions, see our article on the cheapest places for website hosting.

Begin Your Web Development Journey

Start learning HTML today and build the foundation of your web development skills.

Get Started