I've been practising some HTML5 as of recent, and come to a halt. I've added an anchor to a part of the code, but when I try to link to it, the link goes straight to the base link. Is there anyway to get past this?
This is the snippet of the code:
<head>
<base href="http://en.wikipedia.org/wiki/" target="_blank" />
</head>
<body>
(...)
Link to anchor: Link!
(...)
<a name="link">Welcome!</a>
</body>
Thanks!
Try:
<span id="link">Welcome!</span>
The name attribute is for form elements in HTML5.
<head>
<base href="http://en.wikipedia.org/" target="_blank" />
</head>
<body>
(...)
Link to anchor: Link!
(...)
<a name="link">Welcome!</a>
</body>
Related
Download attribute in tag is not working at all. I've tried everything that I can do but still I am not able to do it. I just simply want to make a download button.
You can see my code which is written below:
<!DOCTYPE html>
<html>
<head>
<title>
test
</title>
</head>
<body>
<p>
<a target="_blank" href="img1.jpg" download>Click to Download</a>
</p>
</body>
</html>
I don't know where I am wrong. really appreciate your help. and If I am asking previously asked question please give me the link of it also.
In order for the download to work,
you have to specify the path to the image you want the user to download.
If the item cannot be found the download will not work.
<a target="_blank" href="./images/img1.jpg" download>Click to Download</a>
<!DOCTYPE html>
<html>
<head>
<title>
test
</title>
</head>
<body>
<p>
<a target="_blank" href="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" download>Click to Download</a>
</p>
</body>
</html>
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 using the following code to attempt to place an image of myself into my personal website:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
The photos directory is in the same directory as the html page. I have tried placing the photo in the same directory as the html page and it doesn't work. I have tried using .JPG instead of .jpg. I have tried executing the code without the alt tag. I have tried using backslashes instead of forward slashes in the file path. I have looked for typos in the filename and there are none. I feel like my current code should be working with no problems. But the image will absolutely not show up. Any ideas or help would be greatly appreciated.
EDIT: I have corrected the code above to fix an elementary mistake, namely including the body inside of my head instead of separating the two. The picture still does not show.
The HTML structure needs to be:
<html>
<head>
</head>
<body>
</body>
</html>
You are putting the body tag inside the head tag.
Also, if the images directory is in the same one than the html, you need to remove the first slash, just use photos/mainphoto.jpg
So you can try:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src="photos/mainphoto.jpg" alt="Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
Also I recommend you not to use any spaces before or after the equal signs, these are good practices.
Well, your code is like this
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</head>
</html>
You have <body> element inside your <head> element.
It should be like this
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
And for that image, the address must start from your html file.
So if you have structure like this
web/
index.html
photos/
cutePuppy.png
You will have <img src="photos/cutePuppy.png" alt="Cute puppy">
Try using the full path of the image listed in its properties.
FIXED
In the Windows 10 filesystem, the picture file extensions are evidently hidden. I had named the picture "mainphoto.jpg", without realizing that the Windows 10 filesystem had already automatically added a .jpg extension, which was hidden in the file structure. Therefore, the name of the file being referenced was actually "mainphoto.jpg.jpg".
Apologies for the silly mistake, and thank you to everybody who offered suggestions!
Does it show as 404(not found) in the web inspector of the browser you are using. Chances are that the folder with the image and possibly the image it self don't have permissions great enough to allow access. You will have to change the permissions via terminal or possible in the editor(IDE) you are using.
I have some HTML code I'm trying to embed into a site.
The code is an iframe that is supposed to have a bunch of links in it, but when I click the links, they just load the page inside the iframe block.
Here is the code:
base.html
<head height="200" width="300">
Text
</head>
<div>
<body>
<iframe height="200" width="300" src="test.html"></iframe>
</body>
</div>
test.html
<head>
Link
</head>
Is there a way for me to tell the link NOT to load inside the frame?
I already know of a workaround which is to add "target="_blank"" to the link so it opens in a new tab.
Try adding the target attribute as shown below
Link
the tag _parent will target the iframe's immediate parent window.
the tag _top will target the top window.
Try adding target="_top" this should target the parent URL instead of the iframe URL
<head>
<a target="_top" href="file:///Users/Jean/base.html">Link</a>
</head>
I recently migrated my website from xhtml transitional to html5. Specifically so that I could make use of valid block level anchor tags. <a><div /></a>.
When running validation I encountered the following error:
Bad value publisher for attribute rel on element link: Keyword
publisher is not registered.
But according to this page, that is exactly what I am supposed to do.
https://developers.google.com/+/plugins/badge/#connect
My code:
<link href="https://plus.google.com/xxxxxxxxxxxxxxxx" rel="publisher" />
<a href="https://plus.google.com/xxxxxxxxxxxxxxx?prsrc=3" style="text-decoration:none;">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="" style="border:0;width:16px;height:16px;"/>
</a>
I can't figure out how to implement this in an html5 compliant way. Can anyone help?
1st) Within <head>:
<!DOCTYPE html>
<head>
<!--head code-->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
2nd) Anywhere within <body>:
<body>
<!--body code-->
<div class="g-plusone" data-size="small" data-annotation="none" data-href="https://plus.google.com/u/1/+StackExchange/"></div>
</body>
This code is valid AND "FRIEND'S" with http://validator.w3.org/
You can change https://plus.google.com/u/1/+StackExchange/ for any google+ url you desire (https://plus.google.com/xxxxxxxxxxxxxxxx/)
Documentation
Google sends help: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2539557&topic=2371375&ctx=topic.
You need to add ?rel=author to your <a>s href value and delete that non-conformant <link> tag:
<a href="https://plus.google.com/12345?rel=author">
<img src="https://ssl.gstatic.com/images/icons/gplus-16.png"/>
</a>
Well, you must add two links inside head tag and body tag as follows:
<head>
<link href='https://plus.google.com/xxxxxxxxxxxxxxxxx' itemprop='publisher'/>
</head>
After that, use the the google+ format in the body. It should be below body tag:
<body>
<a href="https://plus.google.com/xxxxxxxxxxxxxxxxx" rel="publisher" />
.....
.....
.....
</body>
here's the screenshot.
Oops! sorry, I need 10 reputation to load Image in this page ... LOL
From the two formats, we will be validated by Structured Data of Google Webmaster and validator.w3.org.
As you know that in microdata schema uses publisher as one of the itemprop, therefore, in body tag or in html tag should be like this:
<body itemscope="" itemtype="http://schema.org/Blog">
*) that's it when your site type is a BLOG.
(Love this forum) tina-andrew-blog
NB: I found this: https://productforums.google.com/d/msg/webmasters/lciIK8HdJXE/kcv8EipRzzcJ
But, I do with the code above, It works well :(