Content

• To step
• Part 1 of 2: Learning the basics of HTML
• Part 2 of 2: Learning advanced HTML
• Tips
• Warnings
• Necessities

HTML is the abbreviation for Hyper Text Markup Language, it is the code or language which is used for creating websites. It may look complicated if you've never programmed before, but to try it out all you need is a simple word processing program and an Internet browser. You may recognize some HTML from forums, online profiles, or wikiHow articles. HTML is a useful resource for anyone using the Internet, and learning HTML may take less time than you might expect.

To step

Part 1 of 2: Learning the basics of HTML

1. Open an HTML document. Most word processing programs, including Notepad or Word for Windows and Text Editor for Mac, can be used to create HTML documents. Open a new document and select File → Save As from the top menu to save your document as a web page, or change the file extension from ".doc", ".rtf" or anything else to ".html" or ".htm".
   • You may now see a warning stating that your document is being changed from the Rich Text Format (RTF) to the "plain text" format, and that some formatting options and images are not being saved properly. You can ignore this warning; HTML documents do not use these options.
   • .html and .htm files are the same. It both works.
2. View your document with a browser. Save your blank document, close it, and then double-click the document in the location where it was saved to open it again. Your document should now be opened by your browser as a blank web page. If that doesn't work, drag the file's icon to the address bar of your browser. Later, if you edit your HTML document following the steps in this article, you will keep going back to the browser to check what the changes in the code look like.
   • Note: your webpage is not online yet. The page is not accessible to others and you do not need a working internet connection to test it. You just use your browser to "read" the HTML document as if it were a website.
3. Understand what "tags" are. Tags are not visible on the final web page, like normal text can. The tags tell your browser how to display the page and the content on the page. The starting tag contains instructions. For example, it can tell the browser to display the text in bold. The end tag is needed to tell the browser where the instructions apply: in this example, all text between the start and end tag is bold. End tags are also placed inside parentheses, but a slash follows the first parenthesis.
   • Write starting tags in brackets: this is the starting day>
   • Write end tags in parentheses, but put a slash after the first parenthesis: /this is the closing tag>)
   • Read later in the article how to write functional tags. In this step, you just need to remember which way to write tags:> and />.
   • In other HTML courses, tags are also referred to as "elements" and the text between opening and closing tags is also referred to as "element content".
4. Write your first html> tag. Every HTML document starts with a html>tag and ends with a / html>tag. This tells the browser that everything between these tags is written in HTML. Add these tags to your document:
   • Write html> at the top of your document.
   • Hit enter or return several times to give yourself some space, then write / html>
   • Remember you everything in this article between these two tags.
5. Make the head> part of your document. Between the tags html> and / html> you write a head>start tag and a / head>-end tag. Make some space again between these tags. Anything written between these tags will not be visible on the web page itself. Try the following steps and see if you can see where the information does show up:
   • Write between the head> and / head> tags: title> and / title>
   • Between the tags title> and / title> you write: How to learn HTML (with pictures) - wikiHow.
   • Save the document and open it in a browser (or save the document and refresh the page on the browser if the page was still open). Do you see what you just wrote at the top of the page, above the address bar?
6. Create a body> section. Everything else in this beginner's document is placed in the body> section, and it is shown on the web page. After the tag / head>, but in front of the tag / html> you write body> and / body>. Everything we discuss further in this article, we place between the body tags. You should now have a document that looks like this (without the bullets):
   • html>
   • head>
   • title> learn HTML - wikiHow / title>
   • / head>
   • body>
   • / body>
   • / html>
7. Add text in different styles. Now it's time you started writing something that will actually be visible in the browser! Everything you write within the body tags will be visible in the browser after you save the changes and refresh the page within the browser. Write not something with the signs and >because your browser will interpret that as HTML instruction instead of plain text. Write for example Hello world! (English for "Hello world!", This is the global standard text as the first example in any programming course in a particular programming language) or something else, and put the following tags before and after the text and see what happens:
   • em> Hello world! / em> looks like italicized text: Hello world!
   • strong> Hello world! / strong> looks like bold text: Hello world!
   • s> Hello world! / s> looks like strikethrough text: Hello world!
   • sup> Hello world! / sup> looks like superscript:
   • sub> Hello world! / sub> looks like caption: _{Hello world!}
   • Try out combinations: How sees em> strong> Hello world! / strong> / em> get out?
8. Divide your text into paragraphs. If you put different lines of text in your document, you will see that all lines are placed one after the other. You have to program new lines and blank lines yourself:
   • p> This is a separate section./p>
   • This sentence is on the first line and this sentence on the next.
     This is the first tag we come across that doesn't need an end tag! We call such a tag one empty tag.
   • Create headers to make the names of the sections clear:
     h1> header / h1>: the largest possible header
     h2> header / h2> (the 2 level header)
     h3> header / h3> (the 3 level header)
     h4> header / h4> (the 4 level header)
     h5> header / h5> (the smallest possible header)
