Internet Programming: HCT 114

Internet Programming: HCT 114
By
Zanamwe N
2016
Table of Contents
1 Unit 1: Internet Fundamentals.......................................................................................................6
1.1 What is the Internet?...................................................................................................................6
1.1.1 Key Definitions:......................................................................................................................6
1.1.2 World Wide Web (WWW).......................................................................................................6
1.1.3 Web Pages................................................................................................................................6
1.1.4 HTML......................................................................................................................................6
1.1.5 Hypertext Transfer Protocol (HTTP).......................................................................................7
1.1.6 Web Browsers..........................................................................................................................7
1.1.7 Search Engines........................................................................................................................7
1.1.8 Email........................................................................................................................................7
1.1.9 Telnet:......................................................................................................................................7
1.1.10 Gopher:..................................................................................................................................7
1.1.11 FTP........................................................................................................................................7
1.1.12 Usenet....................................................................................................................................8
2 Unit 2: Web development Tools....................................................................................................8
2.1.1 Hypertext.................................................................................................................................9
3 Unit 3: Scripting Languages..........................................................................................................9
3.1 Client Side Scripting Languages................................................................................................9
3.2 Server Side Scripting Languages................................................................................................9
3.3 Comparison of Scripting Languages..........................................................................................9
3.4 Practical Lab Session 1:............................................................................................................10
4 Unit 4: Web Development Life Cycle/Process............................................................................10
4.1 Website Design Guidelines.......................................................................................................10
4.2 Things to Remember................................................................................................................12
4.3 Reasons for having a website...................................................................................................12
4.4 Characteristics of a good website design..................................................................................13
4.5 Web Development Process.......................................................................................................14
4.5.1 Defining your goals...............................................................................................................14
4.5.2 Defining your audience.........................................................................................................14
4.5.3 Competitive and market analysis...........................................................................................14
4.5.4 Requirements analysis...........................................................................................................14
4.5.5 Designing the site structure...................................................................................................15
4.5.6 Using flow charts to define structure.....................................................................................15
4.5.7 Specifying content.................................................................................................................16
4.5.8 Choosing a design theme.......................................................................................................16
4.5.9 Constructing the site..............................................................................................................16
4.5.10 Testing and evaluating the site.............................................................................................16
4.5.11 Marketing the site................................................................................................................16
4.5.12 Tracking site usage and performance..................................................................................16
4.5.13 Maintaining the site.............................................................................................................17
5 Unit 5: HyperText Markup Language (HTML)..........................................................................17
5.1 Markup languages.....................................................................................................................17
5.2 Evolution of Markup languages...............................................................................................17
5.3 HTML 5 Introduction...............................................................................................................17
5.3.1 What is HTML?.....................................................................................................................17
5.3.2 HTML5 Style Guide and Coding Conventions.....................................................................18
5.3.2.1 Use Correct Document Type..............................................................................................18
5.3.2.2 Use Lower Case Element Names.......................................................................................18
5.3.2.3 Close All HTML Elements.................................................................................................19
5.3.2.4 Close Empty HTML Elements...........................................................................................19
5.3.2.5 Use Lower Case Attribute Names......................................................................................19
5.3.2.6 Quote Attribute Values........................................................................................................20
5.3.2.7 Image Attributes.................................................................................................................20
5.3.2.9 Avoid Long Code Lines......................................................................................................20
5.3.2.10 Blank Lines and Indentation.............................................................................................21
5.3.2.12 Omitting <head>?.............................................................................................................22
5.3.2.13 Meta Data.........................................................................................................................22
5.3.2.14 HTML Comments.............................................................................................................23
5.3.2.15 Style Sheets.......................................................................................................................23
5.3.2.16 Loading JavaScript in HTML...........................................................................................24
5.3.2.17 Use Lower Case File Names............................................................................................24
5.3.2.18 File Extensions.................................................................................................................24
5.4 HTML Page Structure...............................................................................................................24
5.5 Web Browsers...........................................................................................................................26
5.6 HTML Editors..........................................................................................................................26
5.7 HTML Elements.......................................................................................................................27
5.7.1 HTML Element Syntax..........................................................................................................27
5.7.2 Nested HTML Elements........................................................................................................28
5.7.3 HTML Document Example...................................................................................................28
5.7.4 Don't Forget the End Tag.......................................................................................................29
5.7.5 Empty HTML Elements........................................................................................................29
5.7.6 HTML Attributes...................................................................................................................29
5.7.7 HTML Headings....................................................................................................................30
5.7.8 HTML Lines..........................................................................................................................30
5.7.9 HTML Paragraphs.................................................................................................................31
5.7.10 HTML Line Breaks..............................................................................................................31
5.7.11 HTML Text Formatting.......................................................................................................31
5.7.12 HTML Links........................................................................................................................32
5.7.13 The HTML <head> Element...............................................................................................34
5.7.14 HTML Images.....................................................................................................................36
5.7.15 Marquee Tag........................................................................................................................38
5.7.16 Ordered Lists.......................................................................................................................38
5.7.17 HTML <div> and <span>....................................................................................................40
5.7.18 HTML Block Elements........................................................................................................40
5.7.19 HTML Inline Elements........................................................................................................41
5.7.19.1 The HTML <div> Element...............................................................................................41
5.7.19.2 The HTML <span> Element.............................................................................................41
5.8 HTML Grouping Tags..............................................................................................................41
5.9 HTML Layouts.........................................................................................................................41
5.10 HTML5 New Semantic Elements...........................................................................................42
5.10.1 The Shiv...............................................................................................................................46
5.11 HTML Colors.........................................................................................................................46
5.11.1 Color Values.........................................................................................................................46
5.12 HTML Entities........................................................................................................................47
5.13 Non-breaking Space...............................................................................................................47
5.14 HTML Useful Character Entities............................................................................................47
6 HTML TABLES..........................................................................................................................48
7 HTML Forms...............................................................................................................................48
7.1.1 Example.................................................................................................................................54
7.1.2 Example.................................................................................................................................55
8 CASCADING STYLE SHEETS (CSS)......................................................................................58
8.1 Examples of Element Selectors................................................................................................59
8.2 The id Selector..........................................................................................................................60
8.3 The class Selector.....................................................................................................................60
8.4 Pseudo-Selectors.......................................................................................................................60
8.4.1 Styling Links..........................................................................................................................61
8.5 CSS Text...................................................................................................................................62
8.5.1 Example.................................................................................................................................63
8.6 CSS Font...................................................................................................................................63
8.7 The CSS Box Formatting Model..............................................................................................64
8.8 Table Borders............................................................................................................................66
8.9 Example....................................................................................................................................66
8.10 Collapse Borders.....................................................................................................................67
8.11 Example..................................................................................................................................67
8.12 Table Width and Height..........................................................................................................67
8.13 Example..................................................................................................................................68
8.14 CSS Float................................................................................................................................70
8.15 Three Ways to Insert CSS.......................................................................................................71
8.16 Another option using CS6.......................................................................................................75
8.16.1 Individual Assignment 2......................................................................................................75
8.16.1.1 Example............................................................................................................................81
8.16.1.2 Example............................................................................................................................84
8.16.1.3 Example............................................................................................................................87
8.16.1.4 Example............................................................................................................................87
8.16.1.5 Example............................................................................................................................87
8.16.1.6 Example............................................................................................................................88
8.16.1.7 Example............................................................................................................................88
8.16.1.8 Example............................................................................................................................88
8.16.1.9 Example............................................................................................................................95
8.16.1.10 Example........................................................................................................................109
9 Example.....................................................................................................................................112
9.1 Previous Next..........................................................................................................................115
9.1.1 Content Management Systems............................................................................................118
9.1.1.1 Drupal...............................................................................................................................123
9.1.1.2 Reasons to Use Drupal.....................................................................................................123
9.1.1.3 Wordpress.........................................................................................................................125
9.1.1.4 Joomla...............................................................................................................................125
9.1.2 Joomla..................................................................................................................................128
9.1.2.1 First steps in Joomla 2.5 (valid for Joomla 1.7 and 1.6 too)............................................131
9.1.2.2 Logging in the Joomla admin area (valid for Joomla 1.7 and 1.6 too).............................131
9.1.2.3 Creating articles in Joomla...............................................................................................132
9.1.2.4 How to Link Articles in Joomla 2.5 (valid for Joomla 1.7 and 1.6 too)...........................134
9.1.3 WordPress 3.8......................................................................................................................141
9.1.3.1 Just click the ‘Create a Configuration File’ button...........................................................142
9.1.3.2 Click on the “Visit Site” link button at the top of the Dashboard to view your current page
.......................................................................................................................................................145
9.1.3.3 CREATING CATEGORIES and TAGS...........................................................................146
9.1.4 Drupal..................................................................................................................................152
9.1.4.1 Individual Assignments 3, 4 and 5....................................................................................152
9.1.4.2 http://zanamwe.com/welcome.php?name=peter&age=37;..............................................160
9.1.4.3 Variable Functions............................................................................................................163
9.1.4.4 Regular expressions syntax..............................................................................................189
9.1.4.5 PHP regular expression functions.....................................................................................189
9.1.4.6 Student Registration Form................................................................................................215
1 Unit 1: Internet Fundamentals
1.1 What is the Internet?
1.1.1 Key Definitions:

– Internet: The internet is a global network of interconnected networks, connecting
private, public and university networks in one cohesive unit.
– The Internet is a network of computers, connected throughout the world. The Internet is
made up of several parts, each of which does different things.
– These parts are also known as internet applications and include:
• The World Wide Web (WWW)
• Email
• Telnet
• Gopher
• FTP
• Usenet
1.1.2 World Wide Web (WWW)

 Refers to all the resources and users on the Internet that are using the Hypertext Transfer
Protocol (HTTP).
 The web is a part of the internet; it is made up of web pages that represent information
graphically via a browser.
The Worldwide Web is a system based on:

 the Internet
 a standard protocol (HTTP)
 a standard format for describing the structure of documents (HTML) for transmission of
hypermedia documents,
 a set of servers that respond to requests from a viewer
 web browsers (or clients) for those documents
