1) Introduction to HTML

Size: px

Start display at page:

Download "1) Introduction to HTML"

Claude Brown
6 years ago
Views:

1 1) Introduction to HTML a) Two ways to Create a webpage (Hyper- Text Document): i) WYSIWYG: What You See Is What You Get: Drag- n- Drop tools like Microsoft Word and Adobe Dreamweaver i) Markup Language: A set of formal specifications used to define information. b) HTML: (Hyper- Text Markup Language) is a set of specifications (each one with an individual markup tag) that can be used to define the elements of hypertext document. The objective of HTML is to specify how a particular text should be processed. Developed by Tim Berners- Lee. i) Advantages of Having Different previews in Different Web Browsers: (1) Hypertext documents can be used in all platforms such as Microsoft Windows and Unix. (2) Hypertext documents can be displayed faster because text specifications following each individual computer will result in smaller files. Each file will increase in size if each text requires different specifications. ii) Disadvantage: Users are not able to preview their hypertext document design in other types of web browsers or on other platforms. c) Two Main elements in a Website (Hyper- Text Document): <Name Tag> Document Content</ Name tag> i) Document Content: Information that you wish to display on the web browser. ii) Tag: The code that will determine how the document content will be displayed. Placed in Brackets <> d) Headings, Paragraphs, Lists i) Heading: is normally text with bigger fonts than the rest of the text. HTML contains six stages of headings (x = 1 to 6). <Hx>Heading Text</Hx> ii) Paragraph: Texts arranged in paragraphs do not need a particular format. (1) <P> tag creates one empty line before the next paragraph. (2) <BR> tag or break can also be used to replace the return key to create an empty line before and after a paragraph. iii) Lists: In HTML, there are two types of tags to generate lists: (1) Ordered list: <OL> is a list that follows a number sequence. (2) Unordered list: <UL> is a list that does not follow a particular sequence. <HTML> <HEAD> <TITLE>Ahmad s Web</TITLE> </HEAD> <BODY> <H1>Curriculum Vitae</H1> <H2>Ahmad Yusuf</H2> </BODY> </HTML> <OL> <LI>item A</LI> <LI>item B</LI> <LI>item C</LI> </OL> e) Lines & Graphic: i) Lines: <HR> Horizontal Tag Line (no vertical lines in HTML). <HR ALIGN= x SIZE= y WIDTH= z > ii) Two Types of Graphic format that you can use in HTML (1) GIF: Graphics Interchange Format (2) JPEG: Joint Photographic Experts Group. The benefit of this format is the file size is smaller than other file formats such as BMP and PCX. <IMG SRC= name_file_graphic > 2) Hypertext Link a) Anchor: <A> tag which becomes the marker or destination that will be accessed using links. Can use other objects as markers as well. i) Once you have created an anchor, you will need to create a suitable link for it. Creating an Anchor <A NAME= Edu >Education</A> Link Calling an Anchor <A HREF= #Edu >Education</A> Page 1

This path does not begin with the symbol / (Forward slash), instead the symbol.. (Double dot) is used to refer to a file or folder that is located one level above the document.

2 b) Two types of paths in HTML: i) Absolute path: Actual location of a file in your computer. In HTML, the absolute path begins with the / symbol. This symbol refers to the root or drive where the file is located. Eg: /Student/Topic1/activity1.htm ii) Relative path: Location of a relative file to a document that you have opened. This path does not begin with the symbol / (Forward slash), instead the symbol.. (Double dot) is used to refer to a file or folder that is located one level above the document. c) Uniform Resource Locator (URL): The standard to state Internet document's location. d) HTTP (Hypertext Transfer Protocol): A communications protocol. It is also a set of programmes that determine how information is transferred from one computer to another computer. e) Link with <A HREF="mailto: @address.com"> Address</A> If a visitor clicks on the e- mail address, automatically the e- mail application in the visitor's computer will run 3) Website Design a) Adding Colours: i) Two ways to represent colour in HTML. (1) Colour Value: Numerals that represent a particular colour. Eg: FF0000 (2) Colour Name: Name that represents a particular colour. Eg: Red ii) Body Tag: <BODY> (1) Properties of Body Tag: <BODY BGCOLOUR= colour TEXT= colour LINK= colour VLINK= colour"> (a) BGCOLOUR: To determine the background colour of the document. (b) TEXT: To determine the document text colour. (c) LINK: To determine the colour of the links. (d) VLINK: To determine the colour of visited links. d) Font Modification: i) Changing Font Color: <FONT COLOUR= colour >Text To Be Changed</FONT> ii) Changing Font Type: <FONT FACE= font_type >Text To Be Changed</FONT> iii) Changing Font Size: <FONT SIZE= Size >Text To Be Changed</FONT> e) Manipulating Images: i) <IMG SRC= graphic_file_name ALIGN= align ALT= text_mouse_over VSPACE= vertical_distance HSPACE= horizontal_distance WIDTH= width HEIGHT= height" > Page 2

