Now we need to make a mockup web page taking the design and breaking it down into its constituent parts. I haven't discussed HTML yet, but if you are completely unfamiliar with it, it is a markup language, much like XML with similar tag syntax. It it also not necessarily XML in that tags don't necessarily need to be opened and closed depending on which standard you are using. For me, I decided to use XHTML arbitrarily, which does treat HTML like XML in that it does need matching tags. I validated the document using an online validation service to tell me if all the tags matched and the like. If you want to set up your document to run according to a particular specification, this is helpful for getting the correct document definitions.
So the first thing is to organize the content in the web page according to definition of information and where it might be located. Keep in mind accessibility while you design your HTML. Content in the plain document should run from beginning to end in a logical order which you would read it regardless of where you want to eventually put that information using cascading style sheets. So at a high level the document is like this:
We have split the document into three parts, header, preamble and the procedure. Now we flesh those out with the parts contained inside of them.
Now we have named all the parts of the document that were labeled in the previous image, let's add some Lorem ipsum text and filler so that we have something that might resemble the HTML with content of a complete recipe.
Though it is all nonsense information for now, it will help us decide how to write the cascading style sheets in the next part.
As an after thought, considering I want the page to look like a recipe card floating over a table cloth background, it makes sense to wrap everything inside of another pair of tags to define where the recipe begins and ends. This also increases reusability in case, for example, I would like to make a version of this page with more than one recipe, then it would be easier to put one recipe section below another recipe section. HTML and CSS experts would point out that I have a few problems in the current design that make it hard to do this, (using id instead of class, for example, on several tags means that one and only one element may have that designation) but that is part of the design and learning process for me. I try something, find out if it works, if it does, great; doesn't, just another chance to learn how to do something better.
ReplyDelete