Scribd
Upload
15 views17 pages

Cs Finals

The document provides an overview of the Internet and the World Wide Web, detailing their functions, services, and the client-server model. It covers web development concepts, including HTML structure, elements, and attributes, as well as the use of tables and color theory in web design. Additionally, it emphasizes the importance of wireframes in the design process for websites and applications.

Uploaded by

azarethwrath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views17 pages

Cs Finals

The document provides an overview of the Internet and the World Wide Web, detailing their functions, services, and the client-server model. It covers web development concepts, including HTML structure, elements, and attributes, as well as the use of tables and color theory in web design. Additionally, it emphasizes the importance of wireframes in the design process for websites and applications.

Uploaded by

azarethwrath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

https://laravelalvin.github.

io/CS3/
1.0
INTERNET
- The network where computers and other devices (ie local area netowrk/LAN, wide area
network/WAN) are connected to each other

THE WORLD WIDE WEB


- Invented by Tim Berners-Lee while working at CERN in 1989
- Collection of information and services that travel over the Internet
-

INTERNET SERVICES AND UTILITIES:


1. Communication Services
- Includes e-mail, newsgroups/forums for discussion, instant messaging, and video
conferencing

2. Information retrieval services


- Provides easier access to information present on the Internet
- Consists of access to online databases of different files
- Ex, database of scientific journals with published articles

3. Web Services
- Covers the use of applications that make access to the internet easier
- Ex, mobile apps and cloud computing services

4. World Wide Web/W3


- A structure that allows users to access web pages over the Internet
NOTE:
Webpages can contain:
● Text, images, videos
● Hyperlinks- clickable objects that allow the user to go from one page to another and to
explore multiple web pages over the Internet
WORLD WIDE WEB STRUCTURE
- Access of info thru the W3 works using the client-server model:

-
● client
- The computer/person trying to access the Internet
- Requests data from the server via a protocol (HTTP)
● Hypertext Transfer Protocol (HTTP)
- protocol that makes use of request-response system
- An HTTP request sent by the client consists of diff info ie the (uniform resource
locator) URL of the requested data
- An HTTP response is sent by the server to the client also holds diff info ie the
status of the connection and the data requested by the client
● server
- A software/ cloud computer that processes the client req and returns the req
data
- If the requested data is unavailable, it requests data from other servers where it
temporarily becomes a client itself

● Hypertext Markup Language


- This is where data is sent when the request is successful
- Can contain a wide range of data and is displayed by the client’s browser

UNIFORM RESOURCE LOCATOR (URL)


- Serve as the address of the resources over the Internet
- Consists of:
● Protocol name
● Hostname(domain name) or IP address
● Path of the file
- Syntax:

-
- Example: https://garfield.fandom.com/wiki/Garfield.com

WEB DEVELOPMENT
- The creation of web pages and other services accessible online

3 parts:
● Client-side Web Development
- the creation of front-end applications.
- Deals mainly w user interface and applications that interact w the user
● Server-side Web Development
- involves the heavy programming of applications that the user does not see.
- Example is maintenance of cloud storage, email services, etc.
● Database Management
- deals with the maintenance of data online
- also includes creation of effective and fast ways of accessing data
BROWSERS
- A software program that allows users to receive and send data from the Internet
> This data is presented via websites w multiple webpages and can be in the form of
text, pictures, video, and audio
- Allow the user to view data in the intended format
- Allow user to navigate the Internet, going from one website to another
- They do the communication over the internet

HYPERTEXT MARKUP LANGUUAGE/ HTML


- Developed to serve as the standard language for creating web pages
> without a standard, it is difficult for users w diff computers and diff browsers to access
info
- also platform independent, which means that it can be rendered in any type of device.
- Audio-visual materials can also be embedded into web pages because of this
- Most important feature: the ability to support hyperlinks
- Disadvantage: it can be used only for status web pages where the user can only click
and scroll on items
- U can create interactive websites by adding html with other languages ie css and
javascript

2.0

BASIC HTML STRUCTURE

- All the special terms in blue = HTML Elements.


● The entities enclosed in `< >` symbols are called HTML tags.
<!DOCTYPE html>
- defines that this document is an HTML5 document.
- important because websites today use multiple languages aside from HTML.
`<html>` element
- is the root element of an HTML page, signifying the beginning of the code.

<head> element
- contains meta information about the HTML page.
- Everything in it will not be displayed in the main body of the webpage.

<title> element
- specifies a title for the HTML page, shown in the browser's title bar or the page's tab.

