1. Introduction to HTML

2. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is a markup language A markup language is a set of markup tags to describe how data appears in web pages You can use a plain text editor to edit HTML files but professional web developers often prefer HTML editors like FrontPage or Dreamweaver instead of writing plain text.

3. Web Pages HTML documents are simply web pages. The purpose of a web browser (like Firefox) is to read HTML documents and display them as web pages. HTML documents contain the data that will appear when the page is opened in a browser and describes how the data is organized (ie. data can be placed in a paragraph, a list, a table). HTML documents also can show how data is formatted although most modern web pages use Cascading Style Sheets (CSS) to indicate how data is formatted (more on this later). When you save an HTML file, you must use either the.htm (older) or the.html (more recent) file extension. Note that the web does not like spaces in filenames!

4. HTML Tags The browser does not display the HTML tags but uses the tags to interpret the content of the page. HTML markup tags, usually just called HTML tags, are keywords surrounded by angle brackets like. HTML tags normally come in pairs like and. The first tag in a pair is the start tag or opening tags and the second tag is the end tag or closing tags The end/closing tags have a slash (/) before the tag name. HTML tags are not case sensitive: means the same as. However, it is strongly recommended that lowercase is always used as future browsers will only recognize lowercase tags.

5. HTML Elements An HTML element is everything from the start tag to the end tag. Examples of HTML elements: – This is a paragraph – This is a link – HTML Element Syntax –An HTML element starts with a start tag / opening tag and ends with an end tag / closing tag. –The element content is everything between the start and the end tag. –Some HTML elements have empty content. –Empty elements are closed in the start tag – the / is placed after the tag (ex. )

6. HTML Attributes HTML elements can have attributes which provide additional information about an element Attributes are always specified in the start tag and start with the name of the specific attribute followed by the = sign followed by the value of the attribute in quotes (“”) Examples of attributes: –

7. HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable for people looking at your code. Comments are ignored by the browser and are not displayed. Comments start with (There is an exclamation point after the opening bracket, but not before the closing bracket). Example: Good HTML coders always use comments to explain their code.

8. HTML Example My First Heading My first paragraph. This is a link

9. Explanation of HTML Code The text between and describes the web page. All web pages have these tags. The text between and is the visible page content. All web pages have these tags. The text between and is displayed as a heading which will be displayed in large text. The text between and is displayed as a paragraph. The text between and is displayed as a link to the index page of HCToday.ca The text contained in the tag displays the photograph “hcPhoto.jpg” on the web page. Note the attributes are width and height of the picture.

10. Graphics on the Web In a word processing or desktop publishing document, a graphic is inserted into the document. When displaying a graphic (or any other multimedia item) on a web page, a link is made to the specific graphic file. The web page provides a “window” to display the contents of the graphic file. This significantly decreases the size of the HTML file but can lead to broken links if files are moved Note that file management is vital when designing web sites!!!

11. The only graphic formats that can be used on the web are: –jpeg (jpg) –png –gif