HTML Introduction

Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements o paragraphs o headings o block quote o lists  inline elements  empty elements 2

First HTML code Lastname, Firstname Welcome to My Homepage. We will start with this simple code. 3 Lecture 7

First HTML code Complete html document Body of the html document Title of the html document 4 Lecture 7

Tags  HTML document o Consists of tags  Tags - core building block of HTML o marks the presence of an element o marks the “start” and “end” of an element o Two-sided tags vs. single-sided tags  General syntax for two-sided tags content Opening tagClosing tag Lastname, Firstname Welcome to My Homepage. 5

Lecture 7 More about tags  special terms surrounded by angle brackets  can be upper, lower or mixed case Math 279 are all ok  most tags come in pairs, some don’t 6

Lecture 7 HTML tags  … o tells browser that file contains HTML-coded information o Anything between these two tags makes up the document content, including all other elements, text, and comments 7

The Structure of an HTML File  An HTML document is divided into two main elements: the head and the body  head element contains info about the document, for example, the document title or the keywords  … represents the head tags  The content of the head element is not displayed within the Web page Lecture 7 8

Title tags  … o used inside … o identify document title o displayed in the title bar at top of browser window o identifies your page for search engines 9

Body tags  … o start and end the actual contents (body)  The body element contains all of the content to appear on the Web page  HTML, HEAD, TITLE and BODY are four most basic tags in any html document Lecture 7 10

Adding Comments – special tag  The comment tag adds notes to your HTML code  Comments can be spread over several lines  Comments are useful in documenting your HTML code for yourself and others Lecture 7 11

(1) Do it yourself!  Add the texts as comments to the first html code o Author: Firstname Lastname o Last modified Date: Feb 22, 2010 Lecture 7 12 Lastname, Firstname Welcome to My Homepage.

Block-Level Elements  Block-level elements - distinct blocks within the body  Enhance o Readability o Presentation of the web page  Similar to a technical document o Document title, section title, section text, paragraphs etc.  Most generic and popular o Paragraphs o Headings Lecture 7 13

Lecture 7 Paragraphs and Headings  Paragraphs o …  Headings o …, …, …, … o six levels of headings o H1 is largest o H6 the smallest size 14

Recap the First HTML code Lastname, Firstname Welcome to My Homepage. 15 Lecture 7

(2) Do it yourself! o add another level of heading: … to the existing page o add two paragraphs and execute the html file using your web browser! 16

Lecture 7 How to insert texts in such indented manner? How to insert white spaces before and after the texts? 17

Block Quote  The syntax for making an extended quote is o …  A browser inserts white space before and after a blockquote element. Lecture 7 18

Block Quote Lecture 7 19 Computer Networking: A top down approach, 5th ed. Addison-Wesley by Kurose and Ross, ISBN-10: | ISBN-13: HTML A Beginner's Guide, 4th Edition, by Wendy Willard, ISBN-13: New Perspectives on HTML and XHTML: Comprehensive, 5th Edition, by Patrick M. Carey, ISBN-10: | ISBN-13:

Lecture 7 Blockquote indents the texts but what if we want a list of items? 20

Lecture 7 List tags  unordered list o Also known as bulleted list …  Try inserting an unordered list in your html code! 21

Adding a List  HTML supports three kinds of lists: o unordered o ordered, and o definition  Unordered list for items that do not need to occur in any special order  Ordered list for items that must appear in a numerical order  Definition list for definition items Lecture 7 22

Lecture 7 Adding lists  unordered list (bulleted list): o …  ordered list (enumerated list): o … : o … : specify each list item for both unordered and ordered lists  definition list: … o a list of definitions o … : definition term o … : definition description 23

Lecture 7 Example for list tags Example for list tags Three kinds of lists are unordered list ordered list definition list unordered list ordered list definition list unordered list: shows bullets ordered list: shows number definition list: lists definitions Creates bulleted list Creates numbered list Creates definition list 24

Lecture 7 Other block-level elements - address  HTML supports the address element to indicate contact info. …  Most browsers display an address element in an italicized font e.g. John Jay College of Criminal Justice, New York, NY

Block-Level Elements at a glance… Lecture 7 26

Lecture 7 inline elements  Inline element: marks a section of text within a block-level element  Often used to format characters and words o Also referred to as character formatting elements ,…, : boldface element ,…, : italicizes any text inside 27

Lecture 7 28 Make the text bold and italicized

Empty Elements  An empty element contains no content  Empty elements appear in code as one-sided tags  General syntax o  line break o  horizontal line o Lecture 7 29

Lecture 7 30 Insert a horizontal line in between two paragraphs Insert a line break here

More HTML text formatting tags… Lecture 7 31 TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text