NOTEPAD++ Lab 1 1 Riham ALSmari

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

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

4

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

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.

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

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

Example Riham ALSmari 9

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

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

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

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

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

Adding and Markup Tags Riham ALSmari 15

Riham ALSmari 16

Marking Paragraph Elements Riham ALSmari 17

Riham ALSmari 18

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

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!

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

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

Riham ALSmari 23

Creating an Ordered List 24

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

Creating an Ordered List 26

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

Creating Unordered List 28

Creating a Definition List External sourcs 29

Nesting Lists 30

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

Riham ALSmari 32

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

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

Working with Inline Elements Riham ALSmari 35

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

Working with Inline Elements Riham ALSmari 37

Riham ALSmari 38

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

Riham ALSmari 40

THE END Lab 1 Riham ALSmari 41