Navigation bar featuring various distinct webpages

Apologies for the novice question, but as a beginner, I'm seeking help. I've created a navigation bar with text such as About and Projects, but no links attached (i.e., no pages for users to navigate to). How can I add these missing pages so that when a user clicks on "About," they are directed to the respective page I've designed? I am currently working with HTML5 and CSS3. Any guidance would be greatly appreciated!

List Code:

    <ul class = "list"> 

        <a href = ""><li>Welcome |</li></a>
        <a href = ""><li>About |</li></a>
        <a href = ""><li>Projects</li></a>

    </ul>
htmlcssnavbar

Answer №1

To start, first create a new folder on your desktop. Then, open up a text editor and copy the code provided below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
  </head>
  <body>
    <ul> 
      <li><a href="welcome.html">Welcome</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    <h1>Welcome</h1>
  </body>
</html>

Save this file as "welcome.html" inside the newly created folder.

Next, create another text document and paste the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About</title>
  </head>
  <body>
    <ul> 
      <li><a href="welcome.html">Welcome</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    <h1>About</h1>
  </body>
</html>

Save this second file as "about.html" within the same folder you just created.

Finally, open the "welcome.html" file in your web browser to check if everything is working correctly.

In this code, the attribute href specifies the path to where the file is located on your computer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered while transferring files between a web platform and an API

Currently, I am working on two separate projects. The first project involves a website where users can upload files, and the second project is an API designed for file uploads due to the limitations of the old website. I am utilizing Laravel (6) to develo ...

jqueryhtmlajaxlaravelpost

Why is my JQuery display none not functioning properly?

The functionality for showing an element is working perfectly, but when attempting to hide the same element, nothing seems to happen. Here is the HTML code after showing the element: $(".container").click(function() { $('.top-menu').css(&ap ...

jqueryhtml

Create a bolded section within a TextField component using Material UI version 5

I am working with a TextField component that has a specific defaultValue set. Here is the code snippet: <TextField autoFocus={props.autoFocus} fullWidth defaultValue={props.defaultValue} value={text} onKeyPress={handleKey ...

javascriptcssreactjsmaterial-ui

Navigate div containers interchangeably

Take a look at what I made: https://jsfiddle.net/1qsoL695/ This is the HTML code: <div class="container"> <div id="select"> <div>ONE</div> <div>TWO</div> <div>THREE</div> &l ...

jqueryhtmlcssswipe

Issue with form not capturing information from dynamically generated fields

I'm working on creating a dynamic form for user input of on/off instructions in pairings. The HTML code defaults with one pair, and the user can add additional pairs using a button. However, upon form submission, Angular is only reading the values fro ...

htmlangularjs

Creating an HTML form that communicates with PHP and ASPX

I recently completed a project where I created a contact us page that sends information to our sales team using PHP for email delivery. The next step in this process is to also send the same customer information to our Sales Fusion CRM system. To accompli ...

phphtml

How to Toggle Href Functionality with jQuery Checkbox

Is it possible to use a checkbox to enable/disable my <a href> button (default = disabled)? $('#check').change(function() { }); What should be the next step in this process? Do I need to use the unbind function? (My goal is to disable t ...

javascriptjqueryhtml

The button is only partially visible

My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully. I wonder if I'm missing something with the span element? How can I enlarge the button so that it's bigger and shows the entire "ok" ...

htmlcssbutton

Tips for executing two methods when a button is clicked in HTML or JavaScript

Is it possible to invoke two methods using a button's onclick event in HTML or JavaScript? ...

javascripthtmlonclick

The validation process is still failing even though the correct credentials have been entered

I'm diving into the world of Javascript and DOM today, but I've hit a roadblock. Can you take a look at this code snippet and help me figure out what's causing me to always end up in the else block, no matter what I input in the text field? ...

javascripthtmlformsvalidation

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

javascriptcssnode.jsexpress

Ensure that the div remains within the viewport

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tit ...

javascripthtmlcssweb

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Dynamically changing CSS properties

http://jsfiddle.net/U6gWx/1/ $("div.ttt").css('display','block'); There is a filter that might empty the first column, which is set to float:left. When the first column is empty, I want to update the second column's CSS style to ...

jquerycss

changing the value of a jQuery variable when an event occurs

Currently, I am working on an interactive jQuery experience where I want my character to navigate through multiple rooms. $(document).keydown(function(e) { switch (e.which) { case 39: $("#barry").attr("src", "img/characters/BarryBa ...

javascriptjqueryhtml

Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality

I am looking to create a unique effect where a div rotates onclick to reveal a grid gallery on the rear face. Starting this project feels overwhelming and I'm not sure where to begin. <ul class="container-fluid text-center row" id=" ...

javascripthtmlcssbootstrap-5image-gallery

What is the best way to generate a variable amount of div elements with constantly changing content using Angular2?

I'm not entirely sure on the process, but I believe ngFor would be used in this scenario. Essentially, my goal is to generate the following div multiple times, with each iteration updating the value inside the brackets from 0 to 1, 2, and so forth... ...

javascripthtmlcssangular

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

Recently, I started using TypeScript for the first time and I'm looking to integrate it into my webpack build. Currently, I am working with ts-loader and babel-loader to load TypeScript files while also attempting to include HTML files within the scr ...

htmltypescript

The appearance of responsive CSS is altered when deployed compared to when it is viewed on the

I'm a beginner in web development and facing an issue with my mobile CSS. The strange thing is that when I view it on localhost, everything looks great, but once deployed (tried both Heroku and GitHub), it appears distorted. Even when I make extreme c ...

javascripthtmlcssgithubfrontend

What is the reason for the absence of a shorthand property in CSS that combines width and height measurements?

Have you ever thought about using a shorter property for specifying an item's width and height in CSS? Currently, we have to write: selector {width: 100px; height: 250px;} While this is already pretty fast, wouldn't it be even quicker if we c ...

cssheightwidthshorthand