Module is 28 tasks, I’m starting from 14, so we’re gonna push through and close this out.

Most of the time when we see an image online, we want to see where it came from. Adding the image itself doesn’t do this for us, so we have to turn the image into a link.

Thankfully this one is simple. We just stick the anchor element at the ends of the image source code.

<a href="#"><img src="imagelink.jpg" alt=image description"</a>

I have no idea why the dead link hash is supposed to be there. I’ll note it in my concerns.

Moving on from links, we also love to use lists, especially bullets.

In HTML, bullets are classified as unordered lists, coded as <ul>.

So for a simple bulleted/unordered list, you would put:

<ul>
<li>thing 1</li>
<li>thing 2</li>
<li>thing 3</li>
</ul>

Next we got ordered lists, which will naturally be <ol>. It’s the same exact process as the unordered list, just change u into an o.

We can create a text box on a page using input text.

<input type="text">

This is self-closing, there is no </> tag necessary.

If we want to add a placeholder text (that grayed-out text that goes away when you start typing) in the text box, we simply add ‘placeholder’ itself into the element right after the “text”.

<input type="text" placeholder="text">

Next this took me to form elements. It says it’s to submit data to a server. I only half-know what that means, so I’ll go along for now.

This is nested (put on the ends) on the input type. It must be closed.

<form action="link"><input type="text" placeholder="text"></form>

Here’s how to add a submit button to the form. It is put at the very end of the element.

<form action="link"><input type="text" placeholder="text"><button type="submit">submit</button></form>

Note: the “submit” in the quotes is simply the type of button. The “submit” in italics is the description of the button that will show up on the page. I only italicize to emphasize for learning purposes, it doesn’t have to be italicized in the code.

If you feel the need to be a pain in the ass, you can require fields for your forms. You’re lucky they kept this simple.

We literally just put “require” (no quotes) at the end of the input type. I’ll drag over the previous example to show the difference.

<form action="link"><input type="text" placeholder="text" required><button type="submit">submit</button></form>

We can also add radio buttons (or multiple choice) on the form when only one answer is required.

I’ll have to bring along the previous code since this still pertains to the form. It’s starting to look overwhelming, but I promise it’s not that complicated.

<form action="link"><input type="text" placeholder="text" required><button type="submit">submit</button>
<label for="choice 1"><input id="choice 1" type="radio" name="choice 1-choice 2">Choice 1 </label>
  <label for="choice 2"><input id="choice 2" type="radio" name="choice 1-choice 2">Choice 2
</label>
</form>

There are nests within nests in this code, so let’s start from the label.

Each radio button has its own label element. I don’t why it’s this complicated, I’ll just tell you what it is:

The for=”” and <input id””> is used to keep the buttons linked with each other. Not doing this means I can choose all the buttons, which defeats the purpose.

The type=”radio” should be obvious. I’m assuming the name=”” is meant to keep the choice binary, which muddles the two I did in the block above this. The italicized text before the closing tag is what will be next to the button on the page.

Next, we got checkboxes.

Once again, I’ll use the previous text for the sake of specificity.

<form action="link"><input type="text" placeholder="text" required><button type="submit">submit</button>
<label for="choice 1"><input id="choice 1" type="radio" name="choice 1-choice 2">Choice 1 </label>
  <label for="choice 2"><input id="choice 2" type="radio" name="choice 1-choice 2">Choice 2</label>
<label for="check 1"><input id="check 1" type="checkbox" name="bin">Check 1</label>
<label for="check 2"><input id="check 2" type="checkbox" name="bin">Check 2</label>
<label for="check 3"><input id="check 3" type="checkbox" name="bin">Check 3</label>
</form>

I don’t how it works compared to the radio buttons, but now that I’ve done this one, I see that the name=”” is the bin the choice will go into.

Keeping with my ‘coding is like a warehouse’ analogy, the name ensures the entries will go into the same bin.

We’re almost done y’all.

The next just took me through the value attribute task. This is getting frustrating because that’s what I thought the purpose of the input id was for.

It goes in between the input id and the type.

<form action="link"><input type="text" placeholder="text" required><button type="submit">submit</button>
<label for="choice 1"><input id="choice 1" value="choice 1" type="radio" name="choice 1-choice 2">Choice 1 </label>
  <label for="choice 2"><input id="choice 2" value="choice 2" type="radio" name="choice 1-choice 2">Choice 2</label>
<label for="check 1"><input id="check 1" value="check 1" type="checkbox" name="bin">Check 1</label>
<label for="check 2"><input id="check 2" value="check 2" type="checkbox" name="bin">Check 2</label>
<label for="check 3"><input id="check 3" value="check 3"  type="checkbox" name="bin">Check 3</label>
</form>

Last task in the form section. We’ll be checking a selection by default.

We simply put the word “checked” right after the name=””, all by itself.

<form action="link"><input type="text" placeholder="text" required><button type="submit">submit</button>
<label for="choice 1"><input id="choice 1" value="choice 1" type="radio" name="choice 1-choice 2" checked>Choice 1 </label>
  <label for="choice 2"><input id="choice 2" value="choice 2" type="radio" name="choice 1-choice 2">Choice 2</label>
<label for="check 1"><input id="check 1" value="check 1" type="checkbox" name="bin" checked>Check 1</label>
<label for="check 2"><input id="check 2" value="check 2" type="checkbox" name="bin">Check 2</label>
<label for="check 3"><input id="check 3" value="check 3"  type="checkbox" name="bin">Check 3</label>
</form>

HTML5 uses <div> elements to contain blocked of code. It’s best to look at it like the folders you use for documents. This does nothing to the page physically, it’s just for organizing purposes.

Simply put a <div> at the beginning of the block and then close it with </div>.

To accommodate older browsers, we will have to declare a doctype for our page.

It’s basic manners to put this at the top of the page.

<!DOCTYPE html>
<html>
text text text
</html>

It’s very important the DOCTYPE is capitalized with the exclamation point behind it. We’re using html title for now, but it may be different depending on the browser. The title is not case-sensitive.

HTML5 introduced me to more metadata elements that just make organizing easier. Mainly <head> and <body>.

What I Learned Today

1. How to turn an image into a link (or “make clicking the image go to a link” may be a better iteration).
2. How to make un/ordered lists (bulleted and numbered)
3. How to create a text box
4. How to add a placeholder text within the text box
5. How to create a form
6. How to add a submit button for the form
7. How to require completed fields before submitting a form
8. How to add radio buttons/multiple choice
9. How to add checkboxes
10. How to default select a radio button/checkbox
11. How to add a value attribute to a selection
12. Metaelements for HTML5 (div, main, head, body)
13. How to declare a doctype for a page

Concerns

1. Why is the dead hash (#) present in the “turn image into link” command?
2. Why is the “action” necessary in the form action=”” command?
3. What’s the difference betwee the label for=””, input id, and value attribute? Don’t they all serve the same purpose of putting the information into the server?

Got a lot done today! I’ve done this module numerous times so it’s good to get a refresher. It seems like HTML5 is more of an organizer for HTML instead of a separate language. Maybe it always was and I was too stupid to see it. We’ll start from CSS next post.