0
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Internet Fundamental & Applications

By
Balaganesh
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

HTML
• HTML stands for Hypertext Markup Language, ...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

HTML Basic Structure

<HTML>
<HEAD>
<TITLE> Qi’s w...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

The basic structure for all HTML documents is simp...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

BODY Element
<BODY attributename="attributevalue">...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Generic Attributes

Attribute Options

1/26/2014

...
Subject Name
Internet Fundamental and Applications

Code

Headings

Credit Hours

<H1 ...> text </H1> -- largest of the si...
Subject Name
Internet Fundamental and Applications

Code

Headings

Credit Hours

<HTML>
<HEAD>
<TITLE>Document Headings</...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

<P> Paragraph
•
•
•
•
•
•

<P> defines a paragraph...
Subject Name
Internet Fundamental and Applications

Code

<BODY>
<P>Here is some text </P>
<P ALIGN="center"> Centered tex...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Colors
• Values for BGCOLOR and COLOR
– many are p...
Subject Name
Internet Fundamental and Applications

Code

Fonts

Credit Hours

<FONT COLOR="red" SIZE="2" FACE="Times Roma...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Ordered (Numbered) Lists

<OL TYPE="1">
<LI> Item ...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Unordered (Bulleted) Lists

<UL TYPE="disc">
<LI> ...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Physical Character Styles

<H1>Physical Character ...
Subject Name
Internet Fundamental and Applications

Code
Logical
Character
Styles

Credit Hours

<H1>Logical Character Sty...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

<A> Anchors (HyperLinks)

Link to an absolute URL:...
Subject Name
Internet Fundamental and Applications

Code

Naming a Section

Credit Hours

<H2> <A NAME="#references"> Our ...
Subject Name
Internet Fundamental and Applications

Code

Hyperlinks

Credit Hours

<BODY>
<H3>Welcome to <A HREF="http://...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Images
• SRC is required
• WIDTH, HEIGHT may be in...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Images
Align=position

Image/Text Placement

Left
...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Images
<BODY>
<img src="dolphin.jpg" align="left" ...
Subject Name
Internet Fundamental and Applications

Code

ALIGN="left"

Credit Hours

23
Subject Name
Internet Fundamental and Applications

Code

ALIGN="right"

Credit Hours

24
Subject Name
Internet Fundamental and Applications

Code

ALIGN=“bottom"

Credit Hours

25
Subject Name
Internet Fundamental and Applications

Code

Tables

Credit Hours

<TABLE> table tag
<CAPTION> optional table...
Subject Name
Internet Fundamental and Applications

Code

Tables

Credit Hours

<TABLE BORDER=1>
<CAPTION>Table Caption</C...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

<TABLE> Element Attributes
• ALIGN=position -- lef...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

• cellspacing=10

• cellpadding=10

29
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

<TABLE> Element Attributes
BGCOLOR=color -- backgr...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

<TR> Table Row Attributes

Valid for the table row...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

<TD> Table Cell Attributes

Valid for the table ce...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Frames
• Frames help control navigation and displa...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Frames
– MARGINWIDTH – left/right margins
– MARGIN...
Subject Name
Internet Fundamental and Applications

Code

Frames

Credit Hours

<FRAMESET ROWS="75%,25%">
<FRAMESET COLS="...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Frames
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Frames
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, ...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Sample Code for Frames

Framesample.html
<frameset...
Subject Name
Internet Fundamental and Applications

Cascading Style Sheets

Code

Credit Hours

CSS

CSS information can b...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Sample Code for CSS

