1. CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute of Information TechnologyT2-Lecture-1

2. HyperText Markup Language (HTML) Part - I For Lecture Material/Slides Thanks to: www.w3schools.com

3. Synopsis Introduction to HTML HTML Elements HTML Editors HTML Basics HTML Attributes HTML Headings HTML Paragraphs HTML Text Formatting HTML Comments HTML Hyperlinks (Links) 3 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

4. What is HTML? HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages 4 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

5. HTML Tags HTML markup tags are usually called HTML tags. HTML tags are keywords (tag names) surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a slash before the tag name Start and end tags are also called opening tags and closing tags content 5 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

6. HTML Elements

7. HTML Elements In HTML, most elements are written with a start tag (e.g. ) and an end tag (e.g. ), with the content in between: This is a paragraph. 7 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

8. HTML Elements HTML documents are defined by HTML elements. An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are started with start tag Most HTML elements can have attributes 8 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

9. HTML Document Example 9 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

10. HTML Example Explained The element: ◦ This is my first paragraph. The element defines a paragraph in the HTML document. The element has a start tag and an end tag. The element content is: This is my first paragraph. 10 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

11. HTML Example Explained… The element: ◦ This is my first paragraph. The element defines the body of the HTML document. The element has a start tag and an end tag. The body element content is another HTML element (a p element). 11 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

12. HTML Example Explained… The element: ◦ This is my first paragraph. The element defines the whole HTML document. The element has a start tag and an end tag. The element content is another HTML element (the body element). 12 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

13. HTML Example Explained… Don't Forget the End Tag Some HTML elements might display correctly even if you forget the end tag: ◦ This is a paragraph This is a paragraph The example above works in most browsers, because the closing tag is considered optional. Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag. 13 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

14. Empty HTML Elements HTML elements with no content are called empty elements. is an empty element without a closing tag (the tag defines a line break). Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like, is the proper way of closing empty elements in XHTML (and XML). 14 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

15. HTML Tip: Use Lowercase Tags HTML tags are not case sensitive: means the same as. Many web sites use uppercase HTML tags. Recommendations are use lowercase 15 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

16. Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user. 16 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

17. HTML Page Structure 17 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

18. The Declaration The declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML version and type used. 18 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

19. HTML Versions 19 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

20. Write HTML Using Notepad or TextEdit HTML can be edited by using a professional HTML editor like: ◦ Adobe Dreamweaver ◦ Microsoft Expression Web ◦ CoffeeCup HTML Editor Notepad (PC) or TextEdit (Mac) are recommended to use at least once for gaining understanding. 20 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

21. Steps to Create Your First Web Page Step 1: Start Notepad To start Notepad go to: Start All Programs Accessories Notepad 21 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

22. Steps to Create Your First Web Page… Step 2: Add HTML Code Type your HTML code into your Notepad: 22 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

23. Steps to Create Your First Web Page… Step 3: Save HTML Page Select File -> Save as.. in Notepad's menu. while saving an HTML file, use: either.htm or.html file extension. 23 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

24. Steps to Create Your First Web Page… Step 4: View HTML Page in Your Browser Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file. The result should look much like this: 24 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

25. HTML Tip - How to View HTML Source When you see a Web page and wondered “How did they do that ? “ “right-click” in the page and select "View Source" (IE) or "View Page Source" (Firefox), or similar for other browsers. That will open a window containing the HTML code of the page. 25 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

26. HTML Basics

27. HTML Paragraphs HTML documents are divided into paragraphs. Paragraphs are defined with the tag. Examples: This is a paragraph This is another paragraph Browsers automatically add an empty line before and after a paragraph. Don't Forget the End Tag Most browsers will display HTML correctly even if you forget the end tag: Example ◦ This is a paragraph ◦ This is another paragraph It might work in most browsers, but forgetting the end tag can produce unexpected results or errors. Future version of HTML will not allow to skip end tags. 27 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

28. HTML Headings HTML headings are defined with the to tags. Example  Ahmed Mumtaz Mustehsan Teacher CSC 330 E Commerce 28 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

29. Headings Are Important Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on. 29 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

30. HTML Headings Headings are defined with the to tags. defines the most important heading. defines the least important heading. Example ◦ This is a heading This is a heading This is a heading demo !! Note: Browsers automatically add some empty space (a margin) before and after each heading. 30 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

