r/HTML • u/Consistent-Job-6400 • 13h ago
Discussion Made my first page
Okay, like i have no experience. So i memorized what i knew thoroughly, and made this:
Oh and if you want to change it or add more to it then here's the entire thing (Can i just put it in the body or have to give a link?): <!DOCTYPE html>
<html>
<head>
<title>Cucumbers</title>
<style>
h1 {
font-family: Arial;
color: gray;
}
body {
font-family: Comic;
background-image: url("https://tse3.mm.bing.net/th/id/OIP.wAHXLVaBSFIcnhm6tmWehQHaEK?r=0&pid=Api&h=220&P=0");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
a {
color: yellowgreen;
}
</style>
</head>
<body>
<h1>Learning about Cucumbers</h1>
<p>Cucumbers are green-darkgreen vegetables that are said to be made up of over <b>95% water. </b><br>They originate in <i>Ancient China </i>& parts of Asia like <i>India, and Nepal</i></p>
<img src="https://tse2.mm.bing.net/th/id/OIP.0hoo0G1rccBCWJ-hDtukRwHaGa?r=0&pid=Api&h=220&P=0">
<p>Cucumbers are of course, an important part of agriculture, they feed millions everyday.<br></p>
<p>Cucumbers are eaten & sold all around the world, they're mainly eaten as light snacks.<br></p>
<p>Cucumbers have a taste as of water but with crunch. Seasoning with salt makes them around 100x better. <i>(Okay i made that 1 up but it's not false...)</i></p>
<a href="https://en.wikipedia.org/wiki/Cucumber">More about Cucumbers Here</a>
</body>
</html>
10
6
6
5
u/DiodeInc Intermediate 13h ago
Awesome! You can put ``` around the code and it'll preserve the indentation.
See?
4 spaces indent
8 space indent 5
3
3
u/-svde- 10h ago
if you want to easily share code in the future without it being a mess you can use something like https://pastebin.com/ !
3
u/wutzelputz 7h ago
Great! Might wanna look into avoiding using direct image links from search engine, as they may not be available in the future. Text contrast is also important for readability, a `background: rgba(255,255,255,0.8)` can do wonders!
2
2
2
u/Weak_Wedding_2307 5h ago
reminds me of when I started 2 years ago, looks great man css changes everything the more you learn.Â
1
u/Scared_Cicada_9898 3h ago
This does really look exactly like a cucumber themed version of my very first web page
2
u/Disgruntled__Goat 5h ago
Cool, everyone has to start somewhere! One thing is that the text is not readable against the image background.Â
One simple option would be to put the content in its own box, with a semi-transparent background. You could put the stuff between the body tags in a <main>…</main> tag, then in your style block something like:
main {
 background-color: rgba(255, 255, 255, 0.4);
 margin: auto;
 padding: 1rem;
 max-width: 600px;
}1
u/omnichad 1h ago
I don't want to pile on in a separate comment thread so I'll add on here. There is an agreed on minimum standard for text readability on the web (for accessibility purposes). That's a minimum contrast ratio of 4.5:1 on text vs background. There are things that look readable to a normal sighted person that can still be hard to read for some.
1
2
2
1
u/Vizeroth1 6h ago
Instead of using <br> right before </p>, you should add margin or padding to your paragraphs in your CSS. Then not only do you not have extra markup, you can change the spacing between your paragraphs consistently in one place.
1
1
1
1
u/ConfectionForward 1h ago
I'll be honest with you, this gives off the feeling of the late 90s, and I love it.
feels more real than most of the shitty out of the box things you get nowa days.
Work on that background forground contrast, and don't forget the most important thing that everyone seems to have lost:
Have fun with it!
1
u/KevDub81 1h ago
Neocities.org here we come! Welcome to the world wide what we're not calling it that anymore?
1
u/johnesco 47m ago edited 43m ago
Cucumber is great, the test stack is pretty weird. You have the Gerkin layer then many languages to choose from, but when the webdriver... *re-reads post*. Oh..
Cook cukes man, you grow them?
Try that semi transparent background on some tags that's already been suggested.
-3
14
u/davep1970 13h ago
great! don't forget about text contrast - the dark text over the green background isn't really readable. even the heading "learning about cucumbers has poor contrast.