Scribd
Upload
12 views

Lesson 7

The document provides instructions for creating basic web pages using HTML and Notepad or online website builders like Wix. It explains that a web page is an HTML document that can be viewed in a browser. HTML uses tags to structure content and is easy to learn. The document then gives step-by-step directions for making a simple web page with Notepad, including opening Notepad, adding HTML tags, and saving and viewing the page. It also outlines the process for creating a website using Wix's drag-and-drop interface, including customizing templates, adding pages, and publishing the site.

Uploaded by

Ivan Jecie Basa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Lesson 7

The document provides instructions for creating basic web pages using HTML and Notepad or online website builders like Wix. It explains that a web page is an HTML document that can be viewed in a browser. HTML uses tags to structure content and is easy to learn. The document then gives step-by-step directions for making a simple web page with Notepad, including opening Notepad, adding HTML tags, and saving and viewing the page. It also outlines the process for creating a website using Wix's drag-and-drop interface, including customizing templates, adding pages, and publishing the site.

Uploaded by

Ivan Jecie Basa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Lesson 7: Web

Page Designing
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 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.
Step 1: Open Notepad HTML DOCUMENT

<html>
<head>
<title> My First Website </title>
</head>
<body>
<h1> Hello World </h1> </body>

</html>

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 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.

Name the file "MyfirstWebsite.html"

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").

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.

For this topic, you will create your own personal


website that focuses on your passion or hobby.
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 stores to personal portfolios.

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.

You might also like