31. HTML Attributes Attributes provide additional information about HTML elements. HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Example HTML links are defined with the tag. The link address is specified in the href attribute: comsats website 31 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

32. Always Quote Attribute Values Attribute values should always be enclosed in quotes. Double quotes are most commonly used, but single style quotes are also allowed. Note: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name=‘COMSATS Institute of Information Technology “CIIT" ' 32 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

33. Use Lowercase Attributes Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Newer versions of (X)HTML will demand lowercase attributes. 33 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

34. HTML Links HTML links are defined with the tag. Example ◦ university website ◦ Note: The link address is specified in the href attribute. demo !! 34 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

35. HTML Images

36. HTML Images HTML images are defined with the tag. Images can be inserted in to HTML documents. How to insert images into an HTML document ? How to insert an image from another folder or another server? Answer: Use image tag (img> along with source tag. 36 T1-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

37. The Tag and the Src Attribute In HTML, images are defined with the tag. If tag is empty, i.e. no closing tag, means it contains attributes only. To display an image on a page, we need to use the src attribute. The value of the src attribute is the URL of the image we want to display. Syntax for defining an image: The URL points to the location where the image is stored. An image named “monogram.gif", located in the "images" directory of “www.vcomsats.edu.pk " has the URL: http://www.vcomsats.edu.pk/images/monogram.gif. The browser displays the image where the tag occurs in the document. If we put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. 37 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

38. The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed or if a user for some reason cannot view it: because of slow connection, an error in the src attribute, or if the user uses a screen reader. The value of the alt attribute is an author-defined text: The alt attribute provides alternative information for an image 38 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

39. Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. Note: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. With the result the page layout will change during loading. The attribute values are specified in pixels by default: 39 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

40. HTML Images Example Raining Day Its raining Cats and Dogs demo !! 40 T1-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

41. Useful Tips Note: If an HTML file contains ten images - eleven files are required to display the page. Loading images takes time. So !!!Use images carefully. When a web page is loaded, the browser, gets the image from a web server and inserts it into the page. Therefore, make sure that the images are available in the same location in relation to the web page, otherwise the visitors will get a broken link icon. The broken link icon shows that “image not found” 41 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

42. HTML Image Tags 42 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

43. HTML Lines The tag creates a horizontal line in an HTML page. The hr element can be used to separate content: Example ◦ This is a paragraph. This is a paragraph. This is a paragraph. 43 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

44. HTML Line Breaks Use the tag creates a new line without starting a new paragraph: Example ◦ This is a para graph with line breaks Note: The element is an empty HTML element. It has no end tag. 44 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

45. HTML Output We cannot be sure how HTML will display our web page; Large or small screens, and resized windows will create different results. With HTML, we cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space. Solution ? Use Formatting tags 45 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

46. HTML Formatting Tags

47. HTML Text Formatting Tags HTML uses tags like and for formatting output, like bold or italic text are called HTML formatting tags. or defines bold or italic text only. or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, the browsers of future might change their options to represent strong and emphasizes text. Example demo!!!demo!!! ◦ This text is bold This text is italic This is computer output This is subscript and superscript 47 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

48. HTML Text Formatting Tags… 48 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

49. HTML Comments

50. HTML Comment Tags Comment tags are used to insert comments in HTML. You can add comments to your HTML source by using the following syntax: ◦ Note: There is an exclamation point (!) in the opening tag, but not in the closing tag. Comments are not displayed by the browser, but they can help document your HTML. With comments you can place notifications and reminders in your HTML: Example ◦ This is a paragraph. 50 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

51. HTML Comment Tags… Comments are also useful for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: Example ◦ --> Conditional Comments You might stumble upon conditional comments in HTML: ◦.... some HTML here.... Conditional comments defines HTML tags to be executed by IE only. 51 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

52. HTML Links

53. HTML Hyperlinks (Links) Links are found in nearly all Web pages. Links allow users to click their way from page to page. The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When we move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the element is the href attribute, which indicates the link's destination. By default, links will appear in all browsers as: ◦ An unvisited link is underlined and blue ◦ A visited link is underlined and purple ◦ An active link is underlined and red The HTML code for a link is simple: ◦ Link text The href attribute specifies the destination of a link. 53 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

54. HTML Links - The target Attribute The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: Example ◦ Visit W3Schools! 54 T2-Lecture-1 Ahmed Mumtaz Mustehsan www.w3schools.com

55. The End HPML Part-I Thank You