A Formal Lesson in HTML, Namely Lab the Second for MMDT 1021, Demonstrating the Use of the Paragraph Tag and Alignment Attribute

Napoleon's dispositions of the French army at Austerlitz just after sunset on 1 December 1805. The basic alignment was north-south and faced east.

The right flank was thinly held.
Stretched some three miles along Goldbach Brook were the 6,000 infantrymen of Legrand's division.
In front of them was a thin screen of cavalry tasked with keeping an eye on the movements of the combined Prussian/Russian/Austrian army who were gradually shifting south in an attempt to get around the French flank.

The center was responsible for only a quarter of the battle line. 17,000 infantrymen (the divisions commanded by St. Hilaire and Vandamme) were positioned in two lines of regiments behind Bosenitz Brook from where it emptied into Goldbach Brook to the tiny village of Girschkovitz.
Behind them were 7,400 cavalry under the command of Murat.
A squadron of cavalry was deployed as a screen in front of Girschkovitz.
The center and right flank, except for Murat's cavalry, made up Soult's IV Corps, one third of Napoleon's army.

The left flank, also a mile and a half long, straddled the Olmutz road and was anchored on the heavily fortified hill of Santon hill. It consisted of two corps and the Imperial Guard, more than half of the army.
They were deployed in depth with Lannes' V Corps in front. Lannes placed
Suchet's division in front between Santon and Girschkovitz. Behind him was
Caffarelli's division (on loan from III Corps) which was spread along the banks of Bosenitz Brook, and behind him was
Oudinot's division for a total of 19,200 men.
The Imperial Guard under Bessierres (5,500) were directly behind Oudinot and in front of
Bernadotte's I Corps of 10,500 men.

Napoleon justified his asymmetrical position with a thorough understanding of the local terrain and excellent intelligence gathering. During negotiations between the French and the Allies (Prussia, Russia, and Austria) over the past several days, the latter had allowed the French delegations almost free reign to wander about the Allied camp. Napoleon had good information on the high number of new recruits in the Allied army and their relatively poor training and leadership. He also knew that the Allied army was run by committee and hampered by differences in language. Napoleon countered the Allies' numerical superiority by exploiting this information. The logical avenue of attack for the Allies would be along the Olmutz road, which would give them a chance to pin the French against the Schwarzawa River, hence Napoleon's weighting of his left flank along that road. By deliberately weakening his right flank, Napoleon sought to tempt the Allies to strike there with the intent of turning the French flank and rolling it up to the Olmutz road. Napoleon knew that the terrain on his right flank was well suited for defense and would slow any Allied attack. He also felt that the more impulsive Allied generals would see the temptation but not think through the risks. If the Allies took the bait, he would have the opportunity to inflict upon them a major defeat.

Source: Vincent J. Esposito, A Military History and Atlas of the Napoleonic Wars, 2nd edition. London: Greenhill Books, 1999.

A Graphic Layout

A table governs the layout of the text and images below.

Various types of lists, using mostly military aircraft as list items.		The Mighty Five, prominent Russian composers of the last half of the 19th century are featured in a photo list with links.
	A photo of an M-60 with hotspots that describe the parts of the tank.
An except from an article on the Battle of Marathon using various types of text.		Some of the six headers in a sonata context.

---

The Code:

M-60 Patton Tank

The M-60 tank has three basic parts, a hull, turret, and gun. Click on either of the three parts in the photo below to learn more. The tank in the photo is located in Necedah, Wisconsin, in the park on the south side of state highway 21.

---

The Code:

This post and the three preceding it are interrelated. The image has an image map (hotspots) that are links to the other three posts. In them, I used the local reference capability of the anchor tag to create references and footnotes.

M-68 105mm Gun

The M-60A1 and A3 are armed with the British-designed L7 105mm L/52 gun. Midway along the barrel is an eccentrically-mounted bore evacuator. The bore evacuator serves to reduce propellant gas leakage into the turret after firing.¹ The ammunition has a fixed cartridge case and includes, besides the standard armor piercing discarding sabot and high explosive rounds, several special-purpose rounds such as high explosive squash-head and white phosphorus.²

1. Wikipedia: Bore Evacuator

2. Wikipedia: Royal Ordnance L7

M-60 Turret

Three crew members occupy the M-60’s roomy turret, with the gunner on the right, the commander seated behind him, and the loader on the left side of the 105mm gun.¹ The small commander's cupola mounts an M-85 .50 caliber machine gun with 900 rounds of ammunition. Fire control includes an M21 ballistic computer, AN/VVG-2 laser rangefinder, AN/VSG-2 thermal sights, and Mercury-Cadmium-Telluride (HgCdTe) IR detector for passive night and dust vision.²

