NATARAJA MURTHY

Posts

Showing posts with the label Html

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:

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>Personal Info : </legend> <label for=&quo

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

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> </head> <body> <hr> <img src="park.jpg" alt="park"> <p>Thank you for Watching...</p> </body> </html>

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>  <p>Here is the way to use JavaScript</p><br>  <script> function oursScript() { document.getElementById("script001").innerHTML = "First JavaScript!"; } </script> <br> <button type="button" onclick="oursScript()">Click</button><br> <p id="script001"></p> <br>  <script src="js/javascript.

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>  <iframe src="ClassesAndIds.html" style="height:505px;width:300px;" title="Iframe"></iframe>  <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:

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>  <div class="class"> <h3>Class</h3> <p>bla bla bla</p> </div> <span class="class">bla bla bla</span>  <div id="id001"> <h3>Id</h3> <p>bla bla bla</p> </div> <span id="id007">bla bla b

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>  <ol type="1"> <li>a</li> <li>b</li> <li><img src="images/park.jpg" alt="park"></li> </ol>  <ul style="list-style-type:none" > <li>1</li> <li>2</li> <li><a href="https://www.who.int/">WHO</a></li> </ul> </body> </html> Web view of Html: Here is the Video:

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:

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>  <div style="color:green;">Here is the examples : h1 to h6, p, table, tr,<p>hello</p> th, td, ol, ul and li</div>  <p>Here is the examples : <span style="color:orange;">a, img, b, i, sub, sup, strong, abbr, acronym, q, and map </span></p> </body> </html> Web view of Html: Here is t

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>  <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:

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 >  <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"> </map> </body> </html> Web view of Html: Here is the video:

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>   <p><a href="#A1">go to Absolute URL</a></p> <hr>  <h1>Here is the Relative URL, which is in local folder.</h1> <a href="ima

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 the mandate of WHO in advancing the global health agenda. </blockquote>. <p>Here is the <q>Build a future where people

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>delete tag</del></p> <p>Here is the <ins>inserted tag</ins><

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: Here is the Video:

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:  <!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:

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 attribute in html</h1> <a href="https://natarajamurthy.blogspot.com/">blogspot&

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:  Here is the Video:

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> <img src="flowers.jpeg"> </body> </html> Web view of Html: Here is the Video: