Scribd Logo
Upload

Welcome to Scribd!

  • g11 Lesson 1 Part1 Basic HTML

    Uploaded by

    Chester Navarro
    31 views13 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    31 views13 pages

    g11 Lesson 1 Part1 Basic HTML

    Uploaded by

    Chester Navarro

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    Web Development

    SHS Grade 11

    Presented by: Chen, LPT


    MIT-Cyber Security
    Objective
    Familiarize the different tools for creating web document.
    Define HTML.
    Know the function and use of a Web browser.
    Differentiate HTML4.01 from HTML5.
    Create html document.
    HTML5 (Hypertext Markup Language)

    HTML is the standard markup language for Web pages. It allows the user to create and structure
    sections, paragraphs, headings, links, and blockquotes for web pages and applications. It doesn’t have the ability
    to create dynamic functionality unlike programming languages such as c#, Java, etc..

    HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in Switzerland
    HTML5 (Hypertext Markup Language 5)

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
    Software Tools
    Before you start.

    1. Download and Install the following software.

    Web browsers
    Google Chrome or
    Mozilla Firefox

    These software programs are use to access


    the World Wide Web. Use any of this program
    For editing
    to view the html document.

    Note: You need the Internet to download the software above.


    You an also use Notepad application to edit html file.
    Editor and Browser
    Preview.
    Setting-up files and folder location
    Before you start coding, you need to create a folder
    where you could saved your project for the entire
    Lesson.

    1. Create a new folder in Desktop. Name the folder as “myweb”.


    Your first webpage.
    Run the Notepad or Notepad++. Type the code below.

    <!DOCTYPE html>
    <html> Important: Use the Notepad or Notepad++ to edit
    <head> a Web page document. Run the notepad and click the FILE
    <title>Page Title</title> Menu of the notepad then browse the location of
    </head> your Web page/html document project.
    <body>

    <h1>This is my first webpage</h1> To view the out, use the web browser like google chrome
    <p>Hello: My name is Sarah</p> or Firefox program.
    </body>
    </html>
    Saving html file.
    Creating .html file

    1. Save the file by clicking the FILE


    menu, click Save As
    2. Locate the folder that you have
    created with folder name
    “myweb”
    3. Save the file with filename
    mypage.html
    4. Make sure that the Save as
    type selected is All types(“*”)
    as it shown from the picture.
    5. Click Save.
    View the html doc using Web Browser
    Use google chrome or Mozilla firefox

    1. View the saved file in the folder


    myweb.
    2. You will see that the icon of
    html file is also the same with
    the icon of your default web
    browser.
    3. Double-click the webpage that
    you have created.
    Your first Webpage would look like this.
    Use google chrome or Mozilla firefox
    File name and File name extension

    A file name is the complete


    title of a file.
    e.g. mypage

    File name extension is the


    ending of a file that helps identify
    the type of file saved in your
    computer.

    Example: .html

    .html is the file name extension


    of a html document.
    Question
    How can I differentiate between HTML4.01 and HTML5?

    To check if a webpage is HTML5 or 4.01, check the doctype at the very


    top of the webpage in source code view.

    The HTML 5 doctype


    <!DOCTYPE html>

    The HTML 4.01


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    You might also like