Scribd
Upload
2K views

HTML, CSS, Bootstrap

HTML,CSS,Bootstrap document outlines a two day training course covering HTML, CSS, and Bootstrap fundamentals. Day 1 covers HTML basics like tags, forms, and CSS concepts like selectors and box models. It also introduces HTML5 features and CSS3 properties for effects, transformations and animations. Day 2 focuses on Bootstrap topics such as grids, components, and responsive design.

Uploaded by

Anonymous YX8k82zOy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

HTML, CSS, Bootstrap

HTML,CSS,Bootstrap document outlines a two day training course covering HTML, CSS, and Bootstrap fundamentals. Day 1 covers HTML basics like tags, forms, and CSS concepts like selectors and box models. It also introduces HTML5 features and CSS3 properties for effects, transformations and animations. Day 2 focuses on Bootstrap topics such as grids, components, and responsive design.

Uploaded by

Anonymous YX8k82zOy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 113

HTML,CSS,Bootstrap

Jobin C S
PhoneGap trainer at MobiGnosis
Co-founder & Chief Technology Officer
at
Tenderwoods Solutions Pvt Ltd.

DAY 1
HTML,CSS
Introduction
Markup Language
Basic Tags
-h
,div,input,list,table, etc..
Form elements
css
css selector
Box models
-margin.padding.border
Background
HTML5 & CSS3
New features
Semantic Tags
-Section,article,header,footer,nav etc..
-Canvas,svg Tags
Text effects
2D, 3d transformation
Transition effects
Css3 Animation
Gradient
Image sprites
Media query
Responsive design
Q and A plus 1 on 1 mentoring.

DAY 2
BootStrap
Introduction
Implementation
Grid System
Css Overview
Typography
Tables
Forms
Glyphicons
Responsive Utilities
Dropdowns
Navs
Media Objects
Lists,Panels
Alerts
Progressbars
Badges
Q and A plus 1 on 1 mentoring.

HTML
- It is a markup language describing web
documents.
- Hyper Text Markup Language
- A markup language is a set of markup tags
- HTML documents are described by HTML
tags
-

HTML

HEAD

BODY

<tagname>content</tagname>
eg:
The text between <html> and </html> describes an HTML
document
The text between <head> and </head> provides information
about the document
The text between <title> and </title> provides a title for the
document
The text between <body> and </body> describes the visible page
content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes paragraph

example
<html>
<head> </head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Tags
<h1> . <h6> - heading
<p> - paragraph
<b> - Bold
<i> - Italics
<br> - insert single line break
<pre> - Defines preformatted text
<div>
<button>,<input>,<ul>,<li>,<form>,
<select>

<a> - anchor tag


helps us to give links
<a href=home.html></a>
<a href=http://www.google.com></a>

<img> image tag


help to add images in html page
<img src=<path of image>/>
<img src=image.png />
<img src=img/image.jpg />

Attributes
Attributes provide additional information about an
element

eg:
title -in <p> tags
href - in <a> tags
width,height - size attributes
value,src,id,disabled,alt,style

<table> Table
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

-table
-Row
-column

<li> lists
<ul>
<li>List 1</li>
<li>List 2</li>
<ul>
<ol>
<li>List 1</li>
<li>List 2</li>
<ol>

types
1,A,a,I,
i
style
list-style-type
disc,circle,
squire,none

<form> form elements


Used to collect user input
<input>
<input type=text>
type=text,radio,password,submit,checkbox

<select>
used for showing dropdown
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>Four</option>
</select>

<textarea>
for multiline input field
<textarea rows=10 cols=30>
</textarea>

<div> tag
<div>
</div>
<div class=class name></div>
<div>
<div></div>
<div></div>
</div>

<iframe> iframe
used to display web page within a web page
<iframe src=url></iframe>

CSS

CSS

Styling the layout for giving a pleasing look

1) Style attribute
<p style="color:sienna;">This is
a paragraph.</p>
2) Style tag
<style> . </style>
3) from external file
<link rel=stylesheet href=<path> >

Syntax
selector

declaration

h1{color: red}
property

value

css selectors
tag selector
tag name{
property 1
property 2
}

id selector
#id name{
property 1
property 2
}

class selector
.class name{
property 1
property 2
}

example
Selectors
body{
background-color:red;
}
h1{
color:orange;
text-align:center;
}

Text
color:red;
text-align:center; (right,left)
text-decoration: none;
(overline,
line-through,underline)
text-transform: uppercase;
(lowercase,capitalize)
text-indent: 50px;

Fonts
font-family: Arial, Helvetica,
sans-serif;
font-style: normal; (italic,
oblique)
font-size: 40px;
font-size: 2.5em; relative 1em:
current font size

Links
a:link{}
a:visited{}
a:hover{}
a:active{}

