HTML Tutorial for beginners the simple way

HTML TUTORIAL

HTML stands for HyperText Markup Language.HTML is the main markup language for describing the structure of web pages. With HTML you can create your own Website. HTML is easy to learn - You will really enjoy it!

What This Tutorial Covers

After seeing this blog you can create your own website easily. The things which we cover in this tutorial that are

HTML BASIC

HTML ATTRIBUTE
HTML STYLE
HTML IMAGES
HTML TABLE
HTML PARAGRAPH
HTML HEADINGS
HTML IFRAME
HTML FONT
HTML BACKGROUND COLOUR

After doing all these steps .you can easily developed your own webpage.like this

HTML Documents

All HTML documents must start with a document type declaration: `<!DOCTYPE html>`.The HTML document itself begins with `<html>` and ends with `</html>`.The visible part of the HTML document is between `<body>` and `</body>`.

For Title, you used <title>Page Title</title> .your web page shows only those things on your page .which you type in the body tag .<body>.as you can see in the image the title is not showing on your page.

For Headding ,you used <h1>Unique blog</h1> and for paragraph use <p> tag. Headings are defined with the `<h1>` to `<h6>` tags.

`<h1>` defines the most important heading. `<h6>` defines the least important heading.

<br>tag used for the distant between lines.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Unique blog</h1>

<p>This is my unique blog page.where you get unique knowledge</p>

</body>

</html>

For background colour you use <body style="background-color:yellow;">

Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

How to add the image in your webpage

In HTML, images are defined with the <img> tag.The <img> tag is empty, it contains attributes only, and does not have a closing tag.The src attribute specifies the URL (web address) of the image: <img src="url"

HTML TABLE

For HTML table we used <table> tag.Row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data is defined with the <td> tag.

<html>

<head>

<style>

table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}

td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

}

tr:nth-child(even) {

  background-color: #dddddd;

}

</style>

</head>

For tables column name you uesd these lines in <body> tag.

<body>

<center>

<table>

  <tr>

    <h3><th>Company</th></h3>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Centro comercial Moctezuma</td>

    <td>Francisco Chang</td>

    <td>Mexico</td>

  </tr>

</table>

</center>

HTML IFRAME

An iframe is used to display a web page within a web page.

An HTML iframe is defined with the <iframe> tag:<iframe src="URL"></iframe>.The src attribute specifies the URL (web address) of the inline frame page.For adding iframe in my web page i used this code.i used <center>tag for displaying the iframe in center of the page.

<center><iframe src="https://uniqueblog91.blogspot.com/"alt="Simply Easy Learning" width="1000"

         height="150">></center>

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

.topnav {

overflow: hidden;

background-color: #333;

}

.topnav a {

float: left;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #4CAF50;

color: white;

}

</style>

</head>

<head>

<style>

width: 100%;

border: 1px solid #4CAF50;

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

</head>

<style>

.bordered {

width: 1800px;

height: 50px;

padding: 20px;

border: 10px solid yellowgreen;

}

</style>

<h1 style="background-color: yellow;"><i><center>UNIQUE BLOG</center></i></h1>

</div>

<body>

<a href="#contact">Contact</a>

<a href="#about">About</a>

</div>

<h1><center>Welcome to my Blog</center></h1>

<h3>This blog is about how to create web page through HTML language and add a different picture on that web page .</h3>

<ul>

<h3><li>Flower pictures</li></h3>

<h3><li>frame of unique blog</li></h3>

<h3> <li>table</li></h3>

</ul>

<h2>FLOWERS PICTURES</h2>

<img src="C:\Users\hifsah\Desktop\image1.jpg"