Web Development

Dr. Tim Berners-Lee

HTML was invented in 1991 by (blank) and his colleagues at CERN, an international scientific organization based in Switzerland.

HTML

a %%markup language%% that tells web browsers how to structure the web pages you visit.

Hypertext Mark-Up Language

HTML

Hypertext

refers to %%links that connect web pages to one another,%% either within a single website or between websites.

Paragraph Element

Metadata Element

HTML Formatting

a process of %%formatting text%% for better look and feel

Physical tag

these tags are used to provide %%visual appearance%% to the text

Logical tag

these tags are used to add some %%logical or semantic%% value to the text

Ordered list

A lists where each item in the list is %%numbered%%. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number

Unordered list

are lists that begin with a %%bullet point%% (rather than characters that indicate order)

Definition list

are made up of a %%set of terms%% along with the definitions for each of those terms.

Add icons

Heading Element

and

Two most important in HTML

contains the metadata of a website

This is the part that is visible to the user

Improve the %%searchability%% of the website.

A tag that indicate the page you are %%linking%%.

Internet

A global system of %%interconnected computer networks%% that use the standard internet protocol suite (TCP/IP) to link the several billion devices worldwide.

HTTPS

Creates tunnel where data requested by user and respond to the server. %%Allows and secure%% user to communicate data on the world wide web (www).

Internet Protocol

Used or act as a %%translator.%%

Intranet server

Consist of many %%interlinked local area networks%% and also used leased lines in the wide area network.

DNS server

%%Translate requests for names into IP addresses%%, controlling which server an end user will reach when they type a domain name into their web browser. %%Location or storage%% of Domain name. Equivalent to IP Address.

Web server

Connects to the Internet and supports physical data interchange with other devices connected to the web. %%Only using IP address%% to search or request the website. It will never go to to DNS server anymore.

DNS

Domain name system.

Extranet server

A ==private network== that enterprises use to provide trusted third parties- such as supplies, vendors, partners, and etc. secure and controlled access to business information or operations.

Web Technologies

refers to the %%way computers or devices communicate%% with each other using mark up languages. Communicates across the web and create, deliver or manage web content using HTML.

Web page

a web document which can be displayed in a web browser such as google. Often called %%pages.%%

Website

%%collection of web pages%% which are grouped together and usually connected together in a various ways.

Dynamic page

A page where the content %%change each tim%%e they are accessed.

Static page

A page that shows the %%same conten%%t each time they are viewed.

Web browser

A application program for %%retrieving,%% @@presenting@@ %%and traversing%% ^^information^^ resources on the WWW.

URL

stands for Uniform Resource Locator. Formatted text string %%used by web browsers, email clients, and other software to identify a network resource%% on the internet.

Protocol

represents an agreement between the communicating devices. without it 2 devices may be connected %%but not communicating.%%

HTTP

Function as a %%request-response%% protocol in the client-server computing model.

XML

stands for extensible mark-up language. a ^^set of codes or tags that described^^ the text in digital document.

UTF-8

This tells the browser that the HTML file is encoded by

(blank), so that the browser can translate it back to legible text.

!Doctype html

means that the HTML version you are using is version 5.

This is for having a responsive website. It also tells the browser that the width of the screen should be considered the %%“full width”%% of the page.

This tag uses to ^^appear a sentence under^^ the image.

Navigation

• Home

%%Links%% are created using <__> the element

href

