MODULE 1- Part1 Notes
Syllabus : Introduction to HTML, What is HTML and Where did it come from?, HTML Syntax, Semantic Markup, Structure of HTML Documents, Quick Tour of HTML Elements, HTML5 Semantic Structure Elements, Introduction to CSS, What is CSS, CSS Syntax, Location of Styles, Selectors, The Cascade: How Styles Interact, The Box Model, CSS Text Styling.
A: Introduction to HTML
- Introduction to HTML
- What is HTML and Where did it come from?
- HTML Syntax
- Semantic Markup
- Structure of HTML Documents
- Quick Tour of HTML Elements
- HTML5 Semantic Structure Elements
B: Introduction to CSS
- Introduction to CSS
- What is CSS?
- CSS Syntax
- Location of Styles
- Selectors
- The Cascade: How Styles Interact
- The Box Model
- CSS Text Styling.
A. Introduction to HTML
1.What is HTML and Where did it Come From :
HTML is a markup language that web browsers use to interpret and compose text, images, and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer’s additional use of CSS.
[Source : https://en.wikipedia.org/wiki/HTML ]
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages . HTML describes the structure of a Web page . HTML consists of a series of elements which tell the browser how to display the content and label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.
The first public specification (version) of the HTML was written by Physicist ,Tim Beners Lee in 1991. It describes 18 elements comprising the initial, relatively simple design of HTML.Later in 1997 HTML’s codification was introduced by the World- Wide Web Consortium (W3C) . In 1998 following W3C specification of HTML was made public :
“To publish information for global distribution one needs a universally understood language , a kind of publishing mother tongue that all computers may potentially understand . The publishing language used by the World Wide Web is HTML (Hyper text Markup Language).”
Since 1998, there have been many different versions of HTML. The most widely used version throughout the 2000’s was HTML 4.01, which became an official standard in December 1999. Another version, XHTML, was a rewrite of HTML as an XML language. XML is a standard markup language that is used to create other markup languages. Hundreds of XML languages are in use today, including GML (Geography Markup Language), MathML, MusicML, and RSS (Really Simple Syndication). Since each of these languages was written in a common language (XML), their content can easily be shared across applications. This makes XML potentially very powerful, and it’s no surprise that the W3C would create an XML version of HTML (again, called XHTML). XHTML became an official standard in 2000, and was updated in 2002. XHTML is very similar to HTML, but has stricter rules. Strict rules are necessary for all XML languages, because without it, interoperability between applications would be impossible. Most pages on the Web today were built using either HTML 4.01 or XHTML 1.0. However, in recent years, the W3C (in collaboration with another organization, the WHATWG), has been working on a brand new version of HTML, HTML5. Currently (2011), HTML5 is still a draft specification, and is not yet an official standard. However, it is already widely supported by browsers and other web-enabled devices, and is the way of the future.
[ Source : https://www.washington.edu/accesscomputing/webd2/student/lessons.html]
What is Markup Language :
A markup language is simply a way of annotating a document in such a way as to make the annotations distinct from the text being annotated. Markup Languages such as HTML , Tex, XML and XHTML allow users to control how text and visual elements will be laid out and displayed . MArkup is a way to indicate information about the content that is distinct from the content. This information about content in HTML is implemented via tags or HTML elements .
Fig: Sample Ad Hoc Markup Languages:
At its simplest, markup is a way to indicate information about the content . This “information about content” in HTML is implemented via tags (aka elements). The markup in the above figure consists of the red text and the various circles and arrows on the one page, and the little yellow sticky notes on the other. HTML does the same thing but uses textual tags.
What is W3C standard?
The W3C is the main standards organization for the World Wide Web. To promote compatibility the W3C produces recommendations (also called specifications). In 1998, the W3C turned its attention to a new specification called XHTML 1.0, which was a version of HTML that used stricter XML (Extensible Markup Language) syntax rules.
The goal of XHTML with its strict rules was to make page rendering more predictable by forcing web authors to create web pages without syntax errors.The XML-based syntax rules for XHTML are pretty easy to follow. The main rules are:
- lowercase tag names,
- attributes always within quotes,
- and all elements must have a closing element (or be self-closing)
To help web authors, two versions of XHTML were created: XHTML 1.0 Strict and XHTML 1.0 Transitional. The strict version was meant to be rendered by a browser using the strict syntax rules and tag support described by the W3C XHTML 1.0 Strict specification.The transitional recommendation is a more forgiving flavor of XHTML, and was meant to act as a temporary transition to the eventual global adoption of XHTML
XML-based well formed syntax rules for XHTML:
- There must be a single root element
- Element names are composed of any of the valid characters in XML
- Element names can’t start with a number
- Element and attribute names are case sensitive
- Attributes must always be within spaces
- All elements must have a closing element ( of be self closing)
Standards Movement : During much of the 2000s, the focus in the professional web development community was on standards: that is, on limiting oneself to the W3C specification for XHTML.
Validators : A key part of the standards movement in the web development community of the 2000s was the use of HTML Validators as a means of verifying that a web page’s markup followed the rules for XHTML.
Must have internet Connection
Open a web browser to the W3C validator and find a few websites to test.
Type the URL into the bar, and you can check if the home page is valid against various standards (or auto-detect)
XHTML 2.0 and WHATWG : In the mid 2000s, XHTML 2.0 proposed a revolutionary and substantial change to HTML.
- backwards compatibility with HTML and XHTML 1.0 was dropped.
- Browsers would become significantly less forgiving of invalid markup.
At around the same time, a group of developers at Opera and Mozilla formed the WHATWG (Web Hypertext Application Technology Working Group) group within the W3C.
This group was not convinced that the W3C’s embrace of XML and its abandonment of backwards-compatibility was the best way forward for the web.
HTML5: By 2009, the W3C stopped work on XHTML 2.0 and instead adopted the work done by WHATWG and named it HTML5.
There are three main aims to HTML5:
- Specify unambiguously how browsers should deal with invalid markup.
- Provide an open, non-proprietary programming framework (via Javascript) for creating rich web applications.
- Be backwards compatible with the existing web.
HTML5 Evolves : While parts of the HTML5 are still being finalized, all of the major browser manufacturers have at least partially embraced HTML5. Certainly not all browsers and all versions support every feature of HTML5. This is in fact by design , HTML in HTML5 is now a living language: that is, it is a language that evolves and develops over time. As such, every browser will support a gradually increasing subset of HTML5 capabilities
HTML5 Support in Browsers:
Versions of HTML :
| HTML Version | Features/ Significance Details |
| HTML 1.0(1991) | Supports basic elements like text , controls and images. Does not supported styling,tables , font support .W3C does not not existed during this period |
| HTML 2.0(1997) | Improved Version of HTML1.0, Supported MArkup Tags,text boxes , buttons , W3C was introduced, Standards was maintained.(upto 1997) |
| HTML 3.2(1998) | In 1997.HTML tags were improved tags and form elements , Supported CSS with HTML, CSS provides features to make HTML tags better through styling. |
| HTML 4.01( | Developed in 1997 . External CSS File development and including with HTML, New tags Were introduced |
| XHTML | [2002] XHTML, was a rewrite of HTML as an XML language. XHTML is very similar to HTML, but has stricter rules. |
| HTML 5.0 | [2011] Supported New Elements like geolocations support tags,Email, Password, Audio tags, Semantic tags , Section tag |
Semantic tags :
Semantic tags are also known as structural tags. Structural tags are the tags that provide structure to the HTML page. It helps it divide the HTML page into different structures. These structures get combined into an HTML page itself to form an HTML web page. Few of the important HTML semantic tags are figcaption, <header>, <footer>
Section tag :
This tag is used to semantic a section in an HTML page. A section tag represents a section in a web page.
Examples of types of content that can be included on web pages:
The following table shows a list of many of the types of content that can be added to web pages using different versions of HTML.
| Type of content | HTML 1.2 | HTML 4.01 | HTML5 | Purpose |
| Heading | Yes | Yes | Yes | Organize page content by adding headings and subheadings to the top of each section of the page |
| Paragraph | Yes | Yes | Yes | Identify paragraphs of text |
| Address | Yes | Yes | Yes | Identify a block of text that contains contact information |
| Anchor | Yes | Yes | Yes | Link to other web content |
| List | Yes | Yes | Yes | Organize items into a list |
| Image | Yes | Yes | Yes | Embed a photograph or drawing into a web page |
| Table | No | Yes | Yes | Organize data into rows and columns |
| Style | No | Yes | Yes | Add CSS to control how objects on a web page are presented |
| Script | No | Yes | Yes | Add Javascript to make pages respond to user behaviors (more interactive) |
| Audio | No | No | Yes | Add audio to a web page with a single tag |
| Video | No | No | Yes | Add video to a web page with a single tag |
| Canvas | No | No | Yes | Add an invisible drawing pad to a web page, on which you can add drawings (animations, games, and other interactive features) using Javascript. |
[ Source : https://www.washington.edu/accesscomputing/webd2/student/lessons.html]
2. HTML Syntax
HTML is using tags for its syntax. A tag is composed with special characters: <, > and /. They are interpreted by softwares to compose an HTML element.
Decomposition of HTML elements
HTML elements usually come in tag pairs.
For opening a simple element with a start tag
- it starts with <
- then a list of characters without space, the tagname (or element)
- ends usually with a >.
Then closing the simple element with an end tag
- it starts with </
- then the same list of characters without space, the tagname (or element)
- ends usually with a >.
If the tagname is “cite”, then you get
<cite></cite>
Some elements do not have an end tag (because they are implied by the following tags). For example you might have seen:
<br>
An element can have attributes to refine its meaning.
These attributes are specified on the start tag. They consist of a name and a value, separated by an “=” character. Such as:
<tagname attribute=”value”></tagname>
In HTML, the attribute value can remain unquoted if it doesn’t contain spaces or any of the following characters: ” ‘ ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the “=” character, can be omitted altogether if the value is the empty string. Once you are working in a team you might want to choose a common way of authoring your code.
These are examples of syntaxes you might see on the Web:
<!– empty attributes –>
<input disabled>
<input disabled=””>
<input disabled=””/>
<!– attributes with a value –>
<input name=address>
<input name=’address’>
<input name=”address”>
Example : Elements and Attributes
Example :
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = “left”>This is left aligned</p>
<p align = “center”>This is center aligned</p>
<p align = “right”>This is right aligned</p>
</body>
</html>
Nesting HTML elements
- Often an HTML element will contain other HTML elements.
- In such a case, the container element is said to be a parent of the contained, or child, element.
- Any elements contained within the child are said to be descendents of the parent element; likewise, any given child element, may have a variety of ancestors.
Hierarchy of elements
In order to properly construct a hierarchy of elements, your browser expects each HTML nested element to be properly nested.
That is, a child’s ending tag must occur before its parent’s ending tag.
Example :
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Basic HTML TAGS
<html> … </html> — The root element
<head> … </head> — The document head
<title> … </title> — The page title
<body> … </body> — The page’s content
<h1> … </h1> — A section heading
<p> … </p> — A paragraph
<a> … </a> — A link
<img> — An image
<div> … </div> — A block-level container for content
<span> … </span> — An inline container for content
