Web Concepts - an introduction - introduction

1 •History
2 •Basic Website
3 •Factors affecting Website design
4 •Planning to build a Website
5 •From basic to “wow” Website
6 •Another way to build a Website

How it Began
Tim Berners-Lee
 proposed HTML at the European Laboratory for Particle Physics (CERN) in 1989
 joined the ideas of the user interface (browser), a markup language (HTML), and a communications
protocol (http:) that allowed hypertext linking
 not only could people read documents, they could easily create them using HTML

• August 6, 1991
• Welcome to the world
wide web
• 100% text based

What is HTML?
HyperText Markup Language
used for creating websites, provide building blocks and structure
text document, tells browser how to display information
HTML is an application of the Standard Generalized Markup Language (SGML), a standard
system for specifying document structure

A need for Standards
The World Wide Web Consortium (W3C) was founded in 1994 MIT
The W3C sets standards for HTML and other markup languages
Jointly developed standards, rather than ones dictated by one vendor, benefit everyone

1986
• SGML
1992
• HTML 1.1
1994
• W3C
1995
• HTML 2
1997
• HTML 3.2
1999
• HTML 4.01
2014
• HTML 5
- system for specifying the structure of a document
- adopted 20 elements from SGML (only the ones needed to represent basic documents)
- first informal draft
- established to recommend standard practices in using HTML
- 1st release supported by graphical browsers
- still viewable by all browsers
- introduced forms and tables (allowed multi-column layouts)
- browsers are not strict on non-standard coding
- added style sheets (CSS), increased support for scripting and interactivity
- help on standardization (all styles go to CSS)
- added page layout, audio, video, animation elements, enhanced graphic
- first informal draft

Building a Basic Website
TOOLS AND GOOD PRACTICES

Basic Tools
HTML CSS
HTML Editor Graphics Editor

HTML
HTML is a markup language that lets you identify common sections of a web page
Markup elements define each section
◦ Example:
◦ This <h1> element defines text as a first-level heading:
<h1>What is HTML?</h1>
HTML5 is the latest

How to write an HTML code?
(HTML Syntax)
Web page code is a mixture of the text the user sees in the browser surrounded by a variety
of markup elements
An element is a pair of HTML tags containing content
◦ An HTML tag includes an opening bracket (<),
an element name such as h1,
and a closing bracket (>)
◦ End tag has a slash ( / ) preceding the element.
List of HTML tags: Click here.
You write the code using an HTML Editor such as Notepad ++ (free)
◦ save it as html file

How to write an HTML code?
(HTML Syntax)
Some HTML elements contain only a single tag. These are known as void elements.
◦ Void elements insert something onto the page, such as a new line using the <br> element
Some HTML elements support attributes that let you provide more information about an
element
◦ Here is an attribute (shown in bold) added to an <h1> element:
<h1 id="maintitle">Main Title of the Document</h1>

The Basic Webpage would have:
(Structure of a basic webpage)
HTML file, which contains:
1. content text - information displayed in a browser
2. HTML markup - does not appear in the browser
◦ The browser interprets the code and displays the results
◦ Each browser interprets HTML in its own way, based on its rendering engine
◦ It is essential that you test your work in different web browsers

The code of a basic webpage would have:
(Structure of a basic webpage)
The document type, or doctype for short, specifies the rules for the document language
The <html> tag is the root element
The two main sections are:
1. <head>
o is the container for all of the descriptive information about the document
2. <body>
o includes the content that the user sees in the browser window

This is how the code would appear in a
browser:
The browser will interpret the
code and display the results,
hiding the HTML markup.

More HTML Examples
Click here
(ordinary) elements
void elements
elements that support attributes (attribute name=“value”)

CSS (Cascading Style Sheets)
use to add Style to a webpage:
◦ Background Colour
◦ Font Colour, height, width
◦ Border
◦ Margin
◦ Bullet list
◦ Etc.
used within HTML
CSS3 is the latest

More on CSS…
Web designers use Cascading Style Sheets (CSS) to
add presentation information to web pages
With CSS you can display information for different
devices
With style sheets, the presentation properties are
separate from the content
CSS lets you control the presentation characteristics
of an entire web site with a single style sheet

