34
1 Lect 4 HTML-Intro
| Date post: | 17-Jan-2016 |
| Category: |
Documents |
| Upload: | darcy-james |
| View: | 221 times |
| Download: | 0 times |
1
Lect 4
HTML-Intro
2
HTML & Web PagesA 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 <html> and </html> enclose the entire HTML
document
The page consists of two sections: HEAD and BODY.
the HEAD section (enclosed between <head> and </head>) contains information about the page
the HEAD can contain a title for the browser window, enclosed between <title> and </title>
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 <body> and </body> ) 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> Title of the Page </title> is a TITLE element
<head> <title> Title of the Page </title></head>
is a HEAD element (which contains a nested TITLE element)
most HTML elements have opening and closing tags, but not all
<!-- demo1.html Dave Reed --> 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 Layoutwhite 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 <p>…</p> specifies text surrounded by blank lines a BREAK element <br /> 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 <h1> … </h1> enclose a top-level heading
(large and bold) <h2> … </h2> enclose a sub-heading (slightly
smaller and bold). . .
<h6> … </h6> enclose the smallest sub-heading
the HORIZONTAL-RULE element <hr /> 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
<h1 style="text-align:center"> Centered Heading </h1>
<p style="text-align:right">
This paragraph is right justified. Each line will be shifted
to line up at the right margin.
</p>
11
Headings & Alignment (SKIP no div)
12
Font Formatting
text can be formatted in a variety of ways: bold <b> … </b> italics <i> … </i> underlined <u> … </u> (poor style because
looks like link) < b> Bold text < /b> < br /> < i> Italic text
< /i>< br /> < u> Underlined text < /u>
Bold textItalic textUnderlined text
13
Font Formatting
14
Color-do it the way the lab does it. Will see in later slide
colored text is enclosed in <span style="color:????"> … </span> 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 <ul>…</ul> enclose an unordered list; <ol>…</ol> enclose an ordered list <li>…</li> 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 <a> and </a> text that appears within the tags is displayed as
the link in the page.
20
Hyperlinks
<a>Google Search</a>
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:<a href=“http://www.creighton.edu”>C. U.</a>
Common errors leaving out or misspelling the URL leaving out the text for the anchor http:// is necessary.
21
Hyperlinks
• can also link to another page stored in the same directory on the same machine. Specify just the file name.
<a href="personal.html">Local Page</a>
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 <img /> similar to <br /> and <hr />, 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 <body background="picture.gif">
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 <table> and </table> encapsulate the table data <tr> and </tr> encapsulate a row within the table <td> and </td> 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
<input /> 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:<input type="button" id=“BUTTON_NAME" value="BUTTON_LABEL" /> 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
<input type="button" id=“pushbutton” value=“PUSH ME" />
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: <input type ="text" id ="TEXTBOX_NAME" value ="INITIAL_TEXT" /> 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.
PizzaWhat type of pizza?
<input type=“text”
id=“pizza”
value=“vegetable”><br />
please enter your name:
<input type=“text” id="name"><br />
please enter your room:
<input type=“text” id=“room“ /><br />
<input type="button" value=“ORDER" />
See pizza_noForm.html
