<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<html>
<body>
<!--Title and Banner-->
<header>
<title>
<h1>Flip 'n' Sell</h1>
<title>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>`
Here is my html for my page so far
and here is my css. As you can see, all that I have done is styled it to where the default margin and
padding is nonexistent. What when I load this up and look at the webpage, there's nothing, nothing at all. What am I doing wrong. I still new to this all by the way.
* {
margin: none;
padding: none;
box-sizing: border-box;
}
Move the opening <html> tag to under the Doctype declaration before the <head> tag, and change or remove the <title> tag from your body.
The title tag is defining a title for the entire document (what's shown on the browser tab) and may be causing some confusion when rendering the page.See W3 School's post on the title tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is a practice website">
<title>Everything Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Resources/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Title and Banner-->
<header>
<h1>Flip 'n' Sell</h1>
<nav>
<ul>
<li>Home</li>
<li>Info</li>
<li>Help</li>
<li>Selling</li>
</ul>
</nav>
</header>
</body>
</html>
The fix was your title tag was not terminated. Needed the corresponding </title> but in reality the title tag does not belong there and should be removed as I did in my example.
Related
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
I'm trying to complete an exercise. In the exercise you create four files: index.html, home.html, about.html, and contact.html. Using jQuery's .load function, you are supposed to be able to use index.html as a template and load the other files within it (still seeing the index.html nav bar). Instead what is happening is the other html files appear to completely replace index.html in the browser. I can't figure out why. I am following the exercise instructions.
Here is the code:
index.html
<!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">
<title>Multi-Page Site & Template</title>
</head>
<body>
<nav>
Home
About
Contact
</nav>
<h1>Index Page</h1>
Here is where the Index Page is.
<div id="content">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-
u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
$(function() {
$("#content").load("home.html");
$("nav a").click(function() {
var href = $(this).attr("href");
$("#content").load(href);
return false;
});
});
</script>
</body>
</html>
home.html
<!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">
<title>Home Page</title>
</head>
<body>
<h1>Home Page</h1>
<p>
This is the home page. All content has been edited for brevity.
</p>
</body>
</html>
about.html
<!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">
<title>About Page</title>
</head>
<body>
<h1>About Page</h1>
<h2>Things to know about the About Page</h2>
<ol>
<li>It's named About Page</li>
<li>It has no styling</li>
<li>It's very short</li>
</ol>
</body>
</html>
contact.html
<!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">
<title>Contact Page</title>
</head>
<body>
<h1>Contact Page</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Billy</td>
<td>Blazer</td>
<td>41</td>
</tr>
</table>
</body>
</html>
The exercise said the return false was supposed to prevent the other pages from replacing index.html. Why does that not work, or what else is wrong with the code?
Thanks!
Please change your code to below code:
In this way type="type/html" is changed to type="text/html"
$(function() {
$("nav a").click(function() {
var href = $(this).attr("href");
$("#content").html('<object type="text/html" data="'+ href +'">
</object>');
return false;
});
});
I try to make a page after tutorial and I have a question why my page jums or moves during refreshing when I clik for example on the bar? On the tutorial the page isn't jump and my jumps??? Click on the blue bar and the page jums or moves what is wrong with it?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Wojciech Bukowski">
<meta http-equiv="X-Ua-Compatible" content="IE-edge,chrome=1">
<title>Philosophia Blog</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<h1>Philosophia Blog</h1>
</div>
<nav>
<div id="topbar">
<ul>
<li>Strona Główna</li>
<li>Pierwszy raz tutaj?</li>
<li>Dlaczego filozofia?</li>
<li>O autorze</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
After seeing your code, if you don't want this to happen remove the href in your anchor tag. However, by the looks of your code, you're trying to make a navbar. So for now, don't worry about what's happening and keep going with the tutorial!
i try to wrap my page head in a header an while i use on my page appears a ">". I can overlapp it with a picture or something but why i appears anyway ?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Wilkommen</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!--Kopfzeile mit Navigation-->>
<header id="header">
<img src="images/logo_placeholder.png" alt="logo" class="logo">
</header>
</body>
</html>
You have an extra > in your comment <!--Kopfzeile mit Navigation-->>
Very simple task that doesn't seem to be working for some reason. I am getting no results when I view in the browser, my styles are not being applied to my HTML. My style sheet is in the same folder as main document with the html. I am previewing the code in chrome on a localhost. Not sure what is going wrong here, any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyles.css">
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
My styles are placed in a separate document called mystyles.css
<style>
.main {
color: blue;
}
</style>
Test in one file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
.main {
color: blue;
}
</style>
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
Or as Tushar said: remove <style> and </style> from your css file
Where is the location of your CSS file?
For your code to be correct, they need to be in the same folder, otherwise you will need to tell the computer which directory to look in by using ../ for each directory back, and then you need to tell it where to look after, ie.
../STYLES/main.css
u just need to remove the opening and closing style tag as it predefined with the link tag.
update your mystyles.css