List
display: inline;

Background
background-color:red;
background-image:url('image.jpg');
background-repeat:no-repeat;
(none,repeat-x,repeat-y)
background-position: right top;

List
list-style-image: url('img.jpg');
list-style-type: none;

Box model

margin: 5px;
margin-left(top,right,bottom):5px;
padding :5px;
padding-left(top,right,bottom):5px;
border: 5px solid red;
dotted,dashed,double,groove,ridge,
inset,outset
border-left(top,right,bottom)

some css properties


color:red;
padding:200px;
width:100px;,height
background-color:red;
margin:20px;
float:left; etc...

HTML5 & CSS3

Some of the most interesting new features in HTML5

The <canvas> element for 2D drawing


The <video> and <audio> elements for media
playback
Support for local storage
New content-specific elements, like <article>,
<footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email,
url, search

New elements in HTML5


The New <canvas> Element
<canvas> Used to draw graphics, on the fly, via
scripting (usually JavaScript)
<svg> for drawing vector graphics
The New media Element
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video>
and <audio>

Semantic Elements in HTML5

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

Section
Represents a generic document or
application section grouping of content
<section>
.
</section>

Article
consists of a self-contained composition in a
document
<article>
.
</article>

<nav>
a section with navigation links

<nav>
<a href="#">One</a> |
<a href="#">Two</a> |
<a href="#">Three</a> |
<a href="#">Four</a>
</nav>

<figure>

<figure>
<img src="image link">
<figcaption>caption</figcaption>
</figure>

<canvas>
<canvas id="can" width="200" height="100" style="
border:2px solid black;">
</canvas>
<script>
var a=document.getElementById("can");
var b=a.getContext("2d");
b.moveTo(0,0);
b.lineTo(200,100);
b.stroke();
</script>

<svg>
<svg>
<line x1="0" y1="0" x2="200"
y2="100"
style="stroke:rgb(255,0,0);
stroke-width:2"/>
</svg>

<video>

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<audio>

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
</audio>

CSS3

CSS3 modules

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 Text Shadow

{
text-shadow: 5px 5px 5px #FF0000;
}
h

blr color

Fonts
@font-face
{
font-family: myfont;
src: url(sansation_light.woff);
}
div
{
font-family:myfont;
}

Gradient
Linear Gradients
(goes down/up/left/right/diagonally)

Radial Gradients
(defined by their center)

Linear Gradient
background: linear-gradient(direction, color1,
color2, ...);

eg:
background: linear-gradient(green , blue);
background: linear-gradient(to bottom right,
red , blue, green);
background: linear-gradient(80deg, red ,
blue, green);

Radial Gradient
background: radial-gradient(color1, color2,
...);
background: radial-gradient(green , blue);
background: radial-gradient(circle,green ,
blue);

image sprites
#id1 {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#id2 {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
<img id="id1" src="img_trans.gif">
<img id="id2" src="img_trans.gif">

2D Transforms

translate()
rotate()
scale()
skew()
matrix()

rotate()
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9
*/
-webkit-transform: rotate(30deg); /*
Safari and Chrome */
}

translate()
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE
9 */
-webkit-transform: translate(50px,100px); /*
Safari and Chrome */
}

scale()
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9
*/
-webkit-transform: scale(2,4); /*
Safari and Chrome */
}

skew()
div
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /*
IE 9 */
-webkit-transform:skew(30deg,
20deg); /* Safari and Chrome */
}

3D Transforms
rotateX()
rotateY()
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); }
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); }

CSS3 Transitions
transition: <property> <time>;
eg.
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */}
div:hover
{
width:300px;
}

animation
animation:<key frame name> <time>;
@keyframes <name>
{
from {property 1;}
to {property 2;}
}
@-webkit-keyframes <name> /* Safari and Chrome */
{
from {property 1;}
to {property 2;}
}

eg.
div
{
width:100px;
height:100px;
background:red;
animation:test 5s;
-webkit-animation:test 5s; /* Safari and Chrome */
}

@-webkit-keyframes test /* Safari and Chrome */


{
from {background:red;}
to {background:yellow;}
}

h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
animation-direction: alternate;
animation-iteration-count: infinite;

Fluid Layout
For multi resolution screens
Changes the layout according to the size
of the screen
Uses % instead of pixels

Example
width = 960px;

width = 100%;

media query
@media not|only mediatype and (media feature) {
CSS-Code;
}

@media (max-width: 600px) {


body {
background: red;
}
}
@media (min-width: 700px) { ... }
@media (min-width: 700px) and (orientation: landscape) { ... }

