Scribd
Upload
9 views32 pages

Web Designing Workshop

Web designing unit 2

Uploaded by

rajlavish3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
9 views32 pages

Web Designing Workshop

Web designing unit 2

Uploaded by

rajlavish3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
“WEB DESIGNING WORKSHOP” UsING ut & JAVASCRIPT Submitted for the partial fulfillment of the requirements for the degree of BACHELOR OF TECHNOLOGY (BTECH-CSE) 2"! YEAR SUBMITTED BY: Name: Roll No. (Batch: 2023-27) Under the Supervision of Mr. SHTVAM SAINT Assistant Professor DEV BHOOMI GROUP OF INSTITUTIONS FACULTY OF ENGINEERING SAHARANPUR, UTTAR PRADESH “WEB DE: ACKNOWLEDGEMENT | express my sincere gratitude to my supervision Mr. SHIVAM SAINI, DEV BHOOMI GROUP OF INSTITUTIONS, FACULTY OF ENGINEERING SAHARANPUR, for his constant support and valuable suggestion without which the successful completion of this Workshop file would not have been possible, 1 would also like to thanks our HOD and all faculty members of the DEV BHOOMI GROUP OF INSTITUTIONS, FACULTY OF ENGINEERING SAHARANPUR for their valuable cooperation and support. Name: BTECH(CSE): 24 year Web Designing Workshop TABLE OF CONTENT (SECTION-1) TABLE ne OF CONTENT (SECTION LAB REQUIREMENTS HARDWARE REQUIREMENTS: Processor: Intel Core i3 or equivalent. RAM: 8GB or higher recommended, Storage: Minimum 256GB SSD for better performance. Display: 15-inch monitor or larger for better workspace. Graphics Card: Integrated graphics are sufficient. Extemal Hard Drive: For backups and additional storage. Internet connectivity. Operating System : Windows 10 SOFTWARE REQUIREMENTS v v v Visual Studio Code Google Chrome Web Development Tools: Text Editor, Version Control Integrated Development Environment (IDE) Web Browsers FTP Client for transferring files to web servers PRACTICAL 1. Introduction to HTML. Create a basic HTML file Hyper Text Markup Language is a set of logical codes (markup) in parentheses that constitute the appearance of a web document and the information it contains. itis a language for creating static web pages. It specifies how the contents are to be presented on the web page. HTMLis not a case sensitive language so; HTML and html both are same. HTML is a text document with formatting codes and this document has the suffix " htm!” or “.htm”. Basic HTML Document ‘An element called HTML surrounds the whole document. This element contains two sub-elements, HEAD and BODY. These elements are required to form any HTML document. The First Page Hello World Just write down above code in the notepad editor and save this file with the extension of -html or htm and then double click on that file you will get output on the default web browser. =~ a a co e 2a $e Following are more sub tags of has sub-elements that define header material: document title. The title of your document is what appears in a web browser's Favourite ‘or Bookmark list. Search engines on the Internet use the document's title for indexing purposes. ‘ ‘ can be used to record the document's location in the form of a URL. - indicates to the browser that the document is an index document. This is used only if the document is on a server that does indexing. ‘ indicates a relationship between this document and some other object on the Web. provides information such as the page’s keywords and description that appears in HTTP headers. ‘ the remaining HTML elements are contained within these tags. Specification Table with Hours and Marks Unit No. Unit Title Teaching Hours Distribution of Theory Marks R Level U Level A Level Total Marks I Introduction to Internet Technology 2 4 4 0 8 II Basics of HTML & CSS 6
0 <7D>
2 6 8 III Active Server Pages 3.0 6 4 8 0 12
IV Server Side Coding with VBScript and XML <7D>
8 2 4 8 14 V ASP Objects & Components 10 4 4 6 14 VI Accessing database with ASP & ADO 10 4 4 6 14 Total 42 18 26 26 70 OUTPUT ‘Active Server Pages 30 6 +(e TV _ Server Side Coding with VBScript and XML 8 24 8 4 VASP Objects & Components 10 712 |e 7 VI Acceming database with ASP & ADO 10 7ts Le 1 Total a | | % > «| 7 PRACTICAL 3 Create a static 1e which defines all text form: HTML in tabular format Text Formatting Tags HTML Tag Output normal text hello world Font & its attributes hello world slt;Bagt; Bold ait;Tagts Italic elt;Vagts Underline elt; BMEgt ; Emphasis 61t;STRONGEgt ; STRONG alt; TELETYPEEgt; TELETYPE elt;CITEEgt; Citation é1t; STRIKEEgt; strike-through text elt; BIGEgt; text in a big font 61t;SMALL> text in a small font alt; SUBégt a b alt; SUPégt; a b OUTPUT list tags of HTML HTML List: Ordered, Unordered & Definition List
Following is the list of proposed student activities like:
  • Develop programs related with unit vice topics in computer laboratory.
    • Develop any module of to be useful in real life application.
    List of Software/Learning Websites <1i>ASP Tutorial - W3Schools
    [Link]/asp
    [Link] - Knowledgebase <1i>HIML Tutorial - W3Schools
    www. w3schools .com/html <1i>CSS Tutorial
    www. csstutorial net <1i>cu>veScript Tutorial - Tutorials Point
    www. tutorialspoint .com/vbscript/[Link] <1i>AD0 Tutorial - W3Schools
    www. w3schools .com/ADO/de fault .asp
    HTML
    Hyper Text Markup Language
    XML
    eXtensible Markup Language
    HTML List: Ordered,Unordered & Definition List Following isthe list of proposed student activities lke 1. Develop programs related with unit vice topics in computer laboratory: 2 Develop any module of tobe useful in real life application. 3. Multimedia presentation of module developed by students, List of Software/Learning Websites '* ASP Tutorial - W3Schools PRACTICAL 5 Create webpage to include image using HTML tag PRACTICAL 6 Create employee regis webpage using HTML form objects Employee Registration Form Mr. Ms. First Name cte> Last Name Mail Addressi Mail Address2 ctr> city str> State Maharastra Delhi Zips/ta> Upload Photo cte> E-Mail ste> Mobile Languages known Gujarati n placeholder="Last Name"> 2p> photo> email size=30> mob placeholder="+91"> 10 Hindi English Marathi str> Additional Information énbsp; OUTPUT a Employee Registration Form @Mr ©Mrs. ©Ms. First Name FirstName Last Name LastName ‘Mail Address! Mail Address2 City State Gujarat = Zip Upload Photo (Browse. | No fie selected E-Mail Mobile 3 Languagesknown Gujarati Hindi 9 PROGRAM 1 : Define the basic Structure of HTML. ALGORITHM : . Start by defining the document type declaration (). . Create the element, which contains the entire HTML document. . Inside the element, create the element. Inside the element, add metadata such as the of the document and any tags for specifying character encoding or other information. Outside of the element, create the element. 6. Inside the element, add the main content of your webpage, including text, images, links, Pepe a CODE :

    This is a basic HTML page.

    OUTPUT 1: This is a basic HTML page. PROGRAM 2: Implement the Heading Element in HTML. ALGORITHM : 1, Start: Start the algorithm. 2, Define the Heading Level: Decide on the level of the heading you want to use (hI, h2, h3, ..., h6). 3. Open Tag: Write the opening tag for the heading element with the chosen level (¢.g., , , etc.). 4, Content: Write the content or text that you want to display as the heading. 5. Close Tag: Write the closing tag for the heading element (c.g., , , etc.). 6. End: End the algorithm. CODE : Heading Tags Example This is Heading 1

    This is Heading 2

    " ’
    This is Heading 6
    OUTPUT 2: This is heading 1 This is heading 2 This is heading 3 This is heading 4 ‘This is heading 5 Ths beading 6 PROGRAM 3 : Write a program to insert image in HTML. ALGORITHM : © Prepare the Image: Make sure you have the image file you want to insert into your HTML document saved in an acces your computer or server. Open an HTML File: If you don't already have an HTML file, create one using a text editor like Notepad or any code editor of your choice. Save it with a .html extension. Write the HTML Structure:To insert an image into an HTML document, you can use the tag. Here's a simple algorithm to guide you through the procs ible location on Prepare the Image: Make sure you have the image file you want to insert into your HTML document saved in an accessible location on your computer or server. Open an HTML File: If you don't already have an HTML file, create one using a text editor like Notepad or any code editor of your choice. Save it with a html extension. Write the HTML Structure Insert the Image: Within the tags, insert the tag where you want the image to appear. The tag requires two essential attributes: sre and alt. CODE 2:

    HTML Image

    Trulli OUTPUT 3: PROGRAM 4 : Write a program for changing Background color in html. CODE : This is a heading

    This is a paragraph.

    OUTPUT 4: PROGRAM 5: Write a program to implement hyperlink in htm! file. CODE :

    Absolute URLs

    W3C

    Google

    Relative URLs

    HTML Images

    CSS Tutorial

    OUTPUT 5: Absolute URLs w3c Google HTML Image CSS Tutorial PROGRAM 6 : Write a program to Create a Table in HTML. CODE:

    A basic HTML table

    Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico

    To understand the example better, we have added borders to the table.

    OUTPUT 6: A basic HTML table ‘Company ‘Contact ‘Country [Alfreds Funerkaste [Maria Anders Germany [Centro comercial Moctezuma [Francisco Chang [Mexico To understand the example better, we have added borders to the table. PROGRAM 7: Write a program to implement Lists in HTML. CODE: List Example

    Unordered List:

  • ltem 1
  • ltem 2
  • ttem 3

    • Ordered List:

    1. ltem 1
    2. ltem 2
    3. ttem 3
    OUTPUT 7: Unordered List: © Item1 © Item2 * Item3 Ordered List: L.ltem1 2. Item 2 3.Item3 PROGRAM 8 : How to implement Frameset in HTML. CODE: Scaler Topics <body>The browser you are working does not support frames.</body> OUTPUT 8: too Tp nn —_— ce HTML Tags "gs 1 \ Iframes in HTML es wbwne ward PROGRAM 9 : Write a program to Create Form in HTML CODE: . . Create a Registration form . |. . The following tags are used in this Html code for creating the Registration fo rm:





    You might also like