Skip to main content

Posts

Showing posts with the label Technology

Media

Media | HTML: Media is the almost everything, is like audio, video, recordings, images, animations and so on. Here is the media.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <meta charset="utf-8">     <title>Media in Html</title>   </head>   <body>     <video src="multimedia.mp4" height="312" width="420" controls>       Your browser not support video files.     </video><br><br>     <audio src="nimbus.mp3" controls>     </audio><br><br>     <iframe src="https://www.youtube.com/embed/q-72epsxMUk"     width="420" height="312"></iframe>   </body> </html> Web view of Html: Here is the Video:
Post a Comment
Read more

Form Elements

Form Elements | HTML: Form elements are using to get the data from user based on type data type.  List of Form Elements: Input Select Text Area Button Fieldset and Legend Input Types List: Email Phone Password Check Box File Date Reset Input Attributes List: Value Read only Disabled Size Min, Max and Maxlength Auto focus Auto Complete Place Holder Height and Width Form Attribute List: Form Form Action Form Method Form Target Form Novalidate Here is formelements.html: <!DOCTYPE html>   <html lang="en" dir="ltr">     <head>       <meta charset="utf-8">       <link rel="stylesheet" href="css/stylesheet.css">       <title>Form Elements</title>     </head>     <body>       <form class="form" action="submit.html" method="post" id="form1">         <fieldset>           <legend...
Post a Comment
Read more

Forms

Forms | HTML: Forms are using to get the data from user. The data will be used in server side. Here is the forms.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <link rel="stylesheet" href="css/stylesheet.css">     <meta charset="utf-8">     <title>Forms</title>   </head>   <body>     <p>Please Fill the Form</p>     <form class="form" action="submit.html" method="post">       <label for="fname">First Name:</label><br>       <input type="text" id="fname" name="fname"><br><br>       <label for="lname">Last Name:</label><br>       <input type="text" id="lname" name="lname"><br><br>       <input type="radio" id="male" name="gender" value="m...
Post a Comment
Read more

Head

Head | HTML: Head is the hidden part in web page but it contains the effective information of web page. Head Elements List:      1.title     2.link      3.style     4.script     5.meta     6.base  Here is the head.html:  <!DOCTYPE html>  <html lang="en" dir="ltr">    <head>      <meta charset="utf-8">      <meta name="author" content="Nataraja Murthy">      <base href="images/" >      <title>details of head tag</title>      <link rel="stylesheet" href="css/stylesheet.css">      <style media="screen">        body {          background-color : lightblue;        }      </style>      <script src="js/javascript.js"></script>   ...
Post a Comment
Read more

Java Script

Java Script | HTML: Java Script is the web programming language. It creates the behaviour to the html elements. Here is the Javascript.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <link rel="stylesheet" href="css/stylesheet.css">     <title>JavaScript in Html</title>   </head>   <body>     <!-- What is JavaScript, Use of JavaScript, and Where to use JavaScript -->     <p>Here is the way to use JavaScript</p><br>     <!-- Internal -->     <script>       function oursScript() {         document.getElementById("script001").innerHTML = "First JavaScript!";       }     </script>     <br>     <button type="button" onclick="oursScript()">Click</button><br>     <p id="script001"></p...
Post a Comment
Read more

Iframes and File Paths

Iframes and File paths | HTML: iframes are using to get the other documents and File paths are using to get the files by suitable paths. Here is the iframesandPaths.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <title>Iframes and Paths in Html</title>   </head>   <body>     <!-- Ifame in Html -->     <iframe src="ClassesAndIds.html" style="height:505px;width:300px;" title="Iframe"></iframe>     <!-- File Paths in Html -->     <img src="park.jpg" alt="park in current folder">     <img src="images/park.jpg" alt="park in images folder">     <img src="/images/park.jpg" alt="park in root of current web">     <img src="../images/park.jpg" alt="park in one level up folder">   </body> </html> Web view of Html: Here is the Video:
Post a Comment
Read more

Classes And IDs

Classes and IDs | HTML: Classes and IDs both are using to access the particular element in CSS or in JS. Here is the ClassesAndIds.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <style>       .class {         font-size: 20px;         background-color: yellow;       }       #id001 {         font-size: 30px;         background-color: orange;       }       #id007 {         font-size: 40px;         background-color: lightblue;       }     </style>     <title>Classes and Ids</title>   </head>   <body>     <!-- Classes -->     <div class="class">       <h3>Class</h3>       <p>bla bla bla<...
Post a Comment
Read more

