Introduction to HTML INP150: Basic HTML Instructor: Paul J. Millis HTML • HTML stands for HyperText Markup Language • Subset of SGML (Standardized General Markup Language) • Elements: – – – – – Titles Paragraphs Lists Tables Images • Consists of header and body Creating HTML • You can create an HTML document with any word processor or text editor – HTML is not case sensitive; XHTML, the next iteration is – HTML browsers will ignore any extra spaces that exist • Allows you to make it readable • Returns at the end of paragraphs will not appear • Save as text only with an htm or html suffix (be consistent) – Don’t ‘save as html’ Tags • Written between angle brackets • Usually come in pairs – A closing tag should correspond to the last unclosed opening tag – Use same command word – Closing has extra forward slash – Attributes precede the final closing bracket – Space between multiple attributes • Values should be enclosed in straight (" ") rather than curly quotes • Tags are not case sensitive Structure • A Web Page contains these tags: – <html>…</html> – <head>…</head> • <title>…</title> – TITLE effects how search engines find things – TITLE is what is on the blue bar on top of browser – <body>…</body> Headers • Think of headers as hierarchical dividers: – There are 6 levels – You will seldom use more than 3 – E.G. <h1>Main Heading</h1> Paragraphs • In order to start new paragraphs in HTML, use the <p> tag – </P> is not required but is available and SHOULD be used – &nbsp between paragraph tags will add space Checking Your Progress • Check your page in a browser (or several) – FILE/OPEN PAGE is used – It isn’t necessary to publish your pages before you view them – Use RELOAD after making changes to Web Page XHTML • XHTML is not very different from HTML 4.01 • XHTML stands for EXtensible HyperText Markup Language • XHTML is aimed to replace HTML • XHTML is almost identical to HTML 4.01 • XHTML is a stricter and cleaner version of HTML • XHTML is HTML defined as an XML application Getting Ready for XHTML • Bringing your code up to 4.01 standards is a very good start – Learn to write your HTML code in lowercase letters – NEVER make the bad habit of skipping end tags like the </p> or </li> • Empty elements must either have an end tag or the start tag must end with /> – To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />. – Elements must be properly nested – Elements must be nested within the <html> root element