Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does - - PowerPoint PPT Presentation

▶
web development and html
SMART_READER_LITE
LIVE PREVIEW

Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does - - PowerPoint PPT Presentation

Feb 26, 2023 27 likes •360 views

Web Development and HTML Shan-Hung Wu CS, NTHU Outline How does Internet Work? Web Development HTML Block vs. Inline elements Lists Links and Attributes Tables Forms 2 Outline How does Internet Work? Web

slide-1
SLIDE 1

Web Development and HTML

Shan-Hung Wu CS, NTHU

slide-2
SLIDE 2

Outline

  • How does Internet Work?
  • Web Development
  • HTML

– Block vs. Inline elements – Lists – Links and Attributes – Tables – Forms

2

slide-3
SLIDE 3

Outline

  • How does Internet Work?
  • Web Development
  • HTML

– Block vs. Inline elements – Lists – Links and Attributes – Tables – Forms

3

slide-4
SLIDE 4

What Happened?

https://www.wikipedia.org/wiki/Node.js

4

slide-5
SLIDE 5

From URL to Web Page

https://www.wikipedia.org/wiki/Node.js

5

slide-6
SLIDE 6

HTTP

  • A protocol is language spoken by machines

– Defines structure of messages to be exchanged

  • HyperText Transfer Protocol (HTTP) defines:

– Messages: HTTP request and HTTP response – Requests: accessing resources (web pages) via GET, POST, PUT, and DELETE methods – Responses: 200 OK, 301 Moved, 404 Not Found, 500 Server Error, etc.

6

slide-7
SLIDE 7

HTTP Messages

  • Each HTTP message have

– Initial line, header lines, and optionally body

  • A resource can have different presentations

– HTML, XML, JSON, etc.

7

Request:

GET /wiki/Node.js HTTP/1.1 Host: www.wikipedia.org Accept: text/html, application/json

Response:

HTTP/1.1 200 OK Content-Type: text/html Content-Length: 3324 <!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>

slide-8
SLIDE 8

Chrome Inspector

8

slide-9
SLIDE 9

URI vs. URL vs. URN

  • An Uniform Resource Identifier (URI) identifies a

resource on the Internet

  • An Uniform Resource Locator (URL) is a specialized URI

that identifies a resource by reachable location

– E.g., “http://…”, “https://…”, “ftp://…” – Case sensitive – Must be URL encoded

  • “http://host/hello world!”  “http://host/hello%20world%21”
  • An Uniform Resource Name (URN) is a specialized URI

that identifies a resource by name

– E.g., “urn:isbn:0451450523”

9

slide-10
SLIDE 10

Outline

  • How does Internet Work?
  • Web Development
  • HTML

– Block vs. Inline elements – Lists – Links and Attributes – Tables – Forms

10

slide-11
SLIDE 11

Web Development

  • To build a website that serves web pages
  • Code to be run at client side (front end):

– Displays pages – Interacts with user – Sends additional requests

  • Code to be run at server side (back end):

– Handles requests (from multiple clients) – Stores data – Sends “personalized” responses

  • We focus on client-side development for now

11

slide-12
SLIDE 12

What’s Inside a Web Page?

  • Hyper-Text Markup Language (HTML)

– Content and structure

  • Cascade Style Sheet (CSS):

– Styles (e.g., color, font, width, height, etc.)

  • Javascript:

– Interactions – A general-purpose programming language

12

slide-13
SLIDE 13

Javascript Lies beyond Browsers

13

slide-14
SLIDE 14

Hello HTML

14

slide-15
SLIDE 15

Grammar

<tag> content </tag>

15

slide-16
SLIDE 16

Core HTML Elements

<!DOCTYPE html> <html> <head> <!-- Metadata goes here --> <title>...</title> </head> <body> <!-- Content goes here --> </body> </html>

16

slide-17
SLIDE 17

Block vs. Inline Elements

  • A block element:

– Creates new lines above and under – Can contain text and other block/inline elements – Unless specified, has height fitting its content – Unless specified, has width fitting its container

  • An inline element:

– Creates no new line – Can contain only text and other inline elements – Unless specified, has width and height fitting its content

17

slide-18
SLIDE 18

Viewport & Responsiveness

<meta name="viewport" content="width=device-width, initial-scale=1.0">

18

slide-19
SLIDE 19

Outline

  • How does Internet Work?
  • Web Development
  • HTML

– Block vs. Inline elements – Lists – Links and Attributes – Tables – Forms

19

slide-20
SLIDE 20

Block vs. Inline Elements I

  • Block elements (by default):

– <h1>-<h6>, <p>, <div>, <ol>, <ul>, <li>, <table>, <form>, <hr>

  • Inline elements (by default):

– <a>, <img>, <em>, <span>, <label>, <input>, <button>, <br>

  • Empty elements (no content):

– <hr>, <br>, <img>

20

slide-21
SLIDE 21

Block vs. Inline Elements II

  • A block element:

– Creates new lines above and under – Can contain text and other block/inline elements – Unless specified, has height fitting its content – Unless specified, has width fitting its container

  • An inline element:

– Creates no new line – Can contain only text and other inline elements – Unless specified, has width and height fitting its content

21

slide-22
SLIDE 22

MDN Reference

22

slide-23
SLIDE 23

Lists

<ul> <li>List Item 1</li> <li>List Item 2</li> </ul> <ol> <li>List Item 1</li> <li>List Item 2</li> </ol>

23

slide-24
SLIDE 24

HyperLinks and Attributes

<a href="www.example.com">Text</a> <img src="corgi.png" alt="Corgi">

24

slide-25
SLIDE 25

Tables

<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell (1,1)</td> <td>Call (1,2)</td> </tr> <tr> <td>Cell (2,1)</td> <td>Cell (2,2)</td> </tr> </table>

25

slide-26
SLIDE 26

Forms I

26

slide-27
SLIDE 27

Forms II

<form action="/sign-in-url" method="post"> <label for="acc">Accont:</label> <input id="acc" type="text” name="account"> <label for="pw">Password:</label> <input id="pw" type="password” name="passwd"> <button>Login</button> </form>

27

slide-28
SLIDE 28

Query Strings

http://...?name1=val1&name2=val2

  • GET resources/pages conditionally

– Based on device type, locale, etc.

  • Passing arguments in POST

– E.g., account and password in user login

28

slide-29
SLIDE 29

Form Validation

<form action="..." method="..."> ... <input ... required> ... <input ... required> ... </form>

29

slide-30
SLIDE 30

Entities

  • How to type ‘<’ in content?

<p>a < b</p>

  • <  &lt;
  • >  &gt;
  • &  &amp;
  • "  &quot;
  • Space  &nbsp;

30

slide-31
SLIDE 31

Assigned Reading

  • HTML5 tutorial

31

slide-32
SLIDE 32

Reference

  • Mozilla Developer Network (MDN)

32

slide-33
SLIDE 33

Exercise

33