How to Learn HTML

HTML is the abbreviation for Hyper Text Markup Language, and is the code, or language that is used for the creation of websites. It can look a little daunting if you’ve never done any coding before, but all you need to try it out is an ordinary text editing application and an internet browser. You might even recognize some HTML used to change text in online forums, customized online profiles, or wikiHow articles. HTML is a useful tool for anyone who uses the internet, and learning the basics may take you less time than you thought.

Steps
HTML Cheat Sheet and Examples
HTML Cheat Sheet
Sample Simple Webpage
Sample Webpage with HTML

Learning Basic HTML
Open an HTML document. Most text editing programs, including Notepad or Microsoft Word for Windows and TextEdit for Mac, can be used to write HTML documents. Open a new document and use → in the top menu to save it as a “Web Page,” or to change the file extension to “.html” or “.htm” instead of “.doc,” “.rtf,” or any other extension.
You may see a warning that your document will be changed to “plain text” instead of “rich text,” or that special formatting and images won’t be saved properly. This is fine; HTML documents do not use those options.

There is no difference between .html and .htm files. Either will work.[1]

View your document with an internet browser. Save your blank document, then find the document icon in your computer and double click to open it. It should open as a blank web page in your browser. If it doesn’t, drag the file icon to the URL (address) bar of your browser. As you edit your HTML document in this tutorial, you can keep checking back and seeing how your web page changes.
Note that this does not actually create a website online. It will not be accessible by other people, and you do not need an internet connection to test out. This just uses a browser to “read” your HTML document as though it were a website.

Understand markup tags. Markup tags do not show up on a web page like normal text. Instead, they tell your web browser how to display the page and its content. The “start tag” contains instructions. For example, it might tell the browser to display text as bold. You also need an “end tag” to let the browser know where the instructions apply: in this example, all text between the start tag and the end tag will be bold. Write end tags inside angle brackets as well, but start with a slash after the first bracket. Write start tags in between angle brackets: start tag goes here

Write end tags in between angle brackets, but put a slash after the first bracket: end tag goes here)

Keep reading to learn how to write functional markup tags. For this step, all you need to remember is the basic format they are written in: < > and

If you are using other HTML tutorials as well, you might see them refer to the tags as “elements” and the text in between start and end tags as “element content.”

Write you first tag. Every html document starts with a tag and ends with a tag. This tells the browser that everything between these tags is in HTML. Add these tags to your document:
Write at the top of your document.

Hit or several times to give yourself some space, then write

Remember to write everything else in this tutorial in between these two tags.

Fill out the portion of your document. In between the and tags, write a start tag and a end tag. Give yourself space to write between them. Everything in between these head tags won’t actually be displayed on the page itself. Try the following and see where it shows up instead: In between the and tags, write and

In between the and tags, write How to Learn HTML – wikiHow.

Save the document and open it in a browser (or save the document, then refresh the browser page if it’s already open.) Do you see what you wrote at the top of the browser, above the address bar?

Create a section. Everything else in this beginner document will go in a body section, which actually gets displayed on the web page. After the end tag, but before the tag, write and . For the rest of this tutorial, everything your write will go in between these body tags. You should now have a document that looks like this (ignoring the bullet points):

How to Learn HTML – wikiHow

Add text in various styles. Now it’s time to write something you can actually see in your browser! Anything you write within the body tags will show up in your browser after you save the HTML document and refresh the browser page. Don’t write anything with the < or > symbols, however, since your browser will try to interpret it as an HTML instruction instead of normal text. Try writing Hello world! (or anything else you like), then add these new tags around it and see what happens each time:
/Hello world!/ will show up as “emphasized text:” Hello world!

*Hello world!* will show up as “strong text:” Hello world!

Hello world! will show up with a strikethrough: Hello world!

Hello world! will show up as superscript: Hello world!
Hello world! will show up as subscript: Hello world!
Try combinations of these: What does /*Hello world!*/ look like?

Divide your text into paragraphs. If you try to write several lines of text in your HTML document, you might notice that the line breaks don’t show up in your browser. You have to code these in yourself:
This is a separate paragraph.

This sentence is followed by a line break.
before this sentence begins.This is the first tag you’ve seen that doesn’t need an end tag! These are called “empty tags.”

Make headings to display the names of sections:
======== HEADER TEXT=========================================================

: the largest header

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s