1. Intro to HTML IS 373—Web Standards Todd Will

2. CIS 373---Web Standards-HTML 2 of 44 Topics Intro to HTML Basic HTML Tags Character Entities Simple Advanced HTML Tags For Next Week

3. CIS 373---Web Standards-HTML 3 of 44 What is HTML? HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags 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

4. CIS 373---Web Standards-HTML 4 of 44 HTML Sample – Title of page – This is my first homepage. This text is bold –

5. CIS 373---Web Standards-HTML 5 of 44 Sample Explained The first tag in every document will be –Tells browser that the language is html –Always ends with an to signify the end of the document Text between and tags are the header information –Not displayed in browser window –Contains such things as titles, imports, Javascript The text between the tags is the title of your document. The title is displayed in your browser's caption. The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font.

6. CIS 373---Web Standards-HTML 6 of 44 HTML versus HTM No difference between the 2 HTM was used when file extensions were limited to 3 letters Convention now is html –Use a text editor to keep your html neat and clean

7. CIS 373---Web Standards-HTML 7 of 44 HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters The surrounding characters are called angle brackets 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 text between the start and end tags is the element content HTML tags are not case sensitive, means the same as – some text

8. CIS 373---Web Standards-HTML 8 of 44 Uppercase Vs Lowercase HTML tags are not case sensitive Why the difference? –Most tutorials and explanations use all upper case tags to differentiate between the tags and text –Next generation of html (xhtml) will require all lower case tags, might as well get in the habit now!

9. CIS 373---Web Standards-HTML 9 of 44 Tag Attributes Tags can have attributes in addition to the elements Attributes provide additional information about the html element –Example: changes the background of the page to red –Example: changes the width of the table Always come in name and value pairs (name=“value”) Always are placed at the start tag of an element Can use single quotes or double quotes around the value of the attribute, but double quotes is the convention –In certain cases, the attribute must be enclosed in single quotes, as in ‘John “Jack” Jones’

10. CIS 373---Web Standards-HTML 10 of 44 Headings Headings are defined with the to tags. defines the largest heading. defines the smallest heading. – This is a heading HTML automatically adds an extra blank line before and after a heading.

11. CIS 373---Web Standards-HTML 11 of 44 Paragraphs Defined with the tag. – This is a paragraph – This is another paragraph HTML automatically adds an extra blank line before and after a paragraph.

12. CIS 373---Web Standards-HTML 12 of 44 Line Breaks The tag used to end a line but not start a new paragraph Forces a line break where you place it Does not have an end tag

13. CIS 373---Web Standards-HTML 13 of 44 HTML Comments Can insert comments into your html source that are not seen in the browser Should explain the code – Exclamation point at the start of the tag but not at the end

14. CIS 373---Web Standards-HTML 14 of 44 HTML Tips Can never be sure how the text will be displayed in the browser (different screen sizes, different browsers, etc.) –Text will be reformatted every time the browser window is resized –Never use spaces or empty lines to format text HTML truncates spaces in text –Any number of spaces count as one –For multiple spaces, use –New line counts as one space Do not use empty tags to generate a new tag –Very bad habit –Do not use tag in lists, more about this later Paragraphs tag does not require an ending tag –Next generation of html will require all start tags to have an end tag –Get in the habit of ending every tag, it will avoid a lot of problems! HTML automatically adds a blank line before and after certain elements, don’t forget about this! –Headings –Paragraphs Use the horizontal rule to separate different sections in the document

15. CIS 373---Web Standards-HTML 15 of 44 Text Formatting Tags 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 Defines Strikethrough

16. CIS 373---Web Standards-HTML 16 of 44 Computer Output Tags Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text

17. CIS 373---Web Standards-HTML 17 of 44 Citation Terms Defines an abbreviation Defines an acronym Defines an address element Defines the text direction Defines a long quotation Defines a short quotation Defines a citation Defines a definition term

18. CIS 373---Web Standards-HTML 18 of 44 HTML Character Entities Some characters have a special meaning in html –< Defines the start of a tag –> Defines the end of a tag –If these are to be displayed in the browser, must use character entities 3 Parts –An Ampersand (&) –Entity name or number –A semicolon (;) To display a less than – < – < Names are easier to remember than number –Certain browsers do not understand the text representation –Almost all browsers recognize the number representation Note All entities are case sensitive

