Lecture 2 –Web Design

EDMORE TARAMBIWA
CUZ
 Objectives
• To introduce the concept of web design to the
students
• To outline the elements of web design
• To outline the characteristic of a good web
site
• To outline the web development process
• To introduce the concept of web authoring
 Definition Web Design
• Web design is the process of creating websites. It
encompasses several different aspects, including:
– webpage layout,
– content production, and
– graphic design.
• The terms web design and web development are
often used interchangeably, web design is
technically a subset of the broader category of
web development
• The term web design is normally used to describe
the design process relating to the front-end (client
side) design of a website including writing mark up
 Definition….
• Websites are created using a markup language called HTML. Web
designers build webpages using HTML tags that define the content and
metadata of each page. The layout and appearance of the elements
within a webpage are typically defined using CSS, or cascading style
sheets. Therefore, most websites include a combination of HTML and
CSS that defines how each page will appear in a browser.

• Some web designers prefer to hand code pages (typing HTML and CSS
from scratch), while others use a "WYSIWYG" editor like Adobe
Dreamweaver. This type of editor provides a visual interface for
designing the webpage layout and the software automatically generates
the corresponding HTML and CSS code. Another popular way to design
websites is with a content management system like WordPress or
Joomla. These services provide different website templates that can be
used as a starting point for a new website. Webmasters can then add
content and customize the layout using a web-based interface.
 Elements of Web Design
• Web design uses many of the same key visual elements as all types of design such as:
• Layout: This is the way the graphics, ads and text are arranged. In the web world, a key
goal is to help the view find the information they seek at a glance. This includes
maintaining the balance, consistency, and integrity of the design.
• Colour: The choice of colours depends on the purpose and clientele; it could be simple
black-and-white to multi-coloured design, conveying the personality of a person or the
brand of an organization, using web-safe colours.
• Graphics: Graphics can include logos, photos, clipart or icons, all of which enhance the
web design. For user friendliness, these need to be placed appropriately, working with
the colour and content of the web page, while not making it too congested or slow to
load.
• Fonts: The use of various fonts can enhance a website design. Most web browsers can
only read a select number of fonts, known as "web-safe fonts", so your designer will
generally work within this widely accepted group.
• Content: Content and design can work together to enhance the message of the site
through visuals and text. Written text should always be relevant and useful, so as not to
confuse the reader and to give them what they want so they will remain on the site.
Content should be optimized for search engines and be of a suitable length, incorporating
relevant keywords.
 Characteristics of a good web site
• 1. Mobile Compatibility
• As more and more people use their mobile phones to access the Internet, creating a mobile optimized
website has become a necessity.
• The first step is to check how your existing website appears on mobile. You can use Google mobile site
tester to find this out. If your website cannot currently be accessed on mobile, you can create a mobile
version of your website for free with the help of web-based mobile website builders.
• 2. Accessible to All Users
• A user-friendly website should also be accessible to everyone including blind, disabled or the elderly.
These users typically use screen-readers to access the Internet. The 508 website accessibility guidelines
highlights simple web design techniques that can be applied to make sure your website can be accessed
easily on-screen readers, making your website available to a larger audience.
• 3. Well Planned Information Architecture
• How information is organised and presented on your website is vital for good usability. However, it is
often neglected. It has become even more important today as websites offer a wide range of information
and resources to attract their target market. Plan your website sections and categories carefully and
present information in a way that it is easy for users to find. Always think from the perspective of your
users. This is particularly important if you offer a lot of content on your company's website.
• 4. Well-Formatted Content That Is Easy to Scan
• The average Internet user skims through the content on a web page instead of reading each and every
word from top to down. Users tend to scan through key parts of the page quickly to determine if it is
relevant to their needs.
• It is important to format your content with this in mind. Correct use of headings, sub-headings,
paragraphs, bullets or lists help to break up text, making it easy for readers to scan.
 Characteristics of a good web site
• 5. Fast Load Times
• Nothing is more annoying for website visitors than a website that takes long to load. In fact, slow speed is one of the main
reasons why visitors leave a website. Making sure your website loads within 4 to 6 seconds is important for good usability. It
also affects your search engine ranking.
• You can use free tool such as Pingdom to test the speed of your website and to get suggestion on what you can do to improve
your speed.
• I have found third-party website plugins and widgets including website tracking, social media, to be one of the most common
factors that affects website speed. Try to limit their use and only use the ones that are absolutely necessary.
• It is also one of the main reasons visitors leave your site. Customer expectations have changed significantly in recent years. A
typical customer will only wait for a few seconds for your page to load, after which they will most likely navigate away to a
competitor's site never to visit again.
• 6. Browser Consistency
• Browser compatibility can be easily overlooked. Even the websites of some of the most reputable companies suffer from this
problem due to neglect. This is bad for branding and has a negative affect on website usability.
• Although modern browsers have evolved and become more efficient, some inconsistencies still exist in how a website is
interpreted by different browsers. It is important to ensure your website appears and behaves consistently across all major
browsers such as Chrome, Internet Explorer, Firefox, Safari and Opera. Simple things like this set a professionally designed
website apart from the rest.
• 7. Effective Navigation
• Good navigation is one of the most important aspects of website usability. Simple HTML or JavaScript menus tend to work
best and appear consistent on all browsers and platforms.
• It is equally important for the navigation to be clutter-free. Try to limit the number of menu items as far as possible. A
drop-down menu or sub-navigation may work better on large site with many sections and pages.
• Advancement in DHTML, and JavaScript libraries such as Motools and Ajax also opened the doors to many new possibilities for
creating innovative navigation systems. Take a look at Mashable's example below.
• There is more to navigation than menu. Here are some other aspects to consider:
• Good search feature.
• Multiple ways to explore content e.g. top 10, most rates, most popular, etc.
• Custom 404 Page.
• Good Internal Linking
• Informative header and footer
 Characteristics of a good web site
