Web Development Course Part- 2 Advance HTML - Techy Solution

Web Development Course Part- 2 Advance HTML

Web Development Course Advance HTML

web-development-course-advance-html

We have already studied the basics of HTML in our older post in this post we gonna discuss the advance HTML in our last post we have studied the following topics
  • HTML4 Vs HTML5
  • Making our first page of HTML
  • The software we need to start or create an HTML file
  • Basic HTML
  • Paragraph Tag
  • Break Tag
  • Header Tag
But in the Advance HTML, we will study the following topics
  • Ordered and Unordered List
  • Image tag
  • Link Inserting or Hyperlinking
  • Email Hyperlinking
  • Hyperlinking to a file
  • Audio And Video Inserting
  • Audio and Video Controls
  • Inserting Tables
  • Forms Which Includes: Text Fields And Text Area, Radio Buttons And CheckBox, Data input and Buttons
  • Code Commenting
  • Meta Tags
These are topics we were cover in the advance HTML before If you didn't read our older post basic of HTML first read our older post Click Here

Ordered and Unordered List in HTML

Ordered and Unordered list is used to list any word in the forms of bullets and number example is given below with code and output

Unordered List

Code

<ul>
    <li>Bike</li>
    <li>Car</li>
    <li>Train</li>
</ul>

Output


  • Bike
  • Car
  • Train

Ordered List

Code

<ol>
    <li>Bike</li>
    <li>Car</li>
    <li>Train</li>
</ol>

Output


1.Bike
2.Car
3.Train


Image Tag In HTML

In the image tag, you can insert the image in your HTML file or your web page

<img src="Dog.jpg" alt="Cute Puppy">


In this code, there are two attributes are used

  • alt = This is used to provide the alternate text for your image.
  • src = These attributes are used to provide the URL of your image.

Link Inserting Or Hyperlinking In HTML

In the Hyperlink in HTML we insert the link in our web page with the tag <a> </a>
Code

<a href="url">Link text</a> or <a href="https://www.techysolution.in/">Techysolution</a>
Output



In this code, we use <a> tag and href attribute

  • <a> tag is used for link
  • herf attribute is used for the URL of the link
  • In the hyperlinking, there is also a target attribute we use
  • _blank = Opens the link in a new tab.
  • _parent = Opens the link in the parent window.
  • _self = Opens the link in the same tab as the source document. This is the default.
  • _top = Opens the link in the full browser window.

E-Mail Hyperlinking In HTML

In this code, we use hyperlinking to link but not to open link we use to open the mail app in the HTML on the webpage.
Code
<a href="mailto:xyz@example.com">E-Mail Us</a>

Hyperlinking To A File In HTML

Hyperlinking to file in HTML is simple we use same code as we use in before but this time in the URL or on the href attribute provides the file address with the extension.

Audio And Video File Inserting In The HTML

In this code, we going to insert the audio and video file on the HTML or a webpage.

Code
<video>
<source src="dog.mp4" type="video/mp4" />
</video>

<audio>
<source src="dog.mp3" type="audio/mp3" />
</audio>

Controls For Audio And Video File In The HTML

To control the audio and the video file in the HTML we some attribute which is given below
  • autoplay = Automatically starts or play the file.
  • autobuffer =  The audio will automatically be buffering.
  • controls = This is used to control the audio or video file like play/pause, volume control etc.
  • loop = This is used to automatically start back after reaching at the end.
  • preload = This is the same as autoplay.
These are some attributes use along with the video and audio tag to control the audio and video file according to you.

Inserting Table In HTML

Table tag is for inserting the table in the HTML or on your webpage.

Code
<table>
  <tr>
    <th>Name</th>
    <th>Roll No.</th>
  </tr>
  <tr>
    <td>Pushpender</td>
    <td>19</td>
  </tr>
</table>

This is how you can make the table according to your need we can use CSS but we will study in our CSS topic soon coming.

Forms Making In HTML Include:- Text field and Text area, Radio Button and Checkbox, Data Input and Buttons.

In this, we will discuss the code related to how we can make the radio buttons and checkbox etc.

Code
Always use the <label> tag to define labels for <input type="text">, <input type="textarea">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">

Firstly we use the <label> tag and then we use the <input> tag as empty and in the type section we the attribute we want example is given in the code box check there.

Meta Tag In HTML

The meta tag is basically used for the data information and this is also important for the SEO of your website.

Code
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Web Development Course">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Pushpender Sharma">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Here we have completed the Advance HTML and in the older post we have completed the basics of HTML and in the upcoming post of web development course CSS Basic.

Read Our Older Post HTML Basics
Previous article
Next article

Leave Comments

Post a Comment

Articles Ads

Articles Ads 1

Articles Ads 2

Advertisement Ads