COLLEGE OF INFORMATION AND

COMMUNICATION TECHNOLOGY

COMPUTER SCIENCE
DEPARTMENT

Introduction to
Computing
(HTML/CSS)

Online Module: Laboratory Manual

Taguig City University
Gen. Santos Ave., Central Bicutan, Taguig City
INTRODUCTION

Programming, or coding, is like solving a puzzle. Consider a human language, like English or
French. We use these languages to turn thoughts and ideas into actions and behavior. In
programming, the goal of the puzzle is exactly the same - you're just driving different kinds of
behavior, and the source of that behavior isn't a human. It's a computer.

A programming language is our way of communicating with software. The people who use
programming languages are often called programmers or developers. The things we tell
software using a programming language could be to make a webpage look a certain way, or
to make an object on the page move if the human user takes a certain action.

So, when a web designer is given an end goal like "create a webpage that has this header,
this font, these colors, these pictures, and an animated unicorn walking across the screen
when users click on this button," the web designer's job is to take that big idea and break it
apart into tiny pieces, and then translate these pieces into instructions that the computer can
understand - including putting all these instructions in the correct order or syntax.

Every page on the web that you visit is built using a sequence of separate instructions, one
after another. Your browser (Chrome, Firefox, Safari, and so on) is a big actor in translating
code into something we can see on our screens and even interact with. It can be easy to forget
that code without a browser is just a text file -- it's when you put that text file into a browser
that the magic happens. When you open a web page, your browser fetches the HTML and
other programming languages involved and interprets it.

HTML and CSS are actually not technically programming languages; they're just page
structure and style information. But before moving on to JavaScript and other true languages,
you need to know the basics of HTML and CSS, as they are on the front end of every web
page and application.

In the very early 1990s, HTML was the only language available on the web. Web developers
had to painstakingly code static sites, page by page. A lot's changed since then: Now there
are many computer programming languages available which includes HTML5 and CSS.

OVERVIEW
This course introduces students to basic web design using HTML (Hypertext Markup
Language) and CSS (Cascading Style Sheets). The course does not require any prior
knowledge of HTML or web design. Throughout the course students are introduced to planning
and designing effective web pages; implementing web pages by writing HTML and CSS code;
enhancing web pages with the use of page layout techniques, text formatting, graphics,
images, and multimedia; and producing a functional, multi-page website.

OBJECTIVES
At the end of this course, the students should be able to:
➢ Design website using Hypertext Markup Language (HTML) and Cascading Style
Sheet (CSS).
➢ Recognize and identify HTML web page elements
 ➢ Insert a graphic within a web page.
➢ Create a link within a web page.
➢ Create a table within a web page.
➢ Insert heading levels within a web page.
➢ Insert ordered and unordered lists within a web page.
➢ Apply CSS to format web page elements
➢ Apply effective web design principles.
➢ Enhance web pages using text formatting, color, graphics, images, and multimedia
➢ Incorporate forms into web pages
➢ Plan, design, and publish a multi-page website

PRE-TEST

1. What does HTML stand for?

a. Hyperlinks and Text Markup Language
b. Home Tool Markup Language
c. Hyper Text Markup Language
2. Who is making the Web standards?
a. Google
b. Mozilla
c. The World Wide Web Consortium
d. Microsoft
3. Choose the correct HTML element far the largest heading:
a. <h1>
b. < heading >
c. < head >
d. <h6>
4. What is the correct HTML element for inserting a line break?
a. <br>
b. <break>
c. <lb>
5. What is the correct HTML for adding a background color?
a. <body style=”background-color:yellow;"›
b. <body bg="yellow">
c. <background>yellow</background>
6. Choose the correct HTML element to define important text
a. <b>
b. <i>
c. <important>
d. <strong>
7. Choose the correct HTML element to define emphasized text
a. <italic>
b. <em>
c. <i>
8. What is the correct HTML for creating a hyperlink?
a. <a url="http://www.taguig.gov.ph">Taguig Website</a>
b. <a name=" http://www.taguig.gov.ph ">Taguig Website </a>
c. <a href=" http://www.taguig.gov.ph ">Taguig Website </a>
d. <a> http://www.taguig.gov.ph </a>
9. Which character is used to indicate an end tag?
a. /
 b. *
c. <
d. ^
10. How can you open a link in a new tab/browser window?
a. <a href="url" target="new">
b. <a href="url" new>
c. <a href="url" target="_blank">
11. Which of these elements are all <table> elements?
a. <thead> <body> <tr>
b. <table> <tr> <tt>
c. <table> <tr> <td>
d. <table> < head> <tfoot>
12. Inline elements are normally displayed without starting a new line.
a. True
b. False
13. How can you make a numbered list?
a. <dl>
b. <list>
c. <ol>
d. <ul>
14. How can you make a bulleted list?
a. <dl>
b. <ol>
c. <list>
d. <ul>
15. What is the correct HTML for making a checkbox?
a. <input type="check”>
b. <checkbox>
c. <check>
d. <input type="checkbox''>
16. What is the correct HTML for making a text input field?
a. <textinput type="text”>
b. <input type="text">
c. <textfield >
d. <input type="textfield">
17. What is the correct HTML for making a drop-down list?
a. <input type="dropdown">
b. <list>
c. <select>
d. <input type="list">
18. What is the correct HTML for making a text area?
a. <input type="textarea">
b. <input type="textbox">
c. <textarea>
19. What is the correct HTML for inserting an image?
a. <img src="image.gif" alt="Mylmage">
b. <image src="image.gif” alt="Mylmage">
c. <img href="image.gif' alt="Mylmage">
d. <img alt="Mylmage">image.gif</img>
20. What is the correct HTML for inserting a background image?
a. <background img="background.gif”>
b. <body style="background-image:url(background.gif)">
 c. <body bg="background.gif”>