1.1.3 Web Pages

Web Pages are documents on the WWW written and constructed using Hyper Text Markup
Language (HTML).
1.1.4 HTML
HTML is a special language or code used to design and publish documents on the Web. A web
page is made up of several different elements, all linked together through the use of html.
HTML is the language it is written in, and so the backbone of the page, but html alone does not
make a page. You need other elements. Your video, audio, graphics and text all work together to
create the page. The elements are added to your page by way of html linking; they are not
actually inside the page, only referred to and called to appear on demand.
Many pages together make up a web site. A home page is the

starting point in a site. Usually, a
home page is the beginning point in a
personal page, but could also be the
first page in the cnn.com site.
1.1.5 Hypertext Transfer Protocol (HTTP)

The Internet protocol that the Web uses to send information to the client, so the client browser
can view Web pages. Like FTP, HTTP is a protocol or language. Unlike FTP, HTTP cannot send
all types of files; it is limited to text, graphic images, sound, video, and other multimedia files.
You could not, for example, view a PowerPoint or word document using HTTP. A document is
requested via HTTP by using a URL, or Uniform Resource Locator.
A URL looks like this:
1.1.6 Web Browsers

Are software programs used to access the World Wide Web eg Mozilla Firefox, Google Chrome, IE,
Netscape Navigator, Opera etc
1.1.7 Search Engines

A search engine is a program that connects you to a database or Web address and is used to
perform a thorough search. Examples include, Google, Alta Vista, Excite, Hotbot, Lycos,
InforSeek, etc.
1.1.8 Email
E-mail (electronic mail) is the exchange of computer-stored messages by telecommunication.
1.1.9 Telnet:
Telnet is the way you can access someone else's computer, assuming they have given you
permission.
1.1.10 Gopher:
Gopher is an Internet application protocol in which hierarchically-organized file structures are
maintained on servers that themselves are part of an overall information structure. Gopher
provided a way to bring text files from all over the world to a viewer on your computer.
1.1.11 FTP
FTP (File Transfer Protocol), a standard protocol, is the simplest way to exchange files between
computers on the Internet. Like the Hypertext Transfer Protocol (HTTP), which transfers
displayable Web pages and related files, and the Simple Mail Transfer Protocol (SMTP), which
transfers e-mail, FTP is an application protocol that uses the Internet's TCP/IP protocols. FTP is
commonly used to transfer Web page files from their creator to the computer that acts as their
server for everyone on the Internet. It's also commonly used to download programs and other
files to your computer from other servers. FTP programs include, WinSCP, FileZilla, Transmit
etc
1.1.12 Usenet
Usenet is a collection of notes on various subjects that are posted to servers on a worldwide
network. Each subject collection of posted notes is known as a newsgroup. There are thousands
of newsgroups and it is possible for you to form a new one. Most newsgroups are hosted on
Internet-connected servers, but they can also be hosted from servers that are not part of the
Internet. Most browsers, such as those from Netscape and Microsoft, provide Usenet support
and access to any newsgroups that you select.
2 Unit 2: Web development Tools
The following are the tools that are required to build a web site:
1. Hardware for the Web server
2. An operating system
3. Web server software
4. A database management system
5. A programming or scripting language
6. Web browser
7. Version Control/Management Systems
Note: Some of these choices will be dependent on the others. For example, not all operating
systems will run on all hardware, not all scripting languages can connect to all databases, and so
on.
The computers that make all these Web pages available are called Web servers. On any
computer that’s connected to the Web, you can run an application called a Web browser.
Technically, a Web browser is called a Web client—that is, a program that’s able to contact a
Web server and request information. When the Web server receives the requested information,
it looks for this information within its file system, and sends out the requested information via
the Internet.
They all speak a common “language,” called HyperText Transfer Protocol (HTTP). (HTTP isn’t
really a language like the ones people speak. It’s a set of rules or procedures, called protocols,
that enables computers to exchange information over the Web.) Regardless of where these
computers reside— Honolulu, Timbuktu, Kitsiyatota, or Texas—they can communicate with
each other through HTTP. The following illustrates how HTTP works (see Figure 1-1):
Figure 1.1. How HTTP Works
 Most Web pages contain hyperlinks, which are specially formatted words or phrases that
enable you to access another page on the Web. Although the hyperlink usually doesn’t
make the address of this page visible, it contains all the information needed for your
computer to request a Web page from another computer.
 When you click the hyperlink, your computer sends a message called an HTTP request.
This message says, in effect, “Please send me the Web page that I want.”
 The Web server receives the request, and looks within its stored files for the Web page
you requested. When it finds the Web page, it sends it to your computer, and your Web
browser displays it. If the page isn’t found, you see an error message, which probably
includes the HTTP code for this error: 404, “Not Found.”
2.1.1 Hypertext
Hypertext is a type of text that contains hyperlinks (or just links for short), which enable the reader
to jump from one hypertext page to another.
You may also hear the word hypermedia. A hypermedia system works just like hypertext, except
that it includes graphics, sounds, videos, and animation as well as text.
3 Unit 3: Scripting Languages
3.1 Client Side Scripting Languages

Are languages which are interpreted by web browsers. Examples include HTML, CSS, JavaScript
etc.
3.2 Server Side Scripting Languages

These are languages which are normally used to connect a web page to the database. They are
interpreted by special engines for example PHP is interpreted by a special PHP engine.
3.3 Comparison of Scripting Languages

PHP Python Perl ASP Ruby
A server-side A high-level A high level A server-side A dynamic,
scripting interpreted interpreted scripting reflective
language that programming programming language programming
can also be language that language used created by language
executed from to create inspired by
Details supports Microsoft
a dynamic web Perl.
command line objectorientated, pages.
used to
interface or interactive generate
standalone features for a web dynamic web
program. page. pages.
Open source Open source •Very •More •Highly
•Speed Very compatible compatible advanced advanced
Multi-platform Easy to use • Great for features •Very fast
Advantages Ease of use string •Quick response
processing response
•Extensive • Ease of use
support
Poor error • Performance Less secure • More Less support •
handling issues • on expensive More
Less secure Limited Windows • than other complex
than other documentatio Requires languages to learn and
Disadvantages installation program
languages n • Less
More compatibl Less control
complex e
to learn
…you want to …your site …if your site …if your site …you need to
implement requires high-level requires requires high create
This type of ecommerce user interaction multimedia levels of dynamic site
scripting tools, such as a content interaction features and
language is shopping cart, with users functionality
right for you into
with
if… your
professional
website
appeal
3.4 Practical Lab Session 1:
Tasks:
1. Install XAMPP on both Windows and Linux and learn how to use it
2. Install version control/management system preferably GIT and practise using it in your
groups
3. Install text editors and explore their features – CS6, Netbeans, Visual Studio, Notepad++
and Eclipse
4. Install FTP programs and learn how to use them
4 Unit 4: Web Development Life Cycle/Process
4.1 Website Design Guidelines
1. Know who your audience will be

1.1. Have a goal in mind. What do you want to accomplish with your website?
1.2. Few websites are meant for everyone.
1.3. Style your pages appropriately.
1.3.1. Are you appealing to Musicians, Homeowners, Vacationers, Corporate
Business or someone else?
1.3.2. Artists might like glitz.
1.3.3. Someone looking for car parts just wants to find them in a timely manner.
2. Consider loading time
2.1. Lots of graphics may look nice, but people don’t like to wait too long.
2.2. They may leave your site before it ever gets done loading the home page.
3. Design a Consistent Look

3.1. Don’t use more than two or three Font Styles throughout your website.
3.2. Be certain that your page look similar from one to the next.
3.3. Don’t give people the impression that they’ve left your site somehow.
4. Build an intuitive structure

4.1. Create a well organized website.
4.2. Visitors to your site should ALWAYS know where they are in relation to
other pages.
5. Good Contrast makes pages readable.

5.1. Get advice from others about how easy your pages are on the eyes.
5.2. Dark letters on light background or vice versa is a good rule of thumb.
5.3. Text on background images is often difficult to read.
5.4. Too many colors make the eyes moving around and therefore can distract
from your message.
5.4.1. Use the 216 safe colors.
5.4.2. You can find them nicely displayed with their hexadecimal values at:
http://www.wymondhamleics.free-online.co.uk/webtools/216-java.htm
5.4.3. Go to this site now and become familiar with it or download the entire palette
for use on your machine. http://www.wymondhamleics.free-
online.co.uk/webtools/webcolor.zip .
6. Provide Good Navigation Control.

6.1. Be sure visitors have clear options about where they can link to.
6.2. Be certain that all navigation is consistent on all pages.
6.3. Don’t mix links to pages within your site with links to other sites.
6.4. Remember, the more links you have to other sites, the more likely visitors are
to leave your site.
6.5. Buttons can provide a more structured navigation technique than text. They
can add a greater sense of organization to your site.
6.6. Visitors should not have to use the Browser’s BACK button to go back a
page from anywhere in your site.
7. Watch the clutter.

7.1. It’s easy to put too much on one page.
7.2. Break up your content into discreet units of information and link them
together.
7.3. Watch the long scrolling pages.
7.4. Be careful about becoming too text heavy needlessly.
7.5. Find a good BALANCE between text, blank space and graphics
7.6. Having to scroll left and right should be avoided.
7.7. To accomplish this you should not design for very high resolution.
8. Be certain that everything has a purpose.

8.1. Don’t use animation, scrolling and other technology just because you know
how to use them.
8.2. Blinking text is for amateurs. Viewers find it very distracting and annoying.
9. Have a Theme for your site.

9.1. A step up in design is to use a motif or pattern.
9.2. Having a theme like a book or an automobile makes visitors feel like they’re
in a wellorganized place.
9.3. It also lets them know when they’ve left your site
10. Market your website

