html and python wrapping - html

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>

Related

my nodejs code does not recognize css file

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.

Why do I keep getting errors for stray tags in my HTML?

I am using the W3C validation service report on my code, and I keep getting an error saying "Stray end tag "head", but I can't see what the problem is? My head contains a title and an opening and closing tag? is there perhaps a self-closing child element that influences the parent container? Or something else that I am missing?
<!DOCTYPE html>
<html lang="en">
<head class="page-head">
<meta charset="utf-8">
<meta name="Tobias' Portfolio" content="This is the portfolio website that Tobias Rasmussen has developed during his first weeks as CareerFoundry.">
<title>Home</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <!-- This link goes to a CDN (Content dilivery network), downloading a file that resets/normalizes the client's CSS. THIS MUST COME BEFORE THE LINK TO OUR STYLESHEET! -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet"> <!-- This tag embeds the roboto condensed font from Google Fonts onto my HTML file. Note: it is important to put BEFORE the link to the styles.css -->
<link rel="stylesheet" type="text/css" href="css/style.production.css"> <!-- The link to the external stylesheet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--viewport tag-->
<div>
<header class="page-header">
<img src="img/my_logo.png" alt="Logo with the name Tobias Rasmussen in a black font on a white background" class="page-header__item page-header__logo">
<nav class="main-navigation page-header__item">
<ul role="menubar" class="navigation-list">
<li role="presentation">
Home
</li>
<li role="presentation">
About
</li>
<li role="presentation">
Contact
</li>
<li role="presentation" >
My Work
</li>
</ul>
</nav>
</header>
</div>
</head>
Your head tag should not end at the bottom, as it should not contain the header and other tags, that should be contained in the body.
The element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following elements can go inside the element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
You can read more about it here: https://www.w3schools.com/tags/tag_head.asp
A basic html example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

how to display weather-icons

I'm currently trying to integrate the weather icons. But if I embed everything and insert it into my HTML, then no icon is displayed. The following is my folder structure and the index.html.
My folder structure looks like:
css
weather-icons-wind.min.css
font
weathericons-regular-webfont.eot
weathericons-regular-webfont.svg
weathericons-regular-webfont.ttf
weathericons-regular-webfont.woff
weathericons-regular-webfont.woff2
index.html
index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<title>weather</title>
<link rel="stylesheet" href="css/weather-icons-wind.min.css">
</head>
<body>
<h1>testgt</h1>
<i class="wi wi-day-sunny"></i>
</body>
You need to include the weather-icons.css file and not weather-icons-wind.css
See here, it works fine.
<!DOCTYPE html>
<html lang="de">
<head>
<title>weather</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
</head>
<body>
<h1>testgt</h1>
<i class="wi wi-day-sunny"></i>
</body>

HTML wont link with CSS. they are both in the same folder

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.

Error when validating the head tag

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>