Lorem ipsum

Lorem ipsum.

Lorem ipsum

Lorem ipsum.

If my code won't update I'm gonna start throwing things.

Image time.

This site is about to look so ugly oh glob. I think I'm gonna make this site just grey for now. And also add background colors to paragraphs maybe, if i add a background image...

Oh so now the link color is fixed but for some damn reason the text won't align center???
Okay, I looked it up. Nothing I was doing was wrong, there's just some complicated CSS stuff that makes it impossible to center a link the way I've been doing it. Something something anchor element?

there seems to be no method that allows you to scale down a picture relative to its aspect ratio. you might have to uhhhh find the image on your computer and look at its properties, and do quick maths to figure out how to scale it down so that it looks proper and not too tall/too wide.

NEVERMIND, you can just type "scale" and then a percentage. dang, that's so much easier. why didn't w3schools just say that? Although scaling it down seems to leave a lot of blank space...

Turns out you can just type in percentage measurements instead of pixel measurements! Same percentage image for width and height = good image.

Okay, to recap:
Images are empty elements (is that the right name? Elements that don't have open and closed brackets)
All you gotta do is add the attributes:
"src" aka "source" aka the path to the image
"alt" aka alt text aka a description
"style" aka style. diff properties are seperated by semicolons as usual.
Rememember your quotation marks!

Heiji Shindo. He is a Japanese man in Edo period dress. His face is rather gaunt, and he's squinting and scowling angrily. This is a big block of text to test out the float property. One HTML youtuber mentioned before that floats are kind of a pain to work with and that divs are better, but maybe it would be worthwhile to figure out how they work, because they may be useful for just simple things like this. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod nec sapien ut malesuada. Nullam sit amet elit pretium, malesuada felis non, interdum velit. Quisque ligula lorem, cursus at augue aliquam, porttitor vulputate urna. Suspendisse odio purus, bibendum id feugiat eget, scelerisque nec turpis. Aenean dignissim quis diam at rhoncus. Nullam risus elit, placerat et vestibulum vitae, sollicitudin elementum est. Vestibulum malesuada velit quis tempus varius. Maecenas a mauris eros.

I considered making this a list but remembered 1. I don't know how to work with the list elements, and 2. I would prob need to add formatting for lists in the style sheet since they're not paragraphs

THINGS LEFT TO DO
Figure out how to add margins to images so they match the margins of text
Figure out how to add padding between images and the text they float besides

Heiji Shindo. He is a Japanese man in Edo period dress. His face is rather gaunt, and he's squinting and scowling angrily. What if I wanted to add an image on each side?

OTHER THING TO LEARN: how to make the image and the text in line with each other.

I kind of want to learn image maps... Maybe later thought. I feel like I'm going through this kind of slowly
How would you even figure out coordinates? I'm guessing you'd just open the image in MS Paint or some other art app and use the pixel counter there... Although that won't work if the image is scaled down on the site. But I guess you can scale it down by the same degree in the art app.
Although... maybe not. If scaling down an image doesn't actually edit the image, but just displays it smaller. Like a 100px x 100px image will still act like one and not a 50x50 image? No now I'm curious, I'm gonna try it.

Here we have a banana:

How is there no link anywhere? Wait... did I mess up the coords

Okay, I fixed the coords and it worked! But the clickable part is off-center, meaning that it didn't work along with the scale-down.

Yeah, that one works fine. I'm gonna try to scale down my banana and scale down the coordinates as well and see if it'll work.

Nevermind, you can't scale down a picture with the default image editor and this has already taken up enough time, for me to go into idek Paint and try to work it out. I'll get there when I get there.

Oh you can add background images to just a paragraph?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod nec sapien ut malesuada. Nullam sit amet elit pretium, malesuada felis non, interdum velit. Quisque ligula lorem, cursus at augue aliquam, porttitor vulputate urna. Suspendisse odio purus, bibendum id feugiat eget, scelerisque nec turpis. Aenean dignissim quis diam at rhoncus. Nullam risus elit, placerat et vestibulum vitae, sollicitudin elementum est. Vestibulum malesuada velit quis tempus varius. Maecenas a mauris eros.

STOP IT WHY IS IT JUST HIS FOREHEAD

I have learned that is it better to just not put spaces in image file names because when it comes time to link back to them, including spaces in the attribute WILL NOT WORK, even if you use quotes. The only way to get them to work is to type "%20" instead of a space. Unless...

No nevermind. I was going to see if using just + would work, but it has to be %20.

Figured out the background image ^3^ people are gonna think I'm an obsessive Heiji Shindo fangirl good gosh man. I think I'll change it to something else.

That's quite nice actually!

YET MORE STUFF TO LEARN

Some things I learned when trying to mess around with the margins:
You CAN specify margins for all images in internal css
Images won't necessarily stay within the confines of the paragraph they're next to (i.e. they'll overflow out of the background color block). I don't know if this has to do with margins or padding or what.
Text wraps around images by default, even if the images belong to different paragraphs than the paragraph that has the text getting wrapped

Also this goes without saying but I also need to learn image positioning/sizing/repeating/etc.

Also I'm really curious about why the images seem to have so much more padding than the text. Maybe that's just the default for floats. Like they come with default padding so that they aren't right up against the text in an unsightly way by default.

I'm not learning the picture element because hopefully I will never have to use it.

Look at my fuckin favicon lamooooaoaosmdoerjgiekdfnjdiskdmfnhejwd

FAVICON RECAP
Use the "link" element within the head element
Relatonship property (rel) is "icon"
Type property (type) is "image/x-icon"
Hyperlink reference (href) is the link to the favicon
Using normal-sized jpegs does NOT work. It's probably better to just make a propery-sized favicon and make it end in ".ico" Here is a good site to use for that.