Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
Previously, we have tackled the Text stage of RE:Creation wherein we came up with a textual content of the front panel of the packaging which is our basis for this stage.
Mark up the structure in HTML
Mark up the groups in HTML
Mark up the individual elements in HTML
Marking up means identifying elements, defining, and labeling them. It is just like in Text stage when we labeled elements and grouped them — but this time, we take it a step further by using HTML tags which has the capability to define where a markup starts and where it ends.
In HTML, we’ll use start and end tags to enclose elements. Once elements are enclosed by these tags, web browsers will be able to interpret and display them accordingly.
Speaking of HTML tags, they have a syntax for us to follow. Syntax is the arrangement of symbols and rules that constitute the correct form of a language just like HTML. As an example for the label “Header”, the HTML tag will be <header> and </header>; for “Main”, <main> and </main>; and for “Footer”, <footer> and </footer>.
It is one thing to make our content readable for web browsers (for them to properly interpret and display it) and another thing to make it readable for humans (us and other coders who will be reading or modifying our works).
The fact that we have marked up our content in HTML tags, that makes it readable for web browsers. Indentation, on the other hand, makes it readable for human readers. All content within structures can be indented; the same as content within groups. In this way, we could see how the content is nested by looking at it.
Step 1: Mark up the structure in HTML
Enclose the structure labels in “less than” (<) and “greater than” (>) signs
For their delimiters or boundaries, simply add a “slash” after the “less than” (<) sign
Convert the labels to the “small caps” (e.g., “Header” becomes “header”)
At this point in our activity, we can already view the result of our markup in a web browser. In our demo in CodePen, you can see on one side what the browser will display given our markup. It’s not apparent because the text elements are still placed side by side, but the result already shows the structure we made: the “Header”, starting with “Product name”, the “Main”, starting with “Product main description”, and “Footer”, starting with “(none)”.
Step 2: Mark up the groups in HTML
Similarly with step 1, mark up the groups by converting their labels into HTML start and end tags
For the syntax, aside from making everything in “small caps”, convert spaces to underscores (“_”)
Again, indent the nested elements within groups for readability
The result of our markup may not visually show much improvement but we’re already paving the path for a solid basis of HTML and CSS.
For our next activity, we will be going into the details of HTML tags. Since HTML is a language, it has a vocabulary — meaning, it already has a set of tags that is equivalent to what we created at this stage.