10.1. Use Meta tags prudently.
10.2. Be descriptive.
10.3. Think of what words people would use to try to find your site.
10.4. Use as many descriptors as you can think of.
10.5. Use descriptive phrases in your ALT attribute.
10.6. Have an opening paragraph that is well thought out and descriptive
10.7. Register your site with search engines.
4.2 Things to Remember
1. Test your web pages with several browsers- Firefox, Chrome, Netscape and Internet Explorer
2. Test your website with different settings on your computer.
3. Change your color settings (256 colors, 65,000 colors, True Color)
4. Change your resolution (e.g. 640 x 480, 800 x 600, 1024 x 768) 5. Not everyone has the same
browser, computer or settings you do!
6. Get advice from others about your site.
7. Refresh your pages often. Don’t let your content become
stale.
8. Use only the 216 safe colors
9. Market your site!
4.3 Reasons for having a website
1. Accessibility
Customers can easily find your business online at any time, from anywhere (as long as they
have an internet connection). For example smart phone users can instantly view your products
and services while in the car, plane, restaurant or even while walking around town.
2. Provide unlimited information

A website allows you to display your products and services using text, photos, video and audio
(podcasts). You can add as many pages as you like plus edit the information at any time.
3. Inexpensive
A website will lower your advertising costs. For example a yellow page ad costs 1000s of
dollars and you can't edit the information once the ad is published. The initial cost of your site
may be $1000.00 or more depending on it's size and complexity but your maintenance costs
will be very small ( only yearly domain name registration and web hosting).
4. Interactivity
These days customers want to interact with your business before making a purchase. Ways to
add interactivity to your website may include adding a Forum, Blog, RSS Feed, Contact form,
Newsletter, Twitter, Facebook, Videos, Podcasts or a Chat box. For example a Blog enables
visitors to leave comments to your posts. You can answer their questions by replying to their
comments.
5. Not limited by geographical areas

Your website can be found locally, nationally and even worldwide if it is marketed to those areas. If
you want it to appeal to different countries you can even translate it into different languages.
6. Attract a wide audience

A website can attract thousands or even millions of visitors if marketed nationally or
worldwide. This is in sharp contrast to a yellow page ad which only serves your local area.
Attracting a wider audience generates more sales thus making your business more profitable.
7. Market to a targeted audience

If you use Google AdWords you can create online ads that target customers according to a
specific geographical area, time and day. For example if you know your product only sells on
Saturday nights in a specific town your ad can be targeted only to the people in that town.
4.4 Characteristics of a good website design
Consistency in Design
Except for the homepage which may have a slightly different appeal, all the other pages should
have a consistent design. When navigating to other pages on the website, the users should not
feel that have landed on a different website. The homepage and all the other pages of the
website should clearly display the logo and its tagline.
User-friendly
The website should be designed in such a way that even a layman will be able to navigate
around on a certain page or throughout the website and find things he wants to view. It should
not take him more than two clicks to find anything that interests him on your website. If the
navigation is too complicated for the visitor, he will not wish to visit your site again.
Perfect Content
Content is one of the most important elements of a website that can keep your visitors engaged
on to your site for a longer period. Not only you should publish informative and fresh content
free from grammatical errors but also you should pay attention to background color and
highlighting certain part of the content in bold or different colors. Proper formatting of content
is also necessary; however, you should not overdo it as it can negatively impact your visitors.
Fast Loading
Instead of decking up your site with heavy elements like Flash content, animated graphics,
large images and videos, you need to go with simple design and still offer the best of creativity
to your visitors. You need to make sure that your website takes only a few seconds to load. If
your site takes lot of time to load, your prospective visitors may not have the patience to wait
too long.
Search Engine Friendly

Your website will be failure if it is not able to attract the attention of users through search
engine. In other words, the elements of your website should be designed and tweaked in such a
way that it helps in maintaining a good ranking on different search engines like Google, Bing
and Yahoo.
Compatible on Different Browser

After designing your website, you should test it website on different versions of various
internet web browsers such as Firefox, Google Chrome, Safari, and Internet Explorer. You
should also test the loading time and ease of navigation across different pages of your website.
Also, you should check whether your site works flawlessly on stock internet browsers
available on platforms such as Windows Phone, Android and Symbian.
Functionality
All the elements of your site should work seamlessly. You need to fix all the page errors and
poorly constructed website elements. When visitors face such a problem, they can get
frustrated and leave your site. Hence, you need to check proper functioning of internal and
external pages, access to contact page, site search, site map, customer support page, help and
FAQs page, subscription page and so on
4.5 Web Development Process
The Web development process consists of several broad steps, beginning with planning and ending
with execution and maintenance. These include the following:
1. Defining your goals
2. Defining your audience
3. Developing competitive and market analysis
4. Creating a requirements analysis
5. Designing your site’s structure
6. Specifying content
7. Choosing a design theme
8. Constructing the site
9. Testing and evaluating the site
10. Marketing the site
4.5.1 Defining your goals

The most obvious question to ask when developing a Web site is: What is it for? What are the
objectives you want the site to achieve? For example, do you want to use your site to sell
products, or to drive the PR process? You may want to disseminate news, or build customer
service applications.
4.5.2 Defining your audience

Defining your audience will affect everything from the design of the site (a children’s site may
have lots of pastel colors or may even be a bit silly looking, whereas a science-related site will
require a different design approach) to content and even navigation questions. A sophisticated
audience, for example, may not need as much navigational guidance as a more general
audience.
4.5.3 Competitive and market analysis

Discovering what your competition is doing not only helps you enhance your own market
position, but can also give you solid ideas on what and what not to do on your own Web site.
For example, if your competition’s site consists of difficult-to -read type, you can make sure
your site gets high usability ratings by making your site extremely easy to read.
4.5.4 Requirements analysis

Most large sites start off with something called a Project Requirements Document or Functional
Requirements Document, which is a comprehensive document that contains specifications
about how the Web site or a specific feature of a Web site is supposed to behave. These
documents usually contain screenshots of mockups created by a team’s graphic designer or
graphic design department. A requirements document helps everyone on the team understand a
Web site’s expected behavior. If a part of the Web site doesn’t behave according to the
requirements document during testing, then a bug is filed. The bug remains open until the
problem is fixed. A list of some of the things included in requirements documents follows:
✦ Design specifications, including specific font sizes and colors
✦ Navigation specifications
✦ User experience and interaction scenarios
✦ Link behavior
✦ Page flow and page flow diagrams
✦ Usability guidelines
✦ Maintenance requirements
✦ Security policies
4.5.5 Designing the site structure

The site structure is usually defined in a requirements document. This usually involves a
schematic drawing of how the Web site should flow, and which pages are parents and which are
children. Figure 1 shows an example of a schematic for a very simple Web site containing only
a few pages.
Figure 1: Schematic for a simple website

Using UML to define structure
More complex sites require more formal structure definitions. You can use flow charts, or a
standardized way to create structure definitions called Unified Modeling Language (UML).
UML is a standardized modeling notation for representing software applications. You can use
UML to model the way your Web application is used by each user, or the way each component
behaves when interacting with other components.
UML consists of two broad categories of diagrams:
 Use cases are diagrams that walk the reader through a typical user session at the Web
site.
 Sequential and collaboration diagrams provide an abstract view into the relationship
between the various objects in the Web site, particularly as they relate to each other.
4.5.6 Using flow charts to define structure

You can also use your own process for creating a flow chart to define your Web site’s structure.
You can also use software designed for creating flow charts, such as SmartDraw
(www.smartdraw.com) and Visio (from Microsoft) and Eclipse. These programs accelerate the
flow-charting process by providing a drag-anddrop visual interface you use to create
4.5.7 Specifying content

Another consideration when deciding what type of Web server software environment to choose
is what kind of content you have. If you have static HTML, it doesn’t matter what kind of
environment you have. You can just use the one that is most comfortable to you. If you have
database-driven content, you’ll need to include the kind of database you expect to use in your
considerations regarding a Web server environment. Several kinds of databases, including
several open source varieties, are available, including the following major databases: MYSQL,
postgreSQL, MS SQL Server, Oracle, DB2, etc.
4.5.8 Choosing a design theme

You should base your design theme on the target market analysis you perform at the opening
stages of your Web site development. Sometimes your design theme will be easy. If you operate
a fish store, your theme is pretty obvious. It may not be as obvious if you run a general interest
site. In that case, carefully examine your market analysis and design accordingly. If you’re
running a small or personal site, you can also check out predesigned templates at sites such as
http://freesitetemplates.com and www .templatemonster.com.
4.5.9 Constructing the site

The first step in constructing a site is deciding what kind of application server environment
you’ll be using. An application server is somewhat like an engine that runs your Web site’s
logic. If you’re using simple, static HTML, it doesn’t matter what application server you use or
whether you even have one. However, if you’re interacting with a database or producing
dynamic content, you’ll need to work with an application server environment. Examples
include PHP, ASP.NET, ColdFusion, JSP, etc.
4.5.10 Testing and evaluating the site

When your Web site is finished, you want to test it before serving it to the public. How you do
that will depend on the resources of your Web development team. If your team has a lot of
resources, you can set up your Web site on a testing server. This is a separate machine with Web
hosting capabilities that can’t be seen by the general public but provides exactly the same
capabilities as your production machine, which is the machine that will actually host your
publicly available site.
4.5.11 Marketing the site
Once your site is live, you’ll want to find a way to get it noticed by your target audience. This can
be done by:
 Take an ad out in a trade publication geared towards your profession.
 Issue a press release announcing your site.
 Participate in e-mail discussion lists in ways that contribute to the knowledge of people
on the list, and include a signature in your posts that points to your Web site.
 Purchase ad banners on other Web sites to announce your site.  Run on-site events.
 Generate an e-newsletter and include a link on your Web site encouraging people to sign
up for it (but don’t send out the newsletter unsolicited, because that will actually do
more damage than good with your prospects, who will interpret those efforts as spam).
 Embark on a direct e-marketing campaign.
 Integrating traditional marketing and sales programs into your overall plan.
4.5.12 Tracking site usage and performance

Once your marketing is underway, determine its effectiveness. The first step in this process is to
determine where your traffic originates. Then measure what individuals do once they get to
your site. This helps you find out if one marketing approach is more effective than others.
Every Web server creates log files, which are raw data files containing information about
visitors to your site. This data consists of the user’s IP address, what browser the user employs,
and the time of day the user came to your site.
4.5.13 Maintaining the site

