WRITING HTML WAS CREATED way back in 1994 to help teachers create learning resources that access information on the Internet. Here, you will be writing a lesson called Volcano Web. However, this tutorial may be used by anyone who wants to create web pages. You can get a sense of the results by looking at our illustrious alumni and kudos or what people say about the tutorial. By the time you have reached the end of this tutorial you will be able to construct a series of linked web pages for any subject that includes formatted text, pictures, and hypertext links to other web pages on the Internet. If you follow the steps for the Basic Level (lessons 1-14) you will develop a page about volcanoes and if you go on to the Advanced Level (lessons 15-29), you will create an enhanced volcano web site. For faster performance, you can download an archive of all files used in this tutorial as well as a printable version of the lessons. Most of the lessons can be done off-line. If you are having trouble connecting to this site, try our Zircon server but please be nice to these machines; they are doing other work for us. | |
Why Create Web Pages? | THE WEB IS BECOMING AN INTEGRAL PART of our working (and playing) world. You cannot spit anymore these days without hitting a URL (if you do not know what a URL is, you will find out here). In a very short time span, the web has revolutionized the way we access information, education, business, entertainment. It has created industries where there were none before. Being able to develop information on the web might be a job skill, a class requirement, a business necessity, or a personal interest. Unlike any other previous medium, the ability to "write" HTML allows you to potentially connect with millions of other people, as your own self-publisher. |
Objectives | IN THESE LESSONS YOU WILL:
And maybe you will have some fun! |
What | PUT MOST SIMPLY, HTML, is a format that tells a computer how to display a web page. The documents themselves are plain text files (ASCII) with special "tags" or codes that a web browser knows how to interpret and display on your screen. This tutorial teaches you how to create web pages the old-fashioned way -- by hand. There are software "tools" that allow you to spin web pages without touching any HTML. But if you are serious about doing more than a page or two, we believe a grounding in the basics will greatly accelerate what you can do. Everything you create in this tutorial is designed to run from any desktop computer; it does not depend on access to a web server or specialized computer programming. |
Getting Ready | YOU WILL ALSO NEED A TEXT EDITOR PROGRAM capable of creating plain text files e.g. SimpleText for the Macintosh or NotePad for Windows. We strongly urge that you use the most basic text editor while you learn HTML and then later you can explore HTML "editors" If you use a word processor program then you must save your files as plain ASCII text format. You should also be familiar with switching between multiple applications as well as using the mouse to copy and paste selections of text. If you download the tutorial files, you can do nearly all of the lessons off-line. We suggest that you proceed through the lessons in order, but at any time you can return to the index to jump to a different lesson. Within each lesson you can compare your work to a sample file for that lesson. Each lesson page has a link to a concise summary of the tags as well as links to other reference sites. For convention, all menu names and items will be shown in bold text. All text that you should enter from the keyboard will appear in typewriter style. |
Keep in Mind |
|
Who Did This? | THIS IS A PROJECT of the Maricopa Center for Learning and Instruction (MCLI). Writing HTML was developed by Alan Levine, instructional technologist at the Maricopa Community Colleges. Our former intern, Tom Super, provided invaluable instructional design support. Many others have given helpful suggestions, corrected typos, and expressed their thanks! Thanks to some great volunteer efforts, Writing HTML is also available in other languages:
|
Friday, February 13, 2009
Way Back...
activities . . .
This week Sir Balbuena gave us an activity, it all about HTML.
We need to make an html using all the learning we acquire from our researches. Why in our RESEARCHES?? Because sir Ernie discuss the lesson after we had finished our activity given to us.
So with that, we really learn how to make a WEB PAGE!!! For me, its difficult to make an HTML at first but later it will be easy!!! I'm so proud in myself because I accomplished a hard task that I couldn't expect that I can do. . .=)
learnings of the week
HTML markup
HTML markup consists of several key components, including elements (and their attributes), character-based data types, and character references and entity references. Another important component is the document type declaration, which specifies the Document Type Definition. As of HTML 5, no Document Type Definition will need to be specified, and will only determine the layout mode.The Hello world program, a common computer program employed for comparing programming languages, scripting languages, and markup languages is made of 8 lines of code in HTML, albeit line breaks and the tag, or the document type declaration, are optional:
Hello HTML
Hello World!!
This Document Type Declaration is in HTML5 format.
Elements
Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for a HTML document to be considered valid. An element usually has a start tag (e.g. ). The element's attributes are contained in the start tag and content is located between the tags (e.g.
, do not have any content and must not have a closing tag. Listed below are several types of markup elements used in HTML.
Structural markup describes the purpose of text. For example, Golf
Presentational markup describes the appearance of the text, regardless of its function. For example boldface indicates that visual output devices should render "boldface" in bold text, but gives no indication what devices which are unable to do this (such as aural devices that read the text aloud) should do. In the case of both bold and italic, there are elements which usually have an equivalent visual rendering but are more semantic in nature, namely strong emphasis and emphasis respectively. It is easier to see how an aural user agent should interpret the latter two elements. However, they are not equivalent to their presentational counterparts: it would be undesirable for a screen-reader to emphasize the name of a book, for instance, but on a screen such a name would be italicized. Most presentational markup elements have become deprecated under the HTML 4.0 specification, in favor of CSS based style design.
Hypertext markup links parts of the document to other documents. HTML up through version XHTML 1.1 requires the use of an anchor element to create a hyperlink in the flow of text: Wikipedia. However, the href attribute must also be set to a valid URL so for example the HTML code, Wikipedia, will render the word "Wikipedia" as a hyperlink. To link on an image, the anchor tag use the following syntax: 
Attributes
Most of the attributes of an element are name-value pairs, separated by "=", and written within the start tag of an element, after the element's name. The value may be enclosed in single or double quotes, although values consisting of certain characters can be left unquoted in HTML (but not XHTML). Leaving attribute values unquoted is considered unsafe. In contrast with name-value pair attributes, there are some attributes that affect the element simply by their presence in the start tag of the element (like the ismap attribute for the img element).
Most elements can take any of several common attributes:
- The
idattribute provides a document-wide unique identifier for an element. This can be used by stylesheets to provide presentational properties, by browsers to focus attention on the specific element, or by scripts to alter the contents or presentation of an element.
- The
classattribute provides a way of classifying similar elements for presentation purposes. For example, an HTML document might use the designationclass="notation"to indicate that all elements with this class value are subordinate to the main text of the document. Such elements might be gathered together and presented as footnotes on a page instead of appearing in the place where they occur in the HTML source.
- An author may use the
stylenon-attributal codes presentational properties to a particular element. It is considered better practice to use an element’s son-idpage and select the element with a stylesheet, though sometimes this can be too cumbersome for a simple ad hoc application of styled properties.
- The
titleattribute is used to attach subtextual explanation to an element. In most browsers this attribute is displayed as what is often referred to as a tooltip. The generic inline elementspancan be used to demonstrate these various attributes:
id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML This example displays as HTML ; in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language."
Most elements also take the language-related attributes lang and dir.
Character and entity references
As of version 4.0, HTML defines a set of 252 character entity references and a set of 1,114,050 numeric character references, both of which allow individual characters to be written via simple markup, rather than literally. A literal character and its markup counterpart are considered equivalent and are rendered identically.
The ability to "escape" characters in this way allows for the characters < and & (when written as < and &, respectively) to be interpreted as character data, rather than markup. For example, a literal < normally indicates the start of a tag, and & normally indicates the start of a character entity reference or numeric character reference; writing it as & or & or & allows & to be included in the content of elements or the values of attributes. The double-quote character ("), when used to quote an attribute value, must also be escaped as " or " or " when it appears within the attribute value itself. The single-quote character ('), when used to quote an attribute value, must also be escaped as ' or ' (should NOT be escaped as ' except in XHTML documents) when it appears within the attribute value itself. However, since document authors often overlook the need to escape these characters, browsers tend to be very forgiving, treating them as markup only when subsequent text appears to confirm that intent.
Escaping also allows for characters that are not easily typed or that aren't even available in the document's character encoding to be represented within the element and attribute content. For example, the acute-accented e (é), a character typically found only on Western European keyboards, can be written in any HTML document as the entity reference é or as the numeric references é or é. The characters comprising those references (that is, the &, the ;, the letters in eacute, and so on) are available on all keyboards and are supported in all character encodings, whereas the literal é is not.
Data types
HTML defines several data types for element content, such as script data and stylesheet data, and a plethora of types for attribute values, including IDs, names, URIs, numbers, units of length, languages, media descriptors, colors, character encodings, dates and times, and so on. All of these data types are specializations of character data.
The Document Type Declaration
HTML documents are required to start with a Document Type Declaration (informally, a “doctype”). In browsers, the function of the doctype is selecting the rendering mode—particularly to avoid the quirks mode.
The original purpose of the doctype is to enable validation based on Document Type Definition (DTD) with SGML tools. The DTD to which the DOCTYPE refers contains machine-readable grammar specifying the permitted and prohibited content for a document conforming to such a DTD. Browsers do not read the DTD, however. HTML5 validation is not DTD-based, so in HTML5 the doctype does not refer to a DTD.
An example of an HTML 4 doctype:
This declaration references the Strict DTD of HTML 4.01, which does not have presentational elements like , leaving formatting to Cascading Style Sheets and the span and div tags. SGML-based validators read the DTD in order to properly parse the document and to perform validation. In modern browsers, the HTML 4.01 Strict doctype activates standards layout mode for CSS as opposed to quirks mode.
In addition, HTML 4.01 provides Transitional and Frameset DTDs. The Transitional DTD was intended to gradually phase in the changes made in the Strict DTD, while the Frameset DTD was intended for those documents which contained frames.
my learnings
Why do we Use Lowercase Tags
- HTML tags are not case sensitive: means the same as .
- When you surf the Web, you will notice that most tutorials use uppercase HTML tags in their examples.
- If you want to prepare yourself for the next generations of HTML, you should start using lowercase tags.
- The World Wide Web Consortium(W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.
Tag Attributes
- Tag attributes can provide additional information about the HTML elements in your page.
- This tag defines the body of your HTML page:.With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: .
- This tag defines an HTML table:
. With an added border attribute, you can tell the browser that the table should have no borders:
- Attributes always come in name/value pairs like this: name=“value”.
- Attributes are always added to the start tag of an HTML element.
- Attributes values should always be enclosed in quotes.
Basic HTML Tags
- The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Line Breaks
- The tag is used when you want to end a line, but don’t want to start a new paragraph. The
tag forces a line break wherever you place it. - The tag is an empty tag. It has no closing tag.
Comments in HTML
- The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser.
- You can use comments to explain your code, which can help you when you edit the source code at a later date.
