From b3eae203c2d4f0e2d273aa2e85cc269db1b0c13d Mon Sep 17 00:00:00 2001 From: Cassidy Williams <1454517+cassidoo@users.noreply.github.com> Date: Sun, 27 Nov 2022 21:22:15 -0600 Subject: [PATCH] Make URLs secure --- src/posts/finding-a-mentor.md | 2 +- src/posts/html-css-tutorial.md | 30 ++++++++++++++++------------- src/posts/the-history-of-the-png.md | 2 +- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/posts/finding-a-mentor.md b/src/posts/finding-a-mentor.md index 39dacd1..8ee88c0 100644 --- a/src/posts/finding-a-mentor.md +++ b/src/posts/finding-a-mentor.md @@ -13,7 +13,7 @@ I wrote this to answer those questions. Finding a mentor isn't some magical moment where you meet and someone puts their hand on your head saying, "I will mentor you, my child." -![pic](http://i.imgur.com/eucxwpW.gif) +![pic](https://i.imgur.com/eucxwpW.gif) Finding a mentor is really just a matter of keeping communication lines open. Once you meet someone, continue talking and building a relationship with them. There's so many ways to do this. Go to a meetup, chat with people in forums or Facebook groups, have a coffee chat, video chat someone, email someone (as if they're your pen pal, not like a cover letter). diff --git a/src/posts/html-css-tutorial.md b/src/posts/html-css-tutorial.md index df8c919..728b68b 100644 --- a/src/posts/html-css-tutorial.md +++ b/src/posts/html-css-tutorial.md @@ -159,6 +159,7 @@ So, anyway, the attribute 'href' tells us where the link is going to go when the Also, one thing you should note: Links don't have to be in `

` tags like I put above. You could put them in `

  • ` tags in a list, `

    ` tags for a linking header, or completely on their own! #### Adding links to other pages in your website + Let's just say you have a fully functioning website called fakewebsite.com. You have your homepage and your "Contact Us" page in the same directory or folder. Normally when a beginner links to different pages on their website, they just make links that look like `Home` and `Contact Us`. @@ -178,20 +179,22 @@ Now, if you were to change your domain or location of your files, you don't have So, you can reference the links that I showed you before if you want to check out some jazzy stuff you can do with your page. There are some other ones though that you might want to see before we move on to cooler and bigger things. #### Images + ``. Let's just say you want to put an image on your website. This is probably a good tag to know. Add the following to page1.html: - + Open up the page in a browser. WHOA. Image! So, the `` tag is one of those special tags. First of all, it doesn't have a closing tag. You just stick in a `/` at the end of the one tag and you're done. Secondly, it also has a `src` attribute (which is short for _source_), and in the value of that attribute you put the URL of the image (similar to `href` in the anchor tag). One attribute that might be good for you to remember for `` tags is the `alt` attribute. If you changed the code above to: - I could have danced all night + I could have danced all night When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you'll see some words appear! WOW. That's the `alt` attribute. It stands for the _alternate text_ for an image, and it's used when a user can't view the image for whatever reason (using a screen reader, slow connection, error in the `src` attribute, etc.). Or, in the case of [XKCD](http://xkcd.com/), it's used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don't know about). #### Line breaks + Let's just say you want to keep all your content in one paragraph `

    `, but you still want to break it up. That's easy. @@ -204,6 +207,7 @@ So, there's two special tags here, `

    ` and `
    `. They are _empty tags_, mea Try inserting these in between some of your `

    ` tags to try it out! #### Tables + Tables are really cool. They can also be a bit confusing. Open up tables.html (in the **2 - Tags** folder) in a browser to check out the example table I made for you there. There's several tags for tables, but the essential ones are ``, ``, `
    `, and ``. Look at tables.html in your editor. @@ -325,28 +329,28 @@ There are two options you can use, the `style` attribute and the `width` and `he Take this block of code here and stick it into style1.html: - + Now, let's just say you want the image to be an exact size, say, 600x800. All you need to do is add `width` and `height` attributes to do just that! - + Load that baby in a browser. Boo yah. But, you'll notice that the proportions of the image are a little off. What a pain. That's actually pretty easy to fix. Let's say that you absolutely have to have the width at 600 pixels, but the height can slide. It's as easy as taking out the `height` attribute. - + Refresh dat page. Huzzah. Same works for if you have a set height that you want, just include the `height` attribute and not the `width`. Now, you can also do these changes with the `style` attribute. - + Simple enough! Now, we've looked at the `style` attribute a bit now but I haven't explained the syntax. The `style` attribute is for _inline styles_. This means that you're styling your HTML directly in each element, rather than using CSS. But, we haven't gotten that far yet, so I won't go into that part. Now, the syntax within a `style` attribute is a little funky. It is always `style="property: value"`, where the _property_ is literally a property of the tag you're editing (for example, `color`, `width`, `height`), and the _value_ is to what you're changing or editing the property (for example `blue`, `600px`, `#FF0000`). If you have more than one property that you want to style, for example both height and width, you put a semicolon between delarations. So, in our example, if you want to edit both height and width of our image in the `style` attribute, we'd do: - + Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later. @@ -356,13 +360,13 @@ What if we have a paragraph IN A BOX. That's right. Kind of like a table. But no Let's take the same image we played with before: - + Now, you can add `border="5"` to this and you'll get a border with a thickness of 5 pixels around the image. But, this attribute is actually no longer supported for things other than tables (oh yeah, we used this for tables. Memories.), so we can do this a better way. You guessed it. `style` is coming to SAVE THE DAY. The styling for borders with the `style` attribute is a bit different than just adding `border="5"`, but it's also much more powerful. Let's change our code: - + Whoa. That's a lot of crap in there. Let's break it down. @@ -374,10 +378,10 @@ Color? What? OH YEAH. That's the third part of the border style. You can stick i Let's mix it up a bit with different borders for you to check out. I'm just going to keep using the same image, you can replace it with whatever. Stick this in the `` tags of style1.html and check it out, and play with the values yourself! - - - - + + + + Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah. diff --git a/src/posts/the-history-of-the-png.md b/src/posts/the-history-of-the-png.md index b900c32..2273748 100644 --- a/src/posts/the-history-of-the-png.md +++ b/src/posts/the-history-of-the-png.md @@ -26,7 +26,7 @@ But, back then, there was no `filter` property in CSS. It was a totally propriet The PNG was first specified in October of 1996, and became an official international standard in November of 2003. There was a [period of time though when it wasn't so popular](http://www.libpng.org/pub/png/slashpng-1999.html). Fast forward to now, and the PNG is the most used lossless image compression format on the internet. It was originally created to be a replacement of the GIF, but alas, you can't replace this: -![pic](http://i.imgur.com/7GuGra2.gif) +![pic](https://i.imgur.com/7GuGra2.gif) PNG was decided early on to be a single-image format. The developers of PNG tried to change that in 2001 (again, to compete with the GIF) by making the MNG (Multiple-image Network Graphics), but that never took off. Mozilla also tried by making the APNG (Animated Portable Network Graphics) in 2008, but that never really caught on, either.