3 ii) Ways to decrease the filesize of an HTML document: (1) Decrease the total colour that you are using. Use 256 colours and not 16.7 million colours. (2) Decrease the graphic size by using GIF (Graphics Interchange Format) Can display max 256 colors Suitable for Simple images (logos etc.) Saves transparent and animated images graphic application such as Paint and Adobe (this is not changing the width value and height in the IMG tag). (3) Try to save the graphic in GIF and JPEG formats. Choose the format with the smaller file size which does not improvise the quality of the graphic. (4) Use GIF animation only for small images such as icons, lines and button. (5) Use thumbnails, which are small images with low image quality. Place a link at the thumbnail images to the actual graphic image. This gives the visitor the opportunity to view the actual image. (6) Recycle graphics. This is because web browsers will save graphic files when you first access them into your computer. If needed, the computer can access the same file at a later date. JPEG (Joint Photographic Experts Group) Can display 16.7 million colors Suitable for photographic and video images Creating an Image Map <MAP NAME= name_image_map > <AREA SHAPE= form COORDS= coordinates HREF= URL > </MAP> Adding Usemap property to Image <IMG SRC= name_file_graphic USEMAP= #name_image_map > d) Image Map: A list of coordinates at an image that determines the boundary for one or more hotspots. i) Hotspot: An area on the image that functions as a link. Visitors can click on the hotspot and the link will be activated. (1) Three types of Hotspot Shapes: (a) Square: Represented as Rect. The coordinates for COORDS property is determined by two point couples, which are the corner points on the top- left corner and on the right- down corner. <AREA SHAPE= Rect COORDS= 261, 91, 339, 196 > (b) Circle: Represented as Circle. The COORDS value for the circle is determined by the centre and radius of the circle. The radius is calculated in pixel units. <AREA SHAPE= Circle COORDS= 220, 196, 40 > (c) Polygonal: Represented as Poly. Suitable for areas shaped other than a square and circle. The coordinates depend on the number of corners that make up the shape. <AREA SHAPE= Poly COORDS= 142, 21, 142, 78, 82, 78, 82, 197, 20, 197, 20, 21 > ii) To create image maps, you must open the image file with a graphics application and record its coordinates to create hotspots. This is time consuming and can be difficult. You can use several applications such as MapEdit, MapServe and Web Hotspot that is used specifically to create image maps. 4) Using Tables a) Two methods to insert tables into a website. It involves inserting either i) Text Tables: Contains only texts that are arranged in columns of the same size. A typewriter or fixed- width font is needed. <PRE> Table_Contents </PRE> ii) Graphical Tables: Allows you to insert elements such as colour, shading and border. (a) <TABLE> and is ends with the closing tag </TABLE>. (b) Each line is opened with the (table row) tag and is ended <TABLE BORDER= 1 > <TD> Cell One</TD> <TD>Cell Two</TD> <TD>Cell Three</TD> <TD>Cell Four</TD> <TD>Cell Five</TD> <TD>Cell Six</TD> </TABLE> Page 3

4 with the closing tag. (c) In each tag you need to insert the <TD> tag (table data). The <TD> tag marks the beginning of the column and insert </TD> to close the column (1) Table <TABLE> Tag Properties (a) BORDER: Used to display table lines. <TABLE BORDER = size > (b) CELLSPACING: Property that controls space between cells in a table. <TABLE CELLSPACING = size > (c) CELLPADDING: Determine the space between cell lines and text. <TABLE CELLPADDING = size > (d) ALIGN: Property that controls the position of alignment to; left, right, or center. <TABLE ALIGN = position >, <TD ALIGN = Center >ABC</TD> (e) WIDTH & HEIGHT: Controls the table dimensions. <TABLE WIDTH = width HEIGHT = height > (f) BGCOLOR: Control the background color of table. <TABLE BGCOLOUR = colour >, <TR BGCOLOUR = colour >, <TH BGCOLOUR = colour >, <TD BGCOLOUR = colour > (2) Spanning Cell are cells that comprise more than one column or row. There are two types of Spanning cells: (a) Row Span (b) Column Span Row Span <TABLE BORDER= 1 > <TD WIDTH= 100 >1</TD> <TD ROWSPAN= 3 >2 (ROWSPAN)</TD> <TD WIDTH = 100 >3</TD> <TD>4</TD> <TD>5</TD> <TD>6</TD> <TD>7</TD> </TABLE> Column Span <TABLE BORDER+ 1 > <TD WIDTH= 100 >1</TD> <TD WIDTH= 100 >2</TD> <TD WIDTH= 100 >3</TD> <TD COLSPAN= 3 >4</TD> <TD>5</TD> <TD>6</TD> <TD>7</TD> </TABLE> 5) Forms in Web Pages a) CGI (Common Gateway Interface) Script: Any application or set of that receive data from HTML documents for performing certain operations on that data i) CGI Encouraged the development of many web applications with database orientation such as: (1) Database access, E- commerce, Sending e- mail, Online forums, etc. etc. ii) CGI Scripts can be developed using: (1) C/C++, Apple Script, Perl, TLC, Visual Basic Form Element Input box Usage Accept / insert text Selection list Long lists b) Elements in an HTML Form: i) Input boxes allow you to add information in text or numbers. <INPUT TYPE= TEXT NAME= element_name SIZE= size MAXLENGTH= "maximum_characters VALUE= "initial_value"> Radio Button Check box Text area Submit and Reset button (1) NAME property is a must for INPUT tags, as its used in CGI identify the text element (2) SIZE property is to determine the width of the text box. Choose one option from a fixed list Check if an item is there or not Text that exceeds one line Either to send or cancel delivery and return to the original condition of the form ii) Selection List is a list box that allows the user to choose an item of choice using the mouse. (1) SIZE property allows you to display more than one item at a time. (2) MULTIPLE is meant to allow users to choose more than one item in the list. (a) One- by- one: Press the Ctrl button while clicking on the desired items. (b) Linked: Choose the first item, while pressing the Shift key, choose the last item. All the items between them will be automatically selected <SELECT NAME= "element_name SIZE= size MULTIPLE> <OPTION VALUE= "Item1_value">Item1 text</option> <OPTION VALUE="Item2_value">Item2 text</option>... </SELECT> Page 4

