Introduction to HTML

1
Introduction to HTML
2
HTML

• Hyper Text Markup Language
• Basic __________ language for developing web
  sites
• HTML documents are __________files that can be
  created using any text _____.
• Notepad
• File extension .htm, .html

3
HTML Basics

• Element
• Fundamental ____________of the structure of a
  text document.
• Some examples of elements
• ________
• Tables
• ________
• Lists

4
HTML Basics

• HTML ________
• Start Tag -- (lta tag namegt)
• End Tag (lt/a tag namegt)
• Tags are usually ________
• ltH1gt and lt/H1gt

5
Creating a HTML File

• Open Notepad
• Click Start ? then Run
• In the Open box type Notepad then click OK
• Click on File -gt Save as
• In the File name box type in name of page.htm
• Click on Save

6
HTML Basics

• lthtmlgt
• ltheadgt ltTITLEgt A Simple HTML Examplelt/TITLEgt
  lt/headgt
• ltbodygt ltH1gt HTML is Easy To Learnlt/H1gt
• ltPgt Welcome to the world of HTML. This is the
  first paragraph. While short it is still a
  paragraph! lt/Pgt ltPgtAnd this is the second
  paragraph.lt/Pgt
• lt/bodygt
• lt/htmlgt

7
HTML Basics

• ltHTMLgt
• This element tells your browser that the file
  _________ HTML-code.
• When saving, use .htm as your extension
• lt/HTMLgt

8
HTML Basics

• ltHEADgt
• Contains the _________
• Title shown as part of your browser's window
• lt/HEADgt
• ltTITLEgt
• Displayed in the ______ ____ of the browser
• lt/TITLEgt

9
HTML Basics

• ltBODYgt
• ________ part of your HTML document
• This is what people _______
• All other tags now come within the body tag.
• lt/BODYgt

10
HTML Basics

• Headings
• 6 _________ of headings
• 1 being the largest
• Headings are typically displayed in larger and/or
  bolder fonts than normal body text.
• The first heading in each document should be
  tagged _______

11
Headings

• There are 6 heading commands.
• ltH1gtThis is Heading 1lt/H1gt
• ltH2gtThis is Heading 2lt/H2gt
• ltH3gtThis is Heading 3lt/H3gt
• ltH4gtThis is Heading 4lt/H4gt
• ltH5gtThis is Heading 5lt/H5gt
• ltH6gtThis is Heading 6lt/H6gt

12
HTML Basics

• Paragraphs
• Any amount of ____________ including
• Spaces
• Linefeed
• Carriage returns are automatically compressed
  into a single space when your HTML document is
  displayed in a browser
• A Web __________ ignores this line break and
  starts a new paragraph only when it encounters
  another _______ tag
• Same as hitting the enter twice in Word

13
Lists

• _________ list
• Code
• ltulgt
• ltligtCoffeelt/ligt ltligtMilklt/ligt
• lt/ulgt
• Output
• Coffee
• Milk

• ____________ list
• Code
• ltolgt
• ltligtCoffeelt/ligt ltligtMilklt/ligt
• lt/olgt
• Output
• Coffee
• Milk

14
Create Links

• A ___________ link (hyperlink)
• lt a hrefhttp//www.iusb.edugtIUSB Homelt/agt
• Output IUSB Home
• A _________ link
• lta hrefmailtovkwong_at_iusb.edugt
• Email melt/agt
• Output Email me

15
Image Formats

• .gif
• Graphics ___________ Format
• .jpeg or .jpg
• Joint Photographic ________ Group
• .bmp
• bitmap

16
Image Size

• Computer images are made up of ___________
• ltIMG HEIGHT100" WIDTH150" SRC"image.gif"gt

Height
Width
17
Inserting Image

• Place all images in the same directory/_____
  where you web pages are
• ltimg srcgt is a single tag
• ltimg srcimage.gifgt
• Output
• Turn an image into a hyerlink
• lta hrefhttp//www.iusb.edugtltimg
  srcimage.gifgtlt/agt
• Output

18
Forms

• A form is an area that can contain form elements.
• ltformgtlt/formgt
• Commonly used form elements includes
• ________ fields
• _________ buttons
• ______________
• ____________ buttons

19
Text Input Fields

• Output
• First name
• Last name

• Used when you want the user to type letters,
  number, etc.
• ltformgt
• First name ltinput type"text" name"firstname"gt
  
• ltbrgt
• Last name ltinput type"text" name"lastname"gt
  lt/formgt

20
Submission Button

• When user clicks on the Submit button, the
  content of the form is sent to another file.
• ltform name"input" action"html_form_action.asp"
  method"get"gt Username ltinput type"text"
  name"user"gt
• ltbrgt
• ltinput type"submit" value"Submit"gt
• lt/formgt

• Output
• Username

21
Checkboxes

• Used when you want the user to select one or more
  options of a limited number of choices.
• ltformgt
• ltinput type"checkbox" name"bike valuebikegt
  I have a bike
• ltbrgt
• ltinput type"checkbox" name"car valuecargt I
  have a car lt/formgt

• Output
• I have a bike
• I have a car

22
Radio Buttons

• Used when you want the user to select one of a
  ________ number of choices.
• ltformgt
• ltinput type"radio" name"sex" value"male"gt
  Male
• ltbrgt
• ltinput type"radio" name"sex" value"female"gt
  Female lt/formgt

• Output
• Male
• Female

23
Text Box

• Output
• Please provide your suggestion in the text box
  below

• Used when you want to get ________ from user.
• ltformgt
• ltpgtPlease provide your suggestion in the text
  box belowlt/pgt
• lttextarea row10 cols30gt
• lt/textareagt
• lt/formgt

24
Pull-down Menu

• Output
• Select a fruit

• Used when you want user to respond with one
  specific answer with choices you given.
• ltpgtSelect a fruitlt/pgt ltselect
  name"Fruit"gtltoption selectedgt Applesltoptiongt
  Bananaslt option gt Orangeslt/selectgt

25
Tables

• Very useful for presentation of tabular
  information
• Useful to creative HTML authors who use the table
  tags to present their regular Web pages
• Tables can control _________ ________

26
Table Format

• ltTABLEgt
• lt!-- start of table definition --gt
•  
• ltCAPTIONgt caption contents lt/CAPTIONgt
• lt!-- caption definition --gt
•  
• ltTRgt
• lt!-- start of header row definition --gt
• ltTHgt first header cell contents lt/THgt
• ltTHgt last header cell contents lt/THgt
• lt/TRgt
• lt!-- end of header row definition --gt
• ltTRgt

27
Table Format

•  lt!-- start of first row definition --gt
• ltTDgt first row, first cell contents lt/TDgt
• ltTDgt first row, last cell contents lt/TDgt
• lt/TRgt
• lt!-- end of first row definition --gt
•  
• ltTRgt
• lt!-- start of last row definition --gt
• ltTDgt last row, first cell contents lt/TDgt
• ltTDgt last row, last cell contents lt/TDgt
• lt/TRgt
• lt!-- end of last row definition --gt
•  
• lt/TABLEgt
• lt!-- end of table definition --gt