How to learn HTML (with images)

HTML is short for Hyper Text Markup Language (Hypertext Markup Language) and is the code or language used to create websites. It can look a bit intimidating if you've never created code before, but all you need is any text application and a web browser. You may even recognize some of these HTML codes used to change text in online forums, in custom profiles, or in wikiHow articles. HTML is a very useful tool for anyone using the Internet and learning the basics can take a lot less than you think.

Steps

Part 1 of 2: Learn Basic HTML

Step 1. Open an HTML document

Most editing programs, including Notepad or Microsoft Word for Windows or TextEdit for Mac, can be used to write HTML documents. Open a new document and use File → Save As in the top menu to save the file as "web page", or change the extension to ".html" or ".htm" instead of ".doc", ".rtf" or some other extension.

A warning is likely to appear saying that the document will become “plain text” instead of “rich text” or some other special format and that the images will not be saved properly. Don't worry as HTML documents don't use those options.
There is no difference between ".html" and ".htm" files. Either will work.

Step 2. View your document with an Internet browser

Save your blank document, then find the document icon on your computer and double-click to open it. It should open as a blank page in your browser. If it doesn't, drag the file to the URL bar in your browser. As you edit the HTML document following this guide, you can check the browser and see how the page changes.

Keep in mind that this does not actually create an online website. This cannot be accessed by other people and you don't need an internet connection to test it. This only uses the browser to "read" the HTML document as if it were a web page

Step 3. Understand brand labels

These tags do not appear on a web page as normal text. They tell your browser how to display the page and the content. The start label contains instructions. For example, you can tell the browser to display the text in bold. You also need the 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. The only thing that changes when you type the "end" tag is the diagonal after the first triangle parenthesis.

Write the start tag in triangular parentheses:
< start tag goes here
>
Write the end tag in triangle parentheses, but write a diagonal after the first triangle parenthesis:
</ end tag goes here
> )
Read on to see how to write functional tags. For this step, the only thing you need to remember is the basic format is written in: and
If you are also using another HTML guide, they may refer to the tags as "elements" and the text between the tags "element content".

Step 4. Write your first label

Every HTML document begins with a tag and ends with a tag. This tells the browser that everything between those tags is in HTML. Add these tags to your document:

Write at the beginning of your document.
Press Enter or Return multiple times to leave a space, and then type
Remember to write everything else in this guide between these two labels.

Step 5. Fill in the heading "" portion of your document

Between the and tags, write the start tag and the end tag. Create a space to write between both labels. Everything between those tags will not appear on the page itself. Try the following and see where it appears:

Between the labels and, write and
Between the and labels, write How to learn HTML - wikiHow.
Save the document and open it in a browser (or save the document and refresh the browser page if you already had it open). What you just typed should appear at the top of the browser, above the address bar.

Step 6. Create a body section ""

Everything else in this document should go in the body section, which is what appears on the page. After the final tag, but before the final tag, type y. For the rest of this guide, everything you are going to type will be between those tags. Now you should have a document that looks like this (ignore the bullets):

How to learn HTML - wikiHow

Step 7. Add text in various styles

Now is the time to actually see something in the browser. Everything you type between the body tags will appear after saving the HTML document and refreshing the browser. Do not write anything with the symbols < or >, as the browser will interpret it as HTML instructions instead of normal text. Try to write Hello World!

(or whatever else you want) and then add these tags to see what happens:

Hello World! will appear with emphasis: Hello world!
Hello World! will appear as strong text: Hello World!
Hello World! will appear crossed out: Hello world!




^{Hello World!}

will appear as superscript: ^{Hello World!}


_{Hello World!}

will appear as a subscript: _{Hello World!}
Try these combinations: How does it look

Hello World!

?





Learn HTML Step 8

Step 8. Divide your text into paragraphs. If you are going to write several lines of text in your HTML document, you will notice that the line breaks do not appear in the browser
You have to add a code for these:










This is a separate paragraph.




This line is followed by a line break.
Before I start this sentence.

This is the first tag you see that doesn't need a final tag. These are called "empty labels."

Create headings to display section names:



header text

: the largest header



header text

(the second level heading)

header text

(the third level heading)

header text

(the fourth level heading)

header text

(the smallest header)




Learn HTML Step 9

Step 9. Learn to create lists
There are several ways to create lists on a web page. Try the following types of codes and see which one you like. Keep in mind that a couple of tags goes around the entire list (like tags








and

for the unordered list), while the individual items are surrounded by another pair of tags, such as

