Transcript
WEBSITE FUNDAMENTALSMarkup Documents
MARKUP DOCUMENTSWhat is HTML?
WHAT IS HTML?
HTML is the language websites are written in. The letters stand for HyperText Markup
Language. It might sound complicated, but it’s actually
pretty easy to understand.
WHAT IS HTML?
HTML has two essential features:1. Hypertext2. Universality
WHAT IS HTML?
HyperTextHyperText means you can create a link in a Web
page that leads the visitor to any other web page or to practically anything else on the internet.
It means that information on the Web can be accessed from many different directions.
WHAT IS HTML?
Universality:Universality means that because HTML documents
are saved as Text Only files, virtually any computer can read a Web page.
It doesn’t matter if your visitors have Macintosh or Windows machines, or whether they’re on a Unix box or even a handheld device like a Palm.
The Web is open to all.
MARKUP DOCUMENTSHTML VS. XHTML: What should you use?
HTML VS. XHTML
XHTML stands for eXtensible HyperText Markup Language; it is the simplicity of HTML with the power and flexibility of XML and became the perfect foundation for CSS.
HTML VS. XHTML
XHTML is a great improvement over HTML. It’s stronger, more flexible, more powerful,
more likely to be supported in the future, and can be expanded to fit any need.
However, there are times when you just need to publish a web document without having to stress over every last quotation mark.
MARKUP DOCUMENTSMarkup: Elements, Attributes and Values
MARKUP
XHTML is an ingenious system of including information about the content right in a text document.
This information - called markup, accounting for the m in XHTML - can include formatting instructions as well as details about the relationships between parts of the document.
However, because the markup itself is comprised chiefly of text, the document is practically universally accessible.
MARKUP
XHTML has three principle types of markup:1. Elements2. Attributes3. Values.
ELEM
EN
TS
Elements are like little labels that identify and structure the different parts of a Web page.
Some elements have one or more attributes, which further describe the purpose and content, if any, of the element.
<hr />
<td colspan=“3”>February</td>
<img src=“blueflax.jpg” width=“300” />
ELEM
EN
TS
Elements can contain text and/or other elements, or they can be empty.
A non-empty element consists of an opening tag, the content, and a closing tag.
<hr />
<td colspan=“3”>February</td>
<img src=“blueflax.jpg” width=“300” />
ELEM
EN
TS
An empty element looks like a combination opening and closing tag, with an initial less than sign, the element’s name followed by any attributes it may have, a space, a forward slash, and the final greater than sign.
<hr />
<td colspan=“3”>February</td>
<img src=“blueflax.jpg” width=“300” />
AT
TR
IBU
TES
AN
D V
ALU
ES
Attributes contain information about the data in the document, as opposed to being that data itself.
Some attributes can accept any value at all, others are more limited.
Perhaps the most common are those that accept enumerated or predefined values.
In other words, you must select a value from a standard list of choices.
<hr />
<td colspan=“3”>February</td>
<img src=“blueflax.jpg” width=“300” />
AT
TR
IBU
TES
AN
D V
ALU
ES
Many attributes require a number or percentage for their value, particularly those describing size and length.
A numeric value never includes units.
Where units are applicable, as in the height of text or the width of an image, they are understood to be pixels.
<hr />
<td colspan=“3”>February</td>
<img src=“blueflax.jpg” width=“300” />
AT
TR
IBU
TES
AN
D V
ALU
ES
The attributes controlling colour can contain values that are either a colour name or a hexadecimal representation of the red, green, and blue content of the colour.
Some attributes reference other files and thus must contain values in the form of a URL, or Uniform Resource Locator, a file’s unique address on the Web.
<p color=“yellow”>
<p color=“#FFFFFF”>
<a href=“test.html”>Click Here</a>
<a href=“http://www.google.com/”>Goo
gle Search</a>
BLO
CK
VS
. INLIN
E
An element can be block-level or inline.
If it is block-level, it will always be displayed on a new line, like a new paragraph in a book.
If it is inline, it will be displayed in the current line, like the next word in a paragraph.
Block Level Elements<div> <p> <table>
Inline Elements<span> <a>
BLO
CK
VS
. INLIN
E
Block-level elements are considered the bigger structural pieces of your Web page, and as such can usually contain other block-level elements, inline elements, and text.
Inline elements, in contrast, can generally only contain other inline elements and text.
Block Level Elements<div> <p> <table>
Inline Elements<span> <a>
PA
REN
TS
AN
D C
HIL
DR
EN
If one element contains another, it is considered to be the parent of the enclosed, or child element.
Any element contained in the child element is considered descendants of the outer, parent element.
You can actually create a family tree of a Web page that both shows the hierarchical relationships between each element on the page and uniquely identifies each element.
<div>
<p></p>
<p>
<a></a>
</p>
</div>
PA
REN
TS
AN
D C
HIL
DR
EN
This structure is a key feature of HTML code and facilitates adding style to the elements and applying JavaScript effects to them.
<div>
<p></p>
<p>
<a></a>
</p>
</div>
PA
REN
TS
AN
D C
HIL
DR
EN
It is important to note that when elements contain other elements, each element must be properly nested and is fully contained within its parent.
Whenever you use a closing tag, it should correspond to the last unclosed opening tag.
In other words, first open A then open B, then close B and then close A.
<div>
<p></p>
<p>
<a></a>
</p>
</div>
MARKUP DOCUMENTSCSS
(Cascading style Sheets)
CSS
Most word processors today include a way to make changes to text not just word by word, but throughout an entire document using styles.
Styles collect all the different properties, such as font family, size, and colour that you want to apply to similar types of text - titles, headers, captions, and so on - and give these groups of properties a common name.
CSS
CSS brings to the Web the same convenience for setting styles that’s available in one central location to affect the appearance of a particular XHTML tag on a single Web page or across an entire Web site.
Although CSS works with XHTML, it is not XHTML. Rather, CSS is a separate code that enhances the abilities of XHTML, by allowing you to redefine the way that existing tags display their content.
MARKUP DOCUMENTSTypes of CSS Rules
TYPES OF CSS RULES
The best thing about Cascading Style Sheets is that they are amazingly simple to set up.
They don’t require plug-ins or fancy software - just text files with rules.
A CSS rule specifies the XHTML to which a style or definition applies, and then defines the style, or how the selected XHTML should behave in the browser window.
You can set up rules to tell a specific XHTML tag how to display its content, or you can create generic rules and then apply them to tags at your discretion.
TYPES OF CSS RULES
The three most common selectors or ways to select the XHTML to which a style applies, are:1. XHTML Selector2. Class Selector3. ID Selector
XH
TM
L S
ELEC
TO
R
The XHTML element’s name is used as a selector to redefine the associated XHTML tag
div { ... }
p { ... }
a { ... }
CLA
SS
SELEC
TO
R
A class is a “free agent” that can be applied to an XHTML tag.
You can name the class almost anything.
Because it can be applied to multiple XHTML tag, a class is the most versatile type of selector
.class
.menuItem
.clear
ID S
ELEC
TO
R
Much like classes, IDs can be applied to any XHTML tag, but only once on a given page to a particular tag to create an object for use with a JavaScript function
#ID
#navigation
#footer
MARKUP DOCUMENTSThe parts of a CSS rule
THE PARTS OF A CSS RULE
All CSS rules consist of a selector and a declaration block.
The declaration block, which is surrounded by curly braces, is made up of declarations, which are pairs of properties and values separated by a semicolon.
SELEC
TO
RS
Selectors start each rule, appearing before the left curly brace
The selector can be a XHTML tag selector, a class, an ID, or a combination of these
selector { property: value; }
PR
OP
ER
TIE
S
Properties identify the style that is being defined.
There are several dozen properties, each responsible for an aspect of the page content’s behaviour and appearance.
selector { property: value; }
VA
LU
ES
Values are assigned to a property to define its nature.
A value can be a keyword such as “yes” or “no”, a number, or a percentage.
The type of value used depends solely on the property to which it is assigned.
selector { property: value; }
MARKUP DOCUMENTSWhere to put CSS Rules
WHERE TO PUT CSS RULES
You can set up rules in three places:1. Inline2. Embedded3. External
INLIN
E
In an XHTML tag within the body of your document, to affect a single tag in the document.
This type of rule is often referred to as an inline rule.
<p style=“color: red;”>This is a paragraph displayed in red.</p>
EM
BED
DED
In the head of a document, to affect a single Web page.
This type of rule is called an embedded rule.
<style>
p { color: red; }
</style>
EX
TER
NA
L
In an external document that is then linked or imported into your XHTML document(s), to affect an entire Web site.
This type of rule is called an external rule.
# STYLESHEET: screen.css
p {
color: red;
}
WHERE TO PUT CSS RULES
The position of a rule in relationship to the document and other CSS rules determines the scope of the rule’s effect on the document.
MARKUP DOCUMENTSCSS and Markup languages
CSS AND MARKUP LANGUAGES
CSS is not XHTML; it simply means that XHTML now relies on the capabilities of CSS.
The W3C’s thinking is this:
Style sheets should be used to “relieve XHTML of the responsibilities of presentation.”
top related