1. NOTEPAD++ Lab 1 1 Riham ALSmari

2. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over multiple documents 2 Riham ALSmari

3. How to make HTML File Using Notepad++ ? 1. Open Notepad ++  Start  All programs  Notepad ++  Notepad ++  OR  Notepad ++ shortcut 3 Riham ALSmari

4. 4

5. How to make HTML File Using Notepad++ ? 2. Save the file  File  Save as  Change the extension to html : Or 5 Riham ALSmari

6. How to make HTML File Using Notepad++ ? Riham ALSmari 6 3. View the webpage  Double click on the “new 4” file  The webpage will display in the default web browser.

7. How to make HTML File Using Notepad++ ? Riham ALSmari 7

8. How to make HTML File Using Notepad++ ? Riham ALSmari 8 4. Edit the file  Write click in the file  Edit With Notepad++

9. Example Riham ALSmari 9

10. 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 forward slash before the tag name  Start and end tags are also called opening tags and closing tags Riham ALSmari 10

11. The Structure of an HTML File  The opening tag marks the start of an HTML document, and the closing tag tells a browser when it has reached the end of that HTML document  Anything between these two tags makes up the document content, including all other elements, text, and comments Riham ALSmari 11

12. The Structure of an HTML File  An HTML document is divided into two main sections: the head and the body  The head element contains information about the document, for example the document title or the keywords  The content of the head element is not displayed within the Web page  The body element contains all of the content to appear on the Web page  The title element contains the page’s title A document’s title is usually displayed in the browser’s title bar Riham ALSmari 12

13. Adding Comments  The comment tag adds notes to your HTML code  Comments can be spread over several lines Riham ALSmari 13

14. Working with Block-Level Elements  Heading elements are block-level elements that contain the text of main headings on the Web page  To mark a heading, enter  content  n is an integer between 1 and 6 is the largest heading is the smallest heading  To mark a paragraph, enter content  To mark a block quote, enter content 14

15. Adding and Markup Tags Riham ALSmari 15

16. Riham ALSmari 16

17. Marking Paragraph Elements Riham ALSmari 17

18. Riham ALSmari 18

19. White Space and HTML  White space is the blank space, tabs, and line breaks within the file  HTML treats each occurrence of white space as a single blank space Riham ALSmari 19

20. White Space and HTML  Any text between the opening tag and the closing tag will preserve the formatting of the source document. Riham ALSmari 20 Welcome to CS543 course! Welcome to CS543 course!

21. Marking a Block Quote  The syntax for making an extended quote is  content Riham ALSmari 21

22. Marking a List  HTML supports three kinds of lists: ordered, unordered, and definition  You use an ordered list for items that must appear in a numerical order  You use an unordered list for items that do not need to occur in any special order  One list can contain another list This is called a nested list Riham ALSmari 22

23. Riham ALSmari 23

24. Creating an Ordered List 24

25. Creating an Ordered List  Using the type Attribute to select numbers, letters, or roman numerals in ordered lists. 25

26. Creating an Ordered List 26

27.  Using the start Attribute to change the starting numbers in ordered lists. Creating an Ordered List 27

28. Creating Unordered List 28

29. Creating a Definition List External sourcs 29

30. Nesting Lists 30

31. Using Other Block-Level Elements  HTML supports the address element to indicate contact information Most browsers display an address element in an italicized font, and some right-justify or indent addresses Riham ALSmari 31

32. Riham ALSmari 32

33. Working with Inline Elements  An inline element marks a section of text within a block-level element  Often used to format characters and words  Also referred to as character formatting elements Riham ALSmari 33

34. Working with Inline Elements  Boldfaced text:  …..  Italicized text:  ….  Underlined text:  ….  Deleted text:  …  Quoted text:  …. Riham ALSmari 34

35. Working with Inline Elements Riham ALSmari 35

36. Working with Inline Elements  Big text:  …..  Small text:  ….  Subscripted text:  ….  Superscripted text:  … Riham ALSmari 36

37. Working with Inline Elements Riham ALSmari 37

38. Riham ALSmari 38

39. Working with Empty Elements  An empty element contains no content  Empty elements appear in code as one-sided tags   The one-sided tag to mark a line break is   The horizontal rule element places a horizontal line across the Web page  Riham ALSmari 39

40. Riham ALSmari 40

41. THE END Lab 1 Riham ALSmari 41