Example of Adding Style
(Using CSS)
Style Rules were added to the basic html
code:
◦ Body text will use Arial font
◦ h1 will have a bottom border
◦ Paragraph will have 30-pixel left margin

• Font changed to Arial, added bottom border to
heading, and added margin to the paragraph.

How to write a CSS Style Rule?
(CSS Syntax)
Style rules contain a selector and a declaration
Example: this style rule sets all <p> elements to blue text
P {color: blue;}
You will learn more about CSS in Lesson 5

HTML 5
proposed by WHATWG to replace the proposed XHTML 2.0
compatible with XHTML 1.0 and HTML 4.01
added new elements
◦ sectioning elements, video, audio, animation, browser interaction
◦ no more display elements, framesets and frames
2 different syntax
◦ loose
◦ strict

“ The broader the reach of web technology, the
more our stakeholders demand a stable
standard. As of today, businesses know what
they can rely on for HTML 5 in the coming
years, and what their customers will demand.
Likewise, developers will know what skills to
cultivate to reach smartphones, cars,
televisions, e-books, digital signs, and
devices not yet known. ”
Jeff Jaffe
W3C President

Displaying HTML5 correctly in any browser
(using the right <!DOCTYPE> and MIME type)
<!DOCTYPE>
◦ displays page in Standards mode (uses W3C rules)
◦ no <!DOCTYPE> means Quirks mode, operates like an old browser
MIME TYPE
◦ determines the type of document being presented so browser can interpret it correctly
◦ <meta charset="UTF-8">

Since HTML 5 has a basic structure:
Use a TEMPLATE!

When Coding HTML 5, Make sure that:
1. Documents are well formed
2. Tags are nested properly and doesn’t overlap
3. Element names use lowercase
4. Closing tags are not missing
5. Attributes are contained in quotation marks

Sectioning elements for page structure
IT4100 Web Concepts
http://www.IT4100WC.com
Header
<header>
Nav <nav>
Footer
<footer>
Sidebar
<aside>
Article
<article>
Section
<section>
Section
<section>
<header> page header content
<nav> navigation elements for the page
<article> primary page content
<section> groupings of the page content
<aside> additional content (i.e. sidebar)
<footer> page footer content

Using good coding practices
Creating code that ensures the greatest standards-compliance, presentation,
and usefulness of your content.
1. Stick to the standards
2. Use semantic markup
3. Validate your code

Standard
Codes
Semantic
Mark-ups
Validation
W3C standards,
Separate content
from presentation
Identifies intended
use of sections,
Accurately
describes each
piece of content
Conforms to the
usage rules of the
W3C
Web content are more accessible and portable
- different devices and browsers
Website is more durable and flexible
More meaningful to Search Engines
Longer life and greater chance of being
accessible in future applications

http://validator.w3.org/unicorn/

Publishing Websites
MAKING WEBSITES THAT ARE AVAILABLE TO THE WORLD

Web Designer
HTML files
Web Server Administrator
Host websites
Users / Consumers
Browse websites

REFERENCES
Download Notepad++ 7.6.3. (2019). Retrieved from Notepad++: https://notepad-plus-plus.org/
HTML Element Reference (HTML Tags Ordered Alphabetically). (2019). Retrieved from
w3schools.com: https://www.w3schools.com/tags/default.asp
Sklar, J. (2015). Principles of Web Design (6th ed.). Boston: Cengage Learning.
Unicorn - W3C's Unified Validator. (2019). Retrieved from W3C: http://validator.w3.org/unicorn/
World Wide Web. (1991). Retrieved from CERN:
http://info.cern.ch/hypertext/WWW/TheProject.html

Web Concepts - an introduction - introduction

Recommended

Recommended

More Related Content

Similar to Web Concepts - an introduction - introduction

Similar to Web Concepts - an introduction - introduction (20)

More from clement swarnappa

More from clement swarnappa (13)

Recently uploaded

Recently uploaded (20)

Web Concepts - an introduction - introduction