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…

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 " ” Opening tag signifies beginning of an element – Closing tag signifies end of element – – Always has same words a opening, but preceded by a “/”

Some examples This is a heading This is a subheading 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.

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 (no surprises there). So before you do anything else type " " in the first line of your document in Notepad. As you may recall from the previous lessons, 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 " " a couple of lines down and write the rest of the document between and. 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 ( and ) is on top of the body ( and ).

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 (no surprises there). So before you do anything else type " " in the first line of your document in Notepad. As you may recall from the previous lessons, 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 " " a couple of lines down and write the rest of the document between and. 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 ( and ) is on top of the body ( and ).

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