HTML BASICS

HTML basics


Welcome everyone here. In one of our post, we have told you about Html and in this post, we are going to tell you about some of the basic HTML you should know but before that, you should know about the following topics:- 

Tags in HTML-HTML tags are like keywords that define the web browser what to display and how to display. With the help of tags, a web browser can distinguish between HTML code and simple texts. When a web browser reads an HTML document, the browser reads it from left to right and top to bottom. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

Elements in HTML-An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash. For example <p>....</p> ,

<h1>...</h1> are HTML elements. Some HTML elements don't need a closing tag i.e., they don't need to be closed, such elements are known as void elements. For example <img...>, <hr> and <br>.

HTML documents consist of a tree of elements. These elements specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

An attribute in HTML- All the HTML elements can have attributes in them. Attributes provide additional information about these elements and these Attributes are always specified in the start tag and are usually pairs like name/value: name="value"

For example- href attribute in Anchor tag. 

Syntax:<a href="your link">click here to go to that link</a>



<!DOCTYPE html>

<head>
    <title>Diary cruncher</title>
</head>

<body>
    <p>This is a simple code</p>
    <h1>This is heading 1 </h1>
    <h2>This is heading 2 </h2>
    <h3>This is heading 3 </h3>
    <h4>This is heading 4 </h4>
    <h5>This is heading 5 </h5>
    <h6>This is heading 6 </h6>
    <p>This is a <b>bold text</b></p>
    <!-- this is a comment -->
    <p>This is a <i>an italic text</i></p>
    <p>This is a <u>an underline text</u></p>
    <div>
        <p>This is a simple code</p>
        <a href="your link">This is a link</a>
        <img src="your photo">
    </div>
</body>

</html>


Using the above codes we will try to make you understand the following topics:-
  • Title tag
  • Image in html
  • Anchor tag
  • Heading tag
  • Bold,italic and underline tags
  • Paragraph tag
  • Comments in HTML

Title tag-Title tag is used for displaying the title of the web page. It's crucial to add and optimize your website's title tags, as they play an essential role in terms of organic ranking (SEO). Title tags should be placed inside the <head></head>tag.

Syntax:<head><title>Here you can enter the title of your web page</title></head>


Images in HTML-Images play an important in making our websites look good. They improve the appearance of our websites. So you can add images to your web pages using the <img> tag. <img> tag is a void element that is they don't need to be closed. Inside it, you have to use the src attribute. The src attribute is used to provide the source or you can say the location of the image (the path of the image) which you want to use.  

Syntax:<img src="source of you image">


If you want to set the height and width of the image you can do it by using the style attribute. Just set the height and width inside the style attribute according to your need. Just change the value of the height and width.                                                                                                                 

Syntax:<img src="path of the image" style="height:100px;width:100px"  

  


Anchor tag - HTML links are hyperlinks. When you place your cursor over a link it turns into a hand. Links are used to moving to different web pages. One thing to keep in mind is that a link doesn't need to be a text, a link can be an image or any other HTML element. Inside anchor tag, we use the href attribute to specify the location of the document or anything. So in the href attribute, you will enter the location of the document that you want to linked.

Syntax:<a href="your link">click here to visit the link</a> 


Heading tags - As the name suggests heading tag is used to display headings. There are six heading levels in HTML. Below I have shared different heading levels in HTML.



Bold, Italic and Underline tags - Bold tag is used to make the text bold.
An Italic tag is used to make the text italic. Underline tag is used to make the text underlined.
Syntax:<b>this is bold text</b>
<i>this is an italic text</i>
<u>this is an underline text</u>

Examples of bold,italic and
underline










Paragraph tag - Paragraph tag is used when we want to write some text in the form of a paragraph.
Syntax:<p>Write a paragraph here</p>

Comments in HTML - You can add comments in your HTML. The comments are not visible to web browsers it is just visible to in your text editor. Comments are very useful when you are working within a team when there are 2 or 3 web developers in your team. In comments, you can write the things which you forget or about some changes that you want to do later on your website.

Syntax: <!-- this is a comment -->
The text 'this is a comment is not visible in any web browser it is just visible to you on your text editor.

Are you wondering how web developers write codes or how codes look like? You can view the HTML source code by Right-click on an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. 

“Simplicity is the soul of efficiency.” – Austin Freeman

Tags

Post a Comment

Post a Comment

Previous Post Next Post