Posted Nov 27, By Admin
What is Vue.js? How can we use it?
Nowadays, Internet of Things has become the popular trend and it is applied to a large extent in real life. There are mo...
Posted Sep 18, By Admin
What is HTML?
Have you ever been sitting in front of a computer opening a news site, music site, movie site .. You curious wonder how to create such a site?
To make a perfect website before your eyes, programmers have used programming languages to do that. Like: HTML, CSS, JS, PHP..
To help you understand the problem better. I would recommend in each language.
So what is HTML, really?
HTML (Hypertext Markup Language) is a hyperlink markup language.
HTML is not a programming language, it is a markup language, and is used to tell your browser how to display the web pages you visit. It can be as complicated or as simple as the web designer wishes it to be. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or an image a hyperlink to somewhere else can italicize the word and can make the font bigger or smaller, and so on.
HTML includes a set of tags that define the structure of a web page.
Structure of the page
See the following code snippet.
Annotate elements.
- <!DOCTYPE html> — the doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. For now, that’s all you need to know.
- <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.
- <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
- <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks, or whatever else.
- <meta charset=”utf-8″> — this element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
- <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
Tags in Html
Each tag is a keyword wrapped in opening and closing angle brackets. Usually, consists of an open tag and a close tag.
Annotate elements.
- The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect. In this case where the start of the paragraph is
- The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends. In this case where the end of the paragraph.
- The content: This is the content of the element, which in this case is just text.
- The element: The opening tag plus the closing tag plus the content equals the element.
Excess spaces and line breaks will be ignored.
The tags that have a closed tag and an open tag, is called a dual tag.
EX:
< ! – – annotation – – >: HTML annotation
The tags have only one open card with no closing tag, called a single tag.
EX:
You can put elements inside other elements to — this is called nesting.
You do however need to make sure that your elements are properly nested.
EX:
Elements can also have attributes, which look like this:
EX:
Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name, and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be later used to target the element with style information and other things.
An attribute should always have:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name, followed by an equals sign.
- Opening and closing quote marks wrapped around the attribute value.
Other examples:
Empty elements
Some elements have no content and are called empty elements.
EX:
This contains two attributes, but there is no closing </img> tag, and no inner content. This is because an image element doesn’t wrap content to have an effect on it. Its purpose is to embed an image in the HTML page in the place it appears.
Some other tags:
Headings
Includes <h1> – <h6> tags
Used for headlines in the site
EX:
Paragraphs
<p> elements contain text; You will use them often when marking regular text content.
Ex:
Conclusion
This article briefly introduces the most basic concepts of HTML, some common tags, and how to use it. In the next section, I will introduce you to the major components that make up a website, the next popular tags and their functions. See you in the next section.
Suggested Articles
Posted Sep 20, By Admin
Introduction to JavaScript
Javascript (JS) is a dynamic computer programming language. Javascript is embedded or integrated into an HTML. Javascrip...
Posted Jun 19, By Admin
How to use Visual Composer
Visual Composer is a page builder plugin for WordPress which allows you to create stunning website content with simple d...