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.
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 Markup language rather than a programming language.
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 that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn to 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 URL. A web page can be static or dynamic type. With the help of HTML only, we can create static web pages.
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 (Window) or Text Edit (Mac).
After learning the basic, you can easily use other professional text editors which are, Notepad++, Sublime Text, VS Code,
Notes: 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.
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, amd it is applied about the element and it is applied within the start tag. An HTML attribute contains two fields: name & value.
Elements An HTML element is an individual component of an HTML file. I an HTML file, everything written within tags are termed as HTML elements.
The title attribute in HTML Description: The attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text.
The href attribute in HTML Description: The href attribute is the main attribute of < a> anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.
The src Attribute The src attribute is one of the important and required attribute of < img> element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display image.
An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. AM element in HTML usually consist of a start tag < tagname>, close tag < /tagname> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them.
List of HTML Formatting text
Inline elements:
A HTML heading or Html h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags < h1> . . . < /h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading.
There are six different HTML headings which defined with the < h1> to < h6>, from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important.
Description: A simple form with four inputs and one textarea. Custom close button is made with CSS pseudo-elements.
Notes: The challenge of this task was to make a form container to shrink, when a user stretches the textarea field. The solution was not to set height for the form tab.
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML < p> tag indicates starting of new paragraph.
Notes: If we are using various < p> tags in one HTML file then the browser automatically adds a single blank line between the two paragraph
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.
An HTML < br> tag is used for line break and it can be used with paragraph elements.
An HTML < hr> tag is used to apply a horizontal line between two statements or two paragraphs.
You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed
The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL.
The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL.
The syntax of HTML anchor tag is given below.
< a href=" . . . . . . . . . "> Link
If we want to open that link to another page then we can use target attribute of < a> tag. With the help of this link will be open in next page.
Description:
A list of photos opens on arrow button click. A nice background is made with css gradient generator.
Notes:
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. A transition wrapper component allows you to add entering/leaving transitions for any element or component.