HTML is the abbreviation of Hyper Text Markup Language, it is the code or rather the language, used for the creation of Internet sites. HTML can look difficult if you've never done programming before, but all you need is a regular text editor and a web browser. You might even recognize HTML used on the Internet to edit text on forums, to personalize online profiles or wikiHow articles. HTML is a very useful tool for everyone who uses the Internet, and you will take much less time than you thought to learn the basics.
Part 1 of 2: Learn HTML Basics
Step 1. Open an HTML document
You can use most text editors, be it Notepad or Word for Microsoft or TextEdit for Mac, to write HTML documents. If you have Linux, download wine and download the notepad for windows. Open a new document and click File → Save As in the top menu to save the document as a web page or to change the”.doc extension, "".Rtf, "etc. in ".html" or ".htm"
- You may see a window appear warning you that the document will be turned into plain text instead of rich text, or that the images or formatting will not be saved correctly. That's okay, HTML documents don't need this option.
- There are no differences between.html files and.htm files, all work the same.
Step 2. View your document with an Internet browser
Save your blank document, then find the icon on the desktop and double click it to open it. It should open as a blank page in your internet browser. If not, drag the icon to the browser's address bar. As you edit the file in this tutorial, you can check it out and see how the page turns.
Note that these changes do not allow you to create an online site. The page will not be accessible to other people and you do not need an internet connection to view the changes. You will be using your browser simply to read the HTML document as if it were a website
Step 3. Understand how the beacon system works
The tags will not appear on the page like normal text. Instead, they tell the browser how to display the page and its content. The opening tag contains the instructions. For example, it could tell the browser to put the text in fat. You also need a closing tag so that the browser knows in which field these changes apply. In our example, all the text between the two tags will be in bold. Also use chevrons for the closing tags, but put a slash after the first chevron.
- Write the opening tags between two chevrons:
<the opening tag is here
- Write the closing tags between chevrons, but put a slash after the first chevron:
</the closing tag can be found here
- Read on to understand how tags work. In this step, you just need to remember the basic format of the tags, written between and
- If you follow other tutorials for learning HTML, they might talk about tags in terms of elements and text between tags in terms of element content.
Step 4. Write your first tag
All HTML documents start with a tag and end with a tag. This tells the browser that everything in between these two tags is HTML code. Add these tags to your document.
- Write at the top of the document.
- Press Enter or Tab key several times to give yourself enough space and write.
- Remember to write the rest of this tutorial between these two tags.
Step 5. Complete the portion of the document
Between the tag and the tag, write an opening tag and a closing tag. Give yourself enough space between these two tags. Anything you write there will not be displayed on the page. Try the following example and see where this information appears:
- Between the tags and, write and.
- Between the tags and, write how to learn HTML with wikiHow.
- Save the document and open it in your browser (or save the document and refresh the browser if it is already open). Do you now see what you just wrote in the tab at the top of your browser, above the address bar?
Step 6. Create a section
All the rest of the content for this beginner's tutorial can be found in the body section (i.e. the body of the page). After the tag, but before the tag, write and. For the rest of this tutorial, everything you write will be between the and tags. You should now have a document that looks like the following (without the bullets):
How to learn HTML with wikiHow
Step 7. Add text giving it different styles
Now it's time to write something that you can see on your page! Anything you write in the page body tags should be in the browser after you save the HTML document and refresh the page. However, do not write anything that contains the symbols < Where >, because your browser will interpret it as HTML code instead of normal text. Try to write Bonjour Monde !
(or whatever you want), then circle the text with these new tags and watch what happens each time:
Bonjour Monde !will appear "in italics:" Hello world!
Bonjour Monde !
will appear "in bold:" Bonjour Monde !
Bonjour Monde !will appear crossed out: Hello world!
Bonjour Monde !will appear as an exponent: Bonjour Monde !
Bonjour Monde !will appear subscribed: Bonjour Monde !
- Try the following combinations: how appears
Bonjour Monde !
Step 8. Divide the text into paragraphs
If you try to write multiple lines of text in your HTML document, you might notice that line breaks do not appear on the browser page. You must indicate this to the browser yourself:
This is a separate paragraph.
This sentence is followed by a line break
before this sentence begins.
This is the first tag you come across that doesn't need a closing tag, they are called unique tags.
- Write headers to display the name of the sections:
: the largest header
(the second level of header size)
(the third level of header size)
(the fourth level of header size)
(the fifth level of header size)
(the smallest header).
Step 9. Learn how to make lists
There are different ways to write lists on your web page. Try one of the following types of code and find the one you prefer. Note that a pair of tags surround the whole list (for example the tags
for the unordered list), while the items in the list are surrounded by another pair of tags, for example
- Use this code to create bullet lists:
- An element
- Another element
- Another element
- Or this code to create an encrypted list:
- Element 1
- Element 2
- Element 3
- Or this code to create a list of definitions:
- - Hot beverage
- - Cold drink
Step 10. Energize Your Page With Line Breaks, from horizontal lines and images.
Now it's time to add something other than text to your page. Try the following tags or click on the links for more information. You will need an online photo hosting service to get the address of the image and put it in the corresponding tag:
- insert a line:
- add images:
Step 11. Create links to other locations on your page
You can also use this code to link to other pages or websites, but for now, since you don't have a website, you'll focus on anchors, i.e. say specific locations on your page that you want to refer the user to.
- Start by creating an anchor with the tag at the location on the page that you want to refer the user to. Give it a name that describes it well and that you can easily remember:
- Use the tag to link to these anchors or to another web page:
- To refer to an anchor that is on a different page, add a # after its address, then write the anchor name. For example, https://fr.wikihow.com/apprendre-le-HTML#Conseils refers to the tips section of this page.
here is the text around which you place the tag.
write the text or image that will be displayed as a link.
Part 2 of 2: Learn More Advanced HTML Techniques
Step 1. Learn more about attributes
The attributes are placed inside the tag itself, which causes small changes to the content of the tag. The attributes are never found alone. They are always found in the following format: name = "value", where the name represents the name of the attribute (for example color) and the value describes that attribute (for example red).
- In fact, you've come across attributes before, if you've followed the previous section. Tags
use the attribute src, anchors the attribute name and the links attribute href. You see how each of these attributes follow the format ___="___«.
Step 2. Practice HTML Tables
You will need different tags to create tables. Play around with these tags or learn more about HTML tables.
- Start by putting the table tags all around the table you want to create:
- Row tags wrap around the content of each row:
- We find the column headers in the first row:
- Then the table cells in the following rows:
- Here's an example of what all these tags look like when combined:
Column 1: Month Column 2: Savings January 100 euros
Step 3. Learn different tags to put in the header of the document
You have already seen the tag found at the start of each document. In addition to the tag, you can also put the following tags:
- Use metatags that are used to provide metadata about the page. This data can be used by search engines when their robots scan the internet to locate and list websites. To make your website more visible to search engines, use one or more tags (these are unique tags), each of them with a single attribute name and a single value, for example: or so
- Tags are used to associate files with the page. They are mainly used to link CSS style sheets to change the appearance of the HTML page by adding color, aligning text and many other things.
Step 4. Manipulate the HTML code you find
One of the best ways to expand your knowledge in this area is to look at the source code of web pages. You can do this by right-clicking on the page and selecting View Source, View Source Code or any similar option or by clicking on the View option in the menu at the top of your browser. Try to find the tags you don't know and search the internet to find out more.
Although you can't edit a third-party website, you can copy the HTML code you find in the document and edit it to check what the different options are. Be aware that without the CSS stylesheet, you might not have the same colors or formatting
Step 5. Get more comprehensive guides for learning more advanced techniques
- You should try to find a simple page on the Internet whose code you can manipulate. Try moving text, changing font, changing images, whatever you want!
- You could get a notebook and write all the HTML code in it, so you can look it up at any time. You could also print this page for future reference.
- XML and RSS are becoming more and more popular on today's sites. Their codes may seem difficult for a human to read and understand, especially if you see them in an HTML document, but they produce their own effects on the site.
- The tags themselves in HTML code are not case sensitive, but it is highly recommended that you use lower case letters for the sake of standardization and compatibility with XHTML.
- Some beacons have become obsolete in recent years and have been replaced by other methods that produce the same effects or add other effects to them.
- If you want to validate your pages, go to the W3 site and learn about HTML standards that have changed over time, as some tags are replaced by others that work better on modern browsers.