How can I edit and reflect the changes that I have made in the HTML on Chrome dev tools (press f12 on chrome)?
In source tab we can edit the page but when I click on the save button it does not reflect the changes on the original file.
Is there any way to save these changes?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Ribbon</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="menu">
<ul>
<li class="l1">
CSS3
</li>
<li class="l2">
is really
</li>
<li class="l3">
powerful
</li>
</ul>
</div>
<div class="bubble">
<div class="rectangle">
<h2>3D CSS.................................................................... ...................klklklklk Ribbon</h2>
</div>
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />
It doesn't work with IE!</p>
<p>Go to the tutorial!</p>
</div>
</div>
</div>
</body>
</html>
The answer is No, You can not save files back on webserver.. It just saves files locally.
Some Points:-
You can do some local modifications like Changing some Styles of some elements, Updating some JavaScript in source tab, Updating some HTML in Elements tab. But these changes will get lost once you reload the page.
If you own the site, you can always copy the final files from dev tools and update your files on web server.
You can always think of the reason why browsers can't do it for you. I shouldn't say it would be a security flaw. Infact it would be security less. This just mean you can update any site which does not belong to you.
I hope you get it.
It seems that the above message is outdated and actually wrong. Source code editing in Google Chrome is possible and recommended.
http://www.hongkiat.com/blog/google-chrome-workspace/
It's been a while since this is possible. This is from 2013:
http://www.sitepoint.com/edit-source-files-in-chrome/
It cant be changed. You change it temporary, but when you reload it , it is loading from server, with its code, not code you entered. If you find a way to crash a server, then you can save your changes on their files :D
Related
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I have made an HTML file (code will be shown below for reference) using some images and style sheet (from local filesystem).
My Folders are as follows:
Main (contains the StyleSheet Style1.cs and HTML file Page1.html)
Images are placed in folder Main/pics
The style is perfectly visible in Code Editor (VS 2010), but whenever I run the file on Mozilla or Edge, etc, its failing to show any image or even style. Here is screenshot of html in editor:
Yes I have seen the question here but my problem is not fixing even though I tried it on both IE and Mozilla (Edge as well). (And I have followed the preventive measures as prescribed by the question above)
My code is pretty simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="/Style1.css" />
</head>
<body>
<div id="HeaderDiv" class="top-header-blue">
Header
</div>
<div id="CentreDiv" class="content-header-white">
Test
</div>
<div id="footerDiv" class="footer-centre">
CopyRights 2015 -
</div>
</body>
</html>
Any help will be so valuable. Thanks
you have given the wrong path in style as / in before the Style1.css just replace
<link rel="stylesheet" type="text/css" href="Style1.css" />
I'm putting a simple website (HTML 5 and CSS3) for a friend yet I can't understand why the CSS file is not loading and formatting the page.
Here is the synopsis:
I've coded the page using "liveweave" and there are no call out errors and the page is looking as it should.
The .css file exists on the server (in the same dir as the index.html file - I'm referencing it as you would in the header section of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<title>Styleyes Eyewear</title>
<link rel="stylesheet" href="http://styles.herobo.com/styleyes.css">
</head>
<body>
<!-- header area -->
<div class="header_div">
<img src="http://styleyes.herobo.com/img/logo_small.png" alt="Styleyes Eyewear">
<!-- navigation area -->
<nav class="nav">
<ul>
<li>PRODUCTS</li>
<li>OUR CULTURE</li>
<li>STORES</li>
<li>FOLLOW US</li>
</ul>
</nav>
</div>
<!-- content area -->
<div>
<img width="100%" src="http://styleyes.herobo.com/img/homepage_girl.jpg">
</div>
</body>
</html>
Inside "liveweave" you can combine the files (html and css) into the one file. I've done this and uploaded it as a reference and the site, again looks fine - here is a link to that:
liveweave dev page:
http://liveweave.com/XI5QT7
combined code into "source.html" and loaded onto the webserver
http://styleyes.herobo.com/source.html
So Im not sure why when I have my "index.html" seperate to my ".css" its not picking it up? If the .css file exists and I'm calling it from the index.html file as described above, It should in theory format the page.
but this is what I'm getting...
http://styleyes.herobo.com/
Any ideas as to why this is happening? Is it something in my code? I've tried on different browsers and different computers - giving same results.
Thanks!
If your .html and .css are inside of the same directory, you should use relative URI instead of absolute ones (like this):
<link rel="stylesheet" href="styleyes.css">
Also: In your live version, the CSS is actually simply not accessible (Error 404). Is the filename spelled correctly?
I'm about ready to rip my hair out trying to make respond.js work.
We use it on all of our mobile sites, and usually there are no issues at all, but I've recently needed to make it possible to get mobile compatability going on one of our very, very old systems.
I've tried everything I could - I've stripped out all of the extra code from the page, tried an alternative to respond, tried putting the script inline, I've even made a localhost copy. I know it's going to be something stupid but I just can't see it right now.
The entire code, after stripping it all back, is included below - works fine in Chrome, as always. I know respond.js isn't even being applied, because if I put the mobile styles in a media query they don't load either.
I've tried all this on the server too, to make sure it's not a local issue.
Can someone point out the silly mistake please!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" id="property-results">
<head>
<title>Search Results</title>
<link href="http://www.skitts.net/css/results.css" rel="stylesheet" type="text/css" />
<script src="http://searchtest.issl.co.uk/js/respond.js"></script>
</head>
<body>
<div class="property clearing">
<div class="property-info">
<span class="address">CROWN STREET, WOLVERHAMPTON.</span>
<span class="price">
<span class="pre-price"></span>
<span class="price-amount">£10,500 Annually</span>
<span class="post-price"></span>
</span>
</div>
<a href="detailsLite.aspx?chainid=2047&propertyid=467168443" class="image" target="_blank" >
<img src="http://img.issl.co.uk/2047/008/thumbs/GRB-11MH0ZQA_3559464935.jpg" alt="Address" />
<div class="status let">Let</div>
</a>
<p class="description">SEPARATE STORAGE YARD To the north of the units is an adjacent fully enclosed storage yard with separate vehicular access extending to some 1,961 sq.yds. (0.4 a...</p>
<ul>
<li>0 Bed</li>
<li>0 Bath</li>
<li>0 Reception</li>
</ul>
View full details and photography
<div class="ref-more">
<span class="ref">REF: GRB-11MH0ZQA</span>
See more
</div>
</div>
</body>
</html>
Told you it would be something stupid. For obvious reasons, respond.js can't do anything with a stylesheet on another domain.
D'oh.
Here's the compiled fiddle for your project.
It works on every browser for me"
Fiddle
Have you tried adding a meta viewport to your head tag?
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
I want to introduce tabs into my Django web application. I going to see if I could just doo it all in css + html. Now while practising with tabs from http://www.htmldog.com/articles/tabs/, this is what I have done so far.
page1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li id="selected">This</li>
<li>That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
page2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" >
<html>
<head>
<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<base>
<div id="header">
<h1>Tabs</h1>
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
</base>
</html>
Now page1.html, and page2.html are almost the same. The only thing that is different,
id="selected" part just to indicate which tab has been selected. So what I want to do is remove any code that is redundant. For start, I wonder if it even possible I could even cut it to one index.html page as well.
You can't have one page with two different states using CSS + HTML only. Setting of id="selected" needs to result from come code somewhere, either on the server, or on the client.
You can use a URL hash to set the tab state using JavaScript. For example:
mypage.html#tab1
You can have JavaScript look at the value of document.location.hash and set selected on the appropriate tab.
I wouldn't try to reinvent the wheel. Check out jQuery UI. Has tabs built in. http://jqueryui.com/demos/tabs/