web designing workshop
DESCRIPTION
html and css workshopTRANSCRIPT
Web Designing Workshop
IEEEJay 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:/workshop-ieee/examples/beginner.h
tml
<!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:/workshop-ieee/examples/beginner.h
tml
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:/workshop-ieee/examples/selectors.h
tml
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,word-
spacing , 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
Clear
• 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