Codeblock
.jpeg)
Welcome to Codeblock with @gregjava!
Today, we will be trying more easy ways to format web or HTML blogs and posts. This tutorial is applicable to your Steemit blog posts as well. In subsequent series, we will be trying even more codes and design techniques.
If you missed any earlier edition or want to be acquainted with more useful codes, scroll down to Archives and select your desired post.
Now, let's design our blog post...
Blog/Page sections and dividers
Generally, web pages and blogs are sectionated into 3 virtual compartments, after the human anatomy; header, footer and body. These compartments are virtual and do not have to be visible to the visitor. Dividers are used (when desired) to describe their demarcation or boundaries. This is most important for blog/pages with huge amount of content.
.jpeg)
Page/Section dividers are horizontal lines (usually faint lines spanning the width of the blog/page on user's computer). They are used to visibly mark the beginning and end of pages, vertical sections or display blocks of content on a blog/page.
Blog/Page Header
Basically, in the human anatomy of an upright standing individual, the head is located in the upper region of the body. Due to the fact that it lies within the range of first sight of an onlooker, the look (and quality) of a head matters a lot!
The same is applicable to the blog/page scenario. The header of a blog/page is the uppermost section that is first visible to the user when the browser loads or is refreshed. Hence, an attractive header can get visitors engaged. Usually, a header will contain information like headlines or content topics. The information should, at a glance, showcase what the blog/page is about summarily.
It is important to ensure that content in this section is catchy and set to attract the desired audience. A poor blog/page header will most likely discourage visitors and negatively impact the appeal of the entire blog/page.
Blog/Page Footer
The footer of a blog/page is the very bottom of the blog/page. It is usually the last place to be made accessible to a visitor. This makes it most relevant for extension materials like links to related information, references, and so on. Footnotes are also conveniently dropped here and when paging is done, it is usually done here too.
Blog/Page Body
The body of blog/page refers to the section which holds the described content that the blog/page is about. Headlines are expanded and discussed here.
The content of this section is expected to be detailed and complete to satisfy the visitor's needs. Content in this section is usually large hence, it may be split into columns and paragraphs for easy readability.
More on Page/Section Dividers
Page/Section dividers (as earlier explained) help to visually distinguish sections on a blog/page, whether header, body or footer. The most basic blog/page divider is the HTML horizontal rule (< hr>
or < hr/>
). However, there are custom dividers which are actually lightweight images that can replace the horizontal rule in function.
These are some free dividers you can try out from @calumam.
Notes:
In summary, the sectioning format of a blog/page is
- header
- divider
- body
- divider
- footer
I wish you the best of the week ahead...
Thanks for reading!!!
If you think what you just read was beneficial to you and/or might be beneficial to someone else, please re-blog or resteem.
If you have any questions, recommendations or suggestions, please leave a comment in the comment section.
If you want to read the latest news in science and technology, remember to visit the scitech channelon discord.
Archives
Texts
Audio
Video
Hello there!
I can't help but notice that you used the Utopian-io tag on a blog post that is entirely unrelated to open source software. That's an inappropriate way to use our tags, I'm afraid.
If you want to contribute content that is relevant to Utopian, please read our guidelines. I would also recommend reading our weekly Top Of Utopian posts to get an idea of the kind of content we particularly like.
I look forward to seeing awesome relevant content from you in the future.
Due to ineligibility, your contribution has not been evaluated.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
I keep forgetting... I wonder why. I think it's because I originally had the orientation that utopian-io was a hub of programmers who work on open source projects.
My bad, I am not too used to the workings around here yet, I'm the slow type... lol... But, I will avoid its reoccurence.
Posted using Partiko Android
It is that, but each category has its own guidelines for what is expected. Do keep an eye on those guidelines, though. They're undergoing review, and may allow broader content in the future.
Ok. Thanks.
Posted using Partiko Android
Thanks
Posted using Partiko Android
Congratulations @gregjava! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :
Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word
STOP
Thank you