WT Sample Programs/Lab Manual

on
https://drive.google.com/file/d/1KdC8noLAOAahrGKvXHn1wTMMwsCnbFXs/view?usp=sharing https://drive.google.com/file/d/1RioH4gPWXm1_0kCEdlwZ9l6Yjf3dVX-Z/view?usp=sharing https://drive.google.com/file/d/19J1isuQwQcC32Toijmhgg7yYqHjPdQvr/view?usp=sharing











The document, titled "WT Sample Programs.pdf", contains sample programs for a Web Technologies lab from the Department of Information Technology at SRI INDU COLLEGE OF ENGINEERING AND TECHNOLOGY.

The general procedure for running the HTML programs is:
  1. Go to start -> all program -> accessories -> notepad.
  2. Type the HTML code.
  3. Go to file -> save -> save the file with the HTML extension.
  4. Run the HTML code using a browser.
Here is a summary of the sample programs:

1. Design a page using all attributes of the Font tag
  • Goal: Design a page with a suitable background color, text color, and the title "My First Web Page" using all attributes of the Font tag.
  • HTML: Sets the background color to green (bgcolor="green") and displays "Welcome to Web Tech Lab, SICET..." in yellow, size 16, and Arial face.
  • Title: My first webpage.
2. Create a HTML document using alignment attributes of the Paragraph tag
  • Goal: Create a document giving details of Name, Age, Address, Phone, Register Number, and Class aligned in proper order using the alignment attributes of the Paragraph tag.
  • HTML:
    • Name (SRI INDU) and Age (26) are aligned to the center (align="center").
    • Address (Ibrahimpatnam Post, Hyderabad) and Phone (1234567890) are aligned to the right (align="right").
    • Reg No (23D41A1201) and Class (IT III Year II Sem) are aligned to the left (align="left").
  • Title: program02.
3. Write a HTML code to create a web page with pink color background and display a moving message in red color
  • Goal: Create a web page with a pink background and a moving message in red.
  • HTML: Sets the background color to pink (bgcolor="pink"), the font color to red, and uses the <marquee direction="left"> tag to display the moving message "Welcome to WT Lab, IT".
  • Title: program 03.
4. Create a static web page that defines all text formatting tags of HTML in tabular format
  • Goal: Define all HTML text formatting tags in a table.
  • Table Content: The table has a caption "Text Formatting Tags" at the top, and two columns: "HTMLTag" and "Output". The tags listed include:
    • <B>: Output is Bold.
    • <I>: Output is Italic.
    • <U>: Output is Underline.
    • <EM>: Output is Emphasis.
    • <STRONG>: Output is STRONG.
    • <TELETYPE>: Output is TELETYPE.
    • <CITE>: Output is Citation.
    • <STRIKE>: Output is ~~strike-throughtext~~.
    • <BIG>: Output is textinabigfont.
    • <SMALL>: Output is textinasmallfont.
    • <SUB>: Output is a subscripted 'b' (a~b~).
    • <SUP>: Output is a superscripted 'b' (a^b^).
5. Write HTML code to create a Web Page that contains an Image at its centre
  • Goal: Create a web page with an image at the center.
  • HTML: Uses the <img> tag with align="middle" inside a <center> tag. The image source is a local file (src="C:\\Users\\System 2\\Desktop\\HTML PGMS\\PIC1.PNG"), and the height and width are both set to 200.
  • Title: program05.
6. Create a web page with an appropriate image towards the left hand side of the page, when user clicks on the image another web page should open
  • Goal: Display an image on the left side of the page that acts as a hyperlink to another page.
  • HTML: Uses an anchor tag (<a>) with href="p1.html" wrapping an image tag (<img>). The image is aligned to the left (align="left"), with height and width set to 200.
  • Title: program05.
7. Create a web Pages using Anchor tag with its attributes for external links
  • Goal: Use the Anchor tag attributes for external links. (The provided code snippet demonstrates internal navigation using anchor names).
  • HTML: Defines internal anchors with names name="home", name="link1", and name="link2". It creates links to these anchors: "History" links to #link1, "Html version" links to #link2, and a "home" link goes back to #home.
  • Title: program8.
8. Create a webpage, showing an ordered list of all second semester courses
  • Goal: Show an ordered list of all second semester courses.
  • HTML:
    • Includes an unordered list (<ul>) of engineering departments (Computer science and Engg, Electronics and communication, Civil Engg, Mechanical Engg).
    • Includes an ordered list (<ol>) of courses (English, Maths-2, Digital Electronics & computer fundamentals, Basic Webdesignlab, multimedialab, digitalelectronics).
  • Title: program11.
9. Create a webpage which divides the page in three frames and place the audio and video clips in 3 frames respectively
  • Goal: Divide the page into three frames and place audio and video clips in them.
  • HTML: Uses a main frameset (<frameset cols="*,*">) to divide the page vertically into two columns.
    • The left frame displays a video file (src="ARRRRRHorse.mp4-2.mp4").
    • The right frame is further divided horizontally into two rows (<frameset rows="50%,50%">).
      • The top-right frame displays an audio file (src="Horse-neighing.mp3").
      • The bottom-right frame displays the same video file as the left frame (src="ARRRRRHorse.mp4-2.mp4").
10. Create employee registration web page using HTML form objects
  • Goal: Create an Employee Registration Form using HTML form objects.
  • HTML Form Objects Included:
    • Radio Buttons: For Salutation (Mr., Mrs., Ms., with Mr. checked by default).
    • Text Inputs: For First Name, Last Name, Mail Address 1, Mail Address 2, City, Zip, E-Mail, and Mobile.
    • Dropdown/Select: For State (options: Gujarat, Maharastra, Karnataka, Delhi).
    • File Input: For Upload Photo.
    • Checkboxes: For Languages known (Gujarati, Hindi, English are checked by default, and Marathi is an option).
    • Textarea: For Additional Information.
    • Submit and Reset Buttons.
  • Header: Displays an image and the title "Employee Registration Form" in red with size +3.

Comments

Post a Comment