Jeuss Andrey S.

King | ICT Reviewer

LESSON 8: DIRECTORY STRUCTURE ● Handles complex functions and features

DIRECTORY STRUCTURE Programmatic code which enhances
● The directory structure is the organization of functionality
files into a hierarchy of folders. It should be
stable and scalable; it should not fundamentally TAGS VS ELEMENTS
change, only be added to. ● An HTML element is the collection of start tag,
its attributes, an end tag and everything in
STRUCTURE between.
● The top-level folder is known as the root folder. ● An HTML tag (either opening or closing) is used
The root folder contains all the other files and to mark the start or end of an element
folders for a website.
● Each section of the site is placed in a separate CASCADING STYLE SHEETS
folder; this helps organize the files. Is a simple design language intended to simplify the
process of making web pages presentable.
RELATIONSHIPS ● CSS handles the look and feel part of a web
The relationship between files and folders on a website is page.
described using the same terminology as a family tree. ● You can control the color of the text, the style of
fonts, the spacing between paragraphs, how
HOMEPAGES columns are sized and laid out, what
The main homepage of a site written in HTML (and the background images or colors are used, as well
homepages of each section in a child folder) is called as a variety of other effects.
index.html
ADVANTAGE OF CSS
RELATIVE URLS ● CSS saves time - You can write CSS once and
● Relative URLs can be used when linking to then reuse the same sheet in multiple HTML
pages within your own website. pages.
● They provide a shorthand way of telling the ● Pages load faster - If you are using CSS, you do
browser where to find your files. not need to write HTML tag attributes every
time.
RELATIVE LINK TYPE
● SAME FOLDER: To link to a file in the same WHO CREATES AND MAINTAINS CSS?
folder, just use the file name. (Nothing else is ● CSS is created and maintained through a group
needed.) of people within the W3C called the CSS
● CHILD FOLDER: For a child folder, use the Working Group.
name of the child folder, followed by a forward ● The World Wide Web Consortium or W3C is a
slash, then the file name. group that makes recommendations about how
● GRANDCHILD FOLDER: Use the name of the the Internet works and how it should evolve.
child folder, followed by a forward slash, then
the name of the grandchild folder, followed by LESSON 12: TABLES
another forward slash, then the file name. TABLE: A table represents information in a grid format
● PARENT FOLDER: Use../ to indicate the folder
above the current one, then follow it with the file BASIC TABLE STRUCTURE
name. ● The <table> element is used to create a table.
● GRANDPARENT FOLDER: Repeat the../ to The contents of the table are written out row by
indicate that you want to go up two folders row.
(rather than one), then follow it with the file ● You indicate the start of each row using the
name. opening <tr> tag (The tr stands for table row).
● Each cell of a table is represented using a <td>
LESSON 9: INTRODUCTION TO CSS (DI KASAMA) element (The td stands for table data). At the
HTML (Hypertext Markup Language) end of each cell, you use a closing </td> tag.
● Create the structure ● The <th> element is used just like the <td>
● Controls the layout of the content element but its purpose is to represent the
● Provides structure for the web page design heading for either a column or a row (The th
● The fundamental building block of any web page stands for table heading).

CSS (Cascading Style Sheet) Even if a cell has no content, you should still use a <td> or
● Stylize the website <th> element to represent the presence of an empty cell
● Applies style to the web page elements otherwise the table will not render correctly.
● Targets various screen sizes to make web
pages responsive TABLE ATTRIBUTES
● Primarily handles the "look and feel” of a web ● Border: Used on both the <table> and <td>
page elements to indicate the width of the border in
pixels.
Javascript ● Bgcolor: Used to indicate background colors of
● Increase interactivity either the entire table or individual table cells.
● Adds interactivity to a web page

1
Jeuss Andrey S. King | ICT Reviewer

● Width: Used on the opening <table> tag to POSITION PROPERTY: Specifies the type of positioning
indicate how wide that table should be and, on method used for an element (static, relative, fixed,
some opening, <th> and <td> tags to specify the absolute or sticky).
width of individual cells. The value of this ● POSITION: ABSOLUTE: Absolute positioned
attribute is the width of the table or cell in pixels. elements are removed from the normal flow and
● Cellpadding / Cellspacing: The opening can overlap elements.
<table> tag could also use the cellpadding ● POSITION: RELATIVE: Is positioned relative to
attribute to add space inside each cell of the its normal position.
table, and the cellspacing attribute to create
space between each cell of the table. PSEUDO-CLASS: A pseudo-class is used to define a
● Colspan: Used on a <th> or <td> element and special state of an element.
indicates how many columns that cell should run ● Style an element when a user mouses over it
across. ● Style visited and unvisited links differently
● Rowspan: Used on a <th> or <td> element to ● Style an element when it gets focus
indicate how many rows a cell should span
down the table. LESSON 17: VERTICAL/SIDE NAVIGATION BAR
NAVIGATION BAR: Is a user interface element within a
LESSON 13: HTML MARQUEE webpage that contains links to other sections of the
MARQUEE: Is a scrolling piece of text displayed either website.
horizontally across or vertically down your webpage
depending on the settings. Step 1: Apply size, color to nav bar and set position to
absolute. Declare 0px for top and bottom edge.
MARQUEE ATTRIBUTES Step 2: Apply relative position to ul and remove list bullets
● Width using the list-style:none;
● Height Step 3: Apply text properties to an element.
● Direction: up, down, left, right Step 4: Apply hover effect to an element, changing the
● Behavior: scroll, slide, alternate bgcolor and text color.
● Loop: This specifies how many times to loop. Step 5: Apply absolute position to dropdown menu
Default value is infinite. (second ul element. Specify size and distance from the
● Bgcolor: This specifies background color in edge).
terms of color names. Step 6: Insert the code “display: none;” to nav ul ul to hide
the dropdown menu.
LESSON 16: NAVIGATION BAR Step 7: Type the code nav ul li: hover ul { display: block }.
NAVIGATION BAR This shows the dropdown menu after you hover your
● Is a Graphical User Interface (GUI) that helps mouse on li elements.
the visitors in accessing information.
● It is the UL element on a webpage that includes
links for the other sections of the website.
● It is mostly displayed on the top of the page in
the form of a horizontal list of links.

<NAV> TAG
● Represents a section of a page whose purpose
is to provide navigation links.
● It is used for declaring the navigational section
in HTML documents.

FLOAT PROPERTY
● The float CSS property places an element on
the left or right side of its container, allowing text
and inline elements to wrap around it.
● The element is removed from the normal flow of
the page, though still remaining a part of the
flow.

PADDING/MARGIN PROPERTY
● Margin is the space outside the element.
● Padding is the space inside the element.

DISPLAY:BLOCK: Displaying the links as block

elements makes the whole link area clickable (not just the
text).