HTML is a markup language used to create web pages. I am writing this article for those who want to learn HTML. Learning HTML is easy.
Requirement
We need at least two software, which is easily available on system.
- Notepad (or any other editor)
- Web Browser (Chrome, Firefox, Edge)
Understanding HTML Code
HTML code is divided into two parts
- head
- body
Sample File
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
First Line in HTML file
<!DOCTYPE html>
This is the first line in any HTML file, which tells that this is HTML 5 file.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag.
<html> </html>
document begin with html and end with /html.
<head> </head>
document header details comes in head element
<body> </body>
All the visible document come here
Understanding HTML Elements
heading elements
There are 6 heading elements h1 to h6
<h1>This is me 1</h1> <h2>This is me 2</h2> <h3>This is me 3</h3> <h4>This is me 4</h4> <h5>This is me 5</h5> <h6>This is me 6</h6>
<p> paragraph element
To write a particular paragraph <p> element is used.
<p>This is paragraph</p>
<br> breakline element
This element is used to take a break a line.
<img> image element
img element insert an emage
<hr> horizontal element
hr horizontal element insert a horizontal line
What is HTML Attributes?
HTML Attributes provide additional information about elements. e.g.
<p style='color:red'>This is red paragraph</p>
here style is an attribute of paragraph, which show the paragraph in red color.
<img src=’pathtofile’/>
src is an attribute of img element which tells the file to be display
HTML Styles
Color, font, size, and other styles can be applied to an element using the HTML style attribute.
<p style='color:red'> This is my paragraph</p>
In paragraph style has a two things. color is a property and red is a value of property
<body style="background-color:cyan;">
In body style has property name background-color and cyan has its value.
HTML Formatting
HTML has many formatting elements such has <b> for bold, <i> italic, <u> for underline.
<b>This text is bold</b>
HTML Quotation
The HTML blockquote element denotes a portion of text that is taken from another source and quoted.
<blockquote>I am god<cite>Sunil</cite> </blockquote>
HTML Comments
<!-- this is not visible -->
HTML comments will not visible in browser and use only for refernces.
HTML Colors
HTML colors can be supplied using RGB, HEX, HSL, RGBA, or HSLA values, as well as preset color names.
Color style with color names
<p style="background-color:red;">This is red</p>
Color style with rgb values
<p style="background-color:rgb(255,90,56)">This is red</p>
Color style with hex values
<p style="background-color:#78ff82">This is red</p>
HTML Styles – CSS
Color, font, text size, spacing between components, how elements are positioned and laid out, what background pictures or background colours are to be used, different displays for different devices and screen sizes, and much more can all be controlled with CSS.
CSS can be add in 3 ways
- Inline
- Internal using <style> tag
- External using external file of style
Inline
<p style="color:red">This is paragraph</p>
Internal
<style> p{ color:red } </style> <p> This is red paragraph</a>
External
<head> <link rel="stylesheet" href="styles.css"> </head>
Create style in another file and save in .css extension. Call this file in your html file using link element
HTML Links
You can click on a link and jump to another document.
How to create link
<a href='https://www.google.com'>Google</a>
When you click on Google, it will jump to google.com website.
HTML Tables
Table element is used to createe tables in HTML. It is divided into rows i.e. tr and coloums ie.td. For heading th is used.
<table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Parv</td> <td>14</td> </tr> <tr> <td>Pari</td> <td>9</td> </tr> </table>
HTML Lists
You can create ordered and unordered list in HTML using ul and ol tag.
<ul> tag
<ul> <li>mamma</li> <li>pappa</li> <li>jiji</li> </ul>
<ol> tag
<ol> <li>mamma</li> <li>pappa</li> <li>jiji</li> </ol>