An HTML Programming Tutorial Guide
Hyper-Text Markup Language (HTML) is the markup language used to code web pages. Instead of using a full programming language--such as C++ or Java--HTML programmers use bits of code called "tags" to tell browsers how to treat chunks of text and other content. As of 2011, the two current HTML specifications are HTML 4.01 and XHTML 1.0. The World Wide Web Consortium (W3C) is still working on the specifications for HTML5, which is used by many web page coders. However, it's not yet an official HTML version. All modern specifications use the same basic tags.
Other People Are Reading
Instructions
-
Starting an HTML Document
-
1
Create a new, blank file in a plain text editor or code editor such as Notepad++, jEdit, BBEdit or Coda. Windows NotePad also works for HTML coding, although it likes numbered lines that make finding chunks of code more difficult in larger files. Type out the doctype declaration on the first line of the new HTML file. Modern web page coders use the HTML5 doctype of <!DOCTYPE html>, because it is short and easy to remember. Below the doctype, add your opening and closing <html> tags. The closing <html> tag is </html>.
-
2
Add opening and closing <head> tags between the <html> tags. Anything within the <head> tags is information meant for the browser, search engines, and other programs. Visitors to your site do not see this information. Type <title>Your Site's Title Here</title> to tell the browser what title to show for your website. Below that, add <style> tags to include Cascading Style Sheet (CSS) code and <script> tags to include JavaScript code. Meta tags also go inside the <head> tags, as do any <link> tags used to link extra code files to the page.
-
-
3
Add opening and closing <body> tags. Between these tags, type out any text to appear on the web page. Whereas in Word documents you highlight text and click on buttons to change its appearance, in HTML you wrap the text in tags. The <p> tag creates paragraphs, and tags like <em> and <strong> add emphasis (italic) and bold styles to text. Create bullet lists using <ul> tags, and add list items using <li> tags wrapped around each bulleted section of text. Browsers style text within these tags using some default styles. Changing these styles requires some knowledge of CSS.
-
4
Type <img src="image-file-path/image-file-name.gif" /> to add an image to your document. Replace the text in the quotation marks with the path to your image's file. Image tags are self-closing and need no closing </img> tag. Compatible image formats include .GIF, .JPG and .PNG. While .GIF files are smaller and load faster, .JPG images are less grainy, and .PNG allow for the best quality at the lowest size. All browsers but Internet Explorer 6 correctly display .PNG images with transparency.
-
5
Save the file with the extension .HTML and then open it in a browser. Without any CSS code to style the page, it will look very plain. This is what any HTML document looks like without CSS or JavaScript. Right-click on the browser window and select "View Source" to display the HTML code. You can do this on any Website, to view its HTML.
-
1
Tips & Warnings
Learn CSS if you want to style your web pages. Include CSS after the following tag, within the <head> tags: <style type="text/css">. End the CSS with a closing </style> tag. Other ways of including CSS also exist.
Do not write HTML code in Microsoft Word or any similar rich-text editor. These programs add formatting code that appears garbled and broken when viewed in a browser.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
