08.08.2018: One Lesson of Coding

Today's soundtrack is Hank Williams, Jr.: Family Tradition. This afternoon, I'm continuing to learn about basic HTML and HTML5 on freeCodeCamp.

We can nest things within other things: for example, a link can be put inside of a paragraph.

<p>This isn't clickable, but <a href="www.example.com">this is</a>!

If we are designing a website but don't yet know where we want nested text to be linked to, we can make a dead link with a hashtag inside the quotation marks.

<h1>You can't click on <a href="#">this</a> because it's a dead link!</h1>

We can also nest an image inside of a link so that clicking the photo takes us somewhere.

<a href="www.example.com"><img src="www.example.com/image.jpg" alt="Example photo"></a>

We can create bullet point lists by using the HTML "unordered list" tags to enclose our list items.

<ul> <li>item 1</li> <li>item 2</li> </ul>

We can create numbered lists by using the HTML "ordered list" tags to enclose our list items.

<ol> <li>item</li> <li>thatem</li> </ol>

We can use web forms to allow users to input information. Input elements do not require closing tags. There are many input types. To create a text input, we use the text type.

<input type="text">

So that the user knows what kind of input is expected in a form, we can use placeholder text - for example, if we wanted to collect users' email addresses, we could set the placeholder text to show an example email address.

<input type="text" placeholder="Is this the Krusty Krab?">

We use form elements to let users send inputted information to a server.

<form action="/data_input_url.com"><input type="text" placeholder="Is this the Krusty Krab?"></form>

To add a "submit" button to a form, we use the button type "submit" tag. We can label it however we would like. It must be included before the form's closing tag so that it is attached to the form.

<button type="submit">don't click this button</button>

If we want to make part of our form a required field, we can use HTML5 to do so. All we need to do is add the word "required" after we list the input type.

<input type="text" required placeholder="Is your name Patrick?"

Another kind of input we can use is the radio button, which is like a multiple-choice option. We put everything inside of a set of "label" tags so that everything is connected. If we only want to allow a single input, we must give all options the same name so that selecting one item will deselect any other items that were previously selected within that same label.

<label><input type="radio" name="example">Example1</label>

To attach multiple radio buttons to the same form, we must give them each the same name. For the sake of aiding in assistive technologies, we indicate a link between the label and the input by using the tags "for" and "id".

<label for="one option"> <input id="one option" type="radio" name="options">One Option</label>

<label for="another option"> <input id="another option" type="radio" name="options">Another Option </label>