The code snippet in html format is showing as below.
there are three requirements listed below for reference as well.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images and Links - Fast Broccoli!</title>
</head>
<body>
<div class="content">
<h1>Fast Broccoli! - About Us</h1>
<!--
Use images and links to build an "About Us" page for Fast Broccoli!,
the world's first one-hour organic produce delivery service.
You'll need:
1. A main image with source: https://upload.wikimedia.org/wikipedia/commons/0/03/Broccoli_and_cross_section_edit.jpg
and alt description: Fast Broccoli!'s Logo
2. A link to the relative path: index.html
with the text: Return Home
3. A second link to the absolute path: https://shop.fastbrocolli.com
The link should target a new browser window.
The link should contain an image
with source: images/cabbage.png
-->
</div>
</body>
</html>
This strangely looks like a school project. I could just give you the solution to your assignment, but I believe it would be better if you learn it.
Hope you enjoy!
Image Tag
Here's an example img tag from W3Schools:
<img src="smiley.gif" alt="Smiley face">
This is pretty simple. The source is smiley.gif and the alt description is Smiley face. Now do you know how to make your own image tag? Otherwise, click the link above for more details.
Links
Relative
A relative link is, well, relative. Where it goes depends on where the current URL.
A relative link is anything that does not begin http://, https://, file:///`, etc.
In the most basic sense, it's the current URL + the relative path. (Less simple, it's telling the browser it's in the same folder as the current page).
Example: If I added a link on this page that looks like:
Click me
It would go to:
https://stackoverflow.com/questions/47361572/relative-and-absolute-html-path/hi.html
Because:
https://stackoverflow.com/questions/47361572/relative-and-absolute-html-path + hi.html
If it begins with a forward slash (/), it will take the domain of the site and add to it. (Less simple, it's telling the browser the file is in the root directory of the site).
Example: If I added a link on this page that looks like:
Click me
It would go to:
https://stackoverflow.com/hi.html
Because:
https://stackoverflow.com + hi.html
Absolute
An absolute path is absolute. It doesn't add to the end, but is an entirely new domain.
Example: If I added a link on this page that looks like:
Click me
It would go to:
http://example.com/
Because it begins with http://
Notes
In all the examples, the text of the links was "Click me".
More info on file paths.
More info on the target attribute. (Allows you to "target a new browser window.")
i m getting this error "I can't find your main image with src="https://upload.wikimedia.org/wikipedia/commons/0/03/Broccoli_and_cross_section_edit.jpg". Please add it."
<h1>Fast Broccoli! - About Us</h1>
<img src="Broccoli_and_cross_section_edit.jpg" alt="Fast Broccoli!'s Logo"
style="width: 60px;"/>
Return Home
<a href="https://shop.fastbrocolli.com">
<img src="images/cabbage.png" />
</a>
Related
If I have a page www.example1.com/foo/test.html as follows:
<head>
<base href=http://www.example2.com/>
</head>
<body>
<a href=#foo>foo</a>
...
<a name=foo />
</body>
Then when I click "foo" it takes me to http://www.example2.com/#foo instead of the current page's foo. I suppose this sort of makes sense, but is there a way to do a page-local named anchor jump when <base> points somewhere else?
Note that test.html is named named dynamically, so an absolute path in the href=...#foo isn't an option. Some JS could be, but strait html would be preferred.
This is expected behavior, documentation says that all relative links are relative to including anchors:
http://w3schools.com/tags/tag_base.asp
See also:
href="#" redirects to the index page but not to the current page's top
I am trying to add a logo to my webpage. I am using CSS and eclipse. The image shows as a broken image and I am not sure why. The image I am trying to use is in the folder specified :
Does it need to be added in CSS or can someone please help me to know where I am wrong. Thank you.
<body>
<div class="jumbotron">
<h2 style="text-align: center; color: white;"> New Plan </h2>
<a href="#">
<img src="resources/img/logo.png">
</a>
</div>
</body>
This wouldn't be a css issue if the browser is showing the broken link icon. That icon means the path to the file is incorrect or it can't retrieve it.
To confirm this, take resources/img/logo.png and add it to the end of the URL where your HTML is, excluding any files. For instance, if your URL is http://example.com/index.php, you want to make the URL read as http://example.com/resources/img/logo.png, without the index.php.
You will need to tweak this URL until the image shows up in the browser, since you didn't provide a URL where the HTML is running. When that happens, the URL in the address bar is the one you can use for the image URL.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?
I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.
You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by
To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.
To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before
I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.
To link from a page to another section just use
my first div
i write this code in a html page but it doesn't show the image what is problem?
<html>
<head>
<title>register page</title>
<body>
</head>
<table align="center">
<tr>
<td>
<img src="C:/xampp/htdocs/me/images/register.jpg" width="600" height="395">
</td>
</tr>
</table>
</body>
</html>
You have provided a full file path, not a relative path or URL.
If your website lives in htdocs, try changing the path to /me/images/register.jpg
If you're running it served from the actual server, the image src is invalid. It needs to be relative to your application root. In other words, if you application root is C:/xampp/htdocs/me, then your image tag should actually be <img src="/images/register.jpg" width="600" height="395">
did you check if is it the image available on that folder?
it would be nice if you are using relative path:
Relative Path URLs
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information listed filename sub-directories are listed without any preceding slashes weekly/filename links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is located in C:/xampp/htdocs/me/ folder on your site.
Determine the location of the page or image you want to link to. The Beginner's Resource Center is located here: C:/xampp/htdocs/me/images/
Compare the locations and to decide how to point to it From this article, I would
need to step up one directory (to/library) and then go back down to the beginning directory
Write the link using the rules listed above:
<img src="images/register.jpg" />