My id links are not working but I dont know why - html

Id links are not working when I click on one of them its navigate me to wrong heading or top of the webpage but not to that heading.
Example: When I click on link "#headingClimbing" its navigate me to heading with id "headingLead"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Climbing
<br>
Lead
<h1 id="headingClimbing">Climbing</h1>
<h1 id="headingLead">Lead</h1>
</body>
</html>

Related

HTML being changed in, footer being placed inside the body when coded outside the body

I'm just doing a personal project and learning about HTML.
I've got a basic HTML script (full)
<!doctype html>
<html lang="en">
<head>
<title>Frame_Test</title>
</head>
<body>
<p>PARAGRAPH FRAME</p>
</body>
<footer>
<p>Paragraph Footer</p>
</footer>
</html>
When i run the script, the footer is moved inside the body <body><footer></footer></body>. However when i do a fp = urllib.request.urlopen(url)it shows the footer being outside the body.
If the footer is outside the body the xpaths don't work. How do i fix this? I want to be shown the exact HTML code that is going to be shown to the user.
I am using HTML 5.
I have also used the request.get tool too and the results are the same
Edit:
When you compile the HTML file you are given this.
<!doctype html>
<html lang="en">
<head>
<title>Frame_Test</title>
</head>
<body>
<p>PARAGRAPH FRAME</p>
<footer>
<p>Paragraph Footer</p>
</footer>
</body>
</html>`
That's on purpose. The <footer> tag can only be used inside the <body> tag.

href link not clickable (appears to work in chrome inspect)

I hope you guys can help. I am currently doing an online course in HTML and CSS. As part of my course I am practising making webpages. I am having an issue with a header href.
I am trying to link from the header to a place in the body. However when I am testing on chrome it doesn't appear as a hyperlink. Using the inspect function of chrome shows it as a link and when clicked it works. However it doesnt work outside of inspect.
My HTML is below:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="landing.css">
</head>
<header>
<h1>
Heading
</h1>
<h2>Services </h2>
<div class="tag-line">
</div>
</header>
<body>
<h3>
About
</h3>
<div class="about">
<h4 id="services_section">
<div class="services">
Services
</h4>
<h5>
<div class="contact">
Contact
</h5>
</body>
</html>
The hyperlink is working, the problem is that there is no text. You need to put your "Services" inside the tag.
Change
<h2>Services </h2>
to
<h2>Services</h2>

href doesn't appear as a clickable link

I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>

Brackets Live Preview-blank

I'm new to coding in general, and I'm just beginning to code my first website, but when I run this code in Brackets Live Preview, the page shows up blank. Not sure if I'm missing something, or if I have an error in the code. Thanks for your help!
<!DOCTYPE html>
<html>
<head>
<title>My Finger Slipped</title>
</head>
<body bgolor="#000" text="#FFF">
<h1>My Finger Slipped</h1>
</body>
</html>
Actually your pages isn't blank just that you make your body text the color white so you think its blank. Try highlighting the page you will see that there is text there. Typically you would wanna make a separate CSS page for you HTML and link it this way you can change your whole website by just adding div and id's.
HTML
<title>My Finger Slipped</title>
</head>
<body>
<h1>My Finger Slipped</h1>
</body>
</html>
CSS
body {
background-color: #E5DAD3;
}
h1 {
color: white;
}

How to make new page in html?

I am a noob at HTML.
I have a folder on my desktop with page1.html and page2.html.
This is an example of page1
<html>
<h1> Welcome
<title>Website
</h1>
<body>
<p> to page 2
</body>
Link
</html>
Whenever I open page1.html, It just says "Welcome", and "to page 2". There is no hyperlink. What am I doing wrong?
You are missing a </p> tag and the <a> tag should be inside the <body> tag.
<h1> tag is malformed as well. Remember, this is just like parentheses in math. If you open one then you need to close one.
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>
Link to page 2
</p>
</body>
</html>
The A tag should be inside the body tags. You probably also want to close the p tag.
Try something like:
<html>
<head><title>Website</title></head>
<body>
<h1>Welcome</h1>
<p>to page 2 Link</p>
</body>
</html>
Try this. (remember to close your tags!)
<html>
<h1> Welcome
<title>Website </title>
</h1>
<body>
<p> to page 2 </p>
Link
</body>
</html>
You should close <title> with </title>. Fixing that will make the rest of the content show (demo).
As others are saying, you should also close your <p> tags, and move the <a> inside the <body>. Also, <title>Welcome</title> should be outside <h1>, and <h1> should be inside <body>.
It simpler to see with an example. The valid HTML would be:
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p>to page 2</p>
Link
</body>
</html>
See the result here.
Your <title> tag should go in your document's head and your content should all be inside the body. You also need to close all your tags.
Try this:
<html>
<head>
<title>Website</title>
</head>
<body>
<h1>Welcome</h1>
<p> To page 2: Link</p>
</body>
</html>
The title and everything the browser needs to understand the page is better suited to go in between the <head> </head> tags.
The content that has to be displayed in the browser viewport windows has to be in between the <body> </body> tags. As others have mentioned, most of the HTML tags require to be closed.
Also, the <!DOCTYPE> declaration must be the very first thing in your HTML document before the <html> tag.
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
<h1> Welcome </h1>
<p> to page 2 </p>
Link
</body>
</html>
For a quick tutorial or help you can always refer the following website seen below. It's easy and fun. Best of luck!
http://www.w3schools.com/html/default.asp