1 HTML Basic HTML

2 Outline Goal Objectives Introduction Design of Web pages Markup language Develop Web pages Document structure HTML tags Document and tags Text and tags Links/anchors and tags Base tag Meta data and tags Special characters Building Web pages Hierarchy of Web pages Tutorials FAQs Summary Exercises/Homework

3 Goal This chapter covers the basics of the markup language. It also covers the tags of HTML 4.0 that apply to text, links, meta data, and special characters.

4 Objectives Introduction Design of Web pages Markup language HTML tags Hyperlinks Special characters HTML tags for document, text, links, meta data, and special characters

5 Introduction Web pages are written using HTML Two key concepts of HTML are hypertext (links Web pages together) and markup (embeds special tags in Web pages to structure and format them) A Web page, regardless of how complex it looks, can have a maximum of eleven elements. They are text, hyperlinks, color, lists, images, image maps, sound, video, forms, frames, and tables HTML supports all the MIME extensions

6 Design of Web pages A Web page is content and design. The design should enhance content presentation Page design is related to the goal of the page whether it is to sell a product or convey information When designing a Web page, Web authors should take advantage of HTML power such as links, colors, etc.

7 Markup language HTML Markup language uses tags HTML tags convert Web page design into an actual Web page that can be viewed in a browser HTML tags surround page content to format it Browsers render HTML tags and display their results The generic format of an HTML tag is content goes here Many HTML tags have attributes to provide finer control of the tag formatting results

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 editor’s GUI Save the automatically generated HTML code in a file as xxx.html Exit the editor and view the page

9 HTML document structure Three parts make a well-structured HTML document: header, body, and footer The header includes the, and tags The body includes the tag The footer includes the tag HTML tags do not have to appear in caps

10 HTML tags and categories HTML tags may have a matching start and end tags; e.g. …. Other tags may not close; e.g. HTML tags may be nested according to this rule: first open, last closed; or last open, first closed; e.g. … The broad categories of HTML tags are structure, text, hyperlinks, lists, colors, images, image maps, sound, video, forms, frames, and tables

11 Document structure tags The basic structure of an HTML file is: Title goes here Body and content go here footer goes here (Cont’d)

12 Document structure tags Example 7.1 Document structure tags My Web page Template Page contents go here Copyright © 2000 Abe Zeid please me at Revised - January 2000

13 Text and tags Text, in general, consists of headings, paragraphs, and words. HTML has tags to format each Heading tags are -, with providing the largest size text, and providing the smallest size. All tags have the ALIGN attribute The tag is the only tag for paragraphs. It has the ALIGN attribute The tags for words are,,,,,,,,,,,,,, and The has the attributes COLOR and SIZE The has the attributes ALIGN, COLOR, NOSHADE, SIZE, and WIDTH(Cont’d)

14 Text and tags Example 7.2 Heading tags Heading tags Web page This text is size H1 This text is centered and size H2 This text is right justified and size H3 This text is size H4 This text is size H5 This text is size H6 (Cont’d)

15 Text and tags Example 7.3 The tag Paragraph tag Web page This page illustrates how to use the paragraph tag to create paragraphs. When surfers browse the Web, they are accessing and reading home Web pages and pages that are linked to them. These pages are written using a scripting language called HTML (HyperText Mark up Language). We here begin covering HTML and page layout, organization and design. The markup language is a method to embed special tags that describe the structure as well as the formatting of a document. The markup language allows the non-sequential way of reading HTML documents. The simplicity and power of HTML let anyone create Web documents. Making Web documents is easy and straight forward. The markup nature of HTML is what is behind the incredible breadth and reach of the Web (Cont’d)

16 Text and tags Example 7.4 Word tags Formatting tags Web page This text uses the Bold tag This text uses the BIG tag This text uses the BLOCKQUOT tag This text uses the CENTER tag This text uses the CITE tag This text uses the CODE tag This text uses the EM tag This text uses the FONT tag This text uses the Italic tag This text uses the KBD tag This text uses the SMALL tag This text uses the STRIKE tag This text uses the STRONG tag This text uses the Underline tag

17 Links and tags The tag creates hyperlinks between documents, figure 7.5, (known as interdocument links) and anchors within documents (known as intradocument links) The attributes of the tag are HREF, TITLE, NAME, CHARSET, TYPE, HREFLANG, and REL (Cont’d)

18 Links and tags Example 7.5 The tag Hyperlink tag Web page This Web page uses the <A> tag with some of its attributes This link uses a Web server This link uses the mailto: protocol This link uses the ftp: protocol This link uses the telnet: protocol This link has a title to illustrate using the TITLE attribute This link uses the CHARSET attribute This link uses the relative path of a local file This link uses the absolute path of a local file (figure 7.7) (Cont’d)

19 Figure 7.7 Uses of the tag

20 Anchors Anchors are links created within the same Web page Anchors are used to create a table of contents for a Web page, or to specify a given location in a Web page Anchors are created via using the tag and its HREF and NAME attributes Some URLs use anchors in this names (Cont’d)