and


Use this code to create bulleted lists:


An element
Other item
Other item



Or this code to create numbered lists:


Element 1
Element 2
Element 3



Or this code to create a list with defined terms:



Coffee


- Hot drinks


Latte


- Cold drinks








Learn HTML Step 10

Step 10. Spruce up the page a bit with line breaks, horizontal lines and images.
Now is the time to add more than text to your page. Try the following tags or click the links for more information. You need to use an online image storage service to have a URL to link to in an image tag:








Insert a line in HTML:


or

Add images:




Learn HTML Step 11

Step 11. Link to other places on the page
You can also use this code to link to other pages and websites, but for now, since you may not have a website, we will focus on the anchors or specific places on the page where you can link:

First create an "anchor" tagged to the point on the page where you want to link the text. Give it a descriptive name to make it easier for you to remember:

This is the text that you put inside the labels.


Use the tag to link to those anchors or to link to another website:

Write the text or image that will appear as a link.


To link to an anchor on a different web page, add the # symbol after the URL, followed by the name of the anchor, For example, http://es.wikihow.com/learn-HTML#Tips creates a link to the section of Tips on this page.

Part 2 of 2: Learn More Advanced HTML



Learn HTML Step 12

Step 1. Learn about attributes
The attributes are placed inside the tag itself and make additional alterations to the "element content" between the start and end of the tag. They never stand on their own. They are written in the format name = "value", where yam is the name of the attributes (in this case "color"), and value describes the specific instance (in this case "network" (red)).








You've seen attributes before, if you've read the basic HTML section of this guide. The tags



Image

use the attribute src, anchors use the attribute yam and links the attribute href. Do you see how they all follow the format ___="___"?





Learn HTML Step 14

Step 2. Experiment with HTML tables
To create a table or diagram, you need several different labels. Play around with these tags or learn about HTML tables in more detail.

Start placing the table labels around the entire table:





The row labels around the content of each row:




The column headings in the first row:











Cells in subsequent rows:




Here's an example of how it all comes together:



Column 1: Month
Column 2: Money saved


January
$100





Step 3. Learn miscellaneous heading tags
You've already learned the label, which appears at the beginning of every document. Apart from the tag, you can include the following types of tags:

Meta tags, which are used to provide metadata (a series of information that describes and gives information about other information) about a web page. This information can be used by search engines when the robot searches the Internet to locate and list websites. To make your website more visible in search engines, use one or more start tags (you don't need to close that tag), each with an attribute name and attribute content, for example:; or
Tags are used to associate other files with the page. This is mainly used to link to CSS sheets, which are made with a different type of code to alter the HTML page by adding color, aligning the text, and more.
Tags are used to link the page to JavaScript files, which can cause the page to change as the user interacts with it.




Learn HTML Step 15

Step 4. Play with the HTML code that you find on the website
A great way to expand your knowledge is by viewing the HTML source of various eb sites. You can do this by right clicking on the page and selecting "View source", "Show page source code" or something similar, or by entering the "View" section in the main menu of your browser. Try to find out what each HTML tag you don't know does, or look it up online.
While you can't edit other people's websites, you can copy the HTML you find into a document and then play around with the code to see what the different options do. Keep in mind that without the CSS sheet that the website is linked to, you won't be able to see all the colors and formatting



Learn HTML Step 16

Step 5. Learn more advanced web design by reading more comprehensive guides
There are several sources on the Internet that you can use to learn more about HTML tags, such as W3Schools or Codecademy. You can also find books with guides on HTML; just make sure they are up to date, as there are usually several changes. Better yet, learn CSS to have more control over your website design and appearance. Once you learn CSS, the next step for web designers is to learn Javascript.

Advice

You can find a simple web page on the Internet and play around with the code. Try moving the text, changing the font, altering images or whatever else you like.
You can get a notebook and write all the codes, so if you need to remember one, you can simply open the notebook and look for it. You can also print this article to use as a reference.
XML and RSS are becoming more and more common on today's websites. Its codes can be difficult to read and understand, especially when viewed in an HTML source file, but they have their own effects.
Markup tags in HTML are not case sensitive, but it is recommended that you use all lowercase letters (as done on this page) for XHTML compatibility and standardization purposes.


Warnings

Some tags were discontinued in recent years and have been replaced by other options with the same effects or others that even add new effects, if you wish.
If you are interested in validating your web page, go to the W3 website and learn how to validate HTML. HTML standards change over time and some tags are replaced by different tags that work better in more modern browsers.