Learning to Code: Day 2 — Basic HTML and HTML5 Part 2

Today I decided to get up early while the day was young and get the coding done as this is usually my most productive time.. Either that or after 11pm when my brain just won’t let me sleep. So this is more productive.

It’s Saturday today so I’m looking forward to figuring out how this works into my working week, alongside work and German class which is starting up again very soon. I love a good prep so I created a habit tracker in my bullet journal (yes I have one, why don’t you) to make sure I keep up with what’s important over September, and work these new habits into routines.

I’ve slightly changed the layout of this post so it’s easier to follow as yesterday was a bit of a jumble to read over later.

Let’s grab a nice cup of tea, set up Notes and the lessons on split-screen, this blog in another, and get started from where we left off yesterday.

—

Dead Links

If you know ahead of time that you want to insert a link but you don’t know where it’s destination is, you can anchor a hashtag, like saving a spot for later. According to FreeCodeCamp, this comes handy later on when changing the link using JavaScript (another coding language used to build websites). so the code would be a hyperlink that is a hashtag as follows: href=“#”.

<p>Click here to view more <a href=”#” target=”_blank”>cat photos</a>.</p>

Remember the target=“_blank” will tell the program to open that hyperlink in a new tab.

Turning an Image into a Link

By “nesting” the line of code referring to the image within an anchor and placing href=“#” before it, the image becomes a hyperlink.

<a href=”#”><img src=”https://bit.ly/fcc-relaxing-cat" alt=”A cute orange cat lying on its back.”></a>

Creating a unordered Bullet Point style list

HTML has a handy trick to making unordered lists (abbreviated to ul in HTML), by using the element <ul> and nesting the element <li> (short for list) inside. The li becomes a child element in this case, as we learned yesterday, and is moved slightly to the right, as if you’ve pressed “tab” on the keyboard. Let’s see the example given by FreeCodeCamp:

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

Creating an ordered list

Much like before, creating a list follows the same principles as the above, except instead of writing <ul> in the code, write <ol> (which is short for ordered list) and the list will appear as a numbered list instead of a bullet point list.

Creating a Text Field for the User

At some point there will need to be a place for the user to input original text. This is different to <p> text, as that is text previously written and shown in the website. Using the <input> element, you are implicating a place for the user to input original text data. Note: the <input> element is self enclosing, like the img elements.

<input type=”text”>

Adding a Placeholder to the Text Field

Placeholder text appears on-screen within the text field where the user would type. Think of that text in the Facebook post text field that says “What’s on your mind?…” or something. It can be useful for the user as it indicates what to type in that given field. Once again, the input element is self-enclosing. Here’s the code:

<input type=”text” placeholder=”What’s on your mind?…”>

Creating a Web Form element

You can create a web form, where the user enters data that is sent to the server for processing. Here is the explanation on Wikipedia:

“A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.”

So by nesting the text field within the form element, and specifying an action (URL for where the data is sent), you can give the user a text field to enter data and set a URL for where that data is sent to. Here’s what that looks like in the code. This example refers to the cats exercise, FreeCodeCamp really likes cats:

<form

action=”https://freecatphotoapp.com/submit-cat-photo">

<input type=”text” placeholder=”cat photo URL”>

</form>

Adding a Button element to the Form

So the user has typed in data into the text field, but there is no button element to click “submit” on. So let’s make one. Here’s the example given in FreeCodeCamp:

<button type=”submit”>this button submits the form</button>

This will appear as a small grey box with the attribute type set to “this button submits the form”.

—

Aaaaaand that’s a wrap for today. With me so far? Thanks to everyone who gave me feedback in my post on Facebook announcing this blog. That was a really big motivator! I hope you enjoyed learning a little code with me today. Oh lastly, I forgot to mention that all HTML tags should be written in lowercase, not uppercase.

See you next time.