1 of 45

1

INTERNET

HTML

2 of 45

Internet

2

  • Networks of networks
  • Information network

3 of 45

History of Internet

  • 1968- ARPANET(Advanced Research Projects Agency)
  • 1970 – Military & University
  • 1980 – Companies & Individuals
    • Advantages
      • Reliable
      • Re route the flow of data
      • Powerful communication
      • inexpensive

​

3

4 of 45

Types of programs

  • Server programs
    • Provides a service
      • Eg Mail server

​

  • Client programs
    • Request service
      • Eg internet explorer

​

4

5 of 45

Types of Connections

  • Dial up connection
    • Modem & regular telephone line
    • Dial to ISP using username & password
    • Advantages
      • Available everywhere
      • Convenient while travelling
      • Cheap
    • Disadvantages
      • Slow
      • Voice & data transmission not possible simultaneously
      • Downloading faster uploading very slow

5

6 of 45

Types of Connections

  • ISDN (integrated services digital network)
    • Company that connects to ISP digitally
    • 3 parts called channels
    • 2B channels for data
    • 1D channel for data control
    • Adv
      • Voice & data at same time
      • ISDN phone line & modem

6

7 of 45

Types of Connections

  • DSL (Digital Subscriber Line)
    • Always turned on
    • Very fast
    • Voice & data at same time
    • Upload & download are symmetric

7

8 of 45

HTML

  • To define appearance & structure of web pages
  • Linking of information by hypertext
  • Developed by W3C
    • World Wide Web Consortium

​

8

9 of 45

Tags

  • The content between angle brackets are reserved
    • <html> , <p> etc
    • Types of tags
      • Basic tags
      • Formatting tags
      • List tag
      • Table tag
      • Image tag
      • Anchor tag
      • Frame tag

9

10 of 45

Basic tags

  • <html> ……</html> -html document
  • <head>….</head> - heading of the document
    • <h1> to <h6> - size of heading
  • <title>….</title> -title bar name
  • <body>…</body> -body of the document

​

10

11 of 45

Attributes

  • Additional information to a tag
  • Has variable name & value
    • <font size=β€œ12” color=β€œred” style=β€œtimesnewroman”>

11

12 of 45

Formatting tags

  • <b> bold
  • <i> italics
  • <u> underline
  • <big> bigger font
  • <blockquote> indented
  • <br> break
  • <hr> horizontal ruler
  • <p> paragraph
  • <pre> predefined
  • <small> smaller font
  • <font>
  • <marque>

12

13 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>
  • <h2>An unordered HTML list</h2>
  • <ul>
  • <li>Coffee</li>
  • <li>Tea</li>
  • <li>Milk</li>
  • </ul>
  • </body>
  • </html>

13

14 of 45

An unordered HTML list

  • Coffee
  • Tea
  • Milk

​

14

15 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>
  • <h2>An ordered HTML list</h2>
  • <ol>
  • <li>Coffee</li>
  • <li>Tea</li>
  • <li>Milk</li>
  • </ol>
  • </body>
  • </html>

15

16 of 45

An ordered HTML list

  • Coffee
  • Tea
  • Milk

​

16

17 of 45

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <style>
  • table, th, td {
  • border: 1px solid black;
  • padding: 5px;
  • }
  • table {
  • border-spacing: 15px;
  • }
  • </style>
  • </head>
  • <body>

​

  • <h2>Border Spacing</h2>
  • <p>Border spacing specifies the space between the cells.</p>

​

  • <table style="width:100%">
  • <tr>
  • <th>Firstname</th>
  • <th>Lastname</th>
  • <th>Age</th>
  • </tr>
  • <tr>
  • <td>Jill</td>
  • <td>Smith</td>
  • <td>50</td>
  • </tr>
  • <tr>
  • <td>Eve</td>
  • <td>Jackson</td>
  • <td>94</td>
  • </tr>
  • <tr>
  • <td>John</td>
  • <td>Doe</td>
  • <td>80</td>
  • </tr>
  • </table>

​

  • <p>Try to change the border-spacing to 5px.</p>

​

  • </body>
  • </html>

​

17

18 of 45

18

19 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>

​

  • <h2>HTML Images</h2>
  • <p>HTML images are defined with the img tag:</p>

​

  • <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

​

  • </body>
  • </html>

19

20 of 45

20

21 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>

​

  • <h2>The href Attribute</h2>
  • <p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

​

  • <a href="https://www.w3schools.com">This is a link</a>

​

  • </body>
  • </html>

21

22 of 45

  • The href Attribute
  • HTML links are defined with the a tag. The link address is specified in the href attribute:
  • This is a link

