Introduction to Tables and Images HTML.pptx
sadiatahirentreprene
14 views
27 slides
Sep 15, 2024
Slide 1 of 27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
About This Presentation
Introduction
Slide Content
Tables and Images Session 2
Session Objectives Multicolumn Create tables Differentiate between gif and jpeg files Insert images into a web page Create Image Maps Add sound to an HTML document
Multicolumn Text The MULTICOL tag places the text of the document into multiple, equal-width columns Syntax <MULTICOL COLS ="Specifies the number of text columns for the text" GUTTER ="Specifies the distance between the text columns, by default is 10 pixels" WIDTH ="Specifies the width of each column and the width of each column is the same” > text in the document </MULTICOL>
Multicolumn Text </HTML> <HEAD> <TITLE> MULTICOLUMNS </TITLE> </HEAD> <MULTICOL COLS="3" WIDTH="520" > <P> HTML browsers can be used with some facility to create form-based user interfaces (FUIs!) that allow people to choose products to buy, configure computers or search for information, to name only a few uses. <P> Information presentation on the web is very important. If you're selling something, you need to present things very succinctly, especially if you’re trying to "hook" a person who may be a reluctant reader. <P> Sometimes, you can assume that many of your readers will arrive at your page because they need and want the information you're presenting. You can use longer pages, present more detail, and not to worry about switching behaviour on the part of your audience. </P> </MULTICOL> </HTML>
Multicolumn Text The output of the HTML code using the Multicolumn tag :
Creating Tables <HTML> <HEAD> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE> <TD> A single cell table </TD> </TABLE </BODY> </HTML>
Continue.. The CAPTION element is used to provide a short description of the table. The CAPTION is specified immediately after the opening <TABLE> tag. <HTML> <HEAD> <TITLE> UsingTables </TITLE> </HEAD> <BODY> <TABLE> <CAPTION>Creating a Table</CAPTION>
Continue.. <TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD > </TR> <TR> <TD>Data Cell 4</TD> <TD>Data Cell 5</TD> <TD>Data Cell 6</TD > </TR> </ TABLE></BODY> < HTML>
Output
Adding Headings to Table Cells <HTML> <HEAD> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE> <CAPTION>Creating a Table</CAPTION> <TH>Employee name</TH> <TH>Designation</TH> <TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> </TABLE> </BODY> </HTML>
Output
Formatting Data in the Cell Align = left Align = center Align = right Align = justify Valign = top Valign = middle Valign = bottom Valign = baseline <TD ALIGN = right VALIGN = bottom>Data Cell 1</TD>
Add Cell Space The CELLSPACING attribute defines the space between cells, in pixels. The CELLPADDING attribute defines spaces wit hin the table cell. <HTML> <HEAD> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 16 CELLPADDING = 6> <CAPTION>Creating a Table</CAPTION> <TH>Employee name</TH> <TH>Designation</TH> <TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> </TABLE> </BODY> </HTML>
Output
Mergers The COLSPAN and ROWSPAN attributes are used to create cells that span more than one row or column. < TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2 CELLPADDING = 6> <CAPTION>Creating a Table</CAPTION> <TH ALIGN = CENTER COLSPAN = 3>Quarter 1</TH> <TH ALIGN = CENTER COLSPAN = 3>Quarter2 </TH> <TR>
Inserting Images The IMG tag <IMG SRC="C:\windows\clouds.gif"> <IMG ALIGN=position SRC="PICTURE.GIF"> where position is either TOP, BOTTOM, or MIDDLE. <BODY BACKGROUND="c:\windows\clouds.gif">
Continue.. Scrolling <BODY BACKGROUND="c:\windows\clouds.gif" BGPROPERTIES=FIXED> Hyperimages <A HREF="c:\Doc1.htm"> <IMG SRC="C:\Clouds.gif" border = 0 ALT="Link to Document 1"> </A>
Frames Frames are created using the FRAMESET. The attributes are: Rows Cols
Continue.. The attributes of the FRAME element include: name src noresize scrolling frameborder marginwidth marginheight
Continue.. <HTML> <HEAD> <TITLE>Using frames</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src ="scroll1.htm" noresize > <FRAME src ="x.htm"> </FRAMESET> <FRAME src ="c:\ winxp\clouds.gif "> </FRAMESET></HTML>
Output
Nested frame sets <HTML> <HEAD> <TITLE>Nested Frames</TITLE> </HEAD> <FRAMESET cols="33%, 33%, 34%"> <FRAME src = "scroll1.htm"> <FRAMESET rows="40%, 50%"> <FRAME src = "x.htm"> <FRAME src = "y.htm"> </FRAMESET> <FRAME src = "c:\ winxp\clouds.gif "> </FRAMESET> </HTML>
Output
The NOFRAMES element <HTML> <FRAMESET COLS="40%,60%"> <FRAME SRC="IMAGES.HTM" NAME="Images" SCROLLING="yes"> <FRAMESET ROWS="60,*"> <FRAME SRC="LOGO.HTM" NAME="Logo" SCROLLING="no" FRAMEBORDER="no"> <FRAME SRC="IMAGE1.HTM" NAME="Main"> <NOFRAMES> Frames are not being displayed. Click here <A href ="main.htm">for a non-frames version.</A> </NOFRAMES> </FRAMESET> </FRAMESET></HTML>
Inline frames: the IFRAME element Attribute Name Width Height
Continue.. <HTML> <P> This good fun. You have been learning about frames <BR> <BR> <IFRAME src="scroll2.htm" width="100" height="150“ scrolling="auto" frameborder="1"> [The browser does not support frames or is currently configured not to display frames. The <A href="scroll1.htm">related</A>] </IFRAME> <BR> <P><FONT color = hotpink>The above is an inline frame </HTML>
Output
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 14
- Slides 27
- Age 443 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views