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.
<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:
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.
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:
<input type=”text” placeholder=”cat photo URL”>
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.