Learn HTML in 10 minutes – It's not rocket science!


Share it: facebookTwitter | LinkedIn

With websites you can even make a lot of money if you are good enough to sell your services or templates. So what are you waiting for to learn HTML!

What do you need to learn about HTML?

  • A text editor, or better a code editor such as atom
  • A browser like Firefox or Chrome

Awesome, isn't it? In theory, you don't need more to learn HTML and create a website! If you want to publish the website later on the internet, you need a few more tools, but that's enough for a start.

Create your project folder

First of all we create a folder which we will now call root folder. This can be anywhere on your computer, but I recommend creating a folder on the desktop so that you can easily find it later. You can name the folder as you like, but I recommend lowercase letters, no special characters, no numbers or hyphens, no punctuation marks. Here are a few examples:

Create another folder called images within your root folder. We will need this later to store the images for the website.

Create your first HTML file

Open your editor and create an empty text file. It is important that the file is created as "pure text" and not as "rich text" with formatting!

If you e.g. On the Mac using "TextEdit", you first have to "convert the document to plain text".

Save the file in your root folder with the name index.html.

Why index.html?

Well, the file extension ".html" should be self-explanatory: you are telling the computer that it is an HTML file. But why "index.html"? If you want to publish the website later on the Internet, you need a web server or web hosting. Most web servers are set by default so that the file named "index.html" is automatically displayed as soon as a folder is opened in which the file is located.

Example: www.website.org/foldername/

If the file "index.html" is now in this folder, it will be displayed automatically.

You could also call the URL like this, but the naming makes it superfluous:
Example: www.website.org/foldername/index.html

If there is another file with a different name in the same directory, this will not work. This must then be called up as follows:

Example: www.website.org/foldername/about-us.html

That's it for this topic. I want to show you from the beginning how to work properly with file names and structures. If you want to rename the file for the tutorial, you are of course welcome to do so. I will always call the file "index.html" in the following lines, because we are creating our first homepage and this is the first "index page".

You finally want to learn HTML code? Here we go!

Before you look at the code, I want to explain what tags are and how they are used. Tags are elements with predefined names that give structure to a website. The typical HTML tag consists of an opening and a closing tag, whereby the closing tag always has a slash in front of the actual name. Without the slash, the browser would interpret it as a new opening tag.

Note: It is also possible to work without closing tags, but I do not want to deal with this procedure in this article for the time being.

Example:

// Correct code
<p>Content</p>

// Wrong code
<p>Content<p>

// Also right, will be explained later
<p>Content
<p>Content 

Tag-Attributes

Most tags also have attributes. This means that additional values can be assigned to the tag, e.g. a title that appears on mouseover.

HTML framework

Here you see an HTML framework that contains the most important tags.

<html>
  <head>
  	<title>My first HTML-Page</title>
  </head>
  <body>
   Content here...
  </body>
</html>

An HTML document, as shown in the example above, should always contain the following elements:

html tag
Defines a new HTML document and wraps ALL other codes.

head tag
Defines the header of an HTML file. The content within the head tag is not displayed directly on the website, but is used for a variety of setting options or for loading CSS files, which we will not deal with in this article.

title tag
The title tag is the most important tag ever! It contains the browser title of the website and is essential for search engine optimization! It should never be missing, and should never be empty, or contain only words like "welcome" or "home". If you see a website with these titles, it will certainly not be found particularly well in search engines.

body tag
The body tag contains the entire visible content of the website. Everything you write in the body tag is displayed. If you do it right ;-)

Test the code in the browser

If you now insert this code into your previously created index.html and then open it in the browser, you should see a white page with "This is where the content comes in ...". The browser tab title should also say "My first HTML page".

Tip: You can simply drag the HTML file into the previously opened browser!

In principle, you have already created your first HTML page, yay! But we want to pimp this one more! I would also like to show you the most important HTML tags so that you can create small websites yourself after the article.

Heading, paragraphs and pictures

<html>
  <head>
  	<title>My first HTML-page</title>
  </head>
  <body>
    <h1>Headline with fun!</h1>
    <p>Here comes the content later...</p>
  </body>
</html> 

Do you see the difference We have added a heading and a picture, and packed the existing text into a p-tag! Here are the explanations:

The HTML heading tags h1 to h6

<h1>H1 - I should only appear once!</h1>
<h2>H2 - I can occur several times, preferably after H1</h2>
<h3>H3 - I can occur several times, preferably after H2</h3>
<h4>H4 - I can occur several times, preferably after H3</h4>
<h5>H5 - I can occur several times, preferably after H4</h5>
<h6>H6 - I can occur several times, preferably after H5</h6> 

The h1 tag stands for the heading of the page. In addition to the h1 tag, there are 5 other heading tags (h1, h2, h3, h4, h5, h6). By default, all browsers display the headings with different sizes. The h1 heading is the largest, and the higher the number, the smaller the heading.

Important: A page should only ever contain a single h1 heading. This is essential for search engines. It is also common practice to use the most important search terms for SEO in the h1 heading.

The p-Tag for paragraphs

The p-tag stands for "paragraph" and defines a simple paragraph. By default, the p-tag has a little space so that paragraphs are easier to read. Usually there is only text within the p-tag, but also hyperlinks (a-tags) or images (img-tags).

The img tag for pictures and graphics

