5 Things I've Learned In HTML (so far)
Lance Johnson
Media Strategist at Career Now Brands | Data-Driven | Statistics | Analytics
Hello LinkedIn friends!
I hope each one of you had an awesome end to your summers. It’s crazy for me to think it’s already September, and even crazier for me to believe that September is already almost over! I feel like I’m getting older now that I find myself saying the phrase, “time sure is flying by…” repeatedly.
And yes… I am only 22. I know it gets worse the older you get.
Anyways… Cheers to an awesome fall season and a successful Q4!
A few weeks ago, I decided to get a Codecademy membership to better improve my data toolset, as well as keep myself accountable towards my goal of continually learning and pushing myself.
I’m currently taking a course entitled “Learn HTML”, and as the title insinuates, I have already learned some awesome things in HTML! I know… shocker, right?
HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages. It describes the structure of a web page, consists of a series of elements, tells the web browser how to display various forms of content, and allows browsers to render pages across the web. If you right-click on any web page, then click “View Page Source”, you can see that page’s HTML.
Before we go through this, it’s important to understand the difference between elements and tags.
Element- Includes the starting tag, its attributes, ending tag, and everything in between. Ex: All the information between <html> and </html>.
Tag- Refers to the start of or end of an element. Ex: Referring to <html> (starting tag) OR </html> (ending tag).
Now that we have a basic understanding over these differences, let’s do this!
?
Here are 5 things I’ve learned so far in HTML:
1. The Basic HTML Required Tags/Elements
One thing I’ve learned so far through my HTML course is simply the basics of every HTML page. This includes !DOCTYPE html, html, head, meta, title, & the body elements.
The second picture is an example of how the basic elements would look with some text added. Here’s some of the basic terminology on what each of these elements/terms mean:
<!DOCTYPE html>- This tells the web browser how to render the document, and this document is made of HTML
<html>- This is the root element, and it defines the whole HTML document.
<head>- This contains specific pieces of information about the page/website.
??????????????<title>- This is the title of your page within the <head> element. This shows up when you go to the top of any page and look at the tab title that is on top of a page’s URL. ?
??????????????<meta>- This tag contains the metadata about an HTML document. Metadata is data (or information) about data. This is typically used to specify a character set, keywords, author of the HTML document, a page description, etc. This information is not displayed on the live page, but it is used by browsers, search engines, and other web services to gather detailed information about a website.
<body>- Everything included in the body element is what you actually see on the live page. For example, the above picture the had “<body>” says below next to “<h1>”, “Annual Aguillar Family Wine Festival”. What would that look like on an actual website? See below!
Anything that you want to be able to be seen on your website must be within the <body> element. If you’re starting to write your website from the top, make sure you’ve included your content within the <body> and </body> tags!
Basics- checked!
2. The Difference Between Child, Parent, And Grandparent Elements
Understanding this simple concept has helped me significantly in understanding basic HTML code. Look at the following:
For purposes of not confusing anyone who is not familiar with any HTML terminology, I’m not going to define what any of the elements, or what the letters behind the “< >“ tags, mean yet.
Web pages are read from top to bottom and left to right, so when we write HTML, we also write our code from top to bottom and left to right.
If you look at the first element circled in green, entitled “<thead>”, you’ll notice the next time “thead” is mentioned is at the bottom of the picture where there is a “/” sign between the < and > tags. This “/” sign means it is the closing of the content within the “thead” element.
This means that everything between “<thead>” and “</thead>” is included within the function of the element “thead”. Everything outside of “thead” is not included in the element’s function.
This concept also applies to the elements circled in red and blue (<tr>, </tr>, <th>, </th>).
The concept of child, parent, and grandparent elements can help explain these relationships. Because the blue circled “th” element is within the red circled “tr” element, the “th” element is considered the child of the “tr” element. Subsequently, the “tr” element is the parent of the “th” element.
Because the “thead” element encapsulates “tr” element, “thead” is the parent element of "tr". Inversely, this makes “tr” the child element of “thead”. This also makes the “thead” element the grandparent of the “th” element.?
If you go through many lines of code, this can be very helpful to know which elements are inside of which other elements, as well as identifying when and where a certain element starts or stops.
3. The Importance Of Indentation And Spacing
领英推荐
(close-up)
A third thing I learned about HTML is the importance of indentation and correct spacing. This makes the code cleaner and more readable for not just the developer, but also helps with others trying to read the code. This also makes the process of debugging problems within our code much easier.
Although not perfect, you can see a little example of how indentation makes our code easier to read in the above picture. If there was no indentation whatsoever, it would be harder for us to identify where elements start and end (as well as bring forth some headaches…).
4. How To Create Tables
Tables can provide very useful information in a variety of contexts for a business’ website. Two common examples of this include using tables to compare a business' service(s) to their competition, or a business could define row by row the different costs of their service(s), then add a grand total of the total cost to the bottom of the table.
As you can see in the above picture, I was given the task of creating a wine festival schedule using table elements. Although the code above looks a little intimidating at first glance, I can promise you, it isn’t as hard as it may seem! Let’s break it down by each element/attribute.
<table> - Represents tabular data, information comprised of rows and columns of cells that have data (just like math class… easy!)
<thead> - The table head element. Defines the set of rows which include the head of the columns of the table.
<tr>- The table row element, which represents a row in the table. Because HTML reads from top to bottom, left to right, the first <tr> element you have in your code will be the first row in the table.
<th> and colspan- <th> is the table header element, and it defines a header cell in an HTML table (not to be confused with thead, which defines set of rows). “colspan” is an attribute you can use within the opening <th> tag that specifies the number of columns you want that cell to span. In the above example, “Wine Festival Schedule” spans over two columns as defined by “colspan = 2”.
<h1> & <h2> - Define HTML headings. <h1> is the largest heading and is often the one you’d want to use as the headline of an article you are writing, for example. <h2> is the second largest heading and is often used as subtitles for headlines. You can style your text headings all the way to <h6>, which is he smallest among global attribute headings of HTML.
<tbody> - Defines the body of your table. This is where you add all the information under your header (or column) names.
<td>- The <td> element stands for table data, and this is where you add the information you want within a cell of your table.
If you learn and practice writing these elements, before you know it, you’ll be creating your own awesome tables!
5. Learning How To Learn (Again)
This isn’t exactly an HTML lesson I learned, but I thought it’d be useful for some of you out there who want to learn a new skill but aren’t sure how or where to start.
Many people older than me have said that it’s hard to get back in school or the learning process once you’ve been out of it for a while. Even though I graduated only four months ago, I’ve already found this to be somewhat difficult to transition in the beginning.
Why?
In life, there are no more professors or teachers that give us assignments, quizzes, tests, exams, group projects, or deadlines. In life, there are no more clearly defined syllabuses that outline everything that will be expected of us. In life, there are more responsibilities and distractions than there were in school.
And finally, in life… we need to create our own structure that works best for us. I don’t think any person can truly just let life happen to them and feel fulfilled too. I truly believe every person has some control of their destinies in life, and that is one reason why I choose to continue pushing myself in different ways. Persistency pays.
If you want to learn a new skill or improve yourself in any way (exercising more, eating healthier, volunteering more, etc.), create a plan to achieve that goal, and start sloooowwww.
In the past when I’ve tried to learn a new skill, I’d take it up on myself to try and learn too many things too quickly. Our brains aren’t wired for taking in tons of new information and remembering it over the long-term. If you want to learn a new skill, start slow, review & study the material you just learned that same night, and only move on to the next concept once you’ve mastered the previous content.
One technique I learned form a free class on Coursera was the Pomodoro Technique. Although there are variations of it, the overall gist of it is a time management system that encourages us to work with the time we have, rather than working against it. Clearly break up your time between designated work/focused time and designated rest time. The overall goal of this is to re-train our brains to be more focused. If you read this entire paragraph without having another thought cross your mind, great job! For many of us, this would prove to be difficult. The Pomodoro Technique could help ??.
For example, if you wanted to learn HTML, set a timer for 25 minutes (can vary depending on personal goal), eliminate all distractions, and focus on learning the task or lesson at hand. No emails, no app notifications, and silence your phone. You want to focus on nothing but what you’re trying to learn in the moment.
Younger people (me included) typically have shorter attention spans than older people. If you have a shorter attention span and think 25 minutes is way too long, try this technique for 15 minutes and work your way up! Life is a marathon, not a race.
Some words of wisdom from my grandpa:
Grandpa: (goes to the fridge, grabs 2b salami stick, comes back to living room): “Lance, how do you eat this salami?”
Me: “Uhhhhh…. by the slice?”
Grandpa: “Yes! You shouldn’t eat a whole salami without slicing it up. Just like eating this salami, in life, you need to take everything one slice at a time.”
Me: (hysterically laughing) “Thanks for the awesome life lesson, grandpa!”
Thanks for reading! Hope you have an awesome rest of your September!
?
?
Information Security Analyst
3 年Awesome Lance! Thanks for sharing! One slice at a time!