This document summarizes a workshop on web design using HTML, CSS, and JavaScript. It covers the basics of creating a simple website using these languages, including how to structure pages with HTML tags, add styling with CSS, and introduce interactivity with JavaScript. The workshop also demonstrates how to use common tags and attributes, explore CSS properties like color, font, and positioning, and construct a basic grid system. Participants are given tasks to build sample web pages for practice.
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>
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:/workshopieee/examples/profile.html
• file:///H:/workshopieee/examples/gallery.html