• 8. Good Error Handling
• Good error handling and description on-screen messages are very important for good
usability. However it is often overlooked. Correct handling of errors at a code level ensures
the website is robust and free from bugs. Displaying the right error message improves the
user experience and overall usability.
• 9. Valid Mark-Up & Clean Code
• A website that adheres to the relevant web design best practices and standards is often
more robust and dependable. It also ensures the website will load faster and appear
consistent across browsers and devices. It also makes it easier to locate problems and
troubleshoot if the need arises.
• More information and mark-up validation tools can be found on W3C's website.
• 10. Contrasting Colour Scheme
• The right contrast between the background of the website and content is one of the most
basic yet most important web design principles that should never be overlooked. Good
contrast between background and text e.g. black text on a white background makes your
content legible and easy to read. Lack of contrast, on the other hand, makes it very difficult
for visitors to read your content.
• 11. Usable Forms
• Forms are a very important element on business websites. They allow users to interact with
the site. Forms are also very useful for generating leads for a business.
• To get the most out of your site, it is important to ensure the forms are easy to use and
accessible to everyone.
 Creating User-Friendly Web Design
• Besides the basic elements of web design that make a site beautiful and
visually compelling, a website must also always consider the end user.
User-friendliness can be achieved by paying attention to the following factors.
• Navigation: Site architecture, menus and other navigation tools in the web
design must be created with consideration of how users browse and search.
The goal is to help the user to move around the site with ease, efficiently
finding the information they require.
• Multimedia: Relevant video and audio stimuli in the design can help users to
grasp the information, developing understanding in an easy and quick manner.
This can encourage visitors to spend more time on the webpage.
• Compatibility: Design the webpage, to perform equally well on different
browsers and operating systems, to increase its viewing.
• Technology: Advancements in technology give designers the freedom to add
movement and innovation, allowing for web design that is always fresh,
dynamic and professional.
• Interactive: Increase active user participation and involvement, by adding
comment boxes and opinion polls in the design. Convert users from visitors to
clients with email forms and newsletter sign-ups.
 Web Design Process
• A Web development process is a documented
outline of the steps needed to be taken from
start to finish in order to complete a typical
Web design project. It divides and categorizes
the work and then breaks these high-level
sections into tasks and resources that can be
used as a road map for each project.
 Web Design Process
• The exact process will vary slightly from
designer to designer, but the basics are the
same.
– Information Gathering
– Planning
– Design
– Development
– Testing and Delivery
– Maintenance
 PHASE 1: INFORMATION GATHERING
• Certain things to consider are:
• Purpose
What is the purpose of the site? Do you want to provide information,
promote a service, sell a product… ?
• Goals
What do you hope to accomplish by building this web site? Two of the
more common goals are either to make money or share information.
• Target Audience
Is there a specific group of people that will help you reach your goals? It is
helpful to picture the “ideal” person you want to visit your web site.
Consider their age, sex or interests – this will later help determine the best
design style for your site.
• Content
What kind of information will the target audience be looking for on your
site? Are they looking for specific information, a particular product or
service, online ordering…?
 PHASE 2 - PLANNING
• The planning stage is arguably the most important, because what’s decided and mapped
here sets the stage for the entire project. This is also the stage that requires client
interaction and the accompanying attention to detail.
• Requirements analysis. This includes client goals, target audience, detailed feature
requests and as much relevant information as you can possibly gather. Even if the client
has carefully planned his or her website, don’t be afraid to offer useful suggestions from
your experience.
• Project charter. The project charter (or equivalent document) sums up the information
that has been gathered and agreed upon in the previous point. These documents are
typically concise and not overly technical, and they serve as a reference throughout the
project.
• Site map. A site map guides end users who are lost in the structure or need to find a
piece of information quickly. Rather than simply listing pages, including links and a
hierarchy of page organization is good practice.
• Contracts that define roles, copyright and financial points. This is a crucial element of
the documentation and should include payment terms, project closure clauses,
termination clauses, copyright ownership and timelines. Be careful to cover yourself
with this document, but be concise and efficient.
• Gain access to servers and build folder structure. Typical information to obtain and
validate includes FTP host, username and password; control panel log-in information;
database configuration; and any languages or frameworks currently installed.
• Determine required software and resources (stock photography, fonts, etc.). Beyond
determining any third-party media needs, identify where you may need to hire
sub-contractors and any additional software you may personally require. Add all of
these to the project’s budget, charging the client where necessary .
 PHASE 3 - DESIGN
• The design stage typically involves moving the information outlined in the planning stage
further into reality. The main deliverables are a documented site structure and, more
importantly, a visual representation. Upon completion of the design phase, the website
should more or less have taken shape, but for the absence of the content and special
features.
• Wireframe and design elements planning. This is where the visual layout of the website
begins to take shape. Using information gathered from the client in the planning phase,
begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful
during this phase, although many tools are online to aid as well.
• Mock-ups based on requirements analysis. Designing mock-ups in Photoshop allows for
relatively easy modification, it keeps the design elements organized in layers, and it primes
you for slicing and coding when the time later on.
• Review and approval cycle. A cycle of reviewing, tweaking and approving the mock-ups
often takes place until (ideally) both client and contractor are satisfied with the design. This
is the easiest time to make changes, not after the design has been coded.
• Slice and code valid XHTML/CSS It’s coding time. Slice the final Photoshop mock-up, and
write the HTML and CSS code for the basic design. Interactive elements and jQuery come
later: for now, just get the visuals together on screen, and be sure to validate all of the
code before moving on.
 PHASE 4 - DEVELOPMENT
• Development involves the bulk of the programming work, as well as loading content (whether by your
team or the client’s). Keep code organized and commented, and refer constantly to the planning details
as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing
as you go.
• Build development framework.. This is when unique requirements might force you to diverge from the
process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is
the time to implement it and get the basic engine up and running. Doing this early ensures that the
server can handle the installation and set-up smoothly.
• Code templates for each page type.. A website usually has several pages (e.g. home, general content,
blog post, form) that can be based on templates. Creating your own templates for this purpose is good
practice.
• Develop and test special features and interactivity.. Here’s where the fancy elements come into play. I
like to take care of this before adding the static content because the website now provides a relatively
clean and uncluttered workspace. Some developers like to get forms and validation up and running at
this stage as well.
• Fill with content.. Time for the boring part: loading all of the content provided by the client or writer.
Although mundane, don’t misstep here, because even the simplest of pages demand tight typography
and careful attention to detail.
• Test and verify links and functionality.. This is a good time for a full website review. Using your file
manager as a guide, walk through every single page you’ve created—everything from the home page to
the submission confirmation page—and make sure everything is in working order and that you haven’t
missed anything visually or functionally.
PHASE 5- TESTING AND DELIVERY/LAUNCH
• The purpose of the launch phase is to prepare the website for public viewing. This requires
final polishing of design elements, deep testing of interactivity and features and, most of
all, a consideration of the user experience. An important early step in this phase is to move
the website, if need be, to its permanent Web server. Testing in the production
environment is important because different servers can have different features and
unexpected behavior (e.g. different database host addresses).
• Polishing. Particularly if you’re not scrambling to meet the deadline, polishing a basically
completed design can make a big difference. Here, you can identify parts of the website
that could be improved in small ways. After all, you want to be as proud of this website as
the client is.
• Transfer to live server. This could mean transferring to a live Web server (although
hopefully you’ve been testing in the production environment), “unhiding” the website or
removing the “Under construction” page. Your last-minute review of the live website
happens now. Be sure the client knows about this stage, and be sensitive to timing if the
website is already popular.
• Testing. Run the website through the final diagnostics using the available tools: code
validators, broken-link checkers, website health checks, spell-checker and the like. You
want to find any mistakes yourself rather than hearing complaints from the client or an
end-user.
• Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry). Don’t
forget to check the website in multiple browsers one last time. Just because code is valid,
doesn’t mean it will sparkle with a crisp layout in IE 6.
 PHASE 6 –MAINTENANCE/POST LAUNCH
