Let's say 'Hello' to HTML
Tags: html, css, webdev
Published: 2020-01-26 08:26:38

Today is HOWARD'S day. Happy engineer though not from MIT.

This is just an article that is intended to convey 'HELLO' to <b>HTML</b> .
This is not full HTML course rather it is 'hello' course so that you won't find HTML strange member in any further web courses or web development .

First thing first , if you have heard joke about html being programming language , that's true .HTML isnot programming language , it is markup language.

<h3>Structure</h3>
<b><!DOCTYPE html></b>

This must be the very first thing in the HTML and before <html>.This is to inform browser about the version of HTML, the document is. It is not necessary to write 5 after HTML since it's default case in HTML5.

<h3>html</h3>
This is just another tag that is after the DOCTYPE that tell the browser that it's HTML inside html tag or document is of HTML type.Every thing in the document goes right inside this. It has enclosing tag .Every thing of document is in-between <html> and </html>

<h3>head</h3>
This section hold tag and metadata that is important for browser and search engine. 

<h3>title</h3>
This tag sets the title of your page.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3i3sakhc8igozi9hiznw.png)

<h3>meta</h3>
The content of this tag isnot intended for user or to be shown on page .This tag content is mainly for Search engine which scan the information in this for categorization and indexing .

```javascript
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">  
<meta name="description" content="Free Online tutorials">  
<meta name="author" content="thisauthor">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
```

<h3>body</h3>
This enclose all the content of HTML documents.

<h3>HTML Elements</h3>
HTML element usually have starting and ending tag with content to be inserted between them.While, there are elements with no ending tag since they don't have anything to be inserted.

for example:
<h1>Heading is here</h1>
<img src="pic.jpg" alt="this is an alt text" height="82" width="82">


<h3>HTML Attribute</h3>
Attribute provide additional information about element.
In above example of image height and width are attribute of the img which specifies the height and width of an image.

     <p style="color:red">This is a paragraph.</p>

```javascript
<span title="This is an continent">ASIA</span>
```
<span title="This is an continent"><b>ASIA</b></span>

<b>Remember</b>:Heading is used by search engine to index the structure and content.
Heading is also very important for user to skim contents.

<h3>list</h3>
HTML offer 3 different way to list an items.Let's list them:
<ul> - unordered list
<ol> - ordered list
<dl> - defination list

for list we use tag <li> and item to be inserted is placed in between <li> and </li>

let's see example:
```javascript
<ul class="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">SERVICES</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>
```

Output is :
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l2toracenutuhjyfallb.png)

while you can see the bullet above is round i.e default is of type disc.
There is also a choice for this with attribute type in <b>ul</b>
```javascript
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
```

we can also remove that bullet with style code:

    ul{
      text-decoration:none;
    }

we can align item horzontally rather than vertically with another styling :

    li {
       display:inline-block;
    }

after this our previous output looks like:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9jrc5m9zwxiz2ep2pou5.png)



<h3>anchor tag / hyperlinks</h3>
<p>Click me :</p>
      <a href = "https://www.google.com/">Google</a>

we have another attribute that we can add to it i.e 'title'.
<u>Try this :</u>
      <a href = "https://www.google.com/" target = "_blank">New window</a> 
      <a href = "https://www.google.com/" target = "_self">Self</a> 
 can u see the blue colour that come as default in hyperlink ?
You can remove that with styling:
           
         a{
             text-decoration: none; //this will remove the underline 
             color:#010101;
          }

remember for mail link we should have href attribute as :
```javascript
<a href="mailto:prvnpoudel4@gmail.com">Mail</a>
```
Before going forward we must know two different way by which element lies in structural view of page.
<h5>Block Elements</h5>
A block-level element occupies the entire space of its parent element (container), thereby creating a "block".
Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes. ( source:MDN)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o47b23umbb75l1d8xyq6.png)


<h5>In-line Elements</h5>