Introduction to HTML for beginners | Lesson 1
HTML or HyperText Markup Language is said to be the fundamental language used in the development of web pages. Hypertext provides the organization of the content in the web and enables the brow Luca to display the text part as well as the images, and other forms of media.
In this lesson, you will be introduced to HTML, learn about the code editors, and type the first line of HTML code. When you complete this article, you will understand the fundamentals of HTML mainly, HTML document structure and comment.
What is HTML?
HTML is a common language used to format documents for presentation on the world wide web. It consists of a number of components, which surround or envelop other parts of the content to make them look or act in a particular fashion. These enclosing tags can influence the text, for example, making the text bold, in italics, converting this piece of text into a hyperlink and so on.
There needs to be a clear distinction between HTML as a markup language and not a programming language-no programming language is used in HTML.
Key Features of HTML
- Simplicity: HTML is relatively simple to master as well as implement into your projects.
- Structure: It gives coherence in the layout of web pages.
- Compatibility: HTML takes place among different browsers and platforms cause it is the language of the Web.
- Flexibility: And it links with CSS and JavaScript to build lively and graphical web sites.
Code editors: How to Pick the One That’s Right For You
A code editor is critical when it comes to typing and modifying the HTML codes. This is due to the fact that although there is apparently a lot of options which can be used to write code, the right one can greatly impact the quality of the final product. Here are some of the best code editors for HTML:
Froala Editor
Froala is the easy to use interface, lightweight, WYSIWYG (What-You-See-Is-What-You-Get, HTML) editor called Froala.
Froala has features such as build in rich text editing, inline editing, spell checker and so on. It is suitable for starters especially if they are looking for a graphical view of HTML code.
UltraEdit
UltraEdit is a great coding editor designed for HTML and any other script language for that matter. Some of the amenities included are syntax highlighting, code folding and usability of a friendly user interface. UltraEdit can be recommended to both amateur and professional users due to the availability of powerful tools that can improve efficiency.
Visual Studio Code
Visual Studio Code commonly known as VS Code is a source-code editor, which is developed by Microsoft Corporation and is available free. By its help we can write in HTML, CSS, JavaScript and etc. This code editor is one of the most wanted ones among developers with the opportunities of intelligent code completion, debugging, integrated Git control. It has a wide list of extensions that enable a corresponding configuring of the developer environment.
Wiring Your First HTML Code
Okay, let’s go deep into writing an HTML code We will begin with writing our first HTML code. This way we will discuss the HTML Document structure providing line by line discussion of the structure of an HTML document.
HTML Document Structure
An HTML document typically consists of several key elements:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph of text in HTML.</p>
</body>
</html>
Line by Line Breakdown
- <! DOCTYPE html>: It states what version of HTML this document is and what type of document it is. When the page is opened that also ensure that the particular browser displays the page as it is supposed to.
- <html>: It is the main node that has all other nodes of HTML nested inside it.
- <head>: The instance of metadata for the document which contains the title field and links to external style sheets.
- <title>My First HTML Page</title>: Effective in setting the title of the document that is displayed at the top of the browser window or on the tab.
- <body>: This is the box into which all the inherently visible content of the web page falls into.
- <h1>Welcome to HTML</h1>: An element that specifies the heading of the web page that is of the first hierarchy.
- <p>This is a paragraph of text in HTML.</p>: A paragraph element that contains a block of text.
HTML is not case sensitive
HTML also does not distinguish between the cases of all characters, this is why <HTML> and <html> and <BODY> and <body> are the same tags for the browser. Although, it is recommended to use lowercase to make our code neat and clean.
Understanding Comments in HTML
HTML comment tag is employed to insert comments which help to make the code more comprehensible. Thus comments are actually commented out in the HTML language by the browser and therefore do not influence the web page display. There are two types of comments in HTML:
1. Single-Line Comment
A single-line comment is created to comment out a single line of code and sometimes a part of the line. It is enclosed within <!-- and -->.
<!-- This is a single-line comment -->
<p>This paragraph is visible on the web page.</p>2. Multi-Line Comment
The multi-line comment is used to comment out more than one line of code in the programming language used. It is also enclosed within <!-- and -->.
<!--
This is a multi-line comment.
It can span multiple lines.
-->
<p>This paragraph is also visible on the web page.</p>Writing HTML comments – what are the guidelines?
- Clarity: Make comments simple and to that brief.
- Relevance: Do not make comments on all working on a specific code but only on some important segment of code with some explanation.
- Consistency: Try and comment your code in the same way as you do for the rest of the code.
Source Codes Downloads
For the sake of simplicity, all the example codes that are discussed in this article can be downloaded free of charge. You can download the source codes of all steps explained in this tutorial by clicking on the button below.
Key Notes Lesson 1
We have also made detailed notes and handouts for lesson 1 in order to make the presentation as complete as it is possible.
Conclusion
In this lesson I have briefly introduced you to HTML known as hypertext markup language and its significance in Web development. Here we have provided some of the world’s leading HTML codes’ editor like Froala Editor, UltraEdit, and Visual Studio Code. We also took you through writing your first HTML code or as we described understanding the structure of the code line by line. Finally, I talked about comments in HTML that provide more clarity to the code you are writing.
Having learned these basics, you are already on the road to becoming a good HTML coder and create your own Web sites. In the future lessons, we learn more complex examples of HTML tags and learn how we can style web pages using CSS. Thank you for watching this video, and please do watch out for more tutorial videos on HTML we have in store for you.
As always, let me remind you that something as simple as HTML is best mastered through practice. You should attempt to write your own HTML documents and put this knowledge to test and play with the elements and attributes. Happy coding!