<meta> tags
- contain information related to the HTML document, such as character encoding, author
information, and keywords.
- Its important to include proper meta tags in all submissions.

<link> element
- used to connect the current HTML file to an external source.
- For example, it can define an icon for the webpage on the browser tab. Later, the
`<link>` element will be used to link to other types of files.

<body> element
- defines the document's body, serving as a container for all visible content like headings,
paragraphs, images, hyperlinks, tables, lists, etc.
<!-- -->
- comment tag
- will not be displayed in the browser.

2.2
- Every HTML element has a default display value based on its type. The two main display
values are block and inline:
● Block Elements
- take up the full width available, causing any subsequent HTML elements to start
on the next line.

● Inline Elements
- only take up the width of their content, allowing the next HTML element to be
placed immediately beside them.
NOTE: The width of inline elements cannot typically be changed, with a few exceptions.
Common HTML Elements and Their Default Display Values

● <div> Element
- Used to contain other HTML elements or to define sections of a webpage.
- Block element
- Can contain text or group together other HTML elements.

● <span> Element
- Used to contain other HTML elements or define sections within a document.
- Inline element
- Can contain text or group together other HTML elements.

● HTML Headers (<h1> to <h6>)


- Used for titles of new sections.
- <h1> is the largest header, while <h6> is the smallest.
- Block elements

