Download Web Designing Practical file and more Study notes Web Design and Development in PDF only on Docsity!

INSTITUTE OF MANAGEMENT & TECHNOLOGY

[Approved by AICTE & Affiliated to M.D. University, Rohtak] Practical File

Web Designing

(WD- 206 ) BCA 2

nd

YEAR ( 4

th

SEM)

Submitted To: Submitted By:

Sushil kumar Chhabra Amit kumar

Signature......................

INDEX

S.No

LIST OF EXPERIMENTS DATE SIGN.

1 To^ study^ the^ overview^ of^ HTML. 2 To^ create a^ mark^ sheet^ using^ various^ HTML^ Table^ Tags. 3 To^ make^ an^ application^ letter^ using^ various^ HTML Tags. 4 To^ make^ list^ using^ list^ html^ tags. 5 To^ insert^ images^ &^ links^ in^ a^ document^ using^ various HTML Tags. 6 To make Google Signup Form. 7 To^ make^ Frames^ in^ Website. 8 To^ Create^ a^ resume^ using various^ CSS^ Tags.

Experiment No-

AIM:- To study the overview of HTML language. THEORY:- Hypertext Markup Language (HTML) is the language of World Wide Web. It helps one in learning to create one’s own web pages with colour, page and text formatting, hypertext links and images. An HTML file is what a web browser uses to generate a web page. The World Wide Web is nothing but a vast collection of HTML files residing on hard drives of computers spread over the world, and a transport protocol for these files from computer to computer. These HTML files are simply text files- files that can be easily read. HTML is designed to specify the logical organization of a document, with important hypertext extensions. HTML means: HYPER TEXT: TEXT used to link a Web page. MARKUP: It means highlighting Text either by underlining or displaying it in different colours, or both. LANGUAGE: It refers to the way of communication between web pages, which has its own syntax and rules. CHARACTERISTICS OF HTML LANGUAGE: This language gained popularity because of following advantages:

1. It is easy to understand and can be easily modified.
2. It provides a flexible way to design the web pages along with the text.
3. Effective presentation can be made with all formatting effects. So, HTML is simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the web, regardless of what kind of computer or browser is being used. All one needs is a word processor (such as Notepad, Wordpad, Microsoft Word etc.) and basic HTML is dead easy. HTML files are just normal files, they usually have extensions of .htm, .html or shtml. HTML Document Structure: HTML documents have two parts, the HEAD and the BODY. The head contains information about the documents that is generally displayed with the document, such as its TITLE and similar information. The BODY is larger part of the document, as the body of a letter we would write to a friend would be. It is a place where we place the TEXT material or every thing else that is to be displayed. Elements allowed inside the

HEAD, such as TITLE, are not allowed inside the BODY and vice versa. **Structure of a HTML document:

……………………………. ……………………………. Example of Document Structure:**

Introduction to HTML

HTML, or Hypertext Markup Language is designed to specify the logical organization of a document, with important hypertext extensions. It is not designed to be the language of WYSIWYG word processor such as Word or Word Perfect.

**CREATING A HTML PROGRAM:** To create a HTML document, you can type text in any word processor like Notepad, Wordpad and then create the page. The following are the steps through which we can create a HTML document using Notepad.

1. Open Notepad by clicking on Start->Programs->Accessories->Notepad.
2. The Notepad Window will appear. Type the HTMLcode in the Notepad.
3. Click on File->Save menu option. The Save As dialog box will appear. Select.
4. The folder to save the file. Select all files in the save as type option.
5. Give the name in the file name text with extension.html or .htm.
6. Click on the Save button.

VIEWING A HTML PROGRAM:

To view any html file, we need only the Web browser. To view the Web page, follow these steps:

1. Click on Start->Program menu and choose Internet Explorer Option.
2. The Internet Explorer Window will appear.
3. Click on File->Open menu option. The Open dialog box will appear. Click on Browse button and dialog box will appear.
4. Choose the path where you have stored the HTML document and after selecting your file.
5. Click on Open button and lick OK on Open dialog box.
6. Your web page will be displayed on the Web Browser. HTML ELEMENT/TAGS: HTML is a tag based language. Tag is an element which instructs the web browser what to show and how to show. A tag comprises text enclosed in angular brackets <

. These tags are not case sensitive i.e. <element-name> and <ELEMENT-NAME> has the same effect. The tags are of two types:

