2018-19newcoursebooklet_1.docx file · Web view2018-19newcoursebooklet_1.docx
WT_Lab_Record_ALL_EXPERIMENTS_1_to_13.docx
-
Upload
nishant-nickson -
Category
Documents
-
view
214 -
download
0
Transcript of WT_Lab_Record_ALL_EXPERIMENTS_1_to_13.docx
Design the following static web pages required for an online book store web site
MALLA REDDY ENGINEERING COLLEGE (Autonomous)(Approved by AICTE and Affiliated to JNTUH) Maisammaguda,(Post Via Kompally), Secunderabad 500 100.
Department of Computer Science & EngineeringWEB TECHNOLOGES LAB Roll no:..Program/Exp.no:.. Sheet no. Date Name of the Program
HTML Introduction:Web server: A system with Applications programs/resources on the internet.website: A collection of one or more web pages
webpages: A storage disk contains a file ( HTML code)Design Instructions for devoloping web pages(websites) 1) Collect the relevent information and sort the information contents ex.Home page etc2) Set the goals of the website3) Organize your content in the main topic4) Come up with general structure for pages and topics
HTML: HTML program( code) contains series of tags that are integrated into a document. It contains formattedstructured blocks.
HTML used to create the websites/web pages.
Tag: Formated text document is composed of a set of elements such as paragraphs,headings, yperlink,images,tables, lists etc.Tag elements surrounded by Angular brackets. Tag tells that control information of the structure of thedocument. ex. Heading 1 formatted information is displayed on heading tag displayed off/closed.Tags are not case sensitive.
Note: white space, tabs, new lines ignored by the browser.
The structure of HTML document.
INFORMATION
Heading 1 paragraph
Processing the document HTML code begin with and end with
Two elements of direct children to HTML tag is 1) head 2) bodyHead: contains Control information used for browsers and servers
Body : contains visible page of the content
Title : Tag is mandatory used to present name of the bookmark and search engine.Paragraph tag: All the text images,text, paragraphs in our documents represented by paragraph tag.Syntax:
TEXT INFORMATION
Heading Tag: To display the Textual information in headingtag. syntax Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Note: h1 display maximum font and h6 display the minimum font.
1)Write a HTML program to display WELCOME MESSAGEFirst.html
MY FIRST HTML PROGRAM WELCOME TO HTML programming
OUTPUT
2) write a html program using header tagsHeader.html
PROGRAM EXAMPLE OF HEADER TAGS HEADER1 FONT SIZE HEADER2 FONT SIZE HEADER3 FONT SIZE HEADER4 FONT SIZE HEADER5 FONT SIZE HEADER6 FONT SIZE
OUTPUT :
IMAGE TAG : Images are used aspect of pleasant web experience. Image get important information of website.Browsers display a limited range of image types.Image type GIF or JPG will be displayedSyntax: INFORMATION Set background use given image.Note:background images used for good appearanceImage tag syntax
URL: Source pathHeight : width of the image in pixelsAlt: attribute is used for to understand the structure of thepageAlign: top, center,bottomDefault: bottom of the edge.Usemap: attribute used for image maping
Example:
3)Write a HTML program to embed an image into web content.
PROGRAM EXAMPLE OF IMAGE TAG INSERTING IMAGE
OUTPUT:
HYPER LINK Tag:The powerful and flexibility of HTML comes from simple method it used hyperlink.A single tag is used all types of links.Hyper link used to link the documents where they add or understand the work or reduce the download times.Screenful information forcing reader to download the relevant documents.
Syntax: INFORMATION
Example: NEXT PAGE JNTUH website
4) write a HTML program to create Hyper links to other documents.
PROGRAM EXAMPLE OF HYPER LINK FIRST HTML
HEADER TAG
IMAGE
JNTU WEBSITE
BLUE HILLS IMAGE
OUTPUT:
LISTS :One of the most effective way of structuring website and its contents using lists.Provide piece of information index to site,but could become highly complex.Lists can be easily embedded with other lists to provide complex yet readable structures.HTML provides three types of lists
The basic bulleted list(unordered list) : bulleted items A numbered list(ordered list) :Number itemsDefinition list: list of item with descriptionEach has a different use but generally the definition list is the most flexible of the three as it easily incorporates images paragraphs of the text while keeping an obvious structureOrdered list:type of attribute to select numbers letters Roman Numberals
syntax:
- First
-
Or
-
Each list of item by Ordered list( numbered list):
Syntax:
List of items enclosed by tag.
Attribute tableValue for type attributeDescriptionExample
1Arabic numerals(the default)1,2,3..
ACapital lettersA,B,C,D
aSmall lettersa,b,c,d
ILarge roman lettersI,II,III,IV
i Small Roman lettersi,ii,iii,iv
5.Write a HTML program to print the COURSES of MREC by using unordered list
Malla Reddy Engineering College B.Tech Courses
- CSE
- IT
- ECE
- ME
- CE
- Mining
M.Tech Courses
- CSE
- IT
- CS
OUTPUT.
6.Write a HTML program to print the INDEX of Project by using ordered list
Malla Reddy Engineering College INDEX
- Analysis
- Design
- Implementation
- Coding
- Docuementation
- OUTPUT
- Biblography
OUTPUT:
7.Write a HTML program to print the courses of MREC by using Definition list
Malla Reddy Engineering College B.Tech Courses CSEITECEEEEME CE M.Tech Courses CSE IT CS
TABLEStable: One of the Most useful HTML construct is the table.table is a grid of information like spread sheet contains data items.Table uses stuctureing the peice informaiton and structuring the whole webpage
syntax: table rows table data.
table header One caption for table
column span(colspan) is added to or tag row span(rowspan) is used with tag
cellpading: defines the space inside each cell(ie the space between the edges of the cell and its contents)Cellspacing: Defines the space between the cells8)Example1 of tables
Table Example1 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2
OUTPUT:
9) Example 2 of forms border and attributes
Table Example2 row1,cell1 row1, Cell2
OUTPUT:
10) Example of forms using tr,th, and td tags
Table Example3 HEADER1 HEADER1 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2
OUTPUT:
11) Example of forms using cellspacing and cellpading
Table Example3 HEADER1 HEADER1 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2
OUTPUT:
12) Example of forms using cellspacing and cellpading
Table Example3 HEADER1 HEADER2 row1,cell1 row1, Cell2 row2,cell1 row2, Cell2 OUTPUT:
13) Example of forms using thred data alignment.
Table Example3 align=left valigh=top align=right valign=top align=center valigh=bottom no preference
OUTPUT:
14)Example of forms using colspan
Table Example M.Tech
CSE IT
OUTPUT:
15) Example of forms using rowspan
Table Example M.Tech CSE IT
OUTPUT:
------------16 Write a HTML program to desing Time table of III B.Tech CSE-A using tables
B.Tech TIME TABLE MALLA REDDY ENGINEERING COLLEGE
(Autonomous)
III YEAR B.Tech (CSE-A) TIME TABLE
I
9:30AM -10:20AM II
10:20AM -11:10AM III
11:10AM -12:00 IV
12:00AM -12:50
12:50PM -1:30PM V
1:30PM -2:20PM VI
2:20PM -3:10 VII
3:10PM -4:00PM MON OOAD NS MS CD LUNCH WT NS STM
TUE WT NT OOAD NS WT CD/AEC lab WED CD STM SS WT MS STM OOAD THU MS WT-CD/AEC lab NS STM CD FRI STM WT OOAD LIB CD NT SPORTS SAT NS WT CD MS OOAD SS MS
OUTPUT:
FORMS: Collect the information from visitor to your site, you need a form.You can use several different kinds of forms on different websites , Forms are used to add the elements of interaction to the website.
Form is collection of information data like: text,Buttons,Checkbox, radio-button,Select box, File select menu , and hidden controls.Form data is submitted by the user.For every form there is an application program in the application server to process the results.We can create forms by using the tag.
...
Note: Forms can contain virually all other markup tags but cannot be nested within another tag.
The action attribute specifies the name and location of CGI script that will be used to process the data.
post: To send the information to server. get : To retrieve the inforamtion from server, and get method returns ASCII data.
Tags generally used with form: input type, select, option, textarea etc.....
input type:
text: Create input text accept size of maxmium characters long.
Password: works exactly like input is not displayed to the screen replaced by (* an asterisk security).
radio: Creates a radion button.
Check box: produces a simple check box.
submit: Creates a button display the value of attribute,it is used to send the data to server.
reset: Creats a button, used to clear the form data.
Image: used to control the postion of image.
Select tag: ... used to list the items from which the user can choose.Tag encloses a set of options and when sent to server.