Embed Size (px)
Citation preview
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 <head> 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-8859-1”
Because the <meta> tag does not have a closing tag, it is ended with />.
Change the title (between the <title> 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 <body> of the HTML page
What the page looks like so far in design view
Begin “marking up” the content with header tags: <h1>, <h2>, etc.
Design view with headers
Since the poem has four sections, we have added <div> 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 <p> used for the first two lines give the desired “return” but their default style will add some undesired vertical space.
The break tags <br /> used for lines 3 and four give the return without the vertical space.
The preformatted tag <pre> will “respect” the returns in the content, but will change the font.
See Design view next.
Design view for <p> versus <br /> versus <pre>
We will go with <pre> 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 <style> tags in the <head> section of the page. The open <style> 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. http://en.wikipedia.org/wiki/Em_(typography)
Design view of page with margin styled
Next we can style the font of the <pre> 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 http://articles.sitepoint.com/article/liquid-design
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 <pre>’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 <pre> 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.
![45 - custom brick studio - Homecustombrickstudio.weebly.com/uploads/2/5/5/8/25586728/lego_cand… · 10-5-2014 Lego Digital Designer file:///C:/Users/Maarten/Building%20Instructions%20[new%20V10].html](https://img.pdfslide.us/doc/110x75/5f4a475ee5ddee58ee09ccd4/45-custom-brick-studio-h-10-5-2014-lego-digital-designer-filecusersmaartenbuilding20instructions20new20v10html.jpg)