● HTML Lists
- There are two types of lists in HTML:
● Ordered <ol> w numerical values
● Unordered <ul> w bullet points
- Block elements
- - Use the <li>`tag to define each item within the list. Ensure proper indentation to
show that the <li> elements are nested inside the list tag (e.g., `<ol>` or `<ul>`).

2.3-2.4
➢ <p> Element
➢ - Used to add paragraphs of text in HTML code.
➢ - It is a block element.
➢ - Enclose all contents of the `<p>` element with a closing `</p>` tag.

<br> and <hr> Elements


- used to insert a blank line, similar to pressing "Enter" on a keyboard in a word processor.
It is a block element.
- adds a full-width horizontal line to the document.
- a block element.
- do not require a closing tag, as no content is placed inside them.
<img> Tag
- Used to add images to a webpage.
- an inline element.
- Inside the `src` attribute: specify the file name of the image (case-sensitive). Image file
formats can include `.jpg`, `.png`, `.gif`, and `.svg`.
- Alt is for alternatives
<img src="picture.jpg" height=100px width=100px>
```
- You can add a title for an image, which will show as a tooltip when hovering over it. It can also
be used to cite the source of the image.
```html
<img src="picture.jpg" height=100px width=100px title="This is a title. Image from W3Schools.">
```
<a> Tag
- Used to create links to webpages.
- It is an inline element.
- Links direct users to other web pages or files.
- Links can be text, images, or other HTML elements, depending on the webpage design.
```html
<a href="url">Click here!</a>
- Href: specify file name/url of the page/file u want to link to

<a href="url">
<img src="icon.jpg" alt="Click here!">
</a>
- Links can also point to another section of the same page using anchor tags, like "Back to Top"
links.
```html
<a href="#top">Back to top</a>
```

Tag-Specific Attributes: `src` and `href`


- Some tags have unique attributes. For example:
- `href` is specific to the `<a>` tag and refers to the file or URL to link to.
- `src` is specific to the `<img>` tag and refers to the image file to display.
- Some attributes are common across multiple tags, such as `name`, `id`, and `class`.
3.1

table
- used to organize information.
- were used to format web page layouts before browsers supported CSS.

NOTE:
● An HTML table is composed of rows and columns, like a spreadsheet.
● Each individual table cell is at the intersection of a specific row and column.

Tables consist of three tags to work.:


1. `<table>` tag.
2. . Create rows. There is no tag for columns, so you work in rows, which are divided into
cells. The tag for rows is `<tr>` (table row).
3. Cells in tables are created by dividing the rows with the tag `<td>` (table data).

Putting a style on an HTML table


- makes the page more readable.
- When you apply style border code to the table element (i.e. the `<table>` tag), the border
appears around the table, not the individual cells.
- To style the table cells' borders, you need to apply the border code to the individual table
cells.

Cell borders
To add a border to your table, style the individual cells (`<td>`). You must specify the style of the
border (e.g. solid or dotted line), its width, and its color. A solid line, 1 px wide, is commonly
used.

Table Heading
- `<th>` tag. This tag replaces the `<td>` tag, which is used to represent a data cell.
- the top row is used for table headings, but the `<th>` element can be used in any row
- centered by default.

Describing table content


● Caption element
- used to describe the table's contents or provide hints on how it is structured.
When used, it must be the first thing within the table element.
- Used to provide a description of ur table contents

HTML `<colgroup>`, `<col>`


- `<colgroup>` tag specifies properties for a group of columns within a table.
- `<colgroup>` element sets a group of columns in HTML tables.
- is the parent of `<col>`.
- `<table>` element is the parent of `<colgroup>`.
- <colgroup> specifies a common style for a group of columns.
> If different properties need to be applied to columns within a colgroup, the `<col>` tag
can be used inside the `<colgroup>` tag.

3.2

Spanning Cells in Tables


- You can create spanning cells using two attributes in `<td>` and `<th>` tags:
- `colspan` creates a cell that spans two or more columns.
- `rowspan` creates a cell that spans two or more rows.

Example: A table with a spanning row heading cell may have a row where a single cell spans
both heading cells in the next row.

Rowspans
- add complexity. When you insert a row-spanning cell, you create a new column, and
must add corresponding cells to every other row, except for the row containing the
spanning cell.

-Care is needed when defining tables with multiple spanning rows and columns. Ensure that
columns are counted correctly and the cells align with their corresponding spanning cells.

Example of a Spanning Cell


- You can create a cell spanning both rows and columns by using both `rowspan` and `colspan`
in a single cell definition.
<th rowspan="2" colspan="2"></th>

Cellpadding and Cellspacing Attributes


Cellpadding
- Adjusts the space between a cell’s borders and its content.

In HTML5, the `cellpadding` attribute is no longer supported. Instead, use the CSS `padding`
property within the `style` attribute to set the padding inside table cells.
- Example for 10px of cellpadding using CSS:
<td style="padding:10px;"></td>
Cellspacing
- Adjusts the space between the borders of adjacent table cells.

- Use the CSS `border-spacing` property for this, but it works only if the `border-collapse`
property is set to `separate`.
- Example for 10px of cellspacing:
<table style="border-spacing:10px; border-collapse:separate;"></table>

Table Background Colors


- The `bgcolor` attribute was previously used to specify a table’s background color, but it has
been deprecated in favor of CSS.
- Use the `background-color` CSS property instead. The `bgcolor` attribute still works in most
browsers and can accept color names, hex color codes, or RGB values.

Table Height and Width


- You can set a table’s width and height using the `width` and `height` attributes, specified either
in pixels or as a percentage of the available screen area.
- The width and height of individual cells should be set using CSS.
- The `width` and `height` attributes for `<td>` are no longer supported in HTML5. Instead, use
CSS properties to define cell dimensions.
- Example:
```html
<td style="width:100px; height:50px;"></td>
```

4.1

Color
- a powerful tool in web design and development. It can be used to:
1. attract attention
2. express meaning
3. convey a message
4. group elements with common themes
5. create desire
6. set the mood and feel
7. earn audience loyalty

NOTE: Good color choices require careful planning and, when done correctly, can influence
how an audience interprets what they see, as much as content and layout.

In choosing a website's color scheme, consider the following:


1. use of company or product’s brand colors
Establish the website’s unique identity based on the company, product, or service it promotes.
The company’s logo often influences the color scheme, using either complementary or
contrasting colors.

2. common color associations


Colors are often associated with different emotions or attitudes. However, the same color can
have different meanings for different people.
● Color theory
- involves using the meaning behind colors to create a sensory experience. In web
design, color theory can be applied with thought and understanding.
The three main color groups associated with emotions:
- warm colors (red, yellow, orange) evoke warmth or power
- cool colors (blue, green, purple) evoke cold or chilly feelings
- neutral colors (grey, brown) do not create strong emotions

3. target audience
Consider your target audience's gender, age, cultural background, and preferences. Studies
have shown that women’s top color preferences are blue, purple, and green, while men favor
blue, green, red, and black. Both genders like blue, but they differ significantly on purple.

4. color palette
A good website color palette follows the 60/30/10 rule. Use one color for 60% of the site, a
secondary color for 30%, and an accent color for the final 10%. The accent color contrasts with
the other two and highlights important content.

5. text and background colors contrast


For readability and to avoid eye strain, ensure high contrast between text color and background
color. Choose dark text on a light background or light text on a dark background.

4.2

WIREFRAME
- One of the tools that could be used to assist a web or app developer to design and
layout a website or an app
- important because it can be used to show a web site/app on its structural level,
present its content and its functionality.
- used in the development process that takes into consideration a particular
group of users’ needs.

‘
WIREFRAM PURPOSES:

1. Show connection of information between pages of a web site or an app.

2. Present the different types of information in a consistent manner on the


user interface.

3. Shows the interface’s intended functionality

4. Helps determine how much space to give an item or component in a


web site or an app and where it is located

A wireframe needs to include important elements commonly seen in most websites and apps.
These elements are:

● Logo
● Search field
● Breadcrumb
● Headers, including page title as H1 and subheads H2-Hx
● Navigation systems, including global and local navigation
● Body content
● Share buttons
● Contact information
● Footer

Low to mid-fidelity wireframes

- are relatively quick to develop.


- used to communicate to a web/app development team what a website or app will look
like by:
● Showing the location of different components
● Blocking off space
● Using mock content
● Representing text with "Lorem ipsum"
● Signifying images or multimedia with cross boxes

High-fidelity wireframes

- show more details, such as:


● The color scheme
● Actual components
● Interaction between pages

DIFFERENT TOOLS TO CREATE WIREFRAMES:


1. Balsamiq Wireframes
2. Wireframe.cc
3. Figma
4. Pencil Project
5. NinjaMock
6. FluidUI
7. Mockflow
8. Cacoo

5.0

CSS
- allows you to control the layout and design of an HTML document
- can change the color of the text, font style and other design and layout.
- Would require a styling rule which will be interpreted by the browser

CSS Structure

● selector
- specifies which html element should be styled.
- After it is an open and close curly braces.
- Inside it is the CSS declaration.

> The CSS declaration block may contain one or more CSS declarations
and has two parts – the property and the value.

● property name
- a keyword that is already predefined by the CSS specification.

NOTE: In each property, there is a set of predefined values which are separated by a colon
and terminated by a semicolon. Semicolon is used to separate two declarations

Selectors
- Helps in styling html elements

Element Selector
- selects elements based on its name.
- For example, p of the paragraph tag.

Universal Selector
- it selects all the elements of your HTML page.
- denoted using the symbol '*'.

Id Selector
- will use the id attribute of an HTML element to select a specific element. A page has a
unique id for an element, thus, it will only select one unique element.
- (#) character is used followed by the elements id

Class Selector
- selects the HTML element with a specific class attribute
- is implemented with the help of the symbol period (.), followed by the class name.

Grouping Selector
- Elements that apply the same style rule can be grouped together.

Descendant Selectors
- applies style rules to a particular element only if it lies inside a particular element
> the rule is applied to a <p> element only if it lies inside a div element with a
class="center".

Child Selectors
- is applied only to a direct child of an element.
- For example, the <p> element that is a direct child of the body will apply the style rule
below.
- other <p> element which is inside a <div> or other elements will not apply the rule.
- character '>' is used to apply the rule in a child selector.

5.2
TYPES OF CSS
• Inline • Internal or Embedded
Inline CSS
- incorporated as value of the style attribute of an HTML element.
- used to apply a unique style on an element
Internal or Embedded CSS
- is used when an HTML page will have a unique style.

NOTE: The CSS properties are defined inside the <style></style> tag in the head section of an
HTML document.

External Stylesheet
- used to have a single uniform style applied on every web page of a website that uses it

NOTE: The CSS properties are saved in a separate text file w an extension of .css and is
referenced from an HTML doc using the <link> tag inside the head selection
<link> format

rel="stylesheet"
- means what will be relationship of the file href="mystyle.css" to the HTML document.
NOTE:
the values for href could be a path\filename or a URL that points to an online .css document.
The .css file DOES NOT need the <style></style> tag inside it
The output would be the same as the Internal CSS.

5.0 CSS PROPERTIES

CSS Colors
- Can be specified using its predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values. The predefined color names are simply the name of the colors that we know.
RGB Value
- formula is rgb(red, green, blue). The parameter – red, green and blue has values from 0
to 255 which defines the intensity of the color. For example, rgb(0,0,255) is displayed as
blue since blue is set to the value 255 while others are set to 0.

HEX Value
- format `#RRGGBB`.
- `RR` (red), `GG` (green), and `BB` (blue) are hexadecimal values from `00` to `ff`.
- Example: Red is `#ff0000`, where red (`RR`) is at maximum (`ff`), and green and blue are set
to `00`.