21 Anchors Example 7.6 Anchors (shortened) (figure 7.8) Anchors Web page Table of contents Document structure tags Text and text tags Links and link tags Developing HTML documents Document structure tags A well-structured HTML document... Return to table of contents Text and text tags One of the main elements of a Web... … (cont’d)

22 Figure 7.8 Anchors

23 tag tag The tag allows Web authors to specify a reference URL (path) from which all relative URLs are measured from The tag must be used in the section Example: The BASE tag Web page tags shown below reside> Check our first product Check our second product Check our thirdproduct

24 Meta data and tags Meta data refers to data that is not part of the content of an HTML document Meta data describes Web pages to search engines. Search engines use meta data to index and rank page hits in a given search The tag declares meta data. It must be used in the section. Example:

25 Special characters Special characters include the Latin characters and and Greek symbols These characters are represented by certain HTML numeric code. The code begins with &#, followed by a number, and ends with ; There are three character sets: ISO (Latin-1) (figure 7.9), Greek letters (figure 7.10), and internationalization characters (figure 7.11) (Cont’d)

26 Figure 7.9 ISO Latin-1 set Figure 7.10 ISO Greek characters

27 Figure 7.11 ISO internationalization set

28 Building Web pages Here are some rules to writing Web pages Provide excellent content and look Keep page design and layout simple/easy to follow Display most important information at top of page Do not cram the page with too much information. Have enough white space in the page Keep page short (one screen long) Choose the right page title and headings Divide the page into paragraphs and lists

29 Hierarchy of Web pages A Web site consists of multiple Web pages with a home (index) page that have links to the other pages Web authors usually develop structures for their Web sites Web authors may design their structures on a piece of paper The most natural structure is a Web (figure 7.12)

30 Figure 7.12 A Web structure

31 Tutorials Tutorial A Web page with hyperlinks (top tags are not shown) Welcome to my Web page Name goes here Address goes here phone number goes here Let me introduce myself. I have mastered HTML. I have been working with many people. This is my personal Web page, in case you want to know more about me. Resume Professional Personal Copyright © 2000 Abe Zeid Please me Revised - January 2000

32 Tutorials Tutorial A Web page With anchors (shortened) Table of contents Resume Professional Personal RESUME Education: Education credentials go here Experience: Current and previous employment go here Skills: computer, software, and other skills go here Return to table of contents

33 Tutorials Tutorial ISO character sets Using HTML character sets Using ISO (Latin-1) and Greek character sets 54>30 25<10 You may want to consider joining the πτΣ (Pi Tau Sigma) and τβπ (Tau Beta Pi) honor societies. Copyright © 2000 Abe Zeid Please me Revised - January 2000

34 Tutorials Tutorial Using hyperlinks as footers (shortened) Resume Professional Personal [ Home Page ] [ Resume ] [ Professional ] [ Personal ] | Home Page | Resume | Professional | Personal |

35 FAQs Q: Why is the browser not showing a Web page as it should? – A: In many cases, this happens because of incorrect use of HTML tags, intentionally or unintentionally. A Web author may forget to close a tag, or the author may make a typo mistake. The author should check the HTML code of the page carefully, until all the mistakes are found and corrected. Sometimes, browsers may help the author find the mistakes. For example, Netscape browser sometimes flashes the HTML tags around the area where a mistake is. This happens only if the author views the HTML code of the page by clicking View => Page Source on the browser window. (Cont’d)

36 FAQs Q: What is the significance of the index.html (or index.htm) file, and how can one use it? – A: This is the default file a browser displays if none is specified during the downloading of a Web site. For example, if a user types as the URL in the browser URL bar, the browser looks for the file index.html or index.htm and displays it. If this file does not exist, the browser displays some other default file or the directory structure of The index.html file can be put to good use. It is usually used when Web sites have many Web pages.

37 Summary – Web pages are written using HTML – The two key concepts behind HTML are hypertext and markup. Hypertext creates links. Markup formats page – Text or HTML editors can be used to write HTML code – Document structure tags are,,,, and – Text tags are -,,,,,,,,,, etc. – The tag creates hyperlinks and anchors. It attributes are HREF, TITLE, and NAME – The tag helps search engines in indexing – HTML special characters include ISO Latin-1 set

38 Exercises Problem 7.6. Use the ISO Latin-1 character set to write this statement in a Web page: Borrowing 10% annual rate costs $500 a year. – Solution strategy: Follow tutorial Use a text editor to write and debug the HTML code. Use a browser to display the results (Cont’d)

39 Using HTML character sets <FONT COLOR = "red">Using ISO (Latin-1) character sets Borrowing $5000 @ 10% annual rate costs$500 a year. Copyright © 2000 Abe Zeid Please me Revised - January 2000

40 Problems Problem 7.17 (modified) U se the tag in Web page. Change fonts in the Web page relative to it. Hint: use or to increment or decrement the base font size, respectively. – Solution strategy: Use a text editor to write the HTML code. Use a browser to test it (Cont’d)

41 Using the BASEFONT tag This text is size 7 This text is size 6 This text is size 5 This text is size 4 This text is size 3 This text is size 2 This text is size 1 (Cont’d)

42