1 Lect 4 HTML-Intro

2 HTML & Web Pages A Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags In its simplest form, a tag is a word or symbol surrounded by angle brackets (<>) or chevron. Most come in pairs. Since the Web is designed to work with all types of computers and operating systems, regardless of the specific hardware and/or software installed on a particular system, the input files for Web pages are created as plain ASCII text files (Lecture 5).

3 HTML & Web Pages With a word processor, the user has very tight control over the exact layout of the document. With HTML, the user has control over the logical layout (structure), but not over the physical layout. two browsers may display a page differently. Browser rearranges page when it is resized. Look at examples.

4 HTML Page and enclose the entire HTML document The page consists of two sections: HEAD and BODY. the HEAD section (enclosed between and ) contains information about the page  the HEAD can contain a title for the browser window, enclosed between and  It’s "good style" to include a title. It is used to refer to the page, for example in a list of bookmarks (favorites) or in the results of a search engine

5 HTML Page The BODY section (enclosed between and ) contains the text that will appear in the page (inside the browser window). Advice: Create the tags in pairs so you don’t forget the close tag. If we’re in lab, do it (maybe after next two slides). Save as, Desktop,.html, All files, Save, Double click

6 HTML Elements tags and the text they enclose form an HTML element Title of the Page is a TITLE element Title of the Page is a HEAD element (which contains a nested TITLE element) most HTML elements have opening and closing tags, but not all is a COMMENT element a comment is ignored by the browser (it does not appear in the rendered page) comments are used by the page developer to record info for the human reading the HTML file.

7 HTML Tags

8 Text Layout white space (extra spaces, tabs and blank lines) are ignored by the browser this allows the browser to adjust the text to the window size you can control some of the text layout using HTML elements a PARAGRAPH element … specifies text surrounded by blank lines a BREAK element causes text to be displayed on a new line. No closing tag so it ends with a space and slash. the symbol forces a space to appear in the text

9 Headings and horizontal rule  in a large document, it is useful to divide the text into sections and then provide each with a heading describing the content that follows … enclose a top-level heading (large and bold) … enclose a sub-heading (slightly smaller and bold)... … enclose the smallest sub- heading  the HORIZONTAL-RULE element draws a dividing line in the page. It is self-closing.

Alignment (SKIP) 10 Skip any “style= “ by default, headings and other elements are left-justified in the page can change the alignment of an element by adding a style attribute that qualifies the appearance of the element Centered Heading This paragraph is right justified. Each line will be shifted to line up at the right margin.

11 Headings & Alignment (SKIP no div)

12 Font Formatting text can be formatted in a variety of ways: bold … italics … underlined … (poor style because looks like link) Bold text Italic text Underlined text Bold text Italic text Underlined text

13 Font Formatting

14 Color-do it the way the lab does it. Will see in later slide colored text is enclosed in … common colors can be used (e.g., red, green, orange, lightblue, darkblue) Not responsible for “span” We may do color the old way later

15 Lists HTML lists organize items in sequence … enclose an unordered list; … enclose an ordered list … enclose a list item

16 Nested Lists-skip  Copy entire unordered list and paste it instead of the third list item.  Notice how the bullets are changed.  WE can choose the bullets and “numbers”…..

17 List Styles-SKIP a style attribute can be used to format the list elements

Lab 3 at this point? 18

19 Hyperlinks a hyperlink, or just link, is a connection to another Web page. by default, a link appears as underlined text in the page. links whose pages have not yet been visited are blue. links whose pages have previously been visited are purple. when the user clicks on the link, the corresponding page is retrieved and displayed a link is specified using ANCHOR tags and text that appears within the tags is displayed as the link in the page.

20 Hyperlinks Google Search What will be displayed? What will it do when user clicks? To where will it link? Need an HREF attribute that specifies the associated Web address: C. U. Common errors  leaving out or misspelling the URL  leaving out the text for the anchor  is necessary.

21 Hyperlinks can also link to another page stored in the same directory on the same machine. Specify just the file name. Local Page

22 Hyperlinks

23 Images Web pages can contain other types of media besides text and links images are embedded in a page using an IMG tag similar to and, there is no closing tag so it ends with a slash IMG attributes SRC specifies the location of the image file ALT specifies alternate text that is displayed if the image fails to load

24 Images  The above is called an inline image.  Can have a background image. The picture will be tiled, like tiles on a floor. Works best with patterns rather than well-defined pictures. Use  In order to include a picture on a Web page, you first have to have a file containing a picture. The file should be in.GIF,.JPG (or.JPEG) or the new.PNG format only. Other formats will not work with all browsers. (AOL supports.BMP and.ART formats, but they will NOT work with all other browsers.).JPG may not work  Image must be in same folder. Not just shortcut.

25 Color (deprecated?) There are 5 color elements to a Web page: - the background color - the text color - the unvisited link color - the visited link color - the active link color (visible when you press the mouse button before you release.) <body bgcolor = “yellow” text = “red” link = “green” vlink = “pink” alink = “white”> (These don’t always work)

26 Background When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).

27 Tables text can be aligned into rows and columns using a TABLE element and encapsulate the table data and encapsulate a row within the table and encapsulate table data within a row (i.e., a column entry)

28 Tables with Borders borders can be added to tables using the border attribute the numeric value assigned to the attribute specifies thickness

29 Tables for Alignment tables are commonly used to align elements in the page here, an image is aligned to the left of some text

Input  Input objects are used to obtain input from the user viewing the webpage. They allow the user to interact with the Web.  The input tag is a one sided tag, so it is self-closing  There are several types of inputs. We will use button and the textbox.  Won’t react till later

Button  a button provides a simple mechanism for user interaction in a Web page by clicking the button, the user initiates some action  general form of a button element: the TYPE attribute identifies the element to be a button the ID attribute gives the element an identity so that it can be referenced the VALUE attribute specifies the text label that appears on the button No closing tag, so we end with /

Button NOTE: At this point, the button will not actually do anything. To get something to happen when a button is pressed requires some programming, not just HTML. JavaScript is later in the term.

Text Box  a text box is box that can display text. it is used for receiving user input.  general form of a text box element: the TYPE attribute identifies the element to be a text box the ID attribute gives the element a name so that it can be referenced the VALUE attribute specifies the default text that initially appears in the box. If omitted, the box is empty.

Pizza What type of pizza? <input type=“text” id=“pizza” value=“vegetable”> please enter your name: please enter your room: See pizza_noForm.html