5 iii) Radio Button is a fixed list in button form. (1) NAME property is necessary for radio buttons (2) CHECKED property is set for the default option <INPUT TYPE= RADIO NAME= element_name VALUE= item1_value >Item1 text <INPUT TYPE= RADIO NAME= element_name VALUE= item2_value CHECKED>Item2 text iv) Check Box is a form element used to determine whether or not an item is there. (1) NAME property is needed for check box <INPUT TYPE= CHECKBOX NAME= element_name VALUE= item1_value >Item1 text <INPUT TYPE= CHECKBOX NAME= element_name VALUE= item2_value >Item2 text v) Text Area is a form element that allows users to insert text that exceeds one line. <TEXTAREA NAME= element_name ROWS= number_of_rows COLS= number_of_characters WRAP= type_of_wrap > Default Text</TEXTAREA> (1) COLS property refers to the number of characters that are permitted for each line (2) WRAP property determines how text will fill each line in the text area box vi) Hidden Field: <INPUT TYPE= HIDDEN NAME= element_name VALUE= hidden_value"> vii) Form Button: Does not store any information but executes operations when clicked (1) The syntax to run a programme is: <INPUT TYPE= BUTTON VALUE= Text on the button > (2) The syntax for submitting a form is: <INPUT TYPE= SUBMIT VALUE= Text on the button > (3) The syntax to reset info in a form is: <INPUT TYPE= RESET VALUE= Text on the button > c) Form Submission: <FORM ACTION= url METHOD= POST_or_GET > i) ACTION property is to determine the location of the CGI script that will process the form ii) METHOD property will determine how the web browser will send information to the CGI script (1) GET will place every form of information at the end of the CGI script URL. CGI script will then change the information at the end of the URL into text that will be processed. (2) POST method in a nutshell sends information as separate data streams. POST is safer and more popular as there are instances when GET may cause long information to be cropped. 6) Introduction to Scripts a) CGI (Common Gateway Interface) Script: Any application or set of that receive data from HTML documents for performing certain operations on that data. i) Advantages of Server- Side Scripting: (1) The programme can be fully controlled. (2) Most of the data needed by applications are real- time data. ii) Weakness of Server- Side Scripting: (1) Applications will rely wholly on the server. b) Advantages of Client- Side Scripting: i) Reduce the burden of processes that are performed by the server. ii) Reaction or output generated on the web browser becomes faster. c) Events are the result after an action is performed by the user. Page 5

