Chapter 2 HTML Basics Key Concepts

Slides:



Advertisements
Similar presentations
Web Development & Design Foundations with HTML5
Advertisements

Web Development & Design Foundations with XHTML
HTML. The World Wide Web Protocols Addresses HTML.
Elder L. Lionel Kendrick Of the First Quorum of the Seventy It has been from the beginning and it will be till the end that the natural man will have a.
HTML: HyperText Markup Language Hello World Welcome to the world!
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
XHTML II DIGITAL MEDIA: COMMUNICATION AND DESIGN F2007.
CIS101 Introduction to Computing HTML Project Two.
Web Page Development Identify elements of a Web Page Start Notepad
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Purpose Tags are the key to marking up content on your HTML page. It’s the tags that mark up sections of the page and are defined (aesthetically) on the.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
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.
1 Introduction to HTML Joshua S. Simon Collective Technologies.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
1 Introduction to HTML: Part 1 Outline Introduction Elements and Attributes Editing HTML Common Elements Headers Images Unordered Lists Nested and Ordered.
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line breaks and Paragraph divisions Basic HTML elements.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
1 Web Developer Foundations: Using XHTML Chapter 3 XHTML Hyperlinks and Tables.
1 Web Developer & Design Foundations with XHTML Chapter 3 Key Concepts.
HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
1 Introduction to XHTML: Part 1 Outline Introduction Elements and Attributes Editing XHTML Common Elements W3C XHTML Validation Service Headers Linking.
Suzanne Sultan1 Line Breaks, Paragraphs, lists Lab3.
HTML – Organizing Page Content. HTML Images img tag Required attribute: src
Chapter 2 Designing Web Pages With HTML JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin,
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Tutorial 3 Adding and Formatting Text with CSS Styles.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2- part 2 Key Concepts 1 Copyright © Terry Felke-Morris.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
INT222 – Internet Fundamentals
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
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.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5 7th Edition
Coding, Testing and Valdating a Web Page
Web Development & Design Foundations with H T M L 5
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Digging in a little deeper
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Presentation transcript:

Chapter 2 HTML Basics Key Concepts Basics of Web Design Chapter 2 HTML Basics Key Concepts

Learning Outcomes Describe the anatomy of a web page Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes Configure the text on a web page with inline elements Configure text with phrase elements Configure special entity characters, line breaks, and horizontal rules Configure a web page using new HTML5 header, nav, and footer elements Use the anchor element to link from page to page Configure absolute, relative, and e-mail hyperlinks Test a web page for valid HTML syntax

The Heading Element <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>

The Paragraph Element <p> tag <p> …paragraph goes here… </p> Groups sentences and sections of text together. Configures empty space above and below the paragraph

The Line Break Element <br> tag Stand-alone tag Called a void element in HTML5 …text goes here <br> This starts on a new line…. Causes the next element or text to display on a new line

The Horizontal Rule Element <hr> tag void element <hr > Configures a horizontal line on the page In HTML5, it should be used to indicate a thematic break at the paragraph level

The Blockquote Element <blockquote> Indents a block of text for special emphasis <blockquote> …text goes here… </blockquote>

Phrase Elements <strong></strong> <em></em> Indicate the context and meaning of the text Display inline with the text Common Phrase Elements <b></b> Text is displayed in bold font <strong></strong> Text has strong importance and is displayed in bold <i></i> Text is displayed in italic font <em></em> Text has emphasis and is displayed in italic font

Proper Nesting CODE: BROWSER DISPLAY: <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 List Basics Unordered List Description List (XHTML Definition List) Ordered List

Unordered List Displays information with bullet points Unordered List Element <ul> Contains the unordered list List Item Element <li> Contains an item in the list

Unordered List Example <h1>My Favorite Colors</h1> <ul> <li>Blue</li> <li>Teal</li> <li>Read</li> </ul>

Ordered List Conveys information in an ordered fashion Ordered List Element <ol> Contains the ordered list type attribute determines numbering scheme of list default is numerals List Item Element <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>

Description List Formerly called a definition list in XHTML and HTML 4.0 Uses: Display a list of terms and descriptions Display a list of FAQ and answers The Description List element <dl> tag Contains the definition list The dt Element <dt> tag Contains a term or name The dd Element <dd> tag Contains a definition or description Indents the text

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

Special Entity Characters Display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > & &  

The div element <div> Purpose: Configure a specially formatted division or area of a web page Block display with empty space above and below the div Can contain other block display and inline display elements

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 Footer Element <footer></footer> Contains the web page document’s footer

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

The Anchor Element <a> Inline display element Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page. <a href="contact.html">Contact Us</a> href Attribute Indicates the file name or URL Web page document, photo, pdf, etc.

More on Hyperlinks Absolute link Relative link Link to other websites <a href="http://yahoo.com">Yahoo</a> Relative link Link to pages on your own site Relative to the current page <a href="index.html">Home</a>

Opening a Link in a New Browser Window The target attribute on the anchor element opens a link in a new browser window or new browser tab. <a href="http://yahoo.com" target="_blank">Yahoo!</a>

Email Hyperlinks Automatically launch the default mail program configured for the browser If no browser default is configured, a dialog box is displayed <a href="mailto:me@hotmail.com">me@hotmail.com</a>

Writing Valid HTML Check your code for syntax errors Benefit: Valid code  more consistent browser display W3C HTML Validation Tool http://validator.w3.org Additional HTML5 Validation Tool http://html5.validator.nu

Summary This chapter provided an introduction to HTML. HTML elements used for inline and block display formatting were introduced. You will use these skills over and over again as you create web pages.