PRIYA K

Posted on Nov 24

HTML 5

File -> Documents -> right click -> create new folder -> rename ->open -> create new document and click empty document ->rename as index.html

right click the index.html -> open with text editor -> type a message and save it

run the output: select the index.html file and double click

Structure of HTML

<!DOCTYPE HTML>(html follows the rule)
<html>
<head>(head contains container element.container element means keywords,page descriptions,author name,css file link)
<meta charset = "utf-8">(uses all languages)
<title>My Home Page</title>
</head>
<body>
   <h1>hi</h1>
   <p> this is </p>
</body>
</html>

metadata(data about data)
eg:

<meta name = "author" content = "priya">
<meta name = "description" content ="selenium">

1.Italic

<em>Priya</em>

output Priya

2.<!-- !>(for comment line)

3.Paragraph

<p>this is priya</p>

4.header tag

<h1>Priya</h1>
<h1> 5<10 </h1>
<h2>Priya</h2>
<h3>priya</h3>
<h4>priya</h4>
<h5>priya</h5>
<h6>priya</h6>

5.Attributes

<p class = "check">This is the table </p>

6.Link

<a href="www.kaniyam.com">Welcome To kaniyam</a>

<a href="www.kaniyam.com" title="Tamil Technology">Welcome To kaniyam</a>

7.open in another tab

<a href="www.kaniyam.com" title="Tamil Technology" target =_"blank">Welcome To kaniyam</a> (anchor tag)

8.boolean attributes(true ,false,on,off)

9.type in text box (get the input)

enter name:<input type="text">

10.disable the text box

enter name:<input type="text" disabled="disabled">

Character Entity Reference

greater than >
< lesser than <
" quotes "
' apostrophe '
& ampersand &

11.

to type in bigger size,use &lt;h1&gt; tag

output type in bigger size,use

tag

12.
unordered list:
ul-unordered list
li-list item

<ul>
   <li>Gandhi</li>
   <li>periyar</li>
   <li>netaji</li>
   <li>ambedhkar</li>
</ul>

output

Gandhi
periyar
netaji
ambedhkar

ordered list

<ol>
   <li>Gandhi</li>
   <li>periyar</li>
   <li>netaji</li>
   <li>ambedhkar</li>
</ol>

output

Gandhi
periyar
netaji
ambedhkar

nested list

<ol>
   <li>have pen and paper</li>
   <li>note down everything</li>
   <li>go through them</li>
   <li>ask questions
       <ul>
           <li>listen to the answer</li>
           <li>Raise again your questions on the answers</li>
       </ul>
   </li>
   <li>clarify your doubts</li>
</ol>

output

have pen and paper
note down everything
go through them
ask questions
listen to the answer
Raise again your questions on the answers
clarify your doubts
Emphasis

<p> It is good to <em> practise </em> regularly and <em> write </em> them. </p>

output
It is good to practise _regularly and _write them.

14.Underline

<p> HTML is <u>easy</u> to learn </p>

15.Combine strong,emphasis and underline

<p>HTML is <u><strong><em>easy </strong></em></u> to learn.

16.Description list
(ta(tamil) = default attribute)

<dl>
    <dt>HTML</dt>
    <dd>HTML is the standard markup language for Web pages.
        With HTML you can create your own Website.
        HTML is easy to learn - You will enjoy it!</dd>
    <dt>Kaniyam</dt>
    <dd><i lang = "ta">1960 முதல் 1990 வரை சோவியத் ரஷ்யாவில் இருந்து பல்வேறு பதிப்பகங்கள் தமிழ் உள்ளிட்ட பல மொழிகளில், அறிவியல், அரசியல், இலக்கியம், சிறார் இலக்கியம் எனப் பல்துறைகளில் பல நூல்களை வெளியிட்டன</i></dd>
</dl>

code

<dl>
    <dt><strong>HTML</strong></dt>
    <dd>HTML is the standard markup language for Web pages.
        With HTML you can create your own Website.
        HTML is easy to learn - You will enjoy it!</dd>
    <dt><strong><em>Kaniyam</em></strong></dt>
    <dd><i lang = "ta">1960 முதல் 1990 வரை சோவியத் ரஷ்யாவில் இருந்து பல்வேறு பதிப்பகங்கள் தமிழ் உள்ளிட்ட பல மொழிகளில், அறிவியல், அரசியல், இலக்கியம், சிறார் இலக்கியம் எனப் பல்துறைகளில் பல நூல்களை வெளியிட்டன</i></dd>
</dl>

17.abbrevations

<p>We use <abbr title ="Hyper Text Markup Language"> HTML </abbr> to structure our documents </p>

18.superscript and subscript

<p>HTML is the standard markup language <sup> for</sup> Web pages.With HTML you can create your own Website.

<p>HTML is the standard markup language <sub> for</sub> Web pages.With HTML you can create your own Website.

19.Marking up dates and times

