Web Development 1 Instructional Material PDF
Document Details
Uploaded by Deleted User
Polytechnic University of the Philippines
2020
Engr. Isaiah Nikkolai M. Andaya
Tags
Summary
This instructional material is for the course Web Development 1, detailed in the Polytechnic University of the Philippines. The document is a guide on HTML, CSS, and JavaScript, and includes module introductions and learning objectives. It is intended for student use.
Full Transcript
Republic of the Philippines POLYTECHNIC UNIVERSITY OF THE PHILIPPINES INSTITUTE OF TECHNOLOGY Engineering Technology Department INSTRUCTIONAL MATERIAL FOR...
Republic of the Philippines POLYTECHNIC UNIVERSITY OF THE PHILIPPINES INSTITUTE OF TECHNOLOGY Engineering Technology Department INSTRUCTIONAL MATERIAL FOR DCET COMP 20283 WEB DEVELOPMENT 1 COMPILED BY: ENGR. ISAIAH NIKKOLAI M. ANDAYA 1 | DCET 20283 Web Development 1 Republic of the Philippines POLYTECHNIC UNIVERSITY OF THE PHILIPPINES INSTITUTE OF TECHNOLOGY Engineering Technology Department © 2020 Polytechnic University of the Philippines Institute of Technology This publication is licensed under a Creative Commons Attribution- NonCommercialNoDerivatives 4.0 The text may be reproduced for non-commercial purposes, provided that credit is given to the original author(s). PUP Institute of Technology 379 Pureza Sta. Mesa, Maynila, 1008 https://www.pup.edu.ph/itech/ 2 | DCET 20283 Web Development 1 How to Use the Module This module is intended for the study of COMP 20324 – Software Design. The module will guide you towards the necessary concepts and skills you need to gain to be efficient and effective inside the mechanical workshop. The module consists of the following parts: Introduction - it discusses the common practices or real-life scenarios that are related to the module to be learnt. Objectives - it houses all the necessary competencies that you need to accomplish after the end of the module. Module Content/Discover - this part discusses briefly the concepts that you need to understand with the module. Other Suggested Materials - these are videos, podcasts, audios, images and other media and technology that can support your study of the module at hand. Activities, Assessment, Quizzes, Midterm and Final Examination - These are activities that you need to accomplish and submit back to your faculty. This will be used to assess your understanding of the concepts inside this module. Write your answer in a separate paper, notebook or Compile all your answer as a soft copy on 1 folder with your complete name and to be submitted to your professor. Learning Outcomes Familiarize student on Outcome-Based Education Orient the student on the course syllabus, grading system and classroom rules Develop a Website Course Outcomes After completing the course, the student must be able to: Demonstrate Programing Skills by developing a website Demonstrate presentation skills by conducting a website presentation as a final requirement 3 | DCET 20283 Web Development 1 TABLE OF CONTENTS How to Use the Module.............................................................................. 3 Module 1 – Introduction to HTML............................................................... 5 Module 2 – The HTML Attributes............................................................. 15 Module 3 – The HTML Style Attributes.................................................... 21 Module 4 – The HTML Links.................................................................... 29 Module 5 – Introduction to CSS............................................................... 36 Module 6 – CSS Color Names................................................................. 48 Module 7 – Introduction to Java Script................................................... 122 JavaScript Introduction............................................................................. 122 JavaScript Output..................................................................................... 124 JavaScript Statements............................................................................... 125 JavaScript Syntax..................................................................................... 128 JavaScript Variables................................................................................. 130 JavaScript Operators................................................................................. 133 JavaScript Switch Statement...................................................................... 143 JavaScript For Loop.................................................................................. 147 Module 8 – Creating Website................................................................. 152 HTML Forms.......................................................................................... 154 Exercises and Assessment 1................................................................. 171 Exercises and Assessment 2................................................................. 171 Exercises and Assessment 3................................................................. 171 Exercises and Assessment 4................................................................. 172 Exercises and Assessment 5................................................................. 172 Exercises and Assessment 6................................................................. 172 Exercises and Assessment 7................................................................. 177 Exercises and Assessment 8................................................................. 178 Final Exam and Requirement................................................................. 179 REFERENCES...................................................................................... 179 4 | DCET 20283 Web Development 1 Module 1 – Introduction to HTML OBJECTIVES What you can learn and do in this lesson: 1. The learners should be able to understand the meaning of HTML and its history. 2. The learners should be able to know the different HTML tags. 3. The learners should be able to know the different Web Browsers. 4. The learners should be able to determine the HTML Page Structure. 5. The learners should be able to know the different HTML Editors. 6. The learners should be able to know how to explore or use the different HTML Editors. What is HTML HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages 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 label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. A Simple HTML Document Example Page Title My First Heading My first paragraph. The declaration defines that this document is an HTML5 document The element is the root element of an HTML page The element contains meta information about the HTML page The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The element defines a large heading The element defines a paragraph 5 | DCET 20283 Web Development 1 What is an HTML Element? An HTML element is defined by a start tag, some content, and an end tag: Content goes here... The HTML element is everything from the start tag to the end tag: My First Heading My first paragraph. Note: Some HTML elements have no content (like the element). These elements are called empty elements. Empty elements do not have an end tag! Web Browsers The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags, but uses them to determine how to display the document: 6 | DCET 20283 Web Development 1 HTML Page Structure Below is a visualization of an HTML page structure: Note: Only the content inside the section (the white area above) will be displayed in a browser. HTML History HTML History HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially, which was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML. HTML is a very evolving markup language and has evolved with various versions updating. Long before its revised standards and specifications are carried in, each version has allowed users to create web pages in a much easier and prettier way and make sites very efficient. HTML 1.0 was released in 1993 to share the information readable and accessible via web browsers. But not many of the developers were involved in creating websites. So the language was also not growing. Then comes the HTML 2.0, published in 1995, which contains all the features of HTML 1.0 along with that few additional features; which remained as the standard markup language for designing and creating websites until January 1997 and refined various core features of HTML. Then comes HTML 3.0, where Dave Raggett introduced a new paper or draft on HTML. It included improved new features of HTML, giving more powerful characteristics for web admins in designing web pages. But these powerful features of the new HTML slowed down the browser in applying further improvements. 7 | DCET 20283 Web Development 1 Then comes HTML 4.01, which is widely used and was a successful version of HTML before HTML 5.0, which is currently released and used worldwide. HTML 5 can be said to be an extended version of HTML 4.01, published in 2012. Since the early days of the World Wide Web, there have been many versions of HTML: Learn HTML Using Notepad or TextEdit Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe in that using a simple text editor is a good way to learn HTML. Follow the steps below to create your first web page with Notepad or TextEdit. Step 1: Open Notepad (PC) Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. Windows 7 or earlier: Open Start > Programs > Accessories > Notepad 8 | DCET 20283 Web Development 1 Step 2: Write Some HTML Write or copy the following HTML code into Notepad: My First Heading My first paragraph. Step 3: Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files). Tip: You can use either.htm or.html as file extension. There is no difference, it is up to you. Step 4: View the HTML Page in Your Browser Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with"). The result will look much like this: The Code at the Notepad Output on the browser 9 | DCET 20283 Web Development 1 HTML Documents All HTML documents must start with a document type declaration:. The HTML document itself begins with and ends with. The visible part of the HTML document is between and. Example My First Heading My first paragraph. The Declaration The declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The declaration is not case sensitive. The declaration for HTML5 is: Example HTML Headings HTML headings are defined with the to tags. defines the most important heading. defines the least important heading: Example This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 10 | DCET 20283 Web Development 1 HTML Paragraphs HTML paragraphs are defined with the tag: Example This is a paragraph. This is another paragraph. HTML Links HTML links are defined with the tag: Example This is a link The link's destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements. HTML Images HTML images are defined with the tag. The source file (src), alternative text (alt), width, and height are provided as attributes: Example HTML Elements An HTML element is defined by a start tag, some content, and an end tag: Content goes here... The HTML element is everything from the start tag to the end tag: My First Heading My first paragraph. Note: Some HTML elements have no content (like the element). These elements are called empty elements. Empty elements do not have an end tag! 11 | DCET 20283 Web Development 1 Nested HTML Elements HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The following example contains four HTML elements (, , and ): Example My First Heading My first paragraph. Example Explained The element is the root element and it defines the whole HTML document. It has a start tag and an end tag. Then, inside the element there is a element: My First Heading My first paragraph. The element defines the document's body. It has a start tag and an end tag. Then, inside the element there is two other elements: and < p>: My First Heading My first paragraph. The element defines a heading. It has a start tag and an end tag : My First Heading The element defines a paragraph. It has a start tag and an end tag : My first paragraph. 12 | DCET 20283 Web Development 1 Never Skip the End Tag Some HTML elements will display correctly, even if you forget the end tag: Example This is a paragraph This is a paragraph Empty HTML Elements HTML elements with no content are called empty elements. The tag defines a line break, and is an empty element without a closing tag: Example This is a paragraph with a line break. HTML is Not Case Sensitive HTML tags are not case sensitive: means the same as. The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML. Assessment No 1 1. Create a code to provide the following output: 13 | DCET 20283 Web Development 1 2. Create a code to provide the following output: 3. Read each question carefully and circle the letter of the correct answer. 1. Declaration defines this document to be HTML5. A. B. C. D. 2. Element that contains meta information about the document. A. B. C. D. 3. Element that contains the visible page content. A. B. C. D. 4. HTML stands for __________________. A. Hyper Text Markup Language B. Hyper Txt Markup Language C. Hyper Text Market Language D. Hyper Tags Market Language 14 | DCET 20283 Web Development 1 Module 2 – The HTML Attributes What you can learn and do in this lesson: 1. The learners should be able to know how to code basic HTML. 2. The learners should identify the proper usage of Headings, Paragraphs, Attributes, Links, Images, Buttons, and Lists. HTML Attributes All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" The href Attribute The tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to: Example This is a link The src Attribute The tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: Example The width and height Attributes The tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels): Example 15 | DCET 20283 Web Development 1 The alt Attribute The required alt attribute for the tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader. Example See what happens if we try to display an image that does not exist: The style Attribute The style attribute is used to add styles to an element, such as color, font, size, and more. Example This is a red paragraph. The lang Attribute You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers. The following example specifies English as the language Example... Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country. 16 | DCET 20283 Web Development 1 The following example specifies English as the language and United States as the country:... The title Attribute The title attribute defines some extra information about an element. The value of the title attribute will be displayed as a tooltip when you mouse over the element: The value of the title attribute will be displayed as a tooltip when you mouse over the element: Example This is a paragraph. HTML Headings HTML headings are defined with the to tags. defines the most important heading. defines the least important heading. Browsers automatically add some white space (a margin) before and after a heading. headings should be used for main headings, followed by headings, then the less important , and so on. Activity No 1 17 | DCET 20283 Web Development 1 Sample Code Expected Output HTML Paragraphs The HTML element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. Activity No 2 Sample Code Expected Output HTML Display You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed: Activity 3 Sample Code 18 | DCET 20283 Web Development 1 Expected Output HTML Horizontal Rules The tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The element is used to separate content (or define a change) in an HTML page. The tag is an empty tag, which means that it has no end tag. Activity 4 Sample Code Expected Output 19 | DCET 20283 Web Development 1 HTML Line Breaks The HTML element defines a line break. Use if you want a line break (a new line) without starting a new paragraph. The tag is an empty tag, which means that it has no end tag. Activity 5 Sample Code Expected Output The HTML Element The HTML element defines preformatted text. The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: Activity 6 Sample Code Expected Output 20 | DCET 20283 Web Development 1 Module 3 – The HTML Style Attributes What you can learn and do in this lesson: 1. The learners should be able to create HTML files using HTML Styles. 2. The learners should know how to use different HTML Styles such as Text Formatting, Colors, Tables, Layout Elements, and Techniques. The HTML Style Attribute Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax. The property is a CSS property. The value is a CSS value. Background Color The CSS background-color property defines the background color for an HTML element. Example Set the background color for a page to green. Sample Code Expected Output Set background color for two different elements. Activity 7 Sample Code Expected Output 21 | DCET 20283 Web Development 1 Text Color The CSS color property defines the text color for an HTML element Sample Code Expected Output Fonts The CSS font-family property defines the font to be used for an HTML element: Activity 8 Sample Code Expected Output Text Size The CSS font-size property defines the text size for an HTML element. 22 | DCET 20283 Web Development 1 Activity 9 Sample Code Expected Output Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML element. Activity 10 Sample Code Expected Output HTML Formatting Elements Formatting elements were designed to display special types of text: - Bold text - Important text - Italic text - Emphasized text - Marked text - Smaller text - Deleted text - Inserted text - Subscript text - Superscript text 23 | DCET 20283 Web Development 1 HTML Comment Tags You can add comments to your HTML source by using the following syntax. Notice that there is an exclamation point (!) in the start tag, but not in the end tag. With comments you can place notifications and reminders in your HTML code. Note: Comments are not displayed by the browser, but they can help document your HTML source code. Activity 11 Sample Code Expected Output Color Names In HTML, a color can be specified by using a color name: Background Color You can set the background color for HTML elements. 24 | DCET 20283 Web Development 1 Activity 12 Sample Code Expected Output Text Color You can set the color of text. Activity 13 Sample Code Expected Output Border Color You can set the color of borders. 25 | DCET 20283 Web Development 1 Activity 14 Sample Code Expected Output RGB Color Values In HTML, a color can be specified as an RGB value, using this formula: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255. This means that there are 256 x 256 x 256 = 16777216 possible colors! For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0. Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0. To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). Experiment by mixing the RGB values below: 26 | DCET 20283 Web Development 1 Activity 15 Sample Code Expected Output RGBA Color Values RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): Experiment by mixing the RGBA values below. 27 | DCET 20283 Web Development 1 Activity 16 Sample Code Expected Output 28 | DCET 20283 Web Development 1 Module 4 – The HTML Links OBJECTIVES What you can learn and do in this lesson: 1. The learners should be able to understand the HTML Links. 2. The learners should be able to know the different HTML link syntax. HTML Links - Hyperlinks HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Note: A link does not have to be text. A link can be an image or any other HTML element! HTML Links - Syntax The HTML tag defines a hyperlink. It has the following syntax. link text The most important attribute of the element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address. Activity 16 Sample Code Expected Output By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red 29 | DCET 20283 Web Development 1 HTML Links - The target Attribute By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab _parent - Opens the document in the parent frame _top - Opens the document in the full body of the window Activity Sample Code Expected Output Absolute URLs vs. Relative URLs Both examples above are using an absolute URL (a full web address) in the href attribute. A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part): Activity 17 30 | DCET 20283 Web Development 1 Sample Code Expected Output HTML Links - Use an Image as a Link To use an image as a link, just put the tag inside the tag: Activity 18 Sample Code Expected Output 31 | DCET 20283 Web Development 1 Save the code with the file extention.html output if you click the bag image and the image in a folder. HTML Images Syntax The HTML tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image. The tag is empty, it contains attributes only, and does not have a closing tag. The tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text for the image Syntax The src Attribute The required src attribute specifies the path (URL) to the image. Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image. The alt Attribute The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).The value of the alt attribute should describe the image. 32 | DCET 20283 Web Development 1 Activity 19 Sample Code Expected Output Save the code with the file extention.html Expected Output if the picture and the image in a folder. cannot see or invalid file name Image Size - Width and Height You can use the style attribute to specify the width and height of an image. Activity 20 Sample Code Expected Output Alternatively, you can use the width and height attributes: 33 | DCET 20283 Web Development 1 Activity 21 Sample Code Expected Output The width and height attributes always define the width and height of the image in pixels. Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. Images in Another Folder If you have your images in a sub-folder, you must include the folder name in the src attribute: Html file and folder of the image Sample Code: 34 | DCET 20283 Web Development 1 Expected Output Common Image Formats Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera): Note: Loading large images takes time, and can slow down your web page. Use images carefully. Assessment: 2 35 | DCET 20283 Web Development 1 Create an HTML code using the following image extension format. 1..jpeg 2..gif 3..png Example Output The picture with.jpeg image format Module 5 – Introduction to CSS What you can learn and do in this lesson: 1. The learners should be able to know how to code using CSS. 2. The learners should be able to code using CSS Syntax, Selector, Comments, and Colors. CSS Introduction What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. 36 | DCET 20283 Web Development 1 CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like: This is a heading This is a paragraph. When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. CSS removed the style formatting from the HTML page! CSS Saves a Lot of Work! The style definitions are normally saved in external.css files. With an external stylesheet file, you can change the look of an entire website by changing just one file! CSS Syntax A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. In this example all elements will be center-aligned, with a red text color: Sample Code Expected Output 37 | DCET 20283 Web Development 1 Save the file as test.html The CSS element Selector The element selector selects HTML elements based on the element name. Here, all elements on the page will be center-aligned, with a blue text color. Activity 22 Sample Code Expected Output 38 | DCET 20283 Web Development 1 The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element!. To select an element with a specific id, write a hash (#) character, followed by the id of the element. The CSS rule below will be applied to the HTML element with id="para1". Activity 23 Sample Code Expected Output Note: An id name cannot start with a number! The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. In this example all HTML elements with class="center" will be blue and center-aligned. Activity 24 Sample Code Expected Output 39 | DCET 20283 Web Development 1 You can also specify that only specific HTML elements should be affected by a class. In this example only elements with class="center" will be center-aligned. Activity 25 Sample Code Expected Output HTML elements can also refer to more than one class. In this example the element will be styled according to class="center" and to class="large". Activity 26 Sample Code Expected Output Note: A class name cannot start with a number! 40 | DCET 20283 Web Development 1 The CSS Universal Selector The universal selector (*) selects all HTML elements on the page. The CSS rule below will affect every HTML element on the page. Activity 27 Sample Code Expected Output The CSS Grouping Selector The grouping selector selects all the HTML elements with the same style definitions. Look at the following CSS code (the h1, h2, and p elements have the same style definitions). Sample Code It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. 41 | DCET 20283 Web Development 1 How to Add CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS External CSS With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the element, inside the head section. External styles are defined within the element, inside the section of an HTML page. An external style sheet can be written in any text editor, and must be saved with a.css extension. The external.css file should not contain any HTML tags. Here is how the "mystyle.css" file looks like. Activity 28 Sample code for Externalcss.html Expected Output 42 | DCET 20283 Web Development 1 Sample code for systyle.css inside the folder Note: Do not add a space between the property value and the unit (such as margin-left: 50 px;). The correct way is: margin-left: 50px; Internal CSS An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the element, inside the head section. Internal styles are defined within the element, inside the section of an HTML page Activity 29 43 | DCET 20283 Web Development 1 Sample Code Expected Output Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Inline styles are defined within the "style" attribute of the relevant element. Activity 30 Sample Code Expected Output Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly. Multiple Style Sheets If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. Assume that an external style sheet has the following style for the element. 44 | DCET 20283 Web Development 1 h1 { color: navy; } Then, assume that an internal style sheet also has the following style for the element. h1 { color: orange; } If the internal style is defined after the link to the external style sheet, the elements will be "orange": Activity 31 Sample Code for HTML Expected Sample Code for CSS Inside the Folder However, if the internal style is defined before the link to the external style sheet, the elements will be "navy". 45 | DCET 20283 Web Development 1 Activity 32 Sample Code for HTML Expected Output Sample Code for CSS Inside the Folder Cascading Order What style will be used when there is more than one style specified for an HTML element? All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: 1. Inline style (inside an HTML element) 2. External and internal style sheets (in the head section) 3. Browser default So, an inline style has the highest priority, and will override external and internal styles and browser defaults. CSS Comments Comments are used to explain the code, and may help when you edit the source code at a later date. 46 | DCET 20283 Web Development 1 Comments are ignored by browsers. A CSS comment is placed inside the element, and starts with : Activity 33 Sample Code Expected Output Note: You can add comments wherever you want in the code. p { color: red; } Comments can also span multiple lines: p { color: red; } HTML and CSS Comments From the HTML tutorial, you learned that you can add comments to your HTML source by using the syntax. 47 | DCET 20283 Web Development 1 In the following example, we use a combination of HTML and CSS comments: Activity 34 Sample Code Expected Output Module 6 – CSS Color Names What you can learn and do in this lesson: 1. The learners should be able to know how to code using CSS. 2. The learners should be able to code using CSS Syntax, Selector, Comments, and Colors. CSS Color Names In CSS, a color can be specified by using a color name: Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. 48 | DCET 20283 Web Development 1 Activity 35 Sample Code Expected Output 49 | DCET 20283 Web Development 1 CSS Text Color You can set the color of text: Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Activity 36 Sample Code Expected Output 50 | DCET 20283 Web Development 1 Activity 37 Sample Code Expected Output 51 | DCET 20283 Web Development 1 Activity 38 Sample Code Expected Output 52 | DCET 20283 Web Development 1 CSS RGB Colors RGB Value In CSS, a color can be specified as an RGB value, using this formula: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255). Experiment by mixing the RGB values below: Activity 39 Sample Code 53 | DCET 20283 Web Development 1 Expected Output Shades of gray are often defined using equal values for all the 3 light sources: Activity 40 Sample Code 54 | DCET 20283 Web Development 1 Expected Output 55 | DCET 20283 Web Development 1 Activity 41 Sample Code Expected Output 56 | DCET 20283 Web Development 1 CSS HEX Colors HEX Value In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). Experiment by mixing the HEX values below. Activity 42 Sample Code 57 | DCET 20283 Web Development 1 Expected Output Shades of gray are often defined using equal values for all the 3 light sources: Activity 43 Sample Code 58 | DCET 20283 Web Development 1 Expected Output HSL Value In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness) Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white Experiment by mixing the HSL values below: 59 | DCET 20283 Web Development 1 Activity Sample Code Expected Output 60 | DCET 20283 Web Development 1 Saturation Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color. Activity 44 Sample Code Expected Output 61 | DCET 20283 Web Development 1 Lightness The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white). Activity 45 Sample Code Expected Output 62 | DCET 20283 Web Development 1 Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades: Activity 46 Sample Code Activity 47 Expected Output 63 | DCET 20283 Web Development 1 HSLA Value HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): Experiment by mixing the HSLA values below: Sample Code 64 | DCET 20283 Web Development 1 Expected Output The CSS background properties are used to define the background effects for elements. In these chapters, you will learn about the following CSS background properties: background-color background-image background-repeat background-attachment background-position CSS background-color The background-color property specifies the background color of an element. Activity 48 Sample Code Expected Output 65 | DCET 20283 Web Development 1 With CSS, a color is most often specified by: a valid color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Other Elements You can set the background color for any HTML elements. the , , and elements will have different background colors: Activity 49 Sample Code 66 | DCET 20283 Web Development 1 Expected Output Opacity / Transparency The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent: Activity 50 67 | DCET 20283 Web Development 1 Sample Code Expected Output Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read. Transparency using RGBA If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text: In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color. 68 | DCET 20283 Web Development 1 An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). div { background: rgb(0, 128, 0); } div.first { background: rgba(0, 128, 0, 0.1); } div.second { background: rgba(0, 128, 0, 0.3); } div.third { background: rgba(0, 128, 0, 0.6); } Transparent Box With opacity: 10% opacity 30% opacity 60% opacity 69 | DCET 20283 Web Development 1 opacity 1 With RGBA color values: 10% opacity 30% opacity 60% opacity default Notice how the text gets transparent as well as the background color when using the opacity property. Sample Code Expected Output 70 | DCET 20283 Web Development 1 CSS background-image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. Activity 51 Sample Code Expected Output This example shows a bad combination of text and background image. The text is hardly readable. 71 | DCET 20283 Web Development 1 This example shows a good combination of text and background image. The text is readable. Note: When using a background image, use an image that does not disturb the text. CSS background-repeat By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this: Activity 52 72 | DCET 20283 Web Development 1 Sample Code Expected Output If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better: Activity 53 Sample Code 73 | DCET 20283 Web Development 1 Expected Output Tip: To repeat an image vertically, set background-repeat: repeat-y; CSS background-repeat: no-repeat Showing the background image only once is also specified by the background- repeat property: ow the background image only once: Activity 54 Sample Code 74 | DCET 20283 Web Development 1 Expected Output In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much. CSS background-position The background-position property is used to specify the position of the background image. Position the background image in the top-right corner. Activity 55 Sample Code 75 | DCET 20283 Web Development 1 Expected Output CSS background-attachment The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page): Specify that the background image should be fixed: Activity 56 body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } The background-attachment Property The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page). Tip: If you do not see any scrollbars, try to resize the browser window. 76 | DCET 20283 Web Development 1 The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. The background-image is fixed. Try to scroll down the page. Sample Code Expected Output 77 | DCET 20283 Web Development 1 Specify that the background image should scroll with the rest of the page. Try to change This part. Activity 57 body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: scroll; } Sample Code Expected Output CSS background - Shorthand property To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property. Instead of writing: body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } You can use the shorthand property background: 78 | DCET 20283 Web Development 1 Use the shorthand property to set the background properties in one declaration. Activity 58 Sample Code Expected Output 79 | DCET 20283 Web Development 1 When using the shorthand property the order of the property values is: background-color background-image background-repeat background-attachment background-position It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value. CSS Border Properties The CSS border properties allow you to specify the style, width, and color of an element's border. 80 | DCET 20283 Web Development 1 CSS Border Style The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border- color value ridge - Defines a 3D ridged border. The effect depends on the border- color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border- color value none - Defines no border hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). Activity 59 Sample Code 81 | DCET 20283 Web Development 1 Expected Output CSS Border Width The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick: p.one { border-style: solid; border-color: red; } 82 | DCET 20283 Web Development 1 p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; } The border-color Property This property specifies the color of the four borders: A solid red border A solid green border A dotted blue border Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first. Sample Code Expected Output 83 | DCET 20283 Web Development 1 Specific Side Widths The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border): Activity 60 p.one { border-style: solid; border-width: 5px 20px; } p.two { border-style: solid; border-width: 20px 5px; } p.three { border-style: solid; border-width: 25px 10px 4px 35px; } The border-width Property The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border): 84 | DCET 20283 Web Development 1 Some text. Some text. Some text. Sample Code Expected Output CSS Border Color The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red" HEX - specify a HEX value, like "#ff0000" RGB - specify a RGB value, like "rgb(255,0,0)" HSL - specify a HSL value, like "hsl(0, 100%, 50%)" transparent Note: If border-color is not set, it inherits the color of the element. 85 | DCET 20283 Web Development 1 Activity 62 p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; } The border-color Property This property specifies the color of the four borders: A solid red border A solid green border A dotted blue border Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first. Sample Code 86 | DCET 20283 Web Development 1 Expected Output Specific Side Colors The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). Activity 63 Sample Code Expected Output 87 | DCET 20283 Web Development 1 HEX Values The color of the border can also be specified using a hexadecimal value (HEX): Activity 64 Sample Code Expected Output 88 | DCET 20283 Web Development 1 RGB Values Or by using RGB values: Activity 65 Sample Code Expected Output 89 | DCET 20283 Web Development 1 HSL Values You can also use HSL values: Activity 66 Sample Code Expected Output 90 | DCET 20283 Web Development 1 CSS Border - Individual Sides From the examples on the previous pages, you have seen that it is possible to specify a different border for each side. In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left): Activity 67 Sample Code Expected Output 91 | DCET 20283 Web Development 1 The example above gives the same result as this: So, here is how it works: If the border-style p roperty has four values: border-style: dotted solid double dashed; o top border is dotted o right border is solid o bottom border is double o left border is dashed If the border-style property has three values: border-style: dotted solid double; o top border is dotted o right and left borders are solid o bottom border is double If the border-style property has two values: border-style: dotted solid; 92 | DCET 20283 Web Development 1 o top and bottom borders are dotted o right and left borders are solid If the border-style property has one value: border-style: dotted; o all four borders are dotted Activity 68 Sample Code 93 | DCET 20283 Web Development 1 Expected Output The border-style property is used in the example above. However, it also works with border-width and border-color. CSS Border - Shorthand Property Like you saw in the previous page, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individual border properties in one property. The border property is a shorthand property for the following individual border properties: border-width border-style (required) border-color Activity 69 Sample Code 94 | DCET 20283 Web Development 1 Expected Output You can also specify all the individual border properties for just one side. Left Border p { border-left: 6px solid red; background-color: lightgrey; } Result: Bottom Border p { border-bottom: 6px solid red; background-color: lightgrey; } Result: CSS Rounded Borders The border-radius property is used to add rounded borders to an element: 95 | DCET 20283 Web Development 1 Activity 70 Sample Code Expected Output 96 | DCET 20283 Web Development 1 97 | DCET 20283 Web Development 1 CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip: Negative values are allowed. Sample Code 98 | DCET 20283 Web Development 1 Expected Output Margin Collapse Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on left and right margins! Only top and bottom margins! Look at the following example: Activity Sample Code Expected Output 99 | DCET 20283 Web Development 1 In the example above, the element has a bottom margin of 50px and the element has a top margin set to 20px. Common sense would seem to suggest that the vertical margin between the and the would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px. CSS Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: padding-top padding-right padding-bottom padding-left All the padding properties can have the following values: length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element Note: Negative values are not allowed. 100 | DCET 20283 Web Development 1 Sample Code Expected Output Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: padding-top padding-right padding-bottom padding-left So, here is how it works: If the padding property has four values: 101 | DCET 20283 Web Development 1 padding: 25px 50px 75px 100px; o top padding is 25px o right padding is 50px o bottom padding is 75px o left padding is 100px Activity 71 Sample Code Expected Output 102 | DCET 20283 Web Development 1 If the padding property has three values: padding: 25px 50px 75px; o top padding is 25px o right and left paddings are 50px o bottom padding is 75px Example Use the padding shorthand property with three values: div { padding: 25px 50px 75px; } If the padding property has two values: padding: 25px 50px; o top and bottom paddings are 25px o right and left paddings are 50px Example Use the padding shorthand property with two values: div { padding: 25px 50px; } If the padding property has one value: padding: 25px; o all four paddings are 25px Example Use the padding shorthand property with one value: 103 | DCET 20283 Web Development 1 div { padding: 25px; } Padding and Element Width The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result. Example Here, the element is given a width of 300px. However, the actual width of the element will be 350px (300px + 25px of left padding + 25px of right padding): div { width: 300px; padding: 25px; } To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Example Use the box-sizing property to keep the width at 300px, no matter the amount of padding: div { width: 300px; padding: 25px; 104 | DCET 20283 Web Development 1 box-sizing: border-box; } To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Example Use the box-sizing property to keep the width at 300px, no matter the amount of padding: div { width: 300px; padding: 25px; box-sizing: border-box; } CSS height and width Examples Activity 72 Sample Code 105 | DCET 20283 Web Development 1 Expected Output Example Set the height and width of another element: div { height: 100px; width: 500px; background-color: powderblue; } 106 | DCET 20283 Web Development 1 Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element! Setting max-width The max-width property is used to set the maximum width of an element. The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width). The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows. Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs! This element has a height of 100 pixels and a max-width of 500 pixels. Note: The value of the max-width property overrides width. Activity 73 Sample Code 107 | DCET 20283 Web Development 1 Expected Output The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: 108 | DCET 20283 Web Development 1 Explanation of the different parts: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. Activity 74 Sample Code 109 | DCET 20283 Web Development 1 Expected Output Width and Height of an Element In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins. Activity 75 Sample Code 110 | DCET 20283 Web Development 1 Expected Output Here is the calculation: 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin Text Color The color property is used to set the color of the text. The color is specified by: a color name - like "red" 111 | DCET 20283 Web Development 1 a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector. Activity 76 Sample Code Expected Output 112 | DCET 20283 Web Development 1 Text Color and Background Color In this example, we define both the background-color property and the color property: Example body { background-color: lightgrey; color: blue; } h1 { background-color: black; color: white; } Text Alignment The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left): 113 | DCET 20283 Web Development 1 Sample Code When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers): Expected Output When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers): Example div { text-align: justify; } Text Direction The direction and unicode-bidi properties can be used to change the text direction of an element: Example p { direction: rtl; unicode-bidi: bidi-override; } Vertical Alignment The vertical-align property sets the vertical alignment of an element. 114 | DCET 20283 Web Development 1 This example demonstrates how to set the vertical alignment of an image in a text: Example img.top { vertical-align: top; } img.middle { vertical-align: middle; } img.bottom { vertical-align: bottom; } Text Decoration The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links: Sample Code 115 | DCET 20283 Web Development 1 Expected Output The other text-decoration values are used to decorate text: Example h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } Note: It is not recommended to underline text that is not a link, as this often confuses the reader. Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word: 116 | DCET 20283 Web Development 1 Sample Code Expected Output 117 | DCET 20283 Web Development 1 Text Indentation The text-indent property is used to specify the indentation of the first line of a text: Activity 77 Sample Code Expected Output Letter Spacing The letter-spacing property is used to specify the space between the characters in a text. The following example demonstrates how to increase or decrease the space between characters: 118 | DCET 20283 Web Development 1 Example h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px; } Line Height The line-height property is used to specify the space between lines: Example p.small { line-height: 0.8; } p.big { line-height: 1.8; } Word Spacing The word-spacing property is used to specify the space between the words in a text. The following example demonstrates how to increase or decrease the space between words: Example h1 { word-spacing: 10px; } h2 { word-spacing: -5px; } 119 | DCET 20283 Web Development 1 White Space The white-space property specifies how white-space inside an element is handled. This example demonstrates how to disable text wrapping inside an element: Example p { white-space: nowrap; } Text Shadow The text-shadow property adds shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px): Activity 78 Sample Code 120 | DCET 20283 Web Development 1 Expected Output Next, add a color (red) to the shadow: Text shadow effect! Example h1 { text-shadow: 2px 2px red; } Then, add a blur effect (5px) to the shadow: Text shadow effect! Example h1 { text-shadow: 2px 2px 5px red; } 121 | DCET 20283 Web Development 1 Module 7 – Introduction to Java Script What you can learn and do in this lesson: 1. The learners should be able to understand what Javascript are. 2. The learners should know how to code using Javascript such as Output, Statements, Syntax, and comments. 3. The learners should be able to understand what Javascript Variables and Operators are. 4. The learners should be able to know how to use and code variables and operators in Javascript. 5. The learners should understand what Javascript data types, objects, numbers, arrays, and data objects are. 6. The learners should know how to use and code Javascript data types, objects, numbers, arrays, and data objects. 7. The learners should be able to understand what Javascript conditional statement and looping. 8. The learners should know how to use and code Javascript if-else, if-else-if statement, switch statement, for loop, and while loop. JavaScript Introduction JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById(). This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript": Example document.getElementById("demo").innerHTML = "Hello JavaScript"; JavaScript Functions and Events A JavaScript function is a block of JavaScript code that can be executed when "called." For example, a function can be called when an event occurs, like when the user clicks a button. JavaScript in or You can place any number of scripts in an HTML document. Scripts can be placed in the , or in the section of an HTML page, or in both. JavaScript in In this example, a JavaScript function is placed in the section of an HTML page. The function is invoked (called) when a button is clicked: Example function myFunction() { 122 | DCET 20283 Web Development 1 document.getElementById("demo").innerHTML = "Paragraph changed."; } A Web Page A Paragraph Try it JavaScript in In this example, a JavaScript function is placed in the section of an HTML page. The function is invoked (called) when a button is clicked: Example A Web Page A Paragraph Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } Placing scripts at the bottom of the element improves the display speed because script interpretation slows down the display. 123 | DCET 20283 Web Development 1 JavaScript Output JavaScript Display Possibilities JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert(). Writing into the browser console, using console.log(). Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content: Example My First Web Page My First Paragraph document.getElementById("demo").innerHTML = 5 + 6; Changing the innerHTML property of an HTML element is a common way to display data in HTML. 124 | DCET 20283 Web Development 1 Using document.write() For testing purposes, it is convenient to use document.write(): Activity 79 My First Web Page My first paragraph. document.write(5 + 6); JavaScript Statements Example var x, y, z; // Statement 1 x = 5; // Statement 2 y = 6; // Statement 3 z = x + y; // Statement 4 JavaScript Programs A computer program is a list of "instructions" to be "executed" by a computer. In a programming language, these programming instructions are called statements. A JavaScript program is a list of programming statements. In HTML, JavaScript programs are executed by the web browser. JavaScript statements are composed of: 125 | DCET 20283 Web Development 1 Values, Operators, Expressions, Keywords, and Comments. This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo": Example document.getElementById("demo").innerHTML = "Hello Dolly."; Most JavaScript programs contain many JavaScript statements. The statements are executed, one by one, in the same order as they are written. JavaScript programs (and JavaScript statements) are often called JavaScript code. Semicolons ; Semicolons separate JavaScript statements. Add a semicolon at the end of each executable statement: var a, b, c; // Declare 3 variables a = 5; // Assign the value 5 to a b = 6; // Assign the value 6 to b c = a + b; // Assign the sum of a and b to c When separated by semicolons, multiple statements on one line are allowed: a = 5; b = 6; c = a + b; On the web, you might see examples without semicolons. Ending statements with a semicolon is not required but highly recommended. JavaScript Keywords Keyword break Terminates a switch or a loop 126 | DCET 20283 Web Development 1 continue Jumps out of a loop and starts at the top debugger Stops the execution of JavaScript, and calls (if available) the debugging function do... Executes a block of statements, and repeats while the block, while a condition is true for Marks a block of statements to be executed, as long as a condition is true function Declares a function if... else Marks a block of statements to be executed, depending on a condition return Exits a function switch Marks a block of statements to be executed, depending on different cases 127 | DCET 20283 Web Development 1 try... Implements error handling to a block of catch statements var Declares a variable JavaScript keywords are reserved words. Reserved words cannot be used as names for variables. JavaScript Syntax JavaScript syntax is the set of rules, how JavaScript programs are constructed: var x, y, z; // How to declare variables x = 5; y = 6; // How to assign values z = x + y; // How to compute values JavaScript Values The JavaScript syntax defines two types of values: Fixed values and variable values. Fixed values are called literals. Variable values are called variables. JavaScript Literals The most important rules for writing fixed values are: Numbers are written with or without decimals: 10.50 1001 Strings are text, written within double or single quotes: "John Doe" 'John Doe' JavaScript Comments Not all JavaScript statements are "executed." Code after double slashes // or between is treated as a comment. Comments are ignored, and will not be executed: var x = 5; // I will be executed // var x = 6; I will NOT be executed You can use JavaScript comments to explain JavaScript code and to make it more readable. You can also use JavaScript comments to prevent execution when testing alternative code. Single-Line Comments Single line comments start with //. Any text between // and the end of the line will be ignored by JavaScript (will not be executed). 128 | DCET 20283 Web Development 1 This example uses a single-line comment before each code line: Example // Change heading: document.getElementById("myH").innerHTML = "My First Page"; // Change paragraph: document.getElementById("myP").innerHTML = "My first paragraph."; Multi-line Comments Multi-line comments start with. Any text between will be ignored by JavaScript. This example uses a multi-line comment (a comment block) to explain the code: Example document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; Using Comments to Prevent Execution Using comments to prevent the execution of code is suitable for code testing. Adding // in front of a code line changes the code lines from executable to comment. This example uses // to prevent execution of one of the code lines: Example //document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; 129 | DCET 20283 Web Development 1 JavaScript Variables JavaScript variables are containers for storing data values. In this example, x, y, and z are variables: Example var x = 5; var y = 6; var z = x + y; From the example above, you can expect: x stores the value 5 y stores the value 6 z stores the value 11 Much Like Algebra In this example, price1, price2, and total are variables: Example var price1 = 5; var price2 = 6; var total = price1 + price2; In programming, just like in algebra, we use variables (like price1) to hold values. In programming, just like in algebra, we use variables in expressions (total = price1 + price2). From the example above, you can calculate the total to be 11. JavaScript variables are containers for storing data values. JavaScript Identifiers You must identify all JavaScript variables with unique names. These unique names are called identifiers. Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume). The general rules for constructing names for variables (unique identifiers) are: Names can contain letters, digits, underscores, and dollar signs. Names must begin with a letter 130 | DCET 20283 Web Development 1 Names can also begin with $ and _ (but we will not use them in this tutorial) Names are case sensitive (y and Y are different variables) Reserved words (like JavaScript keywords) cannot be used as names JavaScript identifiers are case-sensitive. The Assignment Operator In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator. It is different from algebra. The following does not make sense in algebra: x=x+5 However, in JavaScript, it makes perfect sense: it assigns the value of x + 5 to x. (It calculates the value of x + 5 and puts the result into x. The value of x is incremented by 5.) The "equal to" operator is written like == in JavaScript. Declaring (Creating) JavaScript Variables Creating a variable in JavaScript is called "declaring" a variable. You declare a JavaScript variable with the var keyword: var carName; After the declaration, the variable has no value (technically, it has undefined). To assign a value to the variable, use the equal sign: carName = "Volvo"; In the example below, we create a variable called carName and assign the value "Volvo" to it. Then we "output" the value inside an HTML paragraph with id="demo": Example var carName = "Volvo"; document.getElementById("demo").innerHTML = carName; One Statement, Many Variables You can declare many variables in one statement. Start the statement with var and separate the variables by a comma. var person = "John Doe", carName = "Volvo", price = 200; A declaration can span multiple lines: var person = "John Doe", carName
