2 -Building a Full Website with HTML, Images, and Links — Topics & Learning Outcomes

Module Topics

Introduction to Multi-Page Website Structure

• What Is a Multi-Page Website? — A multi-page website is a collection of individual HTML files that work together to form a cohesive online presence.
• The Role of HTML in Defining Structure — HTML is the foundational language that defines the structure and content of every page within a website.
• Core Components of an HTML Page — Every HTML page shares a standard set of components that give it a valid, well-formed structure.
• Semantic Markup and Its Importance — Semantic HTML uses meaningful tags that describe the role of content rather than just its appearance.
• How Pages Connect: The Concept of Internal Linking — Internal links are the mechanism that ties individual HTML pages together into a navigable website.
• Planning a Website Before Writing Code — Before creating any HTML files, outlining the site's pages and how they relate to each other saves time and prevents structural problems.

Semantic HTML Markup

• What Is Semantic HTML? — Semantic HTML uses elements whose names clearly describe their purpose and the type of content they contain, rather than using generic containers like div or span for everything.
• The <header> and <nav> Elements — The <header> element represents introductory content at the top of a page or section, while <nav> marks a block of navigation links.
• The <main>, <section>, and <article> Elements — These three elements organize the primary body content of a page into meaningful regions, from the overall main area down to individual standalone pieces of content.
• The <footer> Element — The <footer> element contains closing information for its nearest sectioning ancestor, such as copyright notices, contact details, or secondary navigation.
• Semantic Markup and Accessibility — Screen readers and other assistive technologies rely on semantic elements to create landmark regions, allowing users with disabilities to navigate a page efficiently.
• Semantic Markup and Search Engine Optimization (SEO) — Search engine crawlers parse HTML to understand a page's content hierarchy, and semantic elements provide clear signals about which content is most important.
• Structuring a Full Page with Semantic Elements — Combining all semantic elements into a coherent page layout results in a document that is readable, maintainable, and accessible from the very first line of HTML.

Embedding Images in HTML

• The img Element — The HTML `<img>` element is used to embed images directly into a web page. It is a self-closing (void) element, meaning it does not require a closing tag.
• Setting the Source Path with src — The `src` attribute tells the browser where to find the image file, accepting either a relative or an absolute URL as its value.
• Providing Alt Text for Accessibility — The `alt` attribute supplies alternative text that describes an image, which is displayed when the image cannot load and read aloud by screen readers.
• Controlling Image Size with width and height — The `width` and `height` attributes can be added to the `<img>` element to specify the display dimensions of an image in pixels.
• Choosing the Right Image Format — Selecting an appropriate image format is critical for balancing visual quality, file size, and browser compatibility.
• Image Accessibility Best Practices — Beyond alt text, several additional practices ensure that images are accessible and inclusive for all users.

Creating Hyperlinks

• The Anchor Element — The anchor element, written as <a>, is the fundamental HTML tag used to create hyperlinks that connect pages and resources.
• The href Attribute — The href (hypertext reference) attribute is placed inside the opening <a> tag to specify the destination URL or file path of the link.
• External Hyperlinks — External hyperlinks point to pages or resources hosted on other websites, using a full absolute URL as the href value.
• Internal Hyperlinks — Internal hyperlinks connect pages within the same website using relative file paths, allowing users to navigate between your own HTML files.
• The target Attribute — The target attribute controls where the linked page or resource opens when the user clicks the hyperlink.
• Linking as the Foundation of Website Structure — Hyperlinks are what bind individual HTML pages and resources together, creating the interconnected structure that defines a website.

Internal Navigation and Site Linking

• Understanding Relative File Paths — Relative file paths define the location of a linked page in relation to the current HTML file, making them the foundation of internal site navigation.
• Creating Basic Internal Links with the Anchor Tag — The HTML anchor element <a> with an href attribute pointing to a relative path is the core mechanism for linking pages within the same website.
• Building a Navigation Menu Structure — A navigation menu groups multiple internal links together, typically using an unordered list inside a <nav> element to create a clear, accessible site menu.
• Maintaining Consistent Navigation Across Pages — Placing the same navigation menu HTML on every page of the site ensures users always have access to the same links regardless of which page they are viewing.
• Organizing Multi-Page Site File Structure — A logical file and folder organization is essential for internal linking to work correctly and for the site to remain manageable as it grows.
• Linking to Page Sections with Fragment Identifiers — Fragment identifiers allow an internal link to navigate directly to a specific section within a page by targeting an element's id attribute.

External Links and Web Resources

• Absolute URLs for External Links — External links point to resources on other websites and require a complete, absolute URL including the protocol, domain, and path.
• Opening Links in a New Tab with target — The target attribute on an anchor element controls where the linked resource opens when a user clicks the link.
• Security Risks of target="_blank" and the rel Attribute — Opening external links in a new tab with target="_blank" introduces a security vulnerability known as reverse tabnapping, which can be mitigated using the rel attribute.
• Communicating Link Destination to Users — Good user experience requires that visitors know before clicking whether a link will take them to an external site or open a new tab.
• Linking to Specific Online Resources — External links can point to a wide variety of online resources, including other web pages, documents, images, and media hosted on different domains.
• The rel Attribute for Link Relationships — The rel attribute describes the relationship between the current page and the linked resource, providing semantic meaning for browsers and search engines.

Bringing It All Together: Building a Complete Website

• Planning Your Multi-Page Website Structure — Before writing a single line of code, successful websites begin with a clear plan that maps out pages, content, and navigation flow.
• Setting Up a Consistent File and Folder Organization — A well-organized project folder ensures that HTML files, images, and other assets are easy to locate and reference with correct relative paths.
• Applying Semantic Markup Across Every Page — Semantic HTML elements give meaning to page content, improving accessibility, SEO, and code readability throughout your entire site.
• Embedding Images with Descriptive Alt Text — Images enhance visual appeal and communication, and every image must include an alt attribute that accurately describes its content for accessibility.
• Creating Internal Links Between Pages — Internal hyperlinks connect your site's pages together, forming the navigation system that allows visitors to move through your website.
• Adding External Links and Best Practices — External links direct users to resources on other websites and should be implemented with care to maintain a good user experience and site credibility.
• Reviewing and Testing Your Complete Website — Thorough testing is the final step before considering a project complete, ensuring all pages, links, and images work correctly together as a cohesive whole.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)

No course outcomes have been defined.