Scribd Logo
Upload

Welcome to Scribd!

  • 59 views

    Module 9 Web Page Designing

    Uploaded by

    Rich Allen Mier Uy
    A technology Essay

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Module 9 Web Page Designing

    Uploaded by

    Rich Allen Mier Uy
    59 views11 pages
    A technology Essay

    Original Title

    Module-9-Web-Page-Designing

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    A technology Essay

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    59 views11 pages

    Module 9 Web Page Designing

    Uploaded by

    Rich Allen Mier Uy
    A technology Essay

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 11

    Empowerment

    Technologies
    Module 9:
    Web Page Designing
    Lesson

    2 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’s In

    Assessing Web design

    Directions: In this activity, you will study a given Web page to assess how the
    developer applied concepts of Website design. After studying, write your
    answers to the questions below on your answer sheet.
    NOTE: The questions posed in this activity are intended to help
    understand the discussion.

    1. Does the design of the Web page deliver an appropriate message to users?
    _____________________________________________________________________

    2. What message do you think it delivers?


    _____________________________________________________________________

    3. The main goal in Web design is giving users what they want, instead of what
    the developer thinks they want. Do you think this page achieves that goal?
    Why or why not?
    _____________________________________________________________________
    What’s New

    Directions: Write down 3 things that you think a website can do.

    1
    WEBSITE 2
    3

    What is It

    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

    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>
    <head>
    <title> My First Website </title>
    </head>
    <body>
    <h1> Hello World </h1>
    </body>
    </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 drag-
    and-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.

    What’s More

    Activity 1.1 Adding Content to Your Website


    It is now the time to add the content to your website. Here are some site pages and
    elements that you should add:
    1. Home Page Content – entice your visitors with contents like photos of your
    hobby or interest plus text content.
    2. About Me/Contact – add a page containing a form element which allows
    visitors to email you. You may also add links to your social media accounts.
    3. Photo Gallery – a page that contains photos from your social media
    accounts.
    4. Community – a page that contains links to ten of your classmates’ websites
    including a short description.
    What I Have Learned

    Directions: Complete each sentence with information from the module. Write your
    answer on a separate sheet of paper.
    1. HTML is short for __________ and is the language of the World Wide Web.
    2. HTML web pages can be read and rendered by _________.
    3. Tags and texts that are directly displayed on the page are written in _____
    section.
    4. __________ site is a creation tool which enables you to create web pages directly
    on the web host's computer with drag-and drop function.
    5. __________ is a single online document that contains information.
    Assessment

    Directions: Choose the best answer for each question. Write the letter of your
    answer on a separate sheet.
    1. What section that holds the most of the page's information or content?
    a. HTML c. TITLE
    b. BODY d. HEAD
    2. What application used to convert HTML codes and display the webpage
    output?
    a. Browser c. Internet Explorer
    b. Text Editor d. Source
    3. What web page editors works on a ____ principle.
    a. www c. WYSIWYG
    b. HTML d. Browser
    4. What is the name of the address of the hypertext documents?
    a. URL c. domain name
    b. Server d. Web address
    5. What are shared on the Internet and are called as Web pages?
    a. Programs c. Hypertext documents
    b. Cables d. None
    6. Which tag is used to display text in title bar of a web document?
    a. Body tag c. Meta Tag
    b. Title Tag d. Head Tag
    7. What computer language that instructs the browser on how to display the
    hypertext, and adds pictures to the document is __?
    a. Browser c. Internet Explorer
    b. Text Editor d. HTML
    8. What does HTML stand for?
    a. Hypertext Markup Language c. Hyperlinks and Text Markup Language
    b. Home Tool Markup Language d. None of the above
    9. What is the correct sequence of HTML tags for starting a webpage?
    a. HTML, HEAD, BODY c. HTML, TITLE, BODY
    b. HTML, HEAD, TITLE d. HTML, TITLE, HEAD
    10. What does markup tags tell the web browser?
    a. How to organize the page c. How to display message box on page
    b. How to display the page d. None of these
    11. Which of the following tags is the start of web pages?
    a. <Body> c. <HTML>
    b. <Title> d. <Form>
    12. Which one of these is the basic web-designing program?
    a. Dreamweaver c. Notepad++
    b. Wix d. Notepad
    13. Which website tool enables you to create Web pages directly on the online
    editor and automatically update the site, without the need to upload files?
    a. An online site builder c. HTML
    b. An offline site builder d. FTP content autoloader
    14. Which of the following statements is false?
    a. You can make a website without using HTML
    b. You can make a website without using PHP
    c. You can make a website without using CSS
    d. You can make a website without using Javascript
    15. Which of the following statements is true
    a. It shouldn’t just be concerned about the looks but also about user
    interface
    b. Usability is very important in web design
    c. a and b
    d. None of the above

    You might also like