Introduction To Markup and HTML

1
Introduction To Markup and HTML

• Alicia Ruvinsky

2
What is markup?

• Markup language content display structure
• The markup is extra information about how content
  (text) is to be display.
• Markup describes the structure of text-based
  information.
• For example, headers, bold text, lists, font
  size, etc.
• The markup appears as tags interspersed within
  the text.
• Best know markup language is HTML.

3
What is HTML?

• Hyper Text Markup Language
• A markup language designed for the creation of
  web pages and other information viewable in a
  browser
• The basic language used to write web pages
• File extension .htm, .html
• HTML is written as labels called tags
• HTML element start tag, content, end tag

4
What is an HTML Tag?

• Markup tags tell the web browser how to display
  the content of the page
• Tags are surrounded by less than (lt) and greater
  than (gt) characters.
• Tags usually come in pairs as start tags (lttaggt)
  and end tags (lt/taggt).
• End tags begin w/ a less than sign followed by a
  forward slash (lt/)
• Example tags ltbgt, ltpgt, ltfontgt, lttitlegt
• Single tags (tag closed itself) ltbr/gt, lthr/gt
• Tags are not case sensitive, but it is
  recommended to use lower case in HTML and
  required to use lower case in XHMTL.
• Use lower case

5
An HTML ExampleWhat you type (in NotePad)
6
An HTML ExampleWhat you see (in a browser)
7
Nested Tags

• For paired tags, there is a start tag and an end
  tag, and in between there can be more tags.
• ltbgtThis is bold, ltigtthis is also italicslt/igt, and
  this is only bold.lt/bgt
• Test this code here.
• There can be many levels of nesting.
• BE CAREFUL! Make sure you close all paired tags.

8
Tag Attributes

• HTML tags can have attributes
• Provide additional info
• Attributes come in name/value pairs such as
  namevalue
• Values should always be in quotes
• Attributes are specified in the start tag
• A few example
• Images are defined w/ the ltimggt tag (no end tag).
• To display an image, the ltimggt tag must be used
  with the src attribute
• Src stands for source
• The value of the src attribute is the URL of the
  image that you want to display.
• See html image tag example
• Background attributes
• The ltbodygt tag (requires end tag) has 2
  attributes where background can be specified.
• bgcolor sets background color
• Background sets background image

9
The Basic HTML File Structure

• lthtmlgt
• ltheadgt
• lttitlegt Page Title Goes Here lt/titlegt
• lt/headgt
• ltbodygt
• content goes here
• lt/bodygt
• lt/htmlgt

10
Creating an HTML File

• Open Notepad
• Click on File -gt Save as
• In the File name pull-down box, type in
  ltyour_webpage_namegt.html
• Click on Save
• Type in content of file
• Save regularly

11
A Few Exercises

• Fixing the poem problem.
• Make this code look how it is intended to look.
• Do the following steps here.
• Set the background to your favorite color.
• Example bgcolor9999CC
• Set the text to a more appropriate color.
• Find an image online and add it between the 2
  paragraphs.

12
HTML Resources

• W3school (very good resource!)