Skip to content

Latest commit

 

History

History
68 lines (44 loc) · 6.89 KB

03.md

File metadata and controls

68 lines (44 loc) · 6.89 KB
Raw

Lesson 03: XHTML in Visual Studio

A Web Page from Just a Few Clicks

Visual Studio makes Web pages that are very similar to what I already showed you (imagine that):

  • In Visual Studio, select File > New File...
  • In the General (or Web) section, select HTML File and click Open.
  • Select File > Save HtmlPage1.html As...
  • Double-click the Static folder.
  • Enter index.html as the filename and click Save. (The file is 03.html on git.)

Your New Friends

The new page includes a few differences from 02.html. First, the html element has two attributes, lang and xmlns. An attribute specifies information about an element - in this case, information about the page. Attributes always look like name="value".[1] Attributes are not allowed in closing tags.

The lang attribute specifies that the language of the page is "en" (English). This is used, for example, by Google Search when it decides whether to offer a translation of a result.

The xmlns (XML[2] name​s​pace) attribute must have that same value in all XHTML pages; that's what specifies that they are, in fact, written in XHTML rather than in My Random Markup Language. Incidentally, w3.org is the website of the World Wide Web Consortium, or W3C, which is the organization that defines XHTML, CSS, and a bunch of other Web technologies.

The meta tag ends with /> and doesn't have a matching closing tag. The slash before its right angle bracket makes it a self-closing tag, so that it corresponds directly with an element. Obviously, self-closing tags can't contain any other tags. The space before the slash helps some older browsers to not puke on it.[3]

A meta element can specify any information about a page that the W3C didn't think to make a special element for. This one tells the browser to use the UTF-8 character set. This needs to be[4] the same character set as the server used to send the page to the client.[5]

XHTML Validation

Please let me know you're in this section.

If a file is intended as an XHTML page, but its contents don't match any XHTML standard, it contains invalid XHTML. Validation is the process of checking whether a file is valid. If a page is valid, the browser understands it according to standards mode, which is its best approximation of the standards. If a page is invalid, all bets are off for how browsers will display it. This state of the browser is called quirks mode, which also happens to be the name of a really good Web development resource. But I think Wikipedia and the namesake website explain it better than I.

  1. If you delete the > (right angle bracket, or greater-than symbol) from the end of the closing html tag (or any tag, really), your document will be invalid XHTML. Go ahead and do it. After a moment, a green squiggly line appears below that tag.
  2. Now at the bottom of the Visual Studio window, click the "Error List" tab. A panel pops up with a warning (which really should be an error) that your page is invalid.
  3. Click the thumb-tack icon at the top-right of the panel to make that stack of panels stay visible. (Other panels in that position, such as results from a search "in files," in Edit > Find and Replace, can still hide your error list, but at least that will be obvious now.)

If Visual Studio weren't validating the page for you, or we knew it to have a bug in its validation routine, we would be reliant upon the W3C for our validation: http://validator.w3.org/#validate_by_input

Testing Your Code

The green arrow at the top of the Visual Studio window, labelled "Mozilla Firefox," launches Visual Studio's builtin server and displays index.html in Firefox. (The arrow on that button lets you choose other browsers.) If you change the code and want to run it again, just refresh the page. To stop the server, press the red square to the right of the now-faded green arrow.

Design View

In Visual Studio, below the text area, just above the Error List panel if it's open, are the words "Design Split Source," and then maybe some tags. The Design and Split views try to guess how the page will look in the browser, and will let you edit it visually. That means you tell the editor how the page should look and it generates code to make it so. This might sound really convenient, but it's actually a very clumsy way to develop an interface. This applies for desktop applications too; the visual interface makes things easier by removing options, until you actually want one of those options.

Tag Selection and the "Properties" Panel

The tag path to the right of those buttons might be a better idea, but I don't know as I've never encountered its ilk before. Each tag in it has a dropdown arrow that can select either the "tag" (everything from the opening tag to the closing tag) or everything inside without the "tag" itself. You can also select the tag as a button (or just move the text cursor), and whichever element is active will have its attributes shown to the right, in the Properties panel. That lists all the attributes that can be applied to the current element, and lets you add or change them. (If you delete the text in an attribute, the attribute is removed from that element.)

</lesson>

So Visual Studio streamlines the more common tasks involved with Web development, but what about making a website? That happens in the next lesson.

References

  1. That is, in valid XHTML. This isn't always true in HTML; see here for how they relate to each other, or here for exactly how different they are.
  2. See here for very basic information on XML.
  3. Per this note, this is a difference between XHTML and HTML. Don't use self-closing tags in HTML; it uses the syntax for something unrelated. However, some HTML elements don't require closing tags, including meta.
  4. Generally it can be omitted, but you might get a mean surprise if the browser's guess were different from what the server used; some character sets use more or less memory for each character, so the word "so" could be taken as a two-byte character that would not at all be what you meant. If you're using any exotic (non-Latin or decorated Latin) characters (such as proper German), these could be rendered as different exotic characters, from a different character set.
  5. See here for details on clients and servers.