There is a small conceit concerning whitespace (which means strings of spaces, tabs, and linefeeds); the browser normally shows whitespace as a single space no matter how much you use, so you gotta break lines manually with<B> bold text </B>
<I> italic text </I>
<U> underlined text </U>
And to break the line, use <BR /> by itself.bold text italic text underlined text And to break the line, use
by itself.
<BR/>
.<B>, <I>, <U>, <BR />
) ought to be enough for us to communicate with each other. I would like to see two boxes next to each other: one for text and one for code; but each showing the same thing, just in two different formats; and you should be able to edit one and see your changes in the other!
A statement in italics might not stand out much.
But see how boldface attracts the eyeball? Type in either side and see. |
<blog_entry> <timestamp> February 29th </timestamp> <contents> Flappin' my gums about somethin'. <U>Underlining things</U> perhaps? <BR /> Bye! </contents> </blog_entry>
February 29th Flappin' my gums about somethin'. Underlining things perhaps?
Bye!
<blog_entry>, <timestamp> and <contents>
) exist nowhere in the HTML spec. But as part of the futureproof nature of the hypertext standard, you can wrap text in any tags you prefer and the browser doesn't complain. In fact, HTML5 will happily allow you to define, on a page by page basis, how the browser should render the text in custom tags. At the beginning of the blog, I asked the browser to produce a few small accents. The timestamp appears on the right in a soft shadow and extra pixels create a margin.
roundie
. A roundie contributes a bright background and a big readable font to the text it surrounds, and reacts to mouse clicks by depressing itself.
<templates>
<roundie>
Title of roundie
</roundie>
</templates>
<roundie>Click me, reader!</roundie> Click me, reader!
I confess that the templates method is more elaborate than what I just showed you, but you don't have to know about the computer science necessary to let HTML use templates – that kind of tech can be stored away in files. I had to test different browsers, and not everything is always quite perfect (older versions of Microsoft Internet Explorer were notorious for their out-of-spec behavior). The result of my work is quite unimpeachable, however: you can use the roundie
template exactly as I did above to produce the button above!
roundie
is just a template. There are infinite variations that are possible. This one has a
<B>, <I>, and <U>
tags: <blog_entry>
as having a <timestamp>
and a <contents>
inside it can free ourselves to think in terms of the individual parts. A blog entry's timestamp
is the date it was posted to the blog – and that's separate from its contents
– and they both 'belong' to the blog entry. The structure of the template mirrors the perception of how we think of it, and that's a very good thing. This can get fun.
put "hello!" into the timestamp in this blog_entry
put the date into the timestamp in this blog_entry
this blog_entry
is. It's the blog_entry containing the roundie you clicked. Then...the timestamp of
(1) we know is inside (1). Then...any word in "pink orange lightBlue"
is a color chosen at random. The choice is made every time the mouse click is processed, so it's always a different color. That's what we're going to change the background to.
background
is called a property of the roundie. It is not a tag, as there is no <background></background>
you have to put in the roundie – it does not appear in a textual way. You can specify a background as an HTML attribute called data-background
. Here's an example:
Here is a monster. Clicking this is a tour de force of checking, asking, and changing.<roundie data-background="lightGray">Gray as the day.</roundie>
Gray as the day.
The controls are sometimes put together into a form, which can be submitted back to the server.
A checkbox control: Radio buttons: Popup menu:
· · · Here's a new editor. The style buttons in its toolbar support bold, italic, underline text, and a new style,strike.
This one switches between the text andHTML
with the "View HTML" button (modern browsers show a neat effect).
And maybe the best part is: when you make changes, it saves the changes to the browser's local storage! So even if you quit your browser and come back, it's still stored! To clear your changes, hit the Start Over button.
+, -, *, /, (), ^
) and correctly deals with operator precedence. You can input your numbers and operations in words or classic symbols, so "ten minus three" would be fine. Anything the parser doesn't understand will be grayed out and not used.
secure.hypervariety.com
, which communicates via HTTPS, the secure version of the web protocol. Although recent developments have indicated that certain blog-storetest
). You start off editing the saved data if you're logged in.
secure.hypervariety.com .
|
Facts:
form
, which will be associated with this web page, which can then send them back to you.