HTML basics in 10 minutes

HTML5 logoYou’ve heard the word “HTML” before. Didn’t you?
The only reason you don’t know it yet is because you don’t know how simple it is! No one will tell you that you can learn all theory of HTML in 10 minutes, but this time will be enough for you to create a simple web-page.
HTML (Hyper Text Markup Language) is a language for describing a web-page layout. It is the explanation to a browser how you want to display your information (text, images, etc.).

Tags.

HTML consists of tags. Each of them represent a logical element on a page – a paragraph, an image, a link, a table, etc.. Tags are used for “wrapping” contents on the page using opening and closing tags.
Opening tags looks like <tag_name>, and closing ones – </tag_name>. Notice that the only difference between them is a “slash” symbol (/).
Working with text.

<p>This is a my simple text</p> – this is the way how you tell browser how to render your text “This is a my simple text” as a real paragraph.

<p>This is a my <strong>simple</strong> text</p> – now this will look like a paragraph with word “simple” highlighted as bold because of <strong> tag. This tag helps you to define important text. As you can see you can embed one tag inside another.

Now let’s move into html document structure. This is how it looks like (don’t worry, it will be absolutely clear for you in a moment):

<html>
	<head>
		<title>Usually only browser-related information is described in head-tag</title>
	</head>
	<body>
		<p>This is a my <strong>simple</strong> text</p>  
		<img src="#">
	</body>
</html>

What tags do you see here?

<html></html> – this tag only describe the beginning and ending of a html-document.

<head></head> – this one is used for holding information mostly needed for a browser and search-engines, like page title, page description, author, text encoding and other.

<title></title> – specifies the page title that is shown it a browser’s tab.

<body></body> – finally, this is a place where you start doing magic. Inside this tag you should place all contents of your page. And you can actually see a paragraph inside it with an <img> tag that is new for you.

<img src=”…”> – is a tag that displays an image and does not need to be closed with a closing tag. In advance it has an ATTRIBUTE “src” (source), which describes an image file location.

 

Now open a notepad on your computer and copy-paste this html document there. Next, click File – Save As and specify a name for your page. Then change file extension form .txt to .html.

Open this file in your browser. Congratulations! You’ve just created a real html page.

Now we will create a simple single-page web-site with your short CV. Switch back to a notepad.

Insert inside the body-tag a header with you name. For this use tag <h1>YOUR NAME HERE</h1>

Replace the URL in image tag with the URL of your photo from facebook or other web-site. Also add another attribute to this tag: “width=’200’” which will set the size of this image to 200 pixels.

Replace all contents of <p>-tag with your date of birth or job description.

After all, before closing body tag (</body>) insert this: <a href=”website_url”>My favorite site</a> and replace “website_url” with a URL of your favorite web-site, like “http://nba.com”. This will create a hyper-link.

Save the document in notepad and refresh this page in a browser.

Now you see how simple it is to create a web-page.

Webservers

You should also know that this page is not reachable in the internet. If you want to publish such page, you should register a domain name for you site and host the page with some hosting-provider.

Now you’ve learned HTML Basics. If you want to go deeper into HTML you should also learn about CSS.

Leave a Reply

1 Comment on "HTML basics in 10 minutes"


Guest
best Web designing company in hyderabad
1 year 7 days ago

Very helpful information.Thank you so much for sharing helpful information