Media Types
all -Used for all media type devices
aural -Deprecated. Used for speech and sound synthesizers
braille-Deprecated. Used for braille tactile feedback devices
embossed -Deprecated. Used for paged braille printers
handheld-Deprecated. Used for small or handheld devices
print -Used for printers
projection -Deprecated. Used for projected presentations, like slides
screen -Used for computer screens, tablets, smart-phones etc.
speech -Used for screenreaders that "reads" the page out loud

javaScript

javaScript

Scripting language of web make website


more interactive and dynamic

Usage
<script> .. </script>
external file
<script src=> </script>

JavaScript can manipulate the DOM


(change HTML contents).
eg:

document.getElementById()

JavaScript Syntax
1. LITERALS
2.VARIABLES
3.OPERATORS
4. STATEMENTS
5.KEYWORDS
6. FUNCTIONS
7.IDENTIFIERS

: numerals, strings
: x=5
: a+b, a*b
: x = 5 + 6; y = x * 10;
: var a, var b
: function a(){.....}
:

variables

used to hold values

functions

function test(){
alert("welcome to mobignosis");
}

Events
onchange: An HTML element has been changed
onclick: The user clicks an HTML element
onmouseover: The user moves the mouse over an HTML
element
onmouseout: The user moves the mouse away from an
HTML element
onkeydown; The user pushes a keyboard key
onload: The browser has finished loading the page

Comparisons
== EQUAL TO
=== EXACTLY EQUAL TO (equal value and equal type)
!= NOT EQUAL
!== NOT EQUAL(different value or different type)
> GREATER THAN
< LESSER THAN
>= GREATER THAN OR EQUAL TO
<= LESSER THAN OR EQUAL TO

Conditional Statements
The if Statement
if (condition) {
block of code to be executed if the condition is true
}

The else Statement


if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}

JavaScript LOOPS
for loop
for (statement 1; statement 2; statement 3)
{
code block to be executed
}
eg:
for (var i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}

JQuery

The purpose of jQuery is to make it much


easier to use JavaScript on your website.

Jquery syntax
$(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML
elements
A jQuery action() to be performed on the
element(s)

$(document).ready(function(){
// jQuery methods go here...
});
OR
$(function(){
// jQuery methods go here...
});

Jquery get
text(),
Sets or returns the text content of selected elements
html(),
Sets or returns the content of selected elements
(including HTML markup)
val()
Sets or returns the value of form fields
attr()
Used for grt attribute value

eg:
alert("Text: " + $("#test").text());

alert("HTML: " + $("#test").html());

alert("Value: " + $("#test").val());

alert($("#w3s").attr("href"));

Set Content
text()
Sets or returns the text content of selected elements
html()
Sets or returns the content of selected elements
(including HTML markup)
val()
Sets or returns the value of form fields

eg:
$("#test1").text("Hello world!");

$("#test2").html("<b>Hello world!</b>");

$("#test3").val("Dolly Duck");

jQuery add
append() - Inserts content at the end of the selected
elements
prepend() - Inserts content at the beginning of the
selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements

eg:
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("p").after("Some text after");
$("p").before("Some text before");

Twitter Bootstrap

http://getbootstrap.com/
download the latest bootstrap files
add to html file
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="bootstrap.min.js"></script>

Grid

Grid classes
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

eg:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>

typography
same as html
colors
.text-muted, .text-primary, .text-success, .text-info, .text-warning,.textdanger:

Button Group
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

btn-group-vertical

badge
<span class="badge">5</span>

Progressbar
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
progress-bar-striped

.active - animation
.progress-bar-success,.progress-bar-info,.progress-bar-warning,.progress-bar-danger

Dropdown
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Input Groups
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" ariadescribedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" ariadescribedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest
dollar)">
<span class="input-group-addon">.00</span>
</div>

tabs
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

Pills
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>

forms
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

breadcrumbs
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

Pagination
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

table
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>

table-striped, .table-bordered, .table-hover

Alerts
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Dismissible
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="
Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking
too good.
</div>

Image
img-rounded, img-circle, img-thumbnail
img-responsive

Jumbtron
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework
for developing
responsive, mobile-first projects on the web.</p>
</div>

Page-Header
<div class="page-header">
<h1>Example Page Header</h1>
</div>

Buttons
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
eg:

Btn-Size
.btn-lg
.btn-md
.btn-sm
.btn-xs
btn-block
.active
.disabled

<button type="button" class="btn btn-default">Default</button>

Icons
<span class="glyphicon glyphicon-search" aria-hidden="true"
></span>

Button
<button type="button" class="btn btn-default" aria-label="Left
Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="
true"></span>
</button>

List groups
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
with links
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

form element
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

<form class="form-horizontal" role="form">


<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"
>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter
password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
</form>

Navbars
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>

Thumbnail
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
</div>

Media
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>

ANY Questions ?

Jobin C S
phone

9496369416
emails

[email protected]
[email protected]
skype

jobincsskype
fb

Jobin C Stani

You might also like