Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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