music
OSdata.com: programming text book 

OSdata.com

basic structure of HTML

summary

OSdata RSS
News Feed


OSdata blog RSS.

OSdata blog RSS - add to Bloglines
OSdata blog RSS - add to Google Reader.
OSdata blog RSS - add to My AOL
OSdata blog RSS - add to Newsgator.

    This section describes the basic structure for getting started.

    There are plenty of tutorials on basic HTML and I think I can safely assume that the vast majority of the readers of this material already know those basics. I am reviewing just enough to make sure that everyone is using a well-formed HTML web page. This will prevent introducing extraneous errors into your project.

    This is part of an instructional series on the building of a Forth programming environment in any standard browser using JavaScript.

    Threaded Interpreted Languages (TILs), including Forth, are designed for customization.

    In addition to writing your own Forth programs, please modify the underlying engine to meet your specific needs.

    Please have fun with this project. Make it your own.

    The most recent version is at stable release version or http://www.twiddledom.com/coder/js78.html

    Free Open Souce: Licensed under MIT license. License printed in full below.

previous page   next page
previous page
Forth in JavaScript
  next page
HTML tags and doctype
Google

basic structure of HTML

summary

    This section describes the basic structure for getting started.

    There are plenty of tutorials on basic HTML and I think I can safely assume that the vast majority of the readers of this material already know those basics. I am reviewing just enough to make sure that everyone is using a well-formed HTML web page. This will prevent introducing extraneous errors into your project.

    After some experimentation I am exploring the idea of implementing most of this project in JavaScript.

    It will be much easier for the poor and the homeless to work in JavaScript, because they can download the .html files, modify them, and run them locally in a web browser. Because this requires no installs of software (especially compilers and IDEs), this is something that can be done from a typical school or library computer. Those who have access to a website can upload their files.

HTML

    HTML consists of text and tags. Tags generally start with the less than symbol < and end with the greater than symbol >. Most (but not all) tags have a corresponding closing tag which is almost the same, but includes a forward slash / immediately after the less than symbol that starts the tag.

<tag>
<tag></tag>

    Everything that is outside of a tag is normally text. The actions of the tag generally apply to everything between an openin and closing tag.

<tag>
text
<tag>text</tag>

    HTML generally starts with an opening <html> tag and ends with a corresponding closing </html> tag.

    HTML generally has a head section and a body section, demarked by the corresponding tags.

<html>
<head>
</head>
<body>
</body>
</html>

    HTML comments are indicated by tags that start with an exclamation point and two hyphens and end with two hyphens.

<--this is a comment-->

    HTML tags may contain attributes. Attributes are indicated by an attribute name, an equal sign, and attribute values. Modern versions of HTML require that attributes be placed inside double quotation marks, but most browsers recognize single items (such as a number or single word) without quotation marks so that they can correctly display very old web pages and many modern incorrect web pages.

    The following example adds two attributes to the html tag: lang="en" (which sets the language to English) and dir="ltr" (which sets the script direction to left-to-right).

<html lang="en" dir="ltr">

    The following example adds two attributes to the body tag: bgcolor="#ffffff" (which sets the background color to white) and text="#000000" (which sets the text color to black). Manipulations of color designations will be covered later.

<body bgcolor="#ffffff" text="#000000">

    A properly formed HTMl web page also starts with a special tag to indicate which version of HTML is being used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    The modern version for HTML5 is:

<!DOCTYPE HTML>

    The body section is used to declare (specify) the contents of the browser window. The head section is used to declare (specify) information about the overall document.

    One possible tag that can appear in the head section is the title tag, which specifies the web page title. This title appears in the title bar for most browsers.

<title>JavaScript version 1</title>

    One possible tag that can appear in the body section is the h tag, which specifies a header. Headers come in six sizes, from 1 to 6, with 1 being largest. Many browsers render sizes 3, 4, 5, and 6 exactly the same.

<h1 align="center">JavaScript version 1</h1>

    If you ignore the script tag at the end of the document, http://www.twiddledom.com/coder/js1.html will show a working example of the material covered on this web page.

    You should be able to view the HTML source code from your browser. This is generally done with some variation of a show source menu command. You may need to turn on developer tools in your browser preferences to show source.

    Either download the source or copy and paste the source into a plain text only file (not a word processing file), remove the script part, and try experimenting with the file and viewing the results in your web browser.

brief history

    CERN had a problem of how to effectively share scientific data among their scientists.

    Tim Berners-Lee proposed the world wide web in March 1989 and had a working version at CERN online by 6 August 1991.

    There had been numerous hyper-text systems before Tim Berner-Lee’s, but the world wide web (a combination of a markup language, HTML, and a communications protocol, HTTP) worked on the internet and allowed CERN scientists to easily share their research.

    The first version of HTMl was even more simple than the version outlined above.

    The basic pattern was to have plain text (and images with an img tag) and some simple tags that indicated how to present the text (including lists and tables), along with the all-important hyperlinks (for jumping between pages).

    The format of the tags made it very easy to write software that could figure out what was tag and what was content and made it very easy to parse the contents of the tags.

well-formed documents

    Very quickly it became obvious that most people write ill-formed documents. Almost immediately web browsers had to be fault-tolerant, so that even very badly-formed documents could still be presented, read, and used.

    For content creators (including game developers), the goal is to try to make sure that all of your web pages are well-formed and correct.

    For hackers/crackers, the interestign question is: what happens with different kinds of ill-formed documents.

    Some of the older browsers switch mode based on the doctype declaration. This may be used to trick them into using old security flaws.

    Some kinds of errors (such as forgetting to end a tag, forgetting to provide the ending quotation mark on an attribute, adding an extra quotation mark to an attribute, forgetting to end a comment) will result in portions of a web page disappearing.

    If you want to be an effective hacker/cracker, start experimenting with different purposeful mistakes in your HTML documents in different web browsers and examine the results. Can you find anything that might be a useful exploit?

return to Forth in JavaScript
return to Outrageous Coder

previous page   next page
previous page
Forth in JavaScript
  next page
HTML tags and doctype

contact
comments, suggestions, corrections, criticisms

because of ridiculous spam attacks,
contact through Twitter (@OutrageousCoder) will be more reliable than the contact form

please contact us

your name:
email address:
phone number:
message:

return to table of contents
free downloadable college text book

license

    This is example code from OSdata, This Side of Sanity, and Twiddledom, released under the MIT License.

    Copyright © 2014, 2015 Milo

    Licensed under the MIT License. You may obtain a copy of the License at

        http://opensource.org/licenses/MIT

    The MIT License (MIT)

    Copyright © 2014, 2015 Milo

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

previous page   next page
previous page
Forth in JavaScript
  next page
HTML tags and doctype

Google


Made with Macintosh

    This web site handcrafted on Macintosh computers using Tom Bender’s Tex-Edit Plus and served using FreeBSD .

Viewable With Any Browser


    †UNIX used as a generic term unless specifically used as a trademark (such as in the phrase “UNIX certified”). UNIX is a registered trademark in the United States and other countries, licensed exclusively through X/Open Company Ltd.

    Names and logos of various OSs are trademarks of their respective owners.

    Copyright © 2014 Milo

    Created: October 10, 2014

    Last Updated: October 27, 2014


return to table of contents
free downloadable college text book

previous page   next page
previous page
Forth in JavaScript
  next page
HTML tags and doctype