Elements and Attributes

Slides:



Advertisements
Similar presentations
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Advertisements

Web Page Development Identify elements of a Web Page Start Notepad
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
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 Notes Chapters 1--6 Codes used in creating HTML documents are called tags. Tags are always enclosed in left ( ) angle brackets. Tags can be upper.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
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.
HTML Tags Basic Tags Doctype or HTML Head Title Body Use the website to find the definitions
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
WEB DESIGN AND PROGRAMMING Introduction to XHTML.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Elements and Attributes. XHTML Elements The element contains special information that does not necessarily show up on the web page. The element determines.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
Text Elements. We've already learned about the,,,, and elements. Now let's learn some elements that we'll use to present actual text content on our web.
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
HTML Basics.
Creating and Linking Web Pages
BHS Web Design Mr. Campbell
LAB Work 01 MBA 61062: E-Commerce
Marking Up with XHTML Tags describe how a web page should look
Introduction to basic HTML
HTML Programming Basic HTML text formatting.
How to create a static website with HTML
Elements of HTML Web Design – Sec 3-2
Elements of HTML Web Design – Sec 3-2
Creating a Web Page.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
HTML Formatting.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Text Elements.
Chapter 1: Introduction to XHTML (part 1)
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
Elements of HTML Web Design – Sec 3-2
Chapter 4 - Introduction to XHTML: Part 1
HTML Robert McIntosh
Web Programming– UFCFB Lecture 5
COMPUTING FUNDAMENTALS
HTML (HyperText Markup Language)
WEBSITE DESIGN Chp 1
Text Elements.
Web Design and Development
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Text Elements.
HTML ELEMENTS Ms. Olifer.
Introduction to HTML- Basics
Intro to Web Development HTML Structure
Introduction to XHTML Cont:.
Formatted Lists Unordered Lists Usage of Unordered List Ordered Lists
HTML Formatting Text.
Introduction to HTML.
Creating and Editing a Web Page
Marking Up with XHTML Tags describe how a web page should look
Text Elements.
Marking Up with XHTML Tags describe how a web page should look
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Lesson 2: HTML5 Coding.
Basics of Web Design Chapter 2 HTML Basics Key Concepts
Text Elements.
Marking Up with XHTML Tags describe how a web page should look
Presentation transcript:

Elements and Attributes

XHTML Elements <head> </head> <title> </title> The <head> element contains special information that does not necessarily show up on the web page. <head> </head> <title> </title> <body> </body> The <title> element determines what text will display in the title bar of the web browser. The <body> element is where all the "content" of your web page goes. Most elements have a start tag (such as <head>) and an end tag, which is the same as the start tag, but with an additional "/" character (such as </head>).

XHTML Line Break Elements The paragraph tag creates a line break with a blank line above and below the text. <p>text</p> <br /> The break tag creates a line break without any blank lines at all. Some elements do not have a separate close tag. <br> is one example. In these cases, the forward slash is placed at the end of the tag itself, and these tags are known as self-closing.

The Horizontal Rule Element: <p> It takes a pretty big dog to weigh a ton. </p> <hr /> Horizontal Rule Element The <hr> element is another self-closing tag. With no attributes specified, it will draw a horizontal line across the page. It takes a pretty big dog to weigh a ton. _____________________________________________________________

Adding an attribute to an element: <p> It takes a pretty big dog to weigh a ton. </p> <hr width="80%" /> Attributes give more information about elements. In this example, <hr> is an element and width is an attribute specifying how the element should be displayed. The "80%" is the value of the attribute. Attribute names must be in lowercase and values must be enclosed in quotes. It takes a pretty big dog to weigh a ton. __________________________________________________

XHTML Heading and Sub-headings: <h1>Heading</h1> <h2>Sub-heading</h2> <h3>Sub-sub-heading</h3> <h4>Etc.</h4> <h5>Etc.</h5> <h6>Etc.</h6> Sub-heading Sub-sub-heading Etc. Etc. Etc. Heading and sub-heading elements provide structure to a web page. The <h1> tag indicates the most important heading and should be used no more than once per page. All heading and sub-heading tags add blank lines before and after the text, just like the <p> tag. Always remember that the primary role of XHTML tags is to define and organize the content, not to format it. Headings are used to define the relative importance of content, i.e. <h1> is more important than <h3>.

XHTML List Elements: <ul> Unordered List (bullet points) <ol> Ordered List (numbers or letters) <li> List Item (within <ul> or <ol>) <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> list item 1 list item 2 list item 3 <ol> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ol> 1. list item 1 2. list item 2 3. list item 3