• Business re-enters the picture at this point as you take care of all the little tasks
related to closing the project. Packaging source files, providing instructions for
use and any required training occurs at this time. Always leave the client as
succinctly informed as possible, and try to predict any questions they may have.
Don’t leave the project with a closed door; communicate that you’re available
for future maintenance and are committed to ongoing support. If maintenance
charges haven’t already been shared, establish them now.
• Hand off to client. Be sure the client is satisfied with the product and that all
contractual obligations have been met (refer to the project charter). A closed
project should leave both you and the client satisfied, with no burned bridges.
• Provide documentation and source files. Provide documentation for the
website, such as a soft-copy site map and details on the framework and
languages used. This will prevent any surprises for the client later on, and it will
also be useful should they ever work with another Web developer.
• Project close, final documentation. Get the client to sign off on the last checks,
provide your contact information for support, and officially close the project.
Maintain a relationship with the client, though; checking in a month down the
road to make sure everything is going smoothly is often appreciated.
 Documenting The Process
• Documentation and storage are important to grasp. As ordinary as
these tasks can be, they certainly help when tax season rolls around or
when a small freelance venture begins to expand. You can never be too
disciplined when it comes to efficiency in work and time. You could
establish a standard document format and folder structure for all of
your clients, or maintain a list or archive of previous clients and project
files. You could employ anything from simple lists to all-out
small-business accounting practices.
• Create and retain two versions of your Web design process: One for
you or your team to use as a guide as you work on the back end, and
one to share with clients. The differences between the two should be
intrinsically clear: yours would be much more detailed and contain
technical resources to help with development; the client’s would be a
concise, non-technical map of the process from start to finish.
• Common tools for documenting the business process are a simple
Microsoft Word document.
Using The Process and Refining the Process

• Using: By now, you should understand what a process looks like, including
the details of each phase, and have some idea of how to construct your
particular Web design process. This is a great first step, but it’s still only a
first step! Don’t miss this next bit: knowing how a process can enhance
your overall business and how to use it when approaching and interacting
with clients.
• Refining: The process will be different for each designer, and for each
project. Develop a process for yourself, and identify whatever is useful to
you or your team. Only then will the process be truly useful. After all,
freelancers can serve drastically different target markets.
• Bulleted lists are well and good, but the process can be much more useful
and elaborate than that. Many of the resources, tools and links posted on
Web design blogs and Twitter feeds fit into different parts of the process.
An incredibly useful way to refine the process is to add resource links to
each phase, and to develop your own resources, such as branded
document templates.
 Introduction Web Authoring
• Web Authoring involves the following
– Client side scripting – Which involves the use of embedded
scripts, such as JavaScript, which are run at the client-side
in a web browser, to validate data on entry and design the
front end of the site.

– Server-side scripting is a technique used in web

development which involves employing scripts on a web
server which produce a response customized for each
user's (client's) request to the website. The alternative is
for the web server itself to deliver a static web page. Scripts
can be written in any of a number of server-side scripting
languages that are available such as PHP or Python.
 Reasons for going Online
1. NEW ECONOMY.
• Internet has created a new economy, which by its explosive growth and
sheer size already changed our perception of traditional way of doing
business. Companies like Amazon and Ebay have successfully created
domination on areas, where just few years ago traditional brick-and-mortar
companies were kings.
2. INTERNET IS A PERFECT VENUE FOR BUSINESS.
• In order to make a sale you need visitors to come to your shop. On the
Internet, your shop could be only a click away from your prospective
customers. With proper marketing your Internet storefront can have more
buyers than you ever can get in a brick and mortar shop.
3. COMPANY’S IMAGE.
• Whether you sell products or services online or not, in today’s world you
have to have a corporate presence on the Internet. Otherwise, as you must
have noticed that people simply don’t take your business seriously if you
tell them that your company does not have a website.
 Cont….

4. PROVIDE BETTER CUSTOMER SUPPORT.

• Customer accusation and retention is one of the key factors of
business value chain.
• Thanks to Internet technology, business can provide customer
support more effectively. This means better customer
satisfaction and increase of profitability.
5.MAKE INFORMATION MORE EASILY AVAILABLE TO CUSTOMERS.
• Just a couple of years ago, companies used to require days to
deliver products or services update information to their
customers.
• Things have changed since then. Today you can add or make any
changes to your company and product related content virtually
in a matter of couple of hours, publish on your site and share
with the whole world.
 Cont…
6. ABILITY TO DO BUSINESS 24 HOURS.
• How else you can continue making sales, while your stuffs are
sleeping!
• The biggest advantages of online shops are that they are open 24
hours a day year round. Thanks to Internet off time, when your
shop is generally closed, sales in some cases can be more than your
regular business hours.
7. GO GLOBAL
• Thanks to Internet you can instantly become a global player. In fact,
you don’t have to invest large sums of money to do this.
• There are literally hundreds of vertical and horizontal
e-marketplaces available on the net.
 Risks and threats of going Online
• It is worthy noting that though there are a lot of benefits for
going online, an e-commerce/ web site might as well fail.
Some of the possible failures include the following:
❑ Hacking.
❑ Credit card scams
❑ Hardware failure
❑ Unreliable shipping services
❑ Software errors
❑ Changing laws
 Creating/Designing Web Pages
