| When I write an article--or any web page, for that | | | | When you open the HTML document again, the |
| matter--I like to begin with basic HTML, XHTML, and | | | | various parts of the content will be neat and tidy but |
| CSS documents I know contain valid code. After | | | | not very pretty. CSS styling will fix this. |
| reading this tutorial, you will be able to use this | | | | If you are just "dropping" the content between the |
| approach, too. | | | | body tags into a visual editor on the web, such as a |
| There are two types of basic, standards-based | | | | WordPress editor or the article content box at |
| documents that I use to write web pages. The first | | | | EzineArticles, you don't have to worry about the line |
| has a Document Type Definition(DTD) of XHTML 1.0 | | | | breaks as they will be added to the HTML code for |
| Transitional, just like WordPress uses. The second is | | | | you. |
| a basic HTML document with a Document Type | | | | Copy and paste the CSS code below into your text |
| Definition(DTD) of HTML 4.01 Transitional. These | | | | editor. Save it as "my-template. css" in the same |
| definitions tell the browser which specification the | | | | folder in which you saved your HTML template |
| document uses. For example, the DTD would be | | | | file.body |
| used to tell a browser if the document was HTML or | | | | {background: #fffef2;color: black;line-height: |
| XHTML. The DTD is the first line of code in a web | | | | normal;margin: 3% 25% 3% 25%;min-width: 400px; |
| page. | | | | } |
| The syntax rules for HTML and XHTML are different | | | | The link meta tag associates a CSS file with the |
| in some ways. You must use the correct syntax for | | | | HTML document. Copy and paste the link tag shown |
| the DTD you use or your code will not pass at | | | | below between the head tags in the |
| W3C.This is so even though the browser you use | | | | my-html-template.txt file you saved. Replace the |
| might display your page as expected: browsers are | | | | bracket characters with "", respectively. |
| very forgiving with respect to non-standard code. | | | | [link title="Template Style Sheet" rel="stylesheet" |
| For the content on my web site, I use the HTML | | | | href="my-template.css"type="text/css"] |
| 4.01 Transitional DTD because I am comfortable with | | | | If you have added some content to your |
| its syntax. | | | | my-html-template.txt file, when you now open the |
| The best way to insure that you are starting with a | | | | file in a browser, you will begin to see some pretty |
| standards-based web page is to first copy a known | | | | nice formatting. The page content is now centered in |
| good skeletal web page and paste it into a basic text | | | | about the middle half of the page, there is a nice |
| editor. Next, save the code as a text file with the | | | | background color, and the text is Verdana. This is all |
| ".txt" extension. You could name the file, | | | | due to the specifications in the CSS code for |
| my-html-template.txt. | | | | "body."The "body" code determines the overall |
| You can also paste the code into the W3C Markup | | | | appearance of the page. |
| Validation Service to check that it is up to snuff: if | | | | You can also validate your CSS code. W3C has a |
| the code passes the validator "in the green," you | | | | CSS code validator. Just copy the CSS code and |
| know your code is good. Simple skeletal web pages, | | | | paste it in the validator's text box and click the |
| can be found at W3 Schools. Other code, such as | | | | "Check" button. You will find that the code above |
| the DTD for HTML and XHTML, can also be found | | | | passes "in the green," as it should. |
| there. | | | | In order to apply display formatting, the content to |
| It is very common to find that online web pages fail | | | | receive the formatting must be identified. Content |
| W3C validation with a massive number of errors. | | | | can be bracketed with HTML tags which contain |
| Sometimes this is because the wrong DTD is | | | | names that reference styling definitions in the CSS |
| specified for a page; at other times, the failure is due | | | | file. Examples of these tags are "div" and "span". |
| to using non-standard or deprecated code. If you | | | | When a browser encounters an HTML tag and finds |
| start with a valid, basic template and correct any | | | | a name reference, it looks in the CSS file for the |
| validation errors that show up, your pages will always | | | | styling and then applies the styling to the web page |
| be "in the green" when they are published to the | | | | display. If there is no styling referenced in the HTML |
| Web. | | | | tags the browser will use its defaults for the display. |
| Once you have a valid basic template, you can begin | | | | W3 Schools has comprehensive information and |
| to add your content between the body tags and | | | | tutorials about CSS. |
| extra code between the head tags. | | | | Building your own (X)HTML and CSS templates--and |
| Normally, I do not use hard carriage returns inside a | | | | then putting them through the W3C validators--is a |
| paragraph. The editors I use all have a "word wrap" | | | | great way to insure that your web pages will always |
| feature that enables me to see all the text I write | | | | be standards-based. You don't need an expensive |
| without having to use the horizontal scroll bar. The | | | | web-development software package to develop |
| actual line length of the published content will be | | | | your templates; you can use a basic text editor. Use |
| determined later when the page display is styled. | | | | the text editor to build the web page structure and |
| I do use a hard carriage return after the last | | | | add the content. Use CSS to style the display of the |
| sentence of a paragraph and add an extra one | | | | content. If you are publishing your content online, you |
| between paragraphs. Hard returns can also be added | | | | will probably be able to drop the content from your |
| for extra space between other elements, such as | | | | text file (between the body tags) right into the |
| image code. | | | | editors text box without any changes. If you want |
| If you have added content to the | | | | to view your document in a browser as you create |
| my-html-template.txt file, save it again with a ".html" | | | | it, you might have to add break tags between |
| file extension. You can then open it in a browser. | | | | content elements and then save the file with a |
| What you will see is that all of the content runs | | | | ".html" extension. If you validate your web pages as |
| together. That is because browsers look for line | | | | you create them, you can always be sure that when |
| break tags and not carriage returns. You can fix this | | | | they are published online, they will validate "in the |
| by doing a find and replace with your editor: just find | | | | green. |
| every carriage return and replace it with a break tag. | | | | |