Download to read offline
More Related Content
Similar to web programming & scripting 2
web programming & scripting 2
- 1.
- 2.
- 3. Lab Session 2 1.Tables Layouts Frames- 1.1. Table creation & Layout 1.2. Frame Creation & Layout 2. Multimedia- Videos Audio & Animation 3. CSS-Cascading Style Sheets- Basics Creation & Use Swapnali Pawar
- 4. 1.1. Table creation& Layout Table- HTML tables allow web developers to arrange data into rows and columns <table> <thead> <th>Roll No</th> <th>Student Name</th> <th>Marks</th> </thead> <tr> <td>101</td> <td>Swapnali</td> <td>76%</td> </tr> </table> Roll No Student Name Marks 101 Swapnali 76% Swapnali Pawar
- 5. 1.2. Frame Creation &Layout Swapnali Pawar
- 6. FORM TAG- <form class=“”action=“” method=“”> </form> INPUT TAG In form tag to collect end user input we use input tag <input type=“” name=“” value=“”> Type attribute used to specify type of input. Some types of input are- • Text • Email • submit • Password • color • Checkbox • radio Name- represents name of Tag Value- represents its default value HTML Forms Creation Swapnali Pawar
- 7. <input type=“text” name=“username” placeholder=“Enteruser Name”> <input type=“email” name=“MailId” value=“”> <input type=“password” name=“pwd” value=“”> <input type=“radio” name=“True” value=“”> <input type=“checkbox” name=“terms&Cond” > <input type=“text” name=“username” value=“Enter user Name”> <input type=“submit” name=“btnsub” value=“Submit”> Important Form Input Types Swapnali Pawar
- 8. <html> <head> <title>Swapnali</title> </head> <body> <center> <h1 style="color:red;">Government CollegeOf Engineering Karad</h1> <hr style="border:solid;"> <h1>User Login Form</h1> <label for=“name”>Enter Name :</label> <input id =“name” type=“text” name=“username” > <br> <br> <label for=“pass”>Enter Password : </label> <input id=“pass” type=password name=“pwd” > <br> <br> <input type=submit name=“btnsub” value=Login> </center> <hr style="border:solid;"> </body> </html> Form Example Swapnali Pawar
- 9.
- 10. 1.2. Frame Creation& Layout Use the <iframe> tag to embed another document within the current HTML document: <iframe src=“Login.html"> </iframe> Swapnali Pawar
- 11.
- 12. Output - iframeExample Swapnali Pawar
- 13. 2. Multimedia- VideosAudio & Animation Videos <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Swapnali Pawar
- 14. Browser MP4 WebMOgg Edge YES YES YES Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES There are three supported video formats in HTML: MP4, WebM, and OGG. Swapnali Pawar
- 15. ATTRIBUTE VALUE DESCRIPTION autoplayautoplay Specifies that the video will start playing as soon as it is ready controls controls Specifies that video controls should be displayed (such as a play/pause button etc). height pixels Sets the height of the video player loop loop Specifies that the video will start over again, every time it is finished muted muted Specifies that the audio output of the video should be muted poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button preload auto metadata none Specifies if and how the author thinks the video should be loaded when the page loads src URL Specifies the URL of the video file width pixels Sets the width of the video player Optional Attributes Swapnali Pawar
- 16. Audio <audio controls> <source src="horse.ogg"type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> Swapnali Pawar
- 17. Browser MP3 WAVOGG Edge / IE YES YES* YES* Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES There are three supported audio formats in HTML: MP3, WAV, and OGG. Audio Format and Browser Support Swapnali Pawar
- 18. Attribute Value Description autoplayautoplay Specifies that the audio will start playing as soon as it is ready controls controls Specifies that audio controls should be displayed (such as a play/pause button etc) loop loop Specifies that the audio will start over again, every time it is finished muted muted Specifies that the audio output should be muted preload auto metadata none Specifies if and how the author thinks the audio should be loaded when the page loads src URL Specifies the URL of the audio file Attributes Swapnali Pawar
- 19.
- 20. 3. CSS-Cascading StyleSheets • CSS is the language we use to style an HTML document. • CSS describes how HTML elements should be displayed. Swapnali Pawar
- 21.
- 22. 3. CSS-Cascading StyleSheets Inline Styles External Styles Internal / Embedded Styles Swapnali Pawar
- 23. Inline Styles <body style=“background-color:blue;” > ------------ ------------ </body> <img style=“background-color: blue;” > ------------ ------------ </img> Swapnali Pawar
- 24. Internal / EmbeddedStyles <head> <title>MySite</Title> <style> body { background-color:red; } hr { border-style:solid; } </style> </head> Swapnali Pawar
- 25. body { background-color: lightblue; } h1 { color: white; text-align:center; } p { font-family: verdana; font-size: 20px; } External Styles 1. Create new folder CSS 2. Inside that create styles.css file 3. In html add < link rel=“stylesheet” href = “styles.css” > Swapnali Pawar
- 26. Student Activity Experiment 2- ToCreate Webpage using Link Button & Map Tags Swapnali Pawar
- 27.