Home Page
 ID Roles
 Distance Ed
 Objectives
 ID Tools
 Writing
 Graphics
 Evaluation
 Examples
 Sample Jobs
 
Topics in this section include --
 

 HTML 4 & Editors
 HTML 5

  DHTML & JavaScript
  Cascading Stylesheets

HTML 4    
HTML Writers Guild LogoWhat is HTML? -- The Hyper-Text Markup Language (HTML) is the basic language of the Internet. HTML is an SGML (Standard Generalized Markup Language) that conforms to International Standard 8879.  HTML uses tags like <h1> and </h1> or <p> and </p> to format text, headings, paragraphs, images, hypertext links, etc. on a webpage. HTML is a non-proprietary system of tags. The file extensions most commonly used for these pages are .htm and .html.
 

HTML Source Code -- You can view the HTML source code for Internet pages created with HTML by clicking View --> Source (or Page Source).  

Click to see HTML source code     To view the HTML source code for my Site Map, click the button.
[Note: I placed a period "." inside the opening brackets in order to display the HTML tags. If the periods were not there, the page would display as it does on this website.]
 

HTML from Scratch -- Creating HTML pages "by hand" or "from scratch" involves inserting / typing the tags for each paragraph of a page. Most website developers consider this "old fashioned," but I like the control, flexibility and precision this offers. I still create and edit my website pages "by hand" - mostly out of habit because I started building webpages with a simple text editor.

 

Animation on HTML 4 Pages -- When appropriate I enjoy adding animation to my webpages. With HTML 4 that required inserting extra code on my pages like JavaScript or DHTML, or by embedding a multimedia file to the page. Developers often use Flash or Flash-type applications to create these animations. This can take hours of testing and tweaking to get the various languages and applications working well together so the transition looks seamless to the user.

 
HTML Resources
HTML Tutor   https://developer.mozilla.org/en-US/docs/Learn/html
W3C HTML 4 Specifications   http://www.w3.org/TR/1998/REC-html40-19980424/
HTML Beginner Tutorial   http://htmldog.com/guides/html/beginner/
HTML and CSS   http://HTML.com
 
·  HTML  ·  HTML Editors  ·  JavaScript  ·  DHTML  ·  HTML 5  ·  Stylesheets  · 
 ·  Top of Page  ·  Home  ·
 
HTML Editors
Choosing an HTML Editor -- HTML Editors range from simple plain text applications to sophisticated WYSIWYG webpage authoring tools, from the most elementary and free to the sublime and expensive. Some type of HTML Editor application is needed for building and maintaining websites.
Editing Computer       Text Editors -- On the inexpensive end of the spectrum, users with a solid knowledge of HTML can create every webpage with a simple text editor like Notepad (Windows) or SimpleText (Macintosh). Since these plain text editors are included with their operating systems, they're free. To use these text editors, users type the text and the desired HTML tags, then save the text file with an .html extension instead of a .txt extension.
      WYSIWIG Editors -- WYSIWYG stands for "What you See is What you Get." With these programs users can drag-and-drop text blocks and graphics onto a blank tableau or HTML page. The application then generates the requisite HTML tags. The amount of extra code (HTML tags) generated by some of these programs boggles the mind; it's a wonder the pages ever load once they're created. Be wary of extra code because it make webpages difficult and time-consuming to load, edit or fix. For this reason I never recommend using a Word Processing application to create webpages.

      Personal Preferences -- We all like to use what we are accustomed to. I use Adobe Dreamweaver (developed by Macromedia), which has become the industry standard. Because I prefer hand coding, I never use the drag-and-drop feature, but I use most of the application's other features. I always work with a SPLIT screen so I can view the Browser version of the page and the coded version at the same time
 
The Bottom Line -- A working knowledge of HTML is required for developing webpages, even if the developer uses a WYSIWYG program. Fixing, tweaking and cleaning up webpages involves finding the problem and adjusting the HTML tags. Instructional Design, Course Development and Writing for the Web positions require a good working knowledge of HTML. This knowledge also helps with blogs.
 
Some HTML Editors
Learn Adobe Dreamweaver   https://helpx.adobe.com/support/dreamweaver.html
CoffeeCup HTML Editor   http://www.coffeecup.com/html-editor
Learn InDesign   https://helpx.adobe.com/indesign.html
HTML 5 Cheat Sheet   http://www.onblastblog.com/html5-cheat-sheet/
 
·  HTML  ·  HTML Editors  ·  JavaScript  ·  DHTML  ·  Stylesheets  ·  HTML 5  · 
 ·  Top of Page  ·  Home  ·
 

Please note: I created this website before the advent of WordPress, PHP, XML,
and other applications commonly used today.
  ~ Thanks, Ann

 
JavaScript
JavaScrip SourceBrief Description -- JavaScript is a compact, object-based script language that allows increased interactivity with the user. JavaScript events can recognize and respond to user events such as mouse clicks and movements, form input, and page navigation. JavaScript can be used to play an audio file, execute an applet, or open a page in a new window. JavaScript tags are embedded in HTML. Although JavaScript is not compatible with old browsers, more recent Internet browsers have no problem running JavaScript events.
 