1. Patton-mania: M60 Patton

2. FAS Military Analysis Network: M60 Series Tank

M-60 Hull

The cast steel hull of the M-60 tank is divided into three compartments. The front compartment houses the driver, the middle is the turret well, and the rear contains the engine. The tank is powered by a V-12 air-cooled diesel engine, the Continental AVDS-1790 that develops 750 hp. The suspension consists of six aluminum road wheels and three return wheels. There is an escape hatch on the underside of the hull.¹ The engine and suspension combine to give the M-60 a cross-country speed of up to 10-12 mph and a road speed of about 30 mph with a range of some 300 miles. It can climb a 36 inch vertical step and a 60% gradient. A fording kit allows the vehicle to enter up to 90 inches of water; without it the tank can ford a 48 inchdeep stream.²

1. Wikipedia: M60 Patton

2. Army Technology: M60A3 Main Battle Tank

The Code:

Photo List

The Mighty Handful

• Mily Balakirev
• Alexander Borodin
• Caesar Cui
• Modest Mussorgsky
• Nikolai Rimsky-Korsakov

The Code:

This list combines images and links.

Three Lists But No Liszt

Lesson Seven, Chapter One in Cearley’s Book

In Which the UL, OL, an DL Tags are Used

Lists of Ordered and Unordered Nature

• Unordered List
  
• Ordered List
  
• List of Words and Their Definitions
  
• Nested List
  

An Unordered List, Yet Orderly in Appearance

Some U.S. Naval Aircraft Used in World War II

• F4F Wildcat
  
  
  
  1. F4F-3
     
  2. F4F-4
     
  
  
• SBD Dauntless
  
• TBD Devastator
  
• TBF Avenger
  
• F6F Hellcat
  
• F4U Corsair
  

An Ordered List, By the Numbers

Some Aircraft Ordered by Number of Engines, Ascending

1. F4F Wildcat
   
2. B-25 Mitchell
   
3. Ford Trimotor
   
4. He-177, which had only two propellors each of four blades and two engine nacelles, but inside each engine nacelle, which were, incidentally, mounted one one each wing, where two engines mounted end-to-end such that the drive shafts were linked. This was not a satisfactory arrangement; if memory serves, it was prone to fire do to inadequate cooling.
   
5. I know of no five-engined airplane.
   
6. B-47
   
7. Alas, I am ignorant of any seven-engine aeroplane.
   
8. B-52 Stratofortress
   

A List of Words and Their Definitions, But Without Etymology and Examples of Usage

Military Aircraft Types (Not Compacted)

Fighter

An airplane optimized for dogfighting.

Fighter Bomber

An aircraft design suitable for dogfighting but also capable of ground attack.

Torpedo Bomber

This type of airplane carries one or more torpedos for use against ships.

Dive Bomber

A type of airplane stressed to withstand steep dives in order to deliver a single bomb on a small target.

Military Aircraft Types (Compacted)

Fighter

An airplane optimized for dogfighting.

Fighter Bomber

An aircraft design suitable for dogfighting but also capable of ground attack.

Torpedo Bomber

This type of airplane carries one or more torpedos for use against ships.

Dive Bomber

A type of airplane stressed to withstand steep dives in order to deliver a single bomb on a small target.

Aircraft Types and Examples: A Nested List

• Fighters
  
  
  
  1. P-38 Lightning
     
  2. P-40 Warhawk
     
  3. P-47 Thunderbolt
     
  4. P-51 Mustang
     
  5. P-80 Shooting Star
     
  
  
• Bombers
  
  
  
  1. B-17 Flying Fortress
     
  2. B-25 Mitchell
     
  3. B-26 Maurader
     
  4. B-29 Superfortress
     
  5. B-36 Peacemaker
     
  
  
• Transports
  
  
  
  1. C-46
     
  2. C-47
     
  3. C-130
     
  4. C-5
     
  5. C-17
     
  
  

Creator...........: David Rupp
Created On........: 24 December 2009
Last Modified By..: David Rupp
Last Modified On..: 5 January 2010
 

The code:





In the first DIV tag the align=”center” element was not being recognized. In the previous post, I thought that the header tag align element was being overridden either by Blogspot or the blog template while the DIV tag’s use of align was unaffected. Now I discover a new twist. I removed the double quotes around the align value (center), and by golly the dang thing works. From what I have read so far, this does not seem to be proper HTML behavior; center as an element value must have either single or double quotes. Having just written that, I tried the single quotes, and it worked! Then I reverted back to the double quotes, and it worked!?!? Interesting behavior.