Maintaining your Web site means more than just making sure it continues to work. It also
means keeping your content fresh. This may mean being careful from the outset about where
you place timesensitive content. If you have time-sensitive content distributed all over the
place, you’ll probably lose track of some of it and it will become out of date. This is
particularly true of links, which is why it’s best to include a special area for hot links. You may
also want a section that includes news on your industry. You can develop your own articles, or
even provide an RSS-based news feed.
5 Unit 5: HyperText Markup Language (HTML)
5.1 Markup languages

Markup languages are mainly required for performing typical formatting functions like:
• Setting margins for the page
• Enhancing the look by changing font settings
• Adding special effects to the text and so on
5.2 Evolution of Markup languages

Since the early days of the web, there have been many versions of HTML:
Version Year
Tim Berners-Lee invented www 1989
Tim Berners-Lee invented HTML 1991
Dave Raggett drafted HTML+ 1993
HTML Working Group defined HTML 2.0 1995
W3C Recommended HTML 3.2 1997
W3C Recommended HTML 4.01 1999
W3C Recommended XHTML 1.0 2000
HTML5 WHATWG (Web Hypertext Application Technology Working Group) First
2008
Public Draft
HTML5 WHATWG Living Standard 2012
HTML5 W3C Final Recommendation 2014
5.3 HTML 5 Introduction
5.3.1 What is HTML?

HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language

• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
5.3.2 HTML5 Style Guide and Coding Conventions

Web developers are often uncertain about the coding style and syntax to use in HTML.
Between 2000 and 2010, many web developers converted from HTML to XHTML. With
XHTML, developers were forced to write valid and "well-formed" code.
HTML5 is a bit more sloppy when it comes to code validation.
With HTML5, you must create your own Best Practice, Style Guide and Coding Conventions.
5.3.2.1 Use Correct Document Type

Always declare the document type as the first line in your document:
<!DOCTYPE html>
If you want consistently with lower case tags, you can use:
<!doctype html>
5.3.2.2 Use Lower Case Element Names

HTML5 allows mixing uppercase and lowercase letters in element names.
We recommend using lowercase element names:
• Mixing uppercase and lowercase names is bad
• Developers are used to use lowercase names (as in XHTML)
• Lowercase look cleaner
• Lowercase are easier to write
Bad:
<SECTION>
<p>This is a paragraph.</p>
Very Bad:
<section>
<p>This is a paragraph.</p> </SECTION>
Good:
<section>
<p>This is a paragraph.</p> </section>
5.3.2.3 Close All HTML Elements

In HTML5, you don't have to close all elements (for example the <p> element).
We recommend closing all HTML elements:
Looking bad:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Looking good:
<section>
</section>
5.3.2.4 Close Empty HTML Elements

In HTML5, it is optional to close empty elements.
This is allowed: <meta charset="utf8">
This is also allowed:

<meta charset="utf8" />
The slash (/) is required in XHTML and XML.

If you expect XML software to access your page, it might be a good idea to keep it.
5.3.2.5 Use Lower Case Attribute Names

HTML5 allows mixing uppercase and lowercase letters in attribute names. We recommend using
lowercase attribute names:
 Mixing uppercase and lowercase names is bad
 Developers are used to use lowercase names (as in XHTML)
 Lowercase look cleaner
 Lowercase are easier to write
Looking bad:
<div CLASS="menu">
Looking good:
<div class="menu">
5.3.2.6 Quote Attribute Values

HTML5 allows attribute values without quotes.
We recommend quoting attribute values:
i. You have to use quotes if the value contains spaces
ii. Mixing styles is never good
iii. Quoted values are easier to read
This will not work, because the value contains spaces:
<table class=table striped>
This will work:

<table class="table striped">
5.3.2.7 Image Attributes
Always use the alt attribute with images. It is important when the image cannot be viewed.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Always define image size. It reduces flickering because the browser can reserve space for images
before they are loaded.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
5.3.2.8 Spaces and Equal Signs

Spaces around equal signs is legal
<link rel = "stylesheet" href = "styles.css">
But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">
5.3.2.9 Avoid Long Code Lines

When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.
Try to avoid code lines longer than 80 characters.
5.3.2.10 Blank Lines and Indentation

Do not add blank lines without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add 2 spaces of indentation. Do not use TAB.
Do not use unnecessary blank lines and indentation. It is not necessary to use blank lines
between short and related items. It is not necessary to indent every element:
Unnecessary:
<body>

<h1>Famous Cities</h1>

<h2>Harare</h2>

<p>
Harare is the capital of Zimbabwe, the center of the
Greater Harare Area, and the most populous
metropolitan area in the world.
It is the seat of the Zimbabwean government and
the Imperial Palace, and the home of the
Zimbabwean Imperial Family.
</p>

</body>
Better:
<body>

<h1>Famous Cities</h1>
<h2>Harare</h2>

<p>
Harare is the capital of Zimbabwe, the center of the
Greater Harare Area, and the most populous
metropolitan area in the world.
It is the seat of the Zimbabwean government and the
Imperial Palace, and the home of the Zimbabwean
Imperial Family.
</p>
</body>
5.3.2.11 Ommiting <html> and <body> tags

In the HTML5 standard, the <html> tag and the <body> tag can be omitted.
The following code will validate as HTML5:
Example
<!DOCTYPE html>

<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
We do not recommend omitting the <html> and <body> tags.
The <html> element is the document root. It is the recommended place for specifying the page
language:
<!DOCTYPE html>
<html lang="en">
Declaring a language is important for accessibility applications (screen readers) and search engines.
Omitting <html> or <body> can crash DOM and XML software.
Omitting <body> can produce errors in older browsers (IE9).
5.3.2.12 Omitting <head>?
In the HTML5 standard, the <head> tag can also be omitted.
By default, browsers will add all elements before <body>, to a default <head> element.
You can reduce the complexity of HTML, by omitting the <head> tag:
Example
<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
</body>
5.3.2.13 Meta Data

The <title> element is required in HTML5. Make the title as meaningful as possible:
<title>HTML5 Syntax and Coding Style</title>
To ensure proper interpretation, and correct search engine indexing, both the language and the
character encoding should be defined as early as possible in a document:
<!DOCTYPE html>
<html lang="enUS">
<head>
<meta charset="UTF8">
<title>HTML5 Syntax and Coding Style</title>
</head>
5.3.2.14 HTML Comments

Short comments should be written on one line, with a space after :
<! This is a comment >
Long comments, spanning many lines, should be written with  on separate lines:
<!
This is a long comment example. This is a long comment example. This is
a long comment example. This is a long comment example. This is a long
comment example. This is a long comment example.
>
Long comments are easier to observe, if they are indented 2 spaces.
5.3.2.15 Style Sheets

Use simple syntax for linking style sheets (the type attribute is not necessary):
<link rel="stylesheet" href="styles.css" >
Short rules can be written compressed, on one line, like this:

p.into {fontfamily:"Verdana"; fontsize:16em;}
Long rules should be written over multiple

lines:
body {
backgroundcolor: lightgrey;
fontfamily: "Arial Black", Helvetica, sansserif;
fontsize: 16em;
color: black;
}
 Place the opening bracket on the same line as the selector.
 Use one space before the opening bracket.
 Use 2 spaces of indentation.

 Use colon plus one space between each property and its value.
 Use space after each comma or semicolon.
 Use semicolon after each property-value pair, including the last.
 Only use quotes around values if the value contains spaces.
 Place the closing bracket on a new line, without leading spaces.
 Avoid lines over 80 characters.

Adding a space after a comma, or a semicolon, is a general rule in all types of writing.
5.3.2.16 Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js">
5.3.2.17 Use Lower Case File Names

Most web servers (Apache, Unix) are case sensitive about file names:
harare.jpg cannot be accessed as Harare.jpg.
Other web servers (Microsoft, IIS) are not case sensitive:
london.jpg can be accessed as London.jpg or london.jpg.
If you use a mix of upper and lower case, you have to be extremely consistent.
If you move from a case insensitive, to a case sensitive server, even small errors will break your
web.
To avoid these problems, always use lower case file names (if possible).
5.3.2.18 File Extensions

HTML files should have a .html extension (not .htm).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
5.4 HTML Page Structure

Below is a visualization of an HTML page structure:
HTML Example
<!DOCTYPE html>
<html>
<body>

<h1>
My First Heading
</h1>

<p>
My first paragraph.
</p>

</body>
</html>
Example Explained
• The DOCTYPE declaration defines the document type. The <!DOCTYPE> declaration
helps the browser to display a web page correctly. The <!DOCTYPE> declaration must be
the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE>
declaration is not an HTML tag; it is an instruction to the web browser about what version
of HTML the page is written in. There are many different documents on the web, and a
browser can only display an HTML page 100% correctly if it knows the HTML type and
version used.
• The text between <html> and </html> describes the web page
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a level 1 heading
• The text between <p> and </p> is displayed as a paragraph
• The <!DOCTYPE html> declaration is the doctype for HTML5.
5.5 Web Browsers

The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to
read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of the
HTML page is to be presented/displayed to the user:
5.6 HTML Editors

Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
• Netbeans
• Eclipse
• Visual Studio
• PyCharm
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.
Step 1: Start Notepad
To start Notepad go to:
Start
All Programs
Accessories
Notepad
Step 2: Edit Your HTML with Notepad
Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no
difference, it is entirely up to you.
Save the file in a folder that is easy to remember
Step 4: Run the HTML in Your Browser
Start your web browser and open your html file from the File, Open menu, or just browse the folder
and double-click your HTML file.
The result should look much like this:

5.7 HTML Elements
HTML documents are defined by HTML elements.
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a This is a link </a>
href="default.htm">
<br>
* The start tag is often called the opening tag. The end tag is often called the closing tag.
5.7.1 HTML Element Syntax

• An HTML element starts with a start tag / opening tag
• An HTML element ends with an end tag / closing tag
• The element content is everything between the start and the end tag
• Some HTML elements have empty content
• Empty elements are closed in the start tag
• Most HTML elements can have attributes
You will learn about attributes in next sections.
5.7.2 Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
5.7.3 HTML Document Example