CSS2.css
h1 {color:blue;}
p {...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

Type of web pages
• A static web page is a page th...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

• Forms are a characteristic of the HTML
standard ...
Subject Name
Internet Fundamental and Applications

Code

Credit Hours

• <html>
•
<head><title>My first web site
</title>...
Subject Name
Internet Fundamental and Applications

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

Code

<input type ="checkbox" name="o...
Upcoming SlideShare
Loading in...5
×

Comp 111chp iv vi

2,287

Published on

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,287
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
224
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Comp 111chp iv vi"

  1. 1. Subject Name Internet Fundamental and Applications Code Credit Hours Internet Fundamental & Applications By Balaganesh
  2. 2. Subject Name Internet Fundamental and Applications Code Credit Hours HTML • HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language. •  Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. •  Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display. 1/26/2014 Balaganesh -Lincoln University 2
  3. 3. Subject Name Internet Fundamental and Applications Code Credit Hours HTML Basic Structure <HTML> <HEAD> <TITLE> Qi’s web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML> 3
  4. 4. Subject Name Internet Fundamental and Applications Code Credit Hours The basic structure for all HTML documents is simple and should include the following minimum elements or tags:  <html> - The main container for HTML pages  <head> - The container for page header information  <title> - The title of the page  <body> - The main body of the page 1/26/2014 Balaganesh -Lincoln University 4
  5. 5. Subject Name Internet Fundamental and Applications Code Credit Hours BODY Element <BODY attributename="attributevalue"> • Deprecated attributes (but still used) – BACKGROUND=“Sunset.jpg” (can be tiled) – BGCOLOR=color – TEXT=color – LINK=color (unvisited links) – VLINK=color (visited links) – ALINK=color (when selected) 5
  6. 6. Subject Name Internet Fundamental and Applications Code Credit Hours Generic Attributes Attribute Options 1/26/2014 Function Balaganesh -Lincoln University 6
  7. 7. Subject Name Internet Fundamental and Applications Code Headings Credit Hours <H1 ...> text </H1> -- largest of the six <H2 ...> text </H2> <H3 ...> text </H3> <H4 ...> text </H4> <H5 ...> text </H5> <H6 ...> text </H6> -- smallest of the six ALIGN="position" --left (default), center or right 7
  8. 8. Subject Name Internet Fundamental and Applications Code Headings Credit Hours <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="center">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="right">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML> 8
  9. 9. Subject Name Internet Fundamental and Applications Code Credit Hours <P> Paragraph • • • • • • <P> defines a paragraph Add ALIGN="position" (left, center, right) Multiple <P>'s do not create blank lines Use <BR> for blank line Fully-specified text uses <P> and </P> But </P> is optional 9
  10. 10. Subject Name Internet Fundamental and Applications Code <BODY> <P>Here is some text </P> <P ALIGN="center"> Centered text </P> <P><P><P> <P ALIGN="right"> Right-justified text <! Note: no closing /P tag is not a problem> </BODY> Credit Hours 10
  11. 11. Subject Name Internet Fundamental and Applications Code Credit Hours Colors • Values for BGCOLOR and COLOR – many are predefined (red, blue, green, ...) – all colors can be specified as a six character hexadecimal value: RRGGBB – FF0000 – red – 888888 – gray – 004400 – dark green – FFFF00 – yellow 11
  12. 12. Subject Name Internet Fundamental and Applications Code Fonts Credit Hours <FONT COLOR="red" SIZE="2" FACE="Times Roman"> This is the text of line one </FONT> <FONT COLOR="green" SIZE="4" FACE="Arial"> Line two contains this text </FONT> <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text </FONT> Note: <FONT> is now deprecated in favor of CSS. 12
  13. 13. Subject Name Internet Fundamental and Applications Code Credit Hours Ordered (Numbered) Lists <OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL> 13
  14. 14. Subject Name Internet Fundamental and Applications Code Credit Hours Unordered (Bulleted) Lists <UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL> 14
  15. 15. Subject Name Internet Fundamental and Applications Code Credit Hours Physical Character Styles <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR> 15
  16. 16. Subject Name Internet Fundamental and Applications Code Logical Character Styles Credit Hours <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM> 16
  17. 17. Subject Name Internet Fundamental and Applications Code Credit Hours <A> Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact <A HREF="htttp:www.microsoft.com"> Microsoft </A> to report the problem. Link to a relative URL: See these <A HREF="#references"> references </A> concerning our fine products. Link to a section within a URL: Amazon provided a <A HREF="www.amazon.com/#reference"> reference for our company. </A> 17
  18. 18. Subject Name Internet Fundamental and Applications Code Naming a Section Credit Hours <H2> <A NAME="#references"> Our References </A> </H2> Example 18
  19. 19. Subject Name Internet Fundamental and Applications Code Hyperlinks Credit Hours <BODY> <H3>Welcome to <A HREF="http://www.cs.virginia.edu"> <STRONG>Computer Science</STRONG></A> at the <A HREF="www.virginia.edu">University of Virginia.</A> </H3> </BODY> 19
  20. 20. Subject Name Internet Fundamental and Applications Code Credit Hours Images • SRC is required • WIDTH, HEIGHT may be in units of pixels or percentage of page or frame – WIDTH="357" – HEIGHT="50%" • Images scale to fit the space allowed 20
  21. 21. Subject Name Internet Fundamental and Applications Code Credit Hours Images Align=position Image/Text Placement Left Image on left edge; text flows to right of image Right Image on right edge; text flows to left Top Image is left; words align with top of image Bottom Image is left; words align with bottom of image Middle Words align with middle of image 21
  22. 22. Subject Name Internet Fundamental and Applications Code Credit Hours Images <BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!"> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML> 22
  23. 23. Subject Name Internet Fundamental and Applications Code ALIGN="left" Credit Hours 23
  24. 24. Subject Name Internet Fundamental and Applications Code ALIGN="right" Credit Hours 24
  25. 25. Subject Name Internet Fundamental and Applications Code ALIGN=“bottom" Credit Hours 25
  26. 26. Subject Name Internet Fundamental and Applications Code Tables Credit Hours <TABLE> table tag <CAPTION> optional table title <TR> table row <TH> table column header <TD> table data element 26
  27. 27. Subject Name Internet Fundamental and Applications Code Tables Credit Hours <TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR> <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR> </TABLE> 27
  28. 28. Subject Name Internet Fundamental and Applications Code Credit Hours <TABLE> Element Attributes • ALIGN=position -- left, center, right for table • BORDER=number -- width in pixels of border (including any cell spacing, default 0) • CELLSPACING=number -- spacing in pixels between cells, default about 3 • CELLPADDING=number -- space in pixels between cell border and table element, default about 1 • WIDTH=number[%]-- width in pixels or percentage of page/frame width 28
  29. 29. Subject Name Internet Fundamental and Applications Code Credit Hours • cellspacing=10 • cellpadding=10 29
  30. 30. Subject Name Internet Fundamental and Applications Code Credit Hours <TABLE> Element Attributes BGCOLOR=color -- background color of table, also valid for <TR>, <TH>, and <TD> RULES=value -- which internal lines are shown; values are none, rows, cols, and all (default) EX: <TABLE COLS=“40%, *,*”> <TABLE ROWS=“*,*”> 30
  31. 31. Subject Name Internet Fundamental and Applications Code Credit Hours <TR> Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color <TABLE ALIGN="center" WIDTH="300" HEIGHT="200"> <TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD> <TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD> <TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD> </TABLE> 31
  32. 32. Subject Name Internet Fundamental and Applications Code Credit Hours <TD> Table Cell Attributes Valid for the table cell: colspan -- how many columns this cell occupies rowspan – how many rows this cell occupies <TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1"> <TR> <TD colspan="1" rowspan="2">a</TD> <TD colspan="1" rowspan="1">b</TD> </TR> <TR> <TD colspan="1" rowspan="1">c</TD> </TR> </TABLE> 32
  33. 33. Subject Name Internet Fundamental and Applications Code Credit Hours Frames • Frames help control navigation and display • <FRAME> attributes include – FRAMEBORDER – yes or 1 for borders – FRAMESPACING – width of border – BORDERCOLOR – color – SRC – location of HTML to display in frame – NAME – destination for TARGET attribute 33
  34. 34. Subject Name Internet Fundamental and Applications Code Credit Hours Frames – MARGINWIDTH – left/right margins – MARGINHEIGHT – top/bottom margins – SCROLLING – yes or 1 adds scroll bar – NORESIZE – yes or 1 disables resizing 34
  35. 35. Subject Name Internet Fundamental and Applications Code Frames Credit Hours <FRAMESET ROWS="75%,25%"> <FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> </FRAMESET> 35
  36. 36. Subject Name Internet Fundamental and Applications Code Credit Hours Frames <FRAMESET ROWS="25%,75%" <FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> </FRAMESET> 36
  37. 37. Subject Name Internet Fundamental and Applications Code Credit Hours Frames <FRAMESET ROWS="*,*"> <FRAMESET COLS="15%, 2*, *"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET> <FRAMESET COLS="40%, *"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET> </FRAMESET> 37
  38. 38. Subject Name Internet Fundamental and Applications Code Credit Hours Sample Code for Frames Framesample.html <frameset cols="25%,*"> <frame src="file:///C:/Users/BAGA/Desktop/menu.html"> <frame src="file:///C:/Users/BAGA/Desktop/menu.html" name=main> </frameset> Menu.HTML <html> <head></head> <Body> <H1> Menu</H1> <a href="file:///C:/Users/BAGA/Desktop/first.html" target=main>First</a><br> <a href="file:///C:/Users/BAGA/Documents/first1.html"target=main>Second</a> </Body> </html>
  39. 39. Subject Name Internet Fundamental and Applications Cascading Style Sheets Code Credit Hours CSS CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.
  40. 40. Subject Name Internet Fundamental and Applications Code Credit Hours Sample Code for CSS CSS2.css h1 {color:blue;} p {color:blue;} Hr {color:blue;size:7;} h2{color:yellow;} any.HTML <html> <head> <link rel="stylesheet" type="text/css" href=“css2.css"> </head> <body> <hr> <h1>A heading</h1> <h2> H2 heading</h2> <h3> This is H3 heading</h3> <hr> <p>A paragraph kjehqw kjehk kjhdqw kkejd kjb jhdg.</p> </body>
  41. 41. Subject Name Internet Fundamental and Applications Code Credit Hours Type of web pages • A static web page is a page that is always the same on the web server unless someone changes the HTML code and uploads that page to the server. The end user will always see the same thing. A dynamic page is a page that uses some kind of server side scripting language such as PHP or ASP. The page is dynamically created on the fly by the server based on user actions. This kind of page is mostly used in database driven sites such as online stores, forums and/or membership sites. 1/26/2014 Balaganesh -Lincoln University 41
  42. 42. Subject Name Internet Fundamental and Applications Code Credit Hours • Forms are a characteristic of the HTML standard that let authors collect information provided by the visitors. These forms can be useful to collect personal information, contact information, preferences, opinions, or any kind of user input the author may need • Using forms tag can manage Dynamic web pages
  43. 43. Subject Name Internet Fundamental and Applications Code Credit Hours • <html> • <head><title>My first web site </title></head> • <body bgcolor= "olive" text= white> • <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> • <input type="text" size="25" value="Enter your name here!"> • Enter Password : <input type="password" size="25"> •
  44. 44. Subject Name Internet Fundamental and Applications • • • • • • • • • • • • • • • • Code <input type ="checkbox" name="option1" value="Male"> Male<br> <input type ="checkbox" name="option2" value="FeMale">FeMale<br> <input type="radio" name="group1" value="A level"> A level<br> <input type="radio" name="group1" value="B level" checked> B level<br> <select> <option>India</option> <option>Malaysia</option> <option>England</option> </select> <textarea cols="40" rows="5" name="myname"> Please enter ur address </textarea> <input type="submit" value="Submit"> </form> </body> </html> Credit Hours
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×