Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/erabossid/html

LEARN HTML
https://github.com/erabossid/html

Last synced: about 1 month ago
JSON representation

LEARN HTML

Awesome Lists containing this project

README 

        
# html

LEARN HTML



## HTML Tutorial



## HTML Basic (for the Beginners)



HTML is Hypertext Markup Language. It is used to build websites. Anyone who wants to learn to build websites, learning HTML is a must. 

A single HTML web page has mainly some essential parts- `html, head, body`. Here is a basic formation of HTML pages to understand at the starting level.

```



  

  

    Web contents will go here inside the body

    Web contents will go here inside the body

    Web contents will go here inside the body    

  

  

    



```

An HTML page must start with `` 


Then the document must start with `` tag and end with `` tag. 

Then all the contents will be placed inside ` and ` tag.



HTML elements are wrapped in some specific tags. Every tag has an opening and a closing tag except only a few of them, at the same time this type of tag is self closing tag. 


`<>` this is an opening tag mark and `>` this is a closing tag mark. 


So if we want to use the html tag in our page we need to use it in such way 


```



  Above is with the opening tag

  And below is with the closing tag



```



We'll discuss more about the tags later. Now let's see some most common used tags for displaying the elements 



`
 
` This div (division) tag is used to wrap a bunch of code, or a part of the page to make it separate/devide from other contents.


`
 
` This h1 (Header 1) tag is used to make a Heading text of some specified contents. 


There are also some other Header tags, `h2, h3, h4, h5 and h6`. All it's just text size matter. Let's see how they look like


# This is the text size of h1 header

## This is the text size of h2 header

### This is the text size of h3 header

#### This is the text size of h4 header

##### This is the text size of h5 header

###### This is the text size of h6 header

`
 
` This p (paragraph) tag is used to write some content as in paragraph. 


` ` This button tag creates a button.



Now let's build our first HTML page with the above knowledge. Here is the code

```



  

  

    


        
It's Awesome!


        
We have learnt the basic HTML and we are now able to build an HTML page.


        First Button

    
  

    

    

    


        
It's very interesting!


        
We are making it more.


        
more and more.


        Next Button

    
 

  

  

    



```

Here is the output 


`-------------------------------------------------------------------------------`

# It's Awesome!

We have learnt the basic HTML and we are now able to build an HTML page.


[First Button](#)



## It's very interesting!

We are making it more. 


more and more.


[Next Button](#)



`-------------------------------------------------------------------------------` 



So, now you can build a web page with a large content by adding some more `div` and then other necessary elements. Try yourself to create a large page with your own contents. 



## Let's move forward

Now we'll learn about some HTML attributes.


If you look at the above codes, you'll find there are two `
`. In a real web page you'll find there many `div` many `p` and so on. Now, think if I tell you to work on a `div`, how will you find that specific `div` or other elements? Any idea? Yes, there is a way! We need some reference, right? So, we can do this by giving an identity to every `div` so that we can refer it easily. In HTML identity is defined by an `id` attribute. Let's see how to add it



```

          



          



      


```

That `id` inside the opening `div` tag separated by a space is an HTML attribute and the names inside that quote marks are the `value` of the attributes. Remember, you must put the `name value` for `id` attribute starting with an alphabet, never with a number.


This way, inside an opening tag of every element different HTML attributes are to set for different requirements. Now let's add an id attribute to the `p` element.


`
      
`


Hope it makes sense about HTML attributes. 



Okay, now to see how we can add an image in our web page:


An image is to put in a web page with `img` tag with a `src` attribute ( (image source / path)). Here's an example 


`` 



We are going to place an image here with a valid url, look at this code 


``


An the output is: 


 



So, now, we are able to build a web page with some contents, buttons and images. And before we move forward, we'll learn to apply some styles in our page. There are different ways to do it, but for this time we'll learn it with `style` attribute. Here is an example:


`
     
`


As we can see, here we applied `style` attribute and the background color of the div set to red, that means it will make a red color div. 
 

`
     
`


Here the div will be blue color. You also can make it `black, white, orange, tomato, silver, gray` and so on. 


Now let's add some more value to the `sytle` attribute to make more sense,

`
     
`


This `div` will be a blue color div, its width will be 500px and height will be 300px. We can make different size of div in this way by changing its value as our own.  


Let's learn one more style, when you say `color` it applies for text/font color, and when you say `background-color` it applies for the background. Let's see an example: 


```

     

 Hello 




```

Gues the output. The div will be blue color but the text will be white color. Interesting? Yes, now we need to make well designed web page. First we need to make a plan how our page will look like. Here is a pattern, we'll work on it. 


 


 

Now, let's build a page following this pattern. We'll put all the necessary codes inside the `body` tag. Then we'll use a `header` tag for header contents, `div` tag for body contents and `footer` tag for footer contents. We also could use `div` tag for header and footer section, that's ok. But fortunately we have also a `header` and a `footer` tag in HTML for doing this. So, we'll use `header` and `footer` tag here:  



```



  

      
Our first web page


  



  


      
Here will go our text contents


      
More contents here


      
More topics here


  



  

      
By : your name here


  



```

Well, so far we've learnt the basic HTML code writing system. Now we are going to explain more about it but before that we'll learn some basic styles of HTML with stylesheet called CSS or Cascading Style Sheets. We can do it in different ways, but we'll use internal CSS for this time. 



## Let's learn some basic CSS (internal CSS) 

Internal CSS is to write inside `  ` tags and this is wrap inside `  ` tags before the `` tag. Here is an example 



```



  

    

       All your internal CSS will go here as explained above

    

  



  



  



```

Now we need to know how to write some basic CSS. Let's see 


We have already learnt some basic htmls tags, like `body, div, p, button` right? So, it will be easy to get the point of writing CSS. Look the below pattern first 


```



body{ background-color:green; }



```

Styles used for body and the system is to first write the tag name then {} and style rules in the {}. Got it? Now, let's see some more examples


```

body{background-color:green;}

h1{color:white;}

p{color:black;}

```

Could you imagine what will happen to this? The page `body` background color will be green and the text color in `h1` will be white, and text in `p` will be black. Here is the full code


```



  

    

      body{background-color:green;}

      h1{color:white;}

      p{color:black;}

    

  

  

  

    
This will be white color title 


    
Here will be black color text 
  

    
And all the body background color will be green


  

    



```

We also can use multiple CSS properties and values with a semiclone separated applied to a single element, see the example below:

```

div{

   background-color:red; 

   width:500px; 

   height:300px;

   margin-top:50px;

   margin-right:20px;

   margin-bottom:50px;

   margin-left:20px;

   padding-top:30px;

   padding-right:30px;

   padding-bottom:30px;

   padding-left:30px;

   }

   

   

p{

color:white; 

font-size:20px;

}

```

If you see the codes above carefully, hope you will get a clear concept about it. 



## Let's go back to HTML part again

Are you ready? 


Do you think you can move forward to learn more? 


If your answer is 'no', we would recommend to revise it again and again. 


And if your answer is 'yes', let's start learning all about web development from the basic to advance level with `W3SCHOOLS` at [w3schools.com](https://w3schools.com/). 
 



When you will be few or more comfortable to write HTML and CSS at w3schools and have more interest, to advance to your learning don't forget to join here [freeCodeCamp](https://freecodecamp.com/). It will help you to guide yourself on the way to become a real Developer. You'll be able to build projects and you'll get valuable Certificates! You just need to be consistent in coding, no matter if it's less or more a day. 



Wish you all the best. Happy Coding!