Lesson 11 Web Page Designing

Lesson 11
WebPage
Designing
Daniel S. Loberiz
What’s New
3 things
WEBSIT that you
E think a
website
can do.
What is It
What does Web Page mean? HTML is Easy to Learn Online Website Builder - Easy WYSIWYG
and Use Use of Drag-And-Drop
Interface
What does Web Page
mean?
• A Web page is a document for the World Wide
Web that can be accessed and displayed on a
monitor or smartphone using any web
browser.
• Web pages are made up of Hypertext Markup
Language (HTML) and can be created and
modified by using basic application like
Notepad and professional HTML editors.
HTML is Easy to
Learn and Use
• HTML is easy to learn and understand. For someone who wants to learn
web development, HTML is the first and foremost computer language that
you need to take note but do not worry, it is not a sensitive case and as
simple as it is.
• It already has some tags that serve a specific purpose to make. One can
easily understand others’ code and make changes in it when required
without reading a whole book of a manual.
• Moreover, it does not throw any error or create any problem like other
programming languages do when the developer forgets to close the tags or
makes mistakes in coding.
HTML is Free
One of the biggest advantages of HTML is that it is free of all cost and there is
no need to purchase specific software for it to be used.
Online Website Builder - Easy Use of
Drag-And-Drop Interface
For those who love to make changes to

their website, a drag-and-drop interface
is convenient.
WYSIWYG
• WYSIWYG is the acronym for What You See Is

What You Get. This means that whatever you
will type, insert, draw, place, rearrange, or
whatever you do on a web page is what the
audience will see.
• Just like using the Microsoft Word, WYSIWYG
shows and prints whatever you will type on the
screen.
HTML
HTML
HTML stands for Hyper Text Markup Language
• HTML describes the structure of a web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by TAGS
• HTML TAGS label pieces of content such as “heading”, “paragraph”,
“table” and so on...
• Browsers do not display the HTML tags, but use them to render the
content of the page
Requirements in creating a web page
using the html
1. Editor – using the Notepad (source
code) in text and extension name
- .html or .htm.
2. Browser – responsible for reading
HTML instruction and displaying the
web page output. (ex. Internet
Explorer, Mozilla Firefox, Google
Chrome)
Creating a Website Using
Notepad
• Web pages can be created and modified using
professional HTML editors. However,
• in learning HTML, it is better to use a simple text editor
like Notepad.
• Follow the steps below to create your first web page with
Notepad.
Creating a Website Using Notepad
Step 1: Open Notepad
For Windows 8 or above computers:
a. Open the Start Screen (the window symbol at the bottom left on
your screen).
b. Search and open the Notepad
Step 2: Write the following HTML:
HTML DOCUMENT
• HTML document is divided into two main sections the head and the body.
• Each section contains specific information.
• The head section contains information about the documents like title, search
engine or keywords but is not visible to the reader.
• The body section contains the information or content that you want to
appear on the web page.
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the
Notepad menu.
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your browser (double click on the file,
or right-click - and choose "Open with").
Web Page Design Using Templates and
online WYSIWYG Platforms
Web Page Design
Web design is a similar process of creation, with the

intention of presenting the content on electronic web
pages, which the end-users can access through the
internet with the help of a web browser.
Often, sites will use website templates, which contain
all the basic elements of web design such as:
Web Page Design
1. Layout – It means that your design should align with a handful

of soothing adjectives; it should be simple, familiar, intuitive,
clean, and accessible. Use plenty of whitespace (or padding and
margins) to give the elements of your site room to breathe, and
use grid-based designs to keep design items organized and
orderly. Strong photography, icons, or graphics provide
supplementary information to your text but make sure the images
complement each other and the brand you’re looking
to represent.
Web Page Design
2. Colour - As for choosing a color scheme, paying

