Learning Web Design: Chapter 4

HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting  Most tags use this method: <> - the start tag - the end tag  HTML uses common sense names for tags paragraph, body, title

A Brief History of HTML  The base set of tags is referred to as HTML 2.0 Standard set by the W3C Set of tags all browsers must support  In 1996, HTML 3.2 specification created by group of vendors and W3C Includes tables, applets, text flow around images Backward compatible with HTML 2.0  In 1997, HTML 4.0 incorporated: DHTML, Cascading Style Sheets and Frames

Preparing for the Future  New Web technologies do not handle the older versions of HTML  The new HTML Standard is HTML5,  This standard is known as HTML 5 Similar to XHTML 1.0 Additional rules needed to make code compliant

HTML Describes the Page Structure  Documents have common elements: Lists Paragraphs Titles Headings Tables  HTML also defines character styles like bold and italicize  Each element has a name and is contained in a tag

HTML Does not Describe Page Layout  HTML doesn’t set how a page will look when viewed  Some browsers might use different default styles than others  As a Web designer, pages you create could look drastically different from system to system and browser to browser

HTML Documents  HTML code is stored as an ASCII text file  Any text editor can be used to create these files: Notepad, TextEdit, EditPad etc.  You could use a web authoring tool to write your HTML code, but they often self-generate code  Focusing on the basics with a simple text editor will help you “really” learn to code

Naming Conventions  For windows-based browsers, you should save the file with the extension of.htm or.html  Never use spaces or special characters like # in your filenames  Filenames may be case-sensitive depending on the server  Keep filenames short  You can set your own conventions

Sample Page My First Webpage! WOW! This is pretty cool!

What it Means beginning HTML encoding. beginning the header section. My First Webpage! title of page information about page ending the header beginning the body of the document. WOW! starting of a paragraph line break This is pretty cool! ending of a paragraph ending of the body section ending of HTML encoding.

Nesting of HTML Tags  In the previous code example, notice how the tags fall in between the tags  Also see how the encloses all the text you see on the screen  Make sure you always use proper nesting of tags

Choosing a Good Title  The title may be required, but it is also useful  The title is displayed in user bookmarks and favorites  Descriptive titles improve accessibility  Search engines rely heavily on titles  Keep the title length in check so it will fit in the title area

Attributes  Attributes modify the properties of a tag  For example: is used to display an image. The alt attribute is used to provide alternate text for the image.  Part of using tags properly is understanding how to set the attributes associated with each tag  If an attribute is not set explicitly, it will have a default value

HTML Comments  Comments add documentation to a web page  Text between the will not be displayed in the browser  Comments can be used in any part of the web page  Readers may view comments if they “View Source”

Block and Inline Elements  Block-level HTML elements start on a new line and some space is added before and after the element  Browsers treat block-level elements as if they were little rectangle boxes stacked on the page  Inline HTML elements do not start a new line, but stay in the flow of the paragraph

Self-Terminating Tags  Some tags start and end in a single tag meta data, documentation horizontal rule line break  These tags are empty tags because they have no separate ending tag

Validating Your Documents  Professional web developers catch errors in the markup by validating their documents. Here are some things validators check for: An indication of character encoding Inclusion of rules and attributes Mismatched tags Non-standard elements Nesting errors

Using Cascading Style Sheets  CSS allows you to control the “look and feel” of your web pages  There are three levels of CSS: Inline – styles are wrapped around tags Embedded – styles are group at beginning of file External – styles are placed in a separate file and linked to the web page  More on CSS later

Summary  HTML allows us to specify the structure, not the formatting of a Web page  We will be writing our pages using the HTML5 standard  The governing body of Web standards is the World Wide Web Consortium, W3C  HTML code can be written in any plain text editor WYSIWYG editors are easy to use but their code may be proprietary and may not validate