HTML Basics
HTML Tutorials
HTML introduction
HTML is an abbreviation of hyper text markup language. Berners-Lee computer scientist is the creator of this language. It is basically used to make web pages and web applications. These web pages transfer information from one part of the world to the other one.
The following screenshots have been taken from the web4college site that covers html tutorials.
You can also practice the following examples on their online code editor.
Structure of HTML pages
The structure of a web page resembles the structure of a human being structure. The structure of a web page consists of a head and body tags.
The above image represents that <html> is the root element and this document contains html. Next, it contains only two main elements. One is the <head> tag and the other one is the <body> tag.
- <head> tag contains the meta data that search engines use to index the data of a page.
- <body> tag contains the structure of a web page that can be visualized on the page
Now, a question arises what are tags?
Basically tags form the structure of a web page. A tag consists of less than sign (<), tag-name and greater than sign (>) .
For example, we use <h1> tag to write the heading of a page. There are many other tags that take part in forming the structure of a web page.
Remember that every time a tag starts, it is ended by the closing tag. And the closing tag consists of less than sign (<), forward slash (/), tag-name followed by greater than sign (>).
what is an element?
Opening and closing tags and the content between them forms an element. See the image below.
What we have learnt so far was basically structure of a web page. Now, we'll discuss other important tags of HTML that we usually use to make a web page.
Headings and Paragraphs
Headings (h1 to h6) are used to write topics and sub topics of a page. The importance and size of heading decrease from h1 to h6.
<p> tag is used to write paragraphs.
HTML links
A hyper link connects the current page to the external resources. It points the current hyper text to the destination resource. The destination resource may be a page, image or the address of an other website.
A hyper link consists of a <a> tag with href attribute that contains the address of external resource.
And the text between opening (<a>) and closing (</a>) tags is called hyper text.
HTML images
HTML also supports images and image can be added in a web page by simply using <img> tag with source of image in the 'src' attribute. See the example below.
It may produce unexpected results if the address of an image is not correctly written in the 'src' attribute (In case the image and page are not in the same folder).
HTML Tables
Tables organize the data in the data cells. It provides the best layout module to organize the data especially numeric data. The data is placed in the table cells. These table cells are the basic components of a table.
- <table> tag is used to make a table.
- <tr> stands for table row. It contains the cells on the horizontal rows.
- <td> stands for table data. These are the discrete cells that contain the data.
- <th> is the same as <td>. But it is in the heading of the table.
HTML text-formatting
There are many formatting elements that format the text. For example, <b>, <i>, <em>, <strong>, <code>, <kbd> etc.
There are various examples that have been given on the following link.
- <b> it is for keywords.
- <i> It may be used to write the title of a book, the name of a poet etc.
- <em> represents the importance of text.
- <strong> may change the meaning of a sentence. It is used in the sarcastic sense.
- <code> is used to write code.
- <kbd> represents text as if it were typed by keyboard.
HTML Lists
Lists are used to write data in the form of ordered or unordered list.
See the image of unordered list.
See the image of an ordered list.
- <ul> represents list where order of items is not necessary
- <ol>represents ordered lists where order of items is necessary.
- <li> represents list items in lists.
HTML Comments
Comments help the developers to understand the old code. It helps the other developers to understand the code. If must be used to memorize the purpose of code at specific locations. The browser does not display the comment on the page.
Its syntax is <!--comment-->.
HTML Media
We can add audio and video in a web page. We use <video> and <audio> tag to add video and audio in a web page. We write the address of video in the ''src" attribute of the <video> tag. Same is the case with the 'src' attribute of <audio> tag.
See the image to understand how to add video in a page.
In the above example, files is the name of folder and Hummingbird.mp4 is the name of video.
Now, see the image given below how to add audio in a page.
- controls attribute adds controls such as play, pause, volume control etc.
- autoplay plays the media automatically after page loading.
- width controls the horizontal dimension of the media.
- height controls vertical dimension of the media.
We may use <source> tag inside the <video> and <audio> tags.
✅ @sherazaa, I gave you an upvote on your first post! Please give me a follow and I will give you a follow in return!
Please also take a moment to read this post regarding bad behavior on Steemit.