Scribd
Upload
80 views

Emtech Module9a Week9 Lesson

This document provides an overview of creating basic web pages. It discusses HTML, the language used to define web page structure and content. It then outlines the steps to create a simple web page using Notepad, including writing HTML tags and elements and saving the file with a .html extension. Finally, it discusses using the online website builder Wix, which provides a drag-and-drop interface to design and publish a website without coding.

Uploaded by

Ma. Crisanta A. Antonio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

Emtech Module9a Week9 Lesson

This document provides an overview of creating basic web pages. It discusses HTML, the language used to define web page structure and content. It then outlines the steps to create a simple web page using Notepad, including writing HTML tags and elements and saving the file with a .html extension. Finally, it discusses using the online website builder Wix, which provides a drag-and-drop interface to design and publish a website without coding.

Uploaded by

Ma. Crisanta A. Antonio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

EMPOWERMENT TECHNOLOGY

THIRD QUARTER – MODULE 9A - Week 9

The module mainly focuses on: Lesson 12 – Web Page Designing


After going through this module, you are expected to:

1. define HTML;
2. create a basic web page using Notepad;
3. identify the HTML structure in creating a website; and
4. design a website using an online WYSIWYG platform.

BASIC WEB PAGE CREATION

The purpose of this module is to introduce the web-based application so that the learners can
understand more about the design of a website. The learners will also learn about the use of web-based
applications.

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
Page 1 of 4
EMPOWERMENT TECHNOLOGY
THIRD QUARTER – MODULE 9A - Week 9

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

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 using your notepad:

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

Page 2 of 4
EMPOWERMENT TECHNOLOGY
THIRD QUARTER – MODULE 9A - Week 9

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 drag and drop design and text boxes.

Page 3 of 4
EMPOWERMENT TECHNOLOGY
THIRD QUARTER – MODULE 9A - Week 9

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.

Page 4 of 4

You might also like