1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”

2 Lecture Template: World Wide Web World Wide Web Web browser Web browser HTML Features & Files HTML Features & Files HTML Rules HTML Rules Tags and Tags Attributes Tags and Tags Attributes URL URL HTML Documents HTML Documents Scheme Scheme Table Table

3 World Wide Web WWW is a service on the Internet WWW links information, so that user can easily go from one piece of information to another related piece WWW is based on HTML

4 Hypertext Mark-up Language (HTML) HTML is a standard programming language used to: create and organized documents on the World Wide Web format text add graphics, sound, video; and save it all in a TextOnly or ASCII format, so that any computer can read a Web page

5 Web Browser Computer program to view a Web page Functions: Search and access a Web-server; Load, format, and display HTML- documents; Hyperlink detection and moving from one document to another; Standard tools support

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 Have relatively small sizes Can be created with any text editor, including Notepad and WordPad (for Windows) or TeachText or SimpleText (on Mac)

8 HTML Building Blocks HTML tags are commands written between angle brackets, 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 tag, e.g.: Bold text

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

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

11 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 (A-Z, a-z), digits (0-9), hyphen (-), or a period (.)

12 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

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

14 HTML Document … …

15 Starting a web page Identify the content of the document as an HTML code:

16 Head and body HEAD-section defines the title of the page (used by searching engines) … BODY-section defines the contents of the web page (what visitor will see) …

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

18 TITLE section Each HTML page must have a title Appears in the title bar of the window Place the cursor between opening tags and and enter: First web page

19 BODY Section {Text displayed by browser}

20 Headers on the page HTML provides for up to six levels In the BODY-section specify the level of header you need (, n is a number from 1 to 6) This is level 1 To align the header, type ALIGN=direction, where direction is left, right, or center within the opening tag:

21 Commonly Used HTML Tags … Heading … Indents block of text one tab

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

23 Changing the Font { Text } FONTNAME specifies the font SIZE defines the size N=3 corresponds to default value Value of n Size in pt

24 Text style Font style Text to display Bold text Text to be bolded Italic text Text to be italicized

25 Text style (cont…) Text size, n is a number from 1 to 7; 3 is the browser’s default value Text colour - hexadecimal code Superscripts/subscripts:, Blink text: Text

26 New paragraph on the page HTML does not recognize the returns from the text editor To start a new paragraph, use <P tag (can be combined with ALIGN=direction clause) Text of the paragraph

27 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

28 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…

29 Uniform Resource Locator (URL) “ Unique address of each file on the Internet URL can be Absolute – contains all parts of URL; Relative – presents path and file name relatively current file. Scheme Server namePathFile name

30 Scheme Tells the browser how to deal with the file Must be in lower case Usually followed by a colon and two forward slashes (://) http – Hypertext Transfer Protocol to access Web- pages ftp – File Transfer Protocol to download the file from the net mailto – to send electronic mail (only a colon) File – to access file on a local hard disk (File scheme uses ///). https – for secure web pages and others…

31 Server name, Path Server name – second portion of the URL (where file is actually located) Followed by a forward slash Path – leads to the file (like a folder) Followed by a forward slash

32 Absolute URL (examples) Shows the entire path to the file, including: scheme, server name, complete path and the file name E.g., ftp://ftp.site.com/common/prog.exe file:///Cdisk/ITEC1000/assignment.html Server name is assumed: local computer

33 Relative URL (examples) Describes the location of the file relatively the current location 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”

34 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

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

36 Images SRC – source of image or file address Another attributes: BORDER=n, n-thickness of the border in pixels ALT – alternative text (appears if the image does not) WIDTH=x HEIGHT=y – width and height of an image in pixels ALIGN – position on a page (“top”, “middle”, “bottom”, “left”, “right”

37 Images (example) <IMG SRC=“images/pic1.bmp” WIDTH=30 HEIGHT=30 ALT=“Digimon” ALIGN=“left” >

38 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

39 Tables (cont…) The intersection of a column and row is called a cell. Cells in the same row or column are usually logically related in some way Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Cell

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

41 Tables (cont…) 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) cont… Quarter Month Quantity I January 130 February 125 March 135

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

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 containers: Images, Hyperlinks, Text, Objects, even Tables