9. Learn how to make lists. There are several ways to create lists on a web page. Try the following methods to find out what you like best. Note that one pair of tags is placed around the entire list (such as ul> and / ul> tags for unordered lists) and that a different pair of tags is placed around each item within the list, such as li> and / li> .
   • Use the following code to create bulleted lists:
     ul> li> One item / li> li> Another item / li> li> Another item / li> / ul>
   • Or this code to create numbered lists:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • Or this code to create a so-called definition list:
     dl> dt> Coffee / dt> dd> - Hot drink / dd> dt> Milk / dt> dd> - Cold drink / dd> / dl>
10. Make your page more attractive with new lines, horizontal lines and images. Now it is time to start adding other things to your page. Try the following tags (the image must be posted online so that you can use a link to the image):
    • Insert a line: br> or hr>
    • Insert images: img src = "the_url_of_your_image">
11. Insert links to other places on the page. You can also use this code to link to other pages and websites, but since you don't have a website yet, we'll focus on "anchors", which are specific places on the page to which you can link:
    • First, create an anchor with the a> tag at the point in the page you want to link to. Give your anchor a clear name that is easy to remember:
      
      a name = "Tips"> This is the text around which you place your anchor./a>
    • Use the tag href> to link to your anchor or to another webpage:
      
      a href = "url of the webpage or name of anchor on this page"> Write the text or image shown as link here./a>
    • To link to an anchor on another page, add the # character after the url, followed by the name of your anchor. For example http://www.wikihow.com/HTML-leren#Tips will take you straight to the "Tips" section on this page.

Part 2 of 2: Learning advanced HTML

1. Learn about attributes. Attributes are placed within the tag and are used to make additional adjustments to the "element content" between start and end tag. They never stand alone. They are written in the following way: name = "value". name represents the name of the attribute (for example, "color") and value describes this particular case (e.g. "red").
   • If you have looked closely in the previous part of this article, you have already encountered attributes. The img> tag uses the attribute src, an anchor uses the attribute name and links use the attribute href. You can tell they are all sized ___='___’ to follow.
2. Experiment with HTML tables. To make a table or graph you need several tags:
   • Start with the table tags ("table" in English) around the entire table:table> / table>
   • Place tags around the content of each row: tr>
   • Place column headers in the first row: th>
   • Place cells in consecutive rows: td>
   • This is an example of how all of this comes together:
     
     table> tr> th> Column 1: Month / th> th> Column 2: Money saved / th> / tr> tr> td> January / td> td> € 100 / td> / tr> / table>
3. Learn the other tags used in the head section. You have already learned the tag head>, which you place at the beginning of each document. In addition to the title> tag, there may be other tags in the head section:
   • Meta tags are used to create metadata about a web page. This data is used by search engines to categorize web pages. To make your page visible to search engines you can place one or more meta tags (end tags are not necessary), each tag must contain exactly one name attribute and content attribute, for example: meta name = "description" content = "put here description ">; or meta name = "keywords" content = "write a list of keywords here, always separated by a comma">
   • link> tags are used to link other files to the page. Typically used to associate CSS style sheets with HTML pages, these pages are constructed with a different kind of code and are used to determine the overall style of a page.
   • script> tags are used to associate javascript files with the HTML page. Javascript allows the page to change if the user does something on the page.
4. Play with HTML from existing pages. Viewing the source code of web pages is a great way to expand your HTML knowledge. Right click on the page and select "View source", "Show page source" or similar. Find out what a particular tag you don't know does or search online for the answer.
   • You can't edit other people's websites, but you can copy the HTML code into your own document and play around with it to see what different adjustments do. Note: because many websites use CSS style sheets, you may not be able to see many colors or other styles.
5. Learn about HTML by reading more in-depth articles. There are many resources on the internet to master more HTML tags such as W3Schools or Codecademy. There are also many HTML books available, but make sure you are using a recent edition as the HTML standard changes from time to time. Once you have mastered HTML to a good level, you can turn to CSS for more control over the design and style of your web page. After that, the next step is usually javascript.

Tips

• It can be useful to search for a simple web page on the Internet and then start messing around with the code. Try to move some text, change the font, change the images, whatever you want!
• You can use a notebook to write down the code, so that you have something to fall back on if you don't remember it. You can also print this page and keep it for reference.
• XML and RSS are increasingly used on websites nowadays. The code may look inaccessible to the human eye, especially when viewed in the source code, but the functionality can be useful.
• The tags used within HTML are not case sensitive, but the default is to use lowercase letters (as we do in this article). Lowercase for the tags is highly recommended, also for compatibility with XHTML.

Warnings

• Some tags are no longer used and have been replaced by other tags that do the same, but often offer more options.
• If you want to make sure that your page complies with the HTML standard, go to the W3 website to test your code against the current standard. Many tags have become obsolete and have been replaced by tags that work better on modern browsers.

Necessities

• A word processing program, such as Notepad (Windows) or Text Editor (Mac).
• a sheet of paper or notebook (optional)
• A program specially designed for writing HTML, such as Notepad ++ for Windows or TextWrangler for Mac (optional)