HTML link does not open - html

I have a test HTML page with a link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Log in with TouchLogin
</body>
</html>
When clicked, the link does nothing. If I add the target = "_blank" attribute, the link opens a new tab, but does not load the URL specified. If I Ctrl-Click it, the link opens fine. What is going on?
Thanks in advance.

Glad you figured it out!
Omitting the http:// will always attempt to open the resource local to where the code originates.
For example, if you're working offline...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Log in with TouchLogin
</body>
</html>
Will open something like c://user/parent/localhost:8080
And working online will open something like http://parentsite.com/localhost8080
SO, leave out the http:// when linking to pages on your site but include when linking externally. :)

Figured it out upon using a different URL in the href(google.com). It did not work without "http://", so I added "http://" to the localhost link and it worked.

Related

How do I insert HTML boiler plate code in Visual Studio Code on Mac?

I started the coding journey and installed VSC suggested during a YouTube tut.
It seems that all emmet abbreviations are working except for SHIFT + ! which should give me the below.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
Any ideas why this is?
I really appreciate any help you can provide.
I couldn't get VSCode to expand !+Tab, but I agree with you that it should have worked.
However, I've figured out that you can use html:5+Tab (or just ! with the Emmet: Expand Abbreviation command) to get a similar result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
You need to install HTML boilerplate extension from visual studio code extension.
I also use a Mac, I found this issue also when the file did not have a .html extension.
Try creating a new file with a .html extension such as index.html.
Retry the shift ! you did initially and press enter. The boilerplate should populate.

Image not loading in my html page when using Live Server extension in VS Code

I have started studying web development and decided to use VS Code. It is currently running on a Linux Mint dist (19.03). Decided to add some extensions, including Live Server so I don't need to constantly hit F5 to see the changes. Problem is: I inserted an image on my html page and if I open the page through Live Server, the picture just doesn't show up, but if I go to the HTML file and open it, it shows perfectly. Could someone help me with this issue? Thank you! I am leaving the code here so you can have a look:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM</title>
</head>
<script src="dom.js"></script>
<body>
<img src="/../HTML/me.jpg" />
</body>
</html>
/../ in the img src tag does not look correct.

Save a .html file which loads a URL when you open it

I'm simply trying to open google.com via a .html file.
When I open this .html file it does not load Google.
<!DOCTYPE html>
<a href="http://www.google.com">
This should do the trick:
<!DOCTYPE html>
<html>
<head>
<title>Google</title>
<meta http-equiv="refresh" content="0; url=http://www.google.com" />
</head>
</html>
Anchor tag acts as a hyperlink. You'll have to click on it manually or write a script that would do it for you.
If you want to open google directly without the user's action, you can use a meta refresh.
<meta http-equiv="refresh" content="4;url=https://google.com" />
here, 4 would represent the amount of time you need before refreshing in seconds.

What is the best approach to embed a hosted React application in to another non React site?

I have an entire React application that I am hosting on AWS. I want to embed this application in to another non React site. Currently I have it iframed in and it works fine.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<iframe src="https://testlink.cloudfront.net"></iframe>
</body>
</html>
I have seen examples in the React docs around implementing individual components without iframes but nothing around entire hosted applications.
Idealy I will be able to do something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<div="app"></div>
<div="app2"></div>
</body>
</html>
What's the best approach to do this or am I best to just deal with iframes?
I had to integrate multiple react apps into a cake php framework.
Place the final bundle in webroot of the hosted site e.g under /react.
Then just include the final bundled script tag in the html.
You will have to handle the routing to the app on the hosted site.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="ReactAppDiv"></div>
<script type="text/javascript" src="/react/main.js"></script>
</body>
</html>

Page redirection not working unless I add .html to the URL

I had a client that gave a URL in a press kit before the website was done. He gave a page when I was making the website a one page site. So I took the URL he made and coded it as a redirect to scroll to that part of the site.
Now that I have it online, it isn't working properly.
fuzzripper.com/bio gives me an internal server error
fuzzripper.com/bio.html works just fine
I would like it to work even if the user doesn't type .html
Here is my redirect code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1; url=http://www.fuzzripper.com/#about">
<script type="text/javascript">
window.location.href = "http://www.fuzzripper.com/#about"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow this <a href='http://www.fuzzripper.com/#about'>link</a>.
</body>
</html>
A quick fix for static sites is to
Create a /bio folder
Move bio.html in bio folder
Rename bio.html to index.html
This should make the bio#about link work just fine.