HTML, CSS, Bootstrap Training

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-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
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); /*
}
scale()
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9
*/
-webkit-transform: scale(2,4); /*
}
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>
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>
<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>
<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">«</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">»</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">×</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">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<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">

<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>
<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="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>
</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
jobin@tenderwoods.com
jobincs@gmail.com
skype
jobincsskype
fb
Jobin C Stani

HTML, CSS, Bootstrap Training

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML, CSS, Bootstrap Training

Încărcat de

Drepturi de autor:

Formate disponibile

HTML,CSS,Bootstrap

<a> - anchor tag

<img> image tag

<form> form elements

Styling the layout for giving a pleasing look

some css properties

HTML5 & CSS3

Some of the most interesting new features in HTML5

The <canvas> element for 2D drawing

New elements in HTML5

Semantic Elements in HTML5

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

CSS3 Text Shadow

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

@media (max-width: 600px) {

Scripting language of web make website

JavaScript can manipulate the DOM

used to hold values

The else Statement

The purpose of jQuery is to make it much

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

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

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

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

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

S-ar putea să vă placă și