A Smarter Way To Learn HTML & CSS(2015)

1
HTML & CSS

An HTML (Hypertext Markup Language) document is a text file that tells the browser (Chrome, Firefox, Internet Explorer, Safari, and others) how to assemble a webpage. It says to the browser, “Put this heading here. Put that paragraph there. Insert this picture here. Put that table there.”

Though it can create webpages with formatting that is sometimes elaborate and even beautiful, an HTML document itself is pure text, without any formatting whatsoever. This means you can’t use a word processing program like Microsoft Word to write HTML, because Word and other word processors add formatting. Instead, you’ll choose from any number of editing programs that produce pure text. The simplest of these is Notepad on a PC and TextEdit, in Plain Text mode, on a Mac. You can also use fancier editing programs. And there are web development tools like Dreamweaver. They all create the pure text required for HTML. My favorite code editor is the open source Brackets, free at http://brackets.io/.

When I ask you to do something in Brackets, Notepad, or TextEdit, feel free to substitute any of the alternative editors.

Each HTML document creates a single webpage in the browser. If a site has a hundred pages, it has a hundred HTML documents.

An HTML document’s name ends with the .html extension, as in about.html or products.html.

When you’re looking at a webpage, you can see the name of the page’s HTML document in the browser’s address bar.

http://www.ASmarterWayToLearn.com/htmlcss/23.html

When the line of characters shown above is entered in the browser’s address bar, the browser loads the HTML document 23.html, and that page is assembled in the browser and displayed on the user’s screen. If a user clicks a link on the page for, say help.html, then the filehelp.html loads, and that page is displayed.

There’s one HTML name you usually won’t see in the browser’s address bar, index.html. That’s the name of the page that loads by default when no HTML document is specified. It’s the site’s home page. So if you enter this in the browser’s address bar…

http://www.asmarterwaytolearn.com

…the document that loads (with some exceptions) is index.html.

All the HTML documents for a site are stored on the web hosts’s server, or, in the case of a big, important site, often on the site owner’s own server. When the browser is pointed to a page on the site, the browser fetches the appropriate HTML file from the server and displays that page.

A browser will also display an HTML document stored on your computer’s hard drive. That will prompt your browser to display the page on your screen.

Whereas an HTML document specifies the contents of a webpage—the headings, paragraphs, images, tables, etc.—A CSS (cascading stylesheets) file specifies the styling of that page—fonts, colors, column widths, and the like.

Like an HTML document, a CSS file is plain text. You can create it with the same editor you use to create an HTML document. A CSS file has the extension .css.

When an HTML document loads, it calls the CSS file that styles its contents.

Rather than creating a separate CSS file, it’s possible to include all of the styling specifications in an HTML document. But the preferred way to style webpages is to put all the styling information in a separate CSS file, so that’s what I’m going to teach you.

These are the rules I’m going to ask you to follow for naming both HTML and CSS files:

· Use only lower-case characters.

· Avoid spaces.

· Stick to 0-9, a-z, and _.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/1.html

out our premium features.