• The word design in the context of a web application can mean many things.
• Its most popular usage probably refers to the visual and user interface design
of a web site.
• This aspect is important since, the visitor is often more impressed with how a
site looks and how easy it is to use than about which technologies and
techniques were used behind the scenes, or which OS the web server is
running.
• If the site is slow, hard to use, or easy to forget, it just doesn’t matter what
rocket science was used to create it.
• Unfortunately, this truth makes many inexperienced programmers
underestimate the importance of the invisible part of how the site is
implemented-the code, the database, and so on.
• The visual part of a site gets visitors interested to begin with, but it’s
functionality that makes them come back.
 Publishing information on the web:
HTML
The HyperText Mark-up Language (HTML)
• (X)HTML (HyperText Mark-up Language) is a
document layout and hyperlink specification
mark-up language used to format text and
information for the web; it is NOT a programming
language like C++ or Java.
• HTML code allows you to format a page with text and
images so you can display it on the World Wide Web.
• You don't need to have previous programming
knowledge, and you don't need special programs to
code HTML.
 HTML
Coding HTML Tags
• To properly code HTML you need to know how
your HTML TAGS are written.
• An HTML Tag is actually made up of TWO separate
tags with some stuff in between:
• An Opening Tag
• A Tag Attribute(s) to help define the Opening tag
• A Value for the Attribute(s)
• Text or an Image you want the tag to affect
• A Closing Tag
 CONT…
The Opening Tag
• The Opening Tag consists of an angular bracket < followed by a
tagname and then completed with a closing angular bracket >.
• Let's pretend the tagname of the tag we want to use is
EXAMPLE. We would code the EXAMPLE Opening Tag like this:
<EXAMPLE>
The Tag Attribute(s)
• A Tag Attribute lets you help define the tag it resides in more
precisely and allows you to specify more functions within the
same tag:
<EXAMPLE ATTRIBUTE=>
 CONT….

The Value
• Values can be a number or a word depending on which attribute you are
using:
<EXAMPLE ATTRIBUTE="VALUE"
• An Opening tag consists of a Tagname, Attribute(s) and a Value for each
Attribute(s). Now our Opening Tag is complete, so we can close it off with the
'other bracket':
<EXAMPLE ATTRIBUTE="VALUE">
The Text Or Image To Affect
• Now that we have the Opening Tag complete, we need to give the Opening
Tag something to actually work on. We do that by defining some text, or
perhaps a graphic WITHIN the Tag:
<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here.
 CONT….
The Closing Tag
• All that remains now is to finish it off by adding the Closing Tag. This tells the
browser to stop creating the effect we defined in the Opening Tag. A Closing
Tag consists of a bracket, a forward slash (not a backward slash), the tagname
and then the 'other bracket', like this:
</EXAMPLE>
• So, here is our complete example tag:
<EXAMPLE ATTRIBUTE="VALUE"> Text we want to affect here </EXAMPLE>
Combining Tags With Several Attributes
<FONT SIZE="4" COLOR=“red" FACE="Arial">testing the tags and
attributes</FONT>
 THE HTML STRUCTURE
Creating A Basic HTML Web Page

• Basically, every HTML document should have the

following four tags within its structure:

❖ html
❖ Head
❖ Title
❖ Body
 Cont…..
• There are 4 HTML Tags you need to learn to
create a basic page:
<HTML> and </HTML>
<HEAD> and </HEAD>
<TITLE> and </TITLE>
<BODY> and </BODY>
• These are the 4 tags that MUST appear on a
page in order for it be viewed correctly.
 HTML Tags(Taking a look)
The <HTML> Tag
• This set of Opening and Closing Tags tell your browser that the
document it is loading is an HTML document. The Opening
<HTML> Tag MUST appear at the very top of your document
since the rest of your document has to reside inside this Tag.
• The Closing </HTML> Tag MUST appear at the very bottom of
your document. This Tag tells the browser that there is no more
HTML document to display.
 Cont…
The <HEAD> Tag
• The HEAD portion of your page will display absolutely nothing in your
browser. It's function is to contain hidden internal information your browser
requires to display your page properly.
• Between the Opening <HEAD> Tag and the Closing </HEAD> you will
normally find the Title
The <TITLE> Tag
• The TITLE Tag set is entered INSIDE your HEAD Tag set, like this:
<HEAD>
<TITLE> Type the title for your page right here </TITLE>
</HEAD>
The TITLE Tag is probably the most confusing tag of all, to novice HTML coders. All this tag
does is display whatever text you enter as the TITLE in your browser's TITLE BAR. This
TITLE does NOT appear anywhere on your page!
 Cont….
The <BODY> Tag
• All of the text and images you put on your page must appear BETWEEN the
Opening and Closing <BODY> tags.
• There are several basic Attributes that you can use in the Opening <BODY>
Tag. E.g Background color, font style etc.
• Tags are often referred to as elements.
 Complete HTML Structure
• Here is the complete tag setup for a Basic Home Page that incorporates ALL
of the Tag sets we have discussed in this section:
<HTML>
<HEAD>
<TITLE>Type a title for your page here</TITLE>
</HEAD>
<BODY >
This is where all the wonderful stuff you want to show on your page goes.
</BODY>
</HTML>
 Summary on HTML Structure
• HTML uses tags (characters that sit inside angled brackets) to
give the information they surround special meaning.
• Tags are often referred to as elements.
• Tags usually come in pairs. The opening tag denotes the start of
a piece of content; the closing tag denotes the end.
• Opening tags can carry attributes, which tell us more about the
content of that element.
• Attributes require a name and a value.
• To learn HTML you need to know what tags are available for
you to use, what they do, and where they can go.
 CREATING AND FORMATTING TEXT USING TAGS

• Being able to create and format text the way you want it to
appear on a web page is the very essence of HTML. There are
several tags that will allow you to display your text.
• When creating a web page, you add tags (known as markup) to
the contents of the page. These tags provide extra meaning and
allow browsers to show users the appropriate structure for the
page.
• In this topic we focus on how to add markup to the text that
appears on your pages.
 HEADINGS
• HTML has six "levels" of headings:
• <h1> is used for main headings
• <h2> is used for subheadings
• If there are further sections under the subheadings then the <h3> element is
used, and so on...
• Browsers display the contents of headings at different sizes. The contents of
an <h1> element is the largest, and the contents of an <h6> element is the
smallest.

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
 Lab Work for the next 5 to 8 minutes

