Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
i am trying to create a simple webpage for our team.
So far, I have created 3 links in the home page(referred as: Page1), clicking on each link in Page1 will take me to a new pages(Page2, Page3 and Page4 ). Page2, Page3 and Page4 will contain the daily team status reports which will changes daily but their file names will remain the same. Ill manually delete the old ones and put the new ones daily. Only Page1 will remain constant which is basically for navigating to the above 3 pages alone.
Now, in each of Page2, Page3 and Page4, Im trying to display the 3 links(links to Page2, 3 and 4) at the top of the page.
Can this be done without making any changes to Page2, Page3 and Page 4(as this would mean I have to make changes daily)? Can this be done by adding some piece of code to Page1 alone
If you really want to have the HTML for your links in just one place, I would recommend to dig in a server-side programming language.
Let´s say you have four different (static, no server-side programming) HTML files, like page1.html for your home page, page2.html, page3.html and page4.html.
So, because the file names remain constant you could place the same HTML markup for your links in all four HTML files. Now you should use CSS to style the links the way you like. This CSS goes into another file, `styles.css' , for example.
Example HTML for page1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page 1</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this is the reference to your css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page 1</h1>
<ul class="navigation">
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</body>
</html>
Example HTML for page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page 2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this is the reference to your css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page 2</h1>
<ul class="navigation">
<li>Page 1</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
<!--
here comes the content you will change daily
-->
</body>
</html>
Example CSS for styles.css
.navigation {
padding-left: 0;
list-style: none;
margin-left: -5px;
}
.navigation > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
By the way, index.html would be a better name for your home page, so you can reach the file with a URL like http://www.yourDomain.com and don´t have to place the file name in the URL like http://www.yourDomain.com/page1.html.
Now you have the same HTML markup for your links in your four HTML files. That means any time you have to change the HTML of your links, you have to do the same changes in all HTML files. But you have the code which is responsible for the layout in just one place.
Because you just want to change the content of the three pages daily, this approach seems reasonable to me.
Related
I'm currently having problems with linking things on VS Code. I created a folder for a project and put all files really organized inside, linked everything right and still get nothing.
Folder with all the files
The code is this one:
<!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">
<link rel="stylesheet" href="/spider-verse/assets/css/home-page-styles.css">
<script src="/assets/scripts/card-hover-animation.js"></script>
<title>Spider-Man | Multiverse</title>
</head>
<body>
<nav class="s-menu">
<ul>
<li class="s-menu__item">
Homepage
</li>
<li class="s-menu__item">
Tobey Maguire
</li>
<li class="s-menu__item s-menu__icon">
<img src="/spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
<li class="s-menu__item">
Tom Holland
</li>
<li class="s-menu__item">
Andrew Garfield
</li>
</ul>
</nav>
And the CSS is huge but a preview is This, that you can see by the breadcrumbs that it's in the right folder. And I still get this page instead of something like this..
I've also tried extremely simple codes like this 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">
<link rel="stylesheet" href="/test/style.css">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
with this CSS:
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
And if I link it as a style.css file, I get no stylization. And the problem is not with CSS because if I put like this:
<!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">
<style>
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
</style>
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
It works perfectly. AND if I link an external link like this:
<!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>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
<img src="https://br.web.img3.acsta.net/newsv7/21/12/09/15/32/4725744.jpg" alt="">
</body>
</html>
It also works. (the external link, the internal still nothing).
I've looked for this problem everywhere but didn't find a solution and tried some answers like this one, this one and adding the dot before the direction (like ./folder/file.css instead of /folder/file.css) and I even reinstalled VS Code but it didn't work :(
Please help!
Based on your directory structure, in your link and image references, you don't need to provide a more "full" path, you can reference it correctly using a relative path, stepping into the next folder lower in the directory using a dot and a slash ./, like this:
<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">
If you must use a more "absolute" path, then you have to step out upwards from the current directory using 2 dotted ellipsis and a slash ../ as many times as needed depending on how deep the folder goes like this:
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
But the first approach is the more understandable one.
In the same manner, the link and script files should be referenced this way:
<link rel="stylesheet" href="./css/home-page-styles.css">
<script src="./scripts/card-hover-animation.js"></script>
As with the image tag, if you wish to use a more full path then, the link and script files should be referenced this way:
<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>
As this answer states you must use ../ before picking any images and on vs code you don't need to write the whole file name just use ../ and it will show you all folder and file in that particular folder. you just need to pick it.
or the simple solution to this problem is that just copy the image in the same folder as the main html file is and just write the image name vs code will identify it, just pick it from there.
<li class="s-menu__item s-menu__icon">
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
According to your shared screenshot i assume your index.html is in the same directory like your images folder. Then this will work localy.
<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">
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>
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!
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
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>