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? LAYOUT
PRESENTATION LAYOUT
HOW PAGES USE STRUCTURE HEADLINE
HOW PAGES USE STRUCTURE TEXT
HOW PAGES USE STRUCTURE IMAGE
HOW PAGES USE STRUCTURE SUBHEADING
HOW PAGES USE STRUCTURE Digital versions often have similar structure
STRUCTURE IN WORD DOCS Headings and subheadings reflect hierarchy of information
STRUCTURE IN WORD DOCS Main heading and important information appear first
STRUCTURE IN WORD DOCS The information is expanded upon and may use subheadings
HTML Structure <html> <body> <h1>This is the Main Heading</h1> <p>This text might be an introduction to the rest of the page.</p> <h2>This is a Sub-Heading</h2> <p>Many long articles have sub-headings to help you follow the structure.</p> <h2>Another Sub-Heading</h2> <p>Here you can see another.</p> </body> </html>
Elements CHARACTER CHARACTER FORWARD SLASH LEFT-ANGLE BRACKET RIGHT-ANGLE BRACKET OPENING TAG CLOSING TAG
Attributes ATTRIBUTE NAME <p class="important">Paragraph in English</p> ATTRIBUTE VALUE
Body, Head, Title <html> <head> DOES NOT DISPLAY IN <title>This is the Title</title> BROWSER VIEWPORT </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>
TAGS DESCRIBE CONTENT Creating a page involves adding tags to content
TAGS DESCRIBE CONTENT These tags are known as "markup"
HEADINGS 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>
RESULT
PARAGRAPHS HTML <p>A paragraph consists of one or more sentences that form a self-contained unit of 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>
RESULT
LINE BREAKS HTML <p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust.</p>
RESULT
HORIZONTAL RULES HTML <p>Venus is the only plant that rotates clockwise</p> <hr /> <p>Jupiter is bigger than all the other planets combined.</p>
RESULT
STRONG & EMPHASIS HTML <p><strong>Beware</strong> pickpockets operate 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>
RESULT
QUOTATIONS 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>
RESULT
AUTHOR DETAILS HTML <address> <p><a href="homer@example.org"> homer@example.org</a></p> <p>742 Evergreen Terrace, Springfield</p> </address>
RESULT
HTML: Lists & Links
ORDERED UNORDERED DEFINITION 1. Chop potatoes into quarters • 1kg King Edward potatoes Sashimi 2. Simmer in salted water • 100ml milk Sliced raw fish 3. Heat milk and butter • 50g salted butter Scale 4. Drain potatoes and mash • Freshly grated nutmeg A device used to 5. Mix in the milk mixture • Salt and pepper to taste accurately measure weight
<OL> Ordered List <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>
<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>
<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 of ingredients.</dd> <dd>A technique by which the scales are removed from the skin of fish. </dd> </dl>
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>
HTML elements are used to describe the structure of the page (e.g. headings, subheadings, paragraphs).
They also provide semantic information (e.g. where emphasis is placed, when text is a quotation).
VISUAL EDITORS & THEIR CODE VIEWS
VISUAL EDITORS & THEIR CODE VIEWS
Tools for Writing HTML CodePen and Atom
CodePen is a playground in your browser for testing out and sharing HTML, CSS and JavaScript.
CodePen doesn’t require installing any software - everything renders right in your browser.
CodePen automatically adds the HTML, Head and Body tag to your HTML.
Atom (atom.io) is a text editor that’s used to edit markup and programming languages.
You’ll use a code editor to edit your website files on your computer.
Technically, you could use any text editor program to edit your website. However, a dedicated code editor makes things easier.
Set up Atom and CodePen
Break
HTML on the Whiteboard https://rwdkent.com/class/slides/2/HTMLParagraphandElementsExercise.pdf
Create a new file on your computer using Atom. Call it index.html. Replicate the whiteboard inside the file.
Spot the Error (if time) Use CodePen: codepen.io/challahan/pen/ bgrEyZ
HTML Basics (Use CodePen) http://rwdkent.com/class/assignments/html/
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
Recommend
More recommend
