Web designing workshop

Web Designing Workshop

IEEE
Jay Kanakiya

Objective
• Student has got to be able to code a simple
website and upload it to http://neocities.org

What you can do with html,css,js
•
•
•
•
•
•

Web apps
Chrome Extensions
Chrome Apps
iOS & Android [ PhoneGap ]
FireFox OS
Windows 8

Hello World
• Open a new File in Sublime Text .Copy Below
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
• Save it as index.html
• Open that file in Chrome Browser

History
• The founder of HTML was Tim Berners-Lee
• Html => Hyper text Markup Language
• The HTML 2.0 specification is dated November,
1995
• Vision of the HTML developers is that all devices
must be able to reach the data on the Internet:
computers with different platforms, browsers and
characteristics, pocket devices, cell phones,
devices for speech, and many others.

3 Things inside Webpage
• Html => Markup
• Css => Styling
• Javascript => Dynamism

SIMPLE SYNTAX
<tag attribute='value'>content</tag>

HTML
•
•
•
•

<b>BOLD</b>
<i>italic</i>
<u>Underlined</u>
<i><u>italic and underlined</u></i>

• Head | Tag that surrounds important content
that is invisible to the user, but is important to
the browser. Elements within this tag contain
metadata about the page and links to
stylesheets, scripts, etc.
• The body is the container for all of a page's
content. Comes after the <head> tag, within
the overall <html> tag.

Most Common Tags
• <h1> <h2> <h3> <h4> <h5> => Headings
• <p>This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.</p>
• <ol><ul> Lists
• <li> List elements

•
•
•
•
•

<a href=“http://facebook.com”>FB</a>
<table>
<tr><td></td></tr>
</table>
<img>

Attributes
•
•
•
•

<div class=“vit ieee”></div>
<p id=“information”></p>
<img src=“” />
<a href=“”>

Task 1
Make this page
file:///H:/workshopieee/examples/beginner.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<tr><td></td>
<td></td></tr>
<tr><th></th>
<th></th></tr>
</table>
<h1></h1>
<h2></h2>
<p></p>
<ol>
<li><i></i></li>
<li><i></i></li>
<li></li>
</ol>
</body>
</html>

DIV element
• Stands for division.
• Most Commonly Used.
• A block level container (or 'division' of the
web page) for content with no semantic
meaning.

Embeddable Content
• <video src="kitties.mp4" width="300"
height="200" loop muted autoplay
controls></video>
• <audio src="meow_mix.mp3"
controls></audio>
• <canvas id="wittykitty" width="800"
height="450“></canvas>
file:///H:/workshop-ieee/tearable-cloth.html

Task 1
• Create a simple webpage just using html
file:///H:/workshopieee/examples/beginner.html

CSS
•
•
•
•
•

Cascading StyleSheets
3 way to style an element
<div style=“color:red”></div>
<style> div { color : red} </style>
<link rel=“stylesheet” href=“style.css”></link>

Syntax
Selector {
property1 : value1;
property2 : value2 ;
}
P{
Color : red ;
Height : 4px;
}

Selectors
• [element]
Basic Selector
• #
ID
• .
Class
• *
ALL
• >
direct child
• [space]
Any child inside
• :hover
Hovers
• #parent > .child
Nesting
file:///H:/workshopieee/examples/selectors.html

Basic Props
• Length and percentages
•
•
•
•

px : pixels
Em : current font-size
Pt : printed media
% : percentages

• height , width , Fonts , margin , padding

Colors
• CSS brings 16,777,216 colors to your disposal.
They can take the form of a name,
an RGB (red/green/blue) value or a hex code.
• P{
• Color : #ccc ;
• Color : rgb(0,0,0) ;
• Color : red ;
• }

Fonts
• font-family: "Times New Roman“;
• Font-size : 16px;
• Font-weight : bold ;
• Font-style : italic ;
Text-align, letter-spacing , line-height,wordspacing , text-indent ,
• total : 90+ css properties

The Box Model

file:///H:/workshop-ieee/examples/boxmodel.html

POSITIONING
•
•
•
•

Static
Fixed
Relative
Absolute

file:///H:/workshop-ieee/examples/position.html

Floats

file:///H:/workshop-ieee/examples/float.html

• Why use a Grid System ?
The Bootstrap Grid Framework
file:///H:/workshop-ieee/examples/grid.html

http://getbootstrap.com/

Task 2
• Make your Profile page and attach it to gallery
page .
file:///H:/workshop-ieee/examples/profile.html
file:///H:/workshop-ieee/examples/gallery.html

Web designing workshop

More Related Content

What's hot (7)

Similar to Web designing workshop (20)

Recently uploaded (20)

Web designing workshop