CMPS 262: Advanced Programming

Introduction

At this point in the IT program you have seen the basics of HTML and CSS throughout the coursework. In this module, we will look at both of these technologies in more detail. HTML and CSS, together with JavaScript which we have covered in depth, are three essential technologies to create websites and web applications. The HyperText Markup Language (HTML) is used to create pages, Cascading Style Sheets (CSS) are used to add styling to pages, and JavaScript is used to add interaction to web pages.

Pages on the web use HTML to let the browser know what should be displayed. HTML is not a programming language (like JavaScript) but a markup language which makes it much easier to understand and use. An HTML document consist of several sections specified by tags or elements. For example, the head section contains metadata an the body section contains what should actually be displayed. Examples of other elements are p for paragraph and br for line breaks.

CSS is included in HTML files to change the appearance of pages. It can either be specified inline, using the style tag, or included as a separate file. It is a good practice to separate content and presentation and CSS allows us to do so. CSS targets specific elements or groups of elements and can change essentially everything related to the presentation, such as the font type or background color.

Module Objectives

• Describe how JavaScript, HTML, and CSS relate to each other
• Build advanced user interfaces using HTML and CSS
• Implement HTML pages using the common HTML elements (p, div, table, etc.)
• Apply styling the HTML pages using CSS
• Use CSS selectors to apply styling to specific elements
• Describe the difference between IDs and classes
• Design and implement navigation bars

Learning Resources

• Study Chapters 1 through 25 in A Smarter Way to Learn HTML & CSS (skip the ones you are already familiar with)
• Consult other chapters on a need to know basis
• When desired, work through the online exercises (see here)

Learning Activities

• Readings
• Discussion Board
• Programming Project

For Further Study

• Read more about HTML basics on the Mozilla Developer Network