XHTML/CSS Week 1
What is XHTML (Extensible)HyperText Markup Language. What does this mean? Language – a means of communicating Markup – Adding instructions to a piece of text to indicate how it should be displayed. From the real world Dear Printer - Please print the following text using the agreed rules for printing titles – “Chapter 1” Web <h1>Chapter 1 </h1> (XHTML)
What is XHTML (continued) Hypertext – A method of marking text so that when it is clicked another document, or another part of the same document is shown. Extensible – Capable of being added to
Important Stuff to Know Web pages need to have a file extension of .htm or .html so use quotes around the filename in Notepad XHTML tags are all lowercase XHTML tags only define what something is – not how it looks. This is different from HTML
Another Web Page <html> <head> <title> It’s a web page </title> </head> <body> <h1> My second web page </h1> <h2> What happens here? </h2> <p> This is a paragraph. </p> <p> Here’s another paragraph </p> </body> </html> Save this as “second.htm” and check it works
Create a Web Page Enter the following into Windows Notepad <html> <body> <h1> My first webpage </h1> <p> This is a paragraph. </p> </body> </html> Save as “first.htm” to the Windows desktop Double click on the file to load Internet Explorer and see your web page.
(X)HTML XHTML is a set of rules which allows us to ‘mark up’ a document to define how it should appear in a web browser XHTML allows us to mark pieces of text, and other things like images, as hyperlinks XHTML documents are simple text documents that can be created using any text editor and viewed on any computer
We can create XHTML… Using a simple text editor like Notepad. Easy to learn, readily available but you need to know (or look up) XHTML tags Using a HTML editor – text editor with easy insertion of HTML Tags Using a web development program – Dreamweaver, FrontPage – you don’t need to know XHTML – until you have a problem!
XHTML vs HTML HTML 4.x is no longer a supported standard HTML 5 won’t be here anytime soon! XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01 (The final version) combined with the syntax of XML. Web Browsers do their best to display pages whether written in HTML or XHTML
A Simple Web Page in XHTML <html> <body> <h1>The Heading</h1> <p>A paragraph.</p> </body> </html> Note the XHTML tags - in angle brackets Nearly all of these tags exist as pairs. <tag>…</tag> surrounding the content they format. What tags can you see?
First HTML tags <html>…</html> Start and end of the page. Web pages start and finish with these tags. <head>…</head> Start and end of the Head area of the page. This area is mainly used to contain technical, non-displaying informaton about the page <body>…</body> Start and end of the Body area of the page – everything that appears in the main browser window is between these tags
First HTML tags <h1>…</h1> Header 1 – text surrounded by these tags appears in the Header 1 style <p>…</p> Paragraph - text surrounding by these tags is normal display text. The browser inserts a blank row after each </p> tag
Quiz - What do these tags mean? <html> <head> <body> <h1> <p> What about <h2>?