2. Objective
• Student has got to be able to code a simple
website and upload it to http://neocities.org
3. What you can do with html,css,js
•
•
•
•
•
•
Web apps
Chrome Extensions
Chrome Apps
iOS & Android [ PhoneGap ]
FireFox OS
Windows 8
4. 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
5. 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.
6. 3 Things inside Webpage
• Html => Markup
• Css => Styling
• Javascript => Dynamism
9. • 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.
10. 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
16. DIV element
• Stands for division.
• Most Commonly Used.
• A block level container (or 'division' of the
web page) for content with no semantic
meaning.
18. Task 1
• Create a simple webpage just using html
file:///H:/workshopieee/examples/beginner.html
19. 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>
21. Selectors
• [element]
Basic Selector
• #
ID
• .
Class
• *
ALL
• >
direct child
• [space]
Any child inside
• :hover
Hovers
• #parent > .child
Nesting
file:///H:/workshopieee/examples/selectors.html
22. Basic Props
• Length and percentages
•
•
•
•
px : pixels
Em : current font-size
Pt : printed media
% : percentages
• height , width , Fonts , margin , padding
23. 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 ;
• }
33. 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