HSL Value
- color definition using hue, saturation and lightness in the format `hsl(hue, saturation,
lightness)`.
● Hue- is a degree from `0` to `360` on the color wheel.
● Saturation- a percentage where `0%` is gray and `100%` is full color.
● Lightness- a percentage where `0%` is black and `100%` is white.

CSS Background Properties


Background color: Specifies the background color of an element.
Bg image: Specifies an image to use as a background for an element. The image repeats by
default to cover the entire element.
Bg repeat: Controls how or whether the background image repeats.
Bg position: Specifies the position of the background image. Defaults to the top-left corner but
can be changed (e.g., `center center`, `right bottom`).
Bg attachment: Specifies if the background image should scroll or stay fixed. Values include
`scroll` and `fixed`.

CSS Text Properties


color: Specifies the text color.
Text-align: Specifies the horizontal alignment of text (valid values: `left`, `right`, `center`,
`justify`).
vertical-align :Adjusts the vertical alignment of text (valid values: `top`, `middle`, `bottom`).
Text decoration: Specifies the decoration of the text (e.g., `underline`, `line-through`,
`overline`). `text-decoration:none;` removes underlines.
Text indent: Sets the indentation of the first line of text, which can be negative.
Letter spacing: Sets the space between characters in the text.
Line height: Sets the space between lines of text.
Word spacing: Sets the space between words in a text.
Text shadow: Adds shadow to text. Requires values for horizontal and vertical shadow, with
optional color and blur effects.

