CSS and Image in HTML - 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.

Related

Index.html not accessed when opening website

I have a website, norway-yv.epizy.com. I use InfinityFree to host (I just want to use the website for practise and as a fun hobby project). They use filemanager.ai to manage my files. I have a vast system of files and folders (see below), and instead of having to upload every file and every folder I have made it so that everything is in the website folder. This way, I do not need to upload everything every time I change something in my local copy of the website. I want norway-yv.epizy.com to redirect to norway-yv.epizy.com/website/home.html, and have done this trough an index.html file. However, it only gives error 404.
My files
.htaccess
DirectoryIndex index.php index.html index.htm index2.html
ErrorDocument 403 https://infinityfree.net/errors/403/
ErrorDocument 404 https://infinityfree.net/errors/404/
ErrorDocument 500 https://infinityfree.net/errors/500/
I have configured http://norway-yv.epizy.com/website/myerrorpages/[errornum].html as error page path in InfinityFree control panel
htdocs (folder, automatically created)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>norway-yv</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=website/home.html">
</body>
</html>
website (folder, manually created)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>norway-yv</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=home.html">
</body>
</html>
home.html
<html lang="en">
<head>
<title>norway-yv | home</title>
<link rel="icon" type="image/png" href="../files/icons/favicon.png">
<link rel="stylesheet" href="style/normal.css">
</head>
<body>
<header>
<a href="home.html">
<img class="logoTop" src="files/icons/favicon.png" alt="Logo" />
</a>
</header>
<h1>This is the website of norway-yv</h1>
<p>I'm sorry for the horrible look of my website, but it is the best I can do</p>
<h2>About me</h2>
<p>I am a hobby developer who likes programming in Python. I am a student in Norwegian upper secondary school, year 1.<br>
Some of my best projects can be found <a href="projects.html" >here.</a><br>
Feel free to contact me trough GitHub.</p>
<h2>Contact</h2>
<p>
<a href="https://stackoverflow.com/users/17496608/norway-yv" >StackOverflow</a><br>
GitHub (via GitHub e-mail)<br>
</p>
</body>
</html>
projects.html
<html lang="en">
<head>
<title>norway-yv | projects</title>
<link rel="icon" type="image/png" href="../files/icons/favicon.png">
<link rel="stylesheet" href="style/normal.css">
</head>
<body>
<header>
<a href="home.html">
<img class="logoTop" src="files/icons/favicon.png" alt="Logo" />
</a>
</header>
<h1>My projects</h1>
<p>I have made tons more than this, mainly for scientific and mathematic purposes, but these are some of the projects I am most proud of:</p>
<h2>kode24-calculator</h2>
<p>An ongoing project, where I try to calculate expected wage for Norwegian developers using many different parametres.<br>
For more information, see here. </p>
<h2>binary-calculator</h2>
<p>A project that sort of is finished, but still has a long way to go. Currently, it can calculate the sum of two binary numbers up to 32 bit size and output it.<br>
For more information, see here. </p>
</body>
</html>
My comments in the end
I have much more than this in my website, with several other folders. I can add them to the question if that is necessary. But I hope not.The same problems do occur when previewing (using edge showing the local version). So it's more of a problem with my files than InfinityFree.
Maybe it's not working because you are missing the <base> tag in your <head>.
The base tag defines the base URL, from where relative URLS are redirected.
For more

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.

xampp loading image problems

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

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.

local path generated before hyperlink and page not found error the code <a href=“https://delicious.com/jodi.reed/browsers”> link </a>

I’m just trying to insert an html absolute link to my texteditor on Mac and I get this on the browser url:
file:///Users/yasser/Desktop/211Website/Labs/https://delicious.com/jodi.reed/browsers...
and file not found in Firefox or Chrome or Safari. When I delete the path before the http the page opens fine...
The code is below-
<!DOCTYPE html>
<html>
<!-- Lab2 Yasser Abdelhalim -->
<head> <meta charset="UTF-8">
<title> Lab2 Yasser Abdelhalim </title>
</head>
<body>
<h1> Yasser’s Web Development resources </h1> this is description for heading number one
<div>
<h2> Background </h2>
<ul>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
</ul>
<h2> Web programing </h2>
<ul>
</div>
</body>
</html>
I think (without seeing anything else) you just need to add the initial part of your URLs, as your ocmputer is thinking they're local, relative files (in the same directory as the file with this code in).
Try using this code:
<!DOCTYPE html>
<html> <!-- Lab2 Yasser Abdelhalim -->
<head>
<meta charset="UTF-8">
<title>Lab2 Yasser Abdelhalim</title>
</head>
<body>
<h1>Yasser’s Web Development resources</h1> this is description for heading number one
<div>
<h2>Background</h2>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
</html>
Try typing the full address in here, including speech marks (double quotes).. sometimes when copying and pasting URLs it copies the formatted speech marks from some fontstyles.
Apache is the webserver that runs on Linux, it pretty much is a foundation or base of every website around (with some exceptions).
Are you using Windows or Mac? You would be better to be working in a proper web server environment (I can explain)