Class 3 @rwdkent Overview Current Events in Web Whiteboard - - PowerPoint PPT Presentation

▶
class 3
SMART_READER_LITE
LIVE PREVIEW

Class 3 @rwdkent Overview Current Events in Web Whiteboard - - PowerPoint PPT Presentation

Oct 04, 2023 202 likes •725 views

Class 3 @rwdkent Overview Current Events in Web Whiteboard Activity 2 Case Study Group 2 Spot the Error HTML Basics 1 Review HTML Basics 2 Hands On HTML Basics Part 2 Current Events in Web Apple Announcements HTML Basics 1 Review

slide-1
SLIDE 1

Class 3

@rwdkent

slide-2
SLIDE 2

Overview

Current Events in Web Case Study Group 2 HTML Basics 1 Review HTML Basics Part 2 Whiteboard Activity 2 Spot the Error HTML Basics 2 Hands On

slide-3
SLIDE 3

Current Events in Web

Apple Announcements

slide-4
SLIDE 4

HTML Basics 1 Review

slide-5
SLIDE 5

<A> Links

<a href="http://www.imdb.com">IMDB</a> THE PAGE THE LINK TAKES YOU TO THE TEXT THE USER CLICKS ON

slide-6
SLIDE 6

Email Addresses

<a href=“mailto:challahan@ideabasekent.com”>Email Chris</a> THE ACTUAL EMAIL ADDRESS + MAILTO THE TEXT THE USER CLICKS ON

slide-7
SLIDE 7

File Paths

slide-8
SLIDE 8

Files and folders (directories) are organized in a tree hierarchy.

slide-9
SLIDE 9
slide-10
SLIDE 10

What is the difference between absolute and relative file paths?

slide-11
SLIDE 11

<a href=“linkhere.html”>Click Me</a>

slide-12
SLIDE 12

<a href=“http://www.kent.edu/about”>Click Me</a>

slide-13
SLIDE 13

How do you link to a file in a folder/directory above the current folder?

slide-14
SLIDE 14

<a href=“../linkhere.html”>Click Me</a>

slide-15
SLIDE 15

HTML: 
 Images, Tables, Forms

slide-16
SLIDE 16

<img src="images/quokka.jpg"
 alt="A family of quokka"/>

Image Markup

slide-17
SLIDE 17

Image Markup

<img src="images/bird.gif" alt=“bird" />
 <p>There are around 10,000 living species

  • f birds that inhabit different ecosystems

from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

slide-18
SLIDE 18

Image Markup

slide-19
SLIDE 19

Image Markup

<p><img src="images/bird.gif" alt="bird"/>There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the

  • Antarctic. Man species undertake long distance

annual migrations, and many more perform shorter irregular journeys.</p>

slide-20
SLIDE 20

Image Markup

slide-21
SLIDE 21

Images should be sized/ cropped according to the size you want them to display at on your page*

* Does not account for high density (retina) displays

slide-22
SLIDE 22

You can’t make an image larger than its original size.

slide-23
SLIDE 23

Formats

JPEG (JPG) GIF PNG SVG

slide-24
SLIDE 24

Formats

WebP

slide-25
SLIDE 25

Images are most often the largest asset of any web page, and therefore affect performance the most.

slide-26
SLIDE 26

Optimizing Images

Use Vectors for all Graphical Elements Resize the Image Dimensions Degrade the Quality (Save for Web) Use Different Responsive Images (Later) Caching/CDN (Later)

slide-27
SLIDE 27

Optimizing Images

http://codepen.io/challahan/professor/xERdXg/

slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31

<figure>
 <img src="images/otters.gif"
 alt="Photograph of two sea otters
 floating in the water" />
 <figcaption>Sea otters hold hands when
 they sleep so that they don’t
 drift away from each other.
 </figcaption>
 </figure>

Figure

slide-32
SLIDE 32

Figure

slide-33
SLIDE 33

Tables

slide-34
SLIDE 34

Tables

<table>
 <tr>
 <td>15</td>
 <td>15</td>
 <td>30</td>
 </tr>
 <tr>
 <td>45</td>
 <td>60</td>
 <td>90</td>
 </tr>
 </table>

slide-35
SLIDE 35

Tables

<table>
 <tr>
 <th></th>
 <th scope="col">Saturday</th>
 <th scope="col">Sunday</th>
 </tr>
 <tr>
 <th scope="row">Tickets sold</th>
 <td>120</td>
 <td>135</td>
 </tr>
 </table>

slide-36
SLIDE 36

Tables

slide-37
SLIDE 37

Tables are used for tabular data

slide-38
SLIDE 38

Tables are not used for page layout.

slide-39
SLIDE 39

Forms

slide-40
SLIDE 40

Forms

<form action="http://example.com/join.php"
 method="get">
 
 This is where the form controls
 will appear.
 
 </form>

slide-41
SLIDE 41

What Goes Inside the Form?

slide-42
SLIDE 42
slide-43
SLIDE 43

Doctype Declaration

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title Goes Here</title> <meta name="description" content="Page Description Goes Here"> </head>

slide-44
SLIDE 44

Comments

<!-- start of introduction -->
 <h1>Current Exhibition</h1>
 <h2>Olafur Eliasson</h2>
 <!-- end of introduction -->

slide-45
SLIDE 45

Iframe

<iframe width="450" height="350"
 src="http://maps.google.co.uk/maps?
 q=moma+new+york&amp;output=embed"
 frameborder="0"
 scrolling="0">
 </iframe>

slide-46
SLIDE 46

Video

<video src="videofile.webm" autoplay poster="posterimage.jpg"> </video> Used if you’re hosting the

  • riginal video file on your own
  • server. Can be placed in video

player or as background video.

slide-47
SLIDE 47

Whiteboard Activity 2

slide-48
SLIDE 48

Spot the Error: HTML 2

http://codepen.io/challahan/pen/WRMMGM

slide-49
SLIDE 49

HTML Basics 2

http://rwdkent.com/class/assignments/html2/

slide-50
SLIDE 50

HTML Basics Hands On

slide-51
SLIDE 51

For Next Time

HTML&CSS - Ch. 10 Introducing CSS, Ch. 11 Color, Ch. 12 Text, Ch. 14 Lists Tables & Forms HTML Basics 2 Due Case Study Group 3