As you work with your new template, you will want to keep the underlying code free of any errors that could affect how the pages display in the various browsers. Your template will most likely use HTML5 as the coding language, although we do still have a few older templates that were designed using the XHTML coding language.
The HTML code is what creates the structure of your page. It's what determines the various sections, like the header area, the footer area, where the main content goes, etc. It's this HTML code that tells the browser "Hey, this is a link and that is an image!"
Without the HTML code, you would not have a page that can be viewed in a browser.
The CSS (cascading style sheet) is what determines how your HTML coding is styled. It tells the browser what size your text will be, what colors those links are, whether an image sits to the left or right, and what those Heading tags look like.
Think of it as "make up" for your page. Things may look OK without it, but you can dress things up with a touch of CSS.
The javascript affects browser behavior. It's what makes a drop-down menu work, can display a calendar that shows the current date, and what allows a slideshow or lightbox to work. It expands what your browser can do.
Think of javascript as the window dressing or that snazzy little black dress. It sure makes things look nice.
The HTML5 language looks and works the same as good, old HTML, but new "tags" have been added that make a lot of sense. When you see <header> you know this the header content of your web. When you see <footer> you know this is the footer area content. It's logical. When writing your text for the web, think about logically setting up your content.
You want to avoid using deprecated tags that only simulate the logical order like <font="7">Your Large Text</font>. If you want a large font for a small line of text, use the heading tag instead. If you are concerned about the appearance of your web pages, remember that cascading style sheets (CSS) separate presentation from structure, allowing you to style any element as you wish.
HTML5 documents must begin with tags that tell the browser how to interpret them. We begin each template page with the appropriate doctype that appears before the opening head <head> tag. The example below shows the benefit of using the HTML5 doctype:
You can set defaults for HTML rules so that tags and attributes will change to lowercase. In Expression Web, go to Tools > Page Editor Options > Code Formatting. Place a check in the boxes next to "Tag names are lowercase" and "Attribute names are lowercase".
With these defaults set, you can switch to code view on a page, right-click and select "Reformat HTML". This will reformat tags and attributes to lowercase.
The Status Bar sits in the lower right portion of the program window. This little bar offers you a wealth of information. If you have set your Page Editor Options, and if you see a small yellow triangle with an exclamation point inside, this is your visual clue that you have some coding error.
You can mouse over the warning icon and get a pop-up that will give you more details. It is very important that you fix any coding errors. The good news is that Expression Web will tell you what is wrong.
Double-click on the warning icon. Expression Web will change to Split View and the error will be highlighted. Mouse-over the highlighted code and a "hint" will appear that explains the problem. Once you fix the issue, the error message will go away and you know your coding is now error free.