• Create a html document called headings with

title called My Academic Ladder
Show a list of headings of your academic Qualifications
starting with the highest down to the lowest
illustrating the 6 levels of html headings.
NB: We assume that we all have at least 6
qualifications.
 PARAGRAPHS <p>
• To create a paragraph, surround the words that make up the
paragraph with an opening <p>
tag and closing </p> tag.
• By default, a browser will show each paragraph on a new line
with some space between it and
any subsequent paragraphs.
E.G
<p>Text is easier to understand when it is split up into units of
text. For example, a book may have chapters. Chapters can have
subheadings. Under each heading there will be one or more
paragraphs.</p>
Example : Display the following paragraphs on a web page
 LINE BREAKS & HORIZONTAL RULES
• As you have already seen, the browser will automatically show each new
paragraph or heading on a new line. But if you wanted to add a line break
inside the middle of a paragraph you can use the line break tag <br />.
E.g
• <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling
space dust.</p>. So in order to create a new line you would add the following
code:
<br>

• To create a break between themes — such as a change of

topic in a book or a new scene in a play — you can add a
horizontal rule or line between sections using the <hr /> tag. E.g
<p>Venus is the only planet that rotates clockwise.</p>
<hr />
<p>Jupiter is bigger than all the other planets combined </p>
 Bold & Italic
• By enclosing words in the tags <b> and </b> we can make characters appear
bold.
E.G
<p>Inside a product description you might see some
<b>key features</b> in bold.</p>
• Or you may bold by doing the following:
<STRONG>This is the text that it applies to</STRONG>
• By enclosing words in the tags <i> and </i> we can make characters appear
italic.
E.G
<p>Captain Cook sailed to Australia on the
<i>Endeavour</i></p>
• The <i> element also represents a section of text that would be said in a
different way from surrounding content — such as technical terms.
• And another way to italicize is:
<EM>This is the text that it applies to</EM>. The <em> element indicates
emphasis.
 UNDERLINE AND TYPEWRITER
• By enclosing words in the tags <u> and </u> we can make characters appear
underlined.
And
By enclosing words in the tags <tt> and </tt> we can make characters appear in
type writer text.
• Or you may strikethrough text by using the following:
<STRIKE>This is the text that it applies to</STRIKE>
e.g The price was <STRIKE>$999 </STRIKE> but now its $890.
You may strikethrough text by using the following <s>
<s> $555</s>
 Exercise
INTRODUCTION TO WEB DESIGN
Workstation
• It is a type of computer used for engineering
• applications (CAD/CAM), desktop publishing, software development, and
other types of applications that require a moderate
• amount of computing power and relatively high quality graphics
capabilities.
• Workstations generally come with a large, high-resolution graphics screen,
at large amount of RAM, built-in network support, and a graphical user
interface.
Personal computer
• It can be defined as a small, relatively inexpensive computer designed for an
individual user. In price, personal computers range anywhere from a few
hundred pounds to over five thousand pounds.
 Centering Text
• When making your page, you may also want to
center your header or whatever else. In order to
center text you make use the following code:
<CENTER>This is the text that it applies to</CENTER>
 Class Exercise, Display this as it is
PERSONAL COMPUTER TYPES(center it)
Actual personal computers can be generally
classified by size and
chassis / case. The chassis or case is the metal
frame that serves as the structural support for
electronic components.
Every computer system requires at least one
chassis to house the circuit boards and wiring. The
chassis also contains slots for expansion boards.
If you want to insert more boards then its good.
The price has been reduced from $450
to
$400
 CHANGING FONT COLOR/FACE/SIZE

• Changing the font color, face and size are all relatively simple,
and are all contained within the same HTML function. In order
to just change the color, you can do the following:
<FONT COLOR="red">This is the text that the color applies
to</FONT>.
• Changing the face of a font is also very simple and useful. You
can change the face of the font to whatever font you wish,
but be careful, if a user does not have that font installed on
their computer, then it will just show the default font. You
can change the face by using the following code:
<FONT FACE="Webdings">This is the text that it applies
to</FONT>.
• You can change the font size using the size attribute.
<FONT SIZE="5">This is the text that it applies to</FONT>.
Using this method, you can change the font from 1 to 7.
1 is the smallest text size, and 7 is the largest.
 SUBSCRIPT AND SUPERSCRIPT
• The <sup> element is used to contain characters that
should be superscript such as the suffixes of dates such as 4th
e.g
<p>On the 4^th of September you will learn
about E=MC²</p>

• The <sub> element is used to contain characters that should

be subscript. It is commonly used with foot notes or chemical
formulas such as H20.
 Quotations & Abbreviations

• The <q> element is used for shorter quotes that sit

within a paragraph.
e.g
<p>As A.A. Milne said, <q>Some people talk to
animals. Not many listen though. That's the
problem.</q></p>.
• If you use an abbreviation or an acronym, then the
<abbr> element can be used
<p><abbr title="Professor">Prof</abbr> Stephen
Hawking is a theoretical physicist and
cosmologist.</p>
 CITATIONS
• When you are referencing a piece of work such as a
book, film or research paper, the <cite> element
can be used to indicate where the citation is from.
CHANGES TO CONTENT
• The <ins> element can be used to show content
that has been inserted into a document, while the
<del> element can show text that has been deleted
from it.
E.g
<p>It was the <del>worst</del> <ins>best</ins> idea
she had ever had.</p>
 Exercise; Display this on a page
• Dr Smith said “A portable computer that is small
enough to be held in one’s hand”. Although
extremely convenient to carry, handheld
computers have
not replaced notebook computers because of
their small keyboards and screens. All this staff you
will lean it on 7th of November 2018 at CUZ.
 SUMMARY ON TEXT

• HTML elements are used to describe the

structure of the page (e.g. headings,
subheadings, paragraphs).
• They also provide semantic information
(e.g. where emphasis should be placed, the
definition of any acronyms used, when given
text is a quotation).
 LISTS
• There are lots of occasions when we need to use lists.
HTML provides us with three different types:
• Ordered lists are lists where each item in the list is
numbered. For example, the list might be a set of
steps for a recipe that must be performed in order, or
a legal contract where each point needs to be
identified by a section number.
• Unordered lists are lists that begin with a bullet point
(rather than characters that indicate order).
• Definition lists are made up of a set of terms along
with the definitions for each of those terms
 ORDERED LISTS <ol>