<!DOCTYPE html>
<html>

<body>
<p> This is my first paragraph. </p>
</body>

</html>
The example above contains 3 HTML elements.
HTML Example Explained
The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document. The element has a start tag <p> and
an end tag </p>. The element content is: This is my first paragraph.
The <body> element:
<body>
</body>
The <body> element defines the body of the HTML document.

The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
</body>
</html>
The <html> element defines the whole HTML document.

The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
5.7.4 Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you
forget the end tag.
5.7.5 Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is
the proper way of closing empty elements in XHTML (and XML).
5.7.6 HTML Attributes

Attributes provide additional information about HTML elements.
• HTML elements can have attributes

• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="http://www.zanamwe.com" >This is a link</a>
Below is a list of some attributes that can be used on any HTML element:
Attribute Description
class Specifies one or more class names for an element (refers to a class in a style
sheet)
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
5.7.7 HTML Headings

Headings are important in HTML documents.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
Note: Browsers automatically add some empty space (a margin) before and after each heading.
Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the
document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3
headings, and so on.
5.7.8 HTML Lines

The <hr> tag creates a horizontal line in an HTML page.
The <hr> element can be used to separate content:
Example
<hr />
<hr />
5.7.9 HTML Paragraphs
HTML documents are divided into paragraphs.
Paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: Browsers automatically add an empty line before and after a paragraph.
5.7.10 HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>
The <br> element is an empty HTML element. It has no end tag.
5.7.11 HTML Text Formatting

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags
HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or
mood
<small> Defines smaller text
<strong> Defines important text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text

<mark> Defines marked/highlighted text
HTML "Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp Defines sample computer code
>
<var> Defines a variable
<pre> Defines preformatted text
HTML Citations, Quotations, and Definition Tags
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a
document
<bdo> Defines the text direction
<blockquote Defines a section that is quoted from another source
>
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
5.7.12 HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page to page.
HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another
document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link’s
destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.zanamwe.com/">Visit Zanamwe’s Page</a> which will
display like this: Visit Zanamwe’ Page
Clicking on this hyperlink will send the user to Zanamwe’s homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.zanamwe.com/" target="_blank">Visit Zanamwe’s Page!</a>
Linking/Jumping to another page on YOUR site ....

You don't need to put in the entire URL - just the html page name within your site.
<a href="index.html">BACK TO THE FIRST PAGE</a>
Linking/Jumping to someone else's page – you

DO need the full URL ....
<a href="http://www.google.com/"> Google</a>
HTML Links - The id Attribute
The id attribute can be used to create a bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.zanamwe.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Email Link
<a href="mailto:nbzanamwe@gmail.com">Email Zanamwe</a>
Creates: Email Zanamwe
To make a combination of words AND a graphic a link ...

<a href="mailto: nbzanamwe@gmail.com"> <img src="mailslot.gif" border=0
height=11 width=32>Email Zanamwe</a>
5.7.13 The HTML <head> Element
The <head> element is a container for all the head elements. Elements inside <head> can include
scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>,
<noscript>, and <base>.
The HTML <title> Element
The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
• defines a title in the browser toolbar

• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <base> Element
The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.zanamwe.com/images/" target="_blank">
</head>
The HTML <link> Element
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The HTML <style> Element
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css"> body {backgroundcolor:yellow;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on
the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document,
last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
<meta> tags always go inside the <head> element.
<meta> Tags - Examples of Use
Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:
<meta name="description" content=" Web tutorials on HTML and CSS">
Define the author of a page:
<meta name="author" content="Zanamwe Ngonidzashe">
Refresh document every 30 seconds:
<meta httpequiv="refresh" content="30">
The HTML <script> Element
The <script> tag is used to define a client-side script, such as a JavaScript.
HTML head Elements

Tag Description
<head> Defines information about the document
Defines the title of a document
Defines a default address or a default target for all links on a
page
Defines the relationship between a document and an external
resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
5.7.14 HTML Images

HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value
of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text">
The URL points to the location where the image is stored. An image named "boat.gif", located in
the "images" directory on "http://localhost" has the URL: http://localhost/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an
image tag between two paragraphs, the browser shows the first paragraph, then the image, and
then the second paragraph.
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="smiley.gif" alt="Smiley face">
The alt attribute provides alternative information for an image if a user for some reason cannot view
it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
Tip: It is a good practice to specify both the height and width attributes for an image. If these
attributes are set, the space required for the image is reserved when the page is loaded.
However, without these attributes, the browser does not know the size of the image. The effect
will be that the page layout will change during loading (while the images load).
Loading images takes time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image
from a web server and inserts it into the page. Therefore, make sure that the images actually
stay in the same spot in relation to the web page, otherwise your visitors will get a broken link
icon. The broken link icon is shown if the browser cannot find the image.
HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-
map
5.7.15 Marquee Tag

• The marquee tag is a non-standard HTML mark-up element type which causes text to scroll
up, down, left or right.
Attributes
• Align: Uses the same syntax as the img tag.
• Behavior: Allows the user to set the behavior of the marquee to one of three different types:
o Scroll - DEFAULT. Scrolls the text from right-to-left, and restarts at the right side of the
marquee when it has reached the left side. Text disappears when looping finishes.
o Slide - Same as Scroll except that the text stays there after the loop(s) if a loop(s)
is set.
o Alternate - Text 'bounces' from the left side of the box to the right side. Loops
are counted by each time it reaches the other end; a loop of 1 would be the same
as Slide. <marquee behavior="alternate">This text will bounce from
left to right</marquee>
• Bgcolor: Sets the background color of the marquee.
<marquee bgcolor="blue">This marquee's background color will be blue.</marquee>
• Direction: Sets the direction of the marquee box to either left-to-right, right-to-left, up-to-
down and down-to-up. Later browsers added support for a movie credit style bottom-up
and top-down values.
<marquee direction="right">This text will scroll from left to
right.</marquee>  Width: This sets how wide the marquee should be.
<marquee width="100px">This marquee is only a hundred pixels wide!
</marquee>  Loop: This sets how many times the marquee should 'Loop' its
text.
<marquee loop="2">You will only see this text twice before it stops
playing.</marquee>  Scrollamount: This is how many pixels the text
moves between 'frames', in pixels.
<marquee scrollamount="10">This text will move ten pixels per
'frame'</marquee>  Scrolldelay: This sets the amount of time, in
milliseconds, between 'frames'.
<marquee scrolldelay="1000">This would be so slow, you'd get no sense of
animation.</marquee> <marquee scrolldelay="1">This would be so fast, you couldn't see it!
</marquee>
5.7.16 Ordered Lists
Numbered
<ol>
<li>List item 1</li>
</ol>
Capital Letters
<ol type="A">
</ol>
Capital Letters Special Start

<ol type="A" start="3">
</ol>
Lowercase Roman Numerals

<ol type="i">
</ol>
Capital Roman Numerals

<ol type="I">
</ol>
Capital Roman Numerals Special Start

<ol type="I" start="7">
</ol>
Unordered lists
Example 1:
<br>
<br>
<ul type=”square”>
</ul>
<br>
Example 2:
<br>
<ul type="disc">
<ul type="circle">
</ul>
</ul>
5.7.17 HTML <div> and <span>

HTML elements can be grouped together with <div> and <span>.
5.7.18 HTML Block Elements

Most HTML elements are defined as block level elements or as inline elements.
Block level elements normally start (and end) with a new line when displayed in a browser.
Examples:
<h1>, <p>, <ul>, <table>
5.7.19 HTML Inline Elements

Inline elements are normally displayed without starting a new line. Examples:
<b>, <td>, <a>, <img>
5.7.19.1 The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping
other HTML elements.
The <div> element has no special meaning. Except that, because it is a block level element, the
browser will display a line break before and after it.
When used together with CSS, the <div> element can be used to set style attributes to large blocks
of content.
Another common use of the <div> element, is for document layout. It replaces the "old way"
of defining layout using tables. Using <table> elements for layout is not the correct use of
<table>. The purpose of the <table> element is to display tabular data.
5.7.19.2 The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be used to set style attributes to parts of
the text.
5.8 HTML Grouping Tags

