topic TWO

1. topicTWO Basic HTML Structure

2. Learning Objectives: • At the end of this chapter the students should be able to: • Identify basic structure and usage of HTML markup including elements, attributes and values. • Create, edit and save basic HTML files in Notepad. • Properly organize HTML files into a folder.

3. Introduction • Have you ever wonder what kind of software or language that is used to develop a web page? • Designing a web page can be a lot of fun, but it can also be very challenging. • Basically most of the static pages are develop using HTML markup language. • HTML is an acronym of HyperText Markup Language.

4. Introduction (cont.) • It is not a procedural programming language like C, Fortran, Cobol or Pascal. • HTML consists of a series of a markup language. • Markup language identifies elements of a page so that a browser can render that page on your computer screen.

5. HTML Editor • Two types • WYSIWYG (What you see is what you get) • plain HTML editors. • Using a WYSIWYG editor you will work in a graphical user interface instead of working with plain HTML code. • This is easiest for beginners, but it’s not recommended because you won’t be able to learn your HTML codes properly

6. Features of Plain HTML Editor • Familiarize with the HTML tags. • Customize the appearance of HTML tags and element • No graphical user interface (GUI) • Difficulty in detecting syntax error or flaw in the coding

8. HTML Editor (cont) • Nowadays most web developer prefer to used WYSIWYG HTML editor because it could help us from writing long codes and simplify the development of a web page. • Front Page Express (comes with IE 4.0 and later) and Netscape Composer (comes with Netscape) are both decent free WYSIWYG editors, but if you want something more powerful, its recommend to used Macromedia Dreamweaver or Microsoft Frontpage 2000

9. HTML Editor (cont) • In normal HTML editors, you work directly with HTML code, but there are a lot of features which save you time as compared to writing all of the code by hands. • Web Page Maker is another example of good HTML editor software where you can design the total appearance of the web page by just drag-n-drop the html elements such as pictures, background music, shapes, menu and so on. • With the software you don’t need to know any HTML tags because there is no place to put it. • There is also pre-installed script that can be used by dragging and dropping it into the stage.

10. HTML Editor (cont) • Macromedia Dreamweaver meanwhile is the best software in developing both static and dynamic web page. • There are many pre-installed script and instruction that can be used. • It also supports variety of programming language such as Active Server Page (ASP) and PHP. • Moreover there is independent software that creates a special plugin to be used with Dreamweaver such as Sothink DHTML Menu, SothinkTreeMenu and so on

12. Plain editor WYSIWYG editor

14. Features of a Good Editor Software

19. Markup Language • Markup language is used to format text and information. • Each tags or keywords contained in pairs of opening angle brackets (for example: <p>) and a closing angle brackets (for example: </p>). • HTML tags are not case sensitive but it’s a good practice to keep all the letters in one case.

20. Markup Language (cont) • Moreover, forgetting to close tags is a syntax error. • For example, uppercase <B> tag is similar to lowercase <b> but most new browser support lowercase tags compared to uppercase character. • Some elements called as void elements don't have an end tag. Example of the tags are <br>, <hr>, <img> and <input>.

21. Editing HTML • HTML files or documents are written in source-code form using text editor. • In order to edit the document, you can open the notepad from: Start/All Programs/ Accessories/ Notepad. • Besides that, you can also open your html file and right click the mouse, then select view source • Note that new browser only allowed you to view the code, not to edit it.

23. Editing HTML (cont.) • An HTML file is the output of the web page development process. • You should name your files to describe their functionality (e.g: contact.html). • Furthermore, you should use proper extension after your file name (*.htm or *.html) and file name of your home page or starting page should be “index.html” or “index.htm”. • It’s up to you to use either .htm or .html as your web page extension but it’s recommend that you used .html for consistency. • Basically error is HTML not fatal compared to other programming language.

24. HTML Tags • HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters < and >. • The surrounding characters are called angle brackets. • HTML tags normally come in pairs like <b> and </b>.

25. HTML Tags (cont.) • The first tag in a pair is the opening tag; the second tag is the closing tag. • The text between the start and end tags is the element content. • HTML tags are not case sensitive; <b> means the same as <B>.

26. HowTo: Writing HTML Tags • Write opening angle bracket • Write HTML tag and elements • Write closing angle bracket <p> Welcome Students </p>

