Incorporating a unique BRAND logo as the header of an HTML page

https://i.sstatic.net/NV5BO.jpg Currently enhancing my front end development skills with HTML and CSS. I am trying to set up a menu bar with an image (header image) above it.

However, I am facing issues in displaying the image stored in my images folder. https://i.sstatic.net/ppVv0.jpg

Here is the snippet of my HTML code... Please assist me in troubleshooting this problem. enter code here

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <style>
         body{
            color:green;
         }
      </style>
      <link href="css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
<div class="container">
    <nav class="navbar navbar-default">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="/images/spmhead.jpg" scale="0" width="100%">
      </a>
  </div>
</nav>
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">
    <a class="navbar-brand" href="#">Hello World Mentors </a> 
    <div class="navbar-header navbar-right">
    <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Hell</a></li>
    <li><a href="index.html">About</a></li>
    </ul>

    </div>
    </div>
    </nav>
</div>

      <div class="container">

         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
        </div>
        <div class="container">       
         <div class="row">
            <div class="col-md-6">
               <h2>Android</h2>
               <p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
         </div>
         <br>
         <div class="col-md-6">
            <h2>CSS</h2>
            <p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
         </div>

         <div class="container">

         <div class="col-md-6">
            <h2>Java</h2>
            <marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>

         </div>
         <div class="col-md-6">
            <marquee direction="up">This text will scroll from bottom to up</marquee>
         </div>

     </div>
     </div>
         <div class="container">
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
      </div>
   <script src="js/jquery.js"> </script>
    <script src="js/bootstrap.min.js"> </script>   
   </body>
</html>

Answer №1

Look for the picture using a relative path.

 <img src="./photos/header.jpg" size="0" width="100%">

Answer №2

The correct code should read as

<img src="images/spmhead.jpg" scale="0" width="100%">
.

Answer №3

At last, the solution to my question has been found and it worked perfectly for me!

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <style>
         body{
            color:green;
         }
      </style>
      <link href="css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

<div class="container">
    <a href="#">
        <img src="images/spmhead.jpg" class="img-responsive">
      </a>
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">
    <a class="navbar-brand" href="#">Hello World Mentors </a> 
    <div class="navbar-header navbar-right">
    <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Hell</a></li>
    <li><a href="index.html">About</a></li>
    </ul>

    </div>
    </div>
    </nav>
</div>

      <div class="container">

         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
        </div>
        <div class="container">       
         <div class="row">
            <div class="col-md-6">
               <h2>Android</h2>
               <p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
         </div>
         <br>
         <div class="col-md-6">
            <h2>CSS</h2>
            <p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
         </div>

         <div class="container">

         <div class="col-md-6">
            <h2>Java</h2>
            <marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>

         </div>
         <div class="col-md-6">
            <marquee direction="up">This text will scroll from bottom to up</marquee>
         </div>

     </div>
     </div>
         <div class="container">
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
      </div>
   <script src="js/jquery.js"> </script>
    <script src="js/bootstrap.min.js"> </script>   
   </body>
</html>

https://i.sstatic.net/Rbup5.jpg

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

Floating point expansion caused by the addition of padding

Currently working on a basic 2 column layout design for a website, but ran into a hiccup. Whenever I try adding padding to the left-floated column, it ends up expanding beyond the width that I have set. Unfortunately, I haven't been able to find a sol ...

Assign a background image to a master page utilized in subdirectories

In my website's root directory, I have a master page. Inside this root directory, there is a folder named Images which contains the background image for my master page. When I apply this master page to web pages located in the root directory, everythi ...

The li elements within a 960.gs layout will not extend to fill the entire width of the

I am still learning about this and I have been following some tutorials online. I managed to make the columns work with paragraph tags, but when I use ul > li tags, the image takes up the entire space. I'm not sure what's causing this issue. ...

Angular 4 is unable to attach to 'formGroup' as it is not recognized as a valid property of 'form'

As a beginner with Angular 4, I decided to explore model driven forms in Angular 4. However, I keep encountering this frustrating error. Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form ...

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

There is a specific requirement I have where I must retrieve the value of the second td in an HTML table when clicking on the first column. To accomplish this task, I am utilizing jQuery. $('.tbody').on('click','tr td:nth-child(1) ...

How come the pop-up isn't displaying in the middle of the screen?

I have encountered a positioning issue while using a semantic modal with Angular. The problem arises when I try to display the modal as it does not appear in the correct position. https://i.sstatic.net/o033E.png Below is the code snippet from my HTML fil ...

The main menu items in jQuery do not display the child sub menu upon clicking

I'm currently in the process of creating a unique mobile menu for my Wordpress website, but I'm facing some challenges when it comes to displaying and hiding the sub-menu items. I've assigned the class name .menu-item-has-children as my sele ...

What steps should I take to insert a divider in a dropdown menu?

I am attempting to enhance my dropdown menu by incorporating a separator using the following code: <li class='divider'></li> Below is my HTML code with the separator included: <ul class="dropdown-menu dropdown-menu-right" id="ul ...

How to prevent selection of certain days in an Angular date input

I need help with my Angular component that includes an input date field. I am trying to figure out how to disable all past dates and also a specific range of future dates, such as those between 2023-10-15 and 2023-10-23. Is there a way to achieve this func ...

Is there a way to spin these hexagons around?

Hey there, I need some assistance with a problem. I have to rotate these three hexagons slightly, about 15 degrees or so. The catch is, it needs to work in Internet Explorer only. I've been struggling with this all day and it's getting ...

Ensure the div element remains fixed at the top of the page

I created a script to identify when I reach the navigation bar div element and then change its CSS to have a fixed position at the top. However, I am encountering an issue where instead of staying fixed, it jumps back to the beginning of the screen and fli ...

Issues observed with the functionality of the fixed position menu bar

Is it strange that the menu bar remains fixed at the top of the page while scrolling down, but ends up going under another div making it impossible to click on the menu? #cssmenu { position: fixed; left: 0; top: 0; height: 40px; width: 100%; ...

Troubleshooting: Bootstrap 5 Alert not Displaying on Website

I'm experiencing an issue trying to display a bootstrap alert in my HTML code. Here is the code I'm using: <div class="alert alert-success alert-dismissible fade show" role="alert"> text & ...

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression {% assign mypages = site.pages | sort: "order" %} {% for page in mypages %} {% unless page.exclude %} <a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span class="rate">{% include indexmod.h ...

The fixed-top navbar in Bootstrap 5 is not displaying the toggle button

I have encountered an issue with the Bootstrap 5 navbar. When I set it to be fixed at the top, the toggle button does not show up when resizing the browser window. However, if I remove the 'fixed-top' class, the toggle appears as expected. What c ...

Tips on solving the Navigation bar burger problem with HTML and CSS

## I am having trouble making my navigation bar responsive using HTML and CSS as the navigation burger does not appear in mobile view ## To take a look at my code on jsfiddle, click here: [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/ ...

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...

Modify the base URL with JavaScript

Is it possible to dynamically change the href using JavaScript? I attempted to make this change with the code below in my HTML file, but unfortunately, it didn't work: <base href="/" /> <script type="text/javascript"> function setbasehr ...

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...