tag:

The HTML

tag is used for indicating long quotations (i.e. quotations that span multiple lines). It should contain only block-level elements within it, an d not just plain text. E.g:



14

Department Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text with quotation marks.

Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text with quotation marks. Result:

Browsers generally generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most  browsers surround surround q text with with quotation marks. marks. Browsers generally render blockquote text as indented text. If your quoted text needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text with quotation marks. tag:

The tag defines a short quotation. Browsers normally insert quotation marks around the quotation. E.g:

WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

Result:

WWF's goal is to: Build a future where people live in harmony with nature.  We hope they succeed. “

15

”

Department Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

5. List tags: Unordered HTML Lists

An unordered list starts with the

 tag. Each list item starts with the
•  tag.The list items will be marked with bullets (small black circles): Unordered HTML Lists - The Style Attribute
  
  A style attribute can be added to an unordered list , to define the style of the marker:
  
  Style
  
  Description
  
  list-style-type:disc
  
  The list items will be marked with bullets (default)
  
  list-style-type:circle
  
  The list items will be marked with circles
  
  list-style-type:square
  
  The list items will be marked with squares
  
  list-style-type:none
  
  The list items will not be marked
  
  Ordered HTML Lists
  
  An ordered list starts with the
   tag. Each list item starts with the
  1.  tag.The list items will  be marked with numbers: Ordered HTML Lists - The Type Attribute
     
     A type attribute can be added to an ordered list , to define the type of the marker:
     
     16
     
     Department Department Of Computer Science ,Gpt Hubli
     
     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.
     
     Type
     
     Description
     
     type="1"
     
     The list items will be numbered with numbers (default)
     
     type="A"
     
     The list items will be numbered with uppercase letters
     
     type="a"
     
     The list items will be numbered with lowercase letters
     
     type="I"
     
     The list items will be numbered with uppercase roman numbers
     
     type="i"
     
     The list items will be numbered with lowercase roman numbers
     
     HTML Description Lists
     
     HTML also supports description lists. A description list is a list of terms, with a description of each term. The

      tag defines the description list, the

      tag defines the term (name), and the

      tag describes each term:
     
     17
     
     Department Department Of Computer Science ,Gpt Hubli
     
     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.
     
     6. Table tags.
     
     Tables are defined with the  tag.Tables are divided into table rows with the  tag.Table rows are divided into table data with the

      tag.

     20

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     7. Hyper link tag

     A link is a text or an image you can click on, and jump to another document (External links) or a position within the document (Internal Links). It is defined By anchor tag. External Links: Created using hyperlinks using href attribute of anchor tag as below:

     ">link text  Where url is the address of webpage you want to navigate when you click on link text. E.g:

     Visit our HTML tutorial

     Result:

     The href  attribute  attribute specifies the destination address (http://www.w3schools.com/html/) The link text is the visible part (Visit our HTML tutorial). Internal Links

     A Internal link is used to move to particular part of document within the same webpage. It is created using “name” attributes and “target” of an anchor tag. First, name the part of documents you want to create links with the name attribute: ... The target  specifies where to open the linked document. Click here to go to a1


     21

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     E.g: Jump to Chapter 1

     Chapter 1

     This chapter explains chapter 1

     Result:

     HTML Links - Image as Link

     It is common to use images as links. By nesting n esting a image tag inside anchor tag in place of hypertext. E.g:

     The image is a link. You can click on it.

     Result:

     The image is a link. You can click on it.

     ------------------------------------------------------When you click on above image, it jumps to google.com 22

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     8. Working with Frame and Form tags. Frames:

     The tag defines one particular window (frame) within a .Each in a can have different attributes, such as border, scrolling, the ability to resize, etc. The



     tag

     defines

     a

     frameset.

     The



     element

     holds

     one

     or

     more  more  elements. Each element can hold a separate document. The 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. E.g:

     Result:

     23

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     HTML Forms:

     HTML forms are used to collect user input. The

      element defines an HTML form: > .  form elements .

     > HTML forms contain form elements . Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more. The Element The  element is the most important form element. The element has many variations, depending on the type attribute.

     Here are the types used in this chapter:

     Type

     Description

     Text

     Defines normal text input

     Radio

     Defines radio button input (for selecting one of many choices)

     Submit

     Defines a submit button (for submitting the form)

     24

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     Text Input  defines a one-line input field for text input: E.g:

     First name:

     Last name:

     Result:

     Radio Button Input

      defines a radio button. Radio buttons let a user select ONE of a limited number of choices: Result: Male Female 25

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     The Submit Button

     defines a button for submitting a form to a form-handler. The formhandler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: E. g:

     First name:

     Last name:

     Result: First name: Mickey

     Last name: Mouse

     Submit

     The Action Attribute

     The action attribute  defines the action to be performed when the form is submitted. The common way to submit a form to a server, is by using a submit button. Normally, the form is submitted to a web page on a web server. In the example above, a server-side script is specified to handle the submitted form:

     26

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     The Method Attribute The method attribute specifies the HTTP method ( GET or POST) to be used when submitting the forms:

     or: When to Use GET?

     You can use GET (the default method): If the form submission is passive (like a search engine query), q uery), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=Mickey&lastname=Mouse

     GET is best suited to short amounts of data. Size limitations are set in your browser.

     When to Use POST?

     You should use POST: If the form is updating data, or includes sensitive information information (password). POST offers better security because the submitted data is not visible in the page address. The Element

     The most important form element is the  element. The element can vary in many ways, depending on the type attribute.

     27

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     The Element (Drop-Down List):

     The element defines a drop-down list. The elements defines the options to select. The list will normally show the first item as selected.You can add a selected attribute to define a predefined option. E.g:

     Volvo Saab Fiat Audi

     Result: Volvo

     Submit

     The Element The <textarea> element defines a multi-line input field ( a text area): E.g: <html> <body> <form action="action_page.php"> <textarea name="message" rows="10" cols="30"> The cat was playing in the garden.

     28

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     Result:

     The cat w as playing in in the  garden.

     Submit

     The Element The  element defines a clickable  button: E.g:

     Click Me! Result:

     Click Me!

     HTML Input Types Input Type: text

      defines a one-line input field for text input: Input Type: password

      defines a password field: Input Type: submit

      defines a button for submitting form input to a form-handler . The form-handler is typically a server page with a script for processing input data. 29

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     The form-handler is specified in the form's action attribute: Input Type: radio  defines a radio button .

     Radio buttons let a user select ONLY ONE of a limited number of choices: Input Type: checkbox  defines a checkbox .

     Checkboxes let a user select ZERO or MORE options of a limited number of choices. Input Type: button  defines a button : E.g:

     Username:

      password:

     Gender: Male
     Female
     I have a bike
     I have a car

     30

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     Result:

     Username:

     password:

     Gender: Male Female I have a bike I have a car

     31

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     9.

     Image tags & embedding a multimedia on to a web page(video, audio, zip)

     Image tags

     The tag defines an image in an HTML page. The tag has two required attributes: src and alt. “alt” Specifies an alternate text for an image. Src specifies URL of an image. E.g: Result:

     E.g:

     To illustrate illustrate image tags

     tags

     ---

     This image is right aligned with the text

     ---

     This image is left aligned with the text

     ---

     This image is center aligned with the text.

     ---

     32

     Department Department Of Computer Science ,Gpt Hubli

     Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

     Result:

     Embedding a multimedia on to a web page(video, audio, zip)

     Multimedia on the web is sound, music, videos, movies, and animations. Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples: Pictures, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. Multimedia files have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi etc Sometimes you need to add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called . This tag causes the browser itself to include controls for the multimedia automatically provided browser supports tag and given media type. You can also include a   tag for the  browsers which don't recognize the <embed> tag. You could, for example, use <embed> to sdisplay a movie of your choice, and <noembed> to display a single JPG image if browser does not support <embed> tag. Note: For further details on embedding multimedia and examples please refer below link: http://www.tutorialspoint.com/html/html_embed_multimedia.htm 33<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 10. Working with CSS (Cascading Style Sheet). CSS<br /> <br /> CSS stands for Cascading Style Sheets.CSS describes how HTML elements are to be displayed on screen, paper, or in other media.CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS Saves a Lot of Work.The style definitions are normally saved in external .css files.With an external stylesheet file, you can change the look of an entire website  by changing just one file! CSS Syntax<br /> <br /> A CSS rule-set consists of a selector and a declaration block:<br /> <br /> The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded b y curly  braces. In the following example all <p> elements will be center-aligned, with a red text color: <html> <head> <style>  p { color: red; text-align: center; } </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> </body> </html><br /> <br /> 34<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Result:<br /> <br /> Hello World! This paragraph is styled with CSS<br /> <br /> CSS Selectors<br /> <br /> CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.The element selector selects elements based on the element name.You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color): E.g: <html> <head> <style>  p { text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> Result:<br /> <br /> Every paragraph will be affected by the style. Me too! And me! The id Selector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used u sed if you want to select a single, unique element. To select an element with with a specific id, write a hash (#) character, followed followed by the id of the element. 35<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> The style rule below will be applied to the HTML element with id="para1": <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> Result: Hello World! This paragraph is not affected by the style. The class Selector The class selector selects elements with a specific class attribute.To select elements with a specific class, write a period (.) character, followed b y the name of the class.<br /> <br /> In the example below, all HTML elements with class="center" will be red and center-aligned: cente r-aligned: <html> <head> <style> .center { text-align: center; color: red; } </style> 36<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> </head> <body> <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html> Result Red and center-aligned heading<br /> <br /> Red and center-aligned paragraph. Grouping Selectors<br /> <br /> You can group the selectors, to minimize the code.To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above: <html> <head> <style> h1, h2, p { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html><br /> <br /> 37<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Result: Hello World! Smaller heading!<br /> <br /> This is a paragraph. Three Ways to Insert CSS<br /> <br /> There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style<br /> <br />   <br /> <br /> External Style Sheet<br /> <br /> With an external style sheet, you can change the look of an entire website by changing just one file!Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: E.g:<br /> <br /> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Result:<br /> <br /> 38<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> An external style sheet can be written in any text editor. The file should not no t contain any html tags. The style sheet file must be saved with a .css extension.Here is how the "myStyle.css" "m yStyle.css" looks:  body {  background-color: lightblue; } h1 { color: navy; margin-left: 20px; } Internal Style Sheet<br /> <br /> An internal style sheet may be used if one single page has a unique style.Internal styles are defined within the <style> element, inside the <head> section of an HTML page: <html> <head> <style>  body {  background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html><br /> <br /> 39<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Result:<br /> <br /> Inline Styles<br /> <br /> An inline style may be used to apply a unique style for a single element.To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS  property.The example below shows how to change the color and the left margin of a <h1> element: <html> <body> <h1 style="color:blue;margin-left:30px;">This is a heading.</h1> <p>This is a paragraph.</p> </body> </html> Result: This is a heading.<br /> <br /> This is a paragraph.<br /> <br /> 40<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Graded Exercises 1. Design a page having suitable background colour and text colour with title “My First Web Page” using all the attributes of the Font Fo nt tag. <html> <title> Font tag Example </title> <body bgcolor="pink"> <font face="arial" size="1" color="blue"> WELCOME </font> <br> <font size="2" color="cyan"> WELCOME </font> <br> <font size="3" color="red"> WELCOME </font> <br> <font size="4" color="yellow"> WELCOME </font> <br> <font size="5" color="green"> WELCOME </font> <br> <font size="6" color="brown"> WELCOME </font> <br> <font size="7" color="pink"> WELCOME </font> <br> <font size="20" color="gray"> WELCOME </font> <br> </body> </html> Output:<br /> <br /> 41<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 2. Create a HTML document giving details of your [Name, Age], [Address, Phone] and [Register Number, Class] aligned in proper order using alignment attributes of Paragraph tag. <html> <head><title> Personal details</title> </head> <body> <h1>Personal Details</h1> <p> Name: abc Age:18<p> <p align=”right”> address: tx, texas,houston Phone:9999999999</p> <p align=”center”> Register number:2bv15cs075 Class:2nd sem <p> </body> </html> Output:<br /> <br /> Personal Details  Name: abc Age:18 address:tx, texas,houston Phone:9999999999 Register number:2bv15cs075 number:2bv15cs075 Class:2nd sem<br /> <br /> 42<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 3. Write HTML code to design a page containing some text in a paragraph by giving suitable heading style. <html> <head> <title>Page Title</title> </head> <body> <h1>Paragraph tag illustration</h1> <p>This is left aligned paragraph.</p> <p align="right">This is right aligned paragraph.</p> <p align="center">This is center aligned paragraph.</p> <p align="justify">This paragraph is justified.</p> </body> </html> Output:<br /> <br /> Paragraph tag illustration This is left aligned paragraph. This is right aligned paragraph. paragraph. This is center aligned paragraph. This paragraph is justified.<br /> <br /> 43<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 4. Create a page to show different character formatting (B, I, U, SUB, SUP) tags. viz : l og  b m  p = p l og   b m<br /> <br /> <html> <head> <title>Logarithm rules</title> </head> <body> <h1><u>Logarithm rules</u></h1> <u>Logarithm<br /> <br /> product<br /> <br /> rule:</u><b>log</b>_b(x<br /> <br /> ∙<br /> <br /> y)<br /> <br /> =<br /> <br /> <b>log</b>_b(x) + <b>log</b>_b(y)<br> <u>Rule<br /> <br /> 2:</u><b>log</b>_{<br /> <br /> b}<br /> <br /> m^{<br /> <br /> log</b>_b m <br> </body> </html> Output:<br /> <br /> 44<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> p}<br /> <br /> =<br /> <br /> p<b><br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 5. Write HTML code to create a Web Page that contains an Image at its centre.<br /> <br /> <html> <body> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle"> This is some text.</p> </body> </html> Output:<br /> <br /> Image with align="middle":<br /> <br /> This is some text.<br /> <br /> 45<br /> <br /> This is some text.<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 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. <html> <body> <p>The image is a link. You can click on it.</p> <a href="img2.html" rel="nofollow"> <img src="smiley.gif" align="left" alt="alternate text"> </a> </body> </html><br /> <br /> img2.html:<br /> <br /> <html> <head> </head> <body> hello </body> </html> Output:<br /> <br /> The image is a link. You can click on it.<br /> <br /> After clicking on the above image we will go to img2.html file:<br /> <br /> 46<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 7. Create web Pages using Anchor tag with its attributes for external links. Home.html<br /> <br /> <html> <head> <title> Link Tag </title> </head> <body> <a href="page1.html" rel="nofollow">Go to page1.html</a> </body> </html><br /> <br /> Page1.html<br /> <br /> <html> <head> <title> Page1.html </title> </head> <body> Hello!!! This is a page1. html <a href="home.html" rel="nofollow"> Go to home </a> </body> </html><br /> <br /> 47<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Output:<br /> <br /> 48<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 8. Create a web page for internal links; when the user clicks on different links on the web  page it should go to the appropriate locations/sections in the same page. <html> <head><title> Internal Links </title></head> <body> <a name ="dynamicwebpage" rel="nofollow">A server-side dynamic web page is a web page whose construction is controlled by an application server server processing server-side scripts. scripts. In server-side scripting, parameters determine determine how the assembly of every new web page proceeds, including the setting up of more client-side processing. A client-side dynamic web page processes the web page using HTML scripting running in the browser as it loads. JavaScript and other scripting languages determine the way the HTML in the received page is parsed into the Document Object Model, or DOM, that represents the loaded web page. The same client-side techniques can then dynamically update or change the DOM in the same way.</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>< <br/><br/><br/><br/><br/>< br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>< br/><br/><br/><br/><br/><br/><br/><  br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br  br/><br/><br/><br/><br/>< br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br /><br/><br/><br/><br/><br/><br/><br  /><br  /><br/><br /> <br /> <p align="center">If you want to to make a link between pages on the same website, you do not need to spell out the entire address (URL) for for the document. </p> <a name="staticwebpage" rel="nofollow">A static web page (sometimes called a oten/flat page/stationary page) is a web page that is delivered to the user exactly as stored, in contrast contrast to dynamic web pages which are generated by a web application. Consequently, a static web page displays the same information for all users, from all contexts, subject to modern capabilities of a web server to negotiate content-type or language of the document where such versions are available and the server is configured to do so. Static web pages are often HTML documents stored as files in the file system and made available  by the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However, loose interpretations of the term could include web pages stored in a database, and could even include pages formatted using a template and served through an application server, as long as the page served is unchanging and presented essentially as stored. </a> <p>Text text text text</p> <a href="#staticwebpage" rel="nofollow">Click here to know about Static Webpage</a><br> <a href="#dynamicwebpage" rel="nofollow">Click here to know about Dynamic webpage </a> </body> </html> 49<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Result:<br /> <br /> 50<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 9. Write a HTML code to create a web page with pink colour background and display moving message in red colour. <html> <body bgcolor = "pink"> <marquee > <font color="red">Moving text </font> </marquee> </body> </html><br /> <br /> OUTPUT:<br /> <br /> 51<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 10. Create a web page, showing an ordered list of all second semester courses (Subjects). <html> <body> <h1>Ordered List of CS Second Sem subjects</h1> <ol> <li>Engineering Mathemantics-II</li> <li>English</li> <li>DE & ICC</li> <li>DE lab</li> <li>Basic Web-design lab</li> <li>Multimedia lab</li> </ol> </body> </html> Output:<br /> <br /> Ordered List of CS Second Sem subjects<br /> <br /> 1. 2. 3. 4. 5. 6.<br /> <br /> Engineering Mathemantics-II English DE & ICC DE lab Basic Web-design lab Multimedia lab<br /> <br /> 52<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 11. Create a web page, showing an unordered list of names of all the Diploma Programmes (Branches) in your institution. <html> <body> <h2>Unordered List showing branches in our college</h2> <ul style="list-style-type:square"> <li>Computer Science</li> <li>Civil Engineering</li> <li>Electronics & Communication</li> <li>Mechanical Engineering</li> </ul> </body> </html> Output:<br /> <br /> Unordered List showing branches branch es in our college <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Computer Science Civil Engineering Electronics & Communication Mechanical Mechanical Engineering<br /> <br /> 53<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 12. Create a HTML document containing a nested list showing a content page of any book. <html> <body> <h1 align="center">Contents</h2> <ul style="list-style-type:none"> <li>Fundamentals </li> <ol type="i"> <li>A Brief Introduction to the Internet </li> <li>The World Wide Web </li> <li>Web Browsers </li> <li>Uniform Resource Locators</li> <li>The Hypertext Transfer Protocol</li> </ul> </li> </ul> <ul style="list-style-type:none"> <li>Introduction to XHTML</li> <ol type="i"> <li>Origins and Evolution of HTML and XHTML </li> <ol type="a"> <li>Origin </li> <li>HTML </li> <li>XHTML</li> </ol> <li>Images</li> </ul> </li> </ul> <ul style="list-style-type:none"> <li> Cascading Style Sheets </li> <ol type="i"> <li>Introduction</li> <li>Levels of Style Sheets</li> <ul> <li>Style Specification Formats</li> <li> Selector Forms</li> <li>Property Value Forms </li> </ul> <li> Font Properties</li> </ol> </ul> s</body></html> 54<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> OUTPUT:<br /> <br /> Contents <br /> <br /> <br /> <br /> <br /> <br /> Fundamentals i. A Brief Introduction to the Internet ii. The World Wide Web iii. Web Browsers iv. Uniform Resource Locators v. The Hypertext Transfer Protocol Introduction to XHTML i. Origins and Evolution of HTML and XHTML a. Origin  b. HTML c. XHTML ii. Images Cascading Style Sheets i. Introduction ii. Levels of Style Sheets Style Specification Formats Selector Forms Property Value Forms iii. Font Properties Properties <br /> <br /> <br /> <br /> <br /> <br /> 55<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 13. Create the following table in HTML with Dummy Data: Reg. Number<br /> <br /> Student Name<br /> <br /> Year/Semester<br /> <br /> Date Admission<br /> <br /> <html> <body> <table border="1"> <tr> <th>Reg. Number</th> <th>Student Name </th> <th>Semester</th> <th>Date of Admission</th> </tr> <tr> <td>171CS150001</td> <td>Smith</td> <td>2</td> <td>02-06-2015</td> </tr> <tr> <td>171CS140003</td> <td>JOY</td> <td>4</td> <td>02-06-2015</td> </tr> <tr> <td>171CS110001</td> <td>JANE</td> <td>6</td> <td>02-06-2015</td> </tr> </table> </body> </html> OUTPUT: Reg. Number Student Name Semester Date of Admission<br /> <br /> 171CS150001 Smith<br /> <br /> 2<br /> <br /> 02-06-2015<br /> <br /> 171CS140003 JOY<br /> <br /> 4<br /> <br /> 02-06-2015<br /> <br /> 171CS110001 JANE<br /> <br /> 6<br /> <br /> 02-06-2015<br /> <br /> 56<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> of<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 14. Create a web page which divides the page in two equal frames and place the audio and video clips in frame-1 and frame-2 respectively. FRAME-1 FRAME-2<br /> <br /> <html> <frameset cols="50%,50%"> <frame src="framea.html"> <frame src="frameb.html"> </frameset> </html><br /> <br /> framea.html:<br /> <br /> <html> <body> <audio controls rel="nofollow"> <source src="Kalimba.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html> frameb.html:<br /> <br /> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> </body> </html><br /> <br /> 57<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> OUTPUT:<br /> <br /> 58<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 15. Create a web page which should generate following output: FRAME-1<br /> <br /> FRAME-2 FRAME-3<br /> <br /> <html> <frameset cols="50%,50%"> <frame src="framea.html"> <frameset rows="50%,50%"> <frame src="frameb.html"> <frame src="framec.html"> </frameset> </frameset> </html> Framea.html <html><br /> <br /> <body bgcolor=”purple”> <h3>Frame A</h3> <p><strong>Note:</strong> The frameset, frame, and no frames elements are not supported in HTML5.</p> </body> </html> Frameb.html <html> <body bgcolor=”orange”> <h3>Frame B</h3> </body> </html> Framec.html<br /> <br /> <html> <body bgcolor=”yellow”> <h3>Frame C</h3> </body> </html> 59<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> Output:<br /> <br /> 60<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.<br /> <br /> 16. Create a web page using Embedded CSS and multimedia <html> <head> <title>HTML CSS</title> <p style="color:green; font-size:24px;">CSS and Multimedia</p> </head> <body> <object data="Wildlife.wmv" type="video/msvideo" height=200 width=200 hspace=200 vspace=200> </object> </body> </html> </body> </html> Result:<br /> <br /> 61<br /> <br /> Department Department Of Computer Science ,Gpt Hubli<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://idoc.tips/report/basicwebdesign-lab-new-syllabus-1-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Report "Basicwebdesign Lab New Syllabus (1)"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcHT8sZAAAAAPKfs_PZGhwvz-OHbUMuekQzz5xK"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright &copy; 2025 IDOC.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://idoc.tips/about">About Us</a></span> | <span><a href="https://idoc.tips/privacy">Privacy Policy</a></span> | <span><a href="https://idoc.tips/term">Terms of Service</a></span> | <span><a href="https://idoc.tips/copyright">Copyright</a></span> | <span><a href="https://idoc.tips/contact">Contact Us</a></span> | <span><a href="https://idoc.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer> <!-- Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://idoc.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://idoc.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177830117-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177830117-1'); </script> <script src="https://idoc.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://idoc.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://idoc.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function (event, ui) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script> <!-- cookie policy --> <div id="IDOCTIPS_cookie_box" style="z-index:99999; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://idoc.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_IDOCTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_IDOCTIPS_cookie_box() { document.cookie = "IDOCTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_IDOCTIPS_cookie_box(); } function hide_IDOCTIPS_cookie_box() { var cb = document.getElementById('IDOCTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var IDOCTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('IDOCTIPS_cookie_box_viewed'); if (IDOCTIPS_cookie_box_viewed) { hide_IDOCTIPS_cookie_box(); } })(); </script> <!-- end cookie policy --> </body> </html>

     tag.A table row can also be divided into table headings  with the	tag.If you do not specify a border b order for the table, it will  be displayed without borders.A border can be added using the border attribute: HTML Table Headings Table headings are defined with the	tag. By default, all major browsers display table headings as bold and centered. E.g: Month Savings January $100 February $80 Result: 18 Department Department Of Computer Science ,Gpt Hubli Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli. Table Cells that Span Many Rows: To make a cell span more than one row, use the rowspan  attribute. E.g: Month Savings Savings for holiday! January $100 $50 February $80 Result: Table Cells that Span Many Columns: To make a cell span more than one column, use the colspan  attribute. E.g: 19 Department Department Of Computer Science ,Gpt Hubli Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli. Monthly savings Month Savings January $100 February $100 Sum: $180 Result: Monthly Savings An HTML Table With a Caption: To add a caption to a table, use the