<time datetime ="2025-11-23">20 June 2022</time>

20.Date Time

<time datetime ="2022-06-20">20 June 2022</time>

<time datetime ="2022-06"> June 2022</time>

<time datetime ="01-20"> 20 June </time>

<time datetime ="19:30"> 19:30 </time>

<time datetime ="19:30:01.856"> 9:30:01.856 </time>

<time datetime ="2022-01-20T19:30"> 7:30 pm, 20 June 2022 </time>

21.HyperLink

<p> Im creating a link to
<a href ="https://www.kaniyam.com/">Kaniyam Home Page </a>
</p>

Adding Attribute

<p> Im creating a link to
<a href ="https://www.kaniyam.com/" title = "The best place to learn">Kaniyam Home Page </a>
</p>

code

<a href="https://www.kaniyam.com/">
  <img src="linux.jpeg" alt ="Linux logo that links to the linux homepage">
</a>

Open link in new tab

<a href = "https://www.mozilla.org" target ="_blank"> Mozilla Foundation
</a>

Downloading attribute when linking to a download

<a href ="https://download.mozilla.org/?product = firefox - latest-ssl&os=linux64&lang=en-US"   download="firefox-latest-64bit-installer">
  Download latest Firefox for Linux(64-bit)(English , US)
</a>

Email Link:
mail to:Link indicates the email address of the intended recipient

<a href ="mailto:saraswathi@gmail.com"> Send mail to no one </a>
<a href ="mailto:saraswathi@gmail.com?-cc=yarum_illai@kaniyam.com&&bcc=nowhere@payilagam.com&subject =The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> Send email with cc,bcc,subject and body
</a>

create Favicon

Highlighting

<p>Hi,I'm from <mark>Chennai </mark></p>

Image,Audio,Video

<img src="linux.jpeg" 
alt ="Tux The Penguin"

code

<img src="linux.jpeg" 
alt ="Tux The Penguin"
width ="400"
height ="324">

code

<img src="linux.jpeg" 
alt ="Tux The Penguin"
width ="400"
height ="324"
title ="Tux is a penguin character">

Figure (container)

<figure>
<img src="linux.jpeg" 
alt ="Tux The Penguin"
width ="400"
height ="324"
title ="Tux is a penguin character">
<figcaption>Linux-logo - Tux</figcaption>
</figure>

Video and Audio on the web:

<video src="rabbit.webm"controls>
  <p> Your browser doesn't support HTML5 video.Here is a <a href = "rabbit.webm">link to the video </a> instead. </p> </video>

code

<video controls>
 <source src="rabbit.mp4" type = "video.mp4">
 <source src="rabbit.webm" type = "video.webm">

  <p> Your browser doesn't support HTML5 video.Here is a <a href = "rabbit.mp4">link to the video </a> instead. </p> </video>

code

<video controls width = "400" height = "200"
   autoplay loop muted preload="auto"
   poster ="rabbit.jpeg"> <!-- try preload = "none" -->
   <source src="rabbit.mp4" type = "video.mp4">
   <source src="rabbit.webm" type = "video.webm">

code

<audio controls>
 <source src="viper.mp3" type ="audio/mp3">
 <source src="viper.ogg" type ="audio/ogg">
</audio>

Embedding Technologies:copy in youtube

= Embedding an entire web document inside another one


<pre class="highlight plaintext"><code>


code :copy in google maps




</code></pre>

<pre class="highlight plaintext"><code>

code



</code></pre>
<p>&lt;!DOCTYPE html&gt;<br>
<br>
  </p><br>
    <br>
    Iframe with basic details<br>
  <br>
  <br>
    <h1>Iframe with basic details</h1><br>

width="100%" height="500" frameborder="0" allowfullscreen sandbox&gt;<br>
       <p> <a href="https://developer.mozilla.org/en-US/docs/glossary"> Fallback link for browsers that don't support iframes <br>
</a></p><br>
    <br>
   <br>

<pre class="highlight plaintext"><code>

Browsers Development Tools:



</code></pre>
<p>Shortcut: ctrl + shift + I or F12 or settings-&gt;web load pages<br>
<a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">https://en.wikipedia.org/wiki/Sandbox_(computer_security)</a></p>
<pre class="highlight plaintext"><code>

Clickjacking
clickjacking is an interface-based attack that tricks website users into unwittingly clicking on malicious links.In clickjacking,the attackers embed their malicious links into buttons or legitimate pages in a website.In an infected site,whenever a user clicks on a legitimate link,the attacker gets the confidential information of that user ,which ultimately compromises the user's privacy on the Internet.

Courtesy:https://developer.mozilla.org/en-US/docs/Glossary/clickjacking

HTTPS:
https://letsencrypt.org/

Vector Graphics:

Images should not pixelate when we zoom them.
Two Types Of Images:
1.Raster Images
2.Vector Images