22

23 of 45

Internal CSS

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <style>
  • body {background-color: powderblue;}
  • h1 {color: blue;}
  • p {color: red;}
  • </style>
  • </head>
  • <body>

​

  • <h1>This is a heading</h1>
  • <p>This is a paragraph.</p>

​

  • </body>
  • </html>

​

23

24 of 45

24

25 of 45

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <link rel="stylesheet" href="styles.css">
  • </head>
  • <body>

​

  • <h1>This is a heading</h1>
  • <p>This is a paragraph.</p>

​

  • </body>
  • </html>

​

25

26 of 45

26

27 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>

​

  • <h2>HTML Forms</h2>

​

  • <form action="/action_page.php">
  • First name:<br>
  • <input type="text" name="firstname" value="Mickey">
  • <br>
  • Last name:<br>
  • <input type="text" name="lastname" value="Mouse">
  • <br><br>
  • <input type="submit" value="Submit">
  • </form>

​

  • <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

​

  • </body>
  • </html>

27

28 of 45

28

29 of 45

  • <framesetΒ cols="25%,*,25%">οΏ½Β Β <frameΒ src="frame_a.htm">οΏ½Β Β <frameΒ src="frame_b.htm">οΏ½Β Β <frameΒ src="frame_c.htm">οΏ½</frameset>

29

30 of 45

30

31 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>

​

  • <script charset="UTF-8" src="demo_script_charset.js">
  • </script>

​

  • <p>The Greek characters display correctly because they are part of the "UTF-8" character set.</p>
  • <p>Try changing character sets to "ISO-8859-1" (default), "windows-1252" or "UTF-16".</p>

​

  • </body>
  • </html>

​

31

32 of 45

  • Greek symbols: αβγδΡ΢ηθ
  • The Greek characters display correctly because they are part of the "UTF-8" character set.
  • Try changing character sets to "ISO-8859-1" (default), "windows-1252" or "UTF-16".

​

32

33 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>

​

  • <h2>What Can JavaScript Do?</h2>

​

  • <p id="demo">JavaScript can change HTML content.</p>

​

  • <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

​

  • </body>
  • </html>

​

33

34 of 45

34

35 of 45

  • <!DOCTYPE html>
  • <html>
  • <body>

​

  • <h2>JavaScript Operators</h2>

​

  • <p>The + operator concatenates (adds) strings.</p>

​

  • <p id="demo"></p>

​

  • <script>
  • var txt1 = "What a very";
  • var txt2 = "nice day";
  • document.getElementById("demo").innerHTML = txt1 + txt2;
  • </script>

​

  • </body>
  • </html>

35

36 of 45

  • JavaScript Operators
  • The + operator concatenates (adds) strings.
  • What a verynice day

​

36

37 of 45

37

38 of 45

List tags

  • <ul> unordered list
    • <li> list item
    • <ul type = disc / circle / square>

​

  • <ol> ordered list
    • <li> list item
    • <ol type = β€œa” / β€œI” / β€œA” / β€œI”>
    • <ol start =15>
  • <dl> definition list
    • <dt> definition term
    • <dd> definition data

38

39 of 45

Image tag attributes

  • Align
    • Absbottom
    • Absmiddle
    • Baseline
    • Bottom
    • Center
    • Left
    • Middle
    • Right
    • Top
    • texttop

​

39

40 of 45

Image tag attributes

  • Alt
  • Border
  • Height
  • Hspace
  • Ismap
  • Longdesc
  • Lowsrc
  • Src
  • Vspace
  • width

40

41 of 45

Anchor tag

  • <a>…</a>
    • <a href= filename>text </a>

​

  • <body link = color

alink = color active link

vlink = color visited link

​

​

​

41

42 of 45

Table tag attributes

  • Align
  • Background
  • Bgcolor
  • Border
  • Cellpadding
  • Cellspacing
  • Frame
  • Height
  • Hspace
  • Vspace
  • width

42

43 of 45

Table sub tags

  • <th> - table heading
  • <tr> - table row
  • <td> - table data
    • Colspan
    • Rowspan

​

​

43

44 of 45

Frameset

  • Partition the screen into regions
  • Each region is with separate file
  • <html>
    • <frameset col = β€œ*,*”>
    • <frame src = left.html>
    • <frame src = right.html>
    • </frameset>
    • </html>

44

45 of 45

Form tag

  • <form>
    • <input type = text / Radio / checkbox / button / textarea / submit / reset
    • <select name=β€œtext”>
      • <option value=β€œ value

45