Tag Description
<div> Defines a section in a document (block-
level)
<span> Defines a section in a document (inline)
5.9 HTML Layouts
Web page layout is very important to make your website look good. Design your webpage layout
very carefully.
Website Layouts
Most websites have put their content in multiple columns (formatted like a magazine or
newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to
position elements, or to create backgrounds or colorful look for the pages.
Even though it is possible to create nice layouts with HTML tables, tables were designed for
presenting tabular data - NOT as a layout tool!
5.10 HTML5 New Semantic Elements

The following tags have been introduced for better structure −
section − This tag represents a generic document or application section. It can be used
together with h1-h6 to indicate the document structure.
article − This tag represents an independent piece of content of a document, such as a blog
entry or newspaper article.
aside − This tag represents a piece of content that is only slightly related to the rest of the
page.
header − This tag represents the header of a section.
footer − This tag represents a footer for a section and can contain information about the
author, copyright information, etc.
nav − This tag represents a section of the document intended for navigation.
dialog − This tag can be used to mark up a conversation.
figure − This tag can be used to associate a caption together with some embedded content,
such as a graphic or video.
HTML Layouts - Using <div> and Semantic Elements
The div element is a block level element used for grouping HTML elements.
The following example uses six div elements to create a multiple column layout.
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100%; height: 100%;">
<header id="header" style="backgroundcolor:#FFA500;">
<h3 style="marginbottom:0;">
Zanamwe Cyber Money
</h3>
<nav>
<ul >
<li style="display: inline"> <a href="#">Home
</a></li>
<li style="display: inline"><a href="#"> About
Us </a></li>
<li style="display: inline"><a href="#">
Products </a></li>
<li style="display: inline"><a href="#"> Contact
Us </a></li>
</ul>
</nav>
</header>
<aside id="rmenu" style="backgroundcolor:#FFD700;
height:500px; width:150px; float:left;">
<nav>
<ul>
<li> <a href="#">HTML </a></li>
<li><a href="#"> CSS </a></li>
<li><a href="#"> JavaScript </a></li>
</ul>
</nav>
</aside>
<aside id="lmenu" style="background
color:#FFD700;height:500px;width:150px; float: right; ">
<nav>
<nav>
<ul>
<li> <a href="#">HTML </a></li>
<li><a href="#"> CSS </a></li>
<li><a href="#"> JavaScript </a></li>
</ul>
</nav>
</aside>
<main id="content" style="background
color:#EEEEEE;height:500px;width:1200px;">
<article>
<h4>Inline Styles </h4>
An inline style loses many of the advantages of
style sheets by mixing content with presentation. Use this method
sparingly! To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS property. The
example shows how to change the color and the left margin of a
paragraph:
</article>
<h4>External Style Sheet </h4>
An external style sheet is ideal when the style is
applied to many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside the
head section:
<article>
</article>
<article>
<h4>CSS Float </h4>
With CSS float, an element can be pushed to the left
or right, allowing other elements to wrap around it. Float is very often
used for images, but it is also useful when working with layouts.
How Elements Float
Elements are floated horizontally, this means that
an element can only be floated left or right, not up or down.
A floated element will move as far to the left or
right as it can. Usually this means all the way to the left or right of
the containing element. The elements after the floating element will
flow around it. The elements before the floating element will not be
affected. If an image is floated to the right, a following text flows
around it, to the left:
</article>
</main>
<footer id="footer" style="background
color:#FFA500;clear:both;textalign:center;">
Copyright © zanamwe.com
</footer>
</div>
</body>
</html>
Output:
5.10.1 The Shiv
HTML5 semantic elements are supported in all modern browsers.
In addition, you can "teach" older browsers how to handle "unknown elements".
Add the shiv for Internet Explorer support:


5.11 HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light.
5.11.1 Color Values

CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green,
and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0
(hex 00). The highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.
Color Examples
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
HTML Color Names
Color Names Supported by All Browsers
140 color names are defined in the HTML and CSS color specification (17 standard colors plus
123 more).
Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, and yellow.
5.12 HTML Entities
Reserved characters in HTML must be replaced with character entities.
It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser
will mix them with tags.
To actually display reserved characters, we must use character entities in the HTML source code.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
To display a less than sign we must write: < or <
Tip: The advantage of using an entity name, instead of a number, is that the name is easier to
remember. However, the disadvantage is that browsers may not support all entity names (the
support for entity numbers is very good).
5.13 Non-breaking Space

A common character entity used in HTML is the non-breaking space ( ).
Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the
browser will remove 9 of them, before displaying the page. To add spaces to your text, you can
use the character entity.
5.14 HTML Useful Character Entities

Note: Entity names are case sensitive!
Result Description Entity Name Entity Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered ® ®
trademark
™ trademark ™ ™
6 HTML TABLES
A table consists of a start tag <TABLE> and end tag </TABLE>. Between these, it is build up
from a series of rows, which have a start tag <TR> and an end tag </TR>. Inside those, there
are a number of columns, or cells, each with a start tag <TD> and end tag </TD>. The browser
will not render the table until it has entirely loaded. The basic structure of a table might look
like the following HTML fragment: <table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
7 HTML Forms
• Forms are a vital tool for the webmaster to receive information from the web surfer,
such as: their name, email address, credit card, etc. A form will take input from the
viewer and depending on your needs; you may store that data into a file, place an order,
gather user statistics, register the person to your web forum, or maybe subscribe them to
your weekly newsletter.
Text Fields
• Before we teach you how to make a complete form, let's start out with the basics of
forms. Input fields are going to be the meat of your form's sandwich. The <input> has a
few attributes that you should be aware of.
type - Determines what kind of input field it will be. Possible choices are text, submit, and
password.
name - Assigns a name to the given field so that you may reference it later.
size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
maxlength - Dictates the maximum number of characters that can be entered.
HTML Code:
<form method="post" action="mailto:youremail@email.com">

Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10" maxlength="10" name="password">
</form>
Input Forms:
ss Name:
**** Password:
Do not use the password for security purposes. The data in the password field is not encrypted and
is not secure in any way.
HTML Form Email

• Now we will add the submit functionality to your form. Generally, the button should be
the last item of your form and have its name attribute set to "Send" or "Submit". Name
defines what the label of the button will be. Here is a list of important attributes of the
submit:
• In addition to adding the submit button, we must also add a destination for this
information and specify how we want it to travel to that place. Adding the following
attributes to your <form> will do just this.
method - We will only be using the post functionality of method, which sends the data without
displaying any of the information to the visitor.
action - Specifies the URL to send the data to. We will be sending our information to a fake
email address.
HTML Code:
Name:
<input type="text" size="10" maxlength="40" name="name"> <br />
Password:
<input type="password" size="10" maxlength="10" name="password"><br />
<input type="submit" value="Send">
</form>
Email Forms:
Name: Password:
Send
Simply change the email address to your own and you will have set up your first functional form!
HTML Radio Buttons

Radio buttons are a popular form of interaction. You may have seen them on quizzes,
questionnaires, and other web sites that give the user a multiple choice question. Below are a
couple attributes you should know that relate to the radio button.
value - specifies what will be sent if the user chooses this radio button. Only one value will be
sent for a given group of radio buttons (see name for more information).
name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade
and size.
HTML Code:
<form method="post"
action="mailto:nzanamwe@science.uz.ac.zwm"> What kind of
shirt are you wearing? <br />
Shade:
<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
Size:
<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br />
<input type="submit" value="Email Myself">
</form>
Radios:
What kind of shirt are you wearing?
Shade: Dark Light
Size: Small Medium Large

Email Myself
HTML Drop Down Lists

Drop down menus are created with the <select> and <option> tags. <select> is the list itself and
each <option> is an available choice for the user.
HTML Code:
College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School </option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" value="Email Yourself">
</select>
</form>
Drop Down Lists:

College Degree?
HTML Selection Forms

Yet another type of form, a highlighted selection list. This form will post what the user highlights.
Basically just another type of way to get input from the user.
The size attribute selects how many options will be shown at once before needing to scroll, and the
selected option tells the browser which choice to select by default.
HTML Code:
<form method="post" action="mailto:nbzanamwe@gmail.com">
Musical Taste
<select multiple name="music" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select>
<input type="submit" value="Email Yourself">
</form>
Selection Forms:
Musical Taste
HTML Input Attributes
The value Attribute

The value attribute specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname"> </form>
The readonly attribute does not need a value. It is the same as writing readonly="readonly".
The disabled Attribute

The disabled attribute specifies that the input field is disabled.
A disabled element is un-usable and un-clickable.
Disabled elements will not be submitted.
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
The disabled attribute does not need a value. It is the same as writing disabled="disabled".
The size Attribute
The size attribute specifies the size (in characters) for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
With a maxlength attribute, the input control will not accept more than the allowed number of
characters.
Input Type: submit
<input type="submit"> defines a button for submitting form input to a form-handler.

The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Input Type: checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Input Type: button

<input type="button"> defines a button:
Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
HTML5 Attributes
HTML5 added the following attributes for <input>:
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step
and the following attributes for <form>:
• autocomplete
• novalidate
HTML5 Input Types
HTML5 added several new input types:

•color
•date
•datetime
•datetime-local
•email
•month
•number
•range
•search
•tel
•time
•url
•week
Input types, not supported by old web browsers, will behave as input type text.
The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on
or off.
When autocomplete is on, the browser automatically complete values based on values that the
user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or
vice versa.
The autocomplete attribute works with <form> and the following <input> types: text, search,
url, tel, email, password, datepickers, range, and color.
7.1.1 Example
An HTML form with autocomplete on (and off for one input field):
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit"> </form>
Tip: In some browsers you may need to activate the autocomplete function for this to work.
The novalidate Attribute

The novalidate attribute is a <form> attribute
When present, novalidate specifies that form data should not be validated when submitted.
The autofocus Attribute

The autofocus attribute is a boolean attribute.
When present, it specifies that an <input> element should automatically get focus when the
page loads.
Example
Let the "First name" input field automatically get focus when the page loads:
First name:<input type="text" name="fname" autofocus>
The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.
Tip: To refer to more than one form, use a space-separated list of form ids.
Last name: <input type="text" name="lname" form="form1">
The formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the
form is submitted.
The formaction attribute overrides the action attribute of the <form> element.
The formaction attribute is used with type="submit" and type="image".
An HTML form with two submit buttons, with different actions:

<form action="action_page.php">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit"><br> <input type="submit"
formaction="demo_admin.asp" value="Submit as admin"> </form>
The formenctype Attribute

The formenctype attribute specifies how the form-data should be encoded when submitting it to
the server (only for forms with method="post")
The formenctype attribute overrides the enctype attribute of the <form> element.
The formenctype attribute is used with type="submit" and type="image".
Example
Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-
data" (the second submit button):
<form action="demo_post_enctype.php" method="post">
<input type="submit" formenctype="multipart/form-data" value="Submit
as Multipart/form-data"> </form>
The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.
The formmethod attribute overrides the method attribute of the <form> element.
The formmethod attribute can be used with type="submit" and type="image".
7.1.2 Example
The second submit button overrides the HTTP method of the form:
<form action="action_page.php" method="get">
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit
using POST"> </form>
The formnovalidate Attribute

The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element should not be validated when submitted.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
The formnovalidate attribute can be used with type="submit".
<input type="submit" formnovalidate value="Submit without validation">

</form>
The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the
response that is received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
<input type="submit" value="Submit as normal"> <input

type="submit" formtarget="_blank" value="Submit to a new
window"> </form>
The height and width Attributes

The height and width attributes specify the height and width of an <input> element.
The height and width attributes are only used with <input type="image">.
The list Attribute
The list attribute refers to a <datalist> element that contains pre-defined options for an <input>
element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome"> <option
value="Opera">
<option value="Safari"> </datalist>
Input Type: date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
Birthday: input type="date" name="bday">
</form>
The min and max Attributes

The min and max attributes specify the minimum and maximum value for an <input> element.
The min and max attributes work with the following input types: number, range, date, datetime,
datetime-local, month, time and week.
Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">
The multiple Attribute

The multiple attribute is a boolean attribute.
When present, it specifies that the user is allowed to enter more than one value in the <input>
element. The values are comma seperated.
The multiple attribute works with the following input types: email, and file.
The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked
against.
The pattern attribute works with the following input types: text, search, url, tel, email, and
password.
Use the global title attribute to describe the pattern to help the user.
Example
An input field that can contain only three letters (no numbers or special characters):
Country code: <input type="text" name="country_code" pattern="[A-Zaz]{3}" title="Three letter
country code">
The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a
sample value or a short description of the format).
The hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and
password.
Example
The required Attribute

