Skip to content

Latest commit

 

History

History
171 lines (143 loc) · 5.19 KB

html.md

File metadata and controls

171 lines (143 loc) · 5.19 KB
Raw
title description created updated
HTML
HTML Cheat Sheet gives you a quick reference of basic HTML tags, codes and attributes and is very handy while coding.
2020-06-17
2020-06-17

Sample program

<!-- Sample program -->
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
      <h1>Hello World! </h1>
      <p> Good Morning!! </p>
  </body>
</html>
  • <!DOCTYPE html>> : Specifies document type, here it is an HTML5 document
  • <html> : root element of an HTML page
  • <head> : Contains meta information about the HTML page
  • <title> : Specifies a title for the HTML page to display
  • <body> : body of the html document which contains headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • <h1> : defines Large heading
  • <p> : defines Paragraph
  • </body> : represents end of body
  • </html> : represents end of html
  • <!-- comment --> : comments

HTML Tags

HTML Tags Description Example
<h1..h6>Headers </h1..h6> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> are the heading tags, where <h1> is most important heading and <h6> is least important heading. <h1>MY FIRST BLOG</h1>
<div>..</div> <div> is used to wrap a block of code as a single block <div> Block of code </div>
<span> … </span> Used to inject inline elements, like an image, icon etc without disturbing the formatting of the page. <span> icon image </span>
<p> … </p> Contains plain text like a paragraph <p> multi line text </p>
<br/> line break, used to write a new line. <br/>
<hr/> Similar to line break, additionally draws a horizontal bar to indicate the end of the section <hr/>
<meta/> Used to provide meta data information like description of the web page <meta charset="utf-8"/>
<a>..</a> Used to link external webpages to your web page <a href="https://onecompiler.com/" target="_blank"> OneCompiler</a>
<img /> Used to insert an image <img src="/sample.jpg" alt="sample image" width="100" height="50" longdesc="image" />
<pre/> Text in a pre elementis displayed in a fixed-width font, and it preservesboth spaces and line breaks <pre> int i = 0; </pre>
<audio> It is used to embed sound content in the document. <audio controls> <source src="demo.mp3" type="audio/mpeg"> </audio>
<video> It is used to embed video in the webpage. <video width="480" height="320" controls> <source src="demo_move.mp4" type="video/mp4"> </video>

HTML formatting

Formatting Elements Description
<i>..</i> Italic
<u>..</u> Underline
<b>..</b> Bold
<strong>..</strong> Important text
<em>..</em> Emphasized text
<mark>..</mark> Marked text
<small>..</small> Smaller text
<del>..</del> Deleted text
<ins>..</ins> Inserted text
<sub>..</sub> Subscript text
<sup>..</sup> Superscript text

Tables

<table> tag is used to create a table and <tr> tag is used to create table rows and <td> tag is used to create data cells.

   <table border = "1">
         <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
         </tr>
         
   </table>

Lists

1. Ordered Lists

Numbering the list items

<ol type = "1"> <!-- Numeric numbering, default case-->
<ol type = "I"> <!-- Uppercase roman numerals-->
<ol type = "i"> <!-- Lowercase roman numerals-->
<ol type = "A"> <!-- Uppercase letters-->
<ol type = "a"> <!-- Lowercase letters-->
    <ol type = "1">
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
    </ol>

2. Unordered Lists

List items are displayed using bullets

<ul type = "disc"> <!-- default case-->
<ul type = "square">
<ul type = "circle">
<ul type= "circle">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ul>

3. Definition Lists

List the entries like in a dictionary or encyclopedia.

  • <dl> : Start of the definition list
  • <dt> : Term
  • <dd> : Term definition
  • </dl> : End of the definition list
 <dl>
    <dt><b>OL</b></dt>
    <dd>Ordered Lists</dd>
    <dt><b>UL</b></dt>
    <dd>Unordered Lists</dd>
    <dt><b>DL</b></dt>
    <dd>Definition Lists</dd>
 </dl>

Forms

<form> element is used to define a form.

<form>
<!--form elements like input select etc-->
</form>

<input> element

Type Description
<input type="text"> To define a single-line text input field
<input type="number"> To define a single-line number input field
<input type="password"> To define a single-line password input field
<input type="radio"> To define a radio button
<input type="submit"> To define a submit button
<input type = "checkbox"> To define a checkbox
<input type = "file"> To define a file upload box 
 <form >
   ID : <input type = "text" name = "user-id" /> <br> <!-- Single line text input-->
   Password: <input type = "password" name = "password" /> <br> <!-- Single line password input-->
 </form>