Scribd
Upload
10 views

Comprog

Handouts 3 for comprog

Uploaded by

Christina Ramos
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

Comprog

Handouts 3 for comprog

Uploaded by

Christina Ramos
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

SOUTHWESTERN INSTITUTE OF BUSINESS AND TECHNOLOGY

Panggulayan, Pinamalayan Oriental Mindoro

HTML
& CSS 1
Handouts

Name:___________________
Course :_________________
Section:__________________

1
SOUTHWESTERN INSTITUTE OF BUSINESS AND TECHNOLOGY
Panggulayan, Pinamalayan Oriental Mindoro

INTRODUCTION

The HyperText Markup Language or HTML is the standard


markup language for displaying documents designed through an
HTML Editor. It defines the meaning and structure of web
content. Often assisted by tools such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript. In order to run
the HTML programs, Web browsers receive HTML documents
from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues
for its appearance.

OBJECTIVES

At the end of this handout, the students should be able to:


A. Understand how the Internet works as a way of disseminating
information in conceptualizing a website.
B. Apply HTML Basic elements in creating simple webpages.
C. Create an HTML Program using different ways of creating texts and
adding colors.
D. Successfully use elements and parameters used in manipulating
Anchors and Hyperlinks in HTML.
E. Integrate images to an HTML page with specifications.

TOPICS:
 Getting Started
 HTML Basics
 Working with Texts and Colors
 Working with Anchors and Hyperlinks
 Images
2
Week 1

UNIT I – GETTING STARTED


Before diving in to the actual programming and designing of a website, you
first must understand how a website works. In this unit, you will understand
a few thing about the Internet and the considerations in creating a website.

Key words:
URL (uniform resource locator)
Web Servers
Sites
World Wide Web vs The Internet
Pages
Web Browsers
Internet Service Providers

Planning Your Website


In making a website, a programmer/designer needs to consider a few
things:
Target Audience – Whom the website is for?
Goal or Objective – What is the website for?
Create the Structure – How the pages of the website links with each other?
Organize Content – What will the website visitors will see?
Develop Navigation – How the visitors navigate your website between pages and
sections?

Exercise #1: Plan a hypothetical website.

Target Audience/s:
1. 4.
2. 5.
3.

3
Goal or Objective:
________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________

Create a Structure: (minimum of 5 webpages)

Content Organization:
Category Name Folder

4
Week 2

UNIT II – HTML Basics


HTML or HyperText MarkUp Language is a series of elements telling what
a Web Browser what to display and do. For an HTML program to work, the
program needs to follow the correct syntax. HTML Elements always begin
with a start tag (example: <title>, <head>, <body>) and ends with an end
tag (example: <title/>, </head>, </body>). In this unit, you will learn and
understand the basic HTML Tags and different ways of adding additional
spaces.

Basic HTML Tags:


<html> - frames the entire HTML page
<head> - frames the identification information for the page (i.e. title)
<title> - gives the name of the page as appeared at the top of the browser
<body> - frames the content of the page
<p> - displaying a paragraph

Ways on Adding Additional Spaces:


&nbsp; - adds a single space
&ensp; - adds 2 spaces
&emsp; - adds 4 spaces
<br> - line break
<pre> - tells the program to run the texts written as they are typed.

Exercise #2: Write a pen and paper HTML Program using basic
HTML Tags and Ways of Adding Additional Spaces that displays
your personal information.
(Sample Output)

5
Write your code below:

Week 3

UNIT II – Working with Texts and Colors


In this unit, you will learn and understand the basic properties in
HTML and CSS associated with Texts and Colors.

Tags Associated with Organizing/Formatting Texts:


<p> - paragraphs
<h1> - <h6> - headings
<b> or <strong> - bold
<i> or <em> - italic
<u> - underline
<mark> - highlights a text
<hr> - horizontal rule

6
Text Alignment using Style Sheet
text-align - aligns the text (left, right, center, and justify)
vertical-align - aligns text vertically

Formatting Fonts using Style Sheet


font-style - changing the style of the text
font-weight - changes how light or heavy the texts appears
font-family - changes the text in any font selected
font-size - changes the size of the text
font-variant - specifies whether text is displayed as normal or small caps
color: - changes the color of the text

Ways in Adding Colors


Hexadecimal Color - decimal values of colors in RGB in hexadecimal codes
RGB Values - individual values of RGB
RGB Percentage - individual values of RGB in percentage
Color Names - 17 color names supported by web Browsers
RGBA - RGB values with A (Alpha) or transparency of a color

Formatting Background with Style Sheets


background-color - changes the color of the background
background-image - sets an image for the background

Exercise #3: Write a pen and paper HTML Program using Text,
Font, Color, and Background properties that displays a lyrics
page. (sample page below)

7
Write your code below:

Week 4

Unit IV – Working with Anchors and Hyperlinks


In this unit, you will learn how to manipulate the anchor element into adding
links, to other web pages, to sections within the same web page, etc. You
will also learn about customizing the links with the use of Style Sheets.

Key Words:
Absolute Links - used when linking to pages not part of your website
Relative Links - linking a page contained in your website

8
Tags and Attributes Associated with Anchors
<a> - anchor/link
href - specifies the source where the anchor is linking to
name - enables naming a section of your website
mailto - linking to an email address
ftp - File Transfer Protocol, a way to send or receive files thru
Internet
title - a tool that can be used to tell what clicking the anchor does
tabindex - defines the tab order of the page
accesskey - assigns a keyboard shortcut for a page
target=”_blank” - opens the page in a new tab
target=”_self” - opens the page in the same page

Exercise #4 Write up the pen and paper HTML Program as close


as the output shown below:

Write your code below:

9
Week 5

Unit V - Working with Images


In this unit, you will learn and understand how to manipulate
images using HTML and Basic CSS Properties.

Tags and Attributes Associated in Images:


<img> - tag telling the browser to display an image
src - specifies the URL of the image
srcset - images to use for difference in high-definition displays, etc
sizes - image sizes between breakpoints
alt - alternative text displayed if the image fails to load
width - specifies the width of the image
height - specifies the height of the image
<map> - element used to create an image map
usemap - defines that an image will be used as an image map
<area> - specifies the clickable area
shape - defines the shape of the clickable area
<picture> - defines a container for multiple image resources

Exercise #5 Write a pen to paper HTML Program that displays a


simple News Article page using basic Image properties of HTML
and CSS. (sample output below)

10
Write your code below:

Thankyou so much !!!


Prepared by :
Monseph Johnrey M. Balenton, LPT

11

You might also like