Practical no: - 01 - Use of Basic Tags AIM: - 1A) Design a web page using different text formatting tags. DESCRIPTION: - Formatting Text with HTML HTML provides several tags that you can use to make some text on your web pages to appear differently than normal text, for example, you can use the tag <b> to make the text bold, tag <i> to make the text italic, tag <mark> to highlight the text, tag <code> to display a fragment of computer code, tags <ins> and <del> for marking editorial insertions and deletio ns, and more. Formatting elements were designed to display special types of text: • <b> - Bold text • <strong> - Important text • <i> - Italic text • <em> - Emphasized text • <mark> - Marked text • <small> - Smaller text • <del> - Deleted text • <ins> - Inserted text • <sub> - Subscript text • <sup> - Superscript text FILE NAME - FORMAT.HTML CODE: <!DOCTYPE html> <html> <head> <title>different text formatting tags</title> </head> <body> <hgroup> <h1>heading1</h1> <h2>heading2</h2> </hgroup> <p>the gardener poem says,...</p> <blockquote> silly gardener!summer goes<br> and winter comes with pinching<br> when in the garden bare and brown<br> you must lay your barrow down<br> </blockquote><br> <b><i>hello friends</i></b> h<sub>2</sub>so<sub>4</su b><br> (a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br> h<sub>2</sub>o<br> <kbd>hello</kbd><br> <code>hello</code><br> <samp>hello</samp><br><br> <pre>hello friends how are you? I am fine and I hope you will also fine. </pre><br><br> </body> </html> OUTPUT AIM: - 1B Design a web page with links to different pages and allow navigation between web pages. Create page one.html having a link to two.html, create two.html having a link to three.html. Print “Welcome to Hyperlinks” in three.html. DESCRIPTION: - Creating Links in HTML A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world. A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on. CODE: - ONE.HTML <!DO CTYPE html> <html> <haed> <title>One</title> </head> <body> <a href="two.html">Go to Two.html</a> </body> </html> TWO.HTML <!DOCTYPE html> <hrtml> <head> <title>Two</title> </head> <body> Welcome to two.html. <br> <a href="three.html">Go to three.html</a> </body> </html> THREE.HTML <!DOCTYPE html> <html> <head> <title>Three</title> </head> <body> Welcome to Hyperlinks. </body> </html> OUTPUT AIM : - 1C Design a web page that automatically redirects the user to another page. <!DOCTYPE html> <html> <head> <title>HTML Meta Tag</title> <meta http - equiv = "refresh" content = "2; url = https://www.youtube.com/" /> </head> <body> <p>Hello HTML5!</p> </body> </html> OUTPUT Practical no: - 2 Use of CSS AIM: - 2A - Design a web page demonstrating different stylesheet types. DESCRIPTION: - What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more! CSS can be added to HTML documents in 3 ways: • Inline - by usin g the style attribute inside HTML elements • Internal - by using a <style> element in the <head> section • External - by using a <link> element to link to an external CSS file CODE: - FILE NAME: - INLINE.HTML <!DOCTYPE html> <html> <body> <h1 style=" color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p> </body> </html> OUTPUT FILE NAME: - ONE.CSS .bg{background - color:pink} FILE NAME: - MAIN.HTML <!DOCTYPE html> <html> <head> <title>External and Internal</title> <style type="text/css"> .fruits{color:blue} .vegetables{color:yellow} </style> <link rel="stylesheet" type="text/css" href="one.css"> </head> <body> <ul style="list - style - type:filled square"> <li class="bg" style="color:red">fruits</li> <ol style="list - style - type :upper - roman"> <li class="fruits">banana</li> <li class="fruits">apple</li> <li class="fruits">mango</li> </ol> </ul> <ol style="list - style - type:lower - alpha"> <li class="bg" style="color:red">vegetables</li> <ol class="grp1" start="4" style="list - style - type:uppper - roman"> <li class="vegetables">tomato</li> <li class="vegetables">potato</li> <li class="vegetables">carrot</li> </ol> </ol> </body> </html> AIM: - 2 B - Design a web page demonstrating grouping selecto rs. FILENAME: - SELECTORS.HTML CODE: - <!DOCTYPE html> <html> <head> <style> article, p, img { display: block; margin: auto; text - align: center; border - bottom: double orange; } </style> </head> <body> <article>Demo Text</article> <p>This is demo text.</p> <br/> <img src="css.jpg"> </body> </html> PRACTICAL NO: - 3 - Layout and Media AIM: - 3A - Design a web page demonstrating different semantics. FILE NAME: - Semantic.HTML CODE: - <!DOCTYPE html> <html> <body> <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </sect ion> <section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well - known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishme nt of WWF.</p> </section> article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open - source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Micros oft Edge replaced Internet Explorer.</p> </article> <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript </a> | <a href="/jquery/">jQuery</a> </nav> <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting at tractions, international pavilions, award - winning fireworks and seasonal special events.</p> </aside> <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure> </body> </html> OUTPUT AIM: - 3B - Design a web page embedding image, audio and video. What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. FILE NAME: - EMBED.HTML CODE: - <!DOCTYPE html> <html> <body> <img src="c: \ sunset.jpg" alt="sunset" style="width:200px;height:200px;"> <audio controls> <source src="c: \ sound.ogg" type="audio/ogg"> <source src="c: \ sound.mp3" type="audio/mpeg"> Your brow ser does not support the audio element. </audio> <video width="400" controls> <source src="c: \ small.mp4" type="video/mp4"> <source src="c: \ small.ogg" type="video/ogg"> Your browser does not support HTML video. </video> </body> </html> OUTPUT AIM: - 3C - Design a web page with Imagemaps. FILE NAME: - IMAGEMAP.HTML CODE: - <!DOCTYPE html> <html> <head> <title>ImageMap</title> </head> <body> <map name="m1"> <area shape="poly" coords="355,367,390,262,424,367" href="https://www.youtube.com"> <area shape ="circle" coords="305,216,44" href="https://www.facebook.com/"> <area shape="circle" coords="496,213,38" href="https://www.instagram.com/accounts/login"> <area shape="rectangle" coords="278,407,473,443" href="three.html"> </map> <img src="face.jpg" height= 700 widht=700 usemap="#m1"> </body> </html> <!DOCTYPE html> FILE NAME: - THREE.HTML <hrtml> <head> <title>Three</title> </head> <body> Welcome to Hyperlinks. </body> </html> OUTPUT