Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

HTML for IT1 Course

  • Be the first to comment

  • Be the first to like this


  1. 1. HTML IT1 Course Slide Instructor: Majid Taghiloo١ IT1 Majid Taghiloo
  2. 2. Why Learn HTML1. Its1 It pretty easy to use tt t2. Standards for HTML expanding rapidly / Web editors not always up to date with standards3. Web editors have their own way of doing things – taking away control from the user at times4.4 Dynamic features of Web page development that facilitate interactivity such as CGI’s, Java etc., require a knowledge of HTML to , q g integrate them and implement them on Web pages.٢ IT1 Majid Taghiloo
  3. 3. Using Notepad to develop HTML  pagesStep 1, Develop HTML pages in p Notepad٣ IT1 Majid Taghiloo
  4. 4. Step 2 Save to your area as a HTML 2, file1: Save to Disk (a:drive) or to your network area (h:drive)2: ensure that “Save as type” list box is set to “All Files (*.*) Save type All (* *)”3: add extension (HTM or HTML) preferably in lowercase to filename4: Save it to disk۴ IT1 Majid Taghiloo
  5. 5. Step 3 To view the HTML file using 3,Windows NT Explorer simply doubleclick the file and Internet Explorer or li k nd Inte net E plo e oNetscape will launch and open the filefor you۵ IT1 Majid Taghiloo
  6. 6. Alternatively you can open it directly in Netscape or Internet Explorer by choosing to open the file from the File menu. Later we will look how to FTP your web pages and view them on the internet internet.IT1
  7. 7. Hypertext & Hypermedia yp yp • With hypertext (or hypermedia) information is stored as a set of documents. – With the WWW, documents are often called "pages". pages . – We use the two terms synonymously. • A document contains both information and links to other documents.٧ IT1 Majid Taghiloo
  8. 8. • A hypertext viewer (Browser) will display the information in a document and will allow a user to follow links. + For example, a link may be highlighted so that a user can select the link link. + When a link is followed, the document pointed to by the link is displayed. • Hypertext versus Hypermedia + With hypertext, all information is textual. + With hypermedia, information can consist of text, graphics, pictures, sound, video, etc.. + In the remainder of these notes we will use the term "hypertext", hypertext but unless otherwise stated, we are also referring to hypermedia. • With the Internet we use HTML to write hypertext pages. • We W use a bbrowser t display pages. to di l٨ + In particular, a browser allows us to follow links to other pages. IT1 Majid Taghiloo
  9. 9. • In general, HTML pages can reside on different computers. + These pages can be retrieved over the Internet. + The only significant difference between local and remote pages is the time taken to load them. • However, on this part of the course we will assume that all pages reside on the same computer. + Typically, an HTML page will be contained in a file with the e te s o extension .html (e.g. index.html). t (e g de t ) + When we "double-click" on an HTML file a computer typically starts a browser to display the file. + R f References within HTML files are names of other fil i hi fil f h files. introduction.html table.html content.html content html reference.html body.html٩ IT1 Majid Taghiloo
  10. 10. • WWW pages are written using HTML. – We must use a standard format so that all browsers can interpret and display the information. • Note that there is a "war" between Netscape and Microsoft war over the exact definition of HTML. • Therefore, HTML is constantly evolving and a browser may not be able to interpret all aspects of a particular version of HTML HTML. • The most widely accepted standard is issued by the World Wide Web Consortium, W3C. Neither Netscape nor Internet Explorer conforms fully to it! – HTML is a markup language, i.e., it allows information to be specified without giving exact d t il of h ifi d ith t i i t details f how it should b h ld be displayed. This allows the browser-user to decide on some aspects of how information should be displayed. • For example, many pages do not specify the exact font size to be used, just the relative importance (1-6) of each piece of text. The browser (under direction from the user) selects appropriate font sizes. i t f t i١٠ IT1 Majid Taghiloo
  11. 11. • In its simplest form, an HTML page contains: + Information to be displayed. This can include text, graphics, etc.. + Hypertext Links that reference other pages, graphics etc.. + A link contains the name and location of other information. • However, HTML pages may contain: + Forms that can be filled out and returned to a server. + Programs that interact with users. These can be written in scripting languages such as JavaScript (Netscape) or Visual Basic (Microsoft) or in programming languages such as (Microsoft), Java.١١ IT1 Majid Taghiloo
  12. 12. Simple HTML • An HTML page is simply ASCII text consisting of: – T t t b displayed. Text to be di l d – Tags specifying how text should be formatted for display or some action that should be taken by a browser. • A browser will format and display text. – Multiple spaces & new lines within text are ignored. p p g – Certain non-ASCII characters and characters with special meanings can be represented using special codes. For example: © © ç ç £ £ & &١٢ IT1 Majid Taghiloo
  13. 13. Contents of theThis is a piece of text file one.html when viewed with h i d ithwith a text editor such as Notepad.various spaces andnew lines.Some special characters: © ç £ &. Contents of the file one.html one.html ht l when viewed with h i d ih a browser.١٣ IT1 Majid Taghiloo
  14. 14. Page Format • While most browsers will attempt to display any a b t a y piece of SC text, arbitrary p ece o ASCII te t, a page s ou d should have a standard format. – It should start with an <HTML> tag and end with a </HTML> tag. – Within these tags there should be a head and a body. – The head should be enclosed by the tags <HEAD> and </HEAD>. It can contain a title and other information. – The body should be enclosed by the tags <BODY> and </BODY>. It should contain the contents of the document document. – Note that spaces and new lines are (in general) ignored. <HTML> <HEAD> <TITLE> Document Title </TITLE> </HEAD> / <BODY> Document Contents </BODY> </HTML>١۴ IT1 Majid Taghiloo
  15. 15. <HTML> <HEAD> <TITLE> Simple Page</TITLE> </HEAD> <BODY> This is a <B>simple</B> page. </BODY> </HTML> three.html١۵ IT1 Majid Taghiloo
  16. 16. <HTML><HEAD><TITLE> Simple Page</TITLE></HEAD><BODY> This is a <B>simple</B> page.</BODY></HTML> four.html١۶ IT1 Majid Taghiloo
  17. 17. HTML T l Tools • There is a wide range of formatting tags tags. + It is possible to produce HTML pages using a simple text editor such as Notepad. Simple editors force you to type each HTML tag in full. By learning the basic tags this way it gives you a greater understanding of how HTML works. + However, it is much easier to use an HTML editor which displays a formatted version of the text and automatically inserts the correct tags. MS Word can be used in this way.١٧ IT1 Majid Taghiloo
  18. 18. Basic Text Formatting Most Web pages use text as their primary means of communication. Providing quality content should always be your first priority when you add text to any Web page But the visual presentation of text on a page. Web page can greatly enhance or detract from the underlying content. Some basic text formatting features are: – Fonts – Headings – Paragraphs – Carriage returns – Horizontal Rules١٨ IT1 Majid Taghiloo
  19. 19. • A tag consists of text bracketed by < and >. + i.e., <TAGNAME> + Some tags come in pairs - one to start a formatting operation and one to end the operation. + End tags have the form: </TAGNAME> + Notes: • Tag names are case insensitive – with the exception of some mark-up mark up languages currently under development (XML and XHTML) • Tags can have attributes (sometimes called arguments or parameters). These appear between the tag name and the closing > bracket.• For example, the tag <B> specifies that the following text should be displayed in a bold font. Normal font is restored by using the end tag </B>. </B> + <B> This is bold </B> while this is not. (<STRONG></STRONG>) + <U></U> these tags underline text ١٩ + <I> this is italic</I> while this is not (<EM></EM>) IT1 Majid Taghiloo
  20. 20. <HR> <B> This is bold </B> while this is not.<BR> <U> This starts on a new line and is underlined <B> and this is underlined and bold. </B></U><BR> <HR> <BR> <BR> <BR> &copy; 1998 two.html٢٠ IT1 Majid Taghiloo
  21. 21. Headings • A good example of why HTML is a markup language, is the handling of headings. – In most text we have various levels of headings, e.g., chapter heading, main section heading, sub-section heading etc.. – Generally, the font size and/or the emphasis of headings decreases as we deal with less significant portions of a document. – To handle this, HTML specifies 6 levels of headings together with , p g g normal text. It is assumed that 1 is more significant than 2, which is in turn more significant than 3, etc.. – Therefore the exact font font size and emphasis for headings is Therefore, font, determined by the browser. The page designer simply uses tags to specify that certain text should be treated as headings. – Headings can be places anywhere inside the BODY of a Web page٢١ IT1 Majid Taghiloo
  22. 22. <HTML> <HEAD> <TITLE> Page Five</TITLE> </HEAD> <BODY><H1> Heading 1 </H1><BR><H2> Heading 2 </H2><BR><H3> Heading 3 </H3><BR><H4> Heading 4 </H4><BR><H5> Heading 5 </H4><BR><H6> Heading 6 </H6><BR> 6 ead g / 6 Normal text. </BODY></HTML> five.html ٢٢ IT1 Majid Taghiloo
  23. 23. General guidelines for using Headings 1‐6 • <H1> Computer Science Program </H1> <!—use H1 for titles at the top of a web page--> • <H2>An Introduction to Mod le CA106 Web Design</H2> Introd ction Module <!– use H2 for subtitles or Chapter titles --> This course represents the basic concepts in Web Design. It will introduce the students to the basic concepts of HTML and later look at more advanced features. Student will learn how to create their own Web pages ….. • <H3> Who should take CA106</H3> H3 CA106 /H3 <!– Use H3 for section Heads --> This is a course for students interested in learning Web Design, I.e. learning how to correctly design and present information on th web. i f ti the b٢٣ IT1 Majid Taghiloo
  24. 24. • <H4>Prerequisites </H4> q There are no prerequisites <!– <! Use H4 for Section heads --> > • <H5> Credits 5 </H5> <!– Use H5 for “fine Print” --> fine Print • <H6> must pass each module</H6> <!– use H6 for “very fine Print” -->٢۴ IT1 Majid Taghiloo
  25. 25. IT1 Htmlheadings.html
  26. 26. • The Paragraph Element signals the beginning of a g p g g g new Paragraph most browser insert a blank line before a paragraph element thereby signaling the start of a new paragraph To mark the start of a new paragraph. paragraph in your HTML file, insert the tag pair <P> </P> at the beginning and end of each paragraph• To generate a carriage return within your HTML file uses the line break element tag <BR>, this displays BR , the text following the tag on a new line without inserting a blank line which appears using the <P> </P> tags• To emphasize a break in text without titles or sub- p titles insert an <HR> tag (horizontal rule element), this tag produces a horizontal line across the page.٢۶ IT1 Majid Taghiloo
  27. 27. Images • An HTML page consists of ASCII text. – Therefore we cannot put non textual information Therefore, non‐textual directly into an HTML page. – Instead we can use various tags to specify where the non‐textual information resides. – For graphic information we use the IMG tag. g p g – With the IMG tag we use an attribute to specify the name of a file containing the image to be displayed. – When the page is displayed, the image is obtained from the specified fil and di l d f h ifi d file d displayed. – A file will contain an image in some graphics format, not HTML. – If a simple file name is specified, then the file is assumed to be in the same location as the HTML page. Therefore, if the file was obtained locally, the image file is assumed to be in the same directory as the HTML file.٢٧ IT1 Majid Taghiloo
  28. 28. <HTML> This is an <HEAD> <TITLE> Page Seven</TITLE> attribute or </HEAD> / parameter. parameter <BODY><BR>NetGate : <IMG SRC="globe3e.gif"> <IMG SRC="flydove.gif"><BR>A dog : <IMG SRC="anidog3.gif"> g g g </BODY></HTML> seven.html ٢٨ IT1 Majid Taghiloo
  29. 29. Hypertext Links yp • A hypertext link is used within one page to reference another page. page – With HTML we specify a hypertext link using an anchor  element. – This consists of : • An <A> tag. This has an attribute that specifies the file name of the referenced page. • Text (and/or images) that can be selected in the browser to cause the link to be followed followed. • An </A> tag.<A HREF="index.html"> text </A> File name of  Selectable text to be  referenced page displayed for this link As we will see later, a hypertext reference can specify a page on another computer by using a URL٢٩ IT1 Majid Taghiloo (Uniform Resource Locator).
  30. 30. <HTML> <HEAD> <TITLE> Contents</TITLE> </HEAD> <BODY> <H1>Networks & Internets</H1> Example pages: <UL> <LI> <A HREF="one.html"> One </A> <LI> <A HREF="two.html"> Two </A> <LI> <A HREF="three.html"> Three </A> <LI> <A HREF="four.html"> Four </A> <LI> <A HREF="five.html"> Five </A> <LI> <A HREF="six html"> Six </A> HREF= six.html > <LI> <A HREF="seven.html"> Seven</A> </UL> </BODY></HTML> eight.html ٣٠ IT1 Majid Taghiloo
  31. 31. Three types of HyperLinksThere are three types of HTML Links eachone i used i a diff is d in different situation t it ti – Absolute URL: links to a page on a different Web Server – Relative URL: links to a page on the same Web Sever – Named Anchor : links to a different location on the same web pageNamed AnchorNamed anchors are t i ll used t h lN d h typically d to helppeople navigate through the same web page. – Named anchors can be used in Relative and Absolute URLs • Relative – example on next slide • Absolute٣١ IT1 Majid Taghiloo
  32. 32. <HTML> <HEAD> <TITLE>Named Anchor</TITLE> <HEAD> <BODY> <PRE> This example looks at named anchors <A HREF = "#Introduction to DCU"> Intro DCU</A> <A HREF = "#Welcome to the School of computing"> School of Computing</A> p g p g <A HREF = "#School timetable"> School TimeTable </A> <h3><a name = "Introduction to DCU"> Intro DCU</a> ............... <h3><a name = "Welcome to the School of computing"> school of computing</a> ....................... <h3><a name = "School timetable"> School timeTable</a> School TimeTable </PRE> </BODY> </HTML> File is Anchors html Anchors.html٣٢ IT1 Majid Taghiloo
  33. 33. ٣٣ IT1 Majid Taghiloo
  34. 34. Attributes• Most HTML tags have optional attributes ( (or arguments) that can be used to control g ) their behaviour. – Such attributes appear after the tag name but before the closing pp g g > bracket. – Each attribute consists of a name, = and a value. • HREF "i d ht l" HREF="index.html" • HREF=index.html • rows="4" rows 4 – Attribute names are case-insensitive. – Each tag supports different attributes.٣۴ IT1 Majid Taghiloo
  35. 35. Tag Attributes and Values Attribute HTML Element Attributes What the attribute does Values<H1></H1> (heading) Align= Left, center, right Alignment justifies or centers theThrough tTh h to EXAMPLE heading. heading Default is left alignment<H6></H6>(heading)<P></P> (paragraph) Align= Left, center, right Alignment is used justify or center EXAMPLE the text<BR> clear= Left, right Used only in conjuction with images EXAMPLE and tables<HR> align= Left, center, right Alignment used to justify or center EXAMPLE horizontal rule. Default is centered Noshade [takes no value] Eliminates 3-D effect EXAMPLE size= n (an integer) ( g ) Sets the thickness of the rule in EXAMPLE EXAMPLE pixels. Default size is 2 Width= n (an integer) Integer values set the width of the EXAMPLE Or n% horizontal rule, % value set the width as a percentage of the browsers window. Default is 100%٣۵ IT1 Majid Taghiloo
  36. 36. Tag Attributes and Values for Fonts Attribute HTML Element Attributes What the attribute does Values V l<FONT></FONT> face= [the name of a Changes the typeface EXAMPLE preinstalled font type] colour= [a colour name or Changes the text colour. (White EXAMPLE hexadecimal colour =FFFFFF Black =000000 ) code] size= n (an integer Changes the text size between 1 and 7) =n or –n٣۶ IT1 Majid Taghiloo
  37. 37. Fontattributes.html٣٧ IT1 Majid Taghiloo
  38. 38. Lists • There are a number of different tags used to construct lists. – <OL> … </OL> is used to construct an ordered or numbered list list. – <UL> … </UL> is used to construct an unordered or bullet list. – Within these tags we place the items making up the list. • Within a list, we use: – <LH> for the header of the list. – <LI> to specify list items.٣٨ IT1 Majid Taghiloo
  39. 39. <HTML> <HEAD> <TITLE> Numbers </TITLE> </HEAD> <BODY><OL><LH> <EM>This is a list of 5 numbers</EM>.<LI> One<LI> Two<LI> Three<LI> Four<LI> Five</OL> </BODY></HTML> ten.html ٣٩ IT1 Majid Taghiloo
  40. 40. <HTML><HEAD><TITLE> Numbers </TITLE></HEAD><BODY><OL TYPE="i" START="10"><LH> <EM>This is a list of 5 numbers</EM> numbers</EM>.<LI> One<LI> Two Sets markers to uppercase letters. TYPE="A"<LI> Three Sets markers to lowercase letters. TYPE="a"<LI> Four Sets markers to uppercase Roman numerals. TYPE="I"<LI> Five i Sets markers to lowercase Roman numerals TYPE="i"</OL> Sets markers to numbers Default value. TYPE="1"</BODY></HTML> eleven.html l ht l ۴٠ IT1 Majid Taghiloo
  41. 41. • Bullet shapes in an unordered list can also be changed. – Possible values are disc, circle square – the default value is disc circle, disc <UL> type = square</UL> EXAMPLE• A third type of list is a defintition list yp – Definition list element is created with the tag pair <DL></DL> • Inside the Defintion list, deflist-term elements are marked with the tag <DT> • In addition to the deflist-term elements, deflist-definitions elements are marked with the tag <DD> DD • <DT> and <DD> work within the <DL> in pairs EXAMPLE EXAMPLE۴١ IT1 Majid Taghiloo
  42. 42. Deflist.html۴٢ IT1 Majid Taghiloo
  43. 43. List Related Elements Attribute Att ib t HTML Element Attributes What the attribute does Values<UL></UL> type= disc, circle, Changes the shape of the bullet.(Unordered Li t(U d d List> square Default value is disc<OL></OL> type= A" Sets markers to uppercase letters.(Ordered List) "a" a Sets markers to lowercase letters. letters "I" Sets markers to uppercase Roman numerals. "i" Sets markers to lowercase Roman numerals "1" Sets markers to numbers Default value. start= n(a positive Indicates where to start counting integer)<LI></LI> (List Item) ( ) type= yp Any of the y Overrides any type attribute set by y yp y vaues for relevant OL tag (ordered lists only) ordered list above type= Any of the Overrides any type attribute set by vaues for relevant UL tag (unordered lists only) unordered list above value= n(positive Indicates where to start counting integer) (applies only to ordered lists)۴٣ IT1 Majid Taghiloo
  44. 44. <HTML> <HEAD> We can nest one list within another. • <TITLE> Numbers </TITLE> </HEAD> <BODY> <OL TYPE=I> <LH> <EM>This is a list of 5 numbers with sub-lists</EM>. <LI> One <OL> <LI> One One <LI> One Two </OL> <LI> Two <LI> Three <UL> <LI> Six One <LI> Six Two <LI> Six Three </UL> <LI> Four <LI> Five </OL> twelve.html </BODY> </HTML>۴۴ IT1 Majid Taghiloo
  45. 45. ۴۵ IT1 Majid Taghiloo
  46. 46. Controlling White Space g p • Web browsers ignore white space and blank lines so special elements are bl k li i l l t needed to produce spaces and blank lines that will be preserved and displayed by a web browser. – Single white space &nbsp: • EXAMPLE – Single Line Break <BR> • EXAMPLE – Block quote element <blockquote> </blockquote> • EXAMPLE – Preformat element <PRE> </PRE> • EXAMPLE۴۶ IT1 Majid Taghiloo
  47. 47. Application of Colour • The following page elements can be changed – Background colour ac g ou d co ou – Text colour for the whole page – Link colours – Visted link colours – Active link colours Changing background colour – Choose the colour carefully, take into consideration the colour of your y, y text and graphics • <BODY BGCOLOR = “#000000”> … </BODY> • <BODY BACKGROUND = “93098.GIF”> …. </BODY> Changing the text colour for whole page to White <BODY TEXT = “#FFFFFF”>۴٧ IT1 Majid Taghiloo
  48. 48. Change link colour to RED <BODY LINK = “#FF0000”> #FF0000 >……….</BODY> </BODY> Change the visited Link Colour to Orange <BODY VLINK = “#FFA500” BODY “#FFA500”>………</BODY> /BODY Change the Active Link Colour to Yellow <BODY ALINK = “#FFFF00”>…….</BODY> In practice, all the changes would be made at once by nesting p , g y g all of the attributes within the BODY tag <BODY BGCOLOR =“#000000” TEXT=“#FFFFFF” LINK=“#FF0000” VLINK=“#FF6600” LINK “#FF0000” VLINK “#FF6600” ALINK=“#FFFF00”>………….</BODY> (You (Y can also just type the name of the colour without l j tt th f th l ith t having to use hex value)۴٨ IT1 Majid Taghiloo
  49. 49. <HTML> <HEAD> <TITLE> C t t /TITLE TITLE Contents</TITLE> </HEAD><BODY bgcolor = "#000000" TEXT = "#FFFFFF" #000000 #FFFFFFLINK= "#FF0000" VLINK = "#00FF00"ALINK ="#0000FF"><H1>Networks & Internets</H1>Example pages:<UL> UL<LI> <A HREF="one.html"> One </A><LI> <A HREF="two.html"> Two </A><LI> <A HREF="three html"> Three </A> LI A HREF three.html /A<LI> <A HREF="four.html"> Four </A><LI> <A HREF="five.html"> Five </A><LI> <A HREF="six.html"> Six </A><LI> <A HREF="seven.html"> Seven</A></UL> </BODY></HTML>۴٩ IT1 Majid Taghiloo
  50. 50. <HTML> <HEAD>۵٠ > tes</TITLE <TITLE> Attribut E> </HEAD> <BODY BACKKGROUND="9 0ff00"> 93098.gif" TEXT="#00 This pa age has a backgroun and the colour nd of the text has been set to match(? the bac ?) ckground. <HR> <img al lign="left height= t" ="200" widt th="120" src="box.g s gif"> <img al lign="righ ht" src="b box.gif"> </BODY> HTML> </H nine. .htmlIT1Majid Taghiloo
  51. 51. Adding Background Patterns <BODY BACKGROUND="93098.gif">• Browsers display backgrounds by filling the available space in the browsers window with a tiling background – Image boundaries make tiling apparent – Photographs often produce a “Pillow” effect (colour on opposite edges don’t match) • Photograph images used for background should be uniform in colour• Images for background can be obtained with digital camera’s, image libraries on the web, by scanning images, or by creating your own images using a drawing program (psp) – Web friendly formats for images on the web are • GIF, JPEG, PNG (portable network Graphics) – not t recommended are BMP TIFF or PICT files (files usually d d BMP, fil (fil ll too large, and not all browsers can display them) • Images should be restricted to no larger than 30-40KB۵١ IT1 Majid Taghiloo
  52. 52. Return to Image attributesAligning ImagesInline images need to be aligned with text blocks toachieve a good combination of t t and graphics. Thi hi d bi ti f text d hi Thiseffect is achieved by the use of the ALIGN Attribute insidethe IMG tag.g – Any text near the image will automatically flow around the image • ALIGN values LEFT, RIGHT, CENTER • Vertical ALIGN values BOTTOM, TOP and MIDDLE • EXAMPLE – Additional control over text behaviour around an image using CLEAR attribute inside the BR tag • CLEAR = RIGHT, CLEAR = LEFT OR CLEAR = CENTER • EXAMPLEImages used as Links EXAMPLEIncluding the image tag <IMG> tag within the <AHREF></A> tags. When an image is used as a link itusually has a blue border around it ll h bl b d d it, <A HREF=one.html> <IMG BORDER = 0 SRC = “box.gif” ALT = “grey box”> </A>۵٢ IT1 Majid Taghiloo
  53. 53. Scaling Images – Ch Changing it H i ht and Width attributes (increase or decrease size i Height d tt ib t (i d i of image on screen) – Preserve Aspect Ration • Scaling to large can result in Pixel effects ( g resolution images g g (high g better for scaling up) • Scaling to small can result loss of image quality – Shrinking an image down does not reduce its bandwith requirement. requirement To reduce download times you must compress times, the imagesUses of ALT attributeThe ALT attribute allows you to specify a line oftext that will be displayed by browsers that aren’tconfigured to display graphics – Blind people use text-to-voice speech generation to describe web pages – ALT attribute will be displayed is there is a problem with your image <IMG ALIGN ="left" HEIGHT="200" WIDTH= 120 SRC= box.gif WIDTH="120" SRC="box gif“ ALT = picture =“picture ۵٣ of a box”> IT1 Majid Taghiloo
  54. 54. BACKGROUND & IMAGE ELEMENTS Attribute HTML Element Attributes What the attribute does Values<BODY> </BODY> background= [a file name] Sets the background pattern for the page bgcolor= [a colour name Sets the background colour for the page or hex colour code]<IMG> align= Left, right Alignment is used to justify the imageEXAMPLES against one side of the page with text flowing down alongside it. alt= [a string of Alt used by browsers that cannot display text] the image height n(an integer) Sets the height of the image in pixels width n (an integer) ( g ) sets the height of the image in p g g pixels src [a filename] Tells the browser which image to display۵۴ IT1 Majid Taghiloo
  55. 55. Tables HTML Tables are used to control Web page layout for both text and graphics – In HTML, we use <TABLE> and </TABLE> tags to create a table. – A table has an internal structure based on rows and columns – A table is made up of a number of rows. • We use <TR> and </TR> to define a row. – Each row is made up of a number of cells (columns). • We use <TD> and </TD> to define the data to be placed in a cell. • We use <TH> and </TH> to define column headings. TH and TD EXAMPLE – Table data elements can contain any HTML element A simple rule is if you can add it to a Web page you can i l l i dd t W b add it to a table cell.۵۵ IT1 Majid Taghiloo
  56. 56. Tables۵۶ IT1 Majid Taghiloo
  57. 57. · <TABLE> · <TR> · column header1 column header2 <TH> Column 2 </TH> … column headerm </TR> · <TR> ·<TABLE> ·row1 cell1row2 cell2… …rown cellm <TD> Data for (2,m) </TD></TABLE> </TR> … · <TR> · · cell1 cell2 … cellm </TR> </TABLE> ۵٧ IT1 Majid Taghiloo
  58. 58. <HTML> <HEAD> <TITLE> Table </TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD> (1,1) </TD> <TD> ( , ) </TD> <TD> ( , ) / (2,1) / (3,1) </TD> </TR> <TR> thirteen.html <TD> (1,2) </TD> <TD> (2,2) </TD> <TD> (3,2) </TD> </TR> </TABLE> </BODY> </HTML>۵٨ IT1 Majid Taghiloo
  59. 59. Tables EXAMPLE۵٩ IT1 Majid Taghiloo
  60. 60. Empty Cells py • In general, blanks in HTML text are ignored. – However we can use a special non breaking space &nbsp; However, non‐breaking if we want to cause output of a space.This is a piece of text &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;withvarious spaces and i dnew lines lines. one_a.htmlSome special characters: &copy;&ccedil; &pound; &amp;. ۶٠ IT1 Majid Taghiloo
  61. 61. • We can distinguish between empty cells and cells containing spaces. <HTML> <HEAD> <TITLE> Table</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD></TD> <TD>&nbsp;</TD> <TD></TD> </TR> <TR> <TD>&nbsp;</TD> <TD></TD> <TD>&nbsp;</TD> </TR> fourteen.html </TABLE> </BODY> </HTML>۶١ IT1 Majid Taghiloo
  62. 62. ۶٢ IT1 Majid Taghiloo
  63. 63. • Some attributes for <TABLE>. <HTML> <HEAD> <TITLE> Table</TITLE> </HEAD> <BODY> <TABLE BORDER CELLPADDING="20" CELLSPACING="20"> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD></TD> <TD>&nbsp;</TD> <TD></TD> </TR> <TR> <TD>&nbsp;</TD> <TD></TD> <TD>&nbsp;</TD> / fifteen.html ff h l </TR> </TABLE> </BODY> </HTML>۶٣ IT1 Majid Taghiloo
  64. 64. ۶۴ IT1 Majid Taghiloo
  65. 65. ۶۵ IT1 Majid Taghiloo
  66. 66. • Some attributes for <TH> and <TD>. TH ATTTIBUTES and TD ATTRIBUTES<HTML> <HEAD> <TITLE> Table</TITLE> </HEAD> <BODY> <TABLE BORDER CELLPADDING="20" CELLSPACING="20"> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <THBGCOLOR=#FF0000> Column 3 </TH> </TR> <TR> <TD></TD> <TD> <IMG SRC="flydove.gif"> </TD><TD></TD> </TR> <TR> <TD BGCOLOR="#00FF00">&nbsp;</TD> <TD></TD> <TD sixteen.htmlBGCOLOR="#0000FF">&nbsp;</TD> </TR> </TABLE> /TABLE </BODY> ۶۶ IT1 Majid Taghiloo</HTML>
  67. 67. ۶٧ IT1 Majid Taghiloo
  68. 68. • With no border attribute to <TABLE> we get:۶٨ IT1 Majid Taghiloo
  69. 69. • Typically, each row in a table has the same number of columns. + Similarly, each column has the same number of rows. + However, it is possible to have cells that span 2 or more rows (columns).۶٩ IT1 Majid Taghiloo
  70. 70. <HTML> <HEAD> <TITLE> Table</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD COLSPAN="2" BGCOLOR="#00FFFF"> (1,1)&(2,1) </TD><TD>(3,1 </TD> </TR> <TR> <TD> (1,2) </TD> <TD> (2,2) </TD> <TD> (3,2) </TD> </TR> </TABLE> <BR><BR><BR> <TABLE BORDER> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD ROWSPAN="2" BGCOLOR="#00FFFF"> (1,1)&(1,2) </TD><TD> (2,1) </TD> <TD>(3,1)</TD> </TR> <TR> <TD> (2,2) </TD> <TD> (3,2) </TD> </TR> </TABLE> </BODY></HTML> eighteen.html i h h l ٧٠ IT1 Majid Taghiloo
  71. 71. • It is possible to nest one table within another. + This is achieved by making a table the data of a single cell. + Not all browsers support nested tables. COLSPAN AND ROWSPAN EXAMPLE٧١ IT1 Majid Taghiloo
  72. 72. <HTML> <HEAD> <TITLE> Table</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD COLSPAN=2 BGCOLOR="#00FFFF">(1,1)&(2,1)</TD><TD>(3,1)</TD> </TR> <TR> <TD BGCOLOR="#FF00FF"> <TABLE BORDER> <TR> <TH> Column 1 </TH> <TH> Column 2 </TH> <TH> Column 3 </TH> </TR> <TR> <TD ROWSPAN = "2" BGCOLOR="#00FFFF">(1,1)&(1,2)</TD><TD>(2,1)</TD><TD>(3,1)</TD> </TR> <TR> <TD>(2,2)</TD><TD>(3,2)</TD> </TR> </TABLE> </TD><TD>(2,2)</TD><TD>(3,2)</TD> </TR> </TABLE> </BODY></HTML> ٧٢ nineteen.html IT1 Majid Taghiloo
  73. 73. Tables and TextYou can use tables to product two‐column text di l bl d l displays to achieve a news l hi letter effect, ff it is important to keep the columns narrow so that they will display correctly on smaller monitors. – To create a two‐column text table create a table with one row and two data elements in that row. Fill data element with a column of text. For the best display you should fill each cell with the same amount of text. – Also include cell padding to create space between the two columns.٧٣ IT1 Majid Taghiloo
  74. 74. ٧۴ IT1 Majid Taghiloo
  75. 75. HTML Element Attributes Attribute What the Attribute Values Does<table></table> Align = Left, right Justifies the table against one side of the page with EXAMPLE EXAMPLE text flowing down alongside it. (this attribute does not set the alignment for any cells within the table) Bgcolor = A colour name or Sets the background colour EXAMPLE hex colour code for all cells of the table (can be overridden by TD BGCOLOR) Border = n(an integer) Sets the width in pixels of EXAMPLE EXAMPLE the 3-D border drawn around the entire table Cellpadding = n(an integer) Sets the width in pixels of a EXAMPLE margin inserted inside the boundaries of each cell Cellspacing = n(an integer) Sets the width in pixels of EXAMPLE the b th boundary separating d ti adjacent cells٧۵ IT1 Majid Taghiloo
  76. 76. HTML Element Attributes Attribute What the Attribute Values Does<table></table> Summary = A quoted string Summarises the table for EXAMPLE nonvisual browsers Width = n(an integer) or n% An integer value sets the EXAMPLE width of the table in pixels, a % value sets the width as a pecentage of the width of the browser window<td></td> Align = Left, center, Sets the horizontal(table data)( bl d ) EXAMPLE right alignment for one cell<th></th> (table (default value is leftheaders) Bgcolor= A colour name or Sets the background EXAMPLE hex colour code colour for one cell Colspan= n (an integer) Allows the cell to span n EXAMPLE table columns٧۶ IT1 Majid Taghiloo
  77. 77. HTML Element Attributes Attribute Values What the Attribute Does Nowrap Takes no value Keeps all text inside the cell on a EXAMPLE single line, unless explicitly borken by BR or P tags Rowspan = n(integer) Allows cells to span n table rows EXAMPLE Valign = Top, middle, bottom, Sets the vertical alignment for EXAMPLE baseline one cell (default value is middle) Width = n (an integer) An integer values sets the width of the cell in pixels<tr></tr> / Align = g Left, center, right , , g Sets the alignment attribute for g(table row) each cell in one row (can be overridden by TD align) Nowrap Takes no value Disables line wrapping for all cells in the row Valign = Top, middle, bottom, Sets the vertical alignment for baseline cells in the row (default value is ( middle)٧٧ IT1 Majid Taghiloo
  78. 78. Exercise III Design an HTML page to produce the following table: • Link this page to your home page. •٧٨ IT1 Majid Taghiloo
  79. 79. Frames • When displaying information in a browser, it is sometimes useful to divide the display into a number of distinct areas called frames and display different HTML pages in each frame.٧٩ IT1 Majid Taghiloo
  80. 80. ٨٠ IT1 Majid Taghiloo
  81. 81. • To use frames, we need a frame page that specifies the layout of the frames. + This page uses the <FRAMESET> tag to specify a set of related frames. + Each frame in this set is introduced by a <FRAME> tag.• For a set of frames, we need to specify: + Whether the frames form rows or columns. + What percentage of the available space is to be occupied by each frame. p g p p y <FRAMESET ROWS="30%,40%,30%"> <FRAMESET COLS="40%,60%"> ••• ••• </FRAMESET> </FRAMESET>• For an individual frame we need to specify: frame, + The HTML page that will be displayed in that page. + This is known as the source for the frame. + Th name of th f The f the frame. <FRAME SRC="one.html" ٨١ NAME=TOP> IT1 Majid Taghiloo
  82. 82. <HTML><HEAD> <TITLE>Frames in arow</TITLE></HEAD><FRAMESETROWS="30%,40%,30%"><FRAME SRC="one.html"NAME=TOP> twenty.html<FRAME SRC="two.html"NAME=MIDDLE>NAME MIDDLE><FRAME SRC="three.html"NAME=BOTTOM></FRAMESET></HTML> ٨٢ IT1 Majid Taghiloo
  83. 83. <HTML><HEAD> <TITLE>Frames in acolumn</TITLE></HEAD><FRAMESET cols="40%,50%"><FRAME SRC="eight.html" twentyone.htmlNAME=LEFT><FRAME SRC="two.html"NAME=RIGHT>NAME RIGHT></FRAMESET></HTML> ٨٣ IT1 Majid Taghiloo
  84. 84. Other <FRAME> Attributes • There are a number of other useful attributes that can be used with <FRAME>. – Normally, a user can resize frames once they have been created. • For example, the frames on the previous two examples can be resized by "dragging" the bar separating the frames. – The NORESIZE attribute can be used to prevent the user resizing a frame. – If the content of the page displayed in a frame is too large for the frame, a b f browser will add scroll b ill dd ll bars. – To prevent the browser adding scroll bars we can use the SCROLLING attribute. • W can specify scrolling as YES NO or AUTO We if lli YES, AUTO. <FRAME SRC="one.html" NAME=TOP NORESIZE SCROLLING=NO>٨۴ IT1 Majid Taghiloo
  85. 85. Nested Frame Sets • It is possible to nest one frame set within another. – This allows us to divide the display into arbitrarily complex sets of frames. <HTML> <HEAD> <TITLE>Untitled Document</TITLE> </HEAD> / <FRAMESET ROWS="81,86%" BORDER=0> <FRAME SRC="name.html" NAME="Top" SCROLLING=NO NORESIZE> <FRAMESET COLS="263,74%"BORDER="0"> <FRAME SRC="frame.html" NAME="Left" SCROLLING=NO NORESIZE> <FRAME SRC= tan.html NAME="Right" SCROLLING=YES> SRC="tan html" NAME= Right </FRAMESET> <NOFRAMES> <BODY> Viewing this page requires a browser capable of displaying frames. </BODY> / </NOFRAMES> </FRAMESET> </HTML>٨۵ IT1 Majid Taghiloo
  86. 86. Navigating Between Frames • Normally when we follow a hypertext link, the new page overwrites the page containing the link. – If the original page is displayed in a frame, then the contents of frame the frame are overwritten. – However, within an <A> tag we can specify the frame into which a p g page should be loaded. <HTML> <HEAD> <TITLE> Contents</TITLE> / </HEAD><HTML> <BODY><HEAD> <H1>Networks & Internets</H1> <TITLE>Frames in a column</TITLE> Example pages:</HEAD> <UL> <LI> <A HREF="one.html" TARGET=RIGHT>One</A><FRAMESET cols="40%,50%"> <LI> <A HREF="two.html" TARGET=RIGHT>Two</A> <LI> <A HREF="three.html" TARGET=RIGHT>Three</A><FRAME SRC="eight_a.html" g <LI> <A HREF="four.html" TARGET=RIGHT> Four </A>NAME=LEFT> <LI> <A HREF="five.html" TARGET=RIGHT> Five </A><FRAME SRC="two.html" NAME=RIGHT> <LI> <A HREF="six.html" TARGET=RIGHT> Six </A> <LI> <A HREF="seven.html" TARGET=RIGHT></FRAMESET> Seven</A> / </UL></HTML> </BODY> </HTML> ٨۶ twentytwo.html IT1 eight_a.html Majid Taghiloo
  87. 87. <HTML><HEAD> <TITLE>Frames in acolumn</TITLE></HEAD><FRAMESET cols="40%,50%"><FRAME SRC="eight html" SRC="eight.html" twentyone.htmlNAME=LEFT><FRAME SRC="two.html"NAME=RIGHT></FRAMESET></HTML> ٨٧ IT1 Majid Taghiloo
  88. 88. Forms• It is sometimes useful to have HTML pages that allow a user to enter data. – For example, a page used to register a student for the practical work allows a user to enter data.• This is achieved by using a form form. – A form consists of a collection of controls. • Text windows. • Drop down selection lists. • Radio buttons. • Check boxes. • Buttons. – The exact nature of these controls depends on the platform. • i e whether the computer is a Java Workstation MS Windows, Unix i.e., Workstation, Windows Unix, Macintosh, ... ٨٨ IT1 Majid Taghiloo
  89. 89. ٨٩ IT1 Majid Taghiloo
  90. 90. • A form is specified by using the tags <FORM> and </FORM>. / + Between these tags we use other tags to insert the specific controls and other information (e.g., static text) making up the form. + Note that we can have more than one form on a page. <HTML> <HEAD> <TITLE>A simple form</TITLE> </HEAD> <BODY BGCOLOR=#888888 TEXT=#FFFFFF> # # This page contains an example form. <FORM> ••• </FORM> The form is finished. </BODY> twentythree.html </HTML>٩٠ IT1 Majid Taghiloo
  91. 91. Text Areas • A text area is a control that allows multiple lines of text to be entered. – If the text i too l f h is large to di l then scroll b are used. display, h ll bars d – We use the tags <TEXTAREA> and </TEXTAREA> to introduce a text area. – Th text b The between these two tags i used as the d f l text f the h is d h default for h text area. – Note that most control must be given a name. • W will see th purpose of th name l t We ill the f the later. ••• <FORM> Type some text: <TEXTAREA NAME="area" ROWS=5 COLS=30> Default text. OK. </TEXTAREA> ••• </FORM> ••• twentythree.html٩١ IT1 Majid Taghiloo
  92. 92. Single Line Text • A control that can be used to input a single line of text can be specified using the <INPUT> tag. – As we will see, this tag can be used to specify other controls. – Therefore, the <INPUT> tag has an attribute TYPE which indicates the type of control required. – In addition, we can use attributes to give the control a name, a default value and a size. – The type text is used for ordinary text and the type password for a text which is always echoed as *. ••• <FORM> O ••• <BR><BR> Text: <INPUT TYPE="text" NAME="details" SIZE=30 VALUE="DEFAULT"> <BR><BR> Password: <INPUT TYPE="password" NAME="password" SIZE=30 VALUE="DEFAULT"> •••٩٢ </FORM> IT1 Majid Taghiloo twentythree.html •••
  93. 93. Selections • A selection control allows a user to select one or more options from a drop down menu. – We use the tags <SELECT> and </SELECT> to specify a selection. • Like all controls, we must give a selection a name. • In addition, we can use the attribute MULTIPLE to allow the user to select more than one option. – Between these tags, we use the <OPTION> tag to introduce each option. • For each option we use the attribute VALUE to give the value of the option. Later we will see how this value is used. • We give the text to be displayed after the tag. • We can use the SELECTED attribute to indicate that by default, an option is selected. ••• <BR><BR> Select an item: <SELECT NAME "it "> NAME="item"> <OPTION VALUE="1"> One <OPTION VALUE="2"> Two <OPTION SELECTED VALUE="3"> Three <OPTION VALUE="4"> Four <OPTION VALUE="5"> Five <OPTION VALUE="5"> Six VALUE= 5 > </SELECT>٩٣ ••• twentythree.html IT1 Majid Taghiloo
  94. 94. Checkboxes • A checkbox is a small b that can either b h kb ll box h h be ticked or not ticked. – A checkbox is specified using th <INPUT> t h kb i ifi d i the tag. – We use attributes to give a checkbox a name and to indicate if it is ticked by default. ••• <FORM> ••• <BR><BR> Checkboxes: <INPUT TYPE="checkbox" NAME="checked1" CHECKED> <INPUT TYPE="checkbox" NAME="checked2"> ••• </FORM> / ••• twentythree.html٩۴ IT1 Majid Taghiloo
  95. 95. Radio Buttons • A group of radio buttons is specified by using a separate <INPUT> tag for each button. – To indicate that the buttons belong to the same group, they are all given the same name. g – For each button we use the attribute VALUE to give the value of the button. Later we will see how this value is used. – We give the text to be displayed beside the button after the tag. – W can also use th attribute CHECKED t specify which of th We l the tt ib t to if hi h f the buttons is checked. ••• <FORM> ••• <BR><BR> Radio buttons: <INPUT TYPE="radio" NAME="choice" VALUE="1"> A <INPUT TYPE="radio" NAME="choice" VALUE="2" CHECKED> B <INPUT TYPE="radio" NAME="choice" VALUE="3"> C <INPUT TYPE="radio" NAME="choice" VALUE="4"> D ••• </FORM> •••٩۵ twentythree.html IT1 Majid Taghiloo
  96. 96. Buttons • We have two types of regular buttons ‐ submit and reset buttons. – These buttons can be specified by using the <INPUT> tag. – By default, these b f l h buttons are displayed with the text " l h h "Submit Query" " and "Reset". – We can use the attribute VALUE to change the value displayed. – We do not need to give buttons names names. ••• <FORM> ••• <BR><BR> Buttons: <INPUT TYPE="submit"> <INPUT TYPE="submit" VALUE="2nd submit"> <INPUT TYPE="reset"> <INPUT TYPE="reset" VALUE="2nd reset"> ••• </FORM> ••• twentythree.html٩۶ IT1 Majid Taghiloo
  97. 97. Hidden Input • It is sometime useful to have controls that are hidden. + i.e., controls that have a name and a fixed value that cannot be changed by the user. + In fact, such controls are hidden and do not appear on the display. + These controls can be specified by using the <INPUT> tag. + E.g. a posting ID ••• <FORM> ••• <INPUT TYPE="hidden" NAME="secret" VALUE="Hidden value"> </FORM> •••٩٧ IT1 Majid Taghiloo
  98. 98. Actions• Q A form allows us t fill out t t fi ld check b tt Q: f ll to t text fields, h k buttons etc., t but what can we do with the data that a user enters?• A: We can submit it to a server. b – i.e., we send the data entered into the form to a server, this interprets the data and sends back results. – This is achieved by pressing any submit button. – If we press any reset button, then the controls on the form are reset to their default values.• For this process to work, we must specify: – The address of a server. • For this we use a Uniform Resource Locator (URL). • We will discuss the structure of URLs later in the course. – How the data should be sent to the server. • There are two methods ‐ POST and GET. – With GET, the data is appended to the end of the URL and sent to the server. – With POST, the data is sent separately from the URL. • In both cases, the browser sends pairs consisting of the name of the control and its current value value.٩٨ IT1 Majid Taghiloo
  99. 99. • The <FORM> tag has two attributes: – METHOD which allows us to specify GET or POST. – ACTION which allows us to specify the URL.<HTML><HEAD> <TITLE>A simple form</TITLE></HEAD> <BODY BGCOLOR=#888888 TEXT=#FFFFFF> This page conatins an example form. <FORM METHOD="POST"ACTION=""> <INPUT T Type="hidden" NAME="mailto" "hidd " NAME " ilt "VALUE=""> <INPUT Type="hidden" NAME="subject" VALUE="GDF1Networks & Internets"> ••• twentyfour.html </FORM> The f h form i fi i h d is finished. </BODY> ٩٩ IT1 Majid Taghiloo</HTML>
  100. 100. ١٠٠ IT1 Majid Taghiloo
  101. 101. The POST Method • If the POST method is used, then the user data is entered in the , body of the form and sent with the URL to the server. • POST EXAMPLE – GOOD SITE ABOUT FORMS ... [More headers here] area=+Default+text.++OK.+&item=3& area=+Default+text ++OK +&item=3& details=%26%26%26%26%26%26%26%26%26& password=Dog&checked2=on&choice=2& secret=Hidden+value Note that line breaks have been introduced to fit this single line of text onto the slide.١٠١ IT1 Majid Taghiloo
  102. 102. The GET Method • If the GET method is used then the user data are used, appended to the URL and sent to the server. – The resulting URL must be unambiguous. Therefore, the following f ll i conventions are used: i d • The user data is separated from the original URL by a ?. • The data for each control is added as a pair name=value. • Each pair is separated by a &. • Spaces are represented by +. • Special characters (?, &, +, =, etc.) are represented as numbers such as %26 h %26. • ••• area=+Default+text.++OK.+&item=3& details=%26%26%26%26%26%26%26%26%26& password=Dog&checked2=on&choice=2& secret=Hidden+value١٠٢ IT1 Majid Taghiloo