21. An <iframe> is used to display a web page within a web page.
a. True
b. False
c. There is no such thing as an <iframe>
22. HTML comments start with <!-- and end with -->
a. True
b. False
23. Block elements are normally displayed without starting a new line.
a. True
b. False
24. Which HTML element defines the title of a document?
a. <title>
b. <head>
c. <meta>
25. Which HTML attribute specifies an alternate text for an image, if the image cannot be
displayed?
a. alt
b. src
c. title
d. longdesc
26. Which doctype is correct for HTML5?
a. <IDOCTYPE html>
b. <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "
http://www.w3.org/TR/htm15/strict.dtd" >
c. <IDOCTYPE HTMLS>
27. Which HTML element is used to specify a footer for a document or section?
a. <section>
b. <bottom>
c. <footer>
28. In HTML, you can embed SVG elements directly into an HTML page.
a. True
b. False
29. What is the correct HTML element for playing video files?
a. <media>
b. <movie>
c. <video>
30. What is the correct HTML element for playing audio files?
a. <mp3>
b. <sound>
c. <audio>
31. The HTML global attribute, "contenteditable" is used to:
a. Specify whether the content of an element should be editable or not
b. Specifies a context menu for an element.
 c. The menu appears when a user right-clicks on the element Update content
from the server
d. Return the position of the first found occurrence of content inside a string
32. In HTML, onblur and onfocus are:
a. Style attributes
b. Event attributes
c. HTML elements
33. Graphics defined by SVG is in which format?
a. HTML
b. XML
c. CSS
34. The HTML <canvas> element is used to:
a. draw graphics
b. display database records
c. manipulate data in MySQL
d. create draggable elements
35. In HTML, which attribute is used to specify that an input field must be filled out?
a. required
b. formvalidate
c. placeholder
d. validate
36. Which input type defines a slider control?
a. search
b. slider
c. range
d. controls
37. Which HTML element is used to display a scalar measurement within a range?
a. <range>
b. <gauge>
c. <meter>
d. <measure>
38. Which HTML element defines navigation links?
a. <navigation>
b. <navigate>
c. <nav>
39. In HTML, what does the <aside> element define?
a. A navigation list to be shown at the left side of the page
b. The ASCII character-set; to send information between computers on the
Internet
c. Content aside from the page content
40. Which HTML element is used to specify a header for a document or section?
a. <top>
b. <header>
c. <head>
d. <section>
41. What does CSS stand for?
a. Colorful Style Sheets
b. Cascading Style Sheets
c. Creative Style Sheets
d. Computer Style Sheets
42. What is the correct HTML for referring to an external style sheet?
a. <style src="mystyle.css">
 b. <link rel="stylesheet" type="text/css" href="mystyle.css">
c. <stylesheet>mystyle.css</stylesheet>
43. Where in an HTML document is the correct place to refer to an external style sheet?
a. In the <body> section
b. At the end of the document
c. In the <head> section
44. Which HTML tag is used to define an internal style sheet?
a. <css>
b. <script>
c. <style>
45. Which HTML attribute is used to define inline styles?
a. class
b. style
c. font
d. styles
46. Which is the correct CSS syntax?
a. {body;color:black;}
b. body {color: black;}
c. {body:color=black;}
d. body:color=black;
47. How do you insert a comment in a CSS file?
a. /* this is a comment */
b. ' this is a comment
c. // this is a comment //
d. // this is a comment
48. Which property is used to change the background color?
a. bgcolor
b. color
c. background-color
49. How do you add a background color for all <h1> elements?
a. all.h1 {background-color:#FFFFFF;}
b. h1 {background-color:#FFFFFF;}
c. h1.all {background-color:#FFFFFF;}
50. Which CSS property is used to change the text color of an element?
a. color
b. fgcolor
c. text-color
51. Which CSS property controls the text size?
a. font-size
b. text-size
c. text-style
d. font-style
52. What is the correct CSS syntax for making all the <p> elements bold?
a. <p style="text-size:bold;">
b. p {font-weight:bold;}
c. <p style="font-size:bold;">
d. p {text-size:bold;}
53. How do you display hyperlinks without an underline?
a. a {decoration:no-underline;}
b. a {text-decoration:none;}
c. a {text-decoration:no-underline;}
d. a {underline:none;}
54. How do you make each word in a text start with a capital letter?
a. transform:capitalize
b. text-transform:capitalize
c. You can't do that with CSS
d. text-style:capitalize
55. Which property is used to change the font of an element?
a. font-style
b. font-weight
c. font-family
56. How do you make the text bold?
a. font-weight:bold;
b. style:bold;
c. font:bold;
57. How do you display a border like this:
The top border = 10 pixels
The bottom border = 5 pixels
The left border = 20 pixels
The right border = 1pixel?
a. border-width:10px 1px 5px 20px;
b. border-width:10px 20px 5px 1px;
c. border-width:10px 5px 20px 1px;
d. border-width:5px 20px 10px 1px;
58. Which property is used to change the left margin of an element?
a. margin-left
b. indent
c. padding-left
59. When using the padding property; are you allowed to use negative values?
a. No
b. Yes
60. How do you make a list that lists its items with squares?
a. list: square;
b. list-type: square;
c. list-style-type: square;
61. How do you select an element with id 'demo'?
a. .demo
b. *demo
c. demo
d. #demo
62. How do you select elements with class name 'test'?
a. .test
b. test
c. *test
d. #test
63. How do you select all p elements inside a div element?
a. div p
b. div + p
c. div.p
64. How do you group selectors?
a. Separate each selector with a plus sign
b. Separate each selector with a space
c. Separate each selector with a comma
65. What is the default value of the position property?
a. absolute
b. relative
c. static
d. fixed