How to make new page in html? - 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

Related

Why we write header and footer element inside of the body element in HTML5?

When we code in html5 we usually write code in this format
<!DOCTYPE html>
<html>
<body>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
</body>
</html>
And like this
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</body>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning? I mean this way
<!DOCTYPE html>
<html>
<head>
</head>
<header>
<nav>
<!-- Navigation Bar -->
</nav>
</header>
<body>
<p> Middle stuff of the website here. </p>
</body>
<footer>
<p>Author: Hege Refsnes</p>
<p>hege#example.com</p>
</footer>
</html>
My question is why we do not write them separately when all the three tags has different semantic meaning?
Because the semantic meaning they have isn't what you think it is.
The <head> contents data about the document while the <body> contains the parts of the data that get rendered.
A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.

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.

My id links are not working but I dont know why

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>

HTML hyperlinks are merging with other paragraph tags

This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Abbas Maheryar - Inquiries</title>
</head>
<body>
<center><h1>Inquiries</h1></center>
<h3><u>Use this information to contact me</u></h3>
<div>
<center><p><b>Phone:</b=> 818-857-0846
<p><b>Email:</b></p><a href="mailto:abbasmaheryar#gmail.com?Subject=Service Inquiry"target="_top"><p>abbasmaheryar#gmail.com</p>
</center>
</div>
<div>
<p>Inquiries</p> | <a href="./news.html"><p>News</p>
</div>
</body>
</html>
My problem is that when i try to link my email, it also links Inquiries down at the bottom. What can i do to fix this?
Semantically correct HTML should look like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Abbas Maheryar - Inquiries</title>
</head>
<body>
<center>
<h1>Inquiries</h1>
</center>
<h3><u>Use this information to contact me</u></h3>
<div>
<center>
<p>
<b>Phone:</b> 818-857-0846
</p>
<p>
<b>Email:</b>
<a href="mailto:abbasmaheryar#gmail.com?Subject=Service Inquiry" target="_top">
abbasmaheryar#gmail.com
</a>
</p>
</center>
</div>
<div>
<p>
Inquiries | News
</p>
</div>
</body>
</html>
Your hyperlinks are running together, because you have forgotten to close your email hyperlink with </a>.
<p>abbasmaheryar#gmail.com</p>
You also need to close your news hyperlink, which will cause the same problem with any proceeding hyperlinks. This needs closing as well:
<p>News</p>
Also note that <p> tags should not got within <a> tags, as this is unsupported markup in HTML4, and flaky in HTML5. Instead, you should move your paragraphs to the outside of your links, and structure your two blocks of code like this:
<p>abbasmaheryar#gmail.com</p>
<p>News</p>
The full markup you are looking for is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Abbas Maheryar - Inquiries</title>
</head>
<body>
<center>
<h1>Inquiries</h1>
</center>
<h3><u>Use this information to contact me</u></h3>
<div>
<center>
<p><b>Phone:</b> 818-857-0846
<p><b>Email:</b></p>
<p>
<a href="mailto:abbasmaheryar#gmail.com?Subject=Service Inquiry" target="_top">
abbasmaheryar#gmail.com</a>
</p>
</center>
</div>
<div>
<p>Inquiries</p> |
<p>
News
</p>
</div>
</body>
</html>
Hope this helps! :)

How to remove the space created between a sentence and a paragraph in HTML

this is what I am running in jsfiddle.
<span style='font-weight:bold'>Summary: </span><p>This is a test.</p>
The paragraph is being generated by a custom html field so I can't really change that. I was wondering if there is a code that I can put before the paragraph that can remove the space between the 2 sentence. I want it to look like
Summary: This is a test.
<p> tag is block element. If you want to display in a same line Set display:inline to <p> tag
p{display:inline}
<!DOCTYPE html>
<html>
<head>
<title>untitled</title>
</head>
<body>
<span style='font-weight:bold'>Summary: </span><p>This is a test.</p>
</body>
</html>