Overview of HTML Approaches for Web Development

1. Overview of HTML

2. 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.

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

4. 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.

5. Syntax • Contains tags that dictate how the content will appear, i.e. formatting. • Examples: <b>Happy</b> Applies bold to the word <br>Breaks the line • Some tags include attributes that alter the basic command, for example: <h1 class=“feature”> Welcome </h1>

6. 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.

7. 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:www.cofc.eduinstead of: www.cofc.edu/index.htm

8. 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.

9. 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

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

11. 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