The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.
The step Attribute

The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Tip: The step attribute can be used together with the max and min attributes to create a range of
legal values.
The step attribute works with the following input types: number, range, date, datetime,
datetime-local, month, time and week.
8 CASCADING STYLE SHEETS (CSS)
CSS are text files, or special text in a HTML file, which allows you to specify styles, formatting,
and positioning of HTML objects.
Cascading
Multiple styles can overlap in order to specify a range of styles from a whole web site down to a
unique element. Which style gets applied pertains to the rules of CSS cascading logic.
Style
CSS deals specifically with the presentation domain of designing a web page. Style gives an
item its distinctive look or feel. For text it could be what font is used, what color, size, or
spacing. It also applies to other HTML objects such as links, images, backgrounds, margins and
borders.
Sheet
Normally, CSS is a file separate from the HTML file –linked to the HTML file through its <head>
(exceptions apply).
Benefits of using CSS
Some of the benefits to using CSS are more consistency, better layout and visual design, plus easier
HTML coding. Also you can do things with style sheets that could never be done before.
• Consistency: This would apply for larger sites, and many different developers A site-
global style sheet could be set up, which all pages would refer to. This sheet could
include the look and feel you want for the complete site. Each page would maintain the
same attributes throughout the site. The ability to change one item, on one page can
change the same attribute on your whole site.
• Easier coding: No more elaborate tables, and complicated HTML. This will also greatly
benefit the large multi-contributor web environments. The HTML code using style
sheets is much simpler. The code reverts back to what it was in the early simple days.
Just using header tags (H1, H2, ...), and paragraph tags with style sheets can produce a
rich document, with the help of a SPAN and DIV tag here and there.
• Rich design and layout: Cascading Style Sheets bring professional layout and design
control to HTML documents. Here's a brief listing of what you can do with style sheets
that you could only do with an elaborate work around, or not at all.
o exact positioning of elements o font control (size, color, family) o white space control,
margins, leading o background control (placement, repeat, ...)
also, CSS reduce workload by centralizing commands for visual appearance instead of scattered
throughout the HTML doc, reduce page download size.
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
Selectors
The selector chooses elements to apply a declared style. The selector is normally the HTML
element you want to style. Each declaration consists of a property and a value. The property is
the style attribute you want to change. Each property has a value. CSS declarations always end
with a semicolon, and declaration groups are surrounded by curly brackets
Selector types:
1. Element Selectors: selects all elements of a specific type (<body>, <h1>, <p>,
etc.)
2. Class Selectors: selects all elements that belong to a given class.
3. ID Selectors: selects a single element that’s been given a unique id.
4. Pseudo Selectors: combines a selector with a user activated state(:hover, :link, :visited)
8.1 Examples of Element Selectors
p {color:red; text-
align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example 1 p { color:red;
text-align:center;
}
Finds all HTML elements of type <p> and makes the text color red and align text to the center.
Example 2
h1{ color: blue;
}
Finds all elements of type <h1> and makes the text color blue.
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/ p {
text-align:center; /*This is another
comment*/ color:black; font-
family:arial;
}
8.2 The id Selector

The id selector is used to specify a style for a single, unique element. The id selector uses the id
attribute of the HTML element, and is defined with a "#". The style rule below will be applied
to the element with id="para1":
Example
#para1 { text-align:center;
color:red;
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
8.3 The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements. This allows you to set a particular style
for any HTML elements with the same class. The class selector uses the HTML class attribute,
and is defined with a "." In the example below, all HTML elements with class="center" will be
center-aligned:
Example
.center {text-align:center;}
You can also specify that only specific HTML elements should be affected by a class. In the
example below, all p elements with class="center" will be center-aligned:
Example
p.center {text-align:center;}
Do NOT start a class name with a number! This is only supported in Internet Explorer. When a
browser reads a style sheet, it will format the document according to it.
8.4 Pseudo-Selectors
Apply styles to a user activated state of an element. If used, must be declared in a specific order in
the style sheet. General Purpose Pseudo-Selectors include:
– a:hover - Element with mouse over
Specific to hyperlinks (and/or buttons)

– a:active - A link or button that is currently being clicked on.
– a:link - A link that has NOT been visited yet.
– a: visited - A link that HAS been visited.
CSS Links
Links can be styled in different ways.
8.4.1 Styling Links

Links can be style with any CSS property (e.g. color, font-family, background-color). Special
for links are that they can be styled differently depending on what state they are in. The four
links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked Example
a:link {color:#FF0000;} /* unvisited link */ a:visited
{color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse
over link */ a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
Background Color
The background-color property specifies the background color for links:
Example
a:link {backgroundcolor:#B2FF99;} a:visited {backgroundcolor:#FFFF85;}
a:hover {backgroundcolor:#FF704D;} a:active {backgroundcolor:#FF704D;}
Applying styles to the first line of an element

The :first-line pseudo-element allows you to specify a different definition for the first line of
elements in the document. For example,
p:firstline { textdecoration: underline; }
Applying styles to the first letter of an element

Just as the :first-line pseudo-element can be used to affect the properties of the first line of an
element, the :first-letter pseudo-element can be used to affect the first letter of an element. You
can use this to achieve typographic effects such as dropcaps. For example,
p.dropcap:first-letter { font-size: 3em;

font-weight: bold; float: left;
border: solid 1px black; padding: .1em;
margin: .2em .2em 0 0;
}
Note: 2em means 2 times the size of the current font. E.g., if an element is displayed with a font
of 12 pt, then '2em' is 24 pt.
Grouping Selectors
Lets say you want to apply the same style to several different selectors. Don’t repeat the style –use a
comma!!
Syntax: sel1, sel2, sel3 (Remember the comma to group several different selectors)
Example:
h1, .legs, #snout{ font-size: 20pt;

}
Finds all elements of type <h1>, all elements with class=“legs” and the single element whose id =
“snout” then makes their font-size 20pt.
8.5 CSS Text

Text formatting
This text is styled with some of the text formatting properties. The heading uses the text-align,
texttransform, and color properties. The paragraph is indented, aligned, and the space between
characters is specified.
Text Color
The color property is used to set the color of the text. The color can be specified by:
• name - a color name, like "red"
• RGB - an RGB value, like "rgb(255,0,0)"
• Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example body {color:blue;} h1

{color:#00ff00;} h2
{color:rgb(255,0,0);}
For W3C compliant CSS: If you define the color property, you must also define the
background-color property.
Text Alignment
The text-align property is used to set the horizontal alignment of a text. Text can be centered, or
aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched
so that every line has equal width, and the left and right margins are straight (like in magazines
and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;} p#main {text-
align:justify;} Text Decoration
The text-decoration property is used to set or remove decorations from text. The text-decoration
property is mostly used to remove underlines from links for design purposes:
Example a {text-decoration:none;}
It can also be used to decorate text:
8.5.1 Example
h1 {text-decoration:overline;} h2 {text-
decoration:line-through;} h3 {text-
decoration:underline;}
h4 {text -decoration:blink;}
It is not recommended to underline text that is not a link, as this often confuses users.
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
p {text indent:50px;}
8.6 CSS Font
CSS Font Families

In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or "Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description

Serif Times New Roman Serif fonts have small lines at the ends on some
Georgia characters
Sans-serif Arial "Sans" means without - these fonts do not have
Verdana the lines at the ends of characters
Monospace Courier New All monospace characters have the same width
Lucida Console
Font Family
The font family of a text is set with the font-family property. The font-family property should
hold several font names as a "fallback" system. If the browser does not support the first font, it
tries the next font. Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available. Note: If the
name of a font family is more than one word, it must be in quotation marks, like font-family:
"Times New Roman". More than one font family is specified in a comma-separated list:
Example
p {font-family:"Times New Roman", Times, serif;}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
8.7 The CSS Box Formatting Model

CSS allows you to specify formatting for containers (block-level elements) on your page: the
box. When you define formatting for block-level elements like tables, forms, paragraphs,
blockquotes, lists, images, etc—for purposes of CSS, you are defining formatting for a box.
CSS doesn’t care what is in the box; it just wants to format the box.
Box dimensions
The first thing the browser does is render the block-level element to determine what the
physical dimensions of the element are, given the font selected for the element, the contents of
the element, and any other internal formatting instructions supplied by the style sheet. Then the
browser looks at the element’s padding, the border, the outline, and the margins to determine
the space it actually requires on the page.
Padding
Is the distance between the outside edges of the element and the border and is defined in pixels (px)
Five properties associated with padding are:

1. padding, which gives the same padding on all sides
2. padding-top
3. padding-right
4. padding-bottom
5. padding-left
Border
Is a line or ridge and is defined in pixels
(px)
You can define a border in two different ways:
1. Either you can define the width, color, and style of the border by side for example:
blockquote {
border-width: 1pt 1pt 0pt 1pt; border-color:
black; border-style: solid;
}
This creates a black, solid border for the top, right, and left sides of the box.
2. You can define the width, color, and style for the box individually for example:
blockquote {
border-top: 1pt solid black; border-right: 1pt solid black;
border-left: 1pt solid black;
}
Valid styles for border are:
✦ none
✦ dotted
✦ dashed
✦ solid
✦ double
✦ groove
✦ ridge
✦ inset
✦ outset
Margin
Is the distance between the border and the outer box of the next container. Margins are created
with the margin, margin-top, margin-right, margin-bottom, and margin-left properties. They
work exactly the same as the padding.
Outline
An outline is a line that is drawn around elements (outside the borders) to make the element
"stand out".
The outline properties specify the style, color, and width of an outline.
Using the universal selector

The universal selector can be used to match any element in the document. The universal
selector is an asterisk (*). As an extreme example, you can use the universal selector to match
every tag in a document:
* { color: red; }
Every tag will have the color: red attribute applied to it.
Shorthand Expressions
The following styles can be shortened:
p.bordered { border-top-width: 1px;

border-top-style: solid; border-top-color:
black; border-right-width: 2px; border-
right-style: dashed; border-right-color: red;
border-bottom-width: 1px; border-bottom-
style: solid; border-bottom-color: black;
border-left-width: 2px; border-left-style:
dashed; border-left-color: red;
}
TO
p.bordered {
border-top: 1px solid black; border-right: 2px dashed red;
border-bottom: 1px solid black; border-left: 2px dashed
red;
}
The CSS list properties allow you to:
• Set different list item markers for ordered lists

• Set different list item markers for unordered lists
• Set an image as the list item marker
List
In HTML, there are two types of lists:
• unordered lists - the list items are marked with bullets

• ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers
The type of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
To specify an image as the list item marker, use the list-style-image property:
Example
ul {
list-style-image: url('sqpurple.gif');
}
8.8 Table Borders

To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:
8.9 Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table
and the th/td elements have separate borders.
To display a single border for the table, use the border-collapse property.
8.10 Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
8.11 Example
table {
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black; }
CSS Tables
8.12 Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to
50px:
Example table {
width:100%; }
th {
height:50px;
}
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
td {
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
td
{ height:5
0px;
vertical-
align:bott
om; }
Table Padding
To control the space between the border and content in a table, use the padding property on td
and th elements:
8.13 Example
td {
padding:15px;
}
Table Color
The example below specifies the color of the borders, and the text and background color of th
elements:
Example table, td,
th
{
border:1px solid green;
} th {
background-color:green; color:white;
}
Positioning
The CSS positioning properties allow you to position an element. It can also place an element
behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the positioning method.
There are four different positioning methods.

Static Positioning
HTML elements are positioned static by default. A static positioned element is always
positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled:
Example
p.pos_fixed
{ position:fixed;
top:30px;
right:5px;
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other
elements behave like the fixed positioned element does not exist. Fixed positioned
elements can overlap other elements.
Relative Positioning
A relative positioned element is positioned relative to its normal position.

Example h2.pos_left
{ position:relative; left:-
20px; }
h2.pos_right
{ position:relative; left:20px;
}
The content of relatively positioned elements can be moved and overlap other elements, but the
reserved space for the element is still preserved in the normal flow.
Example h2.pos_top
{ position:relative; top:-
50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned
elements.
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position
other than static. If no such element is found, the containing block is <html>:
Example h2
{ position:absolute;
left:100px; top:150px;
}
Absolutely positioned elements are removed from the normal flow. The document and other
elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in
front of, or behind, the others).
An element can have a positive or negative stack order:
Example
img {
position:absolute;
left:0px; top:0px; z-
index:-1;
}
8.14 CSS Float
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap
around it. Float is very often used for images, but it is also useful when working with layouts.
How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up
or down.
A floated element will move as far to the left or right as it can. Usually this means all the way
to the left or right of the containing element. The elements after the floating element will flow
around it. The elements before the floating element will not be affected. If an image is floated
to the right, a following text flows around it, to the left:
Example
img {
float:right;
}
Floating Elements Next to Each Other

If you place several floating elements after each other, they will float next to each other if there is
room. Here we have made an image gallery using the float property:
Example
.thumbnail
{ float:left;
width:110px;
height:90px;
margin:5px;
}
Turning off Float - Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not
allowed. Add a text line into the image gallery, using the clear property:
Example
.text_line
{ clear:both;
}
8.15 Three Ways to Insert CSS
There are three ways of inserting a style sheet:

• External style sheet
• Internal style sheet
• Inline style
External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link
to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
An external style sheet can be written in any text editor. The file should not contain any html tags.
Your style sheet should be saved with a .css extension. An example of a style sheet file is shown
below:
hr {color:sienna;} p {margin-
left:20px;}
body {background-image:url("images/back40.gif");}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"marginleft:20px") will work in IE, but not in Firefox or Opera.
Alternatively,
<style type="text/css"> @import url(mystyle.css)

</style>
Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css"> hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly! To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS property. The example shows how to
change the color and the left margin of a paragraph:
<p style="color:sienna; margin-left:20px">

This is a paragraph.
</p>
How to Create Horizontal Navigation With CSS3
We're going to look at the process of creating a horizontal menu with CSS. At its core, a CSS menu
is made up of lists, so creating one is our first step.
• Home
• About Us
• Services
• Contact Us
Here is the code for that manually:
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Looking at the list (above) you'll see that it's vertical and unadorned. We're going to fix that with
CSS and detail each step.
#menu { width: 550px;

height: 35px; font-size: 16px;
font-family: Tahoma, Geneva, sans-serif; font-weight:
bold; text-align: center; text-shadow: 3px 2px 3px
#333333; background-color: #8AD9FF;
border-radius: 8px;
}
Here's the first step of setting up the CSS menu code, by creating a wrapper for the text and
defining a background color. Two CSS3 effects have been applied: text-shadow and border-radius.
This is what our menu looks like so far.
This next bit of code removes the default padding from the list.
#menu ul { height: auto;

padding: 8px 0px;
margin:0px;
}
And here's a screenshot of the result so far.

Note the bullet points have been removed from the list. The padding has been set to 8px and this
will control the vertical positioning of the text in the next section.
In the step below we're going to change the positioning of the text so it fits into the menu and
runs horizontally (inline). We're also going to add some padding to the text for the horizontal
positioning. Here's the code:
#menu li { display: inline;

padding: 20px;
}
Here's what our menu looks like so far.
In the next step, we remove the text underline and change the color of the text to something
reminiscent of the text underline color. In addition, the padding is set to 8px in all areas. This
will control the position and size of the hover in the next section. Here's the code:
#menu a {
text-decoration: none; color: #00F;
padding: 8px 8px 8px 8px;
}
And here's the result.
The last step sets the hover effect for the text. Here's the code:
#menu a:hover { color: #F90;

background-color: #FFF;
}
And here's the final result with one of the menu items activated by mousing over it. This
finishes our simple horizonal menu, but it doesn't end here. There are many more things that
you can do, such as drop down navigation and using textures. If you want to use textures, you
can download free textures online or create them from scratch.
One of my favorite programs for texture creation is Corel PHOTO-PAINT, which has an
awesome texture creation component. You can work with photographic or computer
created textures to use in your layouts.
After that make some changes to the code.
#menu { width: 550px;

