What is html | Create Web Page Entirely By Writing HTML!

on

What is html? Learn html basics to get started

What is html full form or what does html stand for?

HTML refers to Hypertext Markup Language which helps to build the foundation of website. Every
person should know about this language whether to create website or to edit their web page
or to place ad code from AdSense in their HTML source code. Reading full page will
give you the knowledge about how to use HTML to create your own website. With this concept,
everybody, even beginner can learn to make website. So, let's begin:

Ø  First, I will make clear the indispensable element of HTML.
Ø  Tags are the keywords which is enclosed in “< > “. For example: <a>-for hyperlink
Ø  Element contains the start tag and end tag. For example:<html></html>

·         <!doctype html>
HTML always starts with <!doctype html>. This element gives instructions to web browser about what type of markup language is the page written in.

·         <html></html>
<html> tag is the root element of HTML page.

·         <head></head>
The element under <head> tag is not visible in page itself but only to page code and placed between <html> tag and <body> tag. This element consists of tags like <title>, <style>, <meta>. Metadata is used by browsers, search engine (keywords) and by other web services.

·         < body></body>
This tag is the visible part of page.

Illustration 1:

<!doctype html>
<html>

<head>
<Title>this is page title</title>
</head>

<body>
<h1>this is heading</h1>
<p>this is paragraph</p>
</body>

</html>

Result:
This is heading.
This is paragraph.

  • In this illustration only body part is shown in web browser.
  • <h1> is large and bold. <P> is default text size which browser takes. The above element is must to start any HTML page.

HTML editor

We have learnt inseparable part of HTML, now it’s time to know what type of platform we need to use for writing HTML codes. For this, we can use simple text editor like Notepad (PC) and TextEdit (Mac).
  • First open Notepad
  • Write HTML code and save it as filename.html extension.
  • Next, go to saved HTML file and open it. You can simply click it and it will take you to web browser.
  • The browser will show this page.



Let's learn html special character and html code for website 

HTML headings

HTML headings are defined with <h1> to <h6> tag. <h1> define the most important heading whereas <h6> defines least important heading. 

Illustration 2:
<body>

<h1>heading 1</h1>
<h3>heading 3</h3>
<h6> heading 6</h6>

</body>

Result:
heading 1
heading 3
heading 6


HTML paragraph

Paragraph is defined with <p> tag. I’ve shown in above example. 

HTML links - html hyperlink

  • HTML links are defined with <a> tag.
  •  Href attribute defines destination of link. In illustration 3: when you click the link, it redirects to the web address defined in href attribute.
  • Attribute gives the extra information about tags.
Illustration 3:
<body>
<a href=”http://fullofcode.blogspot.com/”>
click this link </a>
</body>

Result:



HTML buttons


HTML buttons are defined with button tag.



Illustration 4:

<body>

<button>click me</button>


</body>



Result:





HTML horizontal rules

  • Horizontal rules are defined with hr tag.
  • <hr>  separates content in an html page.

Illustration 5:
<body>

<h1>This is heading 1</h1>
<p>This is some text</p>
<hr>
<h1>This is heading 2</h1>

</body>

Result:

HTML comment

  • It can be used as reminder when modifying next time in same page.
  • Remember, comment is used with exclamation marks in the beginning<!--

Illustration 6:
<body>

<!—this comment will not show in browser-->

<h1>this is heading</h1>
<p> this is paragraph</p>

</body>

Result:
this is heading
this is paragraph

HTML table

  • Table tag helps to create table.
  • Table row is defined as <tr> tag. It displays all table data in row as given below.
  • Table header is defined as <th> tag.  Table heading is itself bold and centered.
  • Table data are defined with <td> tag. Table data contains data of table.
Illustration 7:
<body>
<table style=”width: 100%”>

<tr>
<th>first name</th>
<th>last name</th>
</tr>

<tr>
<td>Tony</td>
<td>Nanny</td>
</tr>

<tr>
<td>Jackson</td>
<td>Smith</td>
</tr>

</table>

</body>

Result:

HTML lists

  • <ul> defined as unordered list.
  • <ol> defined as ordered list.
  • List items starts with opening tag <li>  and end with </li> tag
Illustration 8:

<body>

<h2>Unordered Lists</h2>
<ul>
<li>ball</li>
<li>cricket</li>
<li>football</li>
</ul>

<h2>Ordered Lists</h2>
<ol>
<li>ball</li>
<li>cricket</li>
<li>football</li>
</ol>

</body>

Result:

Unordered Lists

  • ball
  • cricket
  • football

Ordered Lists

  1. ball
  2. cricket
  3. football
For detail study of this page, you can read next article. Click this link.
TIPS: If you are eager to learn HTML more, you can go to this hyperlink: https://w3schools.com.

Comments

Post a Comment