If you’re just tuning in, I’ve been writing a series of blogs about hand coding HTML, the language of the WWW (World Wide Web). This week I added more tags to my page. If you’re interested, read on for the details. Here’s a refresher on the terminology, just in case you need it.
An ELEMENT is a component of a webpage
An HTML element is a component of a webpage. The example below shows the markup for the sentence that reads But the details are missing. The element is comprised of the entire line of code.
TAGS mark the start and end of an element
Tags mark the start and end of an element. In our example, we are using the paragraph, or <p></p>. Although there are a couple of exceptions, HTML tags generally begin with the less-than (<) character and end with greater-than (>).
Attributes define a specific behavior
HTML also allows us to add an attribute, along with its corresponding value. In our example the font-size attribute is contained within the start tag.
Here’s what my updated page looks like. You can check it out real time here.
The additions
I added eight additional formatting tags to:
- define a section quoted from another source <blockquote>
- define the title of a work <cite>
- define text deleted from a document <del>
- define text inserted into a document <ins>
- highlight text <mark>
- make text smaller <small>
- create subscript text <sub>
- create superscript text <sup>
I also added a basic tag — the <br> or break tag. It’s an interesting one because unlike most other HTML tags, it doesn’t require an end tag (it’s referred to as an “empty” tag). It inserts a single break in the text as opposed to the additional space added when you use the paragraph, or <p> tag. That comes in handy when you need to format an address, or perhaps a poem.
In addition to the tags I added three attributes, which give the tags meaning and context:
- “text-align:center;” to center my text
- “font-size:200%” to bump up the text by two hundred percent
- “color:rgb(11, 102, 35)” to create a forest green heading
A couple of extras
To finish up, I:
- used the title attribute.
- defined the use of the Verdana font for my Beverage History title.
- added a frame tag <iframe> to embed a YouTube video.
I also made the video responsive, meaning it resizes according to the size of the browser window. Check out the video listed in the References section below if you want to learn how to do it.
More to come next week.
until nxt time …
References
HTML br tag. (n.d.). Retrieved from: https://www.w3schools.com/tags/tag_br.asp
HTML element. (2019). In Wikipedia. Retrieved from https://en.wikipedia.org/w/index.php?title=HTML_element&oldid=910228137
Johansson, R. (2005, August 30). HTML tags vs. elements vs. attributes | 456 Berea Street. Retrieved from: https://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_attributes/
Paper Krane. (n.d.). How To Make iframe’s Responsive (YouTube Embeds, Google Maps etc.) – YouTube. Retrieved from: https://www.youtube.com/watch?v=X4t0JxiBeO0
Header image by Adi Goldstein on Unsplash