CSS Font Properties


- font-family: Sets the font family. It’s recommended to include multiple font names separated
by commas in case the first is unsupported. Font names with multiple words should be in
quotation marks (e.g., "Lucida Console").
● - Generic font families: Groups of fonts with a similar look (e.g., serif vs. sans-serif).
● - Specific font family: The exact font (e.g., Arial, Times New Roman).
- font-style: Specifies italic text. Valid values are normal (default), italic, and oblique.
- font-weight: Sets the weight of a font (e.g., normal, bold, bolder, lighter).
- font-size: Sets the text size. Units include:
● - Absolute units: px, in, cm, mm, pt.
● - Relative units: em, % (based on another length property).

5.5
CSS Padding
- Padding is the space between the content of an element and its border.
- The `padding` property controls the amount of space in this area.
- Similar to the `margin` shorthand property, padding can also be set individually:
● - `padding-top`: Defines the top padding.
● - `padding-right`: Defines the right padding.
● -`padding-bottom`: Defines the bottom padding.
● - `padding-left`: Defines the left padding.

CSS Box Model


- Every HTML element is rendered as a rectangular box based on the CSS box model.
- The box model consists of:
● - Content: The actual content of the element.
● - Padding: Space between the content and the border.
● - Border: The border surrounding the padding and content.
● - Margin: Space outside the border.
- The overflow property determines how to handle overflowed content:
● - `visible`: Default; overflowed content is visible.
● - `hidden`: Overflowed content is clipped, and the rest is invisible.
● - `scroll`: Overflowed content is clipped, and a scrollbar is added.
● - `auto`: A scrollbar is added only when necessary.

Box Sizing
- When specifying width, it sets the width of the content by default, not the entire box.
- Example: If a `<div>` has a width of 430px and box-sizing is set to content-box, the total width
includes padding and borders:
- Total width = content width + left border + right border + left padding + right padding.
- If box-sizing is set to border-box, the total width is equal to the defined width, including padding
and borders.
- To apply the box-sizing property to all HTML elements, use the universal selector:

```
*{
box-sizing: border-box;
}

CSS Positioning: Absolute


- `position: absolute;` is used for flexible and precise placement of elements on a webpage.

Containing Blocks
- The CSS2.1 specification defines a "containing block" as the rectangle relative to which an
element is positioned.
- Key rules for determining the containing block:
● - If an element is not within another positioned element, it will position relative to the
initial containing block.
● - If an ancestor has its position set to `relative`, `absolute`, or `fixed`, the child element
will be positioned relative to that ancestor's edges.
● - Offset values apply to the outer edges of the element box (from margin edge to
margin edge).
- Absolutely positioned elements behave as block-level elements:
● - Margins on all sides are maintained.
● - A width can be set for the element.

Positioning
- Once positioned, an element becomes the new containing block for its child elements.

Specifying Position
Pixel Measurement
- Positive offset values push the element away from the specified edge toward the center of the
containing block.
- If no value is provided for a side, it defaults to `auto`, and the browser adds space to adjust the
layout.

Percentage Values
- Positions can also be specified using percentages:
- For example, an image positioned halfway down the left edge of the containing block.
- Another example would be positioning an element in the bottom-right corner of the containing
block.

You might also like