HTML+Note

= Introduction to HTML =

What is HTML?
> > > You can use a plain text editor to edit HTMLprofessional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text. === ===
 * 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

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

HTML Tags
> > > > 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
 * 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.

• 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 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. )

HTML Attributes
> > followed by the = sign followed by the value of the attribute in quotes ("") > > •
 * 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
 * Examples of attributes:

• 

HTML Comments
> > > bracket, but not before the closing bracket). > >  Good HTML coders always use comments to explain their code.
 * 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
 * Example:

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

Explanation of HTML Code
> > > > >  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.
 * 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

Graphics on the Web
> > specific graphic file. > > > moved > >
 * 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
 * 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
 * Note that file management is vital when designing web sites!!!