PENIEL INTEGRATED CHRISTIAN ACADEMY OF RIZAL, INC.
COMPUTER CURRICULUM MAP
GRADE 8 S.Y 2016-2017

FIRST QUARTER | SECOND QUARTER | THIRD QUARTER | FOURTH QUARTER | BASIC WEB CONCEPTS * Web Design Terminology * History of the Internet * History of the World Wide Web * Accessing the Web * Web Browsers * Web Browsers Elements * Kinds of the Web Browsers * Basic Web Design Principles * Essentials Elements of the Web Contents * Planning Your Web SiteINTRODUCTION TO HTML * What is HTML? * Exploring HTML Text Editors * What is New in HTML5? * Basic Differences between HTML4 and HTML5? * Browser Support for HTML5 * Writing HTML Files * Starting HTML with Notepad * The Notepad Window * What is DocType? * What is Meta? * Attributes for <meta> * Viewing HTML Code in a BrowserTAGS AND ATTRIBUTES * What is Tag? * Structure of Tag * Container and Empty Tags * HTML Tags * New Structural Tags in HTML5 * New Media Elements in HTML5 * New Canvas and Form Elements in HTML5 * Removed Elements * What are Attributes * Common Attributes * Outline Algorithm * Basic Page StructureHEAD AND BODY TAGS * What are Head Tags? * What are Body Tags? * Attributes for <body> * What are Headings? * Attributes for <h1> to <h6> * Grouping HeadingsCREATING AN HTML DOCUMENT * Creating an HTML Document * Saving an HTML Document * Viewing an HTML Page * Using Header * Using Navigation * Creating an Article * Creating a Section * Using Footer * Creating a Generic Container * Printing a Web Page and HTML File * Exiting the Web Page and HTML FilePARAGRAPHS * Creating a New Paragraph * Aligning a Paragraph * Attributes for <p> * Quoting Passages * Adding Line Breaks * Creating Multiple Line Breaks * Adding Horizontal Rule * Attributes for <hr> * Modifying a Horizontal Rule * Ordered List * Unordered List * Specifying Time * Meter Element * Definition List * Preformatting Text * Progress Element * Nesting Tags * Nesting Lists * Adding Invisible CommentsBACKGROUND, TEXT, VIDEO AND AUDIO * Changing the Background Color of a Page * Highlighting Text * Adding Video * HTML video Tags * Embedding a Video File * Adding Audio * HTML5 Audio Tags * Linking to Audio or Video Files * Font * Speciying Font Style * Tags Commonly Used for Font Formatting * Special Character EntitlesIMAGES * Preparing the Image or Graphics * Inserting Graphics into a Web Page * Attributes for <img> * Specifying the background Image of a Page * Using Graphics as Hyperlink * Creating Animated GIF FilesTABLES * What is a Table * Creating a Table * Modifying a Table * Attributes for <tr> * Modifying Table Data * Attributes for <td> * Merging Cells Horizontally * Merging Cells Vertically * Merging Cells Horizontally and Vertically * Nesting Tables * Creating a Table with Invisible Border * Adding an Image to a tableHYPERLINKS * What is a Hyperlink? * Three types of Hyperlinks * Creating a Link from one page to another * Attribute for <a> * Target Attribute * Creating a Email Link * Linking to a Page on a Different Web Site * Using Graphics as LinksFORMS * What are Forms? * Attributes for <form> * Input Element * Attributes for <input> * New Input Types in HTML5 * Creating a Textbox * Creating a Large Text Area * Attributes for <textarea> * Creating Radio Buttons * Creating Check Boxes * Creating Drop-down Menus * Creating an Email Feedback Form * Adding a Submit Button * Adding a Reset Button | INTRODUCTION TO CSS * What is CSS * CSS Structure * Capabilities of CSS * Advantages of Using CSS * Three Kinds of CSS * CSS2 and CSS3 * Inline STyles * Embedded Styles * Linked Styles * Creating an external CSS File * Linking CSS File to HTML FileSELECTORS, DIV, SPAN, LINK * Display Property * Kinds of Elements in CSS * Property for Display * DIV Tag * Span Tag * Span and DIV * What are classes? * Class Selector * ID Selector * Multiple Selectors * Grouping Selectors * Nesting Selectors * Setting Dimension * Property for Dimension * Pseudo-classes and LinksFORMATTING TEXT WITH CSS * Typography * Font Property * Text Property * CSS Styles * Creating a Bold Text * Creating an Italic Text * Indenting Text * Changing the Font * Changing the Font Size * Changing the Text case * Changing Text Alignment * Changing Line Spacing * Changing Color of Text * CSS Text Color Property * Color Hex Values * Adding Background Color to a Text * Adding a Border * Creating Lists * Pseudo-elementsFORMATTING LAYOUT WITH CSS * Box Model * Element Positioning * CSS Position Property * Offset * CSS Offset property * Float * Wrapping Text around an Element * Background * CSS Background Color Property * CSS Background Image Property * Adding Background Color * Adding background Image * Background Repeat * Background Position * Background Attachment * Setting MarginsFORMATTING BORDER AND TABLE * Adding a Border * Border Width * CSS Border Color Property * Border Style * Setting Width and Height * Padding * CSS Padding Property * Table Background * Table Style * Table Layout | INTRODUCTION TO DREAMWEAVER * What is Dreamweaver? * Launching Dreamweaver * Exploring the Dreamweaver Interface * Dreamweaver screen elements * Document toolbar * Menu Bar * Split View * Design View * Code View * Control panel Arrangement * Opening or Closing a Panel * Insert Panel * Property Inspector * Status Bar * Context Menu * Closing DreamweaverSETTING UP A WEBSITE * What is a Web Site? * What is a Web page? * Ways of Creating New Files in Dreamweaver * Ways of Creating New files in Dreamweaver * Ways in Designing a Web page * DocType * Dreamweaver Block Level and Inline Level Elements * Defining a New Web Site * Creating a New Web page * Adding a Title to a Web Page * Saving a Web page * Previewing a Web page in a BrowserWORKING WITH TEXTS * Transferring Text into Dreamweaver * Methods of Transferring Documents from MS Word to Dreamweaver * Entering Text * Creating a Heading * Creating a Paragraph * Aligning a Paragraph * Creating a Line Break * Indenting Paragraphs * Working with Lists * Creating Unordered and Ordered Lists * Changing the Style of Unordered List * Inserting Special characters * Changing Font Face * Changing the Font Size * Changing the Font Color * Changing Font and Colors of the Entire Page * Copying text from another DocumentWORKING WITH IMAGES * Managing images in Dreamweaver * Image Types * Image Accessibility Preferences * Four methods of placing images into Pages * Inserting an Image into a Web page * Adding a border around an Image * Wrapping text around an Image * Adding Space to the Left, Right, Top, Bottom of an Image * Resizing an image * Cropping an Image * Adding a Background Image * Changing the background Color * Changing the Text Color * Creating a Rollover image * Inserting a Flash File * Inserting a Video from YouTube * Inserting a Spry Menu BarWORKING WITH HYPERLINKS * Three Link Types * Linking to another Web Site or a Page in your Web Site * Changing the Color of Links * Using an image as a link * Creating an Email LinkWORKING WITH TABLES * Inserting a table into a Web page * Editing or removing the Table Border * Changing the Alignment of Content in a Cell * Inserting Text into a Table * Inserting an Image into a table * Adjusting the Width and height of the cell * Changing the background Color of a table * Changing the Cell padding in a Table * Changing the Cell Spacing in a Table * Inserting Row or Column * Deleting Row and Column * Merging cells in a Table * Splitting cells in a tableWORKING WITH FRAMES * Opening the Frames Panel * Dividing a Page into Frames * Changing the size of a frame * Setting the frame Attributes * Inserting Image or Text in a frame * Deleting a frame Document | INTRODUCTION TO JAVASCRIPT * What is JavaScript * What can JavaScript Do? * Features of JavaScript * Disadvantages of JavaScript * How to Start Using JavaScript * Object and its Commonly Used Properties and Methods * Where Can You Place Scripts? * What are the JavaScript Guidelines?EVENTS AND POPUP BOXES * What are the Events? * Table of Event Triggers * What are Popup Boxes? * Alert Box * User-Input Prompt Box * Confirm BoxVARIUABLES AND COMPARISON STATEMENTS * What is a Variable? * Table of Arithmetic Operators * What are Comparison Statements? * Table of Logical OperatorsFUNCTIONS AND LOOPS * What is a Function? * The Return Statement * What is a Loop? * For Loop * While Loop * Do-While Loop * For-in Loop * The break and continue StatementsSTRING AND ARRAY OBJECTS * What is a String? * Table of Properties for the String Object * Table of Methods for the String Object * What is an Array? * Table of Properties for the Array Object * Table of Methods for the Array ObjectDATE, TIME AND MATH OBJECTS * What is a Date Object * Table of Methods for the Date Object * Insert Simple Time Stamps * JavaScript Timing * The setTimeout * What is Math Object * Table of Properties for math Object * Table of Methods for the Math ObjectBROWSER DETECTION, COOKIES AND ERRORS * What is Browser Detection? * What is a Cookie * Why do you need to detect Errors? * Cause of ErrorsXHTML * What is XHTML? * What is XML? * Difference between XHTML and HTML * Why XHTML? * Proper Nesting * Proper Tag Closing * Elements in Lowercase Characters * One Root Element * Attribute in Lowercase CharactersMORE ABOUT XHTML * Quoted values * Forbidden Attribute Minimization * ID Attribute * Image Alternative Texts * Ampersands in URLs * Contents |