1. CONTAINER TAGS: These tags include both the ON and OFF tag. The ON is denoted as </>.If tags are nested, always keep these tags sets balanced.
2. EMPTY TAGS : These tags include only the ON tag. These elements do not enclose any data. HTML elements are broadly classified into two categories. They both include container and empty tags. A. Text-Level Element B. Block-Level Element LINE BREAK: It moves the text following to it to the next line. It is an empty tag. To use it, simply type
   before the text. PARAGRAPH TAGS: It indicates the start of paragraph in a text. ALIGN attribute can also be used with tag to position the paragraphs on the browser screen. With some browsers the first line in a paragraph is intended. This is a container tag. The general syntax is:

.......................................

Experiment No-

AIM:- To create a marksheet using various HTML tags. THEORY:- Table Syntax-

…….	.........
...........	.........

The tag defines an HTML table. An HTML table consists of the element and one or more , element defines a table row, the

, and

elements. The

element defines a table header, and the

element defines a table cell. Some of the other tags used are discussed below: is used for heading 1. is used for heading 2. used to align text at center of the document. used to define a paragraph. used to define preformatted text. used to bold the text. used to underline the text. used to have a image in a document. **CODING:-** COUNCILFOR THE INDIAN SCHOOL CERTIFICATE EXAMINATIONS, NEW DELHI INDIAN CERTIFICATE OF SECONDARY EDUCATION EXAMINATION 2011 No.TZ 60015045 STATEMENT OF MARKS Name Anubhav Sharma of DAV PUBLIC SCHOOL,FARIDABAD Index Number T/1275/190 Son of Smt PREETI SHARMA Mr. PRAVEEN SHARMA SUBJECTS External Examination Percentage Marks WD 69 SIXTY NINE C++ 92 NINETY TWO DS-2 90 NINETY Software Engineering 86 EIGHT SIX Internal Assesment Grade SUPW & COMMUNITY SERVICE A Date of birth as certified by the (in words) : SEVEN SEPTEMBER TWO THOUSAND ONE Head of the School at the time of (in figure) : 07.9. registration RESULT- PASS CERTIFICATE AWARDED Note: 1. The pass mark for each subject is 35% Additional Secretary and No Division are awarded. Officiating Chief Executive & Secretary

Outputs:

Experiment No-

AIM:- To make an application letter using various HTML tags. THEORY:- Some of the tags used is discussed below:

is used for heading 1.
element is used to break a single line.

is used to define contact information for the author/owner of a document.

used to define a paragraph.