6 7) Javascripts a) JavaScript: An example of a script language, consists of that can be executed, what differentiates it is it can be inserted into a HTML document. JavaScript is a subset of Java. i) document.write ( Hello World ) will display the text contained within (). ii) <!- - code - - > inserted to prevent display of code in unsupported browsers. b) Variables: Temporary spaces to store data where it will be used to run JavaScript programme. i) Rules for Variable Naming: (1) Variable names are case sensitive, and (2) Must begin with an alphabet or underscore ii) Two ways to Declare a Variable: (1) Using the keyword var: var intyear = value; (2) Without using the keyword var: intyear = value iii) Types of Variables: <HTML> <HEAD> </HEAD> <BODY> <script type="text/javascript"> <!- - // print hello world! document.write("hello World!") - - > </script> </BODY> </HTML> (1) Local Variable: Variables declared in a function, the variable can be accessed in that function only. (2) Global Variable: Variables declared outside function, all functions in programme can access that variable. c) Functions: contains a portion of the code that will be run by events or the call to the particular function. (1) alert( Hello World! ) Means that a text value; Hello World! has been sent to the function called alert. i) Functions with arguments: A function is created by declaring its name, value (argument), and as follows: ii) Functions that return a value: The keyword return will resend a value to the instruction calling the function. function function_name (argument1, argument2, etc) function total(x,y) result=x+y return result Calling the Function sum=total(4,1) b) Selective Control Structures: In JavaScript there are 3: i) if Instruction ii) if else instruction iii) switch instruction c) Looping Control Structures: i) While ii) do while iii) for if (condition) code to be run if condition is true while (condition) code to be run when condition is true if (condition) code to be run if condition is true else code to be run if condition is false do code to be run while (condition) switch (expression) case value1: code that is run if expression = value1 break case value2: code that is run if expression = value2 break default: code that is run if expression is neither value1 nor value2 for (initialization; condition; increment) code to be run Page 6

7 6) VBScripts a) VBScript: An alternative to JavaScript. It is the abbreviation for Microsoft Visual Basic Edition. It is a simplified version of the Visual Basic and Visual Basic for Application family of programming languages. i) Advantage of VBScript is its syntax is easier than JavaScript. ii) Weakness in VBScript is that older versions of web browsers or browsers other than Microsoft Internet Explorer may not be able to run VBScript properly <HTML> <HEAD> </HEAD> <BODY> <script type="text/vbscript"> <!- - print the text This is VBScript document.write( This is VBScript ) - - > </script> </BODY> </HTML> b) Variables: All types of variables in VBScript are in the variant type i) Rules for Variable Naming: (1) Must begin with an alphabet (2) Cannot contain a full stop punctuation; and (3) Cannot exceed 255 characters. ii) Declare a variable using the keywords Dim, Public or Private c) Functions: VBScript has two types of functions: i) Sub Functions: (1) Characteristics: (a) Begins with Sub ends with End Sub (b) Doesn t return a value, yet executes. (c) Can receive sent to it via arguments Sub sub_name () End Sub (d) If theres no arguments, () is still required (2) Call for Sub: Call sub_name ( VBScript", 3, etc), Call sub_name () ii) Functions of Function: (1) Characteristics (a) Begins with Function and End with End Function (b) Executes and can return a value Function function_name() function_name = return_value End Function Sub sub_name(argument1, argument2,etc) End Sub Function function_name (argument1,argument2,etc) function_name = return_value End Function (c) Can receive that are sent to it via arguments (d) If theres no arguments, () is still required (e) The desired value that is returned must be accumulated to the name of the function (2) Call for Function: variable = function_name(), msgbox Your name is & function_name() d) Selective Control Structures: i) if then ii) if then else iii) if then elseif iv) select case if i=7 Then msgbox July i=i+1 End if if i=1 then msgbox Right else msgbox left end if if pay= Cash then msgbox Payment Mode cash elseif pay= Visa then msgbox Payment Mode visa elseif pay=amex then msgbox Payment Mode American Express else msgbox No mode of payment end if select case pay case Cash msgbox Payment Mode cash case Visa" msgbox Payment Mode visa case AmEx msgbox Payment Mode American Express case Else msgbox No mode of payment end select Page 7

8 e) Looping Control Structures: i) For Next : Repeat a set of a few times, used when we know the no. of loops. ii) For Each Next : Run for each collection of items or each element in an array. Don t know no. of loops. You can use the keyword Exit if you wish to stop the loop. iii) Do Loop: program will run a set of as long as the condition is true. 7) XML Technology Do While i>12 code that will be run Loop For i=1 to 12 code that will be run Next dim Name(2) names(0)= Ahmad names(1)= Yosuf names(2)= Ismail For each x in Name document.write(x & <br> ) Next a) Extensible Mark- up Language (XML): Introduced in February, 1998, by. Like HTML, XML originated from XGML.. However, in XML there are no specific texts like HTML. On the other hand, you can create your own tag and define the structure of the document. b) Document Type Definition (DTD): lists the set elements in a document and the content of each element. i) DTD Standards: (1) Electronic Business XML (ebxml): set of specifications that enables business entities to perform their business activities and other deals via Internet (2) WeatherML: Global standard protocol for weather derivatives which is processed electronically. (3) Directory Service Markup Language (DRSS): Standard to prepare for directory enquiries, updating and operational results DTD File Saved as Note.dtd <!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> XML File Saved as MyNotes.xml in the same folder <?xml version="1.0" encoding="utf- 8"?> <!DOCTYPE note SYSTEM "Note.dtd"> <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> Page 8

Html basics Course Outline

Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and