JavaScript Events -- Developers use JavaScript "objects" to create various "events" on their webpages. An "event" includes how the functions are triggered to run. The easiest example is a button, whose definition includes the words onClick="run_my_function()". The onClick event runs the function when the user clicks a button. Common events include OnMouseOver, OnLoad, and OnUnload.
 
JavaScript tags are entered on the HTML page, but they are separated from the regular HTML tags with beginning and ending SCRIPT tags. The opening SCRIPT tag includes the name of the language <SCRIPT language="JavaScript"> and the event description ends with a closing tag </SCRIPT>. However, JavaScript functions can be placed in the BODY of the Web page but are often placed inside the HEAD tags so that they load as the page opens. This can help to reduce JavaScript errors. On these pages, I have placed JavaScript tags in both places.
 
JavaScript Examples --
(1) OnMouseOver: As you pass your mouse over the menu items above, the olive green bullets turn into orange arrows. This change is caused by a JavaScript OnMouseOver event. These are the most common events.
(2) The Click buttons throughout this site are JavaScript events, including setting the size of the window that opens.
(2) Rainbow Text: Watch the text below change color.
 
Note: JavaScript developers are generous with scripts. The sites listed below offer JavaScript lessons and/or tutorials, along with free JavaScript code (snippets) that developers can use on their own sites.
 
JavaScript Resources
W3schools JavaScript Tutorial   http://www.w3schools.com/js/default.asp
JavaScript Beginner Tutorial   http://htmldog.com/guides/javascript/beginner/
JavaScript Kit / Scripts   http://www.javascriptkit.com/
JavaScript Course on UDEMY   https://blog.udemy.com/javascript-tutorial-learn-the-basics/
 
DHTML
DHTML -- DHTML stands for Dynamic HTML. DHTML is a method of creating interactive websites by using a combination of markup language (like HTML), a client-side scripting language (like JavaScript), a presentation definition language (such as Cascading Style Sheets [CSS]), and the Document Object Model. DHTML is not a technology in itself, but a term that refers to the use of a group of technologies together. DHTML was compatible with HTML 3 and 4 but with the advent of HTML 5, it is no longer useful, or desired.
 
HTML 5
HTML 5 is powerful, especially regarding webpage animation. It has greatly reduced the need for using JavaScript or Adobe Flash because HTML 5 has commands for popular webpage animation. Most active webpage developers have taken a course in HTML 5 - cerfications are available. I built this website long ago in HTML 4, so I had to design the animation using JavaScript and Flash. HTML 4 websites are still functional and will be for a long time. But HTML 5 offers many more features.
 
HTML 5 Resources
HTML 5 Introduction from W3schools   https://www.w3schools.com/html/html5_intro.asp
HTML 5 Cheat Sheet   http://www.onblastblog.com/html5-cheat-sheet/
HTML 5 Demos and Examples   http://html5demos.com/
 
·  HTML  ·  HTML Editors  ·  JavaScript  ·  DHTML  ·  HTML 5  · Stylesheets · 
 ·  Top of Page  ·  Home  ·
 
Cascading Stylesheets

Definition --   A webpage stylesheet contains style rules that tell the browser how to present the page. A Cascading Stylesheet (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing, alignment) to webpages. CSS is a flexible, cross-platform, standards-based language used to suggest stylistic features applied throughout an entire website - or certain pages within a website. In their more elegant forms, these stylesheets are specified in a separate file and called from within the HTML page when it loads in a CSS-enabled browser.

 
Benefits of using Stylesheets --  (1) Building any website with a stylesheet makes formatting changes easier to implement. Rather than scouring through the tags for all of the places you have implemented a certain font size or color in order to change it, simply change the stylesheet and the changes will "cascade" down to every page of the website, making the appropriate changes as it goes.
 

Sheets of paper (2) Using Cascading Stylesheets improves a site's performance. If a Course Developer formatted every paragraph on every page using HTML tags, the extra HTML markup would increase each file's size and download time. By contrast, a single CSS rule can achieve the same effect of formatting headings, subheadings, paragraphs and images throughout the site.

(3) When developers place the site's formatting rules in a single shared stylesheet file, the browser downloads that file only once and reloads it from the cache after that, further reducing download time.

 
Editing CSS -- Developers can create and update CSS files with simple text editors or more elaborate ones. I love the way Dreamweaver allows me to design, read, update and apply by CSS files. Some websites will use numerous CSS files, assigning certain files (and formats) to certain types of pages. CSS files can be reused for other websites.
 
CSS Resources
CSS Training   http://www.htmlhelp.com/reference/css/
CSS Examples   http://www.w3schools.com/css/css_examples.asp
CSS Tutorial   http://www.echoecho.com/cssintroduction.htm
 
·  HTML  ·  HTML Editors  ·  JavaScript  ·  DHTML  ·  HTML 5  · Stylesheets  · 
 ·  Top of Page  ·  Home  ·
© 2002-2017 | ann gordon | gordon computer, llc