• The ordered list is created with the <ol> element.
• Each item in the list is placed between an opening <li>
tag and a closing </li> tag.
• The li stands for list item.
e.g
<ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20 minutes until
tender</li>
</ol>
QN:Class Work; Using the ordered list , state at least 5
steps involved in cooking sadza, the heading should
be “Kubika Sadza”, The heading must be underlined ,
bold and centered & all the items should have font
color “blue”.
 UNORDERED LISTS <ul>
• The unordered list is created with the <ul>
element.
• Each item in the list is placed between an opening
<li> tag and a closing </li> tag.

• QN , Make a list of 10 Universities in Zimbabwe

using unordered list, write them in typewriter
format & include quotes.(5 marks) The heading(h1)
should be Universities in Zimbabwe, italice it &
center it.
 DEFINITION LISTS
• The definition list is created with the <dl> element
and usually consists of a series of terms and their
definitions.
• Inside the <dl> element you will usually see pairs of
<dt> and <dd> elements.
• <dt> This is used to contain the term being defined
(the definition term).
• <dd> This is used to contain the definition.
E.g
• <dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce</dd>
</dl>
Write an HTML code to produce the following Text (6 marks)
 SUMMARY ON LISTS

• There are three types of HTML lists:

ordered, unordered, and definition.
• Ordered lists use numbers.
• Unordered lists use bullets.
• Definition lists are used to define
terminology.
 NESTED LISTS
• You can put a second list inside an <li> element to
create a sublist or nested list.
• Browsers display nested lists indented further than
the parent list. In nested unordered lists,
the browser will usually change the style of the
bullet point too.
 Example
<ul>
<li>Mousses</li>
<li>Pastries
<ul>
<li>Croissant</li>
<li>Mille-feuille</li>
<li>Palmier</li>
<li>Profiterole</li>
</ul>
</li>
<li>Tarts</li>
</ul>
 LINKS
• Links are the defining feature of the web because
they allow you to move from one web page to
another ,enabling the very idea of browsing or
surfing.
• You will commonly come across the following types
of links:
• Links from one website to another.
• Links from one page to another on the same
website.
• Links from one part of a web page to another part
of the same page.
• Links that start up your email program and address
a new email to someone.
 WRITING LINKS
• Links are created using the <a> element which has
an attribute called href (Hypertext Reference)
• Users can click on anything between the opening
<a> tag and the closing </a> tag and will be taken
to the page specified in the href attribute
• You specify which page you want to link to using
the href attribute e.g
<a href =“http://www.cuz.ac.zw”> Click here </a>.
• To write good link text (Click here), you can
think of words people might use when searching
for the page that you are linking to.
(For example, rather than write "places to stay"
you could use something more specific such as
"hotels in New York.")
 Cont…
• Browsers show links in blue with an
underline by default.
 EXAMPLE

<p>Movie Reviews:
<ul>
<li><a href="http://www.empireonline.com">
Empire</a></li>
<li><a href="http://www.metacritic.com">
Metacritic</a></li>
<li><a href="http://www.rottentomatoes.com">
Rotten Tomatoes</a></li>
<li><a href="http://www.variety.com">
Variety</a></li>
</ul>
</p>
RESULT
 CONT….

• When you link to a different website, the value of

the href attribute will be the full web address for
the site, which is known as an absolute URL.
• URL stands for Uniform Resource Locator. Every
web page has its own URL.
• This is the web address that you would type into a
browser if you wanted to visit that specific page
 LINKING TO OTHER PAGES ON THE SAME SITE
• When you are linking to other pages within the
same site, you do not need to specify the
domain name in the URL.
• You can use a shorthand known as a relative URL.
• If all the pages of the site are in the same folder,
then the value of the href attribute is just the name
of the file.
• If you simply hit the space bar between two words,
only one space will show up.
• If you want several blank spaces between words,
you have to use the 'non-breaking space' special
character: &nbsp;
•
 EXAMPLE
<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</p>
Result for the above html code
 Opening Links in a New Window
• target
• If you want a link to open in a new window, you
can use the target attribute on the opening
<a> tag.
• The value of this attribute should be _blank.
• E.g
<a href="http://www.imdb.com" target="_blank">
Internet Movie Database</a> (opens in new
window)
 EMAIL LINKS:
• mailto:
• To create a link that starts up the user's email
program and addresses an email to a specified
email address, you use the <a> element.
• However, this time the value of the href attribute
starts with mailto: and is followed by the email
address you want the email to be sent to.
Example
<ahref="mailto:jon@example.org">Email Jon</a>
 IMAGES

• There are many reasons why you might want to add

an image to a web page:
• You might want to include a logo, photograph,
chart,illustration or a diagram.
• There are several things to consider when selecting
and preparing images for your site, but taking time
to get them right will make it look more attractive
and professional.
• A picture can say a thousand words, and great
images help make the difference between an
average-looking site and a really engaging one.
 6 Reasons Why Images are Important

• Articles with images get 94% more total views

• Including a Photo and a video in a press release increases
views by over 45%
• 60% of consumers are more likely to consider or contact a
business when an image shows up in local search results
• In an ecommerce site, 67% of consumers say the quality of a
product image is “very important” in selecting and purchasing
a product
• In an online store, customers think that the quality of a
products image is more important than product-specific
information
• Engagement (how much pple interact with the content ) rate
on Facebook for photos averages 0.37% where text only is
0.27% (this translates to a 37% higher level of engagement for
photos over text)
 What to remember about images

• Images should.
• Be relevant.
• Convey information.
• Convey the right mood.
• Be instantly recognisable.
• Fit the color palette.

NB: If you are building a site from scratch, it is

good practice to create a folder for all of the
images the site uses.
 ADDING IMAGES
<img>
• To add an image into the page you need to use an
<img> element.
• This is an empty element (which means there is no
closing tag). It must carry the following two
attributes:
src
• This tells the browser where it can find the image
file. This will usually be a relative URL
pointing to an image on your own site.
alt
• This provides a text description of the image which
describes the image if you cannot see it.The screen
reader software used by pple with visual
impairments should read this alt text.
 Cont….
• title
• You can also use the title attribute with the <img>
element to provide additional information about
the image.
• Most browsers will display the content of this
attribute when the user hovers over the image
 HEIGHT & WIDTH OF IMAGES
