Part 9
Slide 1
Slide 2
Slide 3
HTML
• Markup language – coded text is converted into formatted text by a web browser.
• Big chart on pg. 16—39.
• Tags usually come in pairs like
– <TAG> data </TAG>
• Some like <br>, <hr>, <meta> are single.
• Words in tags can be in upper or lowercase.
1
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
HTML Document Parts
• Every HTML document needs
• <HTML> at the start.
• </HTML> at the end.
• They usually have a header and a body.
• They have <HEAD> …header …</HEAD>
• They have <BODY> …body…</BODY>
2
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
HTML Comments
• Comments look like
<!--- Put comment here --->
• Comments make HTML code easier to read.
• They explain what the parts do.
• They break up the code into smaller pieces.
• You should use comments in complex
HTML documents.
3
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 4
Slide 5
Slide 6
HTML Whitespace
• Whitespace is essentially ignored by HTML interpreters like web browsers
• Having many spaces between words, or tabs, or many newlines do not affect the appearance of the text.
• The symbol makes a space
• The tag <br> makes a newline.
4
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
HTML Headers
• <HEAD> </HEAD> -- enclose header info.
• <TITLE> </TITLE> -- Text here sent to top of browser.
• <META> -- These single tags go in the header.
– Eg: <META name=“keywords” content=“dog house car”>
• Frame information.
5
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
HTML Body
• The main data goes into the body.
• <body> …Body of Page…</body>
• Text typed here will be displayed in a big chunk without formatting by whitespace such as tabs or newlines or extra spaces.
• <pre>…text…</pre> preserves whitespace.
6
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 7
Slide 8
Slide 9
Body formatting
• <BODY BGCOLOR=(number) text=(number) background=(picture)>…body of the document…</BODY>
– The numbers are 6 hexadecimal digits
– RRGGBB where each letter is 0-9 or A-F
– Picture is some .gif or .jpg or some other image. It gets tiled in the background.
7
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
HTML Links (Anchor tag)
• <A HREF=URL>…text or image…</a>
• URL can be
– A webpage
– A file to download
– An email address to mail to.
• The text or image is the thing you see on the actual page that takes you to the link.
8
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
HTML Text Formatting
• Some features include
– <br> -- makes a line break.
– <hr> -- makes a horizontal line.
– -- makes a space.
– These can be used multiple times.
• <p>…text…</p> -- paragraph format.
• <CENTER>…data…</CENTER> Centers the objects inside the tags.
9
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 10
HTML Fonts 1
• <B>…text…</B> -- makes text bold.
• <I>…text…</I> -- makes text italicized.
• <em>…text…</em> -- emphasize text.
– Not always well-defined.
• <h1>…text…</h1> through
<h6>…text…</h6> -- Different sizes of text. h1 is biggest.
10
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 11
HTML Fonts 2
• <FONT>…text…</FONT> -- let you specify more detailed information.
• <FONT SIZE=(number)> -- pick size.
– Number can be a difference like +2 or –3.
• <FONT COLOR=(number)> -- pick color.
– Color is a 6-digit hexadecimal number.
– RRGGBB, each is 0-9 or A-F.
11
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 12
HTML Lists
• Lists -- tags to begin and end the lists.
– Ordered lists <OL>…</OL>
– Unordered lists <UL>…</UL>
• Each element in the list is a list item.
• The <li> tag is used at the start of an item to put it into the list.
• The closing </li> is optional.
12
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 13
HTML Tables
• <TABLE>…</TABLE> -- tags that enclose a table.
• <TR>…row data…</TR> -- enclose a single row. (Table Row)
• <TD>…data…</TD> -- enclose a single piece of data. (Table Data)
• <TABLE BORDER=1>… makes a border.
13
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 14
HTML Tables 2
• A <td> or <tr> tag can be aligned.
– Eg., <td align=left> <tr align=right>
• <th>…</th> tags for headers (first row).
– They appear bolder and larger.
• A <td> tag just contains HTML. It can be text, images, links, etc…
• rowspan lets elements be bigger.
14
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 15
HTML Images
• <IMG SRC=URL ALT=“message.”>
– SRC gives the location of the image.
– URL can be a local file or a remote file.
– Browser knows how to work with standard formats like .jpg, .gif.
– ALT=“message” shows a text message.
15
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 16
HTML Links
• Use the <A HREF=URL>…</A> tag.
• Can link to local pages (files).
• This lets the page owner split up the data.
• Each piece of data can be seen separately.
• The items can be images or files to download.
16
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 17
HTML Templates
• Get the basic structure of a webpage given to you.
• For example, mytemplate.html.
– You will use a file like this in a project.
– Every person’s page will be different in detail.
– Every person’s page will be similar in structure.
– You use the template and add details as needed.
17
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 18
HTML Frames
• Split the page into rows or columns.
– <frameset rows=“90%, 10%”>…</frameset>
– <frameset cols=“75%,25%”>…</frameset>
• Can do more than 2 rows/columns.
• The percents don’t have to add up to 100.
• Things after <noframes> are shown if your browser can’t see frames.
18
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 19
HTML Frames 2
• The <frameset> data goes in the header.
• Within <frameset> use a series of
– <frame name=somename src=URL>
– There are no quotes around the name and the
URL.
• Each <frame> tag fills in a frame.
• They fill in from left to right, top to bottom.
19
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 20
CGI
• Common Gateway Interface
• Programs that let HTML pages interact with the viewers
• Programs can send specific information.
• Programs get information from users.
• Written in C/C++, Java, Perl, UNIX scripts.
20
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 21
Forms
• <form>…form data…</form>
• Method attribute: post or get
– Get gives a URL where the script can get data.
– Post sends the data to the program.
• Action attribute: The URL of the program that will process the data being sent.
– This could also be a mailto so the data just gets sent in an email.
21
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 22
Input types
• Some input types:
– <input type=“submit”>
– <input type=“reset”>
– <input type=“button”>
– <input type=“radio”>
– <input type=“text”>
– <input type=“checkbox”>
22
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 23
More Forms
• Each input has a “name” attribute telling what type of data is entered there.
• Each input also has a “value” that gets sent in the form info.
• <textarea Name=“Some name” rows=6 cols=55></textarea> makes an area where you can enter a block of data.
23
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
Slide 24
Java Applets
• Place <applet> and <param> tags in the html document.
• <applet> tags surround the whole applet.
• <param> tags are used to input parameters
(or data) to tell the applet what to do.
• The .class file must be in the same directory as your html file.
24
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
___________________________________
