href doesn't appear as a clickable link - html

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>

Related

HTML wont link with CSS. they are both in the same folder

This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.

Is it okay to put the nav tag outside of the header tag?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scarface</title>
<link rel="stylesheet" href="normalize/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>The World Is Yours</h1>
</header>
<nav>
<li>Home</li>
<li>Pictures</li>
<li>Contact</li>
</nav>
</div>
</body>
</html>
Is it okay if I put my nav tag outside of the header tag? I know many people/developers like to have the navigation "wrapped" inside of their header tags. Thank you in advance for any help with my question.

trouble connecting css to html file

I'm having some trouble connecting my CSS file to my HTML file. This is my code for the HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class =“links”>
<ul>
<li><a href=“#”>ABOUT</a></li>
<li><a href=“#”>PROJECTS</a></li>
<li><a href=“#”>CONTACT</a></li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
and this is my CSS file so far:
.links li{
display:inline;
}
I'm just trying to get the lists (about, projects, contact) to be presented in a straight line on the top of my page. However, even after applying the css code, the format doesn't change on my webpage and is instead presented on three separate lines. I was wondering if someone could help me figure out what I'm doing wrong?
BTW my CSS file is called styles.css
You're not using the quotes for the href.
<link rel="stylesheet" href=“styles.css">
<!-- ^ -->
This is the reason the CSS file is not loaded.
Use normal double quote.
<link rel="stylesheet" href="styles.css">
The same thing is done in complete code. Change this in all the occurrences.
.links li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>BLAH BLAH | Portfolio</title>
</head>
<body>
<div class="links">
<ul>
<li>ABOUT
</li>
<li>PROJECTS
</li>
<li>CONTACT
</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
I'd recommend you to validate your HTML from W3
<link rel="stylesheet" href=“styles.css"> assuming that the file name of your stylesheet is styles.css AND that file is located in the same file as your HTML page you are referencing this correctly.
Additionally you can try adding the type to your link tag (example below)
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
just change the “ with "
because of this syntax error: browser generates the following error:
GET file:///C:/Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net::ERR_FILE_NOT_FOUND
the following snippet will work fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class ="links">
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>

HTML 5: #Header or <header>

I am a little confused now by html so i've a question about the semantic element:
Should i use like this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<header class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
Or this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<div class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
I read http://html5doctor.com/the-header-element/ about the header element. It tells that it usefull for the headings of a <article>
It doesn't give me information about this situation.
<header> is also good for the page header or for a <section>'s header not just for articles. You can use both your examples without a problem. I recommend you use <header> for easier readability.
According to the HTML Specification
The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
So, you should probably go with the first example, although the second one too can be used without a problem.
Also you can directly use the header element in your CSS like below.
header {
// style the header
}

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