A multi-page website is simply a collection of HTML documents that live together in an organized folder and are connected to each other through links. Instead of putting everything on one long page, you separate content into purposeful pages — a home page, an about page, a contact page — and give visitors a consistent way to move between them. Before you write any HTML, though, you need a plan: what pages exist, what each page is for, what files and folders hold them, and how the navigation ties it all together.
In this course, this topic is the foundation for everything else in Module 2. HTML is the structural layer of the web: elements like header, nav, main, section, article, and footer describe what each part of a page means, not just how it looks. Semantic markup matters because it makes your pages easier for other developers to read, easier for search engines to interpret, and far more usable for people relying on screen readers. Internal links, written as relative paths, are what turn a pile of separate HTML files into a single coherent site.
The videos below focus on the planning and structuring habits that come before and around the code. As you watch, look for the ideas you can transfer directly to a website project: how to break a project into pages or components, how to decide on a folder and file organization, how to sketch structure before building, and how to keep naming and layout consistent. The specific tools and languages shown may differ from plain HTML, but the planning discipline is the same.
Tech With Tim walks through a nine-step process he uses to plan a coding project before writing code, from clarifying the goal to breaking the work into manageable pieces. Expect discussion of defining requirements, sketching out the pieces of the project, and sequencing the build. The emphasis is on thinking first so that the implementation stage goes smoothly.
This maps directly to the "Planning a Website Before Writing Code" subtopic and models the habit of deciding on pages, content, and structure before opening an editor.
This video covers practical ways to structure a programming project, including how to organize files and folders, name things consistently, and document the project so others can follow it. Tim presents the ideas as a checklist of simple, repeatable practices. The focus is on making a project readable and professional rather than on any one language.
File and folder organization is exactly what a multi-page website needs for relative links to work, and the video reinforces the consistency and naming discipline this topic introduces.
A working web designer condenses his end-to-end website process into about twelve minutes, moving from initial planning and content decisions through layout and delivery. The video includes a shared Trello template for tracking the stages of a site build. It is oriented toward real client websites rather than a single practice page.
It frames website creation as a multi-page, multi-stage process, which supports the conceptual subtopics on what a multi-page site is and how to plan one before coding.
These videos deliberately cover the planning and organizational side of building a site rather than HTML syntax, which you will practice in the hands-on portions of this module. The project-planning and project-structure videos support MO4 by showing how deliberate file and folder organization makes a consistent, working navigation possible, and they support MO1 by encouraging you to decide what each page contains before marking it up with semantic elements. The web design process video reinforces the multi-page mindset that underlies MO3 and MO5, since a site planned as a connected set of pages is one whose internal links, external links, and images can be systematically tested at the end. Pair these planning habits with the course readings and code demonstrations on semantic elements, image attributes, and link paths to meet MO1 through MO5 in full.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Semantic HTML is the practice of choosing elements that describe the meaning of your content rather than just its appearance. Instead of wrapping everything in generic div elements, you use header for introductory content, nav for navigation links, main for the dominant content of the page, section and article for grouped and self-contained content, and footer for closing information. The markup still looks similar in a browser, but it now carries meaning that software can interpret.
This matters in COP4813 because the website you build in this module is not just a visual artifact. Screen readers use semantic landmarks to let users jump directly to navigation or main content, and search engines use document structure to understand what a page is about. Starting with clean semantic structure also makes your CSS and JavaScript work in later modules far easier, because the structure already reflects the logic of the page.
As you watch the videos below, pay attention to three things: which element is appropriate for each region of a page, how the same page can be built semantically or non-semantically with very different results for accessibility, and how a designer's mockup can be translated into a structural outline before any code is written. Try sketching the semantic outline of your own module project page and compare it with the examples you see.
This tutorial from the Sigma Web Development Course walks through the common semantic tags in HTML, which based on the title and course context should include header, nav, main, section, article, and footer. Expect demonstrations of each tag in an editor with explanations of when and why to use one over a plain div. The video is paced as a beginner lesson within a larger structured web development series.
CodeWithHarry is a well-known, high-volume web development channel, and this lesson sits in a sequenced course, so the coverage of the tag set maps directly onto the subtopics for header, nav, main, section, article, and footer.
This beginner frontend tutorial connects semantic HTML directly to accessibility by demonstrating the VoiceOver screen reader. The description indicates you will hear how assistive technology navigates a page and how that experience is shaped by whether the underlying markup is semantic or generic. This is the practical answer to the question of why semantic elements matter beyond style.
It is the best fit for the Semantic Markup and Accessibility subtopic because it shows, rather than asserts, the real consequence of markup choices for users of assistive technology.
Part of a project-based series, this short tutorial takes a design mockup created in Adobe XD and works through identifying which semantic HTML tags fit each region of the layout. It focuses on the decision process of choosing tags rather than on syntax alone. Expect to see a visual design translated into a structural outline.
It directly supports the Structuring a Full Page with Semantic Elements subtopic and models the workflow you will need when you turn your own page design into working markup.
Together these videos support MO1 most directly: the CodeWithHarry tutorial supplies the vocabulary and syntax for header, nav, main, section, article, and footer, while the Professor K mockup video shows how to apply those elements to an entire page layout, which is exactly the task of building your multi-page site. The VoiceOver accessibility video reinforces the accessibility standards referenced in MO2 and MO5 by making clear why structure and descriptive markup affect real users. The emphasis on placing navigation links inside a nav element also prepares you for the consistent navigation menu required by MO4 and for the link testing and verification work in MO3 and MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Images turn a plain document into a real web page, and in HTML they are added with a single, self-closing element: img. Unlike paragraphs or headings, the img element has no content between tags — everything it needs comes from its attributes. The src attribute points to the image file, alt describes the image for people who cannot see it, and width and height tell the browser how much space to reserve while the page loads.
This matters in COP4813 because the site you build in this module must work for everyone and must not break when files move. A src path that is correct on your machine but wrong on the server produces a broken image; a missing or careless alt attribute makes your page unusable with a screen reader. You will also need to make sensible choices about file formats — JPEG for photographs, PNG for graphics needing transparency, SVG for logos and icons, and newer formats such as WebP for smaller file sizes.
As you watch, pay attention to three things: how relative paths are written when images live in a subfolder like images/, how each speaker decides what alt text should actually say (including when it should be empty), and why setting dimensions in the HTML or CSS helps page layout and performance. Try each example in your own editor rather than only watching.
A short, beginner-focused introduction from W3Schools covering the img element and its core attributes, including src, alt, and sizing. Based on its title and description, it walks through how images are embedded in a page and gives practical advice on using them correctly. It is part of a larger HTML tutorial series, so the explanations assume only basic HTML knowledge.
W3Schools is a widely used, reliable reference for HTML syntax, and this clip gives a fast, accurate overview of the img element that maps directly to the first subtopics of this lesson.
A longer tutorial from LinkedIn Learning focused specifically on img tag attributes and image resolution. The description indicates it addresses incorporating images in ways that are dynamic, accessible, and responsive, which suggests coverage of src, alt, and dimension attributes along with how images adapt to different screen sizes and resolutions.
It goes deeper than a basic introduction, connecting the width and height attributes to responsive and high-resolution displays — a useful bridge between syntax and real-world image sizing decisions.
An episode of the HTTP 203 series in which two Chrome developer advocates discuss what should actually go into an image's alt attribute. Rather than teaching syntax, it works through the judgment calls: describing the purpose of an image in context, what to do with decorative images, and common mistakes that make alt text unhelpful.
Produced by Chrome for Developers, it is an authoritative and unusually practical treatment of the alt text and accessibility best practices subtopics, where most students' mistakes occur.
Together these videos target MO2 directly: the W3Schools overview establishes correct img syntax with src and alt, the LinkedIn Learning tutorial extends that to width, height, and resolution choices, and the Chrome for Developers episode supplies the accessibility judgment needed to write alt text that genuinely helps users. The emphasis on relative source paths also reinforces the file and folder organization skills in MO4 and the relative-path thinking behind MO3, while the accessibility guidance gives you concrete criteria for the image and accessibility testing required in MO5 and supports the accessible page structure goal in MO1.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Hyperlinks are what turn a collection of separate HTML files into an actual website. The anchor element, written as a pair of <a> tags, wraps the text or image a visitor clicks, and its href attribute tells the browser where to go. That destination can be an absolute URL pointing to another site on the web (an external link), or a relative file path pointing to another page in your own project folder (an internal link).
In this module you are building a multi-page site, so linking is the glue that holds your work together. Every page you create needs to be reachable from your navigation menu, and every navigation menu needs correct relative paths that still work when files move into subfolders. You will also meet the target attribute, which controls whether a link opens in the same tab or a new one, along with the rel attribute that should accompany target="_blank" for security reasons.
As you watch the videos below, pay attention to three things: the exact syntax of the anchor element and where the clickable text goes, the difference between a full URL and a relative path, and the practical habits that keep links from breaking. Try typing each example yourself rather than only watching, and test every link in a browser before you move on.
A short, beginner-focused introduction from W3Schools covering what a hyperlink is and how the anchor element and href attribute work together in HTML. Expect a quick walkthrough of basic link syntax and how a browser responds when a link is clicked. At under four minutes, it is a compact overview rather than a deep dive.
W3Schools is a long-standing, widely used reference for web standards, so the syntax demonstrated is reliable and matches what you will find in the course documentation. It is the fastest way to get the anchor element and href attribute straight before tackling the longer videos.
A longer lesson that looks past basic syntax at the lesser-known capabilities of the anchor tag and at common mistakes developers make when writing links. Based on its title and description, expect discussion of attributes and link behaviors that beginners often get wrong or overlook. The nearly nine-minute runtime allows for more detail than an introductory clip.
It pushes you beyond copy-paste syntax toward the judgment calls this topic requires, such as when a link should open in a new tab and what accompanies the target attribute, which supports the course emphasis on correct and secure linking.
This tutorial focuses specifically on using the anchor element to build site navigation, and its description states it covers creating both internal and external links. You should see how absolute URLs are used to reach other websites and how relative file paths are used to reach other pages in your own project. Around seven minutes long, it gives enough room for worked examples.
It maps directly onto the internal and external hyperlink subtopics and frames linking as navigation, which is exactly how you will use it when building your multi-page site in this module.
Together these videos build directly toward MO3 and MO4: the W3Schools clip establishes the anchor element and href syntax, the WebDev Exploration tutorial distinguishes relative internal links from absolute external URLs in the context of site navigation, and the williamsk lesson addresses the finer points of anchor tag usage such as link behavior and attributes like target. Applying this material lets you construct the nav element required in MO1 and connect every page in the folder structure described in MO4. The habit of checking that each link resolves correctly, reinforced across all three videos, is also what you will need for the link-testing and quality review step in MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
A website becomes a website — rather than a pile of separate files — when its pages are connected. Internal navigation is the system of links that lets a visitor move from the home page to an about page, a gallery, or a contact form and back again without ever typing a URL. The core tool is the anchor element, and the skill that makes it work is writing correct relative file paths: addresses that describe where a file sits in relation to the page currently being viewed.
In this topic you will practice writing links such as about.html, pages/contact.html, and ../index.html, and you will see why a path that works on one page may break on another once files are moved into folders. You will also build a navigation menu — a group of links, usually inside a nav element, repeated in the same place and same order on every page so users always know where they are and what their options are. Finally, you will use fragment identifiers (the # syntax paired with an element id) to jump directly to a section within a long page.
As you watch the videos below, pay attention to three things: how the href value changes depending on where the file lives, how the folder structure of the site is organized before any links are written, and how a navigation block is copied and kept consistent across pages. Keep a small test site open and try each path yourself — broken links are usually a typo or a wrong folder level, and the fastest way to learn the rules is to break and fix them.
This clip introduces hyperlinks using the anchor (a) element and focuses specifically on navigating between the pages of a single website. Based on its description, it also demonstrates assembling those links into a navigation bar, which is exactly the structure you will reuse on every page of your own site.
Deborah Kurata is a well-known instructor whose beginner series is carefully paced and accurate, and this clip maps directly onto two of our subtopics: creating basic internal links with the anchor tag and building a navigation menu structure.
A focused tutorial on HTML file paths that contrasts relative paths with absolute paths. Expect coverage of how a path is written relative to the current document, including moving into subfolders and stepping back up a level, and when an absolute URL is the right choice instead.
File paths are the single most common source of broken internal links, and this video devotes nearly fifteen minutes to just that topic, giving you the depth needed for the relative-paths and multi-page file-organization subtopics.
A beginner-level walkthrough that covers the img and a tags together, showing how to place an image on a page and how to turn text into a link. Because both elements rely on a path or URL in an attribute, the video reinforces path-writing in two different contexts.
Pairing images with links is useful here because the same relative-path logic governs src and href, and the short, practical format makes it a good quick review or refresher before you start wiring your own multi-page site together.
Together these videos support the module outcomes that concern linking and site structure. The file paths tutorial underpins MO3 by clarifying when to use a relative path for internal links versus an absolute URL for external ones, while the hyperlinks and navigation clip addresses MO4 by showing how anchor elements are grouped into a navigation bar that connects every page of the site, and it contributes to MO1 by demonstrating the nav region within an overall page structure. The images and links video reinforces MO2 and MO3 by treating src and href as parallel path-based attributes. All three prepare you for MO5, since knowing how a correct path is formed is what allows you to test a finished site and diagnose any link or image that fails to load.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Linking outward is what makes your site part of the web rather than an island. When you point to a page on another site, you need an absolute URL — the full address including the scheme (https://), the domain, and any path — because a relative path would only ever be resolved against your own site's folders. This topic covers how to write those links with the anchor element and how to choose attributes that affect where the page opens and how safely.
Two attributes matter most here. The target attribute (commonly target="_blank") controls whether the destination replaces the current page or opens in a new tab, and historically a new tab could give the destination limited scripting access back to your page, which is why rel="noopener noreferrer" is the standard companion. The rel attribute also describes the relationship between your page and the destination more broadly, with values such as nofollow, external, and license. Alongside the technical details, there is a user-experience obligation: link text should tell people where they are going, and users should not be surprised by a tab opening unexpectedly.
As you watch, focus on three things: the exact anatomy of the anchor tag (href, text content, closing tag), how the videos distinguish absolute from relative URLs, and any mention of target or rel. Note that short beginner tutorials often stop before the security discussion — treat the module readings as the authority on rel="noopener noreferrer" and use the videos to build fluency with the markup itself.
A concise official W3Schools tutorial introducing the HTML link, explaining what a hyperlink is and how the anchor element and its href attribute work. Given its length and beginner framing, it most likely demonstrates basic link syntax and may touch on link targets and absolute versus relative addresses. It serves as a quick reference-style overview rather than a deep dive.
It comes from W3Schools, the reference many students already use for HTML syntax, so the terminology matches the documentation you will consult while coding. At under four minutes it is an efficient way to confirm the core anchor syntax before moving on to external-linking specifics.
A longer walkthrough of HTML links and anchor tags that, per its description, covers clickable sections with smooth scrolling and styling links to look like buttons, with an emphasis on building SEO-friendly hyperlinks. The SEO angle suggests attention to descriptive link text and link attributes that search engines interpret, which overlaps with the rel attribute and communicating destinations to users. Expect practical demonstrations rather than formal specification reading.
The focus on SEO-friendly, well-written hyperlinks reinforces the user-communication and rel-attribute subtopics, which pure syntax tutorials often skip. Its longer runtime allows more worked examples of writing link text that tells readers where a link goes.
A classroom-style lecture organized by a published table of contents: an introduction, the anchor element, external links, and internal links within the same directory. The explicit split between external and internal linking means you should see absolute URLs for off-site destinations contrasted directly with relative paths used inside your own project. The pacing is instructional, with time to explain why each form is used.
It is the only video here that structures the material as external versus internal linking, which is exactly the distinction this topic rests on. Because it was produced for a course, the explanations are aimed at students building their own multi-page sites, matching the work you are doing in this module.
These videos target MO3 most directly: together they establish the anchor element's syntax, the difference between absolute URLs for external destinations and relative paths for internal ones, and the attributes that shape how a link behaves and how it is described to users and search engines. The internal-link coverage in the course lecture also feeds MO4, since a consistent navigation menu is built from the same anchor element, and clear link text supports the accessibility expectations in MO1 and MO5. Use the module readings to fill the gap on target="_blank" security and rel="noopener noreferrer", then apply all of it when you test every internal and external link in your finished site for MO5.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.
Up to this point in the module you have practiced individual HTML skills: writing semantic elements, placing images, and creating links. This topic asks you to combine those skills into a single, working multi-page website. That means deciding what pages your site needs, naming files and folders consistently, repeating the same semantic structure and navigation menu on every page, adding images with meaningful alt text, and wiring the pages together with relative links while pointing outward with absolute URLs.
This matters because real websites are judged as a whole, not as isolated code snippets. A visitor notices immediately when a navigation link is broken, an image fails to load, or one page looks structurally different from the rest. Planning your folder layout before you start writing HTML, and testing every link and image when you finish, is what turns a pile of files into a site.
The two videos below approach the idea of a complete site from different angles. The first reviews the HTML content elements you will place inside your pages; the second shows a no-code site builder so you can see how pages, navigation, and media fit together conceptually before you hand-code the same ideas. While watching, pay attention to structure and organization rather than to any single tag: ask yourself how each page relates to the others, where files would live on disk, and what you would need to check before calling the site finished.
This tutorial from the Sigma Web Development Course covers HTML images, lists, and tables. Based on its title and description, expect coverage of the img element and its attributes, ordered and unordered lists, and table markup, demonstrated with live code examples typical of this series.
The image portion maps directly to the subtopic on embedding images with descriptive alt text, and lists are the standard way to structure a navigation menu, so the content supports both page content and site navigation work. CodeWithHarry is a widely followed, beginner-oriented web development channel with a clear, example-driven teaching style.
Kevin Stratvert walks beginners through building a website with Google Sites without writing any code. The video is likely to cover creating and arranging pages, adding a navigation menu, inserting images and text blocks, and publishing the finished site.
It gives you a fast, visual model of what a complete multi-page site looks like, including page hierarchy and consistent navigation, which is useful context when you plan your own structure. Kevin Stratvert is a well-known producer of clear, step-by-step software tutorials, and the video offers a useful contrast between a drag-and-drop builder and the hand-written HTML you are learning.
Together these videos reinforce the module outcomes from two directions. The CodeWithHarry tutorial supports MO2 by demonstrating the img element and its attributes, and its coverage of lists underpins the anchor-in-nav menu pattern required by MO4, while the code it produces sits inside the semantic page structure described in MO1. The Google Sites walkthrough supports MO1, MO3, and MO4 conceptually by showing how a set of pages is planned, linked, and navigated as one site, and it models the review habit behind MO5, since you see a finished site published and checked. Use the videos for concepts and technique, then apply them in your own hand-coded project folder, testing every internal link, external link, and image before you submit.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.