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.

Launch notepad on Windows to quickly write HTML, search the start menu for notepad, and begin exploring basic HTML coding in a simple, free editor.

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.

Explore how to control HTML tags by adding attributes, such as href on the anchor tag, to define hyperlinks and influence how content displays.

Create a basic HTML5 page by using doctype html, html, head, and body tags, then save as index.html in the root directory and preview in the browser.

Add a title tag in the head of your html page to set a descriptive page title, improving browser tab labeling and search engine understanding of the page.

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.

Place content inside the html body to display on the page, such as hello world, and note that whitespace is ignored by browser. Use the br tag for line breaks.

Learn to use HTML comments to annotate pages, create notes with <!-- -->, and leave helpful reminders for yourself and other readers while you code.

Create a basic HTML page in notepad, including the doctype and HTML, head, title, and body tags, then save it in the pages folder under the root.

Share your progress by uploading a screenshot of your basic HTML page to the QA section, and use the Q&A to get feedback on your use of common HTML tags.

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.

Learn how to create line breaks in HTML using the br tag, including placing breaks inside and between paragraphs, and nesting br tags for controlled line spacing.

Learn how CSS handles formatting separate from HTML and apply styles to paragraphs using the style attribute, using the text-align property to center, left, right, or justify.

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.

Learn to use heading tags to structure web content with H1 identifying the main topic. Utilize H2 and H3 to organize subtopics for readability and search engine optimization.

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.

Learn how the HTML image tag uses the alt attribute to provide alternate text for images, improving accessibility for screen readers and when images fail to load.

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 format images with CSS by using the style attribute to add a border, float images left or right, and apply margins so text wraps around content.

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

Create an HTML page that embeds an image from resources, saves the page to pages and the image to images, uses the img tag, then share progress on Q&A board.

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.

Explore creating unordered lists with ul and li, then add nested sub bullets to organize items like bread and milk, and see how browsers render top-level items with sublists.

Discover how to create ordered lists in HTML using ol, contrast with unordered lists ul, nest lists, and customize numbering with the type attribute, including lowercase alpha and roman numerals.

Learn to replace bullet symbols with a custom image using CSS list-style-image, including downloading the image, placing it in the images folder, and applying the path in the ul style.

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.

Learn how to create clickable phone number links in HTML using the tel: href within an anchor tag, enabling direct calls from the webpage on devices.

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 how to create a simple HTML table using the table, tr, and td tags, building a single row with two cells for clear tabular data.

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.

Learn how to add borders to HTML tables using CSS, replacing the deprecated HTML border attribute with a table and td selector approach, applying a 1px solid black border.

Learn to expand HTML tables by adding four rows and three columns with tr and td, using copy-paste for consistency and refreshing to see updates.

Transform the first row into headers using the th tag, making them bold and distinct. Style th with CSS for accessibility and better SEO, while keeping data cells as td.

Add a top table title row, like employee data, with a td that colspan across all columns, then adjust width using the style attribute.

Apply CSS to format a table with alternating row colors using the nth-child selector. Identify the table by its ID and target specific rows to enhance readability.

Create HTML forms by using the form tag, labels, and input controls such as text, radio buttons, checkboxes, dropdown controls, text areas, and a submit button, then validate with JavaScript.

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.

Create html radio controls for a two-option subscription form, using input type='radio' with yes and no labels and line-break layout tweaks.

Learn to make radio buttons usable by grouping them with the same name, assigning unique ids, and linking labels with the for attribute to improve accessibility.

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.

Learn to use the hr tag to insert a horizontal rule that separates form sections and improves readability, such as dividing subscribe and submit buttons in HTML forms.

Change an input's type from text to email to enable browser validation for email addresses, ensuring an at symbol and a dot, then save and refresh.