HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

Slides:



Advertisements
Similar presentations
1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)
Advertisements

XHTML Basics.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Tutorial 1 Getting Started with HTML5
Developing a Basic Web Page Posting Files on UMBC
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.
Tutorial 1: Getting Started with HTML5
Creating a Simple Page: HTML Overview
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
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.
Creating Webpage Using HTML
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
1 Web Application Programming Presented by: Mehwish Shafiq.
L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
Lesson 2 – Unit B. Quick review 1. What is the name of the eGCC host that you ftp your files? 2. What type of software do you use to create and edit web.
HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Structure & syntax
HTML Structure & syntax
Getting Started with HTML
Working with Cascading Style Sheets
CSS Cascading Style Sheets
INTRO TO WEB DEVELOPMENT html
HTML5 Basics.
Getting Started with CSS
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
HTML5 and CSS3 Illustrated Unit D: Formatting Text with CSS
Essential Tags Web Design – Sec 3-3
Chapter 2 Developing a Web Page.
Coding, Testing and Valdating a Web Page
INTRODUCTION TO HTML AND CSS
W3C Web standards and Recommendations
XHTML Basics.
Web Development & Design Foundations with HTML5 8th Edition
Essential Tags Web Design – Sec 3-3
Introduction to XHTML.
XHTML Basics.
XHTML Basics.
HTML A brief introduction HTML.
Unit A.
INTRODUCTION TO HTML AND CSS
Structuring Content in a Web Document
HTML Structure.
XHTML Basics.
HTML5 Session II Chapter 2 - How to Code, Test and Validate a Web Page Chapter 3 - How to Use HTML to Structure a Web Page
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
CS3220 Web and Internet Programming HTML and XML Basics
XHTML Basics.
HTML Structure & syntax
Lesson 2: HTML5 Coding.
Presentation transcript:

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

Objectives Assess the history of HTML Compare HTML and XHTML Create an HTML document Set up the document head and body Add Web page text HTML 5 and CSS 3 - Illustrated Complete

Objectives (continued) Preview your Web page Implement one-sided tags Validate your HTML code HTML 5 and CSS 3 - Illustrated Complete

Assessing the History of HTML The World Wide Web Consortium (W3C) is responsible for maintaining HTML standards W3C incorporates new features in HTML while keeping the language consistent HTML 5 and CSS 3 - Illustrated Complete

Assessing the History of HTML HTML = semantic language designing the layout of a page and meaning of the elements Cascading Style Sheets (CSS) = presentational language designing the look of the elements Deprecated features: can still be used but their use is not recommended HTML 5 and CSS 3 - Illustrated Complete

Comparing HTML and XHTML XHTML came about by making HTML comply with the rules of XML XML and XHTML do not tolerate errors while HTML is more flexible XML can be used to set up other documents (not just web pages) With HTML5 the W3C is improving and expanding XHTML & HTML as more parallel HTML 5 and CSS 3 - Illustrated Complete

Comparing HTML and XHTML Page 29: HTML 5 and CSS 3 - Illustrated Complete

Creating an HTML Document HTML document consists of text to be displayed and tags <> Hand code in a text editor (Notepad) Or use a suitable program (Dreamweaver) Most tags occur in pairs, but one-sided tags are used by themselves HTML 5 and CSS 3 - Illustrated Complete

Creating an HTML Document (continued) Start document with <!DOCTYPE html> declaration Add <html> and </html> tags to define beginning and end of Web page HTML 5 and CSS 3 - Illustrated Complete

Creating an HTML Document Basic structure of a Web page HTML 5 and CSS 3 - Illustrated Complete

Setting Up the Document HTML document divided into head and body sections Head: elements that are not part of the main Web page window Body: elements that are visible in the main window of a Web browser Head and body tags are nested within html tags HTML 5 and CSS 3 - Illustrated Complete

Setting Up the Document For clarity of structure, nested elements are: On new lines Indented by two spaces relative to parent element To add head section: Add <head> and </head> tags in new lines within the html tags HTML 5 and CSS 3 - Illustrated Complete

Setting Up the Document To add body portion, add <body> and </body> tags in new lines within the html tags Add <meta charset=“utf-8” /> to specify character encoding HTML attributes specify details about the element properties HTML 5 and CSS 3 - Illustrated Complete

Setting Up the Document Completed Web page structure HTML 5 and CSS 3 - Illustrated Complete

Adding Web Page Text Type the text for the Web page Add HTML tags to specify the element type for each text item <title> and </title>: text that appears in the Web browser’s title bar <h1> and </h1>: highest level heading <p> and </p>: paragraph of text HTML 5 and CSS 3 - Illustrated Complete

Adding Web Page Text HTML comments add information not shown in the Web browser Comments defined by <!-- … --> HTML 5 and CSS 3 - Illustrated Complete

Title, h1, and p elements entered Adding Web Page Text Title, h1, and p elements entered HTML 5 and CSS 3 - Illustrated Complete

Previewing Your Web Page To preview a Web page, open it in one or more user agents Allows page writer to research problems and correct them before publishing Use file manager to open Web page in one or more browsers Note differences in the way the page is displayed in different browsers HTML 5 and CSS 3 - Illustrated Complete

Implementing One-Sided Tags Some HTML elements, such as line breaks, require a single tag One sided tags are of the form <tag /> <br />: line break HTML 5 and CSS 3 - Illustrated Complete

Implementing One-Sided Tags HTML document with line breaks HTML 5 and CSS 3 - Illustrated Complete

Implementing One-Sided Tags Web page displaying line breaks HTML 5 and CSS 3 - Illustrated Complete

Validating Your HTML Code Code validation: automated process for comparing your code against HTML5 coding standards Useful for identifying the source of a specific problem You can use online tools to validate your code (http://validator.w3.org) HTML 5 and CSS 3 - Illustrated Complete

Summary HTML is a coding language which has standards but is constantly under transformation An HTML document is a text document which defines a structure of the text to be displayed The structure of the text to be displayed is defined by the use of tags HTML 5 and CSS 3 - Illustrated Complete

Summary (continued) Tags can include attributes which specify their properties Two-sided tags enclose the text that they relate to One-sided tags are for specific occurrences Problems in a Web page can be identified by rendering it in a Web browser or by validating the code HTML 5 and CSS 3 - Illustrated Complete