27. Tags Attributes • Tags can have attributes. Attributes provide additional information to an HTML element • Attributes always come in attribute/value pairs like this: attribute="value"

28. Tags Attributes (cont.) • Attributes are always specified in the start tag of an HTML element. • Attributes and attribute values are also case-insensitive. • However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values

29. Tags Attributes (cont.) • Attribute values should always be enclosed in quotes (“ ”). • Double style quotes are the most common, but single style quotes are also allowed. • In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes. • For example: name='John "Joseph" Rambo'

30. QUICKExercise • Divide the following elements into start tag, content, attributes, value and end tags. • <p>Hello, my friends.</p> • My name is <font color=“blue”>Johari</font>. • <b>I like </b> to swim. • Please <u>email</u> me. • Welcome <font size=”2” color= “blue”>Rahimi</font>

31. Basic HTML Syntax <html> <head> <title></title> </head> <body> </body> </html>

33. Basic HTML Syntax (cont.) • An HTML document consists of head and body section. • Head section contains information about the document. • Information in header not generally rendered in display window. • The TITLE element names your Web page, as shown in the example above. • The title of the page is a static content, consist of a word only. • No HTML tags can be used in the title section

34. Basic HTML Syntax (cont.) • The BODY section consists of the page content. • This includes text, images, links, forms, and others HTML tags. • The body section also includes elements such as backgrounds, link colors and font faces while P element forms a paragraph, blank line before and after. • The <body> tag has two main attributes where you can specify backgrounds. • The background can be either a color or an image

36. File Names • Like any other text document, a Web page has a file name that identifies itself to you, your visitors, and to your visitors' Web browser. • There are a few tips to keep in mind when assigning file names to your Web pages that will help you organize your files, make it easier for your visitors to find and access your pages, and ensure that their browsers view the pages correctly.

37. Use lowercase file names • Since the file name you choose for your Web page determines what your visitors will have to type in order to get to your page, you can save your visitors from inadvertent typos (and headaches) by using only lowercase letters in your file names. • It's also a big help when you go to create links between your pages yourself. • If all your file names have only small letters, it's just one less thing you'll have to worry about. • Remember to use all lowercase letters for your file names and to consistently add either the .htm or .html extension. • Mixing upper- and lowercase letters makes it harder for your visitors to type the proper address and find your page

39. My First HTML Page Step-by-Step

40. Instructions • You are entitled to follow the following steps to create your first HTML page. • Before proceeding with the steps, create a folder at desktop by using your name and UiTM id as the folder name. • For example: MohamadRahimiMohamadRosman – 2007131907.

41. Step 1: • Start Notepad (Start/ All programs/ Accessories/ Notepad).

42. Step 2: • Type the following code into NOTEPAD

43. Step 3: • Go to File, select “Save As”

44. Step 4: • Save the file as test.html. In “Save as type”, select “All Files”

46. Internet Browser • A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. • It can be a web page, image, video, or other piece of content • Internet Explorer (IE) and Mozilla are two common browsers used in surfing the Internet.

48. Internet Explorer (MSIE) • Windows Internet Explorer is formerly known as Microsoft Internet Explorer and abbreviated to MSIE or, more commonly IE. • IE is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems starting in 1995. • The high usage rate of IE seems to be closely related to that of Microsoft Windows, as it is the default web browser that comes with Windows Operating System

49. Internet Explorer (MSIE) • After having fought and won the browser wars of the late 1990s, Internet Explorer gained almost total dominance of the browser market. • IE is at a peak period of about 95 percent during 2002 and 2003. • Currently IE market share has since declined at a slow but steady pace. • This is caused mainly due to the rise of Mozilla Firefox, which latest statistics indicate is currently the most significant competition for Internet Explorer. • Nevertheless, Internet Explorer remains the dominant web browser, with a global usage share of around 60 percent.

50. Mozilla Firefox • Mozilla Firefox is a free web browser and can be downloaded from http://www.mozilla.com/en-US/firefox/ie.html. • Firefox offer greater browsing speed, easy to use and customization. • According to the Firefox website, four out of five Firefox users say they’d recommend it to a friend. • Firefox includes the most advanced security features available, including anti-phishing and anti-malware protection, instant Web site ID, automated updates and more.