1 / 20

HTML

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.

angeni
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML CS1315 Fall 2009

  2. 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

  3. 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

  4. 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.

  5. 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

  6. 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….

  7. 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

  8. 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

  9. 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

  10. More Acronyms • HTTP – Hypertext Transfer Protocol • FTP – File Transfer Protocol • WWW – World Wide Web • URL – Uniform Resource Locator

  11. 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">

  12. 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?...

  13. 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 “/”

  14. 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 />

  15. 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.

  16. 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>).

  17. 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>).

  18. Congratulations, you made your first web site!

  19. What you see when you view a page on the Internet is your browser's interpretation of HTML

More Related