xampp loading image problems - html

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 '/'.

Related

how to use image in visual code it's not working?

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.

Nav bar with different pages

I know that this question might sound stupid, but I'm a beginner so just hear me out. I have a nav bar with text but no links( About, Project, etc with no pages for the user to go to). How do I add the pages for the user to click on the nav bar and go to them( for example, when the user clicks on "About", he is transferred to the about page that I made). I'm using HTML5 and CSS3. Any help is appreciated!
Code for the list:
<ul class = "list">
<li>Welcome |</li>
<li>About |</li>
<li>Projects</li>
</ul>
Create a folder. Open a text editor and paste the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
</head>
<body>
<ul>
<li>Welcome</li>
<li>About</li>
</ul>
<h1>Welcome</h1>
</body>
</html>
Save the file as "welcome.html" in the folder you just created.
Create another text document and past the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<ul>
<li>Welcome</li>
<li>About</li>
</ul>
<h1>About</h1>
</body>
</html>
Save that file as "about.html" in the same folder.
Open "welcome.html" in your browser and see if it works.
The attribute href is the path to the file where it is located on your computer.

CSS and Image in HTML

I am learning CSS through the Mozilla Developer Network. I save through Codeanywhere and Dropbox.
My CSS and image are not showing up when I download it. I've checked code, directories and Github examples and still nothing. Any ideas would be appreciated. This is the problem area:
<!DOCTYPE html>
<html>
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>My test page</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet'  type='text/css'> 
</head>
<body>
<h1>
Another Attempt at Coding
</h1>
<img src="HP-Firefox-icon.png" alt="The Firefox logo">
<p>
What is your website about? </p>
<ul>
<li>Do you like dogs, New York, or Pacman?
</li>
<li>What does your website look like</li>
<li>What's the background color?</li>
<li>What kind of font is appropriate: formal, cartoony, bold and loud, subtle?</li>
</ul>
<p>
Read the Mozilla Manifesto
</p>
The path for CSS and image is not correct. Make sure the CSS and image file name is located in same directory and having the same name.
<img src="HP-Firefox-icon.png" alt="The Firefox logo">
<link href="styles/style.css" rel="stylesheet" type="text/css">
It will only work if you find the correct url for the source files and put it. If you downloaded the example, then make sure all files are downloaded.

Include HTML Navigation Bar in All Pages

I have a navigation bar that I want to have in a seperate html file and then use in all my other pages. I feel like it will make the code look neater and more organized. However, I'm having some trouble. I started by trying to fix the home page and this is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="import" href="navigation.html">
</head>
<body>
<br><br>
<div class="zoom pic">
<center> <img src="images/technology.png" alt="portrait"> <center>
</div>
</body>
</html>
This is the navigation bar in a seperate html file, but in the same exact directory as all my other html files.
This is the navigation.html file if it helps anything:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
<ul>
<li>Home<br/></li>
<ul> <li>General Information <ul>
<li>About</li>
<li> Conference Fee</li>
<li>Hotel</li> </ul>
<li>Keynote Speakers<br/></li>
<li>Call for Papers<br/></li>
<li>Important Dates<br/></li>
<li>Major Areas<br/></li>
<li>Paper Submission<br/></li>
<li>Login<br/></li>
<li>Registration<br/></li>
<li>Conference Program<br/></li>
<li>Guidelines<br/></li>
<li>Comments<br/></li>
</ul>
</nav></b>
My current issue is that I'm not seeing the navigation bar now in my home page! Any ideas on how tackle this? Any help is greatly appreciated!!!!
PHP helps you do this.
Keep your navigation bar code in navbar.php file and include this file in a page you want the navigation bar. For example if you want to include the navigation bar in index.php file, you can just include it like this.
include_once("navbar.php");
You need a server to run php code. You cannot directly include a HTML file in an other HTML file.
This can be done using jQuery also. here, u write nagivation bars html in navigationBar.html and in whichever page u want to include it in, create an empty element with id #nav and in script replace the contents of it.
$.get("navigationBar.html", function(data){
$("#nav").replaceWith(data);
});
this can also be done using html5 imports tag http://blog.teamtreehouse.com/introduction-html-imports
check this link if u want.

HTML Coding. Can you use <a href> within a 'li' (list)?

I am quite new to using HTML coding. Basically, when i try to link my pages together via . If you can look at my coding, and please try and help me somehow, that would be great.
<html>
<head>
<title> Information about Birmingham </title>
<link rel="stylesheet" type ="text/css" href="style.css" />
<link rel="style" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container">
<div id="Header">
<h1> Information|Birmingham </h1>
</div>
<div id="Nav">
<h2>
<ul style="list-style-type:none">
<li>Home</li>
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
</h2>
The href tag to point to the html file you'd like to link to. If you home file is index.html it should be Home
The others would be something like this:
<li>Shopping</li>
<li>Art</li>
<li>Food</li>
<li>Nightlife</li>
Just keep in mind that these need to point to html files that are in your root directory.
Your links must include the full file name "i.e home.html rather than home" and you should also make sure that the files of the other pages are in the same directory as the current page for that to work.
Another problem in your code is that you forgot to close the <ul> tag. You must add </ul> just before </h2>.
Also, it is not recommended that you place your list inside a heading tag <h2> in your case. If you are doing this for styling reasons you should better use csss to style your list.