HTML

1
HTML

• Markup language coded text is converted into
  formatted text by a web browser.
• Big chart on pg. 1639.
• Tags usually come in pairs like
• ltTAGgt data lt/TAGgt
• Some like ltbrgt, lthrgt, ltmetagt are single.
• Words in tags can be in upper or lowercase.

2
HTML Document Parts

• Every HTML document needs
• ltHTMLgt at the start.
• lt/HTMLgt at the end.
• They usually have a header and a body.
• They have ltHEADgt header lt/HEADgt
• They have ltBODYgt bodylt/BODYgt

3
HTML Comments

• Comments look like
• lt!--- Put comment here ---gt
• 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.

4
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 nbsp makes a space
• The tag ltbrgt makes a newline.

5
HTML Headers

• ltHEADgt lt/HEADgt -- enclose header info.
• ltTITLEgt lt/TITLEgt -- Text here sent to top of
  browser.
• ltMETAgt -- These single tags go in the header.
• Eg ltMETA namekeywords contentdog house
  cargt
• Frame information.

6
HTML Body

• The main data goes into the body.
• ltbodygt Body of Pagelt/bodygt
• Text typed here will be displayed in a big chunk
  without formatting by whitespace such as tabs or
  newlines or extra spaces.
• ltpregttextlt/pregt preserves whitespace.

7
Body formatting

• ltBODY BGCOLOR(number) text(number)
  background(picture)gtbody of the
  documentlt/BODYgt
• 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.

8
HTML Links (Anchor tag)

• ltA HREFURLgttext or imagelt/agt
• 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.

9
HTML Text Formatting

• Some features include
• ltbrgt -- makes a line break.
• lthrgt -- makes a horizontal line.
• nbsp -- makes a space.
• These can be used multiple times.
• ltpgttextlt/pgt -- paragraph format.
• ltCENTERgtdatalt/CENTERgt Centers the objects
  inside the tags.

10
HTML Fonts 1

• ltBgttextlt/Bgt -- makes text bold.
• ltIgttextlt/Igt -- makes text italicized.
• ltemgttextlt/emgt -- emphasize text.
• Not always well-defined.
• lth1gttextlt/h1gt through lth6gttextlt/h6gt --
  Different sizes of text. h1 is biggest.

11
HTML Fonts 2

• ltFONTgttextlt/FONTgt -- let you specify more
  detailed information.
• ltFONT SIZE(number)gt -- pick size.
• Number can be a difference like 2 or 3.
• ltFONT COLOR(number)gt -- pick color.
• Color is a 6-digit hexadecimal number.
• RRGGBB, each is 0-9 or A-F.

12
HTML Lists

• Lists -- tags to begin and end the lists.
• Ordered lists ltOLgtlt/OLgt
• Unordered lists ltULgtlt/ULgt
• Each element in the list is a list item.
• The ltligt tag is used at the start of an item to
  put it into the list.
• The closing lt/ligt is optional.

13
HTML Tables

• ltTABLEgtlt/TABLEgt -- tags that enclose a table.
• ltTRgtrow datalt/TRgt -- enclose a single row.
  (Table Row)
• ltTDgtdatalt/TDgt -- enclose a single piece of
  data. (Table Data)
• ltTABLE BORDER1gt makes a border.

14
HTML Tables 2

• A lttdgt or lttrgt tag can be aligned.
• Eg., lttd alignleftgt lttr alignrightgt
• ltthgtlt/thgt tags for headers (first row).
• They appear bolder and larger.
• A lttdgt tag just contains HTML. It can be text,
  images, links, etc
• rowspan lets elements be bigger.

15
HTML Images

• ltIMG SRCURL ALTmessage.gt
• 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.
• ALTmessage shows a text message.

16
HTML Links

• Use the ltA HREFURLgtlt/Agt 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.

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 persons page will be different in detail.
• Every persons page will be similar in structure.
• You use the template and add details as needed.

18
HTML Frames

• Split the page into rows or columns.
• ltframeset rows90, 10gtlt/framesetgt
• ltframeset cols75,25gtlt/framesetgt
• Can do more than 2 rows/columns.
• The percents dont have to add up to 100.
• Things after ltnoframesgt are shown if your
  browser cant see frames.

19
HTML Frames 2

• The ltframesetgt data goes in the header.
• Within ltframesetgt use a series of
• ltframe namesomename srcURLgt
• There are no quotes around the name and the URL.
• Each ltframegt tag fills in a frame.
• They fill in from left to right, top to bottom.

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.

21
Forms

• ltformgtform datalt/formgt
• 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.

22
Input types

• Some input types
• ltinput typesubmitgt
• ltinput typeresetgt
• ltinput typebuttongt
• ltinput typeradiogt
• ltinput typetextgt
• ltinput typecheckboxgt

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.
• lttextarea NameSome name rows6
  cols55gtlt/textareagt makes an area where you can
  enter a block of data.

24
Java Applets

• Place ltappletgt and ltparamgt tags in the html
  document.
• ltappletgt tags surround the whole applet.
• ltparamgt 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.