Kickstarting Web Development

Welcome

kickstarting web development

html, css and javascript Your Gateway to the Web

–First Class of every web developer HTML-Hypertext Markup Language CSS-
Cascading Style Sheets Javascript-JS

the home analogy HTML-the walls of your home.This decides your
kitchen , the living room, the bedroom etc. CSS- Adds style to your home. Like the paint on your walls, interior design, the lighting etc. JavaScript- Adds functionality to your website. Like the furniture in your house. While your website may be functional without it , it’s always beneﬁcial to have it.

Html tags All code between < & > also called
angular brackets. All HTML commands are called tags. They tell the browser what is to be displayed and in which format. Please open the ﬁrst.html ﬁle in your notepad or other text editor.

HTML tags <html>…</html> <head>…</head> <title>…</title> <body>…</body> <h1>…</h1> <p>…</p>

html tags 2 Please open second.html(both in your text editor
and browser). <img src>…</img> Attributes provide additional information about an element. Attributes are always speciﬁed in the start tag. Attributes come in name/value pairs like: name="value". Experiment by changing the height and width of the image in your ﬁle.

html tags 2 Unordered List <ul>…</ul> Ordered List <ol>…</ol> List
item <li>…</li> Link <a href="…">…</a>

html tags 3 <table><tr>…</tr></table> tr-table row. th-table column. td-table data
<th>…</th> <td>…</td>

<table border="1" > <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td>
<td>Jackson</td> <td>94</td> </tr> </table> Jill Smith 50 Eve Jackson 94 John Doe 80

HTML tags 4 <form>…</form> <input type="radio" name="gender">…</input> <select> for dropdown
menu <input type="submit" value="register">…</input> for submit button.

CSS CSS stands for Cascading Style Sheets. CSS deﬁnes how
HTML elements are to be displayed External Style Sheets are stored in CSS ﬁles

CSS Syntax The selector points to the HTML element you
want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.

CSS Example A CSS declaration always ends with a semicolon,
and declaration groups are surrounded by curly braces: p {color:red;text-‐align:center;}

CSS Demo1 Please open the folder CSS. Please open the
file first_CSS.html in your text editor. Note the <link rel="stylesheet" href="first.css" type="text/css"></link>. This sets the file first.css as the stylesheet for this webpage. Now open first.css file and modify to enjoy.

CSS Demo2 CSS Selectors are of three types Grouping Selectors
: h1{ property: val; } Id selector : #para1{ property : val;} Class selector : .container{ property: val;}

CSS Demo 2 Please open second_css.html in the CSS folder.
Open second.css . Notice the use of different type of selectors. Notice the a:active selector. It represents a particular state of the html element that you want to style.

CSS Demo 3 In this we use CSS to style
a table.

CSS Demo 3 td { padding:
15px; } Table Padding To control the space between the border and content in a table, use the padding property on <td> and <th> elements To specify table borders in CSS, use the border property. The example below specifies a black border for <table>, <th>, and <td> elements

This was HTML

This is HTML with CSS

CSS BOX Model

Doubts ?

Thank You

Kickstarting Web Development - 1

Kickstarting Web Development - 1

WebDev Labs

More Decks by WebDev Labs

Other Decks in Programming

Featured

Transcript

Welcome

html, css and javascript Your Gateway to the Web

–First Class of every web developer HTML-Hypertext Markup Language CSS-

the home analogy HTML-the walls of your home.This decides your

Html tags All code between < & > also called

HTML tags <html>…</html> <head>…</head> <title>…</title> <body>…</body> <h1>…</h1> <p>…</p>

html tags 2 Please open second.html(both in your text editor

html tags 2 Unordered List <ul>…</ul> Ordered List <ol>…</ol> List

html tags 3 <table><tr>…</tr></table> tr-table row. th-table column. td-table data

<table border="1" > <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td>

HTML tags 4 <form>…</form> <input type="radio" name="gender">…</input> <select> for dropdown

css

CSS CSS stands for Cascading Style Sheets. CSS deﬁnes how

CSS Syntax The selector points to the HTML element you

CSS Example A CSS declaration always ends with a semicolon,

CSS Demo1 Please open the folder CSS. Please open the

CSS Demo2 CSS Selectors are of three types Grouping Selectors

CSS Demo 2 Please open second_css.html in the CSS folder.

CSS Demo 3 In this we use CSS to style

CSS Demo 3 td { padding:

This was HTML

This is HTML with CSS

CSS BOX Model

Doubts ?

Thank You