The img tag inserts a graphic or photo into the website. Unlike the other tags, it does not require a closing element. Instead, the slash is inserted at the end of the day. The img tag has attributes that are absolutely necessary for the display of a graphic. I only briefly show the really important attributes at this point:

The src attribute

The src attribute defines the path to the graphic to be displayed on the website. An absolute path can be used here (https://website.org/image.jpg) or a relative path (picture.jpg). Possible file formats depending on the browser: jpg, jpeg, gif, png, apng, svg, bmp, bmp ico, png ico

Note: The image URL in the example points to "https://placehold.it/400x300". This is a website that provides placeholder images for web designers. This is very practical, but only works with an internet connection. If you want to use your own picture for the example, you have to change the path accordingly and put a picture with the same name in the corresponding directory!

Tip: I recommend creating a separate directory for graphics.

The alt attribute

The alt attribute is very important! It is used by browsers to display alternative text if the graphic cannot be loaded or is still being loaded. In addition, search engines such as Google attach great importance to the use of this tag because it provides information about the image and thus facilitates indexing in the image search. Also important: screen readers or reading software for blind people, read this text to the visitor! So you should always use the alt attribute whenever possible and also sensibly describe what can be seen in the picture.

Die width und height-Attribute

Almost self-explanatory. This is the width and height of the image. The values are given here in pixels and do not necessarily have to correspond to the original values of the image. Any values can be entered here, or none at all! But what happens if I e.g. enter no values at all?

Without width and height, the image is automatically displayed in its original size in the browser. The browser also takes longer to display the image because it has to determine the width and height itself. Websites with lots of graphics can also have unsightly build-up effects, which can be avoided by specifying the correct values.

Tip: Always use width and height for img tags if possible!

Hype, Hyper, Hyperlinks!

Hyperlinks are a very important part of the Internet. These are links to other websites, files or programs and applications. There are a variety of different links and protocols. I would like to keep this article simple, however, and only address two types of links:

Internal Hyperlinks

Internal links are links within a website. We can e.g. create a link to another HTML file from our index.html. An internal hyperlink then looks something like this:

External Hyperlinks

External links lead to other websites. This can e.g. Be Google or any other website:

A hyperlink can be a button, a single word in a text, or a graphic. The text between the a tags is displayed as a link, by default in blue and underlined.

Short interim question: How do you like learning HTML so far? ;-)

Hyperlink combined with picture

You have already learned how to create an img tag and load an image. How about a little exercise? Let's just link the picture and start a Google search by clicking on it! Here is some code for you.

Here I also gave the a-Tag the attribute "target". This allows you to define in which window the link should open. Possible values are _blank, _parent, _top, _self, where _self is the standard.

Everything linked and summarized: Here's the complete code that you can insert into your index.html. I added another paragraph that contains some text and a hyperlink. I also packed the image with the hyperlink into a paragraph. So now we have 3 paragraphs with different content one below the other.

Let text flow around an image

So that this example does not look so boring in pure HTML, we want to integrate a little "layout". HTML doesn't offer many options anymore without CSS. But I want you to really learn HTML from the pick. Because only then can you understand it if you later generate your codes automatically with high-tech tools, as all experts actually do. You should already know what happens under the hood if you want to become an expert.

Create a new file called textimage.html in the root directory and paste the following code:

As you can see, we have added 2 new attributes to the tag. These ensure that the picture is aligned to the left and displayed with a 2 pixel thick frame. This method is really old school and is hardly used anymore. But I think it's important to learn this. If you e.g. If you want to create newsletter templates with HTML later, you also have to learn many outdated terms in HTML. This is because many e-mail programs still prefer old HTML tags and attributes, or cannot do anything with the new ones. These are literally difficult with "learn HTML" ;-)

I also added a hyperlink to index.html.

Test question: What important detail did I omit in the last example?

Create a simple navigation

Learning HTML is cool, isn't it? Now that you know how to create HTML files and hyperlinks, you can theoretically build a simple website. Navigation is an important part of this. Here is a very simple example of navigation for 4 subpages and a homepage:

Note: Here I have quickly integrated a new Tag for you. The nav Tag. It tells the browser that the hyperlinks it contains are navigation. You can also omit the nav tag completely and everything will look and work the same. However, I recommend using it. The nav tag is a relatively young tag and was released with HTML5.

Paste this code directly above the h1 headline into all of your HTML documents. If you followed everything, in the index.html and the text picture.html.

That wasn't bad for a start! You now know how HTML works.

You can of course learn a lot more about HTML!

Of course, HTML can do a lot more. And actually CSS is also part of it if you really want to do layouts. But first I wanted to give you the basic knowledge.

Conclusion

You have now learned:

  •  How to HTML framework was created
  •  Which are the most important tags
  •  What tags and attributes are
  •  What headlines there are
  •  How to create hyperlinks
  •  How to include pictures
  •  How to create a navigation

Related Links

Do you want to learn more HTML? No problem!

There will be more articles on this website, because HTML is only really interesting and especially colorful when CSS, JavaScript and other technologies are included.

Stay tuned, subscribe to the blog so you don't miss the other articles!

Finger pointing at you!

WE WANT YOU!

Your are a web design expert and you like writing articles?

JOIN US


Write comment

* These fields are required

Comments

No Comments


Share it: facebookTwitter | LinkedIn
100% anonymous web host