I can't seem to figure out why my images are not showing up in my HTML code

<html>
<head><title>Welcome to Real.com</title>
</head>

<body bgcolor= “white” text=“red”>

<h1>Hello and welcome to my awesome site!</h1>
<h2>Greetings!</h2>

<p> |Home|
<b>Welcome Home!</b></p>

<center><img src=“john_hancock.jpg” width=“400” height=“500”    alt=“john_hancock”></center>
<br>
<a href=“home.html” style=“color:red;”>Back to Home</a>
<body>
</html>

I am currently experimenting with adding images to my website for fun, but I seem to be encountering some issues. The image file is in the same directory as the code, so I'm not sure what's causing the problem. Any help would be greatly appreciated! Thanks!

htmlcss

Answer №1

Make sure you use proper quotation marks, like " instead of ”, throughout the entire document. You can easily do a replace all in your text editor to fix this.

The correct image tag should look like this:

<img src="john_hancock.jpg" width="400" height="500" alt="john_hancock">

Answer №2

Modify the syntax error by replacing any instances of “ ” with ""

Answer №3

Your use of quotation marks is incorrect. Please use " instead of ”. To correctly include an image, use the following image tag: 

<img src="john_hancock.jpg" width="400" height="500" alt="john_hancock">

If you're uncertain about where the error lies, try using the w3c HTML-Validator! https://validator.w3.org/ It will pinpoint any errors in your html file.

Answer №4

1) Make sure to use neutral quotation marks (") instead of typographical ones (“ and ”).

2) Remember to close your img tag properly:

<img src="image.jpg" />

3) Don't forget to close your anchor tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dark background with Bootstrap 4's blue horizontal line beneath the navbar list

How can I remove the blue horizontal line that is appearing on the navigation bar below the list, creating a separation between two elements against a dark background? I am using Bootstrap 4 but unsure of how or why it appeared there. Additionally, I am st ...

htmlcssbootstrap-4navbar

Why is it not possible for me to choose an element after it has been placed within a grid component?

Struggling to eliminate the blur effect on an image inside a grid element? It seems modifying the properties of an element within a grid class is causing some issues. To simplify, I conducted a basic test: I managed to change the ppp2 class when hovering ...

javascriptjquerycss

Tips for transferring HTML content from JavaScript to PHP using AJAX

Within my website, there is a textarea that allows administrators to input HTML content which can then be saved and displayed on the page for non-admin users. When attempting to transfer this saved HTML via PHP using AJAX, I encountered an issue where HTML ...

javascriptphpjqueryhtmlajax

Discovering the Secret TD Value Upon Clicking a TR Element

I am currently in the process of creating a web-based task manager to monitor tasks at work using HTML and PHP. I want to display all the tasks in a table, and when clicking on a task (row), I aim to retrieve a hidden td value (task ID) and pass it as an a ...

javascriptphpjqueryhtml

How to customize JavaFx context menu appearance using CSS to achieve a full-width background color

I am trying to customize my context menu, but I'm having trouble with the white space between the menu item and the context menu border. Here is an example: view the rendered context menu with CSS styles What I want is for the color to fill the entir ...

cssjavafxcontextmenu

The container refuses to show the padding

I'm facing an issue with my .container where the padding is not displaying correctly. I've tried various methods but the padding just won't work as expected. CSS: nav{ border-style: solid; border-color: green; float: left; ...

csspadding

What is the best way to implement rounded borders using CSS?

Can we use the latest CSS standards to create rounded borders? Unfortunately, this feature is only available in CSS level 3 and above. ...

cssborder

Boundary around an object within a unified picture

I'm facing a bit of difficulty with a task. I need to add a border around an element within an image (I can't insert an image due to low reputation), and this border should match the width and height of the element exactly. It also needs to be re ...

htmlcsstwitter-bootstrap

What is the best way to position a search bar in the center of the navigation bar while still ensuring the webpage remains responsive?

Being new to the world of CSS and HTML, I am currently facing challenges while creating a webpage for my school project. Specifically, I am struggling with inserting a search bar in the middle of the navigation bar rather than on the left or right side. Al ...

javascripthtmlcssbootstrap-4

Ensures that two divs have the same dimensions

Currently, I have a line of sections set up like this: I am attempting to ensure that the second div matches the height of the first one, despite the fact that their heights are determined by the size of the pictures which may vary. Do you have any sugges ...

htmlcssheight

Contrasting importing CSS directly in index.html versus using styleUrls in Angular 5

My landing page and dashboard components have different CSS styling, causing one of them to not function properly depending on the CSS. I tried removing these two lines from index.html: <link href="./assets/css/bootstrap.min.css" rel="stylesheet" /&g ...

cssangulartypescriptbootstrap-4angular5

Exploring the Dynamic Content Security Policy for connect-src in Angular

In my Angular project, I specified the Content Security Policy (CSP) in the meta tags of the index.html file. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://baseur ...

htmlangularmeta-tagsmetacontent-security-policy

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

jqueryhtmlcss

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

While working on a simple postage calculator in Visual Studio with Web Forms (yes, we had to use Web Forms in Class), I included some Bootstrap for styling. However, there was an issue where my RadioButtonList suddenly stopped functioning properly. None ...

c#htmlcssasp.netradiobuttonlist

Please submit the form only after checking the appropriate checkbox

I am encountering an issue with form validation. In the first image, users can make a choice that will determine the display of either form 2 or form 3 (shown in images 2 and 3). The fields in each form are marked as mandatory but both sections start as ...

htmljquerycss

Reaching SVG with CSS

Is it possible to target SVG elements with CSS? In older versions of IE, they display like broken images and I want to hide them using modernizr. I'm looking for a solution like the following... .no-svg object[type=svg] { display:none; } I have be ...

csssvgcss-selectors

Is it possible to include both the value and text of a dropdown in form.serialize?

For my project, I need to serialize the form data. However, when it comes to dropdowns, only the values are captured and not the text of the selected option. <select name='attend'> <option value="1" selected="selected">Question&l ...

phpjqueryhtml

Effects of jQuery Show / Hide on adjacent select box operations

I created a pair of select boxes where the visibility of one is controlled by the other. Initially, the controlled select box (#select02) works perfectly on page load as long as I don't show/hide it by selecting options in the controlling select box ( ...

javascriptjqueryhtml

Iterate endlessly over CSS styles in Angular 4

I'm looking to create a website background 'screensaver' by looping through an array of background URLs with a delay between switches. Currently, I have the array stored in my .ts file and I am using the NgFor directive in my HTML. However, ...

javascripthtmlcssangular

How can I align text in the center of a page and on the same line as a list?

Take a look at my website: I've been struggling to center the text on the screen with the social icons floating to the right. Here's the code I have: Code - <div class='social_icons'> <span class="social_ ...

htmlcsscenteralignment