Lists

Lists | HTML: Lists are presenting the items with or without order. Lists:           1. Ordered List        2. Unordered List Here is the list.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <title>Lists in Html</title>   </head>   <body>     <h3>Here is the details of lists in Html</h3>     <!-- Ordered Lists -->     <ol type="1">       <li>a</li>       <li>b</li>       <li><img src="images/park.jpg" alt="park"></li>     </ol>     <!-- Unordered Lists -->     <ul style="list-style-type:none" >       <li>1</li>       <li>2</li>       <li><a href="https://www.who.int/">WHO</a></li...
Post a Comment
Read more

Description Lists

Description Lists: Description lists similar to lists but providing additional description to every item. Here is descriptionlists.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <title>Description Lists in Html</title>   </head>   <body>     <h3>Here is the Description List</h3>     <dl>       <dt>1</dt>       <dd>One</dd>       <dt>2</dt>       <dd>Two</dd>       <dt>3</dt>       <dd>Three</dd>     </dl>   </body> </html> Web view in Html: Here is the Video:
Post a Comment
Read more

Block and Inline

Block and Inline | HTML: Block elements are occupies entire width of web page and they are begins with new line but Inline elements are occupies required width and they are not begin with new line. Here is the blockandinline.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <title>Block and Inline Elements in Html</title>   </head>   <body style="background-color:#FFFFFF;font-size:30px;">     <h3>Here is the Details of Block and Inline Elements</h3>     <!-- Block Element -->    <div style="color:green;">Here is the examples :      h1 to h6, p, table, tr,<p>hello</p> th, td, ol, ul and li</div>    <!-- Inline Elements -->    <p>Here is the examples : <span style="color:orange;">a, img,      b, i, sub, sup,      strong, abbr, acronym, q, and map </sp...
Post a Comment
Read more

Images

Images | HTML: Images can impact more than words. So it is easy to deliver the information.  Here is the images.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <link rel="stylesheet" href="css/stylesheet.css">     <title>Images in Html</title>   </head>   <body>     <!-- pictures -->     <picture>       <source media="(min-width: 525px)" srcset="images/nature.jpg">       <source media="(min-width: 350px)" srcset="images/lights.jpg">         <img src="images/park.jpg" alt="flowers">     </picture>   </body> </html> Web view of Html: Here is the Video:
Post a Comment
Read more

Maps

Maps | HTML: Maps are well designed of information. They are easy to understand by viewers. Here is the Maps.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <style>       /* background image */       body {         background-image : url('images/people.jpg');         background-repeat: no-repeat;         background-size : cover;         background-attachment : fixed;       }     </style>     <title>Images in Html</title>   </head>   <body >     <!-- maps -->     <img src="images/covid19.jpg" alt="corona" usemap="#coronamap">     <map name="coronamap">       <area shape="circle" coords="389,180,125" href="https://en.wikipedia.org/wiki/Coronavirus" alt="corona virus">    ...
Post a Comment
Read more

Links

Links | HTML: Links are useful to move to other web pages or particular position in same page. Links :   1. links   2. color links   3. link bookmarks. Here is the links.html:   <!DOCTYPE html>   <html lang="en" dir="ltr">     <head>        <style>         a:link {           color : green;         }         a: visited {           color : orange;         }         a:hover {           color : pink;         }         a:active {           color : yellow;         }       </style>       <title>Links in Html</title>     </head>     <body>       <!-- color link...
Post a Comment
Read more

Quotations

Quotations | HTML: Quotations gives special meaning to normal text. List of Quotations:   1. blockquote   2. quote   3. abbreviation   4. bi-directional override   5. citation   6. address Here is the quotations.html:   <!DOCTYPE html>   <html lang="en" dir="ltr">     <head>       <link rel="stylesheet" href="css/stylesheet.css">       <title>Quotations in Html</title>     </head>     <body>       <p>Here is the blockquote:</p>       <blockquote cite="https://en.wikipedia.org/wiki/World_Health_Organization">         To provide leadership, strengthen governance         and foster partnership and collaboration with countries,         the United Nations system,         and other stakeholders in order to fulfill t...
Post a Comment
Read more

