Overview of HTML

Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb (Mac) –Coffee Cup, Etc.  Content Management, blogs, etc. Content Management

Why do it the hard way…  Web site development is much more sophisticated than HTML  JavaScript  Java  CSS  Ruby on Rails  XML  Server side scripting  PHP  E-commerce  Ajax  jQuery  ASP  Python  Need to be able to tweak codes from web editors.

What is HTML?  HTML (HyperText Markup Language) is a special language which tells the browser how to format text in a www document.  An HTML file consists of text and tags.  HTML uses CSS for page layout and design  HTML5, still evolving, includes more features, better plugin support, and more semantic tags.

Syntax  Contains tags that dictate how the content will appear, i.e. formatting.  Examples: Happy Applies bold to the word Breaks the line  Some tags include attributes that alter the basic command, for example: Welcome

Other Characteristics  The format is text files, with.htm or.html extension.  Hard returns, tabs, and extra spaces are ignored.  DO NOT use spaces in file names.  File names ARE CASE SENSITIVE.  Tags are not case sensitive, but the standard is lowercase.

One More Thing… The first page in a web site should be named index.htm or index.html. Because it’s the default filename, it nicely shortens your URL example: instead of:

Displaying an HTML File  Use any browser software – such as Chrome, Firefox, Internet Explorer, Safari, etc.  Also, use any OS —such as Windows, IOS, Linux, Android, etc.

Beginning Skills The basic tags for an HTML file Heading tags Paragraph tags Use attributes (such as width=" ") Line breaks Indent with blockquote We will also insert an image

In-Class Practice Write a webpage about a simple topic. See the handout. …For practice only; not to turn in. …When creating web sites, it is extremely important to organize files in the proper folders … …For practice only; not to turn in. …When creating web sites, it is extremely important to organize files in the proper folders … OBJECTIVE:

Get Started  Open My Computer  Create a folder called “_____ ”  Find a picture and save it in the folder. (less than 600px width is best)  Open Notepad or Textwrangler (for Macs)  Open any browser