Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML. 2 World Wide Web WWW is a service internet The total set of interlinked hypertext documents residing on Web servers all around the world. Documents.

Similar presentations


Presentation on theme: "HTML. 2 World Wide Web WWW is a service internet The total set of interlinked hypertext documents residing on Web servers all around the world. Documents."— Presentation transcript:

1 HTML

2 2 World Wide Web WWW is a service internet The total set of interlinked hypertext documents residing on Web servers all around the world. Documents on the WWW, called pages or Web pages WWW is based on HTML Introduction

3 3 A network of computer networks which operates world-wide using a common set of communications protocols. What is Internet?

4 Web Browser is a computer program which is used to view a Web page. Browser implements the following functions: Search and access to a Web-server; Loading, formatting, and displaying HTML- document; Hyperlink detection and moving from one document to another; Standard tools support.

5 Hypertext Mark-up Language (HTML) HTML is the standard mark-up language used to create and organize documents on the World Wide Web; HTML lets users to format text, add graphics, sound, video, and save it all in a Text-Only or ASCII format that any computer can read.

6 HTML Features Hypertext, that allows to create a link in a Web page that leads to any other pages on the Web. Hence information on the Web can be accessed from many different locations Universality means that any computer can read a Web page regardless of platforms or operating systems

7 HTML Files Must be saved as text files with extension html or htm. The extension tells the browser that file is to be interpreted according to HTML standards Name your files to describe their functionality File name of your home page should be index.html

8 Developing HTML documents Bottom-up approach: write HTML code in a text editor, and then view the Web page in a browser Steps: Open a text editor Enter text and tags Save file as xxx.html Open the file in a browser to view the Web page Repeat above steps if you need to debug the page Top-down approach: build the Web page elements using an HTML editor, and then view the HTML code later Steps: Open an HTML editor Add HTML elements using the editors GUI Save the automatically generated HTML code in a file as xxx.html Exit the editor and view the page

9 HTML Building Blocks HTML tags are command words written between symbols, that indicate how browser should display the text. Tags may have opening and closing version Text is placed in a container (or HTML element), which starts with opening tag and ends with closing. Bold text Building Blocks

10 HTML Rules Case insensitive Spacing: Browsers ignore extra spaces Block-level tags include automatic line brakes Examples: P, H1, UL, TABLE

11 Tag Attributes Attributes offer a variety of options Attributes are entered between keyword and final symbol > A single tag may have a few attributes Attributes are placed one after the other in any order

12 Attribute Values Attributes can accept the values of particular types Values of attributes should be enclosed in straight quotation marks may be omitted if the value contains only letters, digits, hyphen (-), and period (.)

13 Nesting Tags Hierarchy – tags that affect entire paragraph may contain tags affecting individual words or letters Order – the current closing tag should correspond to the last unclosed opening tag

14 Nesting Tags (example) Correct: Information System Incorrect: Information System

15 HTML Document … … Starting Web Page

16 The HEAD Section - beginning of the head section - page description - end of title - end of the head section

17 The BODY Section {Text displayed by browser}

18 18 HTML Document My First Page Welcome to NU's Students! Example HTML Document Result of tag

19 Commonly Used HTML Tags … Heading. … Indents block of text one tab. Text Formatting

20 Commonly Used HTML Tags (continued…) … : Paragraph. … : Bold … : Italic … : Underline … : Emphasize (logical – exact effect depends on browser) : Line break : Horizontal Rule (line)

21 21 Creating Superscripts & Subscript … : Subscript … : Superscript Example: H 2 O :H 2 O 10 th :10 th

22 22 Formatting Text With FONT element Add color and formatting to text FONT attributes: COLOR Preset or hex color code Value in quotation marks Note: you can set font color for whole document using TEXT attribute in BODY element

23 23 Formatting Text With SIZE To make text larger, set SIZE = +x To make text smaller, set SIZE = -x x is the number of font point sizes N=3 corresponds to default value Value of n Size in pt

24 24 FACE Font of the text you are formatting Be careful to use common fonts like Times, Arial, Courier and Helvetica Browser will display default if unable to display specified font Example … Formatting Text With