The local reference (href=”#aaa”) works quite nicely. Since each post is a separate HTML file, managing label names to avoid collisions should be easy. The ordered and unordered lists also behave nicely, even with nesting. The COMPACT element does have any effect in IE8, but then it is deprecated now and I shouldn’t be using it.

Finally, I left most of the structure in the code which produced a fair number of blank lines, but it is not unbearable.

Blocks of Text

Lesson Six, Chapter One in Cearley’s Book

In Which the DIV, BLOCKQUOTE, PRE, and ADDRESS Tags are Used

The Battle of Marathon

By David Rupp

Events Leading Up To the Battle
(An Excerpt)

Relying on the advice of Hippias, the former Athenian tyrant who accompanied the expeditionary force, the Persians sailed from Eretria and landed near Marathon in part because it was one of the most convenient debarkation points for cavalry[1]. Liddell Hart points out the brilliance of this move from a strategic point of view.

Thereby they could calculate on drawing the Athenian army towards them, thus facilitating the seizure of power in Athens by their [the Persian’s] adherents, whereas a direct attack on the city would have hampered such a rising, perhaps even have rallied its forces against them; and in any case have given them the extra difficulty of a siege.[2]

Herodotus cites the report that the Alcmaeonidae were plotting to surrender Athens to the Persians, but does not believe it. He does allow that a signal was made to the Persians indicating Athens would submit. Rawlinson is not convinced by Herodotus’ defense of the Alcmaeonidae.[3] Having drawn the Athenian army into the open, Liddell Hart postulates Datis then planned to fix the Athenians with a covering force, re-embark the remainder of the army and sail around to Phalerum and thus either walk into Athens unopposed or at least meet with only token resistance.[4]

Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9
---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
Row 1: DIV
Row 2:
Row 3:
Row 4:
Row 5:

        Col 1      Col 2      Col 3      Col 4     
        ---------- ---------- ---------- ----------
Row 1:  PRE
Row 2:
Row 3:
Row 4:
Row 5:

[1] Herodotus, The Persian Wars. Trans. by George Rawlinson, New York, 1942, VI:102, p. 474.
[2] B. H. Liddell Hart. Strategy. New York, 1967, page 27.
[3] Herodotus, VI:121-4, pp. 483-4 and note 28.
[4] Liddell Hart, p. 27-28.

The code, with the text elided:

The first two lines of this post should be centered. It appears that Blogger, or the blog template, overrides or ignores ALIGN elements unless used in the context of a DIV tag (see third, fourth, and fifth lines of this post). The red author text (line four) is probably driven by the blog template.

Headers and Paragraphs

To learn some of the fundamentals of HTML, I've started working through Kent Cearley's book HTML 4, published back in the earlier days of the Internet at the end of the last millennium. The book has been occupying the bookshelf since then, having been purchased at a time when it appeared I would be doing some web programming. That didn't happen; requirements analysis and business process re-engineering happened instead.

As this is a blog and not a purpose-built web site, I will also learn what HTML tags work in the context of Blogspot and what the idiosyncrasies are, such as the interpretation of structured (human-readable) code discovered in the previous post.

On to the first exercise, or more precisely, the fifth lesson in chapter 1. The blog template dictates how the headers (h1 - h3) display, but they do work, as does the paragraph tag.

[h1] The Sonata Form

[P] There are many variants on the structure of the sonata form. This example is just that, an example.

[h2] Exposition

[h3] First Subject

[P] The keyboard sonata of the classical era typically has the principle thematic material stated in the tonic key.

[P] The mood of the first subject is often motivic and forceful in nature.

[h3] Transition

[h3] Second Subject

[h3] Coda

[h2] Development

[h3] Dominant Key

[h3] Supertonic Key

[h3] Subdominant Minor Key

[h3] Subdominant Major Key

[h3] Supertonic Minor Key

[h3] Supertonic Major Key

[h3] Dominant Key

[h2] Recapitulation

The code, in a human-friendly form, is in the image below. I present it as an image so that it is not interpreted as code.

A Simple Table

Built using HTML table tags.
Why are there a number of blank lines between this one and the table itself?

Question	Answer
Not Found	42
Query	Response

Each line of HTML code is interpreted as a blank line. The code for the table above is written on 14 lines. The same code concatenated into one line:

Question	Answer
Not Found	42
Query	Response