Raster Images:
Raster Images are defined using a grid of pixels.
Eg. .bmp, , .png, .jpg, .gif

Vector Images:
SVG[Scalable Vector Graphics] Format Images( .svg).
It is an XML-based language for describing vector images


code



</code></pre>
<p>&lt;!DOCTYPE html&gt;<br>
<br>
  </p><br>
    <br>
     Vector versus raster <br>
  <br>
<br>
  <h1> Vector versus raster </h1><br>
  <img src="star.png" alt="A raster star"><br>
  <img src="star.svg" alt="A vector star"><br>
<br>


<p><br>
   <br>
</p>
<pre class="highlight plaintext"><code>

Responsive Images:
CSS

span Tag:
div Tag:


code



</code></pre>
<table>
<td> first cell </td>
</table>
<pre class="highlight plaintext"><code>


code



</code></pre>
<table>
<td> first cell </td>
</table>
<pre class="highlight plaintext"><code>

(td = table data,th = table header)


code



</code></pre>
<table>
<th> first cell </th>
<td> first cell </td>
</table>
<pre class="highlight plaintext"><code>


code



</code></pre>
<table>
<th> first cell </th>
<td>
<strong> first cell </strong> </td>
</table>
<pre class="highlight plaintext"><code>


code



</code></pre>
<table>
<tr>
<td> first cell </td>
<td> second cell </td>
<td> third cell </td>
<td> fourth cell </td>
</tr>
</table>
<pre class="highlight plaintext"><code>


**code**



</code></pre>
<table>
<tr>
<th> first heading </th>
<th> second heading </th>
<th> third heading </th>
<th> fourth heading </th>
</tr>
<td> first cell </td>
<td> second cell </td>
<td> third cell </td>
<td> fourth cell </td>

</table>
<pre class="highlight plaintext"><code>


code



</code></pre>
<table>
  Monthly Electricity Bill 
 <tr>
    <th> Month </th>
    <th> Units </th>
</tr>
<tr>
    <td> January </td>
    <td> 100 </td>
</tr>
<tr>
    <td> February </td>
    <td> 50 </td>
</tr>
</table>
<pre class="highlight plaintext"><code>

code



</code></pre>
<table>
  <colgroup>
    <col span="2">
    <col>
   </colgroup>
   <tr>
      <th>Publisher</th>
      <th>Title</th>
      <th>Link</th>
   </tr>

   <tr>
       <td> Kaniyam </td>
       <td> CSS in tamil </td>
       <td> <a href="http://www.kaniyam.com/download/learn-css-in-tamil.pdf/">
       </a>
</td>
    </tr>

   <tr>
       <td> Kaniyam </td>
       <td> JavaScript in tamil </td>
       <td> <a href="http://www.kaniyam.com/download/learn-javascript-in-tamil.pdf/">
       </a>
</td>
    </tr>
</table>
<pre class="highlight plaintext"><code>


- &amp;nbsp--
- ensp - 2 spaces
- ensp - 4 space
- &lt;br&gt; = line break

**Nested Table**



</code></pre>
<table id="table1">
  <tr>
     <th> title1 </th>
     <th> title2 </th>
     <th> title3 </th>
  </tr>
  <tr>
     <td id="nested">
     <table id="table">
       <tr>
          <td> cell1 </td>
          <td> cell2 </td>
          <td> cell3 </td>
       </tr>
     </table>
     </td>
     <td> cell2 </td>
     <td> cell3 </td>
   </tr>
       <tr>
          <td> cell4 </td>
          <td> cell5 </td>
          <td> cell6 </td>
       </tr>
</table>
<pre class="highlight plaintext"><code>

Check Boxes:



</code></pre>
<h1> Check the Course you wish </h1>

<p> Java<br>
  </p>

<p><br>
 Python<br>
  </p>

<p><br>
 Angular<br>
  </p>

<p><br>
 React<br>
  </p>

<p></p>
<pre class="highlight plaintext"><code>


Radio Buttons:



</code></pre>
<p>HTML<br>
<h2>HTML</h2></p>

<p>CSS<br>
<h2>CSS</h2></p>

<p>JAVASCRIPT<br>
<h2>JAVASCRIPT</h2></p>
<pre class="highlight plaintext"><code>


Input Box - Password:



</code></pre>
<p><br>
<br>
 <h3> Password:</h3> <br><br>
<br>
<br><br><br>
 <h2> Choose Course </h2> </p>
<pre class="highlight plaintext"><code>

Drop Down / Select Box



</code></pre>
<p><br>
   Java <br>
   Python <br>
   Ruby<br>
   .NET <br>
</p>
<pre class="highlight plaintext"><code>

code



</code></pre>
<p><br>
   Select Course <br>
   Java <br>
   Python <br>
   Ruby<br>
   .NET <br>
</p>
<pre class="highlight plaintext"><code>

</code></pre>

DEV Community

HTML 5

tag

Top comments (0)