Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!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>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./home.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img class = "img" src="/download.jpg" alt="images one">
</body>
</html>
I have this html code on my home.html file and the image is not loading on my browser
The image file is i the same folder as the html file. Am I doing something wrong?
According to you, the image file is in the same folder as your HTML file. This means that you are probably linking the image incorrectly. Since the image is in the same folder, you should link it by either:
<img class="img" src="./download.jpg" alt="images one"> <!-- Notice the . before the filename -->
OR:
<img class="img" src="download.jpg" alt="images one">
Either one should work for you.
it is all about your src path you can copy your image's exact path in vs code, right-click on that image you want to show on the web page, copy the relative path and paste in src. Note: sometimes you need to change the direction of \ to this / to resolve the error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./home.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img class = "img" src="https://scontent.fkhi2-2.fna.fbcdn.net/v/t1.6435-9/83584368_2640398402913663_8086181498509590528_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=09cbfe&_nc_eui2=AeEj17MLkoima4X0i7rhcW-bOla5rc4Wt-E6Vrmtzha34crlU8ECjYzWPJA5DPQsDhgCQQQazdpg-z8BjOee_Wl4&_nc_ohc=GNVusO-liCcAX_VSOXH&_nc_ht=scontent.fkhi2-2.fna&oh=00_AT9RyzFYP6B_NBbAxuWrvaUCF9KWs-y9NccHcnp3VJgV4A&oe=6231777F" alt="images one">
</body>
</html>
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!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>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
Test Browser: Version of Chrome: 94.0.4606.81
When I am running the html file it is not showing up instead showing error in console`
<!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>Image</title>
<link rel="stylesheet" href="/Css/display.css">
</head>
<body>
<div class="box1">
<img src="C:\Users\first\OneDrive\Pictures\Downloaded Pictures\pexels-ella-olsson-1640777.jpg" alt="Cat Image"/>
</div>
<script src="/Js/function.js"></script>
</body>
</html>
Here's the Error Image
You can't just load files from your local disk. You should take the files to the directory with your code and update the path.
I am using SVG icons (from IcoMoon), the problem is I can't see the icons while working locally, but when I upload the page online it works fine.
<!doctype html>
<html>
<head>
<title>SVG Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<svg class="ico ico-menu"><use xlink:href="icons/symbol-defs.svg#ico-menu"></use></svg></td>
<script defer src="icons/svgxuse.min.js"></script>
</body>
</html>
I am not using any local server. It is a plain HTML file. I wonder how can I fix this issue?
Thank You
I am very new to html and css. I am trying to include an image in a project.
The html file has the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> AirTable GUI For Arcade </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1> GUI Test </h1>
</header>
<img src="full_recycle_bin-512.png"/>
</body>
</html>
The image file full_recycle_bin-512.png is in the same folder as the html file itself so I shouldn't have to use the full path for the image but, even with the full path, the image won't appear. When I run the project with ngrok, I only get the broken image icon. Any help is appreciated!
I suggest you to right click on the broken image and copy the image address, so that you can know if the image path is correct.