Transcript lecture02b
Lecture 2B: HTML and CSS IT 202—Internet Applications Based on notes developed by Morgan Benton For Today HTML CSS Intro to HTML HTML stands for Hyper-Text Markup Language It is a subset of SGML (Standard Generalized Markup Language) Historically HTML and SGML are presentational styles and not well adapted to interactivity HTML Basics HTML files are text files and can be created in ANY text editor Visual effects are created by the way that Web Browser software interprets the text. Effects are created by enclosing text with special “tags” The list of tags is relatively short and worth learning—regardless of the HTML editing software there are always times that you need to tweak your HTML HTML Basics (cont’d) Tags resemble characters enclosed in pointy brackets—e.g. <p> There are opening tags, <b>, and closing tags, </b> In well-formed HTML you should ALWAYS use closing tags, although many browsers don’t require it Well-formed HTML always nests tags appropriately—e.g. <b><i></i></b> is correct whereas <b><i></b></i> is incorrect Creating a Web Page Open a text browser Type in your HTML text Save the file with an “.html” extension FTP the file to a directory located on a web server You’re done! Test it by pointing a browser at the file Let’s try it! Creating a web page using HTML HTML Validation You can test to see if your HTML conforms exactly to the HTML 4.0 specification Somewhere in the body of your page include the following code: <p> </p> <a href="http://validator.w3.org/check/referer"> <img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a> Cascading Style Sheets The problem: changing the look and feel of a web site can be very tedious CSS separates content from presentation so that formatting for a site can be updated simply by updating a single file Requires careful planning, but on the whole makes for a site that is much easier to maintain CSS Basics CSS files are plain text files that can be edited with ANY text editor The rules and syntax are fairly simple A good website is www.w3schools.com Styles can be defined within the HTML document or in a separate file that is referenced CSS instructions are enclosed within <style> tags within the HTML document CSS Basics (cont’d) Using style sheets is the preferred method for handling all or most formatting functions within web pages The biggest problem is that all browsers don’t process style sheets in the same way so getting everything to work can be tricky Let’s try it! Let’s use CSS to modify our HTML. We’ll use CSS in three ways: Inline In the <head> section of the document As a separate file that is linked into the HTML using the <link> tag CSS Validation CSS can be validated in exactly the same way as HTML, by using the W3C CSS Validator Service One More Note HTML and CSS have relatively simple rules and a small amount of syntax and terminology to learn. The absolute best way to learn them is to create your own sites and just play around with it. Don’t use a fancy editor like FrontPage. Use something relatively simple that requires you to type in the code yourself.