Web Development & Design Foundations with HTML5 8th Edition

Slides:



Advertisements
Similar presentations
Web Development & Design Foundations with HTML5
Advertisements

HTML popo.
Web Development & Design Foundations with XHTML
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 2 HTML Basics Key Concepts
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
XHTML Basics Web pages used to be written exclusively in html
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 2: More HTML.
Session: 3. © Aptech Ltd. 2Formatting Text using Tags / Session 3  Explain the Heading tag  Explain the different tags related to formatting  Explain.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and.
1.  Describe the anatomy of a web page  Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2- part 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 5 pp HTML Elements & Attributes Format Content Or Examples This Text Is A Hyperlink.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
Q.Nand1 HTML Creating an HTML Document Lesson 2. Q.Nand2 Overview Creating an HTML Document: –HTML syntax –Creating Basic Tags –Displaying Your HTML Files.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Tutorial 1 – Creating Web Pages With HTML
INTRO TO WEB DEVELOPMENT html
Web Development & Design Foundations with HTML5 7th Edition
CGS 3066: Lecture 2 Web Development and HTML5
Web Development Part 1.
Web Development & Design Foundations with HTML5 8th Edition
Organizing Content with Lists and Tables
Chapter 3 Using HTML to Structure a Web Page
Elements of HTML Web Design – Sec 3-2
Web Development & Design Foundations with HTML5 8th Edition
HTML: HyperText Markup Language
Elements of HTML Web Design – Sec 3-2
Web Development & Design Foundations with HTML5 7th Edition
HTML5 – Heading, Paragraph
Web Development & Design Foundations with HTML5 8th Edition
HTML Formatting.
CGS 3066: Web Programming and Design Spring 2016
HTML Lists CS 1150 Fall 2016.
Elements of HTML Web Design – Sec 3-2
Chapter 4 - Introduction to XHTML: Part 1
Web Development & Design Foundations with HTML5 7th Edition
HTML (HyperText Markup Language)
Web Development & Design Foundations with HTML5
HTML Intro.
Marking Up with XHTML Tags describe how a web page should look
CGS 3066: Lecture 2 Web Development and HTML5
Lists, nesting, span/div
Web Development & Design Foundations with H T M L 5
Web Development & Design Foundations with HTML5
HTML Lists CS 1150 Spring 2017.
Tutorial Working with Block-Level Elements
Web Development & Design Foundations with HTML5
School of Business Administration Establishing a Web Presence
Basics of Web Design Chapter 2 HTML Basics Key Concepts
COMS 161 Introduction to Computing
Lesson 2: HTML5 Coding.
Digging in a little deeper
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Marking Up with XHTML Tags describe how a web page should look
Web Application Development CS-EC 486T
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

Web Development & Design Foundations with HTML5 8th Edition Chapter 2 Key Concepts Copyright © Terry Felke-Morris

Phrase Elements Indicate the context and meaning of the text <b> Example Usage <b> bold text Text that has no extra importance but is styled in bold font by usage and convention <em> emphasized text Causes text to be emphasized in relation to other text; usually displayed in italics <i> italicized text Text that has no extra importance but is styled in italics by usage and convention <mark> mark text Text that is highlighted in order to be easily referenced (HTML5 only) <small> small text Legal disclaimers and notices (“fine print”) displayed in small font-size <strong> strong text Strong importance; causes text to stand out from surrounding text; usually displayed in bold <sub> sub text Displays a subscript as small text below the baseline <sup> sup text Displays a superscript as small text above the baseline

Proper Nesting CODE: <p><i>Call for a free quote for your web development needs: <strong>888.555.5555 </strong></i></p> BROWSER DISPLAY: Call for a free quote for your web development needs: 888.555.5555

HTML Lists Unordered List Ordered List Description List formerly called a definition list

Unordered List Displays a bullet, or list marker, before each entry in the list. <ul> Contains the unordered list <li> Contains an item in the list

Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul>

Hands-on practice 2.7 (Page 43) chapter2/ul.html

Ordered List Displays a numbering or lettering system to itemize the information contained in the list <ol> Contains the ordered list type attribute determines numbering scheme of list, default is numerals <li> Contains an item in the list

Ordered List Example <ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>

Hands-on practice 2.6 (Page 41) chapter2/ol.html

Description List <dl> Contains the description list Useful to display a list of terms and descriptions or a list of FAQ and answers <dl> Contains the description list <dt> Contains a term/phrase/sentence Configures empty space above and below the text <dd> Contains a description of the term/phrase/sentence Indents the text Configures empty space above and below the text

Description List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl>

Hands-on practice 2.8 (Page 44) chapter2/description.html

Div Element Configures a structural block area or “division” on a web page with empty space above and below. Can contain other block display elements, including other div elements <div>Home Services Contact</div>

HTML5 Structural Elements header Element <header></header> Contains the web page document’s headings nav Element <nav></nav> Contains web page document’s main navigation main Element <main></main> Contains the web page document’s main content footer Element <footer></footer> Contains the web page document’s footer

HTML5 Structural Elements <body> <header> document headings go here </header> <nav> main navigation goes here </nav> <main> main content goes here </main> <footer> document footer information goes here </footer> </body>

Hands-on practice 2.10 (page 49) chapter2/structure.html