used to defines an unordered list.
• used to define a list item. **CODING:-

  Application

  Anubhav Sharma
  8 Sue Circle
  Smithtown, CA 08067
  Mob. 7042418662
  Email: [email protected]
  
  George willian
  IT Company
  87 Delaware Road
  Hatfield, CA 08065
  

  Dear Mr. Wick,
  
  I am writing to apply for the programmer position advertised in the Times Union. As requested, I am enclosing a completed job application, my certification, my resume, and three references.The opportunity presented in this listing is very interesting, and I believe that my strong technical experience and education will make me a very competitive candidate for this position.
  
  The key strengths that I possess for success in this position include:

  • I have successfully designed, developed, and supported live use applications.
  • I strive for continued excellence.
  • I provide exceptional contributions to customer service for all customers With a BS degree in Computer Programming, I have a full understanding of the full life cycle of a software development project. I also have experience in learning and excelling at new technologies as needed.
  Please see my resume for additional information on my experience. I can be reached anytime via email at [email protected] or my cell**

  **phone, 7042418662
  
  Thank you for your time and consideration. I look forward to speaking with you about this employment opportunity.

  Sincerely,
  (Anubhav Sharma)
  Outputs:**

  Experiment No-

  AIM:- To make a list using various HTML tags. THEORY:- Ordered List Syntax: An ordered list starts with the

  tag. Each list item starts with the
  1. tag.
     1. ….
     2. ….
     3. ……
     Unordered List Syntax: An unordered list starts with the **
     ** tag. Each list item starts with the **
     • ** tag.
       • .........
       • ........
       • ……
       Description List Syntax: Adescription list, is a list of terms, with a description of each term. The **

       ** tag defines a description list. The **

       ** tag defines the term (name), and the **

       ** tag defines the data (description).

       ...........

       ..........

       ............

       ...........

       Some of the other tags used are discussed below:

       is used for heading 1.
       element is used to break a single line.

       used to define a paragraph.

       used to align text at center of the document. used to underline the text.

       CODING:-

       **

       Search Engines

       Introduction

       “The Web is a vast collection of completely uncontrolled heterogeneous documents”

       • In a study of over half a million pages over 4 months, it was found that about 23% of pages changed daily. In the .com domain 40% of the pages changed daily, and the half-life of pages is about 10 days
       • The Web, is massive, much less coherent, changes more rapidly, and is spread over geographically distributed computers.
       • This requires new techniques, or extensions to the old ones, to deal with the gathering of the information, to make index structures scalable and efficiently updateable, and to improve the discriminating ability of search engines
       • In a search engine the users submit a query, typically a list of keywords, and receive a list of Web pages that may be relevant, typically pages that contain the keywords

       Types of Search Engines

       1. Google
       2. Harvest
       3. AltaVista
       4. Excite
       5. Lycos

       1. Google
       • Google is a web search engine that lets you find other sites on the web based on keyword searches.
       • Google also provides specialized searches through blogs, catalogs, videos, news items and more.
       • Google provides Internet services that let you create blogs, send email, and publish web pages.
       **

       **

       • Google has social networking tools, organization tools, and chat tools, services for mobile devices, and even Google branded merchandise.

       
       
       2. Bing
       • Bing is a search engine that brings together the best of search and people in your social networks to help you spend less time searching and more time doing.
       • As of February 2015 it is the second largest search engine in the US with a query volume at 19.8% while Yahoo Search, which Bing powers, has 12.8%, while its competitor Google is at 64.5%.
       • Daily changing of background image. The images are mostly of noteworthy places in the world, though it sometimes displays animals, people, and sports. The background image also contains information about the element(s) shown in the image

       Outputs:**

       Experiment No-

       AIM:- To insert images and links in a document using various HTML tags. THEORY:- HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document. Links Syntax: links are defined with the tag: link text Images Syntax: Images are defined with the tag. The tag is empty, it contains attributes only, and does not have a closing tag. The src attribute defines the url (web address) of the image: The alt attribute specifies an alternate text for the image, if it cannot be displayed. The value of the alt attribute should describe the image in words: The alt attribute is required. A web page will not validate correctly without it. **CODING:-

       Click on link or image to redirect on to the page.

        Click here to go to the Google Click here to go to Facebook Click here to go to Gmail Click here to go to Whatsapp  Click here to go to w3schools 

       **

       **

       **

       Outputs:

       Experiment No-

       AIM:- To make a google SignUp form using various HTML tags. THEORY:-

       tag is used to create an HTML form for user input. Form Syntax: First name:
       Last name:
       

       **<** input type="radio"> used to define a radio button. **<** input type="text"> defines a one-line input field for text input. defines a button for submitting a form to a form-handler. **CODING:-

       Create your Google Account

       Name
       
       
       Choose your Username
       
       
       Choose your password
       
       
       Confirm your password
       
       
       Birthday
       Month **

       January February March April May June July August September October November December

       
       
       Gender
       Male Female Others
       
       Mobile Phone
       
       
       Your current email address
       
       
       Prove you are not a robot
       Skip this varification(Phone number may be required)
       
       Enter the above code here :
       
       Location
       

       ** Country India UK
       
       I agree to the Google Terms Of Services and Privacy Policy.
       
       

       **

       Outputs:

       Experiment No-7

       AIM:- To make frames in a website using various HTML tags. THEORY:- Frameset Syntax: tag defines one particular window (frame) within a . Each in a can have different attributes, such as border, scrolling, the ability to resize, etc. tag defines a frameset. element holds one or more elements. Each element can hold a separate document. element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. scrolling > (yes/no/auto) > Specifies whether or not to display scrollbars in a frame src > (URL) > Specifies the URL of the document to show in a frame cols >( pixels/ % /*) > Specifies the number and size of columns in a frameset rows> (pixels/ %/ *) > Specifies the number and size of rows in a frameset CODING:-

       Outputs:

       Experiment No-8

       AIM:- To create a resume using various CSS tags. THEORY:- Syntax of using CSS in HTML file.

       London

       London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

       Classing HTML elements, makes it possible to define CSS styles for classes of elements. Equal styles for equal classes, or different styles for different classes. The HTML

       element is a **block level** element. It can be used as a container for other HTML elements. Classing

       elements, makes it possible to define equal styles for equal

       elements **CODING:-

       Anubhav Sharma

       **

       **

        H.no. 1512/9 fbd 121006 Mob.7042418662 Email- [email protected] 

       Objective

       To work hard with full determination and dedication to achieve organizational as well as personal goals.

       Academic Qualification

       • Persuing B.tech(CSE) - Session 2014-2017 - from MDU
       • Passed 10+2 - CBSE Board - in 2019 - with 70% in aggregate
       • Passed 10th - CBSE Board - in 2017 - with 82% in aggregate

       Technical Qualification

       • Basic knowledge of MS-Office.
       • Basic Knowledge of C, C++, JAVA, Dos.
       • Operating System: Windows XP/07/08.
       • Database: SQL Server 2008.

       Area Of Interest

       • Software Developement
       • Social Involvement

       Personal strength

       • Positive Thinking
       • Open to any challenging work
       • Good learner by observation

       **