Slide 1

Slide 1 text

Welcome

Slide 2

Slide 2 text

kickstarting web development

Slide 3

Slide 3 text

html, css and javascript Your Gateway to the Web

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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 beneficial to have it.

Slide 6

Slide 6 text

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 first.html file in your notepad or other text editor.

Slide 7

Slide 7 text

HTML tags … … … …

Slide 8

Slide 8 text

html tags 2 Please open second.html(both in your text editor and browser). … Attributes provide additional information about an element. Attributes are always specified 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 file.

Slide 9

Slide 9 text

html tags 2 Unordered List
Ordered List
List item
  • Link

    Slide 10

    Slide 10 text

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

    Slide 11

    Slide 11 text

    Jill Smith 50 Eve Jackson 94 Jill Smith 50 Eve Jackson 94 John Doe 80

    Slide 12

    Slide 12 text

    HTML tags 4 … … for dropdown menu … for submit button.

    Slide 13

    Slide 13 text

    css

    Slide 14

    Slide 14 text

    CSS CSS stands for Cascading Style Sheets. CSS defines how HTML elements are to be displayed External Style Sheets are stored in CSS files

    Slide 15

    Slide 15 text

    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.

    Slide 16

    Slide 16 text

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

    Slide 17

    Slide 17 text

    CSS Demo1 Please open the folder CSS. Please open the file first_CSS.html in your text editor. Note the . This sets the file first.css as the stylesheet for this webpage. Now open first.css file and modify to enjoy.

    Slide 18

    Slide 18 text

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

    Slide 19

    Slide 19 text

    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.

    Slide 20

    Slide 20 text

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

    Slide 21

    Slide 21 text

    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 and elements To specify table borders in CSS, use the border property. The example below specifies a black border for , , and elements

    Slide 22

    Slide 22 text

    This was HTML

    Slide 23

    Slide 23 text

    This is HTML with CSS

    Slide 24

    Slide 24 text

    CSS BOX Model

    Slide 25

    Slide 25 text

    No content

    Slide 26

    Slide 26 text

    No content

    Slide 27

    Slide 27 text

    Doubts ?

    Slide 28

    Slide 28 text

    Thank You