How to learn HTML

How to learn HTML
How to learn HTML
Anonim

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.

Steps

Part 1 of 2: Learn HTML Basics

Learn HTML Step 1

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.
Learn HTML Step 2

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

Learn HTML Step 3

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.
Learn HTML Step 4

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.
Learn HTML Step 5

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?
Learn HTML Step 6

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

Learn HTML Step 7

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 !

    ?

Learn HTML Step 8

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:
  • header text

    : the largest header

    header text

    (the second level of header size)

    header text

    (the third level of header size)

    header text

    (the fourth level of header size)

    header text
    (the fifth level of header size)

    header text
    (the smallest header).
Learn HTML Step 9

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

    and

for the unordered list), while the items in the list are surrounded by another pair of tags, for example

  • and
  • Use this code to create bullet lists:
    • An element
    • Another element
    • Another element
  • Or this code to create an encrypted list:
    1. Element 1
    2. Element 2
    3. Element 3
  • Or this code to create a list of definitions:
  • Coffee

    - Hot beverage

    Milk

    - Cold drink

Learn HTML Step 10

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:

    Where

  • add images:
Learn HTML Step 11

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:
  • here is the text around which you place the tag.

  • Use the tag to link to these anchors or to another web page:
  • write the text or image that will be displayed as a link.

  • 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.

Part 2 of 2: Learn More Advanced HTML Techniques

Learn HTML Step 12

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 ___="___«.

Learn HTML Step 14

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.
  • Tags are used to link JavaScript files that can modify the page by following user actions.
Learn HTML Step 15

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

Learn HTML Step 16

Step 5. Get more comprehensive guides for learning more advanced techniques

There are different sources on the Internet that can help you learn more about HTML tags, for example on W3Schools or Codecademy. You might also find books that teach HTML, but be sure to use one that has been published recently, as the HTML is regularly updated. It would even be best to learn CSS to have better control over the format and appearance of your website. Once you've got your hands on CSS, the next step typically for web designers is JavaScript.

Advice

  • 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.

Warnings

  • 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.

Popular by topic