HTML for complete beginners ( basic ) Part-2

We have completed some basic things like headings, images, links, lists, etc in the first part. Let's start the second part. Here, in this post I would like to represent some other fundamental ideas of HTML.

Let's start the tutorial. I am going to write about HTML tables, classes,ids, and many more.

HTML Table :  HTML tables allow the web developers to arrange data into rows and columns.HTML  tables can be used using <table> tag. To define a row of an HTML table you need to use <tr> tag. Now, you can create rows. But, you need to create columns also. To do so, you have to fill the row with data using a <td> tag. To create a table header, you just need to use <th> tag instead of <td> tag in the first row. An example of how to use the HTML table is given below.

 

  Here, in this example, the table does not have any borders.But, you can set borders and other styles using the style attribute.

HTML Block and Inline elements : Every HTML element can have two types of display, Block and Inline. Block-level elements start on a new line and take up the full width of the page whereas Inline elements start on the same line and take up only the required width.There are several block-level HTML elements but <div> is commonly used. It is used as a container of other elements. An inline element <span> is widely used to mark or style an inline element. In an example, the styling of a word of a sentence using block- level element and inline element is given below. You can easily understand the difference between them.

HTML iframes: HTML iframe is used to display a web page within another web page. To use, you just need to use <iframe> tag and specifies its url and height and width. The syntax of HTML iframe is given below.

<iframe src = "website.com" title = "example"  height = "100px" width = "120px"> </iframe>

HTML CLASS :  The HTML class attribute is used to style an element later in stylesheets. In style sheets to give a style to an element ,we have to identify the element in HTML code.Class does this job. You might need to access an element in Javascript and you need to use class for this job. You can use the same class for different elements.Here, is an example of how to use class in an element.

<div class = "class_example"> HTML </div>

HTML ID : HTML id gives unique identity to an element. It can be used like class is used but id of each element should be unique. Here, an example of how to use ids is given below.

<div id = "id_example"> HTML </div>

HTML FORM AND FORM ELEMENTS: You can create forms using HTML. You need to use <form> tag and input elements to create a form. There are several types of input like text,password,radio,submit, etc to use in a form. I will write another post to discuss how to create a sign in form using HTML.

HTML GRAPHICS:  You can draw graphics using HTML graphics elements. The <canvas> element is used as a container for drawing graphics and <svg> element is used to draw vector- based graphics.

 

HTML MEDIA: You can use different types of multimedia like video , audio and musics. To use videos in your website, you have to use <video> tag. An example of how to use video element is given below.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

To use the audio element you have to use <audio> tag. An example is given below.

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

 

 

 Now, you are ready to build HTML websites with your knowledge. There are some other things you can learn or learn in detail. So, I will recommend you to visit the W3schools website for more knowledge. Happy coding 😀.