Using Visual Studio as an HTML Editor

Go to File/New/File

Choose HTML Page and click Open

Result so far in Source view.

Start typing a tag in the section, type meta or choose it from the drop-down list.

Type http-equiv or choose it from the drop-down list http-equiv is an attribute of the meta tag.

Set the http-equiv attribute to “Content-type”, and then type content or choose it from the drop-down list

Set the value of the content attribute to “text/html; charset=iso ” Because the tag does not have a closing tag, it is ended with />.

Change the title (between the tags) and type another meta tag as seen below.

Go to File/Save HTMLPage1.htm As … Choose a location and file name.

Enter the page content into the of the HTML page

What the page looks like so far in design view

Begin “marking up” the content with header tags:,, etc.

Design view with headers

Since the poem has four sections, we have added tags to mark the beginning and end of these sections.

Shown below are three ways to get each line of the poem on its own line on the page The paragraph tags used for the first two lines give the desired “return” but their default style will add some undesired vertical space. The break tags used for lines 3 and four give the return without the vertical space. The preformatted tag will “respect” the returns in the content, but will change the font. See Design view next.

Design view for versus versus We will go with since it involves the least amount of typing.

We can begin styling the page by giving the body a left and top margin We can place the style in between tags in the section of the page. The open tag should have the attribute type with a value of text/css. We specify what tag we are styling (here body), then which attribute we are styling (here margin-left and margin-top) followed by a colon, then the value, then a semi-colon. The value here is a percentage; it could also have a unit such as px (pixels) or em.

Design view of page with margin styled

Next we can style the font of the tag. When setting the font-family attribute, it is typical to have a set of fonts listed in order of preference with the last one being a generic font. The font size here is given in the typography unit of em. This choice will allow the user/viewer of the webpage to change the size of the font on the page and is part of what is called “liquid design.”

The w3 page on font-family

Excerpt from What Is Liquid Design by Nick Wilson What is Liquid Design? The term "liquid" implies that a Website should flow smoothly into whatever space it is given. If you use a high resolution monitor, this may mean that you need to resize your browser a little, which most people in that situation do. If you have a low resolution moitor, you will still see the information, it will just be a little more compact. If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user. But it's not just about making a page 'flow' with the browser window. The principle of Liquid Design goes hand in hand with the principles of accessibility. Not everyone has perfect vision, and many of your potential customers may indeed be blind. If you build your site using relative font units and percentage based widths for common elements, you'll already be making life a lot easier for a portion of your visitors. Maybe even many of them.

Design view with the ’s font styled.

User changing the font size in Internet Explorer: View/Text Size/…

Figure from article discussing serif versus sans serif fonts.

Fonts: Serif and Sans Serif The text in was styled to be a Sans serif font. The header text has not yet been styled and has the default font style which in the image on the previous was a serif font. While it is usually considered poor style to have many different fonts on a page, it is somewhat standard to have headers styled differently than the rest of the text – one in a Serif font and the other in a Sans Serif font. – To follow this practice we should specify a header font and not rely on the default font.

Styling the header font Note that we can style several tags at once by making them a comma separated list in the style section. Also note that font names with spaces in them should be placed inside single quotes.