We may have to place lot of LINK elements and SCRIPT elements in the head elements of an HTML page. Also there can be a lot of pages with same above mentioned elements. Therefore can we put all the of them in a one file and place only that links containing file in HTML head element?
Eg: Something like,
<link href="links.something"> etc
instead of
<HEAD>
<link href="css/home.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/images.css" rel="stylesheet" type="text/css" media="screen" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>`
<HEAD>
In your case it would be best to do PHP includes For example a page would be coded in parts: header.php, footer.php, and the main content would be loaded dynamically too.
<html>
<head>
<?php
include('header.php'); //PHP file that holds all the links(not anchor links) and scripts
?>
</head>
<body>
<?php
include('body.php?page=whatever');
include('footer.php');
?>
</body>
</html>
By doing so, you'd only have to edit one file to make changes to many.
You could generate them dynamically from a server-side script (say, PHP), I've sen this done using the CodeIgniter MVC framework, though you could do it with straight PHP.
You could also use a templating engine (like Smarty) to do the same thing.
Straight php:
<head>
include('js_files.php');
</head>
CI MVC (in the controller), this is fairly involve & there are much better examples on the web:
$jsfiles = $this->load->model('head_files');
$head = $this->load->view('head', $jsfiles, false);
I'm not sure about Smarty as I'm only starting in it myself, this is the main reason I started with it, unfortunately I've lost the link to the tutorial I saw.
Related
I have my HTML file and my CSS file in the same folder, but I can still not find it using the following code:
<link rel="Stylesheet" href="style.css">
If I continue coding, it is stating that "Some content has been disabled in this document" as my program is stating. If I remove the code, it continues to work just normally. I do not know why this is happening, as I have made HTML and CSS programs before, and I was using the same technic.
Okay, so I found a solution. I normally can find my sheets easily using only the name of the file. But It did not work this time, so I did what fmsthird said, trying to put the exact path of my file instead. I totally forgot this feature, and it fixed it. I still do not know why I could not have done the other thing, and I spent 30 minutes trying to fix this.
The solution was so easy, and I totally forgot about it haha.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="favicon.png">
<title>Website Title</title>
</head>
<body>
</body>
</html>
you need to add the line into the head as displayed. Also it needs to add: type="text/css"
I created the CSS folder and named it. I added this to my header in HTML but the changes aren’t happening.
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css" />
You mentioned you've created a CSS folder. Then include that folder name in the href
<link rel="stylesheet" type="text/css" href="CSS_FOLDER_NAME/haiku-styles-shaun.css" />
Probably your CSS file isn't in the same directory as your HTML file, you provided the wrong name of your CSS file (also check that your CSS file's extension is .css). Solve these and try again.
You have to include each file you need separately.
e.g.:
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myButton.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myPhoto.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myFooter.css" />
Most user don't need all their style definition at the same time. To save bandwidth you have to choose.
You said that you created a folder but you didn't write it on the path. Try adding the css folder before the file name like this:
<link ref="stylesheet" type="text/css" href="folder/file.css" />
Furthermore I suggest you to include versioning in your css to avoid browser caching when you refresh. To do that every time you update your css change the number at the end in the link:
<link ref="stylesheet" type="text/css" href="folder/file.css?v=1" />
The <link> tag is used to link to external style sheets. You have to use something like this :
<link rel="stylesheet" type="text/css" href="Folder-Name/Stylesheet-Name.css">
Make sure that your href address is setup properly otherwise it won't load in your HTML page .
Note: The element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
In HTML the <link> tag has no end tag. In XHTML the tag
must be properly closed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
As I continue to add on to my website, for each HTML file i add i need to include
<!-- Source for .css style rules -->
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
Its not an awful method, and it works every time. I just know there has to be an easier method.
I know theres the but that doesn't seem like the easiest method.
I know of the js library require.js and that's wonderful but if I dont think i can use that for my CSS files.
What I would like is a method of referencing one file, loading one file, and it then has some sort of structure or code that then imports all other required CSS and JS files.
What made me see that i needed this sort of system was to select all the files for bootstrap without loading each one like I have loaded my CSS and JS above.
Im sure im missing some key terminology so please help me along with new terms or ideas that Im on the cusp of but haven't found the verbiage to be able to describe yet.
For CSS, there are always #import statements. See here on MDN: #import
Define a single CSS file and use #import url("some-other.css") to load all of your CSS files through the singular, "main" CSS file.
For CSS, you could use a CSS preprocessor like LESS or SASS to bundle all your files into a single file through a build step. The same principle applies to JavaScript as well through some sort of bundler whether it is r.js for require.js AMD style application or Browserify for more CommonJS style source files.
There is nothing wrong with referencing a bunch of files in your index, but it is best practice to build your app with something like Gulp before deploying to production. Your gulp process should combine all css and js into respective minified css and js files. There are a lot a performance benefits to doing this. Sorry to be so brief
You haven't said what your back-end language is, but if you are using PHP you can do something like this:
INDEX.PHP
<?php
include 'inc/head.inc.php';
?>
<body>
<div>All your stuff follows here</div>
<?php include 'inc/nav.inc.php'; ?>
inc/head.inc.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MyDomain</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="some stuff I do" />
<meta name="keywords" content="stuff, things, quality" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="/Hexdra/assets/css/style.css" />
<link type="text/css" href="/Hexdra/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- JavaScript for using a custom file for resources. -->
<script src="/Hexdra/assets/scripts/angular.js"></script>
<script src="/Hexdra/assets/scripts/modernizr.custom.05819.js"></script>
<script src="/Hexdra/assets/scripts/siteScript.js"></script>
<!-- Angular Apps-->
<script type="text/javascript" src="/Hexdra/app/tank.js"></script>
<script type="text/javascript" src="/Hexdra/app/form.js"></script>
</head>
I'm using difference CSS (almost 10) and I have a web page that contains multiple webpages and each page with thier specified CSS but the result gives me Headache all the CSS mixed with each other, I tried to declare the CSS separately in the head of each pages like this:
<head>
<title>My web page</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
but it doesn't work, any idea how to make a CSS local declaration so I can use it in a specific elements without recreate all the HTML by class=" " . I want to apply different CSS style in a webpage that contain multiple webpages any declaration to do that?
I'd suggest you come up with a common CSS for all the pages (though you might not even need it) - sets of rules that all of them would use, like defining body styles, reset rules for some elements, etc... Then, in every page you would include that CSS first, and then the webpage-specific CSS after. Like this:
Page 1
<head>
<title>My web page 1</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page1.css"/>
</head>
Page 2
<head>
<title>My web page 2</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
<link type="text/css" rel="stylesheet" href="css/page2.css"/>
</head>
etc...