code in app.js:
app.listen(PORT_)
app.use('/',route);
i enter following code in route.js
app.use(express.static('routing'));
router.get('/',(req,res)=>{
res.sendFile(path.join(__dirname,'./MainPage.html'));
});
html file is as follow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="../CSS/style.css"> -->
<link rel="stylesheet" type="text/css" href="./Style.css">
<title></title>
</head>
<body>
<h1 class="header">Please select following items:</h1>
<ol class="ol">
<li>Get all product</li>
<li>Get by ID</li>
<li>Post product</li>
</ol>
<input class="inp" type="text" placeholder="1,2,3">
<button class="btn"type="submit">Go</button>
</body>
</html>
location of html and css file is as fllow:
app.js ---> root
route.js ---> root/routing/route.js
MainPage.html ---> root/routing/MainPage.html
Style.css ---> root/routing/Style.css
following code does not recognize css file only recognize html file.
Related
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="designpage" type="text/css">
<title> Viktoria Niemann </title>
</head>
<body>
<h1>Dear Vik</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/-LOVE-love-36983825-1680-1050.jpg">
</body>
</html>
I am not sure why html is not linking to css. I think i have written a code correctly
Try this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title> Viktoria Niemann </title>
</head>
<body>
<h1>Dear Vik</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/-LOVE-love-36983825-1680-1050.jpg">
</body>
</html>
change your link tag(rel property) to
<link href="style.css" rel="stylesheet" type="text/css">
Make sure your style.css is in the same folder as your HTML file.
since you are using directly the filename as path.
make your rel "stylesheet" like this ------> rel="stylesheet"
<link href="style.css" rel="stylesheet" type="text/css">
to achieve this you would change the rel to stylesheet instead of designpage.
The rel is required because it specifies the relationship between the document you are working on and the document
<link href="style.css" rel="stylesheet" type="text/css">
I am programming a flask application. In that I have a main html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
{% block content %}{% endblock %}
</div>
</body>
</html>
for my stylesheet I linked this css file:
.navigation {
list-style-type = none;
}
But when I am running the file the list still looks like this:
I want my list to not have the dots in front. What am I doing wrong?
This code will work, you need to apply that style to the list element itself.
.navigation li{
list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table generator</title>
<link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
<link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<div class="container">
<ul class="navigation">
<li class="navigation-item">
Home
</li>
<li class="navigation-item">
Instructions
</li>
</ul>
</div>
</body>
</html>
This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.
i have main.html page where i have 3 href link.
and i have my data in excel file with 3 columns.
what i want to do is when i click on the link in main.html it should fetch data in excel file by using python and display it in html page on browser.
this is what i have written now:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="HOME.css" />
<meta charset="UTF-8">
<title>Racdm GUI</title>
</head>
<body>
<div id="navigation_bar">
<ul>
<li><a class="active" href="HOME.html">iDRAC</a></li>
<li>System</li>
<li>Life Cycle Controller</li>
<li>BIOS</li>
<li>NIC</li>
<li>STORAGE</li>
<li>FC</li>
</ul>
</div>
</body>
</html>
I am getting this error when validating my html code
element head is missing a required instance of child element title
<!DOCTYPE html>
<html lang="en">
<div id="head">
<link rel="stylesheet" href="stylesheet.css">
</div>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>All Posts</li>
</ul>
</nav>
Well.. try removing
<div id="head">
<link rel="stylesheet" href="stylesheet.css">
</div>
And replace it with
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
This will surely work well. Trust me.
Your head also needs a title tag.
<title> My website </title>
The whole thing should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My website</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
Your page content
</body>
</html>
An html tag requires a head tag, which in turn requires a title tag. You're missing these things. Instead, you're trying to use a div as a head, which is very invalid. I think you meant this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Page Title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
...
it mut look like this:
<head> is a tag.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>All Posts</li>
</ul>
</nav>