Embed Size (px)
Citation preview
HTML
CS1315 Fall 2009
What You Need to Get Started
• A *simple* text editor to write HTML– Windows: notepad– Mac: textedit (be sure to pick Format Make Plain
Text)– Linux: Pico, vi, etc.
• A browser to render the HTML– Firefox– Internet Explorer– Opera
Myths About Websites
• Websites are extremely difficult to make• Expensive and advanced software is needed to
make website• Google owns all the websites out there
Do I Need to Be Online?
• No! • A simply web page is just an HTML file• The only difference between an HTML file on
your computer and one on the Web is that the one on the Web:– Has been uploaded to a Web server – Has been placed in a directory that the Web
server can access.
What is HTML?
• HTML is a language used to make websites• Not a programming language– No for loops, if statements, etc.
• Abbreviation of "HyperText Mark-up Language”– Hyper: not linear; you can visit any leak whenever you
want– Text– Mark-up: specify purpose/formatting of text, e.g.
headings, bullets and bold– Language: HTML is a language
History of HTML
• HTML is a kind of SGML (Standardized general markup language)– SGML was invented by IBM and others as a way of defining parts of a document
COMPLETELY APART FROM HOW THE DOCUMENT WAS FORMATTED.
• HTML is a simpler form of SGML, but with a similar goal.– The original idea of HTML was to define the parts of the document and their
relation to one another without defining what it was supposed to look like.– The look of the document would be decided by the client (browser) and its
limitations.• For example, a document would look different on a PDA than on
your screen or on your cellphone.• Or in IE vs. Netscape vs. Opera vs….
Evolution of HTML• But with the explosive growth of the Web, HTML has
become much more.– Now, people want to control the look-and-feel of the page down to the pixels
and fonts.– Plus, we want to grab information more easily out of Web pages.
• Leading to XML, the eXtensible Markup Language.• XML allows for new kinds of markup languages (that, say,
explicitly identify prices or stock ticker codes) for business purposes.
• We’re going to be focusing on a version of HTML based on XML, called XHTML
HTML vs. XHTML
• Original HTML: Simple, what the earliest browsers understood.
• XHTML: HTML re-defined in terms of XML.– New, more well-structured way of writing HTML– A little more complicated to use, but more
standardized, more flexible, more powerful– It’s the future of where the Web is going
• We will use XHTML in this class
What is a .html file?
• A plain text file• Contains XHTML code• When opened in a browser, is interpreted by
reading the tags and formatting the content accordingly
More Acronyms
• HTTP – Hypertext Transfer Protocol• FTP – File Transfer Protocol• WWW – World Wide Web• URL – Uniform Resource Locator
Important things to include
• If you want your html to validate at w3…• <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
Basis of HTML: Elements
• Gives structure to content• Tells browser how you want your website to
be presented• E.g. paragraph, heading, subheading, etc.• Generally consists of a start tag, some
content, and an end tag– What’s a tag?...
Tags
• Labels used to mark up the beginning and end of an element
• Always begin with a less-than sign "<" and end with a greater-than sign ">”
• Opening tag signifies beginning of an element– <html>
• Closing tag signifies end of element– </html>– Always has same words a opening, but preceded by a
“/”
Some examples
• <h1>This is a heading</h1>• <h2>This is a subheading</h2>
• Tags should be lower case (even though the browser probably won’t care)
• There are some tags that don’t require a close tag – instead combine open and close in one– E.g. <br />
• The browser reads HTML like you read English: from the top down and from left to right.
• A simple HTML document begins with what should come first and ends with what should come last.
• The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag <html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad.
• As you may recall from the previous lessons, <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>.
• The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).
• The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag <html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad.
• As you may recall from the previous lessons, <html> is an opening tag and must be closed with a closing tag when you are finished typing HTML. So to make sure you don't forget the HTML close tag now type "</html>" a couple of lines down and write the rest of the document between <html> and </html>.
• The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).
• Congratulations, you made your first web site!
• What you see when you view a page on the Internet is your browser's interpretation of HTML
