CE419 Session 3: HTML (contd.), CSS Web Programming 1 Forms 2 - - PowerPoint PPT Presentation

▶
ce419
SMART_READER_LITE
LIVE PREVIEW

CE419 Session 3: HTML (contd.), CSS Web Programming 1 Forms 2 - - PowerPoint PPT Presentation

Oct 16, 2022 368 likes •676 views

CE419 Session 3: HTML (contd.), CSS Web Programming 1 Forms 2 Forms Provides a way to interact with users. Not useful without a server-side counterpart. 3 From Elements <form action=""

slide-1
SLIDE 1

CE419 Web Programming

Session 3: HTML (contd.), CSS

1

slide-2
SLIDE 2

Forms

2

slide-3
SLIDE 3

Forms

  • Provides a way to interact with users.
  • Not useful without a server-side counterpart.

3

slide-4
SLIDE 4

From Elements

<form action="…" method="get"> <input type="text" /> <input type="password" /> <input type="checkbox" /> <textarea></textarea> <button>Submit</button> </form>

form.html

4

slide-5
SLIDE 5

Let's see forms in action.

Showtime!

5

slide-6
SLIDE 6

Meaningless HTML Elements

  • HTML is all about applying meaning to content.
  • Most HTML tags apply meaning, but a few are

meaningless, like <div> & <span>.

  • Used to group things together and hook some

information onto that group.

  • This later will help us to apply styles using CSS.

6

slide-7
SLIDE 7

<div> and <span>

Group things together.

slide-8
SLIDE 8

<div> vs. <span>

  • <span> element is inline, <div> element is block.

I’ve stepped on nails, screws, drawing pins, stubbed my toe, <span>I’ve come off stage with blood just coming out</span>. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.

I’ve stepped on nails, screws, drawing pins, stubbed my toe, I’ve come off stage with blood just coming out. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.

I’ve stepped on nails, screws, drawing pins, stubbed my toe, <div>I’ve come off stage with blood just coming out</div>. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.

I’ve stepped on nails, screws, drawing pins, stubbed my toe, I’ve come off stage with blood just coming out. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.

8

slide-9
SLIDE 9

But you told us HTML is all about meaning and stuff :(

slide-10
SLIDE 10

New in HTML5

  • <header>, <nav>, <article>,

<aside>, <footer>, <section>, …

slide-11
SLIDE 11

Common Attributes in HTML

  • Tags can have attributes:
  • There are element-type-specific attributes:
  • There are core attributes that can be applied to almost

every html element.

<tag attrib1="value" attrib2="value">…</tag> <a href="value">Click here, dude!</a> <div id="header" class="bored">Hi!</div>

11

slide-12
SLIDE 12

Common Attributes in HTML

  • id


a unique identifier for an element in the document.

  • class


classifies this element into one or more subtypes.

  • dir


specifies the reading direction for text as left to right or right to left.

  • lang


specifies the language of this element’s content.

  • style


specifies an inline style for this element.

  • title


provides extra information about the element.

12

slide-13
SLIDE 13

What is CSS?

It's all about presentation.

13

slide-14
SLIDE 14

What is CSS?

  • CSS enables the separation of document content from

document presentation.

  • CSS stands for Cascading Style Sheets.
  • What is a 'style sheet'?
  • What does 'cascading' mean?
  • We'll talk about it more.

14

slide-15
SLIDE 15

Applying CSS to HTML Files

  • inline


using style attribute in HTML tags.

  • internal


using <style> tag in HTML head

<span style="color: red;">This is blue!</span>

<!DOCTYPE html> <html> <head> <style> span { color: red; } </style> </head>

15

slide-16
SLIDE 16

Applying CSS to HTML Files (contd.)

  • external


there is a separate CSS file linked to HTML.

  • Which method do we


prefer?
 (inline/internal/external)

<head> <title>CSS Example</title> <link rel="stylesheet" href="css/style.css">

16

slide-17
SLIDE 17

CSS Syntax

17

slide-18
SLIDE 18

Lengths and Percentages

  • px


pixels

  • em


relative to current font size

  • %


based on the length of same
 property of the parent element

div { width: 100px; height: 150px; }

18

slide-19
SLIDE 19

Colors

  • red


rgb(255,0,0)
 rgb(100%,0%,0%)
 #ff0000
 #f00

  • How to make gray?
  • rgba(255, 0, 0, 0.5)


hsl(0, 100%, 50%)
 hsla(0, 100%, 35%, 0.5)

19

slide-20
SLIDE 20

Fonts

  • CSS gives you power over how

text is displayed.

  • User's browser needs to find

the font that you are using.

  • Web safe fonts.
  • @font-face

20

slide-21
SLIDE 21

Let's see some CSS in action.

Showtime!

21

slide-22
SLIDE 22

CSS Selectors

  • Select elements by:
  • Tag name: body, h1, p, strong, …
  • id: #header, #linktostuff, #container, #video
  • class: .link, .photo, .description
  • There are far more complex selectors!
slide-23
SLIDE 23

'id' & 'class' selectors

<div id="greeting">Hi!</div> <div class="description">That was a greeting</div> #greeting { color: yellow; font-size:50px; } .description { font-family: Tahoma; font-size: 11px; }

slide-24
SLIDE 24

Let's see selectors in action.

Showtime!

24

slide-25
SLIDE 25

CSS Box Model

  • How elements are displayed?
  • display property
  • block, inline, inline-block, none
  • Every tag has a default display.

25

slide-26
SLIDE 26

CSS Box Model

Every element on a page is a rectangular box.

26

slide-27
SLIDE 27

CSS Box Model

  • Every element is a rectangular box
  • There are several properties that determine the size of

that box.

div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }

27

slide-28
SLIDE 28

CSS Box Model

28

slide-29
SLIDE 29

Let's see box model in action.

Showtime!

29

slide-30
SLIDE 30

Any questions?

Thank you.

30