The HTML Beginner Tutorial

827 views

Published on

This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS.

It should be quite easy to follow if you work through each step, which are all brought together at the end, before moving on to the CSS Beginner Tutorial.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
827
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
160
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The HTML Beginner Tutorial

  1. 1. 1
  2. 2. Contents» Getting Started..» What is HTML?» How to create and View an HTML document?» Basic HTML Document Format» The HTML Basic tags 2
  3. 3. What the following term mean: Web server: a system on the internet containg one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in websiteThink about the followings before working your Web pages. Think about the sort of information(content) you want to put on the Web. Set the goals for the Web site. Organize your content into main topics. Come up with a general structure for pages and topics.
  4. 4. What is HTML? Telling the browser what to do, and what props to use. A serises of tags that are integrated into a text document. Tags are ;  surrounded with angle brackets like this  <B> or <I>. Most tags come in pairs  exceptions: <P>, <br>, <li> tags … The first tag turns the action on, and the second turns it off. 4 By Sukh Sandhu
  5. 5.  The second tag(off switch) starts with a forward slash.  For example ,<B> text </B> can embedded, for instance, to do this:  <HEAD><TITLE> Your text </HEAD></TITLE> it wont work.  The correct order is <HEAD><TITLE> Your text </TITLE></HEAD> not case sensitivity. Many tags have attributes.  For example, <P ALIGN=CENTER> centers the paragraph following it. Some browsers dont support the some tags and some attributes. 5
  6. 6. » Clients and Servers» Internet Service Providers» Web Site Hosting Services» Domains Names, URL’s and Ips» Registrars 6By Sukh Sandhu
  7. 7. Clients (Browser) Servers»Internet Explorer »Apache»Firefox »Microsoft»Mozilla »Netscape»Netscape »zeus»Opera »AOLserver»Amaya »AV»AOL »JavaWebServer»MSN »Oracle 7By Sukh Sandhu
  8. 8. » Clients and Servers» Internet Service Providers» Web Site Hosting Services» Domains Names, URL’s and Ips» Registrars 8By Sukh Sandhu
  9. 9. »Phone Company »Basic internet»AOL connection»Earthlink »Dialup/DSL/Cable/Sat»Verizone »Email»NetZero 9 By Sukh Sandhu
  10. 10. » Clients and Servers» Internet Service Providers» Web Site Hosting Services» Domains Names, URL’s and Ips» Registrars 10By Sukh Sandhu
  11. 11. Computer (server) farmWeb server softwareFirewall hardware and softwareIT services˃ (Backup, troubleshooting, hardware repair)Disk spaceBandwidth / connection to internetRouters and switchersEmail server / storage 11By Sukh Sandhu
  12. 12. » Clients and Servers» Internet Service Providers» Web Site Hosting Services» Domains Names, URL’s and Ips» Registrars 12By Sukh Sandhu
  13. 13. » Domain name: The specific address of a computer on the Internet ˃ microsoft.com» Uniform Resource Locator (URL): ˃ http://www.microsoft.com/faqs.html» Internet protocol (IP) address ˃ 192.168.1.1 13By Sukh Sandhu
  14. 14. » Clients and Servers» Internet Service Providers» Web Site Hosting Services» Domains Names, URL’s and Ips» Registrars 14By Sukh Sandhu
  15. 15. » A company that provides domain name registration services for a fee.» Maintain database which maps domain names to IP’s» Propagate new domain name/IP address information across the internet 15By Sukh Sandhu
  16. 16. 1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Tell Registrar the IP address5. Create web content6. Store (publish) onto hosting server (FTP)7. Submit new site to search engines 16By Sukh Sandhu
  17. 17. 1. Visitor-centric, clear purpose2. Progressive disclosure3. Displays quickly4. Browser compatible5. Intuitive navigation6. Spelling, grammar, writing7. Secure (eCommerce)8. Attractive design, easy to read9. Cultural bias? (Regional? Domestic? International?)10. No technical problems (broken links, buggy scripts)11. Maintainable (separate content from style)12. Search Engine Accessible 17 By Sukh Sandhu
  18. 18. » Markup Languages ˃ HTML, DHTML, XML, XSLT, etc....» Cascading Style Sheets (CSS)» Scripting languages ˃ perl,javascript,php, etc....» Web creation and editing software ˃ Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc.. 18By Sukh Sandhu
  19. 19. Derived from SGML(Standard Generalized Markup Language )» HyperText Markup Language 19By Sukh Sandhu
  20. 20. » Clear text, case insensitive» Ignores white space» Comprised of tags <tag />» Open tags and closed tags 20By Sukh Sandhu
  21. 21. Open tags˃<name attributes/>˃<hr/>, <br/>˃<img src=“url” width=‘100px’ height=’60px’/>Closed tags˃<name attributes> stuff </name>˃<b>text to be bolded</b>˃<h1>level 1 heading text</h1>Comments < ! - - comment text -- > 21By Sukh Sandhu
  22. 22. < HTML > Header Body < / HTML> 22By Sukh Sandhu
  23. 23. <html><head> <title> The title of your html page </title> <meta_tags/></head><body> <! - - your web page content and markup - -></body></html> 23By Sukh Sandhu
  24. 24. header<body> Hello world</body> 24By Sukh Sandhu
  25. 25. header<body> Sukh Sandhu 71 Gentles Avenue Campbellfield, Victoria</body> 25By Sukh Sandhu
  26. 26. header<body> <b>Sukh Sandhu</b><br> 71 Gentles Avenue<br> Campbellfield, Victoria <br></body> 26By Sukh Sandhu
  27. 27. header<body> <font face=“Arial,Times,Courier” color=“red” size=“3”> <b>Sukh Sandhu</b><br> 71 Gentles Avenue<br> Campbellfield, Victoria <br></font></body> 27 By Sukh Sandhu
  28. 28. header<body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Sukh Sandhu</b><br> 71 Gentles Avenue<br> Campbellfield, Victoria <br></font> </p></body> 28 By Sukh Sandhu
  29. 29. header<body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Sukh Sandhu</b><br> 71 Gentles Avenue<br> Campbellfield, Victoria <br></font> </p> <img src=‘http://photos.academia.edu/440204/141167/163626/la rge_sukh.sandhu.jpg’/></body> 29 By Sukh Sandhu
  30. 30. header<body> <p align=‘center’> <font face=‘Arial,Lucida Sans’ color=‘red’ size=3> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> src=‘http://photos.academia.edu/440204/141167/163626/large_sukh.sand hu.jpg’/> <a href=‘http://www.sukh.co’>Read my Bio</a></body> 30 By Sukh Sandhu
  31. 31. ANCHORS (Hypertext Link)<A href=“url” attributes>Displayed text </A>Attributes» NAME = “text”» TITLE = "text"» TARGET = “frame_name|window_name” 31 By Sukh Sandhu
  32. 32. <a href=“mywebpage.html” target=“window2” >Click this link </a> Click this link opens mywebpage.h tml in the window / f rame named “windo w2” window2 32 By Sukh Sandhu
  33. 33. <BODY LINK=color, VLINK=color, ALINK=color ><BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” ><BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” > 33By Sukh Sandhu
  34. 34. » Cathode Ray Tubes (CRT) 34By Sukh Sandhu
  35. 35. color = “red” (Browser compatibility issues)color = “#FF0000”values vary from 00 to FF (hexadecimal)0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f #FF FF FF Red Blue Green 35 By Sukh Sandhu
  36. 36. Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text.<h1>Heading 1 level text</h1><h2>Heading 2 level text</h2><h3>Heading 3 level text</h3><h4>Heading 4 level text</h4><h5>Heading 5 level text</h5><h6>Heading 6 level text</h6> 36By Sukh Sandhu
  37. 37. Unordered list Ordered list<ul> <ol type=‘i’ start=‘2’> <li>apples</li> <li>apples</li> <li>bananas</li> <li>bananas</li> <li>grapes</li> <li>grapes</li> <li>strawberries</li> <li>strawberries</li </ol>></ul> 37By Sukh Sandhu
  38. 38. Unordered list Ordered list»apples II. apples»bananas III. bananas»grapes IV. grapes»strawberries V. strawberries 38By Sukh Sandhu
  39. 39. <TABLE> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> 39</TABLE> By Sukh Sandhu
  40. 40. 40By Sukh Sandhu
  41. 41. BORDER=valueALIGN=left|right|centerCELLSPACING=valueCELLPADDING=valueWIDTH=value|percent 41By Sukh Sandhu
  42. 42. <TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT"> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR></TABLE> 42 By Sukh Sandhu
  43. 43. Student Grade Tom B- Sue A+ Class Grade sBy Sukh Sandhu 43
  44. 44. rowspan and colspan By Sukh Sandhu 44
  45. 45. <TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center"> <TR> <TD colspan=2 align=center> <font color="red"><b>Student Grades</b></font> </TD> </TR> <TR> <TD><b>Student</b></TD> <TD><b>Grade</b></TD> </TR> <TR> <TD>Tom</TD> <TD rowspan=2>A</TD> </TR> <TR> <TD>Sue</TD> </TR></TABLE> 45 By Sukh Sandhu
  46. 46. Student GradesStudent GradeTom ASue By Sukh Sandhu 46
  47. 47. 1280 x 1024 1024 x 768 800 x 600 640 x 480 47By Sukh Sandhu
  48. 48. »Tables are frequently used to layout the basic web page design. 1280 By Sukh Sandhu 64 48
  49. 49. » Basic Frames» Floating Frames (inline frames)» Picture in picture» Frames let you divide a screen into windows with each window viewing a different web page. 49By Sukh Sandhu
  50. 50. BannerMenu Content Footer By Sukh Sandhu 50
  51. 51. Basic tags<frameset> ..</frameset><frame /><noframes> .. </noframes>Basic attributescols = “values”rows = “values”name = “frame_name”src = “frame_source(url)”target = “frame_name” 51By Sukh Sandhu
  52. 52. BannerMenu Content Footer By Sukh Sandhu 52
  53. 53. <frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /></frameset> 53By Sukh Sandhu
  54. 54. <frameset rows=“80,*,80”> <frame src=“banner.html” /> <frameset cols = “25%,75%” > <frame src=“menu.html” /> <frame src=“content.html” /> </frameset> <frame src=“footer.html” /><noframes> <body> Welcome to my page. <A HREF="noframes.htm">Continue</A> to the frame-free version. </body></noframes></frameset> 54 By Sukh Sandhu
  55. 55. FRAMESET attributesFRAMEBORDER="yes|no"|0BORDER=pixelsBORDERCOLOR="#hexcolor|colorname"< frameset rows="80,*,80" border=2 bordercolor=“red" > .. ..</frameset> 55By Sukh Sandhu
  56. 56. Individual FRAME attributes» SCROLLING="yes|no|auto"» NORESIZE» MARGINWIDTH=pixels» MARGINHEIGHT="pixels"» BORDERCOLOR="color"» FRAMESPACING="pixels"» FRAMEBORDER="yes|no"|0» NAME=“frame_name” 56 By Sukh Sandhu
  57. 57. » Floating frames allow you to create a frame within the boundaries of a pageBasic Frames Floating Frames 57 By Sukh Sandhu
  58. 58. <IFRAME attributes ></IFRAME>AttributesSRC=URLHEIGHT=pixels|percent,WIDTH=pixels|percentHSPACE=pixelsVSPACE=pixelsALIGN=left|rightFRAMEBORDER=0 58By Sukh Sandhu
  59. 59. <IFRAME NAME=“frame_name” ALIGN="right" HSPACE=“40” VSPACE=“40” WIDTH="75%" HEIGHT=“150” FRAMEBORDER=0 SRC=http://www.mysite/mypage.htm ></IFRAME> 59By Sukh Sandhu
  60. 60. <a href=“page.html” target=“blank” >Click this link </a>˃Creates new window for the page<a href=“page.html” target=“parent” >Click this link </a>˃Opens page in the parent frame/wind of this frame/window<a href=“page.html” target=“top” >Click this link </a>˃Opens page in top most frame/window 60By Sukh Sandhu
  61. 61. » Allows you create a position-able block of content. Content positioned within this block 61By Sukh Sandhu
  62. 62. <div attributes> content </div>attributes» ID=“name”» STYLE = “style parameters re: CSS” 62By Sukh Sandhu
  63. 63. < DIV ID=“fred” STYLE = “POSITION:absolute|relative; VISIBILITY:visible:hidden; Z-INDEX:number; WIDTH:width in pixels; HEIGHT:height in pixels; TOP:pixels from top of page or block; LEFT:pixels from left edge of page or block; PADDING:margin in pixels; other style attributes; “ > content</DIV> 63 By Sukh Sandhu
  64. 64. content content content contentc content content content 64By Sukh Sandhu
  65. 65. <div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; "> 65By Sukh Sandhu
  66. 66. <HTML> <HEAD> <TITLE> Qi’s web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY></HTML> 66
  67. 67. <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) 67
  68. 68. <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 sixALIGN="position" --left (default), center or right 68
  69. 69. <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> 69
  70. 70. » <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 70
  71. 71. <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> 71
  72. 72. <PRE>if (a < b) { a++; b = c * d;}else { a--; b = (b-1)/2;}</PRE> 72
  73. 73. Character Use< &lt;> &gt;& &amp;" &quot;Space &nbsp; 73
  74. 74. » 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 74
  75. 75. <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. 75
  76. 76. <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> 76 </OL></OL>
  77. 77. <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> 77 </UL></UL>
  78. 78. <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> 78<INS>Insert</INS><BR>
  79. 79. <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> 79<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>
  80. 80. 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: 80Amazon provided a <A HREF="www.amazon.com/#reference">reference for our company. </A>
  81. 81. <H2> <A NAME="#references"> Our References </A> </H2>Example 81
  82. 82. <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> 82
  83. 83. » 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 83
  84. 84. Align=position Image/Text PlacementLeft Image on left edge; text flows to right of imageRight Image on right edge; text flows to leftTop Image is left; words align with top of imageBottom Image is left; words align with bottom of imageMiddle Words align with middle of image 84
  85. 85. <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> 85 </BODY></HTML>
  86. 86. 86
  87. 87. 87
  88. 88. 88
  89. 89. <TABLE> table tag<CAPTION> optional table title<TR> table row<TH> table column header<TD> table data element 89
  90. 90. <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> 90
  91. 91. » 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 91
  92. 92. » cellspacing=10» cellpadding=10 92
  93. 93. BGCOLOR=color -- background color of table, also validfor <TR>, <TH>, and <TD>RULES=value -- which internal lines are shown; values arenone, rows, cols, and all (default)EX: <TABLE COLS=“40%, *,*”> <TABLE ROWS=“*,*”> 93
  94. 94. Valid for the table row:ALIGN -- left, center, rightVALIGN -- top, middle, bottomBGCOLOR -- 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> 94<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD></TABLE>
  95. 95. Valid for the table cell:colspan -- how many columns this cell occupiesrowspan – 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> 95
  96. 96. » 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 96
  97. 97. ˃ MARGINWIDTH – left/right margins˃ MARGINHEIGHT – top/bottom margins˃ SCROLLING – yes or 1 adds scroll bar˃ NORESIZE – yes or 1 disables resizing 97
  98. 98. <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> 98
  99. 99. <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> 99
  100. 100. <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> 10 0
  101. 101. » A powerful way to specify styles and formatting across all documents in a web site» Style sheets can be specified inline or as a separate document» Helps to keep a common look and feel 10 1
  102. 102. » General form: selector {property: value} or selector {property1: value1; property2: value2; ... propertyn: valuen } 10 2
  103. 103. H1 {text-align: center; color: blue; font: Arial, Times New Roman}P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics} 10 3
  104. 104. <HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD> <BODY> <H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A> ... </BODY> </HTML> 10 4From: Core Web Programming, Marty Hall and Larry Brown, © 2002
  105. 105. Styles enable you to define a consistent look for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.Style sheet syntax is made up of three parts: selector {property: value} selector = element.class 10 5By Sukh Sandhu
  106. 106. H1 {text-align: center; color: blue}A {color:green; font-familiy:arial,courier; font-weight:bold;}td { align:center; background-color:grey; border-color:red;}div {position:absolute; visibily:hidden; margin:10px }font {color:navy; font-size:2pt; font-face:trebuchet; }hr {color:#ff0000; width:80%; align:center; }table {width:80%; align:center; border:2px; padding:5px; } 10 6 By Sukh Sandhu
  107. 107. H1 {text-align: center; color: blue}H1.widget {text-align: center; color: red; font-size:80%; }A {color:green; font-familiy:arial,courier; font-weight:bold;}A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;}td { align:center; background-color:grey; border-color:red;}td.figure { align:right; background-color:white; border-color:black;}font {color:navy; font-size:2pt; font-face:trebuchet; }font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; }element.class {property:value; } 10 7By Sukh Sandhu
  108. 108. <head> <title> My Page Title </title> <style TYPE="text/css > <! - - element.class { property:value; } element.class { property:value; } --> </style></head> 10 8By Sukh Sandhu
  109. 109. Styles can be defined in a separate file<font style=“property:value; “> text </font><font class=“fred”> text </font>mystyles.css<head><LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css"></head> 10 9 By Sukh Sandhu
  110. 110. /* Example style sheet file (note how this comment was created) */BODY {background: #FFFFD8; margin-top: 20}A:link {color: #400080; background: #FFFFD8}H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; }font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; }/* End of example style sheet file */ 11 0By Sukh Sandhu
  111. 111. Styles can be placed within individual elements<font style=“color:red; font-face:ariel;” > 11 1By Sukh Sandhu
  112. 112. Inline > Embedded > LinkedDefining the style of your text» linked -> font-family:arial,georgia;» embedded -> color:navy;» inline -> font-size:2pt; 11 2By Sukh Sandhu
  113. 113. Using IDsIDs enable you to define a unique style which you can apply to a number of elements.<STYLE><!– #copyright {font-style:italic; font-size:smaller; }--></STYLE><p ID=“copyright”> Any textual content </p> 11 3By Sukh Sandhu
  114. 114. <img src=“images/pic1.jpg” width=75px, height=50px /><img class=“pics” src=“images/pic1.jpg” />img.pics { width:75px; height:50px; border-width:3px } 11 4By Sukh Sandhu
  115. 115. » Images take longer to download than text» The larger the image, the slower the page» Use optimization software» Use thumb nail images 11 5By Sukh Sandhu
  116. 116. Page background (not recommended)˃<body background-image = “url” >˃<body class=“background”> – body.background { background-image:$url; }Table background˃<table background-image=“url”>˃<table class=“background”> – table.background { backlground-image:url; }DIV background˃<div style={ background-image:url; } > 11 6By Sukh Sandhu
  117. 117.  .NET (dotnet) .NET Microsoft .NET ASP .NET Mobile»HTML Tutorials »XML Tutorials  MultimediaLearn HTML Learn XML Learn MediaLearn XHTML Learn XSLLearn CSS Learn XSLT Learn SMILLearn TCP/IP Learn XSL-FO Learn SVG Learn XPath Learn Flash»Browser Scripting Learn XQueryLearn JavaScript Learn XLinkLearn DHTML Learn XPointerLearn VBScript Learn DTD  Web BuildingLearn HTML DOM Learn Schema Web BuildingLearn WMLScript Learn XML DOM Learn XForms Web W3C»Server Scripting Learn SOAP Web BrowsersLearn SQL Learn WSDLLearn ASP Learn RDF Web QualityLearn ADO Learn RSS Web SemanticLearn PHP Learn WAP Web Careers Web Hosting 11 Web Certification 7 By Sukh Sandhu
  118. 118. Basic HTML Document Format<HTML> See what it<HEAD> looks like:<TITLE>WENT99</TITLE></HEAD><BODY> Went99</BODY></HTML> 11 8 By Sukh Sandhu
  119. 119. How to Create and View an HTML document? 1.Use an text editor such as Editpad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Netscape (or any browser) Off-Line 4.Switch to Netscape 5.Click on File, Open File and select the filename.html document that you just created. 6.Your HTML page should now appear just like any other Web page in Netscape. 11 9 By Sukh Sandhu
  120. 120. 7.You may now switch back and forth between the Source and the HTML Document  switch to Notepad with the Document Source  make changes  save the document again  switch back to Netscape  click on RELOAD and view the new HTML Document  switch to Notepad with the Document Source...... 12 0By Sukh Sandhu
  121. 121. Tags in head <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browsers title bar. 12 1 By Sukh Sandhu
  122. 122. Tags in BodyLets talk Text  Heading: <H1> </H1>  Center:<Center> </Center>  Line Break <P> ,<Br>  Phrase Markups: <I></I> ,<B></B>Create a List  Unordered list : <UL><li>  Ordered list: <OL><li>  Nested 12 2 By Sukh Sandhu
  123. 123. Add Images  Use <IMG SRC=imagefilename> tags  How to specify Relative pathnames  Attributes of IMG tag -width,height -Alt -Align -<Img src=my.gif width=50 height=50 align=right alt=“My image”> 12 3 By Sukh Sandhu
  124. 124. Add some Link  Use <A href=filename|URL></a>tags  How to specify Relative pathnames  Kinds of URLs -http://www.women.or.kr - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net - mailto:skrhee@women.or.kr 12 4 By Sukh Sandhu
  125. 125. How to make colors changes?  Hexadecimal number :  Color names : <Font color=white>  Changing the Background color <BODY BGCOLOR=#19378a>  Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff>  Spot color <FONT COLOR=#66ffcc>WENT99</FONT>  Image Background <BODY BACKGROUND=bgimg.gif > 12 5 By Sukh Sandhu
  126. 126. How to specify Relative pathnames The current HTML document is my.html and the current directory is Iam C:- Iam -my.html -your.html Type this ; <A href=your.html>Your link </A> C:- Iam -my.html Child -your.html Type this ; <A href=Child/your.html>Your link </A> C:-  Iam -my.html  Sister -your.html Type this ; <A href=../Sister/your.html>Your link </A> C:-  Mother -your.html  Iam -my.html Type this ; <A href=../your.html>Your link </A> 12 6 By Sukh Sandhu
  127. 127. How to specify Relative pathnamesThe HTML document is my.html and the image file is dragonfly.gif C:-  Iam -my.html ☞ Type this ; <IMG SRC=dragonfly.gif> -dragonfly.gif C:-  Iam -my.html ☞ Type this ; <IMG SRC=Image/dragonfly.gif>  Image -dragonfly.gif C:-  Iam -my.html ☞ Type this ; <IMG SRC=../Image/dragonfly.gif>  Image -dragonfly.gif C:-  Image -dragonfly.gif ☞ Type this ; <IMG SRC=../dragonfly.gif>  Iam -my.html By Sukh Sandhu

×