Transcript html+css1
XHTML & CSS
How HTML Pages Work
• HTML can try and tell a browser how parts of a page should
appear (e.g. text)
• But how the browser interprets the instructions can vary
(more later)
• Main elements of an HTML page:
– Text you want to appear
– Embedded TAGS (the instructions for controlling format and layout
and telling the browser about the document)
– File management information (e.g. links to graphics files, or other web
pages)
Example
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World <br />
This is my first web page
</body>
</html>
XHTML TAGS
•
•
•
•
Are what you (or your authoring tool) code
Are always enclosed in angle brackets (e.g. <h1> )
Are typed lower case. XHTML is case sensitive
Can have attributes, e.g.
<p align=“left”> the “Left” bit is the attribute
• Most tags are opened then they are switched off, e.g.:
<b>make this bold</b>but not this.
BASIC STRUCTURE
• All XHTML pages should start with <html> and close with
</html>
• Html Pages comprise a HEAD and a BODY
• HEAD = info about the document not necessarily seen by user
• BODY = what the end user sees when it is interpreted by the
browser
• Other elements (future lectures) = style sheets, framesets and
scripts
THE HEAD
• Where global settings are defined
• Starts with <head> and ends with </head>
• Usually contains:
– a title to be displayed in the top bar of the
browser, e.g. <title>This is My Web Page</title>
– meta information such as the author’s name or a
description of content e.g.
<meta name=author content=“C. Macaulay”>
(useful for search engines)
The Body
• Main functions:
– Break text in page into sections/chunks (e.g. by
creating paragraph or line breaks)
– Format text (e.g. appearance, alignment)
– Add other elements to the page (e.g. tables,
graphics, links, lines)
Hand Coding an HTML Page
• You can create an HTML page in any text editor
(Word,Notepad, etc)
• First signify it is an HTML page with <html>
• Then add your HEAD info
• Then your BODY info
• Then signify the HTML ends with </html>
• Then save the document in the style
– filename.htm or filename.html
• That’s it!
Paragraph Formatting
• Most documents display text in blocks, or
chunks
• To do this in HTML there are 4 relevant tags:
The Four Paragraph tags
• <p> starts a new paragraph (i.e. puts some white space
between the last paragraph and the new one </p>
• <br /> causes a line to break and what follows to appear on a
new line
• <div> allows you to group a bunch of paragraphs together
(e.g. to Align them all at once) </div>
• <pre> allows you to keep the formatting of a piece of text.
The browser will not reformat it. </pre>
Basic Text Formatting
• Most HTML tags you will initially look at are
concerned with the basics of text formatting:
– Font type and styles
– Text alignment
– Line breaks and paragraph breaks
– Defining text lists
Aligning Text
• <p align=“center”> means everything is centred until the next
<p>
– <p align=“left”>
– <p align=“right”>
– <p align=“justify”>
• To align more than one paragraph use:
– <div align=“center”>…..</div> Note: American spelling of CENTRE (i.e.
CENTER)
• Indent a section using:
– <blockquote>….</blockquote>
CHARACTER FORMATTING
•
•
•
•
•
•
•
•
•
<b> BOLD TEXT </b>
<i> Italic </i>
<strong>…</strong> usually same as bold
<em>…</em> usually same as italic
<sup>…</sup> superscript
<sub>…</sub> subscript
<strike>…</strike> struck through text
<u>…</u> Underline (NB Don’t confuse with hyperlinks)
<tt>…</tt> make everything teletype
HEADING STYLE
• Got six levels of heading:
– <h1>….</h1> = largest size
– <h2>….</h2>….. Etc
– <h6>….</h6> = smallest size
•
•
•
•
Headings always start a new line
Anything after them starts a new paragraph
Can use other TAGS inline with them (e.g. <em> )
But, different browsers will use different settings for headings
Hyperlinking
• Anchor tag <a> allows you to link to other
pages, or other parts of the same page, e.g.
• Link to a different file anywhere:
– <a href=“http://www.dcs.napier.ac.uk/>Napier Home Page</a>
• Link to another part of same file:
– create the anchor at point you want to be able to jump to with <a
name=“jumphere”>Jumps to Here</a>
– create a link at place you want to link from with
<a href=#jumphere>Link from here</a>
Images
<img src=“myimage.gif”>
<img src=“http://dcs.napier.ac.uk/~mjr/logo.gif”>
<img src=“photo.jpg” height=200 width=160>
Making Lists
• Another obvious feature of many documents
are lists
– Another useful way of organising information
– Main kinds HTML allows are ordered (i.e.
numbered), and unordered lists
• Ordered list: <ol> to start and then <li>… </li>
to signify each item in list then </ol> to end
• Unordered list: same format but <ul> … </ul>
List Example
Here is a list of my favourite vegetables:
<ul>
<li>Cabbages </li>
<li>Potatoes </li>
<li>Carrots </li>
<li>Brussels Sprouts </li>
</ul>
The Message
• A web page is a page of text that a human can
read if he wants to
• A web browser can interpret the page and
format it according to instructions in the page
Cascading Style Sheets
• Controls appearance of range of text in a
document (e.g. font, bold, size )
• Structured disciplined approach
• Ease of maintenance (90% of work on a site)
• Uniformity throughout site (site identity)
• Master style sheet, links every piece of text to
these
• Link to a series of documents (import or link tag)
Try Styles Within a page
<html>
<head>
<title>Embedding style sheets</title>
<style type="text/css">
<!-h1 { color: red; font-family: verdana;
font-size: 20pt }
p { font-family: arial; font-size: 10pt;
color: blue }
-->
</style>
</head>
Try them properly - HTML
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="site.css" >
</head>
Try them properly - Style Sheet
p {margin-left: 50px}
h1 {font-size: 18pt}
h2 {color: red}
body {background-color: green}
The Message
• CSS = style sheets tell a browser how to add
style (colour, positioning, text style etc) to a
web page
• You can put the style sheet information into
the page itself
• It is more powerful to use a separate style
sheet file for the entire site. Then you can
change the whole site in one go.
Summary
Web sites contain:
• Html files containing text
• Sometimes CSS files containing text
• Image files, which may only be gif, jpg or png
• Possibly other multimedia files if needed