SISTECH COLLEGE

OF SANTIAGO CITY, INC.

IT 2

Prepared by: Checked by:

Nick James I. Ligot Amelia J. Baniqued, MIT

IT Instructor College Dean

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

What is PROGRAMMING?

 Codes that is written by programmers

 It is process of designing/building something in a logical ways
 A computer program consist of codes that is executed to perform particular tasks or instruct
the computer to perform various task.
Example:

 Automation
 Applications / Softwares (Computer or Mobile)
 Operating Systems
 Games (Online/Oflline)

BASIC FUNDAMENTAL CONCEPTS OF PROGRAMMING

1. Variable Declaration.
2. Basic Syntax.
3. Data Type and Structures.
4. Flow Control Structures (Conditionals and loops)
5. Functional Programming.
6. Object-Oriented Programming.
7. Debugging.
8. IDEs and Coding Environments.

PROGRAMMING LANGUAGES - are the tools we use to write instructions for computers to follow.
1. C/C#
2. C++
3. JAVA
4. KOTLIN
5. RUBY
6. PHYTON
7. JAVASCRIPT
8. PHP

PROGRAMMING LANGUAGE ARE GROUPED IN A VARIETY OF CATEGORIES.

1. Machine Language – language consist of 0’s and 1’s (Binary) High-level language
2. Assembly Language- a low level language, assemblies translate human code to machine code
3. Procedural Languages – this approach goes through a series of procedures before a program is
executed (Go and Julia)

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

4. Scripting Languages – instead of compiling it into machine code, it will interpret the code before the
execution. (Javascript and Php)
5. Functional languages – through a collection of smaller functions it work with the idea of building
complex programs (Haskell and Scala)
6. Object-oriented Languages – this works with the idea of building programs around collections of
objects. (JAVA and Python)

Foundations of Front-end Development of Programming

-
1. HTML (Hyper Text Markup Language) is the language in which most websites are written. HTML
is used to create pages and make them functional.

2. CSS (Cascading Style Sheet) - is a language for specifying how documents are presented to users —
how they are styled, laid out, etc.

3. JS (JavaScript) - JavaScript is a dynamic programming language that's used for web development, in
web applications, for game development, and lots more. It allows you to implement dynamic features
on web pages that cannot be done with only HTML and CSS.

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for
Hyper Text Markup Language. Hypertext means that the document contains links that allow the reader to
jump to other places in the document or to another document altogether. A Markup Language is a way
that computers speak to each other to control how text is processed and presented.

ELEMENTS OF HTML
An HTML file is made of elements. These elements are responsible for creating web pages and define
content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag
name> and content inserted between them. Technically, an element is a collection of start tag, attributes,
end tag, content between them.

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

Supported Tags: HTML Elements supports almost all HTML Tags.

HTML Element: The HTML element consist of 3 parts.

1. Opening tag: It is used to tell the browser where the content material starts.
2. Closing tag: It is used to tell the browser where the content material ends.
3. Content: It is the actual content material inside the opening and closing tag.

Entire Structure of Element

<tagname > Contents... </tagname>

Opening Tag Content Closing Tag

Example 1: In this example <p> is a starting tag, </p> is an ending tag and it contains some content
between the tags, which form an element.

<!DOCTYPE html>
<html>
    <head> Output:
      <title>HTML Elements</title>
    </head>
<body>
    <h2>Welcome Sistechians.</h2>  
<p> Hi Freshmen! We’re happy to see you. </p>  
</body> 
</html>

Example 2: This example illustrates the use of the HTML paragraph element. 
<!-- HTML code to illustrate HTML elements -->
<!DOCTYPE html>
<html>
<head>
    <title>HTML Elements</title>
</head> Output:
 
<body>
     
<p>Welcome to Sistechians!</p>  
 
</body>
 
</html>

Nested HTML Elements: 

The HTML element is use inside the another HTML Element is called nested HTML elements.

Example 3: 
This example describes the use of the Nested HTML elements. Here, <html> tag contains
the <head> and <body>. The <head> and <body> tag contains another elements so it is called nested
element.

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

<!DOCTYPE html>
<html>
<head> Output:
    <title>HTML Elements</title>
