It is not linking up and I have no idea why. Is it getting confused with other files? I am not entirely sure what to do as I have been trying for the last hour. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Desktop/task/style.css"/>
<title>It's all about me!</title>
</head>
<body>
<header>
<h1>Welcome to my website</h1>
</header>
<ul>
<li>About me</li>
<li>What I love</li>
</ul>
</body>
</html>
h1 {
color: red;
}
Unless you have a Desktop folder at the same level as the html document, your path to the css file is wrong.
Your path to your css file is likely not correct double check that it is correct. also you have some css outside of a style tag (That should be in the head in the first Place) at the bottom of the page ensure that you delete that before continuing
Looks like your css file is not accessible to your web page. make sure it is in the same root location of your webpage.
example:
webpage location: c:\MyWebPage\mywebpage.htm
css location: c:\MyWebPage\Desktop\task\style.css
Related
[I've tried seemingly everything and nothing is working for this seemingly simple and mundane css and html. I'm using external css as I was told that's easier on a larger scale for later projects but right now I'm just learning basics. Before you ask, yes, they are both in the same folder and using developer tools I can see that it is properly linking, but it appears the browser isn't reading it and it just looks like a text doc. Running the code works perfectly through here so I don't understand what's wrong. I'm using safari on MacBook and have also tried chrome - should I use a different browser or?
Edit: As you can see in the images my user profile includes Null (part of my name) I believe that's what's messing with it, is there a way around that?
h1{
color: red;
}
p{
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>First Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>First code</h1>
<p>Welcome to my first set of code!</p>
</header>
<NAV>
<ul>
<li><a href "#">nice</a></li>
<li><a href "#">cool</a></li>
<li><a href "#">rad</a></li>
</ul>
</NAV>
<footer>
<p>Nice amiright?</p>
</footer>
</body>
</html>
There actually 2 ways to achieve that. The first Method has been already stated and that is to link the external CSS inside the head-element of your website:
<link type="text/css" rel="stylesheet" href="url to the external .css" />
The second method however has not been mentioned yet which imo is the better one. Create an own .css file and link your website to it. Then add following line at the very top of your css file. That allows you do overwrite or change specific element of the css that you might cant access on your own:
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
We have two various types of Href
Absolute Path [it's added through an External Link]
Relative Path [it's added through an Internal Link]
The way you wanted to have is definitely the first item of the above-mentioned issues.
It'd be like this:
<link rel="stylesheet" type="text/css" href="http://example.com/[Path]/file.css">
<!DOCTYPE html>
<html>
<head>
<title> Daniel Erhabor | Home</title>
<link rel="stylesheet" href="JS_CSS_HTML_HW_css_file.css" type="text/css" >
</head>
<body>
<div id = "headerblock">
<h1>
Daniel Erhabor Ph.D
</h1>
</div>
<ul>
<li> Home
<li> Course
<li> Projects
<li> Hobbies
<li> Friends
</ul>
</body>
</html>
This is my HTML page that is supposed to link with JS_CSS_HTML_HW_css_file.css that is in the SAME folder. I don't know why when I open developer tools and I try to view sources for the CSS file it's empty. I don't understand.
Here is my JS_CSS_HTML_HW_css_file.css
#headerblock h1{
background: #BEBEBE
}
All this is supposed to do is to make the header have a grey background. Why isn't it working?
1) You are missing a semi colon in your css:
#headerblock h1{
background: #BEBEBE;
}
2) If the page is not loading you should see the file not found message in the developer console when you load the page.
The code is perfectly alright works.
I believe you must try changing the file name and removing the underscore JS_CSS_HTML_HW_css_file.css to a simpler stlylehtml.css
Also add ; after #BEBEBE
This woudld work.
Cheers.
I created a website for my mom a while back and I finally want to make it cleaner and make a universal header and footer so that I only have to change the one document when I update it instead of every page. I spent a while looking around, but I was unable to make anything work. I have a good understanding of HTML and CSS, but I'm pretty much a novice and haven't really used javascript, if thats what this entails, so detailed help would be really appreciated! How do I go about this? (If it matters, the website is hosted on DreamHost).
Here is the basic HTML code I have for the header and footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="wrapper">
<header>
<img src="img/logo.png" alt="(logo)">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PRODUCTS</li>
</ul>
</nav>
</header>
<footer>
<p> Email: email#gmail.com </p>
<div id="logo">
</div>
</footer>
</body>
</html>
You can use a library like react or a framework like angular 2 or vue js to extend the HTML
You could use PHP to do this. You would simply include header.php for example. It is possible to use any other server-side code.
It is also possible with JavaScript, but keep in mind that JavaScript is executed on the Client side, so that some users could experience issues due to deaktivated javascript inside the browser.
I have a navigation bar that I want to have in a seperate html file and then use in all my other pages. I feel like it will make the code look neater and more organized. However, I'm having some trouble. I started by trying to fix the home page and this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="import" href="navigation.html">
</head>
<body>
<br><br>
<div class="zoom pic">
<center> <img src="images/technology.png" alt="portrait"> <center>
</div>
</body>
</html>
This is the navigation bar in a seperate html file, but in the same exact directory as all my other html files.
This is the navigation.html file if it helps anything:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
<ul>
<li>Home<br/></li>
<ul> <li>General Information <ul>
<li>About</li>
<li> Conference Fee</li>
<li>Hotel</li> </ul>
<li>Keynote Speakers<br/></li>
<li>Call for Papers<br/></li>
<li>Important Dates<br/></li>
<li>Major Areas<br/></li>
<li>Paper Submission<br/></li>
<li>Login<br/></li>
<li>Registration<br/></li>
<li>Conference Program<br/></li>
<li>Guidelines<br/></li>
<li>Comments<br/></li>
</ul>
</nav></b>
My current issue is that I'm not seeing the navigation bar now in my home page! Any ideas on how tackle this? Any help is greatly appreciated!!!!
PHP helps you do this.
Keep your navigation bar code in navbar.php file and include this file in a page you want the navigation bar. For example if you want to include the navigation bar in index.php file, you can just include it like this.
include_once("navbar.php");
You need a server to run php code. You cannot directly include a HTML file in an other HTML file.
This can be done using jQuery also. here, u write nagivation bars html in navigationBar.html and in whichever page u want to include it in, create an empty element with id #nav and in script replace the contents of it.
$.get("navigationBar.html", function(data){
$("#nav").replaceWith(data);
});
this can also be done using html5 imports tag http://blog.teamtreehouse.com/introduction-html-imports
check this link if u want.
I am quite new to using HTML coding. Basically, when i try to link my pages together via . If you can look at my coding, and please try and help me somehow, that would be great.
<html>
<head>
<title> Information about Birmingham </title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="style" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="Header">
<h1> Information|Birmingham </h1>
</div>
<div id="Nav">
<h2>
<ul style="list-style-type:none">
<li>Home</li>
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
</h2>
The href tag to point to the html file you'd like to link to. If you home file is index.html it should be Home
The others would be something like this:
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
Just keep in mind that these need to point to html files that are in your root directory.
Your links must include the full file name "i.e home.html rather than home" and you should also make sure that the files of the other pages are in the same directory as the current page for that to work.
Another problem in your code is that you forgot to close the <ul> tag. You must add </ul> just before </h2>.
Also, it is not recommended that you place your list inside a heading tag <h2> in your case. If you are doing this for styling reasons you should better use csss to style your list.