How you can get top grades, to get a best job.

How you can get top grades, to get a best job.

Beginners: HTML Course.

Learn With Bipin December 21, 2022

1.      What is HTML?

HTML stands for HyperText Markup Language. It is a language used to create the structure and content of a web page. HTML consists of a series of elements, which are represented by tags. These tags are used to mark up the content of a web page, such as headings, paragraphs, and links.

 

2.      Getting started with HTML

To start writing HTML, you will need a text editor. There are many text editors available, such as Notepad (Windows) or TextEdit (Mac). You can also use a more advanced text editor, such as Sublime Text or Atom, which offers additional features such as syntax highlighting and autocomplete.

 

3.      Basic HTML structure:

All HTML documents have a basic structure, which consists of the following elements

 

<!DOCTYPE html>: This declaration tells the browser that the document is an HTML5 document.

<html>: This element represents the root of an HTML document. It contains all of the other elements on the page.

<head>: This element contains information about the document, such as the title and any CSS or JavaScript files that are linked to the page.

<body>: This element contains the content of the page, such as headings, paragraphs, and images.

 

Here is an example of a basic HTML structure:

 

<!DOCTYPE html>

<html>

  <head>

 <title>My Page</title>

 </head>

 <body>

 <h1>Welcome to my page!</h1>

 <p>This is where I share my thoughts and ideas.</p>

 </body>

</html>

 

1.      HTML tags

HTML tags are used to mark up the content of a web page. They are written in the form <tagname>content</tagname>. Some common HTML tags include:

<p>: This tag represents a paragraph.

<h1> to <h6>: These tags represent headings of different sizes, with <h1> being the largest and <h6> being the smallest.

<a>: This tag represents a hyperlink. It is used to create a link to another web page or a specific location on the same page.

<img>: This tag represents an image. It is used to embed an image in the page.

 

Here is an example of some HTML tags in action:

 

<h1>My Page</h1>

<p>Welcome to my page! Here you will find information about my interests and hobbies.</p>

<p>If you want to learn more about me, you can check out my <a href="about.html">about</a> page.</p>

<img src="profile.jpg" alt="A picture of me">

 

1.      HTML attributes

HTML tags can also have attributes, which provide additional information about the element. Attributes are written in the form name="value". Some common HTML attributes include:

 

href: This attribute is used with the <a> tag to specify the URL of the linked page.

src: This attribute is used with the <img> tag to specify the source of the image.

alt: This attribute is used with the <img> tag to specify alternative text for the image. This text will be displayed if the image is not available or if the user is using a screen reader.

 

Here is an example of an HTML tag with an attribute:

 

<a href="https://www.example.com">Visit example.com</a>

 

In this example, the href attribute is used to specify the URL of the linked page.

 

1.      HTML lists

HTML supports two types of lists: ordered lists and unordered lists.

 

An ordered list is a list of items that are numbered. It is created using the <ol> tag. Each list item is represented by the <li> tag.

 

An unordered list is a list of items that are not numbered. It is created using the <ul> tag. Each list item is again represented by the <li> tag.


Here is an example of an ordered list:

 

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ol>

 

And here is an example of an unordered list:

 

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>

 

2.      HTML tables:

HTML tables are used to display tabular data. A table is created using the <table> tag. Each row of the table is represented by the <tr> tag, and each cell of the table is represented by the <td> tag. The <th> tag is used to represent the table header.

 

Here is an example of an HTML table:

 

<table>

<tr>

    <th>Name</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Alice</td>

    <td>25</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>30</td>

  </tr>

</table>

 

3.      HTML forms

HTML forms allow users to interact with a web page by entering and submitting data. A form is created using the <form> tag. Each form element, such as a text input or a submit button, is represented by its own tag.

 

Here is an example of an HTML form:

 

<form>

  <label for="name">Name:</label><br>

  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label><br>

  <input type="email" id="email" name="email"><br>

  <input type="submit" value="Submit">

</form>

 

In this example, the form has two text inputs (for the name and email) and a submit button.

 

4.      HTML layout

HTML provides several tags that can be used to create the layout of a web page. Some common layout tags include:

 

    <div>: This tag represents a division or section of the page. It can be used to group elements together and apply styles to them.

 

    <span>: This tag is similar to <div>, but it is used to group inline elements together.

 

    <header>: This tag represents the header of a page or section. It can be used to contain the page title, logo, and navigation menu.

 

    <footer>: This tag represents the footer of a page or section. It can be used to contain copyright information, links, and other content that appears at the bottom of the page.

 

    <nav>: This tag represents a section of the page that contains navigation links.

 

Here is an example of how these layout tags might be used:

 

<body>

  <header>

    <h1>My Page</h1>

    <nav>

      <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

    </nav>

  </header>

  <div>

    <h2>Welcome to my page!</h2>

    <p>This is where I share my thoughts and ideas.</p>

  </div>

  <footer>

    <p>Copyright 2021</p>

  </footer>

</body>

  


TECHNICAL TERMS:

·        Element: An element is a piece of content in an HTML document. It is represented by a start tag, content, and an end tag. For example, the following is an element that represents a paragraph: <p>This is a paragraph.</p>

·        Tag: A tag is a markup element that is used to indicate the start or end of an element. It is written in the form <tagname> or </tagname>. In the example above, <p> and </p> are both tags.

·        Attribute: An attribute is a piece of information that is associated with an element. It is written in the form name="value". For example, the href attribute is used to specify the URL of a link: <a href="https://www.example.com">Visit example.com</a>

·        DOCTYPE: The DOCTYPE (Document Type Declaration) is a declaration at the beginning of an HTML document that specifies the version of HTML being used. For example, <!DOCTYPE html> specifies that the document is an HTML5 document.

·        Root element: The root element of an HTML document is the <html> element. It contains all of the other elements on the page.

·        Head element: The head element is represented by the <head> tag and contains information about the document, such as the title and any CSS or JavaScript files that are linked to the page.

·        Body element: The body element is represented by the <body> tag and contains the content of the page, such as headings, paragraphs, and images.

Post a Comment

0 Comments