Information Communication Technology 10

Quarter 1
Reviewer | Sean & Justin

Introduction to - TEXT – Something that you

write.
CSS - MARKUP – How you’ll lay
down the text.
- Markup means that
with HTML you
CSS
declare what is
➔ CSS stands for Cascading Style presented to a
Sheets. It is the language for viewer, not how it is

IO
describing the presentation of Web presented.
pages, including colours, layout, and - LANGUAGE – They needed
fonts, thus making our web pages something to complete the

C
presentable to the users. word.
➔ CSS is designed to make style - A system of

A
sheets for the web. It is independent communication.
of HTML and can be used with any
XML-based markup language. Now
let’s try to break the acronym:
N
Differences Between HTML,
A
- Cascading: Falling of Styles. CSS, and JS
- Style: adding designs/styling
AT

➔ HTML
our HTML tags.
- Structural Language:
- Sheets: Writing our style in
- Consider this as a
different documents.
structure of a human
&

body.
HTML
- Structure of a Website:
➔ HTML is a computer language - Heading,
S

devised to allow website creation. paragraphs or texts,

These websites can then be viewed images all comes
O

by anyone else connected to the under HTML

Internet. because it gives the
IG

➔ HTML forms the skeleton for all the basic structure of the
webpages that we happily hover website.
around these days. It provides them ➔ ▪ CSS
a structure. - Styling Language:
➔ The term HTML is an acronym for - Consider this as a
HyperText Markup Language. skin or color of
- HYPER – it means a link human body.
which lets you go from one - Style of Website:
webpage to another. - CSS gives color and
style to the website.
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

- CSS represents the - C++

look of a website like - VB
skin gives look to the - C#
human body. - FORTRAN,
➔ JavaScript
- Programming Language:
- Consider this as motion of
Domain Name
human body like dancing, and Web
walking, etc.
Hosting

IO
- Motion of the Website:
- JavaScript gives motion and
logic to the website.

C
Domain Name
➔ A domain name is your website's

A
Difference Between Markup equivalent of a physical address. It
Language and Programming helps users find your site easily
Language
N instead of using its internet protocol
(IP) address.
A
➔ MARKUP LANGUAGE
- It is used to create structure.
AT

They are designed not for How to get a Domain Name

general purpose
➔ Choose a name
programming, but for
➔ Check the name’s availability
processing or presentation
➔ Select extension
&

of text.
➔ Register
- Example:
➔ Pay
- HTML
S

➔ Point to your website

- XML
➔ Renew regularly
- XHTML
O

➔ PROGRAMMING LANGUAGE
- It executes code one by one Creating a Website
IG

in sequential manner. ➔ Create the website

- In programming language, ➔ Host the website
the code which are written ➔ Get a domain name
by programmer, firstly ➔ Design for everyone
compile it and convert into ➔ Update and improve
an executable code and then
run that code and display
output. Reasons not to get a Domain
- Example: Name
- C
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

➔ Personal project but can of course be used by anyone

➔ Testing and learning to view or edit a text document.
➔ Budget constraints The interface is extremely clean and
➔ Short-term use modern and feels really easy to use
despite all of its advanced settings.
In fact, nearly all of the options are
Web Hosting
hidden away from plain site so that
➔ Web Hosting is renting or buying a it's easy for anyone to use, which
space for a website on the world also provides an extremely open UI

IO
wide web. for editing.
Other features:
- Cross-platform

C
Limitations of FREE Web
- 100% free
Hosting - Open-source code

A
➔ Limited space - By GitHub
➔ Not own domain name N - Heavy storage
➔ Low bandwidth
A
➔ Advertisements

Exploring Text
AT

Editors ➔ Notepad++ – It is another free text

editor with a super clear and
&

minimal design that still manages to

Text Editor pack some awesome features. One
➔ A text editor is any word processing is “Focus Mode” to hide all of the
S

program that you can use to type open windows and just display the
editor, and the others show/hide
O

and edit text.

➔ Word Pad and NotePad for Windows things like folders, the syntax
and SimpleText and TextEdit for the checker results, and notifications.
IG

Mac are common text editors. Other features:

➔ Larger programs such as Microsoft - Color mode
Word and Word Perfect are also text - Auto-completion
editors, but they have many more
features.

Examples of Text Editor

➔ Atom – It is a free text editor that's
primarily meant for web designers,
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

➔ Brackets – It natively supports many

programming languages and
markup languages, and functions
can be added by users with plugins,
typically community-built and
maintained under free-software
licenses.
Other features: ➔ Komodo Edit – It is the best
- Live preview alternative application for Windows

IO
- User-friendly computers. It’s really easy to use for
- Open-source code basic users who just need a text file
- Developed by Adobe

C
opener or editor but also includes
- HTML, CSS, JavaScript some really advanced features for
- Color mode

A
those interested.
Other features:
N -
-
Color mode
Leading free multilanguage
A
text editor
- Almost has every
AT

programming language
- Debugging
- Open-source
- Active state
&

- Cross-system
➔ Sublime Text – It is a desktop - Auto-completion
application built using web
S

technologies. Most of the extending

packages have free software
O

licenses and are community-built

and maintained.
IG

