I'm having trouble getting some images to show. The issue starts at C:\Users... and ends at .\august19\google2.0.0.jpg
I'm not very experienced with the ... thing in pathways
I've tried but it doesn't work. A large space appears but image doesn't show
<html lang="en">
<head>
<title>My First Webpage</title>
</head>
<body>
<p style="background-color: blue; color: white">
My First Paragraph <br>
My second sentence in this paragraph on another line
</p>
<p style="background-color: green; color: white"> My Second Paragraph >:3c</p>
C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg
https://www.google.com/images/google2.0.0.jpg
.\images\google2.0.0.jpg"
.\august19\google2.0.0.jpg"
<a href="https://www.apple.com">
<img src="images/23656.png" width=500 border=0 />
</a>
Home
August19
</body>
</html>
In order for the browser to render the image, you need to put it in an <img> tag.
<img src="C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg https://www.google.com/images/google2.0.0.jpg">
Related
I'm trying to create a small "menu" on the right where you can navigate to other pages, but for some reason, it hangs lower than the left-aligned text. I want them to be on the same level.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<header>
<div style="display:inline-block;">
<p align = "left">
Test
</p>
</div>
<div style="display:inline-block;">
<p align = "right">
One |
Two
</p>
</div>
</header>
</body>
</html>
It gives this result:
I would ideally like something like this (same level with a black bar underneath):
However I'm trying to achieve it in pure HTML, without using CSS or whatnot.
To truly do what you are asking, with no CSS:
I think you have to resort to using a table layout. Set the width attribute to 100% (Note: The <table> width Attribute is not supported by HTML 5). Then use the align attribute of the <td> for the left and right text alignment. For the line underneath use a <hr>.
<table width="100%">
<tr>
<td align="left">test</td>
<td align="right">
One |
Two
</td>
</tr>
</table>
<hr>
Because they are not in an inline tag.
<p> is a block element tag
adding another <p> creates another line, thus the nested <a> tags in the <p align = "right"> appears on the next line
This is how your code is getting structured by your code above
I found the solution for whoever might be searching for this.
Adding the div style works for putting them on the same line but to make the left/right-alignment work, I needed to add ;float: right.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<header>
<div style="display:inline-block;">
<p>
Test
</p>
</div>
<div style="display:inline-block;float: right">
<p>
One |
Two
</p>
</div>
</header>
</body>
</html>
So tag never seemed to like me a lot. It always caused me problems, but it was always turning out that their solution was obvious and I was just stupid. But this time, I am spending 4TH HOUR trying to figure out what could've gone wrong (this is exactly why I even named a body content div "body", IK this is unnecessary lol). Here is the code:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive; color:white;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>
<p style="position:absolute;top:140px;left:20px;">This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</div>
</body>
<!--break-->
</html>`
It's because the <div class="body"> has a height of 0. It only contains absolute positioned elements, which don't take up any space, so its basically empty.
Some suggestions:
Learn to use the browser's debugger (DOM Inspector). It will show you information about the elements such as their size and applied styles.
Avoid absolute positioning. It basically breaks how CSS works which makes it difficult for beginners.
EDIT: One more thing: You have a opening <strong> tag without a closing </strong>. Keep in mind you can't put block elements (such as <p>) inside inline elements such as <strong>.
I found your mistake.
Navigate to html tag, there you can see the style attribute, with color=white.
This is making all the text white, which is same as canvas therefore it is invisible.
Now, the text tags are absolutely positioned, meaning they are outside the flow, so the height and width of the DIV is 0, so you cannot see any color because the div is essentially a 0x0 box.
I have adjusted the changes, please check:
<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>
<style>
.body {
background-color:#1A2B30;
}
</style>
<!--break-->
<body>
<div class="body">
<strong>
<p>Hello</p>
<p>This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</strong>
</div>
</body>
<!--break-->
</html>`
I don't think it's about where <style> is.
But it's your children (elements) are postition: absolute; so .body is 0 height.
Try:
<div class="body" style="height:100px">
So you I will see the problem
(This is just testing, please look at RoToRa's answer)
Because it's outside of closing </head> and opening <body>
It supposed to be between <head> and </head>
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
I was doing research and found out that you are only supposed to have one <body> tag, which after learning that I proceeded to clean up my code because I had 3 different set of body tags and by removing the tags to where I only had one set I messed it up to where it no longer aligns my footer properly.
Sorry if this is a silly issue, I am 15 and I started learning html 3 days ago at this point.
I have tried putting the footer outside of the boundary of the <body> tag and tried putting the class within a div tag right after the first footer tag.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title> Hub </title>
<h2 style="text-align:center">Home</h2>
<p style="text-align:center"> Welcome to my test website.
<i><b><br> (Currently Under construction) </b></i>
</p>
<p> </p>
<p style="text-align:center">
<a href="https://youtube.com">
<img border=0 src="youtube.png" width="100" height="70"> </a>
</p>
<p></p>
<p class="center">
<img src="razer.jpg" width="640" height=360>
</p>
<br>
<footer class="footer">
Home
About
Contact
Projects
</footer>
</body>
</html>
Here is the css class
.footer {
background-color: white;
color: Orange;
margin: 20px;
padding: 20px;
align-items: center;
text-decoration: none;
}
I expected it to stay aligned with the center, but it ended up reverting to text with no alignment.
Welcome!
Here's a little jsFiddle to help simplify the code a bit - and just to show you how that works.
https://jsfiddle.net/sheriffderek/5Lros2h4/
Here's the basic HTML structure:
<!doctype html>
<html>
<head>
<title>My project</title>
<link rel="stylesheet" href="styles.css">
<style>
.site-footer {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header stuff</h1>
</header>
<main>
<p>Stuff</p>
</main>
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
</body>
</html>
You'll spend most of your time in the body - and like you said - you wouldn't have more than one of those tags.
I suggest you keep you css in the css file - or in the styles tag in the head.
For your question - we basically just need to see this in order to help:
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
Your align-items: center is a flex-box declaration. You might mean text-align: center
Check out these resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Learn about the box-model and the display types first - and then position and you'll be on the right path. Join a chat-room for something like CSS https://discord.gg/pFc6XmH
and later... when you're feeling ready - watch this: https://flexbox.io
Keep your examples as simple as possible and you'll get the most help. : )
I'm not actually what you mean, but if you want to make the a-tag to be in the middle, you can use
footer{text-align:center;}
But if you want to make each of your a-tag to be separated and in the middle. you should just make the a-tag a block element. You can put it by adding in css
a{ display:block; }
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5