The Basics of HTML by AVINASH S. JOHN SMASHWORDS EDITION * * * * * PUBLISHED BY: JOHN on Smashwords The Basics of html Copyright © 2013 by avinash john smith Smashwords Edition, License Notes Thank you for downloading this free ebook. Although this is a free book, it remains the copyrighted property of the author, and may not be reproduced, copied and distributed for commercial or non-commercial purposes. If you enjoyed this book, please encourage your friends to download their own copy at Smashwords.com, where they can also discover other works by this author. Thank you for your support. Table of Contents Tags and html files HTML & Abstraction How do we write it? The basic framework Notepad Observations HTML = HyperText Markup Language is the markup language used for hypertext (yeah, that says very little...) A markup language is a system of tags that describe how to format a document. There's usually some kind of interpreter that reads a document in the markup language and displays it in a nicely formatted way. Hypertext is the technical term for web pages, i.e. text with formatting and which the user can interact with (e.g. clicking links, hence the "hyper" part). The interpreter for hypertext is a web browser. Tags and HTML Files HTML files are plain text files --> no formatting We need ways to tell the web browser when to start formatting text in certain ways, insert things like horizontal rules and links, etc. These are the tags. They're code that is understood by the writer and replaced by the interpreter with appropriate formatting HTML & Abstraction Abstraction is one the most fundamental concepts of computer science. Definition: Ignoring the details of a complicated system to focus on the essentials needed to use the system. Focusing on WHAT we're doing, not HOW it is done. Where do we use abstraction in our daily lives? Why is this important? HTML is a great example of abstraction in action. When we look at a web page in a browser, we are viewing the same thing as the HTML code, but at a different (higher) level of abstraction. How do we write it? HTML files are plain text files, so a simple plain text editor will work fine. The simple one in Windows is Notepad. The simple one in Mac OS X is TextEdit. Notepad It's usually found under Start > Accessories > Notepad. Very limited set of commands, but if you can use Office, you can certainly learn Notepad. When you save in Notepad, the default file type is txt. For HTML, you want the extension html or htm. To achieve this, type the filename in double quotes in theSave As dialog, e.g. "index.html" A few simple tags: formatting Bold example Italics HTML As displayed in browser some kind of interpreter that reads some kind of interpreter that reads Caution! Watch that you have a closing tag to go along with the opening tag. Watch that the closing tag has the /. The basic framework The HTML file itself is all wrapped within an outer set of tags common to all HTML files. Here's the basic framework (you could feasibly copy and paste this each time you get started): The title of your page goes here. The text that makes up your page goes here. Observations Notice that blank lines (whitespace) are ignored. It's good style to include whitespace because the HTML needs to be readable. Notice that spaces are ignored if there's more than one of them at a time. You could put 20 spaces between words and it's the same as putting one. Tabs mean nothing. There's a way around that called a non-breaking space, but there really isn't any place you'd need to -- or should -- use it. Common mistake I've seen: Do NOT try to indent paragraphs with a bunch of non-breaking spaces. Paragraphs in HTML were never intended to be indented. It looks sloppy. Headings HTML provides levels of headers or headings for organizing a document. There are six levels of headers: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Note the use of headers in this web page: Heading 1 for the main title, Heading 2 for titles of major sections, Heading 3 for subtitles. I've set all the headers off ingreen today as an example. The tags for headings: HTML As displayed in browser

Heading 1 Example

Heading 2 Example

Heading 3 Example

Heading 3 Example The tags for h4, h5, h6 are similar, although going below h3 generally isn't a good idea. Line breaks and horizontal rules All of the tags we've seen so far have opening an closing tags, to signal the beginning and end of formatting. Two exceptions are horizontal rules,

, and line breaks,
. HTML As displayed in browser first line
second line first line second line first line

second line first line second line Note: Hardcore HTML purists will tell you to format these tags as

and
to keep the notion of opening and closing tags consistent. I'm not thatpicky; either is acceptable as long as you're consistent. Using them Generally, HRs (typical to abbreviate elements by their tags like this) are used to divide up content. As you've seen, my philosophy is to use HRs to divide up content at higher levels of hierarchy (e.g. before each H2 in the notes) and use lower-level headings (e.g. H3 in the notes) to divide up information at lower levels of hierarchy. HRs are also handy to separate content from contact info, disclaimers, etc. Use BRs within other HTML elements, e.g. table cells and list items where a line break is necessary. Break up paragraphs with the paragraph tag -- the whitespace provided fosters readability.