CS3 - First Quarter

1.0 Introduction to web development

Life now seems to be uneventful without the Internet. Everything in our daily life, from education to communication to entertainment is conducted with the help of being online. It makes accomplishing a lot of tasks easier, from searching for information to communicating with others, tasks which would otherwise be time-consuming.

2.0 - 2.1 doctype, html, head, title, body, meta

In the previous module, you have learned a bit about how the Internet works and about HTML as the language to use in creating web pages that makes information over the Internet available for viewing on browsers. In this module, you will learn how to create your first webpage.

2.0 - 2.2 div, span, ul, ol, h1 to h6

In the previous module, you have learned the basic structure of an HTML code and how to save HTML files. In this module, you will learn about some of the ways to place text in your website.

2.0 - 2.3 img, a, br, p Tag-specific attributes (href and src)

3. 1 table, tr, td, th, colgroup, col

HTML (Hyper Text Mark-up Language) defines the structure and layout of a Web page by using a variety of tags and attributes. Tables are one of the most useful and complex structures in HTML for presenting tabular data. The table structure allows us to arrange data in tabular model, using a model of horizontal rows and vertical columns and each row is divided into cells. A table cell may contain any kind of information, including numbers, text elements, even pictures and multimedia elements.

3.2 Attributes specific to tables (rowspan, colspan of td/th)

In this module, we will discuss table cells that stretch across two or more rows or column in the table, and the different attributes of table data or table header elements use for more complex table configurations.

4. 1 Color

Just like any printed material, a websites' design and layout attracts attention and eventually gains an audience. It also greatly influences user experience and the efficiency of the website to deliver its purpose. Color plays an important role in creating an aesthetically pleasing website.

4.2 Wireframes

Designing a web site or a mobile app could be challenging because of several components that will be included inside it to enable it to convey a message, capture an audience and create a total user experience. One of the tools that could be used to assist a web or app developer to design and layout a website or an app is a wireframe.

5. 1 Selectors and Basic Syntax

CSS stands for Cascading Style Sheets. It is a design language that is used to define how an HTML element should be displayed on the screen or in any media (CSS Introduction, n.d.). The CSS works by associating rules with HTML elements. Using these rules, you can add style on the content of a specified element of the page. Styling an entire webpage might be a complex process but defining a simple CSS rule can be easily understood. Below is an example of a simple CSS rule.

5.2 Types of CSS

Designing a web site or a mobile app could be challenging because of several components that will be included inside it to enable it to convey a message, capture an audience and create a total user experience. One of the tools that could be used to assist a web or app developer to design and layout a website or an app is a wireframe.

5. 3 CSS Properties

CSS stands for Cascading Style Sheets. It is a design language that is used to define how an HTML element should be displayed on the screen or in any media (CSS Introduction, n.d.). The CSS works by associating rules with HTML elements. Using these rules, you can add style on the content of a specified element of the page. Styling an entire webpage might be a complex process but defining a simple CSS rule can be easily understood. Below is an example of a simple CSS rule.