Web programming

Introduction to Web Design

• Web design is the visual aesthetics and page layout of a
website.
• It goes hand-in-hand with web development in the
creation of a static website or dynamic web application.
• Even if you don’t consider yourself a creative person, it’s
still a good idea to learn web design.
• No matter whether you want to make static websites or
dynamic web applications, design is an important part of
the process.
• The design is the first thing people notice when they
arrive on a website, and if it’s not good enough, they’ll
leave. You don’t want to create a site that frustrates
people, do you?
 Introduction to Web Design
• The web design process starts with a visual concept,
which you could sketch by hand or with software like
Photoshop.
• Then, you use HTML and CSS to build the website.
• HTML and CSS are the codes for writing web pages.
• HTML handles the basic structure and ‘bones’ of your
page, while CSS handles the style and appearance
• Usually, it is not feasible and it is considered luxury to
have one person working on the design, second working
on the content definition, third makes that in the code,
and fourth administrate it
• This is only in theory
 Introduction to Web Design
• In practice, in best case scenario, there is a designer
• Designer usually creates templates in psd format (and in
slang this is called design)
• After that, web designer/programmer turns the design
into HTML and CSS code, defines content of the web
site, pages and links between them, and usually
administrate the web site too
• Again, in best case scenario, if we don’t get psd format
from designer, but elementary HTML or even rarer CSS
code, web programmer needs to optimize it for different
browsers, create physical pages with content, maintain
it…
• All those are 20% of tasks of web programmer
 Introduction to Web Design
• Key role of web programmer is to write additional code,
in large number of client and server side languages,
which are used to manage content and enable
interaction with users
– Galleries
– Banners
– Images
– Flash animations…
• However, everything must start from HTML
 Introduction to Web Design
• To build websites, you should know about HTML
• HyperText Markup Language
• HTML is the fundamental technology used to define the
structure of a webpage
• HTML is used to specify whether your web content
should be recognized as a paragraph, list, heading, link,
image, multimedia player, form, or one of many other
available elements or even a new element that you
define
• HTML is a text file, which can be edited in any text editor
(Notepad, Notepad++ …)
• Web browser gets the HTML from web server and use it
to graphically show the site content
 Introduction to Web Design
• HTML has evolved and expanded over the years,
parallel to the development of technology
• Current version is HTML 5
• With the development of dynamic HTML (DHTML), it is
unimaginable to create pages without dynamic content
and advanced components such script language code
• Almost all script languages are implemented in HTML,
including PHP, ASP etc.
• HTML is the only one capable to display graphics,
links, lists, audio… Nevermind the higher level
programing languages, there is no web site
without HTML
 Introduction to Web Design
• HTML code is available and visible for every site on the
Internet
• When the site content is displayed in browser, it is
possible to see background code which defines content
• In most browser, it can be done by right click then View
page source
 Introduction to Web Design
• How does it all work?
• HTML is universal code for all browsers
• Web browser interprets HTML and creates user web
page with text, images, video and audio content
depending of the HTML code
• For every other object which is not HTML code (like
image, flash, video etc.) it requests it from the web
server
• Web page is generally located on the web server
 Introduction to Web Design
• Web server and web browser communicate with HTTP
(HiperText Transport Protocol)
• User enters URL address in web browser, and after
click, browser uses HTTP to establish communication
with web server and concrete folder on the server where
the site is located
• Server sends web page (HTML code) and browser
interprets it
• For any object other than text, browser contacts server
for each one of them
 Introduction to Web Design
• Upon receiving files, web browser displays the page in
the way it was defined in the HTML code
• Browser reads every line of code one by one, and
generate the appearance of the page
• Although the HTML code is the same on the server, it
will not be interpreted in the same way in different
browsers
 Introduction to Web Design
• How to start work on the web site?
• It is required to plan and design complete site, including:
– Page organization (divs)
– Design of all individual parts
– Individual pages
– Navigation between pages
– Content of every page
 Introduction to Web Design
• Page organization
• It is needed to define organizational structure of the site,
which is the first step toward creating template
• Areas (divs) should be defined, to precisely determine
where will be header, logo, menu, content etc.
• After that, divs are grouped in larger divs (if needed), to
ensure stability of displayed content
Introduction to Web Design
 Introduction to Web Design
• Design of the page includes the following activities:
• Defining page background (color or images)
• Backgrounds for each individual block (div) in
organization of the site
• Font
• Color of the letters
• Styles and paragraphs for displaying text
• Images…
 Introduction to Web Design
• Individual pages
• Web site is a set of web pages
• Before implementation, it is required to know which
pages of the web site exist and their names, which is
needed for the code and navigation
• For each page it is needed to define its organization
• It is not good to have a lot of different organizations in
one web site – recommended max 2, home page and
other pages of the site
• Example for pages: start, about us, contact, location,
products, price list, offer,…
 Introduction to Web Design
• Navigation
• When all pages are known, it is needed to define
navigation
• Navigation is the way of connecting pages with links
• It should be in line with previously defined shapes of
navigation
• It can be vertical or horizontal, and in slang it is called
menu
• With classic HTML, navigation is created manually, it is
not site centralized, but rather a part of each individual
page, which is bad for later changes (adding or removing
pages)
 Introduction to Web Design
• Content of individual pages
• Once we have defined organization of each page, we
must define their content as well
• This should be done before writing code, as the code
should be written based on the content
• Content is the most important part of each site
• Important for user, but also for SEO (adapting content to
web search engines), so we need to carefully select
names, structures, images, attributes, tags etc.
• If this is not planned and done in advanced, but during
the writing of HTML code, such site is very hard to
optimize for SEO
 Introduction to Web Design
• First page
• After completion of previous steps, first page of the web
site is created
• Although it is called first page, start page or home, it is
required to name it index.html
• If the page exists, and it is physically stored on the web
server on the location www.something.com, then when
we enter www.something.com in browser it is
automatically loaded
• We can request it in browser with the full page name:
www.something.com/index.html
• Every other page must be addressed individually:
www.something.com/other_page.html
 Introduction to Web Design
• index.html
• This page contains everything which is visible, but also
invisible for the user
• Part which user does not see is intended for web server
and web search engines
• Page should start with

• After that there is user content written in HTML code,

with or without scripts.
 Introduction to Web Design
• Page content
• When index page is created, it is assumed that the
structure of the site is known, together with number of
pages, their organization and content
• It is recommended to first create HTML code for
index.html page, which will be used just for content
organization, together with appropriate meta tags and
navigation part – this is considered template for the site
• This page should be saved separately, and copied as
starting material for every other page
• For every page then we should define actual content