Revisiting HTML, this time, With CSS.

When I first taught myself HTML, it was in the 1990s, and not only has the technology advanced, but the philosophy behind Web-design has also changed. The original philosophy was, that the Web-page should only contain the information, and that each Web-browser should define in what style that information should be displayed. But of course, when Cascading Style-Sheets were invented – which in today’s laconic vocabulary are just referred to as “Styles” – they represented a full reversal of that philosophy, since by nature, they control the very appearance of the page, from the server.

My own knowledge of HTML has been somewhat limited. I’ve bought cuspy books about ‘CSS’ as well as about ‘JQuery’, but have never made the effort to read each book from beginning to end. I mainly focused on what some key concepts are, in HTML5 and CSS.

Well recently I’ve become interested in HTML5 and CSS again, and have found, that to buy the Basic license of a WYSIWYG-editor named “BlueGriffon“, proved informative. I do have access to some open-source HTML editors, but find that even if they come as a WYSIWIG-editor, they mainly tend to produce static pages, very similar to what Web-masters were already creating in the 1990s. In the open-source domain, maybe a better example would be “SeaMonkey“. Beyond that, ‘KompoZer‘ can no longer be made to run on up-to-date 64-bit systems, and while “BlueFish”, a pronouncedly KDE-centric solution available from the package-manager, does offer advanced capabilities, it only does so in the form of an IDE.

(Updated 03/09/2018, 17h10 : )

One subject I’ve been interested in learning, is how to add some fancy effects to a Web-page, and to do so with the most bang-for-the-buck. Hence, while it would be possible to edit HTML5 with a text-editor, and to write a lot of JavaScript, this method of adding effects to a page do not interest me as much for the moment, as the use of Style-Sheets does, which is faster and neater. And while the GUI of BlueGriffon only inserts certain types of effects, belonging to a list which is nevertheless impressive, I can next see the actual HTML that was generated, including anything that was inserted between <style> … </style> tags, and can compare that with what I once read in my book on CSS, and from there, create more-complex effects just in the code-editor, still within BlueGriffon.


 

IMO, The only feature which would make BlueGriffon a better user-experience on a first-use basis, but which it does not have, is to Insert a ‘Block-Div’ primitive, from the GUI. This would mean, that a <div> can assigned a Class such as ‘block’, and that the Style-definition of ‘.block’ could then set, either

 


.block {
  display: block;
  width: 640px;
  height: 480px;
}


 

Or

 


.block {
  display: inline-block;
  width: 640px;
  height: 480px;
}


 

This is a useful trick to know, because even if a CSS Transition is to change an image due to mouse-hover, this would be a question of changing the ‘background-image’ Property belonging to the ID (not the Class) of an object, for which we might not want to set a foreground-image. To change the foreground-image would require some JavaScript. And then, to have such an (empty) Block, can in fact be useful, because all sorts of Properties and Variables can nevertheless be attached to it.

But, once a Web-author knows this trick, he or she can still add it easily, just using the Code-Editing panel, maybe not on a first-use basis.


 

One fact which I’d caution prospective users about, is that the preview-panel of BlueGriffon has intentionally been modified by its authors, so that Animations and Transitions don’t play, because to have animations playing could make editing the page impractical. A user could mistakenly think that either this is a bug, or that he himself has made some sort of error in his first exercises, when in fact this is a conscious design-decision. But, with one click, another preview can be opened, in our favorite Web-browser, the executable of which only needs to be configured once, and the choice of which can later be changed in the ‘Preferences’, under the ‘Advanced’ tab, but still while only using the GUI.

Where other references actually show the transitions working, in the Editing View, those references date back to older BlueGriffon-versions, from before the time, the so-called bug I linked to above, was Fixed. If the reader advances the bug-report, he will see that after SeaMonkey, BlueGriffon also gets mentioned.

At the same time, the layout of BlueGriffon makes it easy for beginners to get started, just to create a static Web-page easily.

What I have done for now, is to design my own exercise in Rollovers, as can be seen below:

http://dirkmittler.homeip.net/Rollover_Demo.html

One day I may again want to wander away from just posting entries into this one blog-platform, and to start some new HTML-based project. I just don’t know what that project should be, nor when this should happen.

BTW: Installing BlueGriffon v3.0.1 under Debian, requires Debian 9, aka Debian Stretch. If one tries to install it under Debian 8, the package-manager will not display any messages about missing dependencies, but then, to run the executable will produce a familiar error-message about the required CXX-version not being available. And the application won’t start.


 

(Edit 03/09/2018, 17h10 : )

The URL I showed above, only demonstrates that if a visitor with a laptop or a PC -based browser, hovers over the image with his mouse, the image changes. This would be insufficient for practical Web-pages, because an image that changes in such a way is usually a signal to a visitor, to click on it.

If the Web-author intends, that if his visitor is to click on the image (which is highlighting itself), this is to redirect the visitor to a new URL, then the Web-author has as option to wrap his <div> inside an

<a href=””> <div class=”block”> </div> </a>

Tag-pair. This is one place in which I once placed a clickable image, albeit one that was not animated in any way. However, if the Web-author only does that and nothing else, then the visitor’s browser will still highlight the link he’s created, according to the default of highlighting links. In that case, the Web-author would also need to modify the appearance of this link, should he not want it highlighted by the browser. But there are easy ways to do this. I think that in the case of ‘linked images’, we’d need:

 


a.image-border {
  text-decoration: none;
  border: 0 none;
}


 

OTOH, If the Web-author wants the visitor’s clicking on his <div> to do ‘something else’, then he’d need to use JavaScript anyway, and according to what I read, adding an ‘ onclick=”” ‘ Property to a <div> is fine by default. And yet, as my link indicates, this is a subject which full-time Web-authors could run into trouble with. According to some postings above, if the Class of the <div> had indicated ‘ display: block ‘ , then the OP should not have run into trouble.

Dirk

 

Print Friendly, PDF & Email

One thought on “Revisiting HTML, this time, With CSS.”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.