FIRST QUARTER | SECOND QUARTER | THIRD QUARTER | FOURTH QUARTER | BASIC WEB CONCEPTS * Web Design Terminology * History of the Internet * History of the World Wide Web * Accessing the Web * Web Browsers * Web Browsers Elements * Kinds of the Web Browsers * Basic Web Design Principles * Essentials Elements of the Web Contents * Planning Your Web SiteINTRODUCTION TO HTML * What is HTML? * Exploring HTML Text Editors * What is New in HTML5? * Basic Differences between HTML4 and HTML5? * Browser Support for HTML5 * Writing HTML Files * Starting HTML with Notepad * The Notepad Window * What is DocType? * What is Meta? * Attributes for <meta> * Viewing HTML Code in a BrowserTAGS AND ATTRIBUTES * What is Tag? * Structure of Tag * Container and Empty Tags * HTML Tags * New Structural Tags in HTML5 * New Media Elements in HTML5 * New Canvas and Form Elements in HTML5 * Removed Elements * What are Attributes * Common Attributes * Outline Algorithm * Basic Page StructureHEAD AND BODY TAGS * What are Head Tags? * What are Body Tags? * Attributes for <body> * What are Headings? * Attributes for <h1> to <h6> * Grouping HeadingsCREATING AN HTML DOCUMENT * Creating an HTML Document * Saving an HTML Document * Viewing an HTML Page * Using Header * Using Navigation * Creating an Article * Creating a Section * Using Footer * Creating a Generic Container * Printing a Web Page and HTML File * Exiting the Web Page and HTML FilePARAGRAPHS * Creating a New Paragraph * Aligning a Paragraph * Attributes for <p> * Quoting Passages * Adding Line Breaks * Creating Multiple Line Breaks * Adding Horizontal Rule * Attributes for <hr> * Modifying a Horizontal Rule * Ordered List * Unordered List * Specifying Time * Meter Element * Definition List * Preformatting Text * Progress Element * Nesting Tags * Nesting Lists * Adding Invisible CommentsBACKGROUND, TEXT, VIDEO AND AUDIO * Changing the Background Color of a Page * Highlighting Text * Adding Video * HTML video Tags * Embedding a Video File * Adding Audio * HTML5 Audio Tags * Linking to Audio or Video Files * Font * Speciying Font Style * Tags Commonly Used for Font Formatting * Special Character EntitlesIMAGES * Preparing the Image or Graphics * Inserting Graphics into a Web Page * Attributes for <img> * Specifying the background Image of a Page * Using Graphics as Hyperlink * Creating Animated GIF FilesTABLES * What is a Table * Creating a Table * Modifying a Table * Attributes for <tr> * Modifying Table Data * Attributes for <td> * Merging Cells Horizontally * Merging Cells Vertically * Merging Cells Horizontally and Vertically * Nesting Tables * Creating a Table with Invisible Border * Adding an Image to a tableHYPERLINKS * What is a Hyperlink? * Three types of Hyperlinks * Creating a Link from one page to another * Attribute for <a> * Target Attribute * Creating a Email Link * Linking to a Page on a Different Web Site * Using Graphics as LinksFORMS * What are Forms? * Attributes for <form> * Input Element * Attributes for <input> * New Input Types in HTML5 * Creating a Textbox * Creating a Large Text Area * Attributes for <textarea> * Creating Radio Buttons * Creating Check Boxes * Creating Drop-down Menus * Creating an Email Feedback Form * Adding a Submit Button * Adding a Reset Button | INTRODUCTION TO CSS * What is CSS * CSS Structure * Capabilities of CSS * Advantages of Using CSS * Three Kinds of CSS * CSS2 and CSS3 * Inline STyles * Embedded Styles * Linked Styles * Creating an external CSS File * Linking CSS File to HTML FileSELECTORS, DIV, SPAN, LINK * Display Property * Kinds of Elements in CSS * Property for Display * DIV Tag * Span Tag * Span and DIV * What are classes? * Class Selector * ID Selector * Multiple Selectors * Grouping Selectors * Nesting Selectors * Setting Dimension * Property for Dimension * Pseudo-classes and LinksFORMATTING TEXT WITH CSS * Typography * Font Property * Text Property * CSS Styles * Creating a Bold Text * Creating an Italic Text * Indenting Text * Changing the Font * Changing the Font Size * Changing the Text case * Changing Text Alignment * Changing Line Spacing * Changing Color of Text * CSS Text Color Property * Color Hex Values * Adding Background Color to a Text * Adding a Border * Creating Lists * Pseudo-elementsFORMATTING LAYOUT WITH CSS * Box Model * Element Positioning * CSS Position Property * Offset * CSS Offset property * Float * Wrapping Text around an Element * Background * CSS Background Color Property * CSS Background Image Property * Adding Background Color * Adding background Image * Background Repeat * Background Position * Background Attachment * Setting MarginsFORMATTING BORDER AND TABLE * Adding a Border * Border Width * CSS Border Color Property * Border Style * Setting Width and Height * Padding * CSS Padding Property * Table Background * Table Style * Table Layout | INTRODUCTION TO DREAMWEAVER * What is Dreamweaver? * Launching Dreamweaver * Exploring the Dreamweaver Interface * Dreamweaver screen elements * Document toolbar * Menu Bar * Split View * Design View * Code View * Control panel Arrangement * Opening or Closing a Panel * Insert Panel * Property Inspector * Status Bar * Context Menu * Closing DreamweaverSETTING UP A WEBSITE * What is a Web Site? * What is a Web page? * Ways of Creating New Files in Dreamweaver * Ways of Creating New files in Dreamweaver * Ways in Designing a Web page * DocType * Dreamweaver Block Level and Inline Level Elements * Defining a New Web Site * Creating a New Web page * Adding a Title to a Web Page * Saving a Web page * Previewing a Web page in a BrowserWORKING WITH TEXTS * Transferring Text into Dreamweaver * Methods of Transferring Documents from MS Word to Dreamweaver * Entering Text * Creating a Heading * Creating a Paragraph * Aligning a Paragraph * Creating a Line Break * Indenting Paragraphs * Working with Lists * Creating Unordered and Ordered Lists * Changing the Style of Unordered List * Inserting Special characters * Changing Font Face * Changing the Font Size * Changing the Font Color * Changing Font and Colors of the Entire Page * Copying text from another DocumentWORKING WITH IMAGES * Managing images in Dreamweaver * Image Types * Image Accessibility Preferences * Four methods of placing images into Pages * Inserting an Image into a Web page * Adding a border around an Image * Wrapping text around an Image * Adding Space to the Left, Right, Top, Bottom of an Image * Resizing an image * Cropping an Image * Adding a Background Image * Changing the background Color * Changing the Text Color * Creating a Rollover image * Inserting a Flash File * Inserting a Video from YouTube * Inserting a Spry Menu BarWORKING WITH HYPERLINKS * Three Link Types * Linking to another Web Site or a Page in your Web Site * Changing the Color of Links * Using an image as a link * Creating an Email LinkWORKING WITH TABLES * Inserting a table into a Web page * Editing or removing the Table Border * Changing the Alignment of Content in a Cell * Inserting Text into a Table * Inserting an Image into a table * Adjusting the Width and height of the cell * Changing the background Color of a table * Changing the Cell padding in a Table * Changing the Cell Spacing in a Table * Inserting Row or Column * Deleting Row and Column * Merging cells in a Table * Splitting cells in a tableWORKING WITH FRAMES * Opening the Frames Panel * Dividing a Page into Frames * Changing the size of a frame * Setting the frame Attributes * Inserting Image or Text in a frame * Deleting a frame Document | INTRODUCTION TO JAVASCRIPT * What is JavaScript * What can JavaScript Do? * Features of JavaScript * Disadvantages of JavaScript * How to Start Using JavaScript * Object and its Commonly Used Properties and Methods * Where Can You Place Scripts? * What are the JavaScript Guidelines?EVENTS AND POPUP BOXES * What are the Events? * Table of Event Triggers * What are Popup Boxes? * Alert Box * User-Input Prompt Box * Confirm BoxVARIUABLES AND COMPARISON STATEMENTS * What is a Variable? * Table of Arithmetic Operators * What are Comparison Statements? * Table of Logical OperatorsFUNCTIONS AND LOOPS * What is a Function? * The Return Statement * What is a Loop? * For Loop * While Loop * Do-While Loop * For-in Loop * The break and continue StatementsSTRING AND ARRAY OBJECTS * What is a String? * Table of Properties for the String Object * Table of Methods for the String Object * What is an Array? * Table of Properties for the Array Object * Table of Methods for the Array ObjectDATE, TIME AND MATH OBJECTS * What is a Date Object * Table of Methods for the Date Object * Insert Simple Time Stamps * JavaScript Timing * The setTimeout * What is Math Object * Table of Properties for math Object * Table of Methods for the Math ObjectBROWSER DETECTION, COOKIES AND ERRORS * What is Browser Detection? * What is a Cookie * Why do you need to detect Errors? * Cause of ErrorsXHTML * What is XHTML? * What is XML? * Difference between XHTML and HTML * Why XHTML? * Proper Nesting * Proper Tag Closing * Elements in Lowercase Characters * One Root Element * Attribute in Lowercase CharactersMORE ABOUT XHTML * Quoted values * Forbidden Attribute Minimization * ID Attribute * Image Alternative Texts * Ampersands in URLs * Contents |