You specify which page you want to link (^^specifies the link's destination^^) using the ____ attribute

• home

Linking to other pages on the ^^same site.^^

Table

represents information in a %%grid format%%.

The element is used to %%create a table%%. The contents of the table are written out row by row.

Indicate the start of %%each row%% using the <_> tag

Each %%cell of a table%% is represented using a <_> element.

represent the %%heading%% for either a column or a row.

HTML Forms

%%Handle important functions%% like taking orders, surveys, user registration and more.

Action

The _____ attribute points to the server side script (the ‘back end’) that %%handles the form submission%%. Usually, this will be a %%scrip%%t (PHP,ASP, Perl) or a CGI program.

Get method

A method where the form submission values are %%passed as part of the URL.%%

Post method

A method where the information %%is sent to the server as part of the data body and will not be visible in the URL%% box in the user’s browser.

True

Does GET requests can be cached?

True

Does POST requests are never cached?

False

GET requests does not have length restrictions

Textbox

Button

Checkbox

Radio button

Name

This attribute identifies the %%TextArea%% in the %%server side script%%.

Cols

Defines the width (number of characters per line) the t%%ext area can accommodate without scrolling.%%

Rows

Defines the n%%umber of lines (number of rows)%% the text area can accommodate without scrolling

Password input

CSS

a language for %%specifying how documents are presented%% to users – %%how they are styled, laid ou%%t, etc.

CSS selector

%%defines, identifies and%% ==targets== the HTML elements to whom its %%set of style declarations apply%%.

Internal CSS

\ What type of CSS Structured?

External CSS

\ What type of CSS Structured?

Inline CSS

Hello World!

This is my first CSS example

\ What type of CSS Structured?

Cascade

When two rules from the same ______ layer apply and both have equal specificity, the %%one that is defined last in the stylesheet%% is the one that will be used. What type of CSS conflicting rules is this?

Specificity

is the algorithm %%that the browser uses to decide which property value is applied to an element%%. If multiple style blocks have different selectors that configure the same property with different values and target the same element, _____ %%decides the property value that gets applied to the element%%. What type of CSS conflicting rules is this?

Cascade, Specificity, Inheritance

What are the three conflicting rules?

Type selector

This selector is very simple as they %%correspond with any HTML element type.%%

example:

body { font-family: Arial, sans-serif; font-size: small; }

h1 { color: green; }

em { color: red; }

Id selector

This selector uses the %%# attribut%%e of an %%HTML element to select a specific element.%% A way to %%select only the element with the specified%% __, and apply styles to that element.

example:

%%#intro {%%

%%font-size: 130%;%%

%%border: 1px solid black;%%

%%}%%

Class selector

This selector is very similar to ID selector but the difference is that in this selector %%we can assign the same ____ to as many elements as we want.%%

example:

%%.important {%%

%%Background-color: yellow;%%

%%}%%

Universal selector

This selector %%(*)%% %%selects all%% HTML elements on the page.

example:

<style>

\* {

text-align: center;

color: blue;

}

</style>

Grouping selector

This selector selects all the HTML elements with the same style definitions.

example:

<style>

h1, h2, p {

text-align: center;

color: red;}

</style>

Descendant selector

This selector is %%made up of two or more selectors separated by white space.%%

example:

\#intro .important{

Background-color: orange;

}

or

<style>

div p {

background-color: yellow;

}

</style>

Attribute selector

This group of selector %%gives you different ways to select elements based on the%% ==presence of a certain attribute== on an element.

example:

a\[title\] {

background-color: red;

}

Child selector

This selector selects all elements that are the children of a specified element. uses (>) sign.

example:

<style>

div > p { background-color: yellow; }

</style>

Adjacent Sibling selector

This selector used to select an element that is directly after another specific element. uses (+) sign.

example:

<style>

div + p { background-color: yellow; }

</style>

General Sibling selector

This selector selects all elements that are next siblings of a specified element. uses (\~) sign.

example:

<style>
div \~ p {background-color: yellow;}
</style>

Comments

used to explain the code, and may help when you edit the source code at a later date.

example:

/\* This is a single-line comment \*/

Pseudo-classes

A class uses to style your anchor.

example:

%%a:hover{%%

%%color: gray;%%

%%}%%

The <___> HTML element is the %%generic container for flow content.%%

Combinators selectors

This selector %%combine other selectors in order to target elements within our documents%%.

Inline

A type of CSS using the style attribute %%inside HTML elements%%. <h1 style=”color:blue;”> Hello World! <h1>

Internal

A type of CSS using the style attribute by using a %%<style> element in the <head> section.%%

External

A type of CSS using the style attribute by using a <link> element to link to an external CSS file. %%To use an external style sheet, add a link to it in the <head> section of each HTML page.%%