The very basics of HTML-- For absolute beginners

By:, On:

This article will be concise since much has already been written about HTML.

HTML or HyperText Markup Language is the standard markup language for creating websites. Writing HTML code is like writing a document in Microsoft word. Instead of a word document, the HTML file becomes a website.

Don't worry, the code is simple.

Step 1: Download Sublime Text

Sublime text is a great text editor where you can write and modify your code. So, let's begin by downloading Sublime Text. If you don’t want to download sublime text, you can always use Notepad in your computer. To launch notepad in Windows, just type Notepad in the search box and Select Notepad.

Step 2: Create an HTML File

Open your sublime text and type:


<h1>Hello World</h1>

Click the File menu at the top of your text editor, select Save As and the Save As dialogue box will appear. In the File Name box, type “index.html” and in Save as Type select “All Files." Save the file on your desktop.

 

Now, go to your desktop, double click on your index.html file and it will launch in your internet browser. What do you see?
To open your file with your text editor, right click and select “open with” and then click on your text editor.

Step 3: Add Basic Code

To write HTML, we need to use something called tags. Most tags come in pairs with an opening symbol < > and closing symbol </>. For instance:

  • <h1> - level 1 heading - the highest priority heading
  • <p> - paragraph

The tags will tell the browser when to perform specific information and when to stop. Let’s try out the <p> tag. Type on your editor:


<h1>Hello World</h1>

<p>This will be one paragraph. Just like the one you would see in a book or a magazine. It will be treated by the browser as one chunk of information</p>.

Save it (you can use the shortcut Ctrl+s in Windows or Command + s in Mac). Now, reload your browser (or press F5). Make sure to always save the file, if not, you won’t see the changes in your browser.

Some tags don't need to be "closed." For example <br /> is "self-closing" and we don't have to write </br>. This tag's work is to create a line break. Let's try it out:


<h1>Hello<br/>World</h1>

Other tags require additional information to be included in the opening tag, for example the <img> tag. Include this line in your index.html file.


<img src="http://www.peoplecancode.com/images/peoplecancode.png">

Save the file and reload your browser. Pretty cool, right?

As you can see, we can include images in our website even if they are not saved on our computer. We simply have to specify where the file is online, and our browser will do the rest.

Step 4: Write Link and Nest Tags

Tags sometimes have attributes. Attributes provide additional information about HTML elements. One example of adding attributes, it’s a tag that creates a hyperlink. In your editor, type:


<a href="http://www.peoplecancode.com" target="_blank">PeopleCanCode</a>

Here, href attribute is required. This attribute creates a link to a web address. Make sure to always include "http://" when you're building links from other websites.

In the <a> tag, we can also use an attribute called “target.” We can specify if we want to open the new link in the same browser tab or in a new browser tab. If we want to open the link in a new browser we just need to add "_blank." There are other options that you can use with the target attribute. You can see them here. We can add more than one attribute in a tag; we don't need any special way of adding the attributes, we just separate them with spaces. Save the code, reload your browser, and try out the new link you just added.

Another fundamental thing about HTML is that we can "nest" tags. In other words, we can put one tag inside of the other. For example:


<p> Learning to code is <strong>easy</strong> </p>

The strong tag will make the font bold.

Step 5: Add Styles

HTML gives us a lot of flexibility when structuring our files. But it really starts to shine when we introduce some "style." Style can be added to pretty much all HTML tags, so we can modify the way it's displayed in a browser. Let's try changing the font color:


<p style="color: red;"> Learning to code is <strong>easy</strong> </p>

When a style is added to the opening <p> tag, we changed the text color through to the closing </p> tag. What if we want to add more styles?


<p style="color: red; font-size: 20px"> Learning to code is <strong>easy</strong> </p>

Multiple style instructions can be separated by a semicolon (;). Styles are not sensitive to white space so technically we can write them all down without any spaces.

These are the very basics of HTML syntax. It was simple, wasn't it?

If you login you will be able to mark this tutorial as finished to track your progress



Comments

  • On: kdy wrote:

    What's this ( ) tag for? Some explanations will help me to understand it. Otherwise this tutorial is very straightforward.
  • On: sameer wrote:

    please let me know clearly wants to help to you .

  • On: Lukasz Muzyka wrote:

    Thanks for the question. Best is to just try it out. This text will be bold. Back in the old days we would use but new way is to use

  • On: JL wrote:

    hi, I tried the "image" code as above but the image didn't show on the browser. The code was showing as "text" (instead of the image) on the browser - just wondering if you could help? thanks!

  • On: sameer wrote:

    please try it

  • On: sameer wrote:

    Hey , any suggestion or help please ping me my email:sameersoft6@gmail.com

  • On: enishia wrote:

    how do i open my browser to see the results ?i have a mac

  • On: Jostin Parodi wrote:

    I dont see anything in all the routes :S http://pokit.org/get/?475c9d68c80d9f031f7f966ac0ef280e.jpg

Comment

You can login to comment