1 Introduction to HTML: Part 1 Outline Introduction Elements and Attributes Editing HTML Common Elements Headers Images Unordered Lists Nested and Ordered Lists Linking Special Characters and More Line Breaks More Examples

2 - Introduction to HTML: Part 1 - HTML stands for Hyper Text Markup Language. - An HTML file is a text file containing. - The markup tags tell the Web browser how to display the page. -An HTML file must have an htm or html file extension. -An HTML file can be created using a simple text editor.

3 Main.html Program Output Internet and WWW How to Program - Welcome Welcome to XHTML! The text between the title tags appears as the title of the web page. Elements between the body tags of the html document appear in the body of the web page

4 HTML Text Formatting TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscript text Defines superscript text Defines deleted text defines the text direction Defines underlined text Defines horizontal rule … Defines header text

5 Text Formatting Example my first example this is bold text this is big text this is emphasized text this is italic text this is small text this is deleted text this is underlined text This is subscript text This is superscript text this is right to left text this is left to right text

6 Header.html Internet and WWW How to Program - Headers Level 1 Header Level 2 header Level 3 header Level 4 header Level 5 header Level 6 header The font size of the text between tags decreases as the header level increases. Program Output

7 tag : defines font Attribute  size 12 font size flag available +6   -6 Example : text text centering and aligning: centering: text Aligning: Attribute  align  left, right, center this is the left side this is the right side this is the center side

8 Placing image on web page: TagDescription Defines image AttributeDescription Srcdefines the image file location. Widthspecify the image width. Heightspecify the image height. Altis an attribute give a description of the image, the description is displayed if the image cannot be displayed Borderdefines the image border width aligndefines the placement side of the image (the default is left).

9 Aligning text with images Aligning text with images: text text text Internet and WWW How to Program - Welcome <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> The value of the src attribute of the image element is the location of the image file. The height and width attributes of the image element give the height and width of the image. The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed.

10 Program Output The second image could not be displayed properly, so the value of its alt attribute is displayed instead.

11 Tag Attribute  behavior  alternate  Scroll  Slide Direction  right, left, down, up. ScrollAmount =1,2,3,…. ScrollDelay= 30,40,…. Bgcolor: defines on underground color

12 Ordered and Unordered List Ordered list: create a list in which item begin with a number or letter. Unordered list: does not order it's items by letters or unletters. TagDescription Defines ordered list Defines unordered list Defines list items AttributeDescription typeType of ordering or unordering (circle, square, disk)

13 List.html Internet and WWW How to Program - Lists The Best Features of the Internet You can meet new people from countries around the world. You have access to new media as it becomes public: New games New applications For business For pleasure Around the clock news Search engines Shopping Programming XML Java XHTML Scripts New languages Links Keeping in touch with old friends It is the technology of the future! My 3 Favorite CEOs Harvey Deitel Bill Gates Michael Dell Entries for an ordered list must be placed between the and tags. By inserting a list as an entry in another list, lists can be nested. The type attribute of the ordered list element allows you to select a sequence type to order the list. Text placed between the em tags will be italicized.

14 List.html Program Output Some sequence types available to order lists are roman numerals, letters and numbers. Nested lists are indented underneath the main list.

15 Linking TagDescription Defines an anchor, used to create an anchor to link for. AttributeDescription href Used to address the document to link to target Defines where the link document will be opened

16 Links.html Internet and WWW How to Program - Links Here are my favorite sites Click on a name to go to that page. Deitel Prentice Hall Yahoo! USA Today Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor links to the page that’s value is given by the href attribute. The text between the a tags is the anchor for the link.

17 Program Output Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

18 Contact.html Internet and WWW How to Program - Contact Page My address is Click the address and your browser will open an message and address it to me. To create an link include “mailto:” before the address in the href attribute.

19 Program Output When a user clicks on an link, an message addressed to the value of the link will open up.

20 Character Entities Entity nameDescriptionResult Non-breaking spaceSpace <Less than< >Greater than> "Quotation mark“ ©Copyright©

21 Contact2.html Internet and WWW How to Program - Contact Page My address is Click on the address and your browser will automatically open an message and address it to my address. All information on this site is © Deitel & Associates, Inc You may download 3.14 x 10 2 characters worth of information from this site. Only one download per hour is permitted. Note: < ¼ of the information presented here is updated daily. The horizontal rule element renders a horizontal line on the web page. Special characters are denoted with an ampersand (&) and an abbreviation for that character. In this case, the special characters are ampersand and copyright.

22 Contact2.html Program Output Text placed between del tags is struck out.. Text placed between the sup tags is superscripted. Text placed between the sub tags is subscripted.

23 Nav.html Internet and WWW How to Program - Navigation Bar <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> Placing an image element between anchor tags, creates an image that is an anchor for a link. A line break will render an empty line on a web page.

24 Nav.html Program Output Using an image as an anchor works exactly the same as using text. Clicking on the image entitled “links” brings the user to the page on the right.

25 Links2.html Internet and WWW How to Program - Links Here are my favorite sites Click on a name to go to that page. Deitel Prentice Hall Yahoo! USA Today The entries in an unordered list must be included between the and tags. An entry in the list must be placed between the and tags.

26 Program Output Each entry in the list is rendered on its own line with a bullet before it.