HTML - Introduction to HTML Web Development

Choose your HTML editor by exploring free options like Notepad, TextEdit, Notepad++, Brackets, and Atom, and learn features such as color coding, indentation, and syntax checking.

Set up a clean root folder to organize your html project, creating subfolders for pages, css, javascript, images, and media to keep links internal and easy to upload.

View page source to see how real webpages are generated, including HTML elements like doctype, html, head, and body, plus CSS and JavaScript that render in browsers.

Explore common HTML tags and how they structure a page, including the head and body, p, a, header tags (h1–h3), and divs with tables, CSS, and JavaScript.

Learn to add a browser favicon by using a head link tag with rel='shortcut icon' and href to the favicon.ico in your images folder, downloaded from resources.

Master structuring text in HTML by using the paragraph tag (p) to create margins and proper white space, replacing breaks with meaningful paragraphs for clear, accessible pages.

Demonstrate how to structure web content with HTML heading tags from H1 to H6, using H1 for the main topic and H2-H6 for subtopics to create hierarchy.

Download the heading tags HTML file, save it to your pages folder, edit with an HTML editor to apply p and heading tags, and preview the structure in a browser.

Learn how to insert images into an HTML document using the img tag, specify the src path relative to the page, and organize assets in an images folder.

Explore the HTML image tag width and height attributes and learn how specifying them reserves space and preserves layout while using the actual image size for performance.

Learn to reference images and files across folders using relative references, including same folder, subfolders, parent directories, and nested folders, with practical examples.

Learn how to create lists in HTML using ul and li for unordered lists, and ol for ordered lists, with items, open and close tags, and options for start symbols.

Create an unordered list and an ordered list on the HTML page using the supplied exercise file, placing them between the two table cells.

Create text-based links in HTML using the anchor tag and href to navigate between index and related pages, such as HTML tags, images, headings, and lists, in a pages folder.

Learn to create text and image links using the a tag and href, wrap images to become hyperlinks, and configure image attributes for accessible, clickable navigation.

Learn to use the target attribute on the a tag to open external links in a new tab (_blank), keeping your site open while users visit other resources.

Learn to create mailto links in HTML that turn text into clickable email links, launching the default mail client with a pre-addressed recipient.

Create anchor links and bookmarks in HTML by adding an id attribute to a location and linking to it with an href that uses a hash.

Learn to format HTML links with CSS by moving from inline styles to head styles, styling anchor states like link, visited, and hover across the document.

Explore real-world html table examples from NHL.com and worldometers.info, learn to structure data with table, tr, and td including header rows, and inspect elements to understand markup.

Create a basic HTML table using table, tr, and td, populate two columns with header one and header two, and preview the result in the browser.

Explore how the HTML form tag structures user input, using name, action, and method attributes, and compare post versus get methods for submitting data to a server.

Create the first input control in a form using an input tag with type text to collect the user's name. Learn why text boxes differ from text areas.

Learn to create a label that connects to a text input via the for attribute and input id, assign a name, and enable clicking the label to activate the control.

Add email and subject labels with corresponding text inputs to the form, linking labels to inputs via attributes so clicks activate the fields.

Add a submit input to the HTML form and customize its text with the value attribute; demonstrate get vs post methods and how data appears in the URL.