• You will also often see an <img> element use two
other attributes that specify its size:
height
• This specifies the height of the image in pixels.
width
• This specifies the width of the image in pixels.
• e.g
• <img src="images/quokka.jpg" alt="A family of
quokka" width="600" height="450" />
• You can put your image on different places in your
code:
• before a paragraph, inside the start of a
paragraph & in the middle of a paragraph.
You can also align it left, right, top , middle or bottom.
 TABLES
• There are several types of information that need to
be displayed in a grid or table.
• For example: sports results, stock reports, train
timetables.
• When representing information in a table, you
need to think in terms of a grid made up of rows
and columns (a bit like a spreadsheet).
• Each block in the grid is referred to as a table cell.
• In HTML a table is written out row by row.
 BASIC TABLE STRUCTURE
<table>
• The <table> element is used to create a
table. The contents of the table are written
out row by row.
<tr>
• You indicate the start of each row using the
opening <tr> tag.(The tr stands for table
row.)
• It is followed by one or more <td> elements
(one for each cell in that row).
• At the end of the row you use a closing
</tr> tag.
 Cont..
<td>
• Each cell of a table is represented using a <td>
element.
• (The td stands for table data.)
• At the end of each cell you use a closing </td> tag.
 Example
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
 TABLE HEADINGS
<th>
• The <th> element is used just like the <td> element
but its purpose is to represent the
heading for either a column or a row.
• (The th stands for table heading.)
 Example
<table>
<tr>
<th></th>
<th >Saturday</th>
<th >Sunday</th>
</tr>
<tr>
<th >Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th>Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>
 Spanning Columns
• Sometimes you may need the entries in a table to
stretch across more than one column.
• The colspan attribute can be used on a <th> or
<td> element and indicates how many columns
that cell should run across.

How do we write the HTML code for the above

table??
 Cont…..
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
 Spanning Rows
• You may also need entries in a table to stretch down across
more than one row.
• The rowspan attribute can be used on a <th> or <td>
element to indicate how many rows a cell should span down
the table.

Using rowspan write an HTML code that produces a table below (8

marks)
 Cont…
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
 Summary on Tables

• The <table> element is used to add tables to a web

page.
• A table is drawn out row by row. Each row is
created with the <tr> element.
• Inside each row there are a number of cells
represented by the <td> element (or <th> if it is a
header).
• You can make cells of a table span more than one
row or column using the rowspan and colspan
attributes.
 FORMS
• Traditionally, the term 'form' has referred
to a printed document that contains spaces
for you to fill in information.
• HTML borrows the concept of a form to
refer to different elements that allow you
to collect information from visitors to your
site.
 Types of Form Controls (ADDING TEXT)
TEXT INPUT:
• Text input (single-line);Used for a single line of text such as
email addresses and names.

PASSWORD INPUT:
• Like a single line text box but it masks the characters entered.

TEXT AREA (multi-line):

 MAKING CHOICES
RADIO BUTTONS:
• For use when a user must select one of a number of options.

CHECKBOXES:
• When a user can select and unselect one or more options.

DROP-DOWN BOXES:
• When a user must pick one of a number of options from a list.
 SUBMITTING FORMS & UPLOADING FILES
• On Submitting forms we have submit buttons:
SUBMIT BUTTONS:
• To submit data from your form to another web
page.

On uploading files we have file upload:

FILE UPLOAD:

A user fills in a form and then presses a button to

submit the information to the server.
 Form Structure
<form>
• Form controls live inside a <form> element. This element
should always carry the action attribute and will usually have
a method and id attribute too.
action
• Every <form> element requires an action attribute. Its value
is the URL for the page on the server that will receive the
information in the form when it is submitted.
method
• Forms can be sent using one of two methods: get or post.
With the get method, the values from the form are added to
the end of the URL specified in the action attribute.
• The get method is ideal for: short forms (such as search
boxes) or when you are just retrieving data from the web
server (not sending information that should be added to or
deleted from a database)
 Cont…
• With the post method the values are sent in what
are known as HTTP headers.
• As a rule of thumb you should use the post method
if your form:
• allows users to upload a file.
• is very long
• contains sensitive data (e.g. passwords)
• adds information to, or deletes information from, a
database.
• If the method attribute is not used, the form data
will be sent using the get method.
 Example
<form action="http://www.example.com/subscribe.php"
method="get">
<p>This is where the form controls will appear.
</p>
</form>
 TEXT INPUT
<input>
• The <input> element is used to create several
different form controls. The value of the type
attribute determines what kind of input they will
be creating.
type="text"
• When the type attribute has a value of text, it
creates a single-line text input.
name
• Each form control requires a name attribute.
• The value of this attribute identifies the form
control and is sent along with the information
they enter to the server.
 Example
• <form action="">
<p>Username:
<input type="text" name="username“/>
</p>
</form>
 PASSWORD INPUT
<input> type="password“
• When the type attribute has a value of password it
creates a text box that acts just like a single-line
text input, except the characters are blocked out.
• They are hidden in this way so that if someone is
looking over the user's shoulder, they cannot
see sensitive data such as passwords.
name
• The name attribute indicates the name of the
password input, which is sent to the server with
the password the user enters.
 Example
<form action="">
<p>Username:
<input type="text" name="username“ />
</p>
<p>Password:
<input type="password" name="password“
maxlength="30" />
</p>
</form>
 TEXT AREA

• The <textarea> element is used to create a

mutli-line text input.
• Unlike other input elements this is not an empty
element. It should therefore have an opening and
a closing tag.
• Any text that appears between the opening
<textarea> and closing </textarea> tags will
appear in the text box when the page loads.
 Example
e.g <form action="">
<p>What did you think of this gig?</p>
<textarea name="comments">Enter your
comments...</textarea>
</form>
 RADIO BUTTON
<input> type="radio“
• Radio buttons allow users to pick just one of a
number of options.
value
• The value of each of the buttons in a group should
be different (so that the server knows which option
the user has selected).
checked
• The checked attribute can be used to indicate
which value (if any) should be selected when
the page loads.
• The value of this attribute is checked.
 EXAMPLE
<form action="">
<p>Please select your favorite genre:
<br />
<input type="radio" name="genre" value="rock"
checked="checked" />Rock
<input type="radio" name="genre" value="pop"
/>Pop
<input type="radio" name="genre"
value="jazz"/>Jazz
</p>
</form>
 CHECK BOX
<input> type="checkbox“
• Checkboxes allow users to select (and unselect)
one or more options in answer to a question.

