Technology

Building and Testing Your Own Websites using HTML and CSS

Starting with basic HTML, XHTML, and CSS documents that I know include proper code is how I like to begin writing an essay, or any web page, for that matter. You will be able to implement this strategy after reading this guide.

I employ one of two foundational papers that adhere to web standards when creating new web pages. The first utilizes the same XHTML 1.0 Transitional Document Type Definition (DTD) as WordPress. The second is a simple HTML file using the HTML 4.01 Transitional DTD. Thanks to these definitions, the browser can learn which specification was used for the document. For instance, a browser may utilize the DTD to determine whether or not the paper was written in HTML or XHTML. When creating a webpage, the first line of code should be the DTD.

HTML and XHTML have slightly differing syntactic requirements. Using incorrect syntax for your DTD will result in a failed W3C validation. The browser you’re using may display your page as intended. However, this is because browsers are lenient with non-standard code.

Since I am familiar with its syntax, I utilize HTML 4.01 Transitional DTD for my site’s content.

To ensure that you are working with a web page that conforms to web standards, it is recommended that you first copy the fundamental structure of a decent web page and paste it into a text editor. Then, you should put the code in a text file and use the “.txt” extension. The document could be called my-HTML-template.txt, for example.

If the code passes the validator “in the green,” you know it’s good. You can also use the W3C Markup Validation Service to ensure it’s up to snuff. You may find basic HTML web templates at W3 Schools. There’s also other code there, including the HTML and XHTML DTDs.

Online web pages frequently fail W3C validation with a high number of faults. This can happen when the improper DTD is used for a page or when unsupported or obsolete code is employed. When published to the Web, your pages will always be “in the green” if you begin with a valid, basic template and fix any validation issues that crop up.

Once you have a proper basic template, you can start working on your site’s content by inserting it between the body tags and additional code in the head tags.

Within a paragraph, I typically avoid using complex carriage returns. The “word wrap” function is standard for my editors, so I can see my entire document without using the horizontal scroll bar. When the page layout is finalized, the actual line length of the published content will be established.

I use a hard carriage return after each paragraph’s final phrase, and I sometimes insert an extra one. You can use complex returns if you need more whitespace between elements, such as picture code.

Update the my-HTML-template.txt file with your new content, then save it with the “.HTML” extension. It will open in your preferred web browser. You’ll find that the articles blend into one another. To do this, web browsers read for line break tags rather than carriage returns. Using your text editor’s find and replace function, you can quickly rectify this problem by substituting break tags for all carriage returns. When you reopen the HTML file, its components will be in order, if not particularly attractive. Styling with CSS will take care of that.

Line breaks will be added automatically if you use a visual web editor like the WordPress editor or the article content box at EzineArticles to “drop” the material between the body tags.

Simply cut and paste the following CSS code into your document. Write it down as “my-template. css” and place it in the same directory as your HTML template.

body

{

a #fffef2; background

Shade: black;

standard line-height;

3% – 25% margin 3% 25%;

400px minimum width needed;

}

The link meta tag connects a style sheet to the HTML file. To use this in your saved file, rename it to my-HTML-template.txt and put the link below between the head tags. In each case, substitute the character” for the brackets.

The Template Style Sheet [link title=”Template Style Sheet” rel=”stylesheet”]. href=”my-template.css”type=”text/css”]

If you have written some text into my-HTML-template.txt and opened it in a web browser, you should see some attractive formatting take shape. The text is now in Verdana, and the page content has been moved to the center, taking up about half of the page. This is because of how CSS defines the element “body.”The “body” code controls the layout of the entire page.

Your CSS can also be checked for errors. The W3C offers a validator for CSS code. The CSS code can be validated by copying and pasting it into the text box of the validator and then clicking the “Check” button. The above code will be verified to be “in the green,” meaning it functions as expected.

Formatting for display requires first determining which content will be styled. HTML tags can surround content with names that point to the styles defined in a separate CSS file. “div” and “span” are two such tags. When a browser reads an HTML tag and discovers a name reference, it will consult the associated CSS file to determine how to display the tag’s contents. The browser’s default presentation style will be used if there are no style references in the HTML tags.

When it comes to learning CSS, W3 Schools is the best resource.

The best way to guarantee that your online pages always adhere to web standards is to create your own (X)HTML and CSS templates and run them through the W3C validators. To make your templates, you need only a text editor; no fancy web design program is required. Create the outline for your website and fill it up with text. Format the content’s presentation via CSS. You will likely be able to copy and paste the contents of your text file (inside the body tags) directly into the text box of your online editor. Adding break tags between content elements and saving the file with a “.HTML” suffix may be required to view your document in a browser as you make it. When you take the time to validate your web pages as you build them, you can be assured that they will pass with flying colors once they go live online.

Digital photography, Adobe, RC airplanes, WordPress, travel, and more are just some of the topics that Royce Tivel has written extensively on. Please see for more information on the topics covered in his EzineArticles and access to high-quality visuals.

admin