I put the link into all of my html pages and my css only shows up on my first page but none of the others.
<head>
<title>Angels Drawings</title>
<link rel="stylesheet" href="style.css">
<STYLE>
<!--
A{text-decoration:none}
-->
</STYLE>
</head>
<body>
<h1>Angel</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>This is her website</h2>
<p>And this is all the info</p>
</body>
The other pages (Page2.html and Page3.html) are inside the "Pages" directory. You cannot use the same url for the css because it is a relative path. That means it will try to find the css into the "Pages" directory, and it will fail because it doesn't exist.
Answer updated after discussing the real use case with the OP.
In the Angelswebsite.html use the following:
<link rel="stylesheet" href="style.css">
In all pages inside the Pages subdirectory use the following:
<link rel="stylesheet" href="../style.css">
Related
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>
Im getting into my coding class and for for some reason my stylesheet wont connect to my HTML program. They are both in the same folder. Im using NotePad ++
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khira Kathleen Mcgregor</title>
</head>
<body>
<header>
<h1>Testing Header</h1>
<h2> Testing sub header</h2>
</header>
<nav>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
</ul>
</nav>
<footer>
Bazzom bazang... we do the bestest!
<br/>Designed by ©Icabad Enterprises
<br/>
<a href="http://validator.w3.org/check?uri=referer" style = "text-decoration: none">
<img src="images/validation_button_html-blue.png" alt="Validate HTML" />
</a>
<!-- you may need to change the name of your image link to match the one you
uploaded -->
<a href="http://jigsaw.w3.org/css-validator/check/referer" style = "text-decoration: none">
<img src="images/validation_button_css-blue.png" alt="Validate CSS" />
</a>
</footer>
</body>
</html>
And my stylesheet:
body
{
/* you better change this stuff */
margin: 300px;
font-family: papyrus;
color: red;
background-color: green;
font-size:600;
}
Mistake is in a 4th row in your html file, you need to end quotes in href.
<link rel="stylesheet" type="text/css" href="styles/default.css">
If your HTML and CSS file are in the same folder, then the problem lies in your <link>.
The first thing I see is that you missed a quotation mark.
href="styles/default.css/">
This href is also pointing to a folder called "styles" that would contain default.css. Since they are in the same folder, your <link> should look like this:
<link rel="stylesheet" type="text/css" href="default.css">
The mistake is in the 4th line . If you using Both in the same folder then you should write it this way :
`<link rel="stylesheet" type="text/css" href="./default.css" />`
If in case you have a different folder structure then
`<link rel="stylesheet" type="text/css" href="./foldername/default.css" />`
I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</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've started html basics and I'm trying to do simple nav menu with 3 sites like this (index on the bottom is main page and these in "podstrona" folders are subpages):
My code looks just like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
<meta charset="UTF-8">
<title>Podstrony</title>
</head>
<body>
<ul id="menu_lista">
<li>Strona Główna</li>
<li>Podstrona nr 1</li>
<li>Podstrona nr 2</li>
</ul>
</body>
</html>
I tried different paths as you can see but no one can bring me to any subpage. What should I type to get to them? I searched in web but I didn't find anything helpful with this.
You're in podstrony, remove the first slash of the 1st link, and the /podstrony/ from the 2d.
When you leave the slash, it means your page will search at the root directory of your server. Without it, the path is relative to the current file path.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
<meta charset="UTF-8">
<title>Podstrony</title>
</head>
<body>
<ul id="menu_lista">
<li>Strona Główna</li>
<li>Podstrona nr 1</li>
<li>Podstrona nr 2</li>
</ul>
</body>
</html>