<form action="">
<p>Please select your favorite music service(s):
<br />
<input type="checkbox" name="service"
value="itunes" checked=“iTunes" /> iTunes
<input type="checkbox" name="service"
value="lastfm" /> Last.fm
<input type="checkbox" name="service"
value="spotify" /> Spotify
</p>
</form>
 DROP DOWN LIST BOX
<select>
• A drop down list box (also known as a select box)
allows users to select one option from a
drop down list.
• The <select> element is used to create a drop down
list box. It contains two or more <option> elements.
<option>
• The <option> element is used to specify the options
that the user can select from.
• The words between the opening <option> and
closing </option> tags will be shown to the user in
the drop down box.
 Example

<form action="">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
 File Input Box
<input>
• If you want to allow users to upload a file (for
example an image, video, mp3, or a PDF),
you will need to use a file input box.
type="file“
• This type of input creates a box that looks like a text
input followed by a browse button.
• When the user clicks on the browse button, a
window opens up that allows them to select a
file from their computer to be uploaded to the
website.
 Example

<form action="“>
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
 Submit Button
<input>
type="submit"
• The submit button is used to send a form to the
server.
name
• It can use a name attribute but it does not need to
have one.
value
• The value attribute is used to control the text that
appears on a button. It is a good idea to
specify the words you want to appear on a button
because the default value of buttons on some
browsers is ‘Submit query’ and this might not be
appropriate for all kinds of form.
 Example
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe"
value="Subscribe" />
</form>
Find an HTML code that produces the following buttons?

<form action="http://www.example.org/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg"
width="100" height="20" />
</form>
 Labelling Form Controls
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender"
value="m">
<label for="male">Male</label>
 Grouping Form Elements
<fieldset>
• You can group related form controls together
inside the <fieldset> element. This is
particularly helpful for longer forms.
• Most browsers will show the fieldset with a line
around the edge to show how they are related.
<legend>
• The <legend> element can come directly after the
opening <fieldset> tag and contains a
caption which helps identify the purpose of that
group of form controls.
 Cont…
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
 Search input
<input>
• If you want to create a single line text box for search queries,
HTML5 provides a special type of input for that purpose.
type="search"
• If you want to create a single line text box for search
queries.HTML5 provides a special search input.

<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>
 Assignment/Group Presentations
Using HTML, write a code that creates a
• Submit Button (GRP 1)
• Image Button (GRP 2)
• Grouping Form Elements (GRP 3)
• Email input (GRP 4)
• Date input & form validation. (GRP 5)
Show these forms on your website
 Group Test : 1hr 20 mins
• Create a Home page, put any information on that Home Page
including all the tags that we have covered so far, the Login Form
should be there.
• Include the following on your page (on top you other creativity)
1. Table with Name, Surname, Reg Num, Sex & Level of every grp
member.
2. Drop down list of all courses offered in BBM&IT from 1.1 to 4.2
3. Check box of all surnames of grp members.
4. Radio Button with Reg Numbers of all grp members.
5. Create another page called About Us; On that About Us page insert
images of all grp members and some information of each and very
member..
6. Put a Submit Button.
7. Create another page called Creativity (Do your own creativity on this
page) Link the three pages together.
8. Be as creative as possible and come up with an attractive Website
for you to earn more marks.
TOTAL 100 MARKS
 CASCADING STYLE SHEET (CSS)
• In this topic, we will look at how to make your web pages
more attractive, controlling the design of them using CSS.
• CSS allows you to create rules that specify how the content of
an element should appear.
• For example, you can specify that the background of the
page is cream, all paragraphs should appear in gray using the
Arial typeface, or that all level one headings should be in a
blue, italic, Times typeface.
• CSS works by associating rules with HTML elements. These
rules govern how the content of specified elements should be
displayed.
• A CSS rule contains two parts: a selector and a declaration.
p{
font-family: Arial;} declaration
}
NB: We have selected the paragraph (p)
 Cont…
• This rule indicates that all <p> elements should be
shown in the Arial typeface.
• Selectors indicate which element the rule applies
to. The same rule can apply to more than one
element if you separate the element names with
commas.
• Declarations indicate how the elements referred to
in the selector should be styled. Declarations are
split into two parts (a property and a value),and are
separated by a colon.
 CSS Properties
• CSS declarations sit inside curly brackets and each is made up
of two parts: a property and a value, separated by a colon.
• You can specify several properties in one declaration, each
separated by a semi-colon.
• h1, h2, h3 {
font-family: Arial;
color: yellow;}
Property Value
• This rule indicates that all <h1>, <h2> and <h3> elements
should be shown in the Arial typeface, in a yellow color.
• Properties indicate the aspects of the element you want to
change. For example, color, font, width, height and border.
• Values specify the settings you want to use for the chosen
properties. For example, if you want to specify a color
property then the value is the color you want the text in these
elements to be.
 Using External CSS
<link>
• The <link> element can be used in an HTML document to tell
the browser where to find the CSS file used to style the page.
It is an empty element (meaning it does
not need a closing tag), and it lives inside the <head>
element. It should use three attributes:
href
• This specifies the path to the CSS file (which is often placed in
a folder called css.
type
• This attribute specifies the type of document being linked to.
The value should be text/css.
rel
• This specifies the relationship between the HTML page and
the file it is linked to. The value should be stylesheet when
linking to a CSS file.
 Example
<!DOCTYPE html>
<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css" type="text/css” rel="stylesheet" />
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato varieties.</p>
</body>
</html>
styles.css code
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
h2 {
color: rgb(22,34,107);
}
 Using Internal CSS
<style>
• You can also include CSS rules within an HTML page by placing
them inside a <style> element, which usually sits inside the
<head> element of the page.
• The <style> element should use the type attribute to indicate
that the styles are specified in CSS. The value should be
text/css.
• When building a site with more than one page, you should
use an external CSS style sheet. This:
• Allows all pages to use the same style rules (rather than
repeating them in each page).
• Keeps the content separate from how the page looks.
• Means you can change the styles used across all pages
by altering just one file (rather than each individual
page).
 Example
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different potato
varieties. They are usually described as
early, second early and maincrop.</p>
</body>
</html>
 CSS Selectors
• Universal Selector
• Type Selector
• Class Selector
• ID Selector
• Child Selector
• Descendant Selector
• Adjacent Sibling Selector
• General Sibling Selector
 Database connection
• How to link a PHP form to a local host
database