Formatting

Formatting | HTML: Formatting means adding special format to normal text. List of Formats:   1. bold text   2. italic text   3. importent text   4. emphasized text   5. marked text   6. deleted text   7. inserted text   8. smaller text Here is the Formatting.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <link rel="stylesheet" href="css/stylesheet.css">     <title>Text formatting in Html</title>   </head>   <body>     <p>Here is the <b>Bold tag</b></p>     <p>Here is the <i>italic tag</i></p>     <p>Here is the <strong>importent tag</strong></p>     <p>Here is the <em>emphasized tag</em></p>     <p>Here is the <mark>mark tag</mark></p>     <p>Here is the <del...
Post a Comment
Read more

Tables

Tables | HTML: Tables are used to organize the data in well understanding manner. Here is the tables.html: <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <title>Tables in Html</title>   </head>   <body>     <table border="5px" bordercolor="green" width="50%">       <caption><h3><b>Students Details</b></h3></caption>       <tr>         <th>Id</th>         <th>Name</th>         <th>Branch</th>       </tr>       <tr>         <td>001</td>         <td>Abc</td>         <td>25</td>       </tr>     </table>   </body> </html> Web view of Html: H...
Post a Comment
Read more

Subscript and Superscript

Subscript and Superscript | HTML: Subscript means script or text below the normal line and Superscript means script or text above the normal line. Here is the SubandSup.html: <!-- Subscript and Superscript in Html --> <!DOCTYPE html> <html lang="en" dir="ltr">   <head>     <title>Subscript and Superscript</title>   </head>   <body>     <h1>Here is the <sub>Subscript</sub></h1>     <h1>Here is the <sup>Superscript</sup></h1>   </body> </html> Web view of Html: Here is the Video:
Post a Comment
Read more

Attributes in Html

Attributes | HTML:   Attributes are using to make elements more reliable and usable. Syntax:                  <element attribute_name="attribute_value">content</element> List of few Attributes:   1. lang Attribute   2. dir Attribute   3. title Attribute   4. src Attribute   5. alt Attribute   6. width and height Attributes   7. id Attribute   8. href Attribute Here is the Attributes.html:   <!DOCTYPE html>   <html lang="en" dir="ltr">     <head>       <title>Attributes in Html</title>     </head>     <body>       <h1 title = "Hello Friends">Title Attribue</h1>       <img src = "flowers.jpeg" alt = "flowers" width="300" height="300" >       <img src="" alt="flowers">       <h1 id = "111">Id att...
Post a Comment
Read more

Introduction

Introduction | HTML:  HTML stands for Hyper Text Markup Language. It is used for creating Web pages. It describes the structure of a Web page and consists of a series of elements. Here is the introOfHtml.html file: <html>   <head>     <title>Intro of HTML</title>   </head>   <body>     <h1>Win the World with Love</h1>   </body> </html> Web view of Html: <!-- <html> element is the root element of an HTML. <body> element is the visible content in Web browser, Content having headings,paragraphs,images, etc. Few more elements will discus in upcoming videos. What is an element in HTMl? Every element having two tags, one is start tag and other one is end tag and in between of both tags Content exists. Examaple : <you> content </you>, here you is tag name. --> Here is the Video:
Post a Comment
Read more

Headings, Paragraphs and Images

Headings, Paragraphs and Images | HTML:   Using Headings in HTML with h1,h2,h3,h4,h5,h6, Paragraphs with p and Images with img. Here is the HeadingsParagraphsImages.html: <!DOCTYPE html> <html>   <head>     <title>Headings,Paragraphs and Images</title>   </head>   <body>   <h1>Here is the details of Headings</h1>     <h1>Headings with h1</h1>     <h2>Headings with h2</h2>     <h3>Headings with h3</h3>     <h4>Headings with h4</h4>     <h5>Headings with h5</h5>     <h6>Headings with h6</h6>   <h1>Here is the details of Paragraphs</h1>     <p>this tag is used for Paragraphs and you can <br>       break Paragraphs wiht br tag</p>   <h1>Here is the deatails of Images</h1>     ...
Post a Comment
Read more