Learning to Code: Day 3 — Basic HTML and HTML5 Part 3
Morning folks, hope you are enjoyed the easier-to-read post yesterday and the little SideStories I’ve started, if you haven’t checked them out, be sure to do so before we jump in here. Alright, got my headphones on, lets pick up where we left off.
—
Require a Field
Alright, this is something I’ve been waiting for, you know when you are entering your username and password but you only enter your username, you hit sign in and the password field goes red like “enter your password too!” well, theres some code for that. And it’s super simple. Within the input element, simply add a required attribute to create that little rule. Looks like this in the code:
<input type=”text” required>
As you can see, it reads as “the input type is text, and that text is required.” Done.
Create a set of Radio Buttons
Imagine you’re filling out a form online, it asks you to select your favourite type of animal. You can only pick one. There’s cat and dog. You press on the circular round dot before the word “cat” and the dot goes blue. If you then select “dog”, the blue dot for “cat” disappears as you’ve now selected another choice.
This is essentially what we’re looking at here. You’re creating a multiple choice option where only one option can be selected. Were looking at radio buttons (this is the input type) nested within the label element. We’ll add a for attribute after the label element for each choice that matches the id attribute (in this case the two choices “cat” or “dog”). This helps “assistive technologies” (thanks FreeCodeCamp) to “create a linked relationship between the label and the child input element”.
The two options (or id) in the group “favourite animal” (the name attribute which creates a group for all the values given) are cat or dog (the value attribute).Then we write the word Cat or Dog which will appear to the user beside the radio button. In that order, it looks like this:
<label for=“cat”>
<input id=“cat” type=”radio” name=”favourite animal”>Cat</label>
<label for=“dog”>
<input id=“dog” type=”radio” name=”favourite animal”>Dog</label>
Create a Set of Checkboxes
Like the Radio Buttons where you have one choice, checkboxes allow you to select more than one option. They follow the same layout of code as the radio buttons but the type is different. Instead of appearing as a circular button to the user, they appear as squares and once selected they will have a little tick, like little checkboxes.
I’m going to add a paragraph (<p>) at the beginning for the user and also a break (<br>) to separate the boxes onto their own line rather than all the choices on the same line. Here’s the code:
<p>What is the personality of your cat?</p>
<label for=”cold”>
<input id=”cold” type=”checkbox” name=”personality”>Cold</label>
<br>
<label for=”warm”>
<input id=”warm” type=”checkbox” name=”personality”>Warm</label>
<br>
<label for=”loving”>
<input id=”loving” type=”checkbox” name=”personality”>Loving</label>
This is not the best example however as the choices given appear more exclusive than something you’d select multiple choice for. “My cat is a cold hearted monster but loving also”. Well, that could work I guess.
Using the value attribute with Radio Buttons and Checkboxes
This is more of a caution, but there is no value attribute given in the above example, so when the user submits the data, the resulting information will say “personality=on” which isnt as useful to read as “personality=Loving”. So we need to add a value attribute instead of the id attribute. Here’s an example from the checkbox for “loving”:
<label for=”loving”>
<input value=”loving” type=”checkbox” name=”personality”>Loving</label>
Checking Radio Buttons and Checkboxes by Default
This is kinda like the required attribute, we are gonna add the checked attribute to the end of the code after the name attribute so that they are checked by default when the user comes to those forms, this way the buttons will always have one option already marked. Here’s the same code again from above with the checked attribute added:
<label for=”loving”>
<input value=”loving” type=”checkbox” name=”personality” checked >Loving</label>
Note: you will ony have to write this into one of the options you create, so as to say “an option is selected for you already but you can change it”. I would prefer this to only occur for Radio Buttons and leave the checkboxes emtpy for the user to select freely, but that’s only my personal preference.
Nest several Elements inside the Div Element
The div element, which is also known as the division element, is the most common element on HTML, according to FreeCodeCamp. This seperates the code you write into its own little section. It contains the HTML elements which are then used by other computer languages, like CSS which can style it or JavaScript which can manipulate it. (Thanks to w3schools.com for that explanation). Here’s how a typical div could look:
<div>
<p>Here is an example of a paragraph nested within a div</p>
</div>
Note: Too many div tags look jumbled and are known as “div soup”: they can be quite overwhelming to external developers, so go easy on them.
Declaring the DocType of an HTML document
Okay so this is the very first thing you’d write in any website you are creating. When creating an HTML website that the browser can recognise, you need to define what it is. This is defined by typing these specific words:
<!DOCTYPE html>
This says to the browser “here is a document type which is HTML” in this case, and then you want to begin the language with the opening tag <html>, press enter several times to move the line down and type the closing tag </html>. This is like looking at a piece of paper where you’re going to write a letter: you are defining the top of the paper and the bottom of the paper, everything you then write will appear within the confines of those tags.
Then you would have a header for your website. There are six sizes of headers, like a font size where h1 is the largest and h6 is the smallest. This was mentioned in the Day 1 blog I made where h1 was a header and h2 was a subheading. Let’s put this all together into a chunk of code:
<!DOCTYPE html>
<html>
<h1>My Website Name</h1>
<! — -code goes here… blah blah blah — →
</html>
Note: I thought I’d already explained this, but apparently not. In this code you can see a < symbol, a ! and two dashes. This opens a comment for the coder to leave for themself or other developers to see when reading the code and will not appear in the final product. It is then closed by two dashes and a > symbol. If the comment is not closed off then the rest of the code will be in a comment style also. So remember the closing tags! (The formatting on Medium is funny so the dashes look longer and the -> looks like an arrow idk).
Defining the Head and Body of a Document
Head and body elements which are contained within the html tags generally follow the same rule as the layout of a person, the head at the top followed by the body. Unless you’re a contortionist. There’s an example at the end of this post of the head and body tags in code that I was working on.
Head tags contain meta data such as meta, link, title and style. The body tags contains the data that appears in the console or browser such as the paragraph p and the headers h1 etc. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<! — metadata elements →
</head>
<body>
<! — page contents →
</body>
</html>
Note: As mentioned above, “meta elements” and “page contents” are comments in the code and wont appear to the user, they are only for explanation here.
—
Aaaaaaand let’s call it a day there.
Thanks for reading and learning with me today I hope you had fun! I had a wee look around for a good sandbox to practise coding in and found a computer app called Atom which is great for practise, it highlights code as you type giving explanations and colours different parts of the code so it’s easier to read. Here’s something I wrote:
Here you can see I called this program “index.html” so the page is saved as a readable document on the web browser, with the title “index” to suggest this as a homepage (typically the first page you’d create on a website). There’s the DocType we spoke about, the <html> tags, there is meta data which external developers would read to see “okay what is this code I’m reading” on line 4 and 5. The <title> tag is for the name that goes in the browser tab, all nested within the <head> tag. Everything that appears within the head tags is meta data and won’t appear in the browser. There’s the header of the site within the h1 tags (the largest font remember). The </hr> is like a break (remember that was written as <br> )in the page but puts a horizontal line through instead, and then I played about with <big> (increases the font size) and <b> (bold) and <i> (italics) tags. The terminology for analysing these compionents and how they relate to each other is called “parsing” in programming.
This really helps me understand what I’m writing by putting it into practise. I suggest you give it a go if you’re interested! See you next time.
