I am completely new to Web Development, still a student. Kindly bare this extremely low level question.
I have this small HTML code:
<html>
<body>
<img scr="logo.jpg" alt"nextgen logo" width="370" height="100" />
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
with the logo.jpg file in the exact same folder as the .html file, with the exact width and height given.
Yet, when I open the HTML page, I am not able to see the image at all. What's Wrong? What should I do?
simple typo. src, not scr
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<html>
<body>
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<!-- fix src and add in the = on the alt tag !-->
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
You need to change scr to src in your image tag, and add an = sign as Florian pointed out.
Related
I was learning about this attribute vspace but it is applied to all three images which I have
I don't understand why?
As you can see in the code I have written only one vspace attribute in one of img tag. But It is moving all three images down vertically. Don't understand why?
Screenshot of output
Code
<html>
<head>
</head>
<body>
<br> Can you see the stars
<img src=stars.jpg height=200 width=200 >
<img src=stars.jpg height=200 width=200>
<img src=stars.jpg height=200 width=200 vspace=20 >
Can you see the stars?
</body>
</html>
I have this code:
<!DOCTYPE html>
<html>
<head>
<h1 title="First Heading">Heading 1</h1>
<h6 title="Second Heading">Heading 2</h6>
</head>
<body>
<p title="First Paragraph">Paragraph 1</p>
<p title="Second Paragraph">Paragraph 2</p>
<a href="https://www.w3schools.com/html/html_basic.asp" >W3schools</a>
<img src="C:\Users\yorda\OneDrive\Gambar\Aseprite\.jpeg\Canyon.jpeg" alt="Pixel Art" width="320" height="180"
</body>
</html>
If I open my html file via file explorer (double clicking it and go to chrome) it will show the image.
but if I want to preview my html file via VS Code extension the image wont show up.
why is this happen? any way to solve this?
Thanks in advance.
You have to put the image in the same location of your index.html file.
then modify your img src to
<img src="Canyon.jpeg" />
I'm a beginner and I'm creating my first website, but I've stumbled with one page that will not recognize the CSS it's linked to.
I've linked each html page of the website to its own CSS style sheet and they all work, except for one. All the files are in the same root folder and if I check the 'Page Source' when opening my problematic page in a browser (FireFox) there are no errors showing up, so I'm really lost.
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>About X</title>
<LINK rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
<header>
<img src="images\logo.jpg" width="100" height="80" alt="logo">
<h1>Mister X</h1>
<nav>
<a href=///C:/Users/Soniaa/Desktop/web%20design/webpage.html>Pictures</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/News.html>News</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/About.html>About</a>
Shop
</nav>email#gmail.com</address>
</header>
<figure><img src="images/pic.jpg" width="300" height="300" alt="Portrait">
<figcaption>Short Bio... </figcaption>
</figure>
<h2>Education</h2>
<ul>
<li>this</li>
<li>that</li>
</ul>
<h2>Personal Exhibitions</h2>
<dl>
<dt>2010</dt>
<dd>...</dd>
<dt>2006</dt>
<dd>...<dd>
<dd>...</dd>
<h2>Group Exhibitions</h2>
<dl>
<dt>2008</dt>
<dd>...</dd>
<dd>...</dd>
<footer>© Mister x <br>
<IMG SRC="images/fb.png" width="30" height="30" ALT="Facebook">
<br>
Webdesign by me </footer>
</body>
</html>
The actual page has a lot of definition lists in it (no idea if that would have anything to do with it).
The same CSS works with my "Home" page, for example, which has the same header.
Maybe I'm missing something very obvious, but any help would appreciated!
EDIT: Thank you to everyone who took the time to answer!
Unfortunately I didn't find the problem but I think maybe I didn't give enough details so I'll rephrase and repost the question (I didn't want to delete this because someone else might find a helpful answer for themselves).
Hope that's okay...
Is your CSS in the same directory as your HTML file? If it's not you probably should do something like
<link rel="stylesheet" type="text/css" href="css/about.css">
Also make sure you did not make any typo's. If what you are describing is really true it should work.
Your markup is fine there seems to be no problem with it.The files are working perfectly on my computer.Try erasing the history of your browser and then reload it, or change the browser and see if it works.
Here I have a weebly website, but I'm trying to make my own website and implement some of the features from the weebly website to my own.
I was wondering what this feature is called and how I would implement it:
As you can see when you hover over an image a little floating tag appears, and I was just wondering if someone could tell me what it is and how I would implement it into my code:
Here is the code:
HTML
<div id="staff_images">
<center>
<img src="images/GR412.png" />
<img src="images/JoeVis.png" />
<img src="images/Scott.png" />
<img src="images/Halo.png" />
</center>
</div>
Add title=" " to your images... with the name inside the " ". That should do it.
Like this:
<img src="images/GR412.png" title="GR412" />
<img src="images/JoeVis.png" title="JoeVis" />
<img src="images/Scott.png" title="Scott" />
<img src="images/Halo.png" title="Halo" />
DEMO
Currently, the HTML code for my logo thus far is...
<div align="center">
<img width='300' height='40' src='/img/logo.png' />
</div>
How would I make it so that if I clicked this image, it would redirect me to the main page?
Thanks
<div align="center">
<img width='300' height='40' src='/img/logo.png' />
</div>
wrap the img in an anchor element (a) and grant it with the href containing the homepage link.