I have a problem, when i click run in visiual studio and then i click the button
" [ https://www.coursera.org/learn/duke-programming-web][1] Programming Foundations with JavaScript, HTML and CSS
will the corsera website open. But when i make this in codepen.io for coding,that i click the button, then the website can not open.
Why happend that? `
if i click on the button of visiual studio then the corsera website will open, but if i do that from the website for coding, then corsera will reject it, so the website won't open?
<html>
<head>
<meta charset="UTF-8">
<title>Curriculum Vitae</title>
</head>
<body>
<em><h1><b><p>Curriculum Vitae:</p></b></h1></em>
<br>
<div>
<h3>Photo:</h3>
<img src="https://miro.medium.com/max/1400/1*l2AFc33U7grIeMML0a0unQ.jpeg" width="200px" height="150px">
</div>
<div>
<h3><p>Contact details:</p></h3>
<ul>
<li><h4>Name:   Alex Alex </h4></li>
<li><h4>Email:   example#gmail.com</h4></li>
<li><h4>Mobile number:   005910280000</h4></li>
</ul>
<hr>
<b><h3>Education:</h3></b>
<ol start="10">
<li><h4> 2011-2014   University education</li>
<li><h4> 2008-2011   high school </h4></li>
<li><h4> 2005-2008   Secondary education</h4></li>
<li><h4> 2000-2005   the basic education</h4></li>
</ol>
<hr>
</div>
<div>
<em>Notes:</em>
<div>
<p>For more cv you should to visit this cv-website </p>
</div>
<div>
for more hacks photos cklic the photo
<a href="https://www.shutterstock.com/search/website%2Bhack" target="_Parent">
<img src="https://image.shutterstock.com/image-photo/computer-hacker-cyber-attack-concept-600w-553688845.jpg" alt="Hack Photo" width="25" height="25">
</a>
</div>
</div>
<h2>Button as link</h2>
<p> click the button to see corsera website</p>
<button onclick=" document.location='https://www.coursera.org/learn/duke-programming-web'"> Programming Foundations with JavaScript, HTML and CSS</button>
</body>
</html>
CodePen will render your HTML page within an iFrame.
Some sites will try to block that.
Other links to other sites will work.
Try like a Wikipedia link, for example:
<button onclick="document.location='https://en.wikipedia.org/wiki/Intentionally_blank_page'"> Programming Foundations
with JavaScript, HTML and CSS</button>
It's not your code issue, it's because of codepen. Happy coding!
To elaborate on #foreza's response, the link is working but the site is blocked because of Cross-Origin request sharing (CORS) which you can read about here
In codepen, you're trying to request a site from a different origin and that site blocks cross origin requests.
A site that doesn't block cross origin requests, like wikipedia, will work
or
A site with the same origin (codepen in this case) will also work.
In a codepen:
<button onclick="javascript:document.location='https://codepen.io/gpspake/pen/NWGevvj'"> Programming Foundations with JavaScript, HTML and CSS</button>
Example: https://codepen.io/gpspake/pen/NWGevvj
In codepen, right click and click inspect to open your browser's developer tools, then click on the network tab to see the requests that are being sent when you click the button.
Related
I don't know how to really explain it, but whenever I'm using the anchor tag like the one below, the last element is still underlined and clickable. I'm a beginner, so I'm too sure why this is happening, I've even watched videos to see how to remove that link, but I don't know how to really describe more than this.
<body>
<a href = "www.google.com </a>"
<p class= "Google"> Google </p>
<p> The website above is google. </p>
</body>
</html>```
You have a typo in your code.Below is correct version.
<body>
Google
<p> The website above is google. </p>
</body>
</html>
Try this:
<body>
<a href="www.google.com">
<p class="google"> Google </p>
</a>
<p> The website above is google. </p>
</body>
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
A little background about what I am trying to do— As of recent I have started to read Jon Ducketts “HTML&CSS” book which I am enjoying thoroughly. I finished HTML and now am beginning the CSS side of the book.
What I am trying to accomplish is making a website that shows everything the book has covered and essentially have a navigation bar to give users easier access to go throughout my website to learn about topics that are not yet clear to them (myself).
The problem is that while I am trying to style my text color it isn’t changing color and for the life of me I cannot figure out why.
Is the problem within my link with the wrong file paths I specified in the head or is it a problem with how I have my classes set up in HTML and CSS?
My CSS code is at the bottom of the page that I tried to create classes with. Since you need a “10 reputation” to post photos I’ll be writing my HTML / CSS file name and folder path here.
Name- newWebsiteFinalCSS.css
Folder Path- C:\Users\MyName\Desktop\Website
Name- newWebsiteFinal.html
Folder Path- C:\Users\MyName\Desktop\Website
.headingcolors {
color: red;
}
.p {
color: red;
}
<!doctype>
<html>
<head>
<title>Final HTML CSS Website</title>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
</head>
<!-- This section i want to create a link to different topics within my own website so it is easier to go throughout the site and
only look at things you want to be reasearching about if you come across a problem with a topic about HTML or CSS. -->
<header class="topnav">
Home
Text
Lists
Links
Images
Tables
Forms
Extra Markup
</header>
<!-- insert navigation bar here -->
<body>
<h1 id="top" class="headingcolors"> Welcome to my first Web Page created with HTML & CSS </h1>
<p>//// During the process of making this website, I will be showing you how I learned to do simple webpage making with very easy to understand the code. This code includes languages called HyperText Markup Language (otherwise known as HTML), and a styling
language called Cascading Style Sheets (otherwise known as CSS). This website was made possible by reading a book called <i>HTML&CSS; design
and build websites</i> by Jon Duckett. I am a fan of Jon Duckett's book and it made me feel excited to read something that was so interesting and brought color to such a fundamental topic of learning a computer language. This website will be a work in
progress with perfecting every single topic covered in HTML as well as styling my webpage and making it a professional looking website that any CEO or businessman would be interested in reading. I hope you enjoy browsing casually throughout my website and enjoying some of the topics as much as I did learning about them! ////</p>
<h2 id="text" class="p">Texts</h2>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="lists" class="p">Lists</h3>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="links" class="p">Links</h4>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h5 id="images" class="p">Images</h5>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h6 id="tables" class="p">Tables</h6>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h7 id="forms" class="p">Forms</h7>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h8 id="extramarkup" class="p">Extra Markup</h8>
<p>This is some text, hopefully i can figure out how to add color.</p>
Top of Webpage
</body>
</html>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
is relative to the html file.
If the html file is in C:\Users\MyName\Desktop\Website.
Then the link is pointing at C:\users\MyName\Desktop\website\Website\newWebsiteFinalCSS.css
It should be
<link type="text/css" href="newWebsiteFinalCSS.css" rel="stylesheet">
I'm working on a project for class and I need to use HTML preview to see my work so far. Whenever I try it, I get a blank window saying preview not available.
<!DOCTYPE html>
<html>
<head>
<title>Identity Theft</title>
</head>
<body style=background-color:lightsteelblue>
<h1 style=text-align:center;color:blue> Protecting against identity theft</h1>
<hr style=background-color:white size=5px>
<div style="font-family;Arial">
<h2> Keping Your Personal Information Secure Online</h2>
<ol><li> Be aklert to impersonators</li></ol>
<li> Safely dispose of personal information</li>
<li>encrypt your data</li>
<li> Keep passwords private</li>
<li> Don't overshare on social networking sites</li>
<h2> Keeping your devices secure</h2>
<ul><li> Use Security Software</li>
<li>lock up your laptop</li>
<li>Be Wise about wi-fi</li>
<li> Avoid phishing emails</li>
<li> Read privacy policies</li></ul>
</div>
<p>Source: Federal Trade Commission</p>
<div align ="center">
<h3> Report Crimes or Suspicious Activity</h3>
<table border ="2">
<tr>
<th>Activity</th>
<th>Contact</th>
</tr>
<tr>
<td>Identity Theft</td>
<td> The Federal Trade Commission </td>
</tr>
<tr>
<td> Internet Crime </td>
</body>
</html>
View your HTML file rendered dynamically as you type.
From Plugins > Plugin Manager, install plugin Preview HTML.
Focus your HTML File.
Select Plugins > Preview HTML > Preview HTML.
The window now should show HTML file (if not, test it on a simple sample). Keep the window floating or dock it, e.g. to the bottom of the Notepad++ window.
Type at least one character into your HTML code to see the preview.
I have two divs that act as links (<a>). One in one paragraph, the other in the second paragraph. The second link works: on mouseover (in Chrome) the bottom left of the window displays the link address. The top one does not do the same. What is wrong? I'm talking about the links in the paragraph tags, not the menu links.
<body ontouchstart>
<div class="header">
<div class="logo">Q<sup>3</sup></div>
<div class="desc">Quito's Qustom Qode</div>
</div>
<div class="row">
<div class="sidenav col2">
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
</div>
</div><!-- /row -->
<div class="row">
<div id="content" class="col10">
<div class="info">
<div class="about">
<div class="profile-back">
<div class="profile"></div>
</div>
<div class="about-me">
<p>Kevin (Quito [Key'-tow]) Williams is an aspiring front-end web designer. He has 5 years of experience in HTML, 4 years experience in CSS, and is currently studying jQuery. As a modern web designer, he is using his coding background to study the latest web technologies: HTML5, CSS3, RWD. In addition to his web technology languages, he is also familiar with: C<sup>++</sup>, Javascript, Java, Perl, Lua (Minecraft based), LISP, SQL. </p>
<p>Hello</p>
You've forgotten to add the actual link on your anchor tags through href.
Your current code:
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
Changes:
about
pricing
projects
legal
Can you be a bit more clear about what outcome you are expecting?
Edit: I think i understand now, "About" "Pricing" "Projects" should be hyperlinks?
you are missing the "href" attribute in the tags which should fix your problem.
If you don't want the link to direct to a different page, you can use href="#" to stop this.
Are you on about the following lines?
RWD.
<p>Hello</p>
If so, both are working fine in chrome and IE for me. I'm not sure what the issue is for you.
try this code,add target="_blank" in your a href
<p>Hello</p>
And the working fiddle link is here https://jsfiddle.net/p7mnsj3p/