attention to your topic, brand or industry perspectives,
along with your target audience demographics will make
this a somewhat a painless process. Always look for ways
to narrow your scope from the roughly 7 million
discernable hues the eye can detect.
Web Page Design
3. Navigation - Your site’s navigation is not a space in which to be
creative.
First off, don’t fall into the trap of overly animated hover effects and
complex.
Navigational elements which can exist in a site’s header, body, and
footer simply serve to direct your visitors to the information they
desire as quickly as possible.
Web Page Design
4. Fonts - Your text should be easily readable, which generally means
body copy should be at least 16 pixels. Using a complementary font
is ideal for headings or accents, but don’t go beyond three typefaces
or unnecessary sizing adjustments. Of course, you’ll want to make
sure there’s plenty of contrast between your text and the site’s
background colors, which generally means a light color paired with a
dark tone. Also, avoid that piercing red-font-on-green-background
eyesore.
Web Page Design
5. Content - Your site visitors and potential customers want
information quickly such as, is your brand trustworthy?
Experienced? Is it capable of delivering topnotch
products and services? Given people’s short attention spans
and lightning-fast first impressions, communicating clearly is
critical, thus, information should be easy to read and digest.
Web Template
It is a pre-designed webpage on set of HTML webpages that anyone
can use to “plugin”.
Website templates allow anyone to setup a website.
A web design template is a catchall name for several types of
templates like;
1. HTML templates – website design templates represented with
HTML code only
2. PSD templates – templates which contain only .psd files, graphics
only, with nocode
3. Flash templates – website design templates developed with Flash
4. Flash intro templates – templates of an intro clip, developed with
Flash only and used to represent a company or/and a project.
WYSIWYG (What You See Is What You
Get) WEBSITE BUILDERS
SHOPIFY
SQUARESPACE WORDPRESS
WIX WEEBLY * Easy-touse
* Easy to * Near- infinite
* Easy dragand- * Easy to product
use customizability
Drop interface Use dashboard management
platform * thousands
* Limitless * Professional * Inventory
* Beautiful of available
customization - looking management
design for plugins and
options templates and POS
sites themes
integration
Creating a Website Using an Online Website Builder
Wix.com is a WYSIWYG cloud-based web
development platform that was first
developed and popularized by the Israeli
company also called Wix.
It allows users to create websites and
mobile sites through the use of online
drag-and-drop tools.
1. Create an account on Wix through their website
www.wix.com and click GET STARTED.
2. Select “Create a New Site” from the drop down
menu in the top right corner of the dashboard.
Once it’s clicked, Wix will ask what type of website
do you want to create. There are options for
everyone, from online
3. Customize your website with the Wix Editor.
Once you select a template, you can be able to
customize it in the Wix Editor using simple drag-and-
drop editing.
4. Update the Texts and Images
At this point, you can get to see a preview page of
your chosen template. This is where you can play
around with simple but brilliant editing features, like
the dragand- drop design and text boxes.
5. Personalize the Background
If small images are still not enough, you can also change your
template background.
The left-hand sidebar features a ‘Background’ button, which you can
use to click and change with ease.
6. Add Pages
Once you created a stunning homepage, there are few other more
pages you can add to ensure that your website has everything
visitors are looking for. For example, make sure to include a “Home”,
“About” and a “Contact Us” page.
7. Publish your Wix website
To make your website publicly accessible, you need to
publish it. To do so, click “Publish” from the top menu.
However, before Wix will publish your site, the last step in
the process is to create your own subdomain or connect a
custom domain.
For a serious website, you should connect your own custom
domain name, rather than using a Wix subdomain.

Lesson 11 Web Page Designing

Uploaded by

Copyright:

Available Formats

Lesson 11 Web Page Designing

Uploaded by

Document Information

Original Description:

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

Lesson 11 Web Page Designing

Uploaded by

Copyright:

Available Formats

Lesson 11

For those who love to make changes to

• WYSIWYG is the acronym for What You See Is

Web design is a similar process of creation, with the

1. Layout – It means that your design should align with a handful

2. Colour - As for choosing a color scheme, paying

You might also like