SLIDE 1
Class 2
@rwdkent
Web Inspector Tool
Demo in Your Preferred Browser
Class 2 @rwdkent Web Inspector Tool Demo in Your Preferred Browser - - PowerPoint PPT Presentation
Class 2 @rwdkent Web Inspector Tool Demo in Your Preferred Browser - - PowerPoint PPT Presentation
Class 2 @rwdkent Web Inspector Tool Demo in Your Preferred Browser RWD Case Studies 5-8 minutes each HTML Part 1 What is HTML used for? Text Video Lists Audio STRUCTURE Links Forms Images Tables PRESENTATION What is CSS used for?
SLIDE 2
SLIDE 3
RWD Case Studies
5-8 minutes each
SLIDE 4
HTML Part 1
SLIDE 5
What is HTML used for?
SLIDE 6
STRUCTURE Text Video Tables Links Audio Images Forms Lists
SLIDE 7
LAYOUT PRESENTATION What is CSS used for?
SLIDE 8
LAYOUT PRESENTATION
SLIDE 9
HOW PAGES USE STRUCTURE
HEADLINE
SLIDE 10
HOW PAGES USE STRUCTURE
TEXT
SLIDE 11
HOW PAGES USE STRUCTURE
IMAGE
SLIDE 12
HOW PAGES USE STRUCTURE
SUBHEADING
SLIDE 13
HOW PAGES USE STRUCTURE
Digital versions
- ften have
similar structure
SLIDE 14
STRUCTURE IN WORD DOCS
Headings and subheadings reflect hierarchy
- f information
SLIDE 15
STRUCTURE IN WORD DOCS
Main heading and important information appear first
SLIDE 16
STRUCTURE IN WORD DOCS
The information is expanded upon and may use subheadings
SLIDE 17
<html> </html> <body> </body> <h1>This is the Main Heading</h1> <h2>This is a Sub-Heading</h2> <h2>Another Sub-Heading</h2> <p>This text might be an introduction to the rest of the page.</p> <p>Here you can see another.</p> <p>Many long articles have sub-headings to help you follow the structure.</p>
HTML Structure
SLIDE 18
OPENING TAG CLOSING TAG
CHARACTER CHARACTER LEFT-ANGLE BRACKET RIGHT-ANGLE BRACKET FORWARD SLASH
Elements
SLIDE 19
<p class="important">Paragraph in English</p>
ATTRIBUTE NAME ATTRIBUTE VALUE
Attributes
SLIDE 20
Body, Head, Title
<html> <head> <title>This is the Title</title> </head> <body> <h1>This is the Body of the Page</h1> <p>Anything within the body of a web page is displayed in the main browser window.</p> </body> </html>
DOES NOT DISPLAY IN BROWSER VIEWPORT
SLIDE 21
SLIDE 22
TAGS DESCRIBE CONTENT
Creating a page involves adding tags to content
SLIDE 23
TAGS DESCRIBE CONTENT
These tags are known as "markup"
SLIDE 24
HTML
<h1>This is a Main Heading</h1> <h2>This is a level 2 heading</h2> <h3>This is a level 3 heading</h3> <h4>This is a level 4 heading</h4> <h5>This is a level 5 heading</h5> <h6>This is a level 6 heading</h6>
HEADINGS
SLIDE 25
RESULT
SLIDE 26
HTML
<p>A paragraph consists of one or more sentences that form a self-contained unit
- f discourse. The start of a paragraph is
indicated by a new line.</p> <p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading will be one or more paragraphs.</p>
PARAGRAPHS
SLIDE 27
RESULT
SLIDE 28
HTML
<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
LINE BREAKS
SLIDE 29
RESULT
SLIDE 30
HTML
<p>Venus is the only plant that rotates clockwise</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>
HORIZONTAL RULES
SLIDE 31
RESULT
SLIDE 32
HTML
<p><strong>Beware</strong> pickpockets
- perate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p> <p>I think <em>Ivy</em> was the first.</p> <p>I think Ivy was the <em>first</em>.</p>
STRONG & EMPHASIS
SLIDE 33
RESULT
SLIDE 34
HTML
<blockquote> Did you ever stop to think, and forget to start again? </blockquote> <p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q></p>
QUOTATIONS
SLIDE 35
RESULT
SLIDE 36
HTML
<address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p> </address>
AUTHOR DETAILS
SLIDE 37
RESULT
SLIDE 38
HTML: Lists & Links
SLIDE 39
- 1. Chop potatoes into quarters
- 2. Simmer in salted water
- 3. Heat milk and butter
- 4. Drain potatoes and mash
- 5. Mix in the milk mixture
UNORDERED DEFINITION ORDERED
- 1kg King Edward potatoes
- 100ml milk
- 50g salted butter
- Freshly grated nutmeg
- Salt and pepper to taste
Sashimi Sliced raw fish Scale A device used to accurately measure weight
SLIDE 40
<ol> <li>Chop potatoes into quarters</li> <li>Simmer in salted water for 15-20 minutes until tender</li> <li>Heat milk, butter and nutmeg</li> <li>Drain potatoes and mash</li> <li>Mix in the milk texture</li> </ol>
<OL> Ordered List
SLIDE 41
<UL> Unordered List
<ul> <li>1kg King Edward potatoes</li> <li>100ml milk</li> <li>50g salted butter</li> <li>Freshly grated nutmeg</li> <li>Salt and pepper to taste</li> </ul>
SLIDE 42
SLIDE 43
<DL> Definition List
<dl> <dt>Sashimi</dt> <dd>Sliced raw fish served with condiments.</dd> <dt>Scale</dt> <dd>Device used to measure the weight
- f ingredients.</dd>
<dd>A technique by which the scales are removed from the skin of fish. </dd> </dl>
SLIDE 44
SLIDE 45
Lists can be nested.
<ul> <li>Mousses</li> <li>Pastries</li> <ul> <li>Croissant</li> <li>Milles-feille</li> <li>Palmier</li> <li>Profiteroles</li> </ul> <li>Tarts</li> </ul>
SLIDE 46
HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).
SLIDE 47
They also provide semantic information (e.g. where emphasis is placed, when text is a quotation).
SLIDE 48
VISUAL EDITORS & THEIR CODE VIEWS
SLIDE 49
VISUAL EDITORS & THEIR CODE VIEWS
SLIDE 50
Tools for Writing HTML
CodePen and Atom
SLIDE 51
CodePen is a playground in your browser for testing out and sharing HTML, CSS and JavaScript.
SLIDE 52
CodePen doesn’t require installing any software - everything renders right in your browser.
SLIDE 53
CodePen automatically adds the HTML, Head and Body tag to your HTML.
SLIDE 54
Atom (atom.io) is a text editor that’s used to edit markup and programming languages.
SLIDE 55
You’ll use a code editor to edit your website files on your computer.
SLIDE 56
Technically, you could use any text editor program to edit your website. However, a dedicated code editor makes things easier.
SLIDE 57
Set up Atom and CodePen
SLIDE 58
Break
SLIDE 59
HTML on the Whiteboard
https://rwdkent.com/class/slides/2/HTMLParagraphandElementsExercise.pdf
SLIDE 60
Create a new file on your computer using Atom. Call it index.html. Replicate the whiteboard inside the file.
SLIDE 61
Spot the Error (if time)
Use CodePen: codepen.io/challahan/pen/bgrEyZ
SLIDE 62
HTML Basics (Use CodePen)
http://rwdkent.com/class/assignments/html/
SLIDE 63
For Next Time
READ: HTML&CSS - Ch. 3 Lists, Ch.4 Links, Ch. 5 Images, Ch.6 Tables, Ch.7 Forms, Ch.8 Extra Markup (Possible Quizes Start) DUE: HTML Basics 1 Challenge (if not finished in class) DUE: Next Set of Explore RWD