19. CIS 373---Web Standards-HTML 19 of 44 Common Character Entities non-breaking space   less than<< greater than>> Ampersand&& quotation mark"" apostrophe &apos;' ¢cent¢¢ £pound££ ¥yen¥¥ §section§§ ©copyright©© ®registered trademark®® ×multiplication×× ÷division÷÷

20. CIS 373---Web Standards-HTML 20 of 44 Anchor Tag Points to any resource on the web –HTML page –Image –sound file –a movie Anchor syntax – Text to be displayed – - creates an anchor –href attribute - addresses the linked document –Words between the open and close tag will be displayed as a hyperlink

21. CIS 373---Web Standards-HTML 21 of 44 Anchor Target Define where the linked document is to be opened To open in new window use: – Some text

22. CIS 373---Web Standards-HTML 22 of 44 Anchor Name Attribute Name attribute creates a named anchor –Allow the user to jump directly to a section on a page –User does not have to scroll through Syntax Below is the syntax of a named anchor: – Text to be displayed –Name can be any text you would like to use The line below defines a named anchor: – Useful Tips Section –Named anchor is not displayed differently in the browser window To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this: – Jump to the Useful Tips Section –Will be displayed as a hyperlink – takes you directly to the tips section If named anchor cannot be found, jumps to top of document

23. CIS 373---Web Standards-HTML 23 of 44 Frames Display more than one html page in one window Each frame is independent of all others Allows you to keep the same header on footer on each page without having to load them with every page –Saves bandwidth –Saves development time and cost Problems: –Have more html documents to keep track of –Difficult to print the entire page (should have a print-friendly link –Some browsers do not support frames well –Reduces the screen real estate available to display your content Use frames sparingly! Frameset Tag – tag divides window into frames –Each frameset defines a set of rows or columns –The values of the rows/columns indicate the amount of screen area each row/column will occupy

24. CIS 373---Web Standards-HTML 24 of 44 Frames (cont) Frame Tag – tag defines what HTML document to put into each frame –Frameset with two columns First column set to 25% of the width of the browser (can be fixed as well) Second column set to 75% of the width of the browser Can add up to less than 100% if you want a margin – –Simple to use

25. CIS 373---Web Standards-HTML 25 of 44 Frames Useful Tips If visible borders, the user can resize the frame to fit to the screen –Use noresize=“noresize” attribute in the frame tag to prevent the user changing the size of the frame –Add the tag for browsers that do not support frames. Important: Cannot use tags together with the tags! –If you add a noframes tag, you need to use to define the html you would like to display in place of the framed html pages

26. CIS 373---Web Standards-HTML 26 of 44 Tables Defined with the tag Table defined into rows using the tag Each row divided into cells using the (table data) tag –Each cell can contain images, lists, text, horizontal rules, tables, etc. –Essentially any html data can be put into the table cell Basic Syntax: – – row 1, cell 1 – row 1, cell 2 </tr – row 2, cell 1 – row 2, cell 2 – How it would appear in a browser: Border Attribute –If no border attribute, the table will not have any borders –Most of the time you will want to use border attribute to separate the cells of your table –In this case, the table will have a border of 1 row 1, cell 1Row 1, cell 2 Row 2, cell 1Row 2, cell 2

27. CIS 373---Web Standards-HTML 27 of 44 Tables (cont) Headings –Defined with the tag. – – Heading – Another Heading – row 1, cell 1 – row 1, cell 2 – row 2, cell 1 – row 2, cell 2 – Empty cells –Table cells with no content are not displayed very well in most browsers. –Empty cells are included but the border is generally not displayed –Use a non-breaking space to empty cells to force the border to be visible Notes: –,, and elements are seldom used

28. CIS 373---Web Standards-HTML 28 of 44 Table Tags Summary Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer

29. CIS 373---Web Standards-HTML 29 of 44 Ordered Lists List of Items Each item is labeled with a number Starts with an tag, each list item starts with a tag Code: – Coffee Milk – Output: –1. Coffee –2. Milk Inside a list item you can put paragraphs, text, page breaks, etc.

30. CIS 373---Web Standards-HTML 30 of 44 Unordered Lists List of items Preceded by bullets Starts with the tag, each list item starts with the tag Code: – Coffee Milk – Browser display: –Coffee –Milk Inside each list item you can put paragraphs, images, etc.

31. CIS 373---Web Standards-HTML 31 of 44 Definition Lists NOT a list of items List of terms and definitions Definition lists start with the tag and each item uses the tag, each definition starts with the tag Code: – Coffee Black hot drink Milk White cold drink – How the browser would display it: –Coffee Black hot drink –Milk White cold drink Inside a definition tag, you can put paragraphs, breaks, images, etc.

32. CIS 373---Web Standards-HTML 32 of 44 List Tags Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description Deprecated. Use instead Deprecated. Use instead

33. CIS 373---Web Standards-HTML 33 of 44 Forms A form is an area that contains form elements Form elements consist of elements that allow the user to enter information Includes such things as: –Drop-down lists –Check boxes –Radio buttons –Text boxes A form is defined with the tag – – Most common form tag is the input tag

34. CIS 373---Web Standards-HTML 34 of 44 Forms (cont) Text Fields –Text fields are used when you want the user to type letters, numbers, etc. in a form –This form asks the user to enter a first name and a last name First name: Last name: Radio Buttons –Radio Buttons are used when you want the user to select one of a limited number of choices. Male Female –Only one option can be selected

35. CIS 373---Web Standards-HTML 35 of 44 Forms (cont) Checkboxes –Checkboxes are used when you want the user to select one or more options of a limited number of choices. I have a bike I have a car Action attribute and submit button –When the user clicks on the submit button, the content on the form is sent to another file –The other file does some action based on the form input –Username: – If you type some characters in the text field and click the "Submit" button, you will send your input to a page called "html_form_action.asp“ You can also take the form input and update a database or email the form’s content to an email address

36. CIS 373---Web Standards-HTML 36 of 44 Form Tags Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop- down box) Defines an option group Defines an option in the drop-down box Defines a push button

