How to link html pages beforehand uploading process - html

I am a novice front-end developer trying to build a website using HTML, CSS, and bootstrap. I would like to ask you a couple of questions regarding the uploading process. I am about the purchase a domain for the website I have been building so far. However, I have encountered some problems. Currently, I can link my HTML files to provide the transition between different pages within the website(As my code shown below). My question is, how can I set the correct directory to provide the transition between the HTML pages. As far as I know, after the uploading process to Cpanel, href directory has to be modified. How can I provide the right href directory to carry out transitions within the website before uploading my website to public_html? Thank you in advance.
<li class="nav-item active">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\index.html">Mainpage<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\aboutme.html">About me<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\services.html">Our Services<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\contact.html">Contact<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\enver\Desktop\practice\blog.html">Blog<span class="sr-only">(current)</span></a>
</li>

No need to link like
href="C:\Users\enver\Desktop\practice\contact.html"
use
href="contact.html"

you can do this you create a website folder at the desktop, in this folder add a pages folder where you will put your other service pages and others. You keep the index file.html at the root.
Mainpage(current)
About me(current)
Our Services(current)
Contact(current)
Blog(current)
when you're going to send herberger just the pages and index folder.html your css and don't forget to reach your css again in the pages services and other href=".. /css/.."

Related

Navbar Angular, data toogle, nav menu

I want to create a form in angular, I have one problem. I would like this form to have a tab menu that does not move to subpages, so as not to lose data. I used to have a similar form not in Angular and used this method. But I don't know what's best in angular, not to make subpages, just everything on one page, so that the data when switching to tabs don't disappear. Please help.
<li>
<a data-toggle="tab" href="#User-details">User details</a>
</li>
<li>
<a data-toggle="tab" href="#Account-details">Account details</a>
</li>
<li>
<a data-toggle="tab" href="#validateSubmit">ValidateSubmit</a>
</li>
<li>
<a data-toggle="tab" href="#submitFlag">submitFlag</a>
</li>
<li>

How can I open a specific tab from a different page?

I have a website with two different services, a venue and an office space. Two pages are previews for the venue and the office space, and a specific page is for the packages/rental information. The page with packages has two tabs for the services. I want to be able to click a button on the office page and be directed to the office tab on the service page, and vice-versa on the venue page.
This is the code for the tabs on the packages page:
<!--Tab List For Services-->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<!--Tab List Items-->
<li class="nav-item" role="presentation">
<button class="nav-link active" id="event-tab" data-bs-toggle="tab" data-bs-target="#event" type="button" role="tab" aria-controls="event" aria-selected="true">Events</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="office-tab" data-bs-toggle="tab" data-bs-target="#office" type="button" role="tab" aria-controls="office" aria-selected="false">Office</button>
</li>
</ul>
This is the code for the buttons on the office page:
<a asp-page="/Gallery" class="custom-button custom-button-blue my-3 mx-3" style="font-size: x-large">See More of the Space</a>
<a asp-page="/Services" class="custom-button custom-button-blue my-3 mx-3" style="font-size: x-large">Plan Your Next Event</a>
I originally thought I could do something like this:
<a asp-page="/Gallery" asp-route="office-tab"> </a>
but found the tabs don't show up in the url, they're all contained in the page. I went into inspect mode and noticed when I click a tab, the active status switches from one tab to the other. I think the solution will be along the lines of changing aria-selected to true, but not sure how to do that from a different page.

Boostrap classes not showing in browser

I am new to bootstrap, I am trying out different things and when I add the classes to different elements some work, and others dont show up in dev tools. The class on the ul works, but on the li and 'a' doesnt.
`
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link-active" href="">About Us</a>
</li>
`
I tried to restart the project and reconnect bootstrap but neither solution worked.
It's because you put an extra - between nav-link and active class. The correct way is this one <a class="nav-link active" href="#">About Us</a>

How to add existing WordPress menu item links to custom designed new header?

I designed a custom header for my website. The website is not fully designed, so I kept the old theme and just changed front-page.php with new-header.php and new-footer.php include.
I linked existing menu items in new-header.php like below,
<li class="">
<a class="nav-link" href="/about-us/">About Us</a>
</li>
When I connect blog,
<li class="">
<a class="nav-link" href="/blog/">About Us</a>
</li>
it's working. (it's a different folder outside wp-content)
but when I connect other pages like about us / contact us, it's showing critical error.
Has anyone experienced this kind of issue? please let me know...
Few points needs to cross check
Hope you have defined new header like
get_header('new');
Please refer to for more details
https://www.webascender.com/blog/how-to-create-multiple-headers-footers-in-wordpress/
Resave your permalinks.

Editing a header with css

I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)