height: 35px; font-size:
16px;
font-family: Tahoma, Geneva, sans-serif; font-weight:
bold; text-align: center; text-shadow: 3px 2px 3px
#333333; background-image: url(texture.jpg);
background-repeat: no-repeat;
border-radius: 8px;
}
Note the addition of the image to the code and the use of background-repeat: no-repeat; to stop
the image from tiling.
8.15.1 Individual Assignment 2

Due 10 April 2016
Question:
Develop a functional informational website for a company of your choice that is
marketing a single class of related products. You must use CSS to style your pages and
you must design a horizontal menu bar with sub-lists or options.
Submission Requirements:
In the root of your home directory on the network drive you need to create a directory named
hct114assignment22016. Inside this directory, create a subdirectory named after your
registration number. Note these directory names must be specified in lowercase for example:
hct114assignment22016/r0020219
Save all your solutions in the subfolder that you created.

Internet Programming: HCT 114

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Internet Programming: HCT 114

Uploaded by

Copyright:

Available Formats

Internet Programming: HCT 114

1.1 What is the Internet?

1.1.1 Key Definitions:

1.1.2 World Wide Web (WWW)

The Worldwide Web is a system based on:

1.1.3 Web Pages

Many pages together make up a web site. A home page is the

1.1.5 Hypertext Transfer Protocol (HTTP)

A URL looks like this:

1.1.6 Web Browsers

1.1.7 Search Engines

2 Unit 2: Web development Tools

Figure 1.1. How HTTP Works

3 Unit 3: Scripting Languages

3.1 Client Side Scripting Languages

3.2 Server Side Scripting Languages

3.3 Comparison of Scripting Languages

3.4 Practical Lab Session 1:

4 Unit 4: Web Development Life Cycle/Process

4.1 Website Design Guidelines

1. Know who your audience will be

3. Design a Consistent Look

4. Build an intuitive structure

5. Good Contrast makes pages readable.

6. Provide Good Navigation Control.

7. Watch the clutter.

8. Be certain that everything has a purpose.

9. Have a Theme for your site.

10. Market your website

4.2 Things to Remember

4.3 Reasons for having a website

2. Provide unlimited information

5. Not limited by geographical areas

6. Attract a wide audience

7. Market to a targeted audience

4.4 Characteristics of a good website design

Search Engine Friendly

Compatible on Different Browser

4.5 Web Development Process

4.5.1 Defining your goals

4.5.2 Defining your audience

4.5.3 Competitive and market analysis

4.5.4 Requirements analysis

4.5.5 Designing the site structure

Figure 1: Schematic for a simple website

4.5.6 Using flow charts to define structure

4.5.7 Specifying content

4.5.8 Choosing a design theme

4.5.9 Constructing the site

4.5.10 Testing and evaluating the site

4.5.12 Tracking site usage and performance

4.5.13 Maintaining the site

5 Unit 5: HyperText Markup Language (HTML)

5.1 Markup languages

5.2 Evolution of Markup languages

5.3 HTML 5 Introduction

5.3.1 What is HTML?

• HTML stands for Hyper Text Markup Language

5.3.2 HTML5 Style Guide and Coding Conventions

5.3.2.1 Use Correct Document Type

5.3.2.2 Use Lower Case Element Names

5.3.2.3 Close All HTML Elements

5.3.2.4 Close Empty HTML Elements