Other features:
- Free, although needs license
- Cross-platform
- Not open-source code
Notepad VS Notepad++
➔ Notepad – It is a simple text editor
tool that comes with windows by
default. It is one tool that is used by
every individual to write or edit text
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

files. It support almost all the ➔ 3. Privacy - Free pens are public by
languages and it saves the file with default. If students want to keep their
.txt extension. work private, they'd need a PRO
➔ Notepad++ – It is a free source code account.
editor which is a replacement of the ➔ 4. Dependency on Internet - Being a
notepad. It additionally supports web-based platform, students need
more languages. Tabbed a stable internet connection to use
documents, spell checker, file CodePen effectively.
comparisons, zooming and the find ➔ 5. Limited Hosting - While CodePen

IO
and replacement feature make it allows for the creation and testing of
much more attractive than the old projects, it's not a hosting solution for
traditional notepad. launching full websites. Pens are

C
meant for demonstration only.
Codepen.io
The <div> and

A
➔ CodePen is an online community for
testing and showcasing
N<span> tags
user-created HTML, CSS and
JavaScript code snippets. It
A
functions as an online code editor
Codepen.io
AT

and open-source learning ➔ <div> tag – generic block-level

environment, where developers can element, most often used to divide
create code snippets, called "pens," page contents into blocks or
and test them. segments.
&

➔ Batch platform for coding - Example:

<div> Hello world </div>
------------------------------------
Codepen.io Limitations
S

div{background-color:red;}
➔ 1.Limited File Structure - Unlike a ➔ <span> tag – generic inline element,
O

traditional development typically used to apply styling to a

environment, CodePen doesn't portion of inline content. An inline
IG

support a complex file structure. element does not start a new line
Each Pen has sections for HTML, and only takes as much space on the
CSS, and JavaScript, but you can't page.
create multiple files or directories. - Example:
➔ 2.Performance - For larger projects, <p>I have<span
CodePen might not be as performant style=color:red;>
as a local development environment. <p><span id = “click”> click
It's best suited for smaller projects me <span>
and prototypes. ------------------------------------
.click me{color:blue;
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

text-decoration;
underline;cursor:pointer;}
CSS Display
Property
Types of CSS
Importance of Layout in Web
Inline CSS Design
➔ Layout defines the structure of the
➔ Useful for styling a single element
web page.

IO
➔ Done by using the style attribute
➔ It determines where the element sits,
➔ It directly affects the HTML element
how they interact, and how they
respond to different screen sizes.

C
Internal CSS ➔ A well-thought-out layout improves
user experience.

A
➔ Defined in the <head> section of the
HTML page, with <style> element
➔ “Embedded Style Sheet” N Display Property
➔ CSS Display Property allows you to
A
External CSS control how elements are displayed.
AT

➔ Change the look by using 1 file ➔ One of the most fundamental CSS
➔ The <link> element goes inside the Properties.
<head> section ➔ Influences the layout
&

Kinds of Element in CSS

Examples ➔ Block-level Elements – the elements
S

are laid out vertically.

➔ Inline-level Elements – The elements
O

are laid out vertically and will

proceed to the next line when the
IG

end of the line is reached

➔ Inline-block Elements – Merges
characteristics of both block and
inline. The element is inline in flow
but can have block-like properties
such as width, height, padding, etc.
➔ Flex – Lets you arrange items inside
a box with much more control. You
can decide how iterms fit, align, and
space out.
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

➔ Grid – You set a container’s display

property to grid. It can define how
many columns and rows you want Class and ID
and how big they should be. This
place items into any cell or group of
Selectors
cells in your grid.
Selectors
➔ Pattern of elements and other terms

IO
that tell the browser which HTML
elements should be selected to have
the CSS property values inside the

C
rule applied with them.
➔ A keyword used to define what

A
element/s to apply the style rule on.

N
A
AT

➔
&

➔
S

Element Selectors
O

➔ A selector used to apply styles to a

IG

certain element type

➔ Is defined as the name of the
element itself (ex. p, h1, div)

➔
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

➔ Is defined by typing a pound

sign/"hashtag" (#) followed by the ID
name.
➔ To refer to the ID selector in a tag,
➔ use the attribute "id" and set the
value to the ID name.

CSS Class Selectors

➔ A selector used to apply styles to

IO
multiple elements belonging to a
➔
particular class.
➔ Is defined by typing a period (.)

C
followed by the class name

A
➔ To refer to the class selector in a tag,
use the attribute "class" and set the
value to the class name. N
➔
A
Group Selectors
AT

➔
➔ When two or more selectors have the
same properties and values, a
comma (,) is used to separate the
&

selectors and use only one set of

properties and values.
S

➔
O

CSS ID Selectors
IG

➔ Used to match an element based on

the value of the element’s ID
attribute. In order for the element to
➔
be selected, its ID attribute must
match the value given in the selector.
➔ You should not have more than one Universal Selectors
element with the same ID (1:1 ratio). ➔ Denoted by the asterisk (*), it is used
➔ A selector used to apply styles to a to select all the elements in the HTML
single unique element. document.
Information Communication Technology 10
Quarter 1
Reviewer | Sean & Justin

➔ It also includes other elements which

are inside under the element.

IO
➔

C
A
N
A
AT
&
S
O
IG