WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0
Web Essentials: Clients, Servers and Communication – The Internet – Basic Internet protocols – World wide web – HTTP Request Message – HTTP Response Message – Web Clients – Web Servers. HTML5 – Tables – Lists – Image – HTML5 control elements – Semantic elements – Drag and Drop – Audio – Video controls. CSS3 – Inline, embedded and external style sheets – Rule cascading – Inheritance – Backgrounds – Border Images – Colors – Shadows – Text – Transformations – Transitions – Animations.
Web Essentials
Clients, Servers and Communication
The Internet
- The Internet is the global system of interconnected computer networks that use the Internet protocol suite (TCP/IP) to link devices worldwide
- It is a network of networks that consists of private, public, academic, business, and government networks of local to global scope, linked by a broad array of electronic, wireless, and optical networking technologies
- The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony, and file sharing
Basic Internet protocols
- HTTP(Hyper Text Transfer Protocol)
- DNS (Domain Name System)
- FTP (File Transfer Protocol)
- SMTP(Simple Mail Transfer Protocol)
- TELENT
- ARP (Address Resolution Protocol)
- DHCP (Dynamic Host Configuration Protocol)
- TCP(Transmission Control Protocol)
- IP (Internet Protocol)
World Wide Web(WWW)
- 1989 – Tim Berners-Lee
- WWW is a system of interlinked hypertext documents accessed via internet
- With a web browser, a user views web pages that may contain text, images, and other multimedia contents and navigates between them using hyperlinks
Web Page
- A Web page is a hypertext document.
- This means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new Web page
- Web page file extensions as follows:
- .html
- .jsp
- .aspx
- .asp
- .php
- Admin
HTTP
- HTTP is a client-server protocol which allows the fetching of resources, such as HTML documents
- It is the foundation of any data exchange on the Web
- Clients and servers communicate by exchanging individual messages
- The messages sent by the client, usually a Web browser, are called requests and the messages sent by the server as an answer are called responses.
HTTP Request Message
HTTP Response Message
Web Clients
- The Web client is a client-side component
- Client-side components are typically computer applications running on a user's computer and connect to a server
- A web client consists of two parts:
- Dynamic web pages containing various types of markup language (HTML, XML, and so on), which are generated by web components running in the web tier
- A web browser, which renders the pages received from the server
- A web client is sometimes called a thin client
Web Servers
- A web server is server software, or hardware dedicated to running said software, that can satisfy World Wide Web client requests
- A web server can, in general, contain one or more websites
- The primary function of a web server is to store, process and deliver web pages to clients
- The communication between client and server takes place using the Hypertext Transfer Protocol (HTTP)
HTML5
- Hyper Text Markup Language version 5 is used to create a webpage.
- HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers.
- It incorporates all features from earlier versions of HTML, including the stricter XHTML.
- It adds a diverse set of new tools for the web developer to use.
- It is still a work in progress. No browsers have full HTML5 support
Structure of HTML5
HTML Tags
|
Tag Name |
Purpose |
|
<html> |
It is the root of the html document which is used to
specify that the document is html. |
|
<head> |
To contain all the head element in the html file. It
contains the title, style, meta, … etc |
|
<body> |
To define the body of html document. It contains
image, tables, lists, … etc. |
|
<title> |
To define the title of html document |
|
<h1>,<h2>…
<h6> |
Heading Tags: It is used to define the heading of
html document |
|
<p> |
to define paragraph content in html document |
|
<b> |
to specify bold content in html document |
|
<table>,<tr>,<td><th> |
to create a table in html document |
|
<i> |
to write the content in italic format |
|
<u> |
to set the content underline |
|
<a> |
to link one page to another page |
|
<ol>, <ul>, <li> |
to list the content(ordered / unordered) |
|
<br> |
to break the line |
|
<img> |
to add image element in html document |
|
<link> |
to link the content from external source |
|
<hr> |
to display the horizontal line in html document |
|
<meta> |
to specify the page description. For example: last modifier, authors,
… etc. |
|
<form>,<input>, <select>,<option> |
to create html form |
Tables
- Tables in the web page can be displayed using <table> tag.
- <th>,<tr> and <td> are the some of the sub elements of <table> element
- Example
Lists
- HTML lists are used to present the list of items in the proper format.
- This is achieved by <ul>, <ol> and its sub element <li> tags
- There are two ways to present the list of items in a webpage
- Ordered List using <ol> tag
- Unordered List using <ul> tag
- Example of Ordered List
- Example of unordered list
Image
- Images can be displayed on the web page using <img> tag
- It has the following attributes
- src - image source file name
- alt - show alternate text if image is not available
- height - change the height of the image
- width - change the width of the image
- Example
CSS3
CSS Types
- Inline
- Embedded
- External style sheets
Inline Style Sheet:
Embedded Style Sheet:
External Style Sheet:
Importing Style Sheet
- The @import rule is another way of loading an external style sheet
- The @import statement instructs the browser to load an external style sheet and use its styles.
- You can use it in two ways:
CSS SYNTAX
Example:
CSS Units
|
Unit |
Description |
|
cm |
centimeters
|
|
mm |
millimeters
|
|
in |
inches
(1in = 96px = 2.54cm) |
|
px * |
pixels
(1px = 1/96th of 1in) |
|
pt |
points
(1pt = 1/72 of 1in) |
|
pc |
picas
(1pc = 12 pt) |
|
em |
Relative
to the font-size of the element (2em means 2 times the size of the current
font) |
CSS Selectors:
- Selectors are used to declare which of the markup elements a style applies to
- The declarations that appear in the block that follows the selector may be applied to all elements of a specific type, or only those elements that match a certain attribute
- Each declaration consists of a property and a value
- Selectors are one of the most important aspects of CSS as they are used to select elements on a web page so that they can be styled.
- Element Type Selector
- Id Selectors
- Class Selectors
- Descendant Selectors
- Child Selectors
- Adjacent Sibling Selectors
- Grouping Selectors
- CSS Selectors
Rule cascading
- Sort by Importance
- Sort by weight
- Sort by Specificity
- Sort by Order
- an ID will win out over a class
- a class will win out over a tag
- Author: Style Sheet - Inline within the body of the web page
- Author: Style Sheet - Embedded in the head of the web page
- Author: Style Sheet – Linked
- User: Style Sheet
- Default: Browser
- #content p em{ color: #foo;}
- #content p{color: #f00;}
- #content{color: #333;}
- If two rules have the same properties, specificy and values the one that appears later in the css will be the one that the browser uses
Inheritance
- Some CSS properties by default inherit values set on the current element's parent element
- For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.
Example:
Background Properties
|
Property Name |
Value |
|
background-color |
red, blue |
|
background-image |
url("gradient_bg.png") |
|
background-repeat |
repeat| repeat-x | repeat-y | no-repeat |
|
bacground-attachment |
scroll | fixed |
|
background-position |
left top | left center | left bottom | right top right center | right bottom | center top | center center | center bottom |
|
background-size |
Specify
the size of a background-image with "auto" and in pixels |
|
background-clip |
defines
how far the background (color or image) should extend within an element |
|
background-origin |
padding-box
| border-box | content-box | initial | inherit |
Example:
Border Images
- The border-image property allows you to specify an image to be used as the border around an element.
- The property has three parts:
- The image to use as the border
- Where to slice the image
- Define whether the middle sections should be repeated or stretched
Example:
Colors
Shadows Properties
|
Property |
Description |
|
Adds one or more shadows to an element |
|
|
Adds one or more shadows to a text |
Text Shadow Example:
Box Shadow Example:
Text Transformations
- 2D Transformation
- 3D Transformation
2D Transformation
- 2D Transforms give us the ability to perform basic manipulations on elements in space
- A transformation modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis.
- There are several types of transformation which are listed below:
- translate(), translateX(), traslateY()
- rotate()
- scale(), scaleX(), scaleY()
- skew(), skewX(), skewY()
- matrix()
|
Function |
Description |
|
translate(tx,ty) |
Moves the element by the given amount along the X
and Y-axis. |
|
translateX(tx) |
Moves the the element by the given amount along the
X-axis. |
|
translateY(ty) |
Moves the the element by the given amount along the
Y-axis. |
|
rotate(a) |
Rotates the element by the specified angle around
the origin of the element, as defined by
the transform-origin property. |
|
scale(sx,sy) |
Scale the width and height of the element up or down
by the given amount. The function scale(1,1) has no effect. |
|
scaleX(sx) |
Scale the width of the element up or down by the
given amount. |
|
scaleY(sy) |
Scale the height of the element up or down by the
given amount. |
|
skew(ax,ay) |
Skews the element by the given angle along the X and
Y-axis. |
|
skewX(ax) |
Skews the element by the given angle along the
X-axis. |
|
skewY(ay) |
Skews the element by the given angle along the
Y-axis. |
|
matrix(n,n,n,n,n,n) |
Specifies a 2D transformation in the form of a
transformation matrix comprised of the six values. |
Example:
3D Transformation
|
Function |
Description |
|
translate3d(tx,ty,tz) |
Moves the element by the given amount along the X,
Y & Z-axis. |
|
translateX(tx) |
Moves the element by the given amount along the
X-axis. |
|
translateY(ty) |
Moves the element by the given amount along the
Y-axis. |
|
translateZ(tz) |
Moves the element by the given amount along the
Z-axis. |
|
rotate3d(x,y,z, a) |
Rotates the element in 3D space by the angle
specified in the last parameter, around the [x,y,z] direction vector. |
|
rotateX(a) |
Rotates the element by the given angle around the
X-axis. |
|
rotateY(a) |
Rotates the element by the given angle around the
Y-axis. |
|
rotateZ(a) |
Rotates the element by the given angle around the
Z-axis. |
|
scale3d(sx,sy,sz) |
Scales the element by the given amount along the X,
Y and Z-axis. The function scale3d(1,1,1) has no effect. |
|
scaleX(sx) |
Scales the element along the X-axis. |
|
scaleY(sy) |
Scales the element along the Y-axis. |
|
scaleZ(sz) |
Scales the element along the Z-axis. |
|
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
Specifies a 3D transformation in the form of a 4×4
transformation matrix of 16 values. |
|
perspective(length) |
Defines a perspective view for a 3D transformed
element. In general, as the value of this function increases, the element
will appear further away from the viewer. |
Text Transitions
|
Property |
Description |
|
transition |
A shorthand property for setting all the four
individual transition properties in a single declaration. |
|
transition-delay |
Specifies when the transition will start. |
|
transition-duration |
Specifies the number of seconds or milliseconds a
transition animation should take to complete. |
|
transition-property |
Specifies the names of the CSS properties to which a
transition effect should be applied. |
|
transition-timing-function |
Specifies how the intermediate values of the CSS
properties being affected by a transition will be calculated. |
Animations
- An animation lets an element gradually change from one style to another.
- You can change as many CSS properties you want, as many times you want.
- To use CSS animation, you must first specify some keyframes for the animation.
- Keyframes hold what styles the element will have at certain times.
Components:
- @keyframe animation-name
- When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
- animation-name
- Defines the name of the animation specified in the @keyframe
- animation-duration
- defines how long time an animation should take to complete
- If the animation-duration property is not specified, no animation will occur, because the default value is 0s
