Basics of HTML

basics of html

The well known HTML i.e. Hypertext Markup Language is a markup language to create web templates or web pages. 

HTML helps to design the best interactive layouts for the websites using the set of pre-defined tags, styles, and scripts.

Hypertext Markup Language

What is Hypertext?
Hypertext nothing but cross-referencing between different texts. This means all texts are linked together.

What is Markup language means?
A series of Tags are used to bind the contents to form the elements.

What is the tag? What is the content? what is the element?
- Content means the user-defined texts or pictures
- Tag is a format to define the content. For every open tag, there is a closing tag.
        (note: if tags are not closed properly, of course, it’s an error.)
      - Element is a combination of content with tag

What is the basic structure of HTML?
<html>
<head></head>
<body></body>
</html>

How to add styles within the HTML?
In three ways, you can add the styles within the HTML.
1    -  Inline styles
   Means, a style defined within the HTML tag
   Example:
      <div style=”background: red”></div>
-   External Styles
   Means, styles defined in external (.css) file and we are linking that file within the HTML.
   Example:
   Add the below link tag between  <head></head> tag.
    <link rel=”stylesheet” href=”pathforexternalfile.css ” />
 -  Internal Styles
    Means, styles defined with in the <head> tags
    Example:
        <head>
           <style>
              div { background-color: red;}
           </style>
       </head>
What are a few important tags and their usages in HTML?
1.<html></html>
    This is a root tag or parent tag for the entire HTML document.
2. <head></head>
    Used to define  some headings and other tags like 
<style></style>,<script></script>,<link></link>,<meta></meta>etc.
3. <style></style>
    To define styles or design changes using CSS within the webpage.
4.<link></link>
    To include files within the HTML document
5. <script></script>
    To include Javascript code within the document.
6.<h1></h1>
    To define the highest heading element on the page. The other tags are <h2> to <h6>.
7. <body></body>
    Used to contain all the HTML elements.
8. <label></label>
    Used to display the labels in the webpage
    Example:
    <label> Hello !!!</label>
9. <input>
    Used to display some input controls on the web page.
    Example:
    <input type=”text”> 
    To display text box
    <input type=”radio”> 
    To display radio button
    <input type=”checkbox”>
    To display check box
    <input type=”date”>
    To display date selection with calendar
    <input type=”password”>
    To display password field
    <input type=”button”>
    To display button
    <input type=”submit”>
    To display the submit button
    <input type=”reset”>
    To display reset button
    <input type=”file”>
    To display file dialog for file uploads
    <input type=”email” >
    To enter emails with some basic validations
    <input type=”number”>
    To display number selection
 <input type=”tel”>
To select telephone number format with some validation
10. <select><option></options></select>    
To select options, like dropdown control.
11. <p></p>
    To define a paragraph
12.<div></div>
    To define a block of content.
13. <form></form>
    To collect user inputs as a form and send it to another page for processing.
14. <iframe></iframe>
    Used to display the webpage in another webpage.
15. <img></img>
    To display images on the webpage.
16. <table><th></th><tr><td></td></tr></table>
    To display the basic structure of the table.
17. <br>
    To provide a gap between page elements.
18. <li></li><ul></ul>
    To create lists(ordered and unordered) on the webpage.
19. <a></a>
    To create hyperlinks within the HTML. Hyperlinks are used for navigation to pages.
20. <span></span>
    Used to apply for a specific part of a text or part of a document.

How to add scripts within the HTML?
If you want to include javascript within the HTML, in two ways we can add.

1. Within the <head> tag
2. Within the <body> tag(mostly suggested)


Conclusion

This post helps to find enough basic information on about HTML, basic HTML syntax, HTML tags, include styles and scripts within the HTML.


-
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)