Basic XHTML Module 2: XHTML Basics LESSON 1. Module 2: XHTML Basics LESSON 1 Lesson Overview In this lesson, you will learn to:  Write XHTML code using.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
Cascading Style Sheets
ASHIMA KALRA.  WHAT IS HTML WHAT IS HTML  HTML TAGS HTML TAGS  FORMATTING TAGS FORMATTING TAGS.
Creating and Editing a Web Page Using Inline Styles
Introducing HTML Skills: create simple Web pages
Basic HTML Tags.
How Tags are used to form your Web Page
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. How to Create Web Pages Using HTML Introduction.
Web Page Development Identify elements of a Web Page Start Notepad
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Tutorial 1: Getting Started with HTML5
Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
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.
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.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
More Basic XHTML Module 2: XHTML Basics LESSON 2.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
15.2 More Basic HTML. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features.
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 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
Just Enough HTML How to Create Basic HTML Documents.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
Basic HTML PowerPoint How Hyper Text Markup Language Works.
Basic HTML PowerPoint How Hyper Text Markup Language Works
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.
IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure
HTML BASICS Web Design I. Web Design  WWW created in the late 1980’s  Used in academics for the next 5 years  Mosaic (1994) allowed both pictures &
Web Design (3) HTML tags. Back to your web design ! Open Brackets Click on the drop down box on the left. Last time, you clicked on ‘Open Folder’ but.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.
Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Write HTML code using a text editor application such as.
HTML and Web Pages. HTML?  HTML is not a programming language  A type of SGML (standard generalized markup language)  HTML uses paired tags to markup.
HTML: Hyptertext Markup Language Doman’s Sections.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.
Informatics Computer School CS114 Web Publishing HTML Lesson 1.
Web Design Mr. Briggs’ Classes September 6-7, 2011.
HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
Creating and Editing a Web Page
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Hypertext Markup Language.  Developed by Tim Berners-Lee in 1990  Stands for HyperText Markup Languange  A format that tells a computer how to display.
HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Hyper text markup Language
HTML.
LESSON 1 Module 2: XHTML Basics Basic XHTML.
An Introduction to HTML Pages
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

Basic XHTML Module 2: XHTML Basics LESSON 1

Module 2: XHTML Basics LESSON 1 Lesson Overview In this lesson, you will learn to:  Write XHTML code using a text editor application such as Notepad.  View Web pages created with XHTML code.  Create a comment within an XHTML document.  Format text within a Web page.  Creates tags with attributes.

Module 2: XHTML Basics LESSON 1 Guiding Questions for Lesson 1  How do Web designers create Web pages?  What tools are needed to create a Web page or site?  How is a Web page viewed from the browser?

Module 2: XHTML Basics LESSON 1 Web Page Structure  XHTML is an example of a publishing language for the Internet  XExtensible  HHyper  TText  MMarkup  LLanguage

Module 2: XHTML Basics LESSON 1 Viewing Web Sites  Web browsers  Internet Explorer  Mozilla Firefox  Netscape Navigator  Apple Safari  And others  Web sites may appear differently when viewed in different browsers

Module 2: XHTML Basics LESSON 1 Copy this code into a Notepad document: Tags and Attributes It’s time to learn how XHTML tags are used to create Web pages. All XHTML pages begin with the html (the html must be included inside the brackets) tag and end with the /html (the /html must be included inside the brackets). Considering the huge amount of information on the Internet, Web pages are created from a surprisingly small number of tags, and you will find that they are easy to learn and use. The HEAD element (delineated by the head and /head tags) comes next and serves as a box or container that can hold a variety of other elements, including the TITLE element. The TITLE element contains the words that appear on the title bar or page tab in the browser window. In this example, “Tags and Attributes” is the title.

Module 2: XHTML Basics LESSON 1 Create an XHTML file  Save the code that you just created as “tags.html”  The extension.html designates a file to be opened by a browser  Access the file and open it

Module 2: XHTML Basics LESSON 1 Does your work look like this:

Module 2: XHTML Basics LESSON 1 How will the following examples of text be displayed by a Web browser?  How would this text look different? bolded text  Does this look any different? strong or bolded text  How would this text be displayed? italicized text  Same as italicized? italicized text  This tag might be useful for titles. underlined text (deprecated)  How would this tag change things? text color would be red

Module 2: XHTML Basics LESSON 1 Text size  Text size can be altered by the use of tags This tag creates large text Creates a slightly smaller text Is smaller yet, but still large Starts getting smaller Now the text is getting small And finally, this is the smallest

Module 2: XHTML Basics LESSON 1 Creating a Break Browsers ignore the use of the “enter” key To force the browser to place text on the next line use the “break” tag Try placing a break tag in your work after the phrase “easy to learn and use.” View your Web page again. How did it change?

Module 2: XHTML Basics LESSON 1 Creating a Paragraph vs. … places the text on the next line … creates a block or paragraph of text Remove the tag in our work that you just added Place an opening paragraph tag after the tag Place a closing paragraph tab after the phrase “easy to learn and use.” Refresh your Web page and look at the difference.

Module 2: XHTML Basics LESSON 1 Creating a Comment Why would a Web designer what to use a comment? Comments can be created using code Comments do not show in the Web page when viewed

Module 2: XHTML Basics LESSON 1 Lesson Review  Explain how to write the code for each of the following situations:  Bold  Underlining  Italics  What is the tag for the largest size and smallest size text?  What does a comment code look like?  Explain the difference between and …

Module 2: XHTML Basics LESSON 1 Practice: XHTML Basics Create the following changes in your “Tags and Attributes” Web page: Add the text “Tags and Attributes” at the beginning of the body. Make the “Tags and Attributes” be displayed as h1 in size. Make the “Tags and Attributes” be display as bolded text. Make the “Tags and Attributes” be display as underlined. Make the rest of the document display as h4 in size. Italicize all the words that are all caps. (Hint: There are five words in all caps.) Add a comment for your name and the date.