Learning HTML – Chapter 1


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.

  1. Notepad (or any other editor)
  2. 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

  1. Inline
  2. Internal using <style> tag
  3. 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>