HTML Basics 1450 Technology Seminar Copyright 2003, Matthew Hottell

What is HTML?

Hypertext Markup Language

What is HTML? Hypertext Markup Language Hypertext: Allows for non-linear linking to other documents

What is HTML? Hypertext Markup Language Hypertext: Allows for non-linear linking to other documents Markup Language: Content to be displayed is “marked up” or tagged to tell the browser how to display it.

History of HTML

HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland

History of HTML HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland. It was designed to allow scientists to display and share their research.

HTML Basics HTML is primarily composed of two types of markup: Elements or tags Attributes that modify an element

Elements Elements are the fundamental building blocks of HTML. They are the tags that tell the browser what the enclosed text is. My first HTML page The title element tells the browser that this is the title of the page. Elements must be terminated

Elements General format of an element: Target content HTML is NOT case sensitive…

Common Elements All markup must be placed within HTML tags Contains information about the page as well as other non-display content All display content should go inside these tags

HTML Skeleton My first HTML Page! I Love HTML!

Common Elements Tells the browser that the enclosed text should be set off in a paragraph. This is a heading – the number can range from 1 to 7 for different sizes

Text Display Elements or Bolds the tagged text or Italicizes the tagged text Preserves white space and breaks and stands for “preformatted”

Common Tags Inserts a line break This is an empty tag – it does not have a closing tag. Inserts a horizontal rule (line) This is another empty tag

HTML Comments An HTML Comment which is NOT displayed in the page is done like this:

Attributes Sometimes we need more information for an element in order to control the way the content displays We provide this information with attributes stated within the element start tag

Attributes The generic way of using an attribute looks like this: Target content Single or double quotes may be used to hold attribute values

Attribute examples This will appear centered This tag inserts the image “mypicture.jpg” into the page. Make sure to use the right path!

Hyperlinks Hyperlinks are created using the tag, which stands for “anchor”. The format looks like this: Content to click on for the link The uri can also be a mailto: linkmailto:

Tables Tables require three different tags: Defines the table itself Defines a table row Defines a table cell (table data)

Tables Example table: Column One, row one Column Two, row one Column One, row two Column Two, row two

Lists Two main types: Unordered list Ordered List List items are indicated by

Font You can modify more exactly the way text looks by using the tag: This is red, size 3, and in Garamond!

Entities Some content characters may not show up properly if simply placed inside tags. How would you mark up the following: Is 3<4 ?

Entities In order to display these characters, we use entities to represent them: Character:Entity: << >> && [space]