37. CIS 373---Web Standards-HTML 37 of 44 Image Tags Images are defined using the tag The tag is empty, which means that it contains attributes only and it has no required closing tag –Good form to put after the image tag Images are displayed using the “src” attribute –Src stands for source – Browser puts the image right were the image tag occurs in the documents

38. CIS 373---Web Standards-HTML 38 of 44 Alt Image Attribute Alt attribute defines alternate text to be displayed if the image cannot be found – Useful to put alt text into your document for those with text-only browsers Note: –If an HTML file contains ten images - eleven files are required to display the page correctly –Images take a lot of bandwidth so try to make the filesize as small as possible –Do not use images if you want solid colors, use bgcolor instead

39. CIS 373---Web Standards-HTML 39 of 44 Image Tags Defines an image Defines an image map Defines a clickable area inside an image map

40. CIS 373---Web Standards-HTML 40 of 44 Backgrounds The tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor –bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: –The lines above all set the background-color to black. Background –The background attribute specifies a background-image for an HTML page –The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. – –The URL to the image can be relative or absolute

41. CIS 373---Web Standards-HTML 41 of 44 Background Questions Will the background image increase the loading time too much? Will the background image look good with other images on the page? Will the background image look good with the text colors on the page? Will the background image look good when it is repeated on the page? Will the background image take away the focus from the text?

42. CIS 373---Web Standards-HTML 42 of 44 Sample HTML Color Names Some of the 147 color names and references used by most browsers ColorHex Color AliceBlue #F0F8FFAliceBlue#F0F8FF AntiqueWhite #FAEBD7AntiqueWhite#FAEBD7 Aqua #00FFFFAqua#00FFFF Aquamarine #7FFFD4Aquamarine#7FFFD4 Azure #F0FFFFAzure#F0FFFF Beige #F5F5DCBeige#F5F5DC Bisque #FFE4C4Bisque#FFE4C4 Black #000000Black#000000 Blanched Almond #FFEBCDBlanched Almond#FFEBCD Blue #0000FFBlue#0000FF Blue Violet #8A2BE2Blue Violet#8A2BE2 Brown #A52A2ABrown#A52A2A

43. CIS 373---Web Standards-HTML 43 of 44 HTML Conclusion HTML is a very easy to learn and intuitive language Composed of different tags and text Try to design your html to be compatible with most browsers Remember: All start tags must have an ending tag!!! Format your html source well using indents and carriage returns to make it easy to read and modify if need be Design for the user in mind!

44. CIS 373---Web Standards-HTML 44 of 44 For Next Week HTML Assignment (on class homepage) –Print out html page and source code and hand in next week –Get started on it now if you want! Read Zeldman, Chapters 9-10