Im trying to learn html and i ran into trouble,
This is the homepage:
<head>
<title>title</title>
</head>
<body>
<h1>Welcome to ....</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Homepage</h2>
<p>Homepage content...</p>
</body>
The second page:
<head>
<title>Page 2</title>
</head>
<body>
<h1>Welcome to ...</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Page 2</h2>
<p>Page 2 content...</p>
</body>
The Third page:
<head>
<title>Page 3</title>
</head>
<body>
<h1>Welcome to ...</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>Page 3</h2>
<p>Page 3 content...</p>
</body>
I saved them in one folder on my desktop but for some reason whenever I click the 2nd or 3rd page links in chrome it just tells me that the webpage is not found. Please help.
Thanks for the help everyone,
I had spaces in the file names, it got fixed when i removed them. The names must be exactly the same as the .html href links in the files.
Related
I have the following test code, but no matter what I do the toggle button always positions itself to the bottom right of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TestWebsite</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>
<script src="https://github.com/Cognigy/WebchatWidget/releases/latest/download/webchat.js"></script>
<script>
initWebchat(
"https://endpoint-trial.cognigy.ai/1344d45dff864bfb0627d205f7f8835026ab24d0d27384ffabd4740a9c1023b2"
)
</script>
</li>
</ul>
</div>
</nav>
</body>
</html>
I need it to be positioned in an <li> after <li>Page 3</li>
I am developing an ASP.NET MVC web application using visual studio community 2017.
I've been working for a few days with the html and everything work fine until yesterday that after adding some html code to the layout.cshtml file for some reason google chrome (neither IE) will show the elements.
The weird thing is that when I use the"show source code" option I can see that code but if I use the "developer tools" chrome won't show it.
The code is a regular navbar, with no css style yet, and I've rebuild several times the solution with no success.
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
Any idea what is going wrong?
EDIT: The whole .cshtml code
<!DOCTYPE html>
<html lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - website title</title>
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="collapsed-menu-container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="header-title">
<span class="header-title-span">website title</span>
<p class="header-subtitle">text</p>
</div>
<div class="shopping-bag">
<object data='~/Assets/Icons/shopping-bag.svg' type='image/svg+xml' width='20' height='20' />
</div>
</header>
<nav>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
<div>
#RenderBody()
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
I'm using zurb foundation's dropdown menu. I need the dropdown lists to display as inline-block. So far, I haven't any foundation rules that do this. I need help
<html>
<head>
<!--foundation styles-->
<style type="text/css">
.custom-menu{
display:inline-block;
}
</style>
</head>
<body>
<div class="row text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
<li>Item One
<ul class="menu">
<!-- I want to display the lists here as inline
block-->
<li>Item One A</li>
<!--more Links-->
</ul>
</li>
<li>Item Two</li>
</ul>
</div>
<!--foundation scripts-->
</body>
</html>
Currently trying to create a simple dropdown sidebar using bootstrap.
Below is my code in html:
<html>
<head>
<title>Sidebar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<link type="text/css" rel="stylesheet" href="common.css"/>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
Here is my common.css:
.row{
background-color:#ffff99;
border:2px solid black;
}
The sidebar won't drop down when I click Item 1 or Item 2. Any idea what went wrong?
Have a look at the basic template on the Bootstrap site
http://getbootstrap.com/getting-started/#template
At the bottom of the HTML block they have referenced two javascript files which you are missing.
You need to include the jquery.js and bootstrap.js.
The dropdowns work with JavaScript, so you need to include that. Try to add bootstrap.min.js to your application by adding
<script src="bootstrap.min.js" type="text/javascript"></script>
to the head section of your page, or just before the closing </body>-tag of the page.
Additionally, you need to add jQuery, which is done the same way, but make sure you include it before the bootstrap script.
Your dropdowns work with JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.row {
background-color: #ffff99;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="col-sm-3">
<ul class="nav nav-sidebar">
<li class="row">
Item 1
<ul class="dropdown-menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
</ul>
</li>
<li class="row">
Item 2
<ul class="dropdown-menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
A news post would be like
<article itemscope itemtype="http://schema.org/NewsArticle">
<h1 itemprop="headline">Awesome News</h1>
<div itemprop="articleBody">
bla bla bla...
</div>
</article>
What if I would like to include related news and markup them?
<ul>
<li>Related News 1</li>
<li>Related News 2</li>
<li>Related News 3</li>
</ul>
Try using element from WebPage itemtype (from: http://schema.org/WebPage, I know that You are using NewsArticle in this case, but I used Article for this example):
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="name">How to Tie a Reef Knot</span>
by <span itemprop="author">John Doe</span>
This article has been tweeted 1203 times and contains 78 user comments.
<meta itemprop="interactionCount" content="UserTweets:1203" />
<meta itemprop="interactionCount" content="UserComments:78" />
</div>
<ul itemscope itemtype="http://schema.org/WebPage">
<li itemprop="relatedLink">Related News 1</li>
<li itemprop="relatedLink">Related News 2</li>
<li itemprop="relatedLink">Related News 3</li>
</ul>
Google Webmaster Tools sees it like this:
Alternatively You can do it like this:
<ul itemscope itemtype="http://schema.org/WebPage">
<li>Related News 1</li>
<li>Related News 2</li>
<li>Related News 3</li>
</ul>
And Google sees it like this then: