Learnings of the Week [ February 23-27, 2009 ]

In this week, we are just making our project regarding the Webpage.

We are roaming around the school campus so that we can gather the needed informations.


Posted by:
Rae Angeline S. Palen
IV - Rizal

Learnings of the Week

February 23-27, 2009
Submitted by:
Joyce Niko D. Perez

This week, we are just very busy gathering information and encoding them for our web page. We really need teamwork for this stuff. Indeed, cooperation drives this endeavor to be successful..

I hope we can finish this thing early!!!!

Learnings of the Week [ February 16-20, 2009 ]

In this week, Sir Balbuena gave us a project that we should make within this week because he will check this next week. This project will serve as our semi-finals.

Our group our tasked to make a webpage about our school. We should provide all the informations needed.

Posted by:

Rae Angeline S. Palen

IV - Rizal

Learnings of the Week

February 16-20, 2009

Submitted by:
Joyce Niko D. Perez

This week, Sir Ernie gave us a project to be submitted before the final exams. We were tasked to build up a web page for the school He gave us the suplementary navigation links and content and necessary for our we page.

This is truly tough!!!!..and we are working on it little by little...

Learnings of the Week [ February 9-13, 2009 ]

In this week, we reviewed out topics about Frames and CSS.

HTML FRAMES

With frames, you can display more than one Web page in the same browser window.


FRAMES

Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are: the web developer must keep track HTML documents; and it is difficult to print the entire page.


THE FRAMESET TAG

The frameset tag defines how to divide the window into frames. Each frameset defines a set of rows or columns. The values of the rows/columns indicate the amount of screen area each row/column will occupy.


THE FRAME TAG

The frame tag defines what HTML document to put into each frame.


FRAMESET ATTRIBUTES EXPLAINED

Frameborder=No or Yes - defines whether to make the frameborder dividing the windows become visible or not.

border-="n" - when the value for frameborder is YES, you can set the thickness of the border in pixels by entering a number to the value.

Framespacing="n" - defines the spacing between the two framesets in the window. The expected value here is a number.

Bordercolor="rrggbb" - applies color to the border when it is turned on. Replace "rrggbb" with hexadecimal color value.

Name="anyname" - assigns a name to the frame on the left (if vertical) or top frame (if horizontal) in the frameset definition.

Noresize - tells the browser to lock the border.

Scrolling="YES or NO" - controls whether the scrollbar is turned on or not. The default is NO. When turned on, and if the page of the document is long, the scrollbar will become visible.

Src="file.html" - the document you're calling to load in the window. SRC is short for source file.


CASCADING STYLES SHEET (CSS)

STYLES

External Style Sheet

An external style sheet is ideal when the style is applied to many pages.

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. Y


FEATURES OF EXTERNAL STYLE SHEET

Introduction

By using the Link Tag to load a basic external style sheet (CSS), it's possible to control the look and feel of multiply Web Pages by making changes to One style sheet. This means that it is easy to change font, bgcolor, background, etc on all pages - just by changing one external style sheet (CSS).

Types of External CSS

The three types of external style sheets are persistent, preferred, and alternate. The most common external style sheet is the persistent link.

SUMMARY

An external style sheet (CSS) is perfect - when the same style/format/look n feel is required on numerous pages. With an external style sheet, the webmaster can change the look of the entire site - by changing one file.



Posted by:
Rae Angeline S. Palen
IV - Rizal

Learnings of the Week

February 9-13,2009
Submitted by:
Joyce Niko D. Perez

This week we reviewed our lessons for Cascading Style Sheets (CSS).

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS stylesheet, readers can use a different stylesheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

Syntax

CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).^[1]

In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.

In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), "c".

A pseudo-class selects entire elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.

Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility.

Use of CSS

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate stylesheet resulting in considerably simpler HTML markup.

Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use the HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated

Sources

the use of all the original presentational HTML markup.

CSS information can be provided by various sources. CSS style information can be either attached as a separate document or embedded in the HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

• Author styles (style information provided by the web page author), in the form of
  • external stylesheets, i.e. a separate CSS-file referenced from the document
  • embedded style, blocks of CSS information inside the HTML document itself
  • inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute.
• User style
  • a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
• User agent style
  • the default style sheet applied by the user agent, e.g. the browser's default presentation of elements.

One of the goals of CSS is also to allow users a greater degree of control over presentation; those who find the red italic headings difficult to read may apply other style sheets to the document. Depending on their browser and the web site, a user may choose from various stylesheets provided by the designers, may remove all added style and view the site using their browser's default styling or may perhaps override just the red italic heading style without altering other attributes.

File highlightheaders.css containing:

h1 { color: white; background: orange !important; }
h2 { color: white; background: green !important; } 

Such a file is stored locally and is applicable if that has been specified in the browser options. "!important" means that it prevails over the author specifications.

Learnings of the Week

Submitted by:
Joyce Niko D. Perez
IV-RIZAL

Feb. 2-7, 2009

This week we had a recap of our lessons about HTML.

HTML, an initialism of HyperText Markup Language, is the predominant markup language for Web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code (such as JavaScript) which can affect the behavior of Web browsers and other HTML processors.

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. ) and an end tag (e.g. ). The element's attributes are contained in the start tag and content is located between the tags (e.g. Content). Some elements, such as
, 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

establishes "Golf" as a second-level heading, which would be rendered in a browser in a manner similar to the "HTML markup" title at the start of this section. Structural markup does not denote any specific rendering, but most Web browsers have standardized on how elements should be formatted. Text may be further styled with Cascading Style Sheets (CSS).

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).[28][29] Leaving attribute values unquoted is considered unsafe.[30] 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[2] (like the ismap attribute for the img element[31]).

Most elements can take any of several common attributes:

* The id attribute 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 class attribute provides a way of classifying similar elements for presentation purposes. For example, an HTML document might use the designation class="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 style non-attributal codes presentational properties to a particular element. It is considered better practice to use an element’s son- id page and select the element with a stylesheet, though sometimes this can be too cumbersome for a simple ad hoc application of styled properties.

* The title attribute 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.

Learnings of the Week [ February 2-6, 2009 ]

In this week, we just review our lesson about HTML.

What is an HTML File?

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page.

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letters extensions.

Note on HTML Editors.

You can easily edit files using a WYSIWYG (what you see is what you get) editor like Frontpage, Claris Home Page or Adobe PageMill instead of writing your markup tags in a plain text file.

But if you want to be skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.

HTML Elements.

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.

HTML Tags

HTML tags are used to mark-up HTML elements

HTML tags are surrounded by the two characters <>

The surroundings characters are called angle brackets

The first tag in a pair is the start tag, the second tag is the end tag

The text between the start and end tags is the element content.

Tag Attributes

Tag attributes can provide additional information about the HTML elements in your page.

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

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.

HTML Character Entities

Some Characters like the <>

To display a less than sign (<) in HTML, we have to use a character entity.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon(;).

To display a less than sign in an HTML document we must write: < or <.

The advantage of using a name instead of a number is that a name is very easy to remember.

Posted by:

RAE ANGELINE S. PALEN

IV - Rizal