In the Project of GWT/GXT.
in project.html.
I added the favicon and change the color of the body and also put an image .
But when i run the web project. i cant see the the change in body color, favicon and the Image.
My web Projects starts from login page which is in a center of on the RootPanel.
I want add a Image and Fevicon in HTML
In my test page test.html i can display favicon and image.
gwt project.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Page</title>
<link rel="icon" type="image/png" href="fevicon.png" />
<link rel="stylesheet" type="text/css" href="gxt/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="project.css" />
</head>
<body style="background-color:d8d8d8;>
<img class="normal" src="main.png" width="700" height="80" />
<script language='javascript' src='project/project.nocache.js'></script>
<iframe src="javascript:''" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html
>
As #Manolo suggest check working folder. i.e. war/modulename and also clear cache of browser. because if browser already have cache of it so sometime changes does not reflect.
It seems you are modifying a page which is not being copied to the working folder of your app
when running in web mode.
Sometimes eclipse does not update files from sources to working dir.
Try to find the file test.html in other folders and compare their sizes.
In your src/main/webapp changes not seen at a moment. Refresh project and restart development mode. If any changes recompile your project(Last choice).
Related
I'm learning how to make websites, and I'm stuck on a problem that I can't find a solution to, I hope you can help me.
I can't connect either a CSS file or an image for the site icon, but if I use it works.
I'm using Node.Js for backend with EJS for frontend.
That's how I connect image:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href='src/images/favicon-32x32.png'>
<title>Title</title>
And that's for CSS file:
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1 class="ws_title">Title</h1>
My css file and html template are in the same directory: src/views/project
And all the images are in the src/images
I've tried using different browsers but it's not working
Do you know what's the problem might be?
Updated: I’ve just found that with EJS I must use express.static, but I don’t understand what should I do with it, can you explain?
I cloned Your project and made some adjustments.
Rename images directory to public directory.
Move style.css file from /views/pocketsage/ to public directory.
Add in server.js file Serving static files, this line of code app.use("/", express.static(path.join(__dirname, "public")));
server.js add path, const path = require("path");
main.ejs change href to <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
main.ejs change src <img src="avatar.png" alt="" class="info-card__photo" />
Restart the Server and browser ctrl+f5 and Voila.
Folder&file server.js and main.ejs code snippets and output in terminal of VScode:
Output in browser
http://127.0.0.1:3002/pocketsages
and console with AVATAR and FAVICON:
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
I'm trying to make a web site in code, and I added an image to the page: <img src"../img/image.png">. When I load the page in a browser I get a square box, and it says it could not load image.
I have tried it in Windows 10 and Kubuntu 18.04 - same error. I get the same error when I make a CSS file. If I put the image in the root folder it works. Any ideas?
Should be
<img src="../img/image.png">. You are missing the =
did not work here the top of my html page same error only way it works it I put ../WebSite/img for the folder . But when I ftp the page no logo or background . But the files are there
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/Main.css" />
</head>
<body>
<img src="../img/Logo.png">
</body>
</html>
I created the assets folder, that folder include the images folder then i paste the png type image (bill.png) in image directory.
Here is the code with image path
<img src="{{ asset('assets/images/bill.png') }}" class="center-block">
Important thing
assets folder in public directory
Put the image in the same folder as the webpage is and try to change source to that image name.
OR
Try clearing your browser cache data if you want image to be loaded from assests folder.
I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!
I am creating a website in HTML, and I face a problem.
I have a CSS folder, and I want to be able to access it from every directory
root:
/css
- /skel-noscript.css"
- /skel-noscript.css"
/js
- init.js
- skel.min.js
- skel-panel.min.js
- html5shiv.js
/Downloads
-/Download.html
/Downloads.html
/index.html
...
Now I have trouble when I try to access the stylesheets in Downloads/Download.html
my <head> code:
<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="../js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-panels.min.js"></script>
<script src="../js/init.js"></script>
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
</head>
When I use this code, the stylesheets don't work.
when I delete the <noscript> around the links to the stylesheets, they do work, but my website is totally messed up.
What is happening?
When I use this code in the root directory, it works fine
css files are not being added from tags in this case, is for browsers that don't support js or if js is off.
go to the "init.js" file(one that u attached just before the tag) in your js folder and check it... css is being added from their so change directory paths for css from there.
regards
Are you turning off the javascript when testing this? <noscript> is only activated when the visitor has no scripting enabled. If you want to be able to link the css files always you have to get rid of the tag.
I suggest you to create a file something like header.phtml and call all the files you need to render the template.
<head>
<title>TITLE</title>
<noscript>
<link href"<?= $this->getCssPath(); ?>" rel="stylesheet" type=text/css />
</noscript>
</head>
and greate a file where you create a class something like
<?php class MyTemplate {
public function getCssPath() {
return 'css/skel-noscript.css';
}
}