Jump to content

HTML Tutorial ( HTML آموزش )


Adrian
 Share

Recommended Posts

  • Author

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML tutorial is developed for beginners and professionals. In our tutorial, every topic is given step-by-step so that you can learn it in a very easy way. If you are new in learning HTML, then you can learn HTML from basic to a professional level and after learning HTML with CSS and JavaScript you will be able to create your own interactive and dynamic website. But Now We will focus on HTML only in this tutorial.

The major points of HTML are given below:

  • HTML stands for HyperText Markup Language.
  • HTML is used to create web pages and web applications.
  • HTML is widely used language on the web.
  • We can create a static website by HTML only.
  • Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic with explanation. You can also edit and run these examples, with our online HTML editor. Learning HTML is fun, and it's very easy to learn.

 

Link to comment
Share on other sites

  • Author
<!DOCTYPE>

<html>

<head>

<title>Web page title</title>

</head>

<body>

<h1>Write Your First Heading</h1>

<p>Write Your First Paragraph.</p>

</body>

</html>

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic with explanation. You can also edit and run these examples, with our online HTML editor. Learning HTML is fun, and it's very easy to learn.

 

Link to comment
Share on other sites

  • Author

What is HTML

HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

 
  1. <!DOCTYPE>  
  2. <html>  
  3. <head>  
  4. <title>Web page title</title>  
  5. </head>  
  6. <body>  
  7. <h1>Write Your First Heading</h1>  
  8. <p>Write Your First Paragraph.</p>  
  9. </body>  
  10. </html>  

  

Link to comment
Share on other sites

  • Author

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along with the text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.

HTML text Editors

  • An HTML file is a text file, so to create an HTML file we can use any text editors.
  • Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor.
  • There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
  • After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc.
  • In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.

Step 1: Open Notepad (Windows)

text Editors

Step 2: Write code in HTML

text Editors

Step 3: Save the HTML file with .htm or .html extension.

text Editors

Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the file and then either double-click on file or click on open with option

text Editors
text Editors


B. HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

When you will learn the basics of HTML, then you can use some professional text editors, which will help you to write an efficient and fast code. So to use Sublime Text editors, first it needs to download and install from internet. You can easily download it from this https://www.sublimetext.com/download link and can install in your PC. When installation of Sublime text editor done then you can follow the simple steps to use it:

Step 1: Open Sublime Text editor(Windows 8):

To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To open a new page press CTRL+N.

text Editors

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a file use extension .htm or .html. We recommend to save the file first then write the code because after saving the page sublime text editor will give you suggestions to write code.

text Editors

Step 3: Write the code in Sublime Text editor

text Editors

Step 4: Open the HTML page in your Browser

To execute or open this page in Web browser just right click by mouse on sublime text page and click on Open in Browser.

text Editors
text Editors

Link to comment
Share on other sites

  • Adrian changed the title to HTML Tutorial ( HTML آموزش )
  • Author

Building blocks of HTML

An HTML document consist of its basic building blocks which are:

  • Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.
  • Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax

 
  1. <tag name  attribute_name" attr_value"> content </ tag name>   
  • Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements.

HTML Building blocks

Example:

 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>The basic building blocks of HTML</title>  
  5.  </head>  
  6.   <body>  
  7.        <h2>The building blocks</h2>  
  8.        <p>This is a paragraph tag</p>  
  9.        <p style="color: red">The style is attribute of paragraph tag</p>  
  10.        <span>The element contains tag, attribute and content</span>  
  11.   </body>  
  12. </html>     

Output:

The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share

×
×
  • Create New...