My h1 not appearing after adding my navigation bar and background-color-CodePudding

Hello, after adding my navigation bar in background-color my h1 is not showing up. I'm trying to center my h1-h6 tag in the center of my website so I can style it to a different font type but when I add my h1 tag with the , , or the h1 tag still doesn't appear.

<!doctype html>
   <html lang="en">
    
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!---Font Awesome-->
    <script src="https://kit.fontawesome.com/e093169393.js" crossorigin="anonymous"></script>
    <!---Google Fonts-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
    
    
    
    <!---CSS Stylesheets-->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/all.min.css">
    
    <!---Font Awesome-->
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    
    <!--Bootstrap Script-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></<>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
    </head>
    
    <!---ICON--->
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    
    
    <!---NAVBAR MENU-->
    <html>
        <head>
            <body>
                <h1>HERES MY H1</h1>
            </body>
        </head>
    <nav >
        <div >
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        </html>
    
    <!---About Me --->
    
    < !----Toggle--->
    <div  id="navbarTogglerDemo02">
    
    
    < !----Icon Widgets--->
    
                <ul >
                    <li search nav-link" href=""><input type="text" placeholder="Search"></a>
                    <li >
                    <a  href=""><i ></i></a>
                    </li>
                </ul>
            </div>
    </nav>
    
    <!---SHOPPING ICON--->

CodePudding user response：

I think your trying to run before you can walk. It's good to learn new things but step by step.

First try to understand what a webpage is and how it's made.

Try to understand The DOM DOM basics

Then the different tags (div, span, p, h1, h2, h3, em, style, script, head, body, html)

Then navigation using <a href="some-website-address.com">Cool Website Dude!</>

Forms are VERY hard for a beginner as they involve more than just front-end code (HTML, CSS, JavaScript) as now you're writing back-end code that talks to the server and a database if you have one!

Basics first, then more complicated topics.

I have updated your code but not sure if it will give you what you want.

You only have 1 pair of html, head and body tags in a webpage btw.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!---Font Awesome-->
        <script src="https://kit.fontawesome.com/e093169393.js" crossorigin="anonymous"></script>
        <!---Google Fonts-->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>



        <!---CSS Stylesheets-->
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="./css/all.min.css">

        <!---Font Awesome-->
        <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

        <!--Bootstrap Script-->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></<>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    </head>
    <body>
        <nav >
            <div >
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <ul >
                    <li search" ></label>
                        <a  href="">
                            <input name="search" type="text" placeholder="Search">
                        </a>
                    </form>
                    </li>
                    <li >
                    <a  href=""><i ></i></a>
                    </li>
                </ul>
            </div>
        </nav>
        <h1>HERES MY H1</h1>
    </body>
</html>

CodePudding user response：

@deemyBoy

Thank you for educating me on how to use html and fixing my code