This is a simple demo of getting text to flow round a fixed width
object: an image. It doesn't require tables, just using the ALIGN property
of the object (image) itself.
(There is also a note on embedded video players at the end.)
ALIGN="LEFT"
With ALIGN="LEFT", the object starts at the first new line
after it occurs in the text here.
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word.
Terminating the scope of the flow-round
The above keeps the text flowing round the image as the screen resizes. The
only disadvantage is if the screen is wide, the para short, and the next para
too is part of the flow. This isn't what you want if the picture belongs only
to one paragraph. The solution is to end the para with
< P style="clear: both;">. Compare the next 2.
First paragraph.
Second paragraph.
word word word word word word word word word word word word word word word
First paragraph.
Second paragraph.
word word word word word word word word word word word word word word word
ALIGN="RIGHT"
With ALIGN="RIGHT", the object starts at the first new line
after it occurs in the text here.
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word.
ALIGN="MIDDLE"
With ALIGN="MIDDLE", it is for (small) pics meant to be embedded like a
char in the middle of just one line. The object starts immediately, no matter
where in the line, after it occurs (word word word word word word word ) in
the text here.
word word word word word word word word word word word word word word word
word word word. Or here.
word word word word word word word word word word word word word word word
ALIGN=""
With no ALIGN, the IMG is put in a line with text, soon after the point it is
put, but the line's text is aligned with the bottom of the IMG. right corner.
word word word word word word word word word word word word word word word
here,
word word word word word word word word word word word word word word word
<DIV ALIGN="CENTER">
With <DIV ALIGN="CENTER">, the picture is centered (left to right) on the
page/window.
The object starts immediately, no matter where
in the line, after it occurs (word word word word word word word ) in the text
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word. Or here.
word word word word word word word word word word word word word word word
To get a figure caption, use a fixed-width table to tie text to caption, with
align-left property to get flow. The table width is the IMG width plus
extra. The VALIGN in the img is necessary to get legend/caption underneath the
IMG. (Without it, you get an interesting bug with text overprinting.)
The actual table has border=1 for illustration here, but you probably wouldn't
want that in practice.
< TABLE ALIGN="LEFT" WIDTH=90>< TR>< TD>
top caption text
< IMG SRC="pics/SteveD2.jpg" ALT="Passport photo" VALIGN="TOP"
BORDER=5 width=60 height=75>
Caption text
It occurs in the text here.
top caption text
Caption text
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word.
Alternatively, to get a paragraph (as caption) tied to a picture or table,
again use a binding table. No need for ALIGN for flow (binding table does
that).
VALIGN in TD controls vertical alignment between pic and caption.
Cellpadding gets space between img and text. Table width only needed to
prevent indents (e.g. within a bulleted list) overflowing window width.
All this applies equally to getting a small table parallel with text.
End of binding table is like end of paragraph, keeping other text from
joining the flow round the table/picture.
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word.
Embedded Video demos
Today (Feb. 2015) HTML and browsers do more, which may make it
easier for authors.
Remember, IMGs (now) allow css to look at both explicit author-specs and the
size of the pic after they get it. Perhaps videos are done more like that:
fetching something about it before creating the space for them on the page.
Issues to master:
Embed video on the page, with a frame size visible before it is played
And size adjusts with window size
And size adjusts with the video? ...
In principle, a video might respond / come with a text title; and still
IMG to rep. it, ....
Popup new window of one kind or another when the link is clicked.
YouTube: < video>
The problem is: YouTube uses flash, and HTML5 doesn't do that.?
OR rather, lots of video formats only a few of which go with < video> in html.
Using HTML5 and < video>
< video> uses the first valid URL src.
<video width="320" height="240" controls onclick="play();"
style=" border: 3px solid green; display:block; margin: 0 auto;"
>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Here you can paste in an MP4 video URL, and play it.
TED mp4
No window size is given; the new windows let the video frame be resized with
the window. (But actually, it seems not a named window but a new one each time
the link is clicked for mp4; but the same one for YouTube however with its own
size and not the named one.)
Gif animations
This has 8 images in 1 GIF file.
How does it spec. play speed? that is spec. in the GIF format somehow (I
think in the delay while showing each one), but I need a tool I don't have
(free ones available).
Points
TABLEs are like IMGs in using ALIGN to get stuff to flow round them.
However, a series of IMGs will flow/wrap; but a series of TABLEs require
non-printing chars between to get wrap.
Solved
How to get something like <HR> to stop the sharing of a line between IMG
and text.
Precede the HR (if you still want it) by:
<P style="clear: both;">
which clears the align / flow rounds.
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word word word word word word word word word word word word word
word word word.
word word word word word word word word word word word word word word word
word word word. Or here.
