Introduction of Html

Shreyesh kolhe
March 02, 2022

What is HTML?

  • HTML is stands for HyperText Markup Language.
  • HyperText : Link between web pages.
  • Markup Language:  Text between tags which defines structure.
  • It is a language to create web pages
  • Html Defines how to web page looks and how to display content with the help of elements
  • It forms or defined the structure of our web Page 
  • Need to save your file with .html extension
Features of HTML
  • The learning curve is very easy ( easy to modify).
  • Create effective presentations.
  • Add Links wherein we can add references.
  • Can display documents on platforms like Mac, windows, Linux etc
  • Add videos, Graphics and audios making it more attractive
  • Case insensitive language

HTML Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
    <title>skeleton</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html>
Instruction to the browser about the HTML version
  • <html>
Root element which acts as a container to hold all the code Browser should know that this a HTML document.
Permitted content: One head tag followed by one body tag.
  • <head>
Everything written here will never be displayed in the browser It contains general information about the document Title, definitions of css and script sheets metadata(information about to document ).
  • <body>
Everything written here will be displayed in the browser.
Contains text, images, link which can be achieved through tags.

HTML Element
  • Element are created using tags.
  • Elements are used to define semantics.
  • Can be nested and empty
Block Level:
  • Takes up full block or width and adds structures in the web page
  • Always starts from new line
  • Always end before the new line
  • Ex. <p>  <div>  <h1>...<h6>   <ol>  <ul>    
Inline Level : 
  • Takes up what is requires and adds meaning to the web page.
  • Always starts from where the previous element ended
  • Ex <span>  <strong> <em>  <img>  <a>
Basic Tags

Enclosed within <>
Different tags render different meaning
  • <title> tag
  • <p>
  • <hr> divides the web page ( horizontal rule )
  • <br> break
  • <img>
  • <h1> Most important heading
  • <h6> Least important heading
  • <strong> text to bold
  • <em> text to be italic
  • <ol>series of event that take place in some order (ordered list )
  • <ul>events take place where order is not important.
  • <li>
  • <div>and <span> group different tags. it acts like container. <div> is block level <span> is inline level.
  • <a> add links in web page.
  • <table>
  • <tbody>table body
  • <tr> table row
  • <th> table head
  • <td> table data
  • <form> 
1. Action attribute : send data to specific URL
2. Method attribute : specific HTTP request (GET or POST).
3. Ex. <form action="/my-url" method="POST">
4. <input> accept data from user.

Types of Input
  • text : store text data
  • password : secure password.
  • placeholder : temporary text in input fields.
  • button : button in the form
  • submit : submit button  syntax : type="submit"
  • checkbox : check multiple options. 
  • radio : choose a single option
  • <select> : option to select
  • <textarea> : multiline plane text editor.
  • <labels> : add captions for individual items in a form.
Validation 
    a. required
    b. email

Attributes
  • Properties associated with each tag.
  • <tag name="value"></tag> is a structure.
  • Global Attribute: 
a. title - add extra info(hover)
b. style - add style information

 <form>
        <label>Password: <input type="password" name="pass" placeholder="your password" pattern=".{5,10}" required
                title="please enter password length 5 to 10"></label>
    </form>