WEB DESIGN = DESIGN + INTEGRATION (HTML + CSS)
What is Design?
Is it something you sketch? Is it a bright idea in your mind? There are end less questions and answers about what design is. It is hard to just give one precise answer because design lives in so many areas of our lives..
Design involves finding solutions that fit the user, task, and context of use. Properly designed objects — including software, tools, and web sites
What is Web Page?
When we examine the element of its Construction, a web document can consist of up to three Layers
- Content – HTML
- Presentation – CSS
What is HTML?
HTML – Hyper text markup Language
Its not a Programing language, its a Markup Language.
What is the meaning of HYPER and MARKUP in HTML
HYPER: means Away From
Its opposite to linear which means anything arrange in line. languages like C, C++, Java, etc, all these languages write in linear fashion. You can’t skip a line. They have a proper path, they have a continuity. But in case of hyper you go anywhere on the internet by clicking a link. There is no set order to do things in.
MARKUP: Markup is Preformatted text define some tags. In simple way we can say how we can distinguish normal text to system text, they way to write text for system called MARKUP.
Why we need HTML, why HTML invent, Origins of HTML
HTML was the brainchild of Sir Tim Berners Lee. Sir Tim Berners lee is a British Computer Scientist and MIT Professor.
- He is the inventor of www – (World Wide Web)
- He is the inventor of HTTP – (Hyper Text Transfer protocol)
- He is the inventor of urls – ( Universal Resource Locators)
- He is the inventor of HTML – ( Hyper Text Markup Language)
hired by CERN in 1980. CERN (The European Organization for Nuclear Research) is an international organization whose purpose is to operate the world’s largest particle physics laboratory based in Geneva(Switzerland) . They hire Tim because their researchers want to use and share documents with their other colleagues at different locations.
In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Tim specified HTML and wrote the browser and server software in the last part of 1990. and in late 1991 he wrote a document “HTML Tags” in which he purposed about two dozen elements. First Officially HTML specification document HTML 2.0 published by IETF (Internet Engineering Task Force)in 1995 HTML 3.2 was published as a W3C Recommendation On Jan 1997. It was the first version developed and standardized exclusively by the W3C (World Wide Web Consortium) , as the IETF had closed its HTML Working Group in September 1996. HTML 4.0 was published on December 1997 by W3C.
It offers three variations:
- Strict, in which deprecated elements are forbidden.
- Transitional, in which deprecated elements are allowed.
- Frameset, in which mostly only frame related elements are allowed.
HTML 4.01 was published on December 1999 by W3C. It is a revision of the HTML 4.0 Recommendation by w3c. The revision fixes minor errors that have been found since then. XHTML 1.0, published January 26, 2000, as a W3C Recommendation, later revised and republished August 1, 2002. It offers the same three variations as HTML 4.0 and 4.01, reformulated in XML, with minor restrictions.
And HTML5 was published as a Working Draft. Although its syntax closely resembles that of SGML, HTML5 has abandoned any attempt to be an SGML application and has explicitly defined its own “HTML” serialization, in addition to an alternative XML-based XHTML5 serialization.
What is XHTML and Why XHTML come after HTML 4.01 and again why they publish HTML 5 not publish XHTML next Version
HTML 4.01 was the last version and also the final w3c specification to define the semantics of Markup. XHTML was developed to make HTML more extensible and increase interoperability with other data formats.
Semantics: When we refer to the “semantics” of a language, we’re referring to the meaning of a given tag. HTML 4.01 and XHTML 1.0 assign the same semantics to their elements and attributes.
XHTML – Mixture of Classic HTML and XHML. Looks and works much like as HTML but is based on XML
XML is most powerful language where you can create your own tags and own attributes. So xhtml is the EXtensible Hyper Text Markup Language follows the rules of XML like:
- Correct Syntax
- Correct Structure
- Lower case
- All Tags Close
The publication of XHTML 1.0 coincided with the rise of browser support for CSS. As web designers embraced the emergence of web standards, led by The Web Standards Project, the stricter syntax of XHTML was viewed as a “best practice” way of writing markup. Then the W3C published XHTML 1.1. While XHTML 1.0 was simply HTML reformulated as XML, XHTML 1.1 was real, honest-to-goodness XML. That meant it couldn’t be served with a mime-type of text/html. But if authors published a document with an XML mime-type, then the most popular web browser in the world at the time—Internet Explorer—couldn’t render the document.
It seemed as if the W3C were losing touch with the day-to-day reality of publishing on the web. After that they began working on XHTML 2, designed to lead the web to a bright new XMLbased future. Although the name XHTML 2 sounded very similar to XHTML 1, they couldn’t have been more different. Unlike XHTML 1, XHTML 2 wasn’t going to be backwards compatible with existing web content or even previous versions of HTML. And also it become more complicated than lower version of html for developers.
A rebellion formed within the W3C. The consortium seemed to be formulating theoretically pure standards unrelated to the needs of web designers. Representatives from Opera, Apple, and Mozilla were unhappy with this direction. They wanted to see more emphasis placed on formats that allowed the creation of web applications.
The disaffected rebels formed their own group called WHATWG (Web Hypertext Application Technology Working Group) So WHATWG start working on HTML5 and While HTML5 was being developed at the WHATWG, the W3C continued working on XHTML 2. It would be inaccurate to say that it was going nowhere fast. It was going nowhere very, very slowly. In October 2006, Sir Tim Berners-Lee wrote a blog post in which he admitted that the attempt to move the web from HTML to XML just wasn’t working.
In 2009, the W3C stopped work on XHTML 2.0 and diverted resources to HTML5 and it was clear that HTML5 had won the battle of philosophies: purity of design, even if it breaks backwards-compatibility, versus pragmatism and “not breaking the Web.” In an interview, Ian Hickson mentioned 2022 as the year he expected HTML5 to become a proposed recommendation. What followed was a wave of public outrage from some web designers. They didn’t understand what “proposed recommendation” meant, but they knew they didn’t have enough fingers to count off the years until 2022.
What is CSS ?
Cascading Style Sheets (CSS) provide a simple way to style the content on your web Pages.
Cascade means small water fall something that flow top to bottom, the way browser read your code
Why CSS is there if everything can done using only HTML In 90’s HTML coders noticed that they were retyping same old tags again and again on the same page, leading to bigger HTML file above all, time consumption and frustration. On October 10, 1994, Hakon Wium Lie worked with in tim berners lee team released his very first draft of what was to become CSS.
The most important concept introduced in Hakon’s proposal is the cascade — the concept of interaction and prioritization between an author stylesheet, user stylesheet, and finally a User Agent (browser) stylesheet. By the end of 1996, CSS was ready to become official, and the CSS level 1 Recommendation was published in December. CSS was introduced in December 1996 by w3c to improve web accessibility and to make HTML code semantics rather than presentational. The main idea for CSS was that to Separating Structure and Presentation.
Versions of CSS
The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. IE 3 was released in that year with some limited support of CSS, CSS Level 2 published by w3c in MAY 1998 and is the most widely adopted by browser makers. Level 2 includes all the attributes of the previous two versions, plus an increased emphasis on international accessibility and the capability to specify media specific CSS.
In 2006, the W3C published an updated version: CSS Level 2.1, which corrected some errors, clarified a few issues, and included specifications for features that had already been implemented in some browsers. CSS2.1 has effectively replaced CSS2. CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules. Its not officially released yet. On 7 June 2011, the CSS 3 Color Module was published as a W3C Recommendation.
Type of Style Sheets
There are three types of Style Sheets
- Browser Style Sheets -( its browser itself default style sheet)
- User Style Sheets – ( Modern browser allow users to change style sheet of page itself )
- Author Style Sheets – ( written by the developers)
There are three way of using style sheets in web pages
- Internal – Placed right on the page whose interface it will affect.
- External – Placed in a separate file.
- Inline – Placed inside a tag it will affect.
Advantage of CSS
- Separate Structure from Appearance
- Faster Downloads
- Create Consistent Appearance
- Streamlined site Maintenance
- Global control of design attributes
- Increase Accessibility ( as we can use different style sheets for different media types)
- Reduced Bandwidth Cost
- We can apply Additional Effects ( hover, remove underline etc)
- Clear code is easier of search engine to index ( goo for SEO purpose)
- Reduce use of non-stranded tags ( like font tags, align center, width, height)