ITELECT1 Web Systems and Technologies PRELIM PDF

College of Information Technology Second Semester, A.Y. 2023-2024 MODULAR LEARNING I. COURSE TITLE ITELECT1 WEB SYSTEMS AND TECHNOLOGIES A. No. of Units: B. Schedule: II. COURSE OVER...

College of Information Technology Second Semester, A.Y. 2023-2024 MODULAR LEARNING I. COURSE TITLE ITELECT1 WEB SYSTEMS AND TECHNOLOGIES A. No. of Units: B. Schedule: II. COURSE OVERVIEW A. Course Description This course is design to master one of the most important advance areas of Web Development: Cascading Style Sheets (CSS) and Server-side Scripting with Php Hypertext Preprocessor (PHP), which allow the students to set the formatting and positioning of Web pages in standards based and robust way, and also to develop dynamic content webpages with the use of MySQL database Technology. Using the current standard web page language, students will be instructed on creating and maintaining a simple web site. B. Course Learning Outcomes At the end of the course, the students should be able to: 1. Know the fundamentals in web-based application architectures and processes; 2. Use CSS, XAMPP, CMS and related technologies in developing complete dynamic web-based applications; 3. Learn how to test, verify, and debug web-based applications. 4. Develop a database driven web-based application. C. Module Topics These are the topics to be covered for the whole course:  PRELIM Module 1. Introduction and Web Page Building Blocks Module 2. DOCTYPE Module 3. Building practical web pages using HTML Module 4. Cascading Style Sheet  MIDTERM Module 5. CSS3 Module 6. JS Basic Module 7. Javascript Module 8. Javascript Objects  FINALS Module 9. Introduction to PHP Programming Module 10. PHP Logical Statements Module 11. PHP and MySQL Module 12. MySQL Database Module 13. Limit Data III. STUDY GUIDE/LEARNING INSTRUCTIONS (This should be tackled during Orientation-1st meeting)  Welcome, and wish everyone is feeling good!  You are reminded to prepare yourselves by observing the following:  Manage your time well. 1   Wear proper uniform during online synchronous classes (previous prescribed uniforms should be followed except for first year students who should look simple and smart)  Focus your attention.  Give your best.  Submit requirements on time.  Be patient.  Work independently and answer confidently.  Motivate yourself.  Contact me.  Be oriented on your category for the mode of delivery. We have classified three groups namely: Category A – All Online (for students with gadgets and with good wifi connectivity) Category B – Mix Online and Print Materials (for students with gadgets but with weak wifi connectivity) Category C – All Print Materials (for students with no smart phones and no wifi connectivity) IV. REFERENCES  Shelly, Gary B., Denise M. Woods, Willaim J. Dorin., HTML5 and CSS comprehensive 7 th Edition., Course Technology. 2013.Brian P. Hogan - HTML5 and CSS3: Develop with Tomorrow's Standard Today, 2010 The Pragmatic Bookshelf, Dalas Texas  Towers, J. Tarin– Macromedia Dreamweaver for Windows & Macintosh, 2005 USA: Peach pit Press  Vaswani, Vikram– How to Do Everything with PHP and MySQL, 2005 McGraw-Hill/Osborne Michael Morrison - Head First JavaScript 2008: O'REILLY 2  College of Information Technology First Semester, A.Y. 2023-2024 MODULE 1 INTRODUCTION AND WEB PAGE BUILDING BLOCKS Introduction This module entitled INTRODUCTION AND WEB PAGE BUILDING BLOCKS is about HTML elements are the building blocks of the HTML web page. The elements consist of a pair of tags (starting and ending tags) and the textual or graphical content inside of the tags. Date and Time Allotment I. Objectives At the end of the end of this module, students should be able to: 1. Identify the web standards and W3C recommendation 2. Learn HTML 3. Use the different html tags in building a web page. II. Lecture The Internet, Web and HTML The internet is the wider network that allows computer networks around the world run by companies, governments, universities and other organizations to talk to one another. The result is a mass of cables, computers, data centers, routers, servers, repeaters, satellites and WIFI towers that allows digital information to travel around the world. Web The Web is the common name for the World Wide Web, a subset of the Internet consisting of the pages that can be accessed by a Web browser. Many people assume that the Web is the same as the Internet, and use these terms interchangeably. However, the term Internet actually refers to the global network of servers that makes the information sharing that happens over the Web possible. So, although the Web does make up a large portion of the Internet, but they are not one and same. Web pages are formatted in a language called Hypertext Markup Language (HTML). It this language that allows users to click through pages on the Web via links. The Web uses HTTP protocol to transmit data and share information. Browsers such as Internet Explorer, Google Chrome or Mozilla Firefox are used to access Web documents, or Web pages, which are connected via links. The Web is just one of the ways that information is shared over the Internet; others include email, instant messaging and File Transfer Protocol (FTP). HTML HTML stands for Hypertext Markup Language. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications. 3 HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similarly to Microsoft Word. Browsers 1. Mozilla Firefox 2. Microsoft Edge 3. Google Chrome 4. Opera Markup: Elements, Tags, Attributes and Values When building websites, it’s important to understand what elements, tags, attributes and values are. Once you understand what they are and how they all relate to one another, it’s relatively simple to create good and valid HTML. We’ll later explain how you can use elements, tags, attributes and values but this article simply explains what they are and how they should be structured correctly. HTML Elements An HTML document is made up of HTML elements which comprise of HTML tags and usually contain HTML attributes and values in the following format: content HTML Tags Tags are the main bulk of an HTML document and are responsible for adding semantic structure to a page’s content. Within the webpage example we used tags to markup the structure of the content with opening tags and closing tags. We started the page off with an opening tag and finished it with an closing tag. Within this tag we also nested other tags to build the page. It’s best to remember that all tags must be closed (there can be some exceptions depending on which doctype you’re using but it’s best when initially starting out to close all tags). Where a tag doesn’t contain any content, the tag should close itself. For example, the line-break tag becomes and the image tag becomes. HTML Attributes and Values Attributes are extra bits of information which can be added to a tag. The purpose of attributes is to add extra information to the tag which can also be used to style the element. Attributes always appear within an opening tag and the value of the attribute always appears in quote marks. 4 For example, within the webpage example, we used the following bit of code Within this example, charset is the attribute and utf-8 is the value of that attribute. Textual Tags Basic HTML Tag Description Defines the document type Defines an HTML document Contains metadata/information for the document Defines a title for the document Defines the document's body to Defines HTML headings Defines a paragraph Inserts a single line break Defines a thematic change in the content Defines a comment Defines big text Defines a section that is quoted from another source Not supported in HTML5. Use CSS instead. Defines centered text Defines the title of a work Defines a piece of computer code Defines text that has been deleted from a document Defines emphasized text Not supported in HTML5. Use CSS instead. Defines font, color, and size for text Defines marked/highlighted text 5  Defines a scalar measurement within a known range (a gauge) Defines a short quotation Defines smaller text Defines important text Defines a variable Forms and Input Tag Description Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a clickable button Defines a drop-down list Defines a group of related options in a drop-down list Defines an option in a drop-down list Defines a label for an element Groups related elements in a form Defines a caption for a element Specifies a list of pre-defined options for input controls Defines the result of a calculation Images Tag Description Defines an image Used to draw graphics, on the fly, via scripting (usually JavaScript) Defines a container for multiple image resources Audio / Video Tag Description Defines sound content Defines multiple media resources for media elements (, and ) Defines text tracks for media elements ( and ) 6  Defines a video or movie Links Tag Description Defines a hyperlink Defines the relationship between a document and an external resource (most used to link to style sheets) Defines navigation links Lists Tag Description Defines an unordered list Defines an ordered list Defines a list item instead Defines a directory list Tables Tag Description Defines a table Defines a table caption Defines a header cell in a table Defines a row in a table Defines a cell in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table Specifies column properties for each column within a element Specifies a group of one or more columns in a table for formatting Meta Info Tag Description Defines information about the document Defines metadata about an HTML document 7 Specifies a default color, size, and font for all text in a document III. Application/Activity ACTIVITY: ACTIVITY 1 DATE OF SUBMISSION: NEXT MEETING 1. What are HTML tags? (Own definition) 2. Give at least 10 examples of HTML tags and explain it one by one, why it is important? 3. What is the different between tag in HTML and Attribute in HTML? IV. Assessment ASSESMENT: ASSESSMENT 1 DATE OF SUBMISSION: NEXT MEETING 1. What is the advantage of have an internet? 2. What are the ISP in the Philippines? (Give at least 7 example of ISP here in the Philippines) V. Other References  Shelly, Gary B., Denise M. Woods, Willaim J. Dorin., HTML5 and CSS comprehensive 7 th Edition., Course Technology. 2013.Brian P. Hogan - HTML5 and CSS3: Develop with Tomorrow's Standard Today, 2010 The Pragmatic Bookshelf, Dalas Texas  Towers, J. Tarin– Macromedia Dreamweaver for Windows & Macintosh, 2005 USA: Peach pit Press  Vaswani, Vikram– How to Do Everything with PHP and MySQL, 2005 McGraw-Hill/Osborne Michael Morrison - Head First JavaScript 2008: O'REILLY 8  College of Information Technology First Semester, A.Y. 2023-2024 MODULE 2 HTML 5 Introduction This module entitled HTML 4.01 vs HTML 5 is about all web pages. Without HTML, you wouldn’t be able to organize text or add images or videos to your web pages. HTML is the beginning of everything you need to know to create engaging web pages! Date and Time Allotment I. Objectives At the end of the end of this module, students should be able to: 1. Differentiate an HTML 4.01 vs HTML5 2. Learn fundamentals of HTML and how to create a file using any text editor 3. Build a web page II. Lecture Difference Between HTML 4.01 VS HTML 5: HTML5 is the next revision of the HTML standard superseding HTML 4.01. HTML5 is a standard for structuring and presenting content on the World Wide Web. It is cooperation between the (W3C) World Wide Web Consortium and the Web Hypertext Application Technology Working Group. It has new features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Microsoft Silverlight and Adobe Flash. The latest version of almost web browser supports the html5 like Google Chrome, Apple Safari, Mozilla Firefox, Opera etc. Html5 supported by all mobile browser also like android, iPhones, iPads. It has many new features and attributes which is useful in the making of beautiful websites. Example of HTML 4.01 This is header part Hello html4 Example of HTML 5 9  This is document title This is a heading Document content goes here..... Doctype Doctype Declaration - To define a doctype, we use the tag on the very first line of code. Using Style Sheets What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. Using CSS  Inline - by using the style attribute inside HTML elements  Internal - by using a element in the section  External - by using a element to link to an external CSS file Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the element to blue, and the text color of the element to red: Example: A Blue Heading A red paragraph. 10 Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the section of an HTML page, within a element. The following example sets the text color of ALL the elements (on that page) to blue, and the text color of ALL the elements to red. In addition, the page will be displayed with a "powderblue" background color: Example: body {background-color: powderblue;} h1 {color: blue;} p {color: red;} This is a heading This is a paragraph. External CSS An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the section of each HTML page: Example: This is a heading This is a paragraph. 11 CSS Colors, Fonts and Sizes Here, we will demonstrate some commonly used CSS properties. You will learn more about them later. The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used. Example: h1 { color: blue; font-family: verdana; font-size: 300%; } p{ color: red; font-family: courier; font-size: 160%; } This is a heading This is a paragraph. CSS Border The CSS border property defines a border around an HTML element. Example: p{ border: 2px solid powderblue; } 12 CSS Padding The CSS padding property defines a padding (space) between the text and the border. p{ border: 2px solid powderblue; padding: 30px; } CSS Margin The CSS margin property defines a margin (space) outside the border. Example p{ border: 2px solid powderblue; margin: 50px; } Link to External CSS External style sheets can be referenced with a full URL or with a path relative to the current web page. Example: HTML Basics 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: 13  My First Heading My first paragraph. 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: 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 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 14 Example: This is a link HTML Images HTML images are defined with the tag. The source file (src), alternative text (alt), width, and height are provided as attributes Example: Fundamental Building Blocks of HTML  Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.  Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value. Syntax: content  Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags are termed as HTML elements. Example: 15  The basic building blocks of HTML The building blocks This is a paragraph tag The style is attribute of paragraph tag The element contains tag, attribute and content Output: The building blocks This is a paragraph tag The style is attribute of paragraph tag The element contains tag, attribute and content Building Practical Web Pages using HTML Lesson Overview & Knowledge Required  which HTML elements are required for a basic web page and what they do  how to use HTML tags to turn basic text into headings and lists  how to use HTML division sections to style blocks of content. Program Code To begin, our HTML document contains only the basic HTML elements required to render (display) a web page correctly in a browser. It also contains a paragraph element with some text inside of it so that the rendered page is not completely blank, which would be kind of boring and useless, don't you think? Example: This is a proud, independent paragraph. 16 Required HTML Elements These required HTML elements consist of start and end tags and everything in between: HTML | : These tags tell the browser it is dealing with an HTML document. All other elements are nested within these start and end tags. HEAD | : The very first element nested inside of the HTML element holds titles, meta information and scripts, if used. BODY | : Also nested within the HTML element and directly after the HEAD element, this element holds the contents of the page to be rendered. We require the following element because we want to see something on our page! PARAGRAPH | : Paragraph tags signal the beginning and end of a paragraph of text, which the browser sets apart from elements appearing before or after with some vertical space. When you open your document in a web browser, it should look something like this: Code Application Now that you have created a very basic web page, it's your turn to add the rest of the content. Keep that page open in your browser so that all you have to do is refresh the page after you save the changes in the text editor. Division Section Let's change the look of a certain area of the page by giving it a background color. Cascading Style Sheets (CSS) is a computer language used with HTML and some other markup languages, such as the Extensible Markup Language (XML), to change the presentation of the content. CSS is usually in its own document and is applied to multiple pages of a web site. Styles for a single web page can either be defined within the HEAD element or within the start tag of a single element within a page, inline CSS (this is what we are going to do). DIV | : Put paragraphs, headings, images, lists and other content inside of a DIV element so you can affect its appearance with borders, padding (the space between the contents and the border of a division container), fonts, colors and other properties using CSS. Give the DIV element the background-color style attribute. To add an attribute to an element, you need to provide a property-name:property-value pair followed by a semicolon, all inside double quotation marks. Example: 17 Heading Of the six HTML headings, this heading element with the smallest number renders the top-level, largest heading. H1 | : While this is the largest and top-level heading, the H6 element is the smallest and most granular-level heading. Copy the following line and paste it inside the H1 element in your file: The Advantages of Learning HTML Here's how the page should look with the heading inside a colorful division section, leaving the paragraph of text alone in the snow: III. Application/Activity ACTIVITY: ACTIVITY 2 DATE OF SUBMISSION: NEXT MEETING 1. In creating a website, there are 3 categories of CSS which is Inline, Internal and External. Which of these 3 are the most popular in creating website? Why? 2. What is the difference between Inline-CSS and External CSS? IV. Assessment ASSESMENT: ASSESSMENT 2 DATE OF SUBMISSION: NEXT MEETING 1. What Text Editor is best in creating a website? Why? 2. Give 5 example of Framework in creating a website and explain. V. Other References  Shelly, Gary B., Denise M. Woods, Willaim J. Dorin., HTML5 and CSS comprehensive 7 th Edition., Course Technology. 2013.Brian P. Hogan - HTML5 and CSS3: Develop with Tomorrow's Standard Today, 2010 The Pragmatic Bookshelf, Dalas Texas  Towers, J. Tarin– Macromedia Dreamweaver for Windows & Macintosh, 2005 USA: Peach pit Press  Vaswani, Vikram– How to Do Everything with PHP and MySQL, 2005 McGraw-Hill/Osborne Michael Morrison - Head First JavaScript 2008: O'REI 18  College of Information Technology First Semester, A.Y. 2023-2024 MODULE 3 CASCADING STYLE SHEET Introduction This module entitled CASCADING STYLE SHEET is about HTML elements are the building blocks of the HTML web page. The elements consist of a pair of tags (starting and ending tags) and the textual or graphical content inside of the tags. Date and Time Allotment I. Objectives At the end of the end of this module, students should be able to: 1. Define and use CSS in building web pages. 2. Learn how to format page in a separate page outside the HTML file II. Lecture styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p{ font-family: verdana; font-size: 20px; } 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: 19 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. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page! 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. Example In this example all elements will be center-aligned, with a red text color: p{ color: red; text-align: center; } Example Explained  p is a selector in CSS (it points to the HTML element you want to style: ).  color is a property, and red is the property value  text-align is a property, and center is the property value Attributes Attributes associated with elements are − 20  Attribute Value Description type text/css Specifies the style sheet language as a content-type (MIME type). This is required attribute. Inline CSS - The style Attribute You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax − Attributes Attribute Value Description style style rules The value of style attribute is a combination of style declarations separated by semicolon (;). Example Following is the example of inline CSS based on the above syntax – This is inline CSS It will produce the following result − External CSS - The Element The element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with.css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using element. Here is the generic syntax of including external CSS file − Attributes Attributes associated with elements are − Attribute Value Description 21  type text css Specifies the style sheet language as a content-type (MIME type). This attribute is required. href URL Specifies the style sheet file having Style rules. This attribute is a required. Example Consider a simple style sheet file with a name mystyle.css having the following rules − h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing:.4em; margin-bottom: 1em; text-transform: lowercase; } Now you can include this file mystyle.css in any HTML document as follows − Imported CSS - @import Rule @import is used to import an external stylesheet in a manner similar to the element. Here is the generic syntax of @import rule. @import "URL"; Here URL is the URL of the style sheet file having style rules. You can use another syntax as well − @import url("URL"); Example Following is the example showing you how to import a style sheet file into HTML document − @import "mystyle.css"; Example p{ color: red; text-align: center; } 22  Hello World! It will produce the following result − Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for , , and elements: Example table, th, td { border: 1px solid black; } Full-Width Table The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100% to the element: Example table { width: 100%; } 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 23   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. Example Set different margins for all four sides of a element: p{ margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } HTML Lists and CSS List Properties In HTML, there are two main types of lists:  unordered lists () - the list items are marked with bullets  ordered lists () - the list items are marked with numbers or letters The CSS list properties allow you to:  Set different list item markers for ordered lists  Set different list item markers for unordered lists  Set an image as the list item marker  Add background colors to lists and list items 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 24   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. Example Set different padding for all four sides of a element: div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } CSS Dimension Properties The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines. Property Description Values height Sets the height of an element Auto / length / % line-height Sets the distance between lines Normal / number / length / % max-height Sets the maximum height of an element none / length / % max-width Sets the maximum width of an element none / length / % min-height Sets the minimum height of an element length / % min-width Sets the minimum width of an element length / % width Sets the width of an element Auto / length / % III. Application/Activity ACTIVITY: ACTIVITY DATE OF SUBMISSION: NEXT MEETING 1. Why CSS is important in HTML? 2. What is CSS used for? IV. Assessment 25 ASSESMENT: ASSESSMENT DATE OF SUBMISSION: NEXT MEETING 1. V. Other References  Shelly, Gary B., Denise M. Woods, Willaim J. Dorin., HTML5 and CSS comprehensive 7 th Edition., Course Technology. 2013.Brian P. Hogan - HTML5 and CSS3: Develop with Tomorrow's Standard Today, 2010 The Pragmatic Bookshelf, Dalas Texas  Towers, J. Tarin– Macromedia Dreamweaver for Windows & Macintosh, 2005 USA: Peach pit Press  Vaswani, Vikram– How to Do Everything with PHP and MySQL, 2005 McGraw-Hill/Osborne 26  College of Information Technology Second Semester, A.Y. 2022-2023 MODULE 4 BOOTSRAP 3 – Basic Structures of Bootstrap (Part 1) Introduction What is Bootstrap?  Bootstrap is a free front-end framework for faster and easier web development  Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins  Bootstrap also gives you the ability to easily create responsive designs Bootstrap History Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open-source product in August 2011 on GitHub. In June 2014 Bootstrap was the No.1 project on GitHub! Why Use Bootstrap? Advantages of Bootstrap:  Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap  Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops  Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework  Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera) Bootstrap CDN If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery: 27  Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set: 2. Bootstrap 3 is mobile-first Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following tag inside the element: The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. 3. Containers Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from: 28  1. The.container class provides a responsive fixed width container 2. The.container-fluid class provides a full width container, spanning the entire width of the viewport Two Basic Bootstrap Pages 29 Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: Grid Classes The Bootstrap grid system has four classes:  xs (for phones - screens less than 768px wide) 30   sm (for tablets - screens equal to or greater than 768px wide)  md (for small laptops - screens equal to or greater than 992px wide)  lg (for laptops and desktops - screens equal to or greater than 1200px wide) The classes above can be combined to create more dynamic and flexible layouts. Basic Structure of a Bootstrap Grid The following is a basic structure of a Bootstrap grid: Three Equal Columns The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones or screens that are less than 768px wide, the columns will automatically stack: 31  Two Unequal Columns The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:.col-sm-4.col-sm-8 Contextual Colors and Backgrounds Bootstrap also has some contextual classes that can be used to provide "meaning through colors". The classes for text colors are:.text-muted,.text-primary,.text-success,.text-info,.text- warning, and.text-danger: 32 This text is muted. This text is important. This text indicates success. This text represents some information. This text represents a warning. This text represents danger. Prepared by: SIR DANIELL FERNANDEZ Faculty, CIT Checked by: FREDERICK J. SORIANO, MIT Program Head, CIT 33