Posted by: Bianca Gubalke
Category: Blog, CS3, Doing, Elements, Footer, Google Top 10, Graphic Art, Graphic Artwork, Graphic Design, Graphic Design Services, Graphic Design for Books, Gubalke, HTML5, Header, Home Business, How, Management, Markup, Navigation, Noordhoek, PSpad, Pullquote, Redefining, Semantic, Semiomantics, Structure, Tags, Using, Work From Home, YORGOO Media, YORGOO Press, YORGOOpublishing, Yorgo Nestoridis, Yorgo Nestoridis Publishing, a, and, article, aside, bianca, by, create, div, divitis, lean, learn, make money, section, simple, syndrome, that, the, to, work from home success, yorgo_nestoridis
Tags: dublicator, Yorgo Nestoridis, yorgoo
Redefining a Blog using Semantic Markup
Redefining a Blog using Semantic Markup
“You never start with a blanc page, do you?” I was asked at this morning’s breakfast table. Well… my answer was: “Yes, we do!” and promptly that’s what I started out to do today, continuing from yesterday’s post HERE and following the next basic exercise in “How to learn HTML5 and CS3″: Redefining a Blog using Semantic Markup.
Redefining a Blog using Semantic Markup
“Redefining a Blog using Semantic Markup” is first of all about getting rid of the ‘divitis’ syndrome – meaning the usage of div tags – while exploring the elements that create a simple blog structure containing a typical header with a horizontal menu (navigation) underneath it. This is followed by the main section that contains the content in form of articles, that may each have their own header and footer as well as an aside (which may be a pullquote as in my example here). To this we add a sidebar with additional navigation. The page typically ends with a footer for the copyright note and possibly further information like Home, About and Privacy.
Starting out from a blanc white page on my PSpad, I simply followed instructions and tried to understand what I was doing, what was known and where the differences were – creating an index.html page and a style.css – and getting the desired result. Nothing special, nothing designed to look great yet – just an exercise where “Learn by Doing” is what counts.
Another interesting difference I observed: this is all that’s needed at the top of the html page: <!DOCTYPE html> … talking of lean management!
I will certainly continue the journey…