</head>
 
<body style="text-align: center">
    <h1>SISTECH</h1>
     
<p>College of Santiago City, Inc.</p>
 
</body>
</html>

Necessary to add end tag:

 It is necessary to add the end tag of an element. Otherwise, the displayed
content may or may not be displayed correctly. It is a good practice if you add closing tags to the non-
void HTML Elements but nowadays browsers are getting more and more advanced and forgiving in
nature and that’s why if you somehow forget to apply the closing tag in the non-void Element, the
browser will not throw any error but the problem will arise as you insert more and more HTML
elements after that.

Example 4: This example describes the HTML element by specifying the end tag.

<!DOCTYPE html>
<html>
<head> Output:
    <title>HTML Elements</title>
</head>
 
<body>
    <!-- h1 tag contains the
         end tag -->
          
    <h1>SISTECH COLLEGE</h1>
     
    <!-- p tag contains the
         end tag -->
     
<p>Freshmen Portal</p>
 
</body>
</html>

Empty HTML Elements: 

HTML Elements without any content i.e, that do not print anything are called Empty elements.
Empty HTML elements do not have an ending tag. For instance. <br>, <hr>, <link>, <input> etc. are
HTML elements.

Example 5:  In this example <br> tag doesn’t print anything. It is used as a line break that breaks the
line between <h2> and <p> tag.

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

<!DOCTYPE html>
Output:
<html>
<head>
    <title>Empty HTML Elements</title>
</head>
<body>
    <h2>Welcome To SISTECH</h2>
    <br />
<p>Hello Students.</p>  
</body>
</html>

Here are the rules that you should follow in order to have seamless HTML syntax:

 Every HTML document starts with the Doctype declaration – <!DOCTYPE html>

 The HTML document itself begins with <html> and ends with </html>.
 The main content of the document is placed under the <body> and </body> enclosed tag.
 Then eventually comes the subheading, section heading, paragraph, and so on
 The <br> tag is used to insert line breaks in the text. It applies as a line division without changing
paragraphs. It is an empty tag, which means it does not require a closing tag.

Text formatting: <b> , <u> , <i> , <em> , <sup> , <del>

SIMILARLY, HTML IS JUST TEXT WITH SOME EXTRA TAGS.

<p> This is for paragraph tag </p> <em> This is for emphasized tag </em>

<center> This is for center tag </center>

<a> This is for anchor tag </a>

<button> This is for button tag </button>

<h1> This is for heading tag </h1>
<i> This is for italic tag </i>
<b> This is for bold tag </b> <u> This is for underline tag </u>

Tags describe the structure and the content of the page.

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

ACTIVITY 1: Identify the definition of every HTML Elements.

B.
A.
A.<!DOCTYPE html> _____ 1. It placed the main content of
the Document.
<html>
_____ 2. It used to insert line breaks
B.<head> in the text.
 
<title>HTML Elements</title> _____ 3. Use for paragraph tags.

_____ 4. Use for declaring that a

C.</head>
document is an HTML document.
 
D.<body>
_____ 5. A closing tag of <body>.
             
    E.<h1>SISTECH COLLEGE</h1>
_____ 6. An anchor tag.
F.<br>
_____ 7. Heading tag.
G.<p>WELCOME FRESHMEN!</p>
_____ 8. An opening tag of </head>.
    
H.<a>We’re Happy to See You.</a>
_____ 9. A closing tag of <html>.
I.</body>
_____ 10. A closing tag of <head>.
J.</html>

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]
 SISTECH COLLEGE
OF SANTIAGO CITY, INC.

Activity 2: Write a Poem (At least 50 Words) using the Elements of HTML and follow the rules in
order to create your simple HTML Document.
GUIDE:

<!DOCTYPE html>
<html>
<head>
    <title>POEM_YourName</title>
</head>
 
<body>
    
    <h1>TITLE</h1>
   <br>     
<p>Content/Body of your Poem</p>
 
</body>
</html>

“’Committed to your
SISTECH Bldg., Corner Alvarez & Gov. Gaffud St., brighter future through
Villasis, Santiago City, Philippines quality education”’
Tele. Fax. No. (078) 305-0849  Email: [email protected]