html tutorial for beginners short and simple but complete : as one of the main development languages alongside CSS , HTML is crucial , must–learn language for web development , it is the base of any known website in the world. so we decided to provide this free simple and short HTML tutorial , for anyone around the world.
skills you need to learn to become a website developer
short easy css tutorial for beginners
what is 404 error and why does it happen ?
10 surprising times the joker wins or kills batman
What HTML stands for ? What HTML means ?
HTML stands for HyperText Markup Language, which means you can mark texts that have applications such as Internet texts presentations. For example, suppose you draw a line under a specific text with a marker and write a caption next to them. This is what HTML does for hypertexts.
What is HTML and what HTML is used for ?
HTML is the markup language for hypertext. using HTML, you can classify and sort the different parts of a text that you want to display on the Internet. For example, look at the text below.
Introducing the website of irabrod, Time of Establishment 2019 Founder and CEO : Alireza Sedighifard, This website is an international online magazine that provides various topics such as art, education, cooking, etc.
obviously, the above text does not have the necessary order and beauty to share in the virtual world. And in order to be ready to share in the virtual world, it must be converted to the following form
Introducing the website of irabrod
Time of Establishment 2019
Founder and CEO : Alireza Sedighifard
This website is an international online magazine that provides various topics such as art, education, cooking, etc.
To do this, we need to mark the text in some way so that it can be displayed as we want, we must specify which part of the text is the subject and which part is the paragraph, so we, mark it as the text below .
<Topic> Introducing the irbrod website <Topic>
<Top of the page> Establishment time 2019
Founder and CEO Alireza Sedighifard <top of the page>
<Paragraph> This website is an international online magazine that provides various topics such as art, education, cooking, etc. <Paragraph>
Now that we have marked this text, it will be displayed on each page with a specific segmentation that we intended.
Is HTML a programming language?
No, contrary to popular belief HTML is not a programming language. Because to use this language, it is not necessary to compile and perform certain calculations and processes.
Simple HTML tutorial for beginners – design a website using HTML
necessary applications and Softwares
To develop HTML you need a hypertext development environment, we recommend Notepad ++. Once your development is complete, you can save the files as HTML. Then, if you click on the file, you will see the result of your efforts.
Meta and head
Before doing anything, you must type <!DOCTYPE html> then place the rest of the HTML code between the two <html> and </html > tags. between the two <head> and </head > tags, we have to put the general description of the site (such as names and metas) in this section.
In simple language, meta is the general description of the site. For example :
< meta charset = ”UTF-8 ″ > Explains that the set of standard UTF-8 characters is used on this site.
< meta name = ”keywords” content = ”HTML, Tutorial, Beginners, simple” > Collection of keywords that makes this article accessable if searched on Google by certain keywords of HTML,tutorial,beginner,simple.
< meta name = ”author” content = ”Dark Zara” > Author’s name.
<! DOCTYPE html>
<html>
<head>
< meta charset = ”UTF-8 ″ >
< meta name = ”keywords” content = ”HTML, CSS, XML, JavaScript” >
< meta name = ”author” content = ”Dark Zara” >
Other explanations are included in this section
</head>
Other tags are included in this section
</html>
Now we have the prerequisites to start building our website .
General page segmentation – HTML tutorial for beginners
Imagine a white paper in front of you. Where you want to put or write your texts. In general, this page can be divided into the main segmentations below:
Top of the page (header)
Main Menu (nav)
the main part and main content(Body)
widgets and captions(Aside)
the last part that goes at the bottom of your page (Footer)
We use the following tags to specify these parts
<header>
The text at the top of the page is between these two tags
</header> / specifies the end of a tag
<nav>
List of pages,Categories,navigations,ect.
</nav>
<body>
Body text is placed between these two tags
</body>
<aside>
Texts that are placed in the sides of the page are placed here
</aside>
<footer>
The text at the bottom of the page is here
</footer>
Now we are able to determine the different parts of the page.
Partial segments divisions
The above divisions are not enough to develop a site, we need to be able to access smaller divisions in order to be able to personalize our website as much as possible.
Suppose there are four paragraphs in the body section, and we want to left-align the first two paragraphs and right-align the next two paragraphs that are supposed to be translated. To do this, we must be able to assume that the first two paragraphs are one section and the next two are another.
To do this, many tags are available as needed. The most commonly used of these are <div> and <section>.
The whole process can be seen as follows.
<body>
<div>
The first two paragraphs
</div>
<div>
The second two paragraphs
</div>
</body>
These partitions will help us in CSS very much.
Types of text
Text can be headlines, paragraphs, explanations, and so on. There are various tags to mark these.
To mark the title, we have 6 tags, which are the largest and most important to the smallest and least important, respectively.
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
And to specify a paragraph, we need to use <p>. For example, you can see the text below .
<h1>
Introducing the irbrod website
</h1>
<p>
This website is an international online magazine that provides users with various topics such as art, education, cooking, etc.
</p>
Links , images , bold and distance
In order for the user to be able to go from one HTML page to another page, you must do the following:
< a href = “link to your page” >
A text that is clicked to refer to the desired page
< / a >
In the link section, you can put the download link or another pages link, or any other desired link.
You can do the following to place the image on your page.
< img src = ”Local address where your image is stored on the server – or link of an external image” alt = ”Subject and image description” >
Of course, alt is not required.
And to make the text big or bold.
<strong>
Bold text
</strong>
To assume that you put a line between two paragraphs, even a few lines apart, the paragraphs will be pasted together, don’t forget that you have to mark everything, even the distance. You can use <br/> for a space bar.
the list
There are two types of lists, with and without order.
To specify a regular list
<ol>
<li>
The first element
</li>
<li>
The second element
</li>
</ol>
Ol stands for an ordered list and Li means list item
And list without order:
<ul>
<li>
The first element
</li>
<li>
The second element
</li>
</ul>
Ul means unordered list, which means non-sequential list.
Well, congratulations. HTML beginner tutorial in simple language is completed. You now know the basics of html development, we recommend that you learn css to keep learning website design.
0 Comments