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)
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 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 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).
I'm trying to design a website for the first time in bootstrap and I've run into a problem I can't get my head around.
I have 5 pages inside the same directory including the index page.
HTML
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Rules
</li>
<li>
Want to Join?
</li>
</ul>
When I load About and Join from my index page, they load fine but when I try to open the Rules page, it redirects to parked-domain.org.
Similarly, when I am in the Join page and try to open the About or Rules Page, I run into the same problem.
I have all the html files in the directory and I can't understand what's the problem?
Any suggestions?
Similarly skeptical as putvande is about if this is the actual HTML you are using in all of those files so I'd recommend you triple check that but here are some thoughts.
If this is actually what is happening, you may be running into a browser/OS bug, what browser and OS are you testing in?
You may want to try adding in ./ before the links to explicitly say you want it to be a relative URL in the same directory, like
<a href="./rules.html">
I tried to simulate the problem. I don't get any problems in opening any page from anyother page. Please try the following code in all pages. Then try.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WWW- WEB</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Index</li>
<li>About</li>
<li>Rules</li>
<li>Join</li>
</ul>
</div>
</nav>
THIS IS INDEX PAGE..!!
</body>
</html>
If i understand correctly, your rules.html page redirects by itself??
Try directing your URL to the rules.html page by entering: yourdomian.com/rules.html
If it redirects im guessing there is a redirect link in your rules.html page. Hope this helps..
Maybe you want your href link to be relative to your base directory (absolute path)? If you are at www.example.com/folder/thispage.html and your base url is www.example.com/ then a link with a leading forward slash href="/anotherpage.html" will actually point to www.example.com/anotherpage.html
If you do want a relative link, try to make the href link an absolute path href="/folder/anotherpage.html" and see if it works. Perhaps you may want to change the base URL by adding the base tag to your HTML header. See here
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.