Presentation is loading. Please wait.

Presentation is loading. Please wait.

Getting Started with HTML

Published byEunice Bradley Modified over 6 years ago

Similar presentations

Presentation on theme: "Getting Started with HTML"— Presentation transcript:

1 Getting Started with HTML

2 Objectives Define a project plan Create wireframes and a storyboard
Create an HTML document Set up the document head and body Add text to a web page HTML 5 and CSS 3 - Illustrated Complete

3 Objectives (continued)
Add a comment to a web document Preview your web page on a desktop computer Configure web server software Preview your web page on mobile devices HTML 5 and CSS 3 - Illustrated Complete

4 Define a Project Plan Project plan: document that identifies aspects of the project Also known as a design document Ask questions to find out customer’s expectations and goals, including Goals and objectives of the website Target audience Type of website Budget for website Timeline for website HTML 5 and CSS 3 - Illustrated Complete

5 Define a Project Plan (continued)
Sample project plan HTML 5 and CSS 3 - Illustrated Complete

6 Create Wireframes and a Storyboard
Wireframe: sketch that outlines web page components and their place in the layout Storyboard: shows links between web pages To create a wireframe and storyboard Identify components (use project plan) Sketch possible layouts Map relationships among pages HTML 5 and CSS 3 - Illustrated Complete

7 Create Wireframes and a Storyboard (continued)
Sketch for a main web page HTML 5 and CSS 3 - Illustrated Complete

8 Create Wireframes and a Storyboard (continued)
Storyboard showing links for website HTML 5 and CSS 3 - Illustrated Complete

9 Create an HTML Document
HTML (Hypertext Markup Language): standardized format for web pages HTML document consists of text Text to be displayed on the web page Tags specifying how the browser should render each item Most tags occur in pairs, but one-sided tags are used by themselves HTML 5 and CSS 3 - Illustrated Complete

10 Create an HTML Document (continued)
Start document with <!DOCTYPE html> declaration Add <html> and </html> tags to define beginning and end of web page Create document by hand-coding in a text editor or by using suitable program HTML 5 and CSS 3 - Illustrated Complete

11 Create an HTML Document (continued)
Basic structure of a web page in a text editor HTML 5 and CSS 3 - Illustrated Complete

12 Set Up the Document Head and Body
HTML document divided into head and body sections Head section: contains elements that are not part of the main web page Body section: contains 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

13 Set Up the Document Head and Body (continued)
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

14 Set Up the Document Head and Body (continued)
To add body portion, add <body> and </body> tags in new lines within the html tags Completed web page structure HTML 5 and CSS 3 - Illustrated Complete

15 Add Text to a Web Page Type the text for the web page
Add HTML tags to specify the element type for each text item, for example <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

16 Add Text to a Web Page (continued)
Title, h1, and p elements entered HTML 5 and CSS 3 - Illustrated Complete

17 Add a Comment to a Web Page
HTML comments add information not shown in the web browser Use to explain what code does or to point out beginning and end of parts of the code Comments Defined by <!-- … --> Can be single line Can be multi-line HTML 5 and CSS 3 - Illustrated Complete

18 Add a Comment to a Web Page (continued)
Comment text added to an HTML document HTML 5 and CSS 3 - Illustrated Complete

19 Preview Your Web Page on a Desktop Computer
To preview a web page open it in one or more user agents Allows page writer to research problems and correct them before publishing the page 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

20 Preview Your Web Page on a Desktop Computer (continued)
Preview of web page in Google Chrome HTML 5 and CSS 3 - Illustrated Complete

21 Configure Web Server Software
Web server: computer running web server software and connected to the Internet Use a web server to open a file on desktop computer on another device, like a mobile phone Aptana Studio 3, free code editor with built-in web server HTML 5 and CSS 3 - Illustrated Complete

22 Configure Web Server Software (continued)
Accessing Aptana web server HTML 5 and CSS 3 - Illustrated Complete

23 Preview Your Web Page on Mobile Devices
Important to test web page on variety of devices, including desktops, tablets, and mobile phones Web pages are rendered differently on different devices Testing helps you see what changes, if any, need to be made Must be connected to a web server to test on a mobile phone HTML 5 and CSS 3 - Illustrated Complete

24 Preview Your Web Page on Mobile Devices
Web page phone and tablet HTML 5 and CSS 3 - Illustrated Complete

25 Summary Prior planning is a crucial component in designing a good website When planning a website, the designer must consider the goals and objectives of the site, the target audience, the type of site, the budget, and the timeline Use a wireframe to outline the components of a website HTML 5 and CSS 3 - Illustrated Complete

26 Summary (continued) Use a storyboard to show links between the pages
HTML is a coding language An HTML document is a text document that 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

27 Summary (continued) An HTML document includes HTML elements include
html opening and closing tags head opening and closing tags body opening and closing tags Other tags nested within HTML elements include title tags for titles h tags for headings (h1 – h6) p tags for paragraphs HTML 5 and CSS 3 - Illustrated Complete

28 Summary (continued) Comments provide additional information; not viewed in the browser Preview web page on different devices using different browsers; look for unexpected results Use a web server to view web page on mobile phones HTML 5 and CSS 3 - Illustrated Complete

Download ppt "Getting Started with HTML"

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

HTML Basics Customizing your site using the basics of HTML.
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
XHTML Basics.

XHTML Basics.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.

1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML

HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Tutorial 1: Getting Started with HTML5

Tutorial 1: Getting Started with HTML5
Basics of HTML.

Basics of HTML.
HTML Structure & syntax

HTML Structure & syntax
The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.

The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.
All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.

All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.

HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.

Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.

XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
Creating Webpage Using HTML

Creating Webpage Using HTML
Lesson 2: Basic HTML Code Basic HTML Code. HTML is an acronym for Hypertext Markup Language. Internet browsers translate the HTML code into texts and.

Lesson 2: Basic HTML Code Basic HTML Code. HTML is an acronym for Hypertext Markup Language. Internet browsers translate the HTML code into texts and.

Similar presentations

Ads by Google