25 Ordered List Beginning of an Ordered List … A list element … Another list element End of the Ordered List TYPE, START are optional X=A, a, I, i, 1 ( X=1 is default value) n – initial value for list items

26 Unordered List Beginning an Unordered List … A list element … Another list element End of the Unordered List TYPE is optional, shape represents the kind of bullet, like circle, square…

27 27 Nested Lists Nested list Contained in another list element Nesting the new list inside the original Indents list one level and changes the bullet type to reflect the nesting Browsers Insert a line of whitespace after every closed list Indent each level of a nested list Makes the code easier to edit and debug

28 Uniform Resource Locator (URL) An address for a resource on the Internet. URL can be Absolute – contains all parts of URL; Relative – presents path and file name relatively current file. Scheme Server namePartFile name

29 Scheme http – Hypertext Transfer Protocol to access Web-pages ftp – File Transfer Protocol to download the file from the net mailto – to send electronic mail File – to access file on a local hard disk (File scheme uses ///). and others…

30 Absolute URL (examples) ftp://ftp.site.com/common/prog.exe file:///Cdisk/ITEC1010/COL.html

31 Relative URL (examples) A file from the same folder as current file: file.htm A file from a subfolder of current folder: images/picture.gif A file from another folder at the same hierarchical level:../info/data.htm

32 External Link is a reference to another page Label text Label text will be underlined or highlighted, click upon it will bring visitors to the page with given URL

33 Internal link Is a reference to a particular part of the same page. Click upon the internal link will bring a visitor to the particular part of the same page. To create an internal link: Create an anchor Add a hyperlink to the anchor

34 Creating Anchors Place the cursor in the desirable part of a page, where the link should bring visitors Create an anchor Label text Label text is a text or image that should be referenced.

35 Link to a specific anchor Within a document Label text To a separate document Label text

36 Link to address Say HELLO!!! Click on hypertext Say HELLO!!! will invoke an application such as MS Outlook to send to the address

37 Images SRC – source of the image (file address) Another attributes: BORDER=n, n-thickness of the border in pixels ALT – alternative text WIDTH – width of an image in pixels

38 Images (continued…) HEIGHT – height of an image in pixels ALIGN – position on a page Digimon

39 Tables A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns. Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Cell

40 Tables (continued…) Container … Attributes: BORDER= n – the border thickness in pixels WIDTH=x – width of the table or a cell within the table in pixels (or %)

41 Tables (continued…) A table is formed row by row. To define a row … is used Within a row table cells with data is determined by … or with headers by …

42 Simple Table (example) Example of table Month Quantity January 130 February 125 March 135

43 Tables (more complicated) To span a cell across a few columns attribute COLSPAN=n, where n - number of columns, is used To span a cell across a few rows attribute ROWSPAN=n, where n - number of rows, is used

44 Table (example) Quarter Month Quantity I January 130 February 125 March 135

45 Table (example continued…) II April 130 May 125 June 135 Total 780

46 Cell Attributes FONT – establishes the font of a cell ALIGN – determines horizontal alignment of cell content, accepts values: left, center, or right VALIGN - determines vertical alignment of cell content, accepts values: top, middle, or bottom

47 Purposes to use tables To present tabular data; To create multicolumn text To create captions for images To create side bars Cells may contain various HTML elements: Images, Hyperlinks, Text, Objects, even Tables

48 48 Frame A frame is an independent scrolling region, or window, of a Web page. Every Web page can be divided into many individual frames, which can even be nested within other frames Each frame can contain a different document.

49 49 Create Frameset To create a frameset with three horizontal rows all in the same column

50 50 Create Frameset (continued…) Frameset Attribute rows=a,b,* where a and b are the height of the first & second rows and asterisk is the height of the third row. The value may either be a percentage or exact number of pixels Frame Attribute name=name where name is word that identifies this particular frames use. src=URL where path of url for the page that will be displayed in the this frame.

51 51 To create frames in columns Frameset Attribute cols=a,b,* where a and b are the width of the first & second rows and asterisk is the width of the third row. The value may either be a percentage or exact number of pixels Creating frame in column

52 52 Creating frames in Rows and Columns To create a frameset with both rows and columns Note: Defining rows and columns in this way limits you to the same number of frames in each row or column

53 53 Combining Framesets To combine Framesets

54 54 Adjusting a Frames Margins To adjust a frames margins In the desired FRAME tag, Type MARGINWIDTH=W where w is the desired amount of space, in pixel, between the left and the right edges of the frame. Type MARGINHEIGHT=H where H is the desired amount of space, in pixel, between the top and the bottom edges of the frame.

55 55 Showing or Hiding Scroll Bars In the FRAME tag of the particular frame, type scrolling=yes, no, auto Scrolling value yesfor showing scroll bar nofor hiding scroll bar autofor scroll bars to appear only when necessary.

56 56 Adjusting the color of the Borders To adjust the color of all the borders in the framesets Inside the topmost FRAMESET tag, type BORDERCOLOR=color

57 57 Adjusting Frame Borders To adjust amount of space between frames Inside the topmost FRAMESET tag, type BORDER=n where n is the width of the space between frames in pixels To show or hide borders Inside the FRAMESET or FRAME, type FRAMEBORDER=1, yes, 0, no

58 58 Keeping Visitors from Resizing Frames To keep visitors from resizing your frames, type NORESIZE in the FRAME tag for desire frame

59 59 Creating Links Between Frames To target a link to a particular frame Make sure the target frame has a name On the page where the link appear, type I want to say… Target=name where name is the reference given to the target frame within the frame tag.

60 60 Creating Links Between Frames (continued…) To target a link to a special spot Type < a href=detail.htm Type target=_blank to open the link in the new window, blank window Or type target=_self to open the link in the same frame that contains the link Or type target=_top to open the link in the current browser window. Or type target=_parent to open the link in the frame that contains the current frameset.

61 61 Creating Links Between Frames (continued…) To change the default target In the HEAD section of the page that contains the links,

62 62 Creating Alternatives to Frames To create alternatives to frames Type before the last tag Create the content that you want to appear if the frames do not

63 63 Creating an Inline Frame To create an inline frame In the container page, type Type the text that should appear if the browser doesnt support

64 64 Basic HTML Forms Forms Collect information from people viewing your site FORM element METHOD attribute Form data can be sent to the server in two ways The get method, which sends data as part of the URL The post method, which hides data in the HTTP headers ACTION attribute The action attribute indicates which page on the server will receive the information from this form when a user presses the submit button.

65 65 Basic HTML Forms (Cont) ID Attribute The id attribute allows you to provide a unique identifier for the element, just as it does for other elements. Name Attribute As with most other attributes, the name attribute is the predecessor to the id attribute.

66 66 Form Controls This section covers the different types of form controls that you can use to collect data from a visitor to your site. You will see: Text input controls Buttons Checkboxes and radio buttons Select boxes (sometimes referred to as drop-down menus) and list boxes File select boxes Hidden controls

67 67 Text input controls There are actually three types of text input used on forms: Single-line text input controls Password input controls: Multi-line text input controls:

68 68 Single-line text input controls Single-line text input controls are created using an element whose type attribute has a value of text AttributePurpose typeIndicates the type of input control you want to create. nameUsed to give the name part of the name/value pair that is sent to a server. valueProvides an initial value for the text input control that the user will see when the form loads. sizeAllows you to specify the width of the text-input control. maxlengthAllows you to specify the maximum number of characters a user can enter into the text box.

69 69 Password Input Controls Password input controls are created almost identically to the single-line text input controls, except that the type attribute on the element is given a value of password. Example: Username: Password:

70 70 Multiple-Line Text Input Controls Allowing a visitor to your site to enter more than one line of text, you should create a multiple-line text input control using the … element. AttributePurpose nameUsed to give the name part of the name/value pair that is sent to a server. rowsit indicates the number of rows of text a element colsIt specifies the width of the box and refers to the number of columns. One column is the average width of a character.

71 71 Multiple-Line Text Input Controls (Cont) AttributeValues Wrap allows you to Indicate how the text should be wrapped. Selecting Off or Default prevents text from wrapping to the next line. Selecting Virtual sets word wrap in the text area. When the users input exceeds the right boundary of the text area, text wraps to the next line. Selecting Physical sets word wrap in the text area, as well as to the data when it is submitted for processing.

72 72 Button Controls You can create a button in three ways: Using an element with a type attribute whose value is submit, reset, or button Using an element with a type attribute whose value is image Using a element

73 73 Button Controls Creating Buttons Using the Element The type attribute can take the following values: submit, which creates a button that automatically submits a form reset, which creates a button that automatically resets form controls to their initial values button, which creates a button that is used to trigger a client-side script when the user clicks that button The name attribute provides a name for the button. The value attribute enables you to specify what the text on the button should read.

74 74 Button Controls Using Images for Buttons Creating an image button is very similar to creating any other button, but the type attribute has a value of image AttributePurpose srcSpecifies the source of the image file. altProvides alternative text for the image.

75 75 Button Controls Creating Buttons Using the Element Allowing you to specify what appears on a button between an opening tag and a closing tag. You can include image elements between these tags. The type attribute can take the following values: submit, which creates a button that automatically submits a form reset, which creates a button that automatically resets form controls to their initial values button, which creates a button that is used to trigger a client-side script when the user clicks that button

76 76 Checkbox & Radio INPUT element TYPE = checkbox creates a checkbox Used individually or in groups Each checkbox in a group should have same NAME Make sure that the checkboxes within a group have different VALUE attribute values TYPE = radio Radio buttons similar in function and usage to checkboxes Only one radio button in a group can be selected

77 77 Checkbox & Radio (Cont) AttributePurpose typeIndicates that you want to create a checkbox or radio. nameGives the name of the control valueThe value that will be used if the checkbox is selected checked Indicates that when the page loads, the checkbox or radio should be selected. size This attribute indicates the size of the radio button in pixels, but this attribute does not work in IE 6 or Netscape 7.

78 78 Select Boxes SELECT element Add an item to list Insert an OPTION element in the … tags Example Select color Red Green Blue

79 79 Select Boxes SELECT Element AttributePurpose nameThis is the name for the control. size This can be used to present a scrolling list box (list box control) multipleAllows a user to select multiple items from the menu. OPTION Element AttributePurpose valueThe value that is sent to the server if this option is selected. selected Specifies that this option should be the initially selected value when the page loads.

80 80 Grouping Options label The element can carry a label attribute whose value is a label for that group of options. Please select the product you are interested in: Desktop computers Laptop computers Input Devices Storage

81 81 File Select Boxes INPUT element TYPE = file creates a file upload NAME=name is the name for the control When you are using a file upload box, the method attribute of the element must be post.

82 82 Hidden Controls You create a hidden control using the element whose type attribute has a value of hidden. hidden control must carry name and value attributes.

83 83 Creating Labels for Controls and the Element Use the tag to define relationships between a form control, such as a text input field. Labels get associated with a form control in one of two ways: implicitly by including the form control as contents of the label tag explicitly by naming the ID of the target form control in the tag's FOR attribute. User name

84 84 Structuring Your Forms with and Elements The element creates a border around the group of form controls to show that they are related. The element allows you to specify a caption for the element, which acts as a title for the group of form controls. When used, the element should always be the first child of the element.

85 85 Structuring Your Forms with and Elements Contact Information First name: Last name:

86 86 Tabbing Order If you want to control the order in which elements can gain focus you can use the tabindex attribute to give that element a number between 0 and 32767, which forms part of the tabbing order. The following elements can carry a tabindex attribute:

One Two Three Four Five

87 87 Access Keys The access key is defined using the accesskey attribute. The value of this attribute is the character. The following elements can carry an access key attribute: One Two

88 88 Disabled and Read-Only The readonly attribute prevents users from changing the value of the form control The disabled attribute disables the form control so that users cannot alter it. The following table indicates which form controls work with the readonly and disabled attributes. Elementreadonlydisabled Yes Yes NoYes NoYes NoYes NoYes NoYes NoYes NoYes NoYes

89 89 Multimedia Linking to Multimedia Files 1. Type, where multimedia.ext is the location, name, and extension of the multimedia file. 2. Type the text or insert an image that the visitor will click on to activate the link. 3. Type to complete the link. Example Preap Sowat

90 90 Multimedia Embedding Windows Media