I am trying to run my web site off my own server using this: http://fragments.turtlemeat.com/javawebserver.php.
While everything works great when I run my website locally and when I ran it on a real server, I cannot get the CSS to load while I run it through my own server.
Here is my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta content="text/html: charset=utf-8" http-equiv="Content-Type"/>
<title>AddictingJava</title>
<link rel="stylesheet" href="CSS/default.css" type="text/css" />
</head>
<body>
<header>
</header>
<!-- Navigation Start -->
<section class="Nav">
<section class="Logo">
<nav class="HomeLogo">
</nav>
</section>
<ul>
<li><nav class="GamesButton">
</li>
</nav>
<li><nav class="ProfileButton">
</li>
</nav>
<li><nav class="ForumsButton">
<ul id="DropNav">
<li>General Discussion</li>
<li>Contact Us</li>
</ul>
</li>
</nav>
<li><nav class="NewsButton">
</li>
</nav>
</ul>
</section>
<nav class="Download">
Get Client
</nav>
<!-- Navigation End -->
<section class="AboutSite">
<article>
<p>AddictingJava is a site dedicated to bringing you a unique experience with minI game sites. We hope to get user feedback as we grow and make the site a very fun place to visit overall. Although it doesn't seem like this site has very much we are currently planning a lot for it, so be sure to check back regularly to see when we update the site.<br><br>
If you wish to download our client click here or the Get Client button above.
</article>
</section>
<section class="RecentNews">
<figure class="TopRecentNewsPicture">
<img src="websitepics/newnewspic.png">
</figure>
<article class="TopRecentNews">
<h5>7/7/2014 - Announcment.</h5>
<p>Read all about things we are working on as of today.</p>
</article>
<figure class="MidRecentNewsPicture">
<img src="websitepics/newgamepic.png">
</figure>
<article class="MidRecentNews">
<h5>7/7/2014 - Client added.</h5>
<p>The AddictingJava Client was added.</p>
</article>
<figure class="BotRecentNewsPicture">
<img src="websitepics/newnewspic.png">
</figure>
<article class="BotRecentNews">
<h5>3/14/2014 - Website created!!!!</h5>
<p>The begining of everything.</p>
</article>
</section>
<section class="footer">
<p>© 2014 AddictingJava, Inc. All rights reserved. </p>
</section>
</body>
</html>
Check to see that your file path is correct to your css file.
This link tag
<link rel="stylesheet" href="CSS/default.css" type="text/css" />
assumes there is an uppercase CSS folder in the same folder as javawebserver.php.
if it is at the root it would be
/javawebserver.php
/CSS/default.css
Make sure your css-folder is renamed in uppercase. On a local machine (windows file systems) a reference to "css", "CSS" or even "cSs" is a reference to the same folder. So if your folder is named in lowercase the link would work on your local machine.
Linux/UNIX file systems on the other hand are case sensitive so on an Apache web server the link would only work if the folder or file is referenced with the correct upper/lowercase.
Related
Image is not showing in browser using the image tag where am i wrong?
i want to add image in web and i am unable to do it using in visual code i don't know where from image to be added in the URL of image so anyone guide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign up </title>
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper" >
<img src="D:\my-angular-projects\signup-form\src\image\Snap.jpg" alt="Scone O'Clock logo" />
</a>
<p class="Strap">Scones: the most resplendent of snacks </p>
</div>
<div class="IntroWrapper">
<p class="IntroText">
Occasionally maligned and misunderstood; the scone is a quintessentially British classic.
</p>
<div class="MoneyShot">
<img class="MoneyShotImg" src="D:\my-angular-projects\signup-form\src\image\1555932407.jpg" alt="Incredible scones" />
<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.</p>
<div class="Ingredients">
<h3 class="SubHeader">
Ingredients</h3>
<ul>
</ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper">
</ol>
</div>
</body>
</html>
the problem is that your file retrieves the image based on where the html file is somewhere and it does not check the entire computer hard drive.
So if you want the problem fixed you can start from the html files location basically. So if your html file is in the src folder your img tag shall be
<img src="image/1555932407.jpg">
else if you have your html file in the signup-form folder i shall work with this
<img src="src/image/1555932407.jpg">
Hopefully you found this useful otherwise just comment this post.
Visual Studio Code automatically retrieves files from the root directory, so it lists all of the files for you - making it easier to implement images and other stuff. It's one of the main reasons I use VSCode.
The image location depends on where your HTML file is. Use forward slashes when specifying folders/files, and use ../ to go up a directory.
I am having trouble linking my HTML pages together. My code is below.
I have anchored the links the best way I know how to, but when I put them in HTML format and click on the hyperlink, it tells me the file cannot be found.
I have three pages I need to link together, and before I test it out, I put them all in one folder on my desktop and try to pull them up and I run into that error.
Here is my code. For ease of access, they are divided by headers of INDEX, SERVICES, and CONTACT. However, they are three separate html files.
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Trillium Media Design</title>
<meta charset=“utf-8”>
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b> <a href=“index.html”>Home</a>
<a href=“services.html”>Services</a>
<a href=“contact.html”>Contact</a>
</b>
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level.</p>
<h3>Meeting Your Business Needs</h3>
<p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
<footer>
<small><i>Copyright © 2018 Michael Vitucci</i></small></footer>
</body>
</html>
SERVICES
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Trillium Media Design-Services</title>
<meta charset=“utf-8”>
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b> <a href=“index.html”>Home</a>
<a href=“services.html”>Services</a>
<a href=“contact.html”>Contact</a>
</b>
</nav>
<main>
<h2>Our Services Meet Your Business Needs</h2>
<dl>
<dt><strong>Website Design></strong></dt>
<dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
<dt>strong>E-Commerce Solutions</strong></dt>
<dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
<dt><strong>Search Engine Optimization</strong></dt>
<dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
</dl>
<footer>
<small><i>Copyright © 2018 Michael Vitucci</i></small></footer>
</body>
</html>
CONTACT
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Trillium Media Design-Contact</title>
<meta charset=“utf-8”>
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b><a href=“index”>Home</a>
<a href=“services”>Services</a>
<a href=“contact”>Contact</a>
</b>
</nav>
<main>
<h2>Contact Trillium Media Design Today</h2>
<ul>
<li>E-Mail:
<a href=“mailto:contact#trilliummediadesign.com”>contact#trilliummediadesign.com</a>
</li>
<li>Phone: 555-555-5555</li>
</ul>
<footer>
<small><i>Copyright © 2018 Michael Vitucci</i></small></footer>
</body>
</html>
NEW CODE taken from browser source of Index page.
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Trillium Media Design</title>
<meta charset=“utf-8”>
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b> Home
Services
Contact
</b>
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level.</p>
<h3>Meeting Your Business Needs</h3>
<p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
<footer>
<small><i>Copyright © 2018 Hannah Markel</i></small></footer>
</body>
</html>
This is the browser URL I get from the Index page.
file:///C:/Users/Michael%20Vitucci/Desktop/michaeltest/michaelindex.html
This is the browser URL I get from the error page.
file:///C:/Users/Michael%20Vitucci/Desktop/michaeltest/index.html
You are using typographic quotation marks, while you should use double quotes (and this applies to all attributes). For example, instead of: Home.
check all these files are in the same directory as index.html?, else you have to mention relative path from the directory where these files are kept and if they are in same directory still issue try like "./services.html"
<b> Home
Services
Contact
</b>
Have you tried adding the whole address?
Home
Are these files are on the same level, i.e is index.html and about.html placed in same folder if they are placed in the same folder you can directly access that file via "./about.html" from index.html file, if the files are placed in different folders at the same level, then you need to go up one level i.e "../about/about.html";
p.s to avoid any typos you can use tools like emmet for HTML, and to avoid path mismatch issues you can use extensions like path Intellisense.
(Emmet and path Intellisense are extensions available in vs code).
everyone i'm just starting to learn code and having trouble getting images to appear. i'm using xampp. The alt text seem to shows up when I view the code in the browser but no image. im using a windows. here is my code.
<!DOCTYPE html>
<html>
<head> <title> fitness </title>
<link rel="stylesheet" type="text/css" href="C:\xampp\htdocs\static\css\rsstylesheet.css" />
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Fitness</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<img src="C:\xampp\htdocs\static\css\background.jpg" alt="background" width="200px" height="200px" />
<h2> fitness</h2>
</body>
</html>
You should change your src.
At the moment you are referring your whole path, but you only need the part after the location of your file.
So if your file is in the 'htdocs' folder and your image is in the 'static/css/' folder, you can just add 'static/css/' before your image and you are good to go.
You might also consider changing '\' to '/'.
Below is an attempt to link pages together using a menu.
<html>
<head>
<title>Home</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<article id="logo_section">
<img src="webpage_logo.png" alt="logo.png">
</article>
</header>
<nav>
<ul>
<li>Home
</li>
<li>Gallery
</li>
<li>About Us
</li>
<li>Contact us
</li>
</ul>
</nav>
</body>
</html>
My idea was to link pages together in a navigation bar and a logo.
All of the HTML pages are within the same folder and they are spelt correctly in the references. I checked.
First off all, your code for linking has no problems, so everything points at you forgetting to create the files in the same directory, or not creating it at all.
Also, you haven't declared your document (done using at the top of your page), so the browser will just assume that it is html 4.01, and since is new in html 5, your nav tag doesn't do anything, I could mention a couple more errors, but you can locate them yourself here: https://validator.w3.org/#validate_by_input
I am making a website with only two main pages which are "Index" and "About me" pages. After making the templates and everything, I came across a confusing problem where I couldn't really edit the Css style of the about page.
Basically my About and Index page got the same template from my main Html (the one made from scratch) Which i thing it's fine there .. but I would like My About page to have a different look from my Index page, Everytime i make a change on the Editable region that I would like to make disappear from the About page, It also Affects the INdex page. Same for the Stylesheet, I want different colors on the about page but it seems like everytime i do something it affects the whole site.
Here is the picture of the site i made so far.
Homepage and about page
Both pages have the same template, same editable region and the same css and look exactly the same way at the moment but I would like to remove the div class:"notes" from the about page and expand the width of his div id="main-content" change completely almost every even the colors i mean the whole style of the about page, without affecting the Homepage and leave it as it is .. what should I do? Please
Thank you
PS: i am using Dreamweaver cs6.
main dwt html/ same html for the about and index page only difference is the for index and about are not editable
<code>
<!doctype html>
<html>
<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5 elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
<div class="frame">
<div class="fade"></div>
<img src="../images/huxley.jpg"/>
</div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
<div id="icon">
<ul>
<li><img src="../images/twitter.png" width="20" /></li>
<li><img src="../images/behance.png" width="20" /></li>
</ul>
</div>
<div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>
<!--The main heading for the page -->
<header>
<!-- <h1>CI135 Learning journal</h1> -->
<h2> How I mastered web standards in 10 weeks</h2>
</header>
<!--The primary navigation for the page -->
<nav>
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
</ul>
</nav>
<!--Secondary sidebar navigation -->
<aside>
<div class="image"><img src="../images/information.png" width="100"/></div>
<div class="aside">
<!-- TemplateBeginEditable name="aside" -->
<h3> The Weekly posts </h3>
<ol>
<li>Getting started</li>
<li>Learning more about tags</li>
<li>Learning about lists and tables</li>
</ol>
<h3> Favourites</h3>
<ul>
<li> W3C markup validation service </li>
<li> Web platform Docs - Web development for beginners </li>
<li> Html5 Doctor - Helping you implement HTML5 today </li>
</ul>
<h3> Basic Definitions </h3>
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hyper-text markup language - markup language used to structure content</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
<dt><strong>JavaScript</strong></dt>
<dd>Scripting language for adding interactive behaviour to web pages</dd>
</dl>
<!-- TemplateEndEditable -->
<h3> My time table </h3>
<table width="523" height="81" border="1">
<tr>
<td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
<td width="215" bgcolor="#FFFFFF">Monday</td>
<td width="215" bgcolor="#FFFFFF">Tuesday</td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF">9-10 am</td>
<td> </td>
<td>Lecture</td>
</tr>
<tr>
<td height="23" bgcolor="#FFFFFF">10-11 am</td>
<td>lecture</td>
<td>Lab</td>
</tr>
</table>
</div>
</aside>
<!--The main page content -->
<main><!-- TemplateBeginEditable name="mainContent" -->
<article>
<!--Content node -->
<div class="header">
<h1>Week 3: Tables, link images, quoting text </h1>
</div>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
</article>
<article>
<div class="header">
<h1>Week 2</h1>
</div>
<p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
</article>
<article>
<div class="header">
<h1>Week 1</h1>
</div>
<p>ADD COMMENTS ABOUT WEEK 1. </p>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
</article>
<!-- TemplateEndEditable --></main>
<div id="right_side_note">
<div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
<h2>Notes</h2>
<p class="date">March 22, 2011</p>
<p>The W3C defines HTML and CSS as follows:</p>
<blockquote>
<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
<cite>W3C standards for web </cite></p>
</blockquote>
<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<!--Footer content -->
<p class="footer-text">© 2013 Daniel Biakath / University of Brighton.</p>
</div>
</div>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<code>
You should create two separate CSS files and put the styles for each page into the separate files, say about.css and home.css. From the about page, link to the about.css and from the home page link to the home.css.
A CSS link should look something like this:
<link rel="stylesheet" type="text/css" href="home.css">
CSS files are loaded in order so you will need to take that into consideration if styles are supposed to override each other. If the following is declared in the head and both files have a style with the same name, the style in the home.css file will be used. You might not be seeing changes made to the about.css if this is the case. The most important CSS file should be listed last.
<link rel="stylesheet" type="text/css" href="about.css">
<link rel="stylesheet" type="text/css" href="home.css">
If your styles are currently inline and look like this:
<style type="text/css">
/*YOUR STYLES HERE*/
</style>
you can make the changes in each file directly or if you want cut everything from inside the tag and put it in the appropriate css file.
If after making changes to your CSS nothing is happening, it is possible, depending on the system you are using, that cache is coming into play. Even though you make changes, the version served by the web server is the same. CSS files seem to do this a lot to me if I'm not careful. If that's the case, reset the website and clear browser cache and you should be good to go.