Web designing workshop

60 %
40 %
Information about Web designing workshop

Published on March 6, 2014

Author: kanakiyajay

Source: slideshare.net


The slides for web Design workshop conducted by Jay Kanakiya in Vishwakarma Institute Of Technology via IEEE

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=“”>

Forms • <input type=“text | email | button | password |search | url | date ”> • <textarea></textarea> • <input type="radio" name="cricket" value="dhoni"> Dhoni • <input type=“checkbox” name=“none”> • <input type=“submit” name=”submit”>

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

Boostrap Grid System

Chrome Devtools


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

#parent presentations

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Web Designing Workshop | Training | Courses - Robosapi

Learn how to web design and make your own website, come in Robosapiens two days Web Designing Workshop, Training, and Courses and learn web designing.
Read more

Web Designing | CodeAce Technologies

About Workshop – Web Designing CodeAce Technologies organizes two days Workshop Program on Web Designing. Workshop Highlights:- >> 2 Days Workshop ...
Read more

Web Designing Workshop Seminars for Colleges and corporates

Workshop and Corporate Training by Delhi Institute of Computer Courses (DICC) on Web Designing and Graphic Designing. Introduction: Web Designing is one of ...
Read more

Web Workshop | Website Designing Company

The Web Workshop specialises in web site design and hosting using open source technologies. We do domain name registrations, website hosting, web design ...
Read more

2-Day Intensive Web Design Workshop | Alightechs

The workshop for everyone who cares about a web liberated of device constraints, believes we shouldn’t punish users for browsing on a small screen, and ...
Read more

Designing Your Workshop - Leadership

Designing Your Workshop. ... On the Cutting Edge has many years of experience in designing successful workshops, ... and use the workshop to build the web ...
Read more

Web Designing WorkshopHitech Gurukul | Hitech Gurukul

Students learning web designing in web designing workshop at St. Joseph's Hi-Tech Gurukul during vacations.
Read more

30 workshops to boost your design skills in 2014 ...

30 workshops to boost your design skills in ... interface on the web and mobile. The workshops take place on the ... web designer Dan Donald ...
Read more

Workshop on web designing held - The Hindu

A two-day workshop on web designing organised by the Department of ECE and IEEE, ISTE & IETE Student Chapters of Malla Reddy Engineering College for Women ...
Read more

Responsive Web Design — Workshops and training with Karen ...

About Our In-House Responsive Design Workshops. ... Your workshop sounds amazing, and I’d like to talk with you about bringing it to my company.
Read more