HTML Output
advertisement
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags. HTML Documents - Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of a web browsers (like Internet Explorer) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page <html> Begins your HTML document. <head> Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. <title> a child of the <head> element and <head> element must have a <title> element is visible in the title bar of the viewers’ browser is visible when the page is bookmarked with the default name used by search engines in indexing the page can not add tags to format the title may also contain any combination of the following elements, in any order: ❑ <base>, tells the base URL for all the links in the page. ❑ <object>, designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. ❑ <link> to link to an external file, such as a style sheet or JavaScript file ❑ <style> to include CSS rules inside the document; ❑ <script> for including script in the document, ❑ <meta>, which includes information about the document such as keywords and a description, which are particularly helpful for search applications; </title> </head> <body> your code comes here this is the part which is visible in the main browser window </body> </html> <em> vs. <i> ; <strong> vs. <b> <i> carries no semantic meaning beyond "make this italicized"; if italics are not available, there is no fallback rendering that I'm aware of <em> means emphasized text; certain browsers render emphasized text in italics, though this is not required <b> carries no semantic meaning beyond "make this bold"; if bold is not available, there is no fallback rendering that I'm aware of <strong> means strongly emphasized text; certain browsers render strongly emphasized text in bold, though this is not required Headings Are Important Use the HTML heading tags for headings only. Don't use headings to make something BIG orbold. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, and less important H3 headings, and so on. <br> or <br /> In XHTML, XML, and future versions of HTML, tags with no end tags (closing tags) are not allowed. Even if <br> works in all browsers, writing <br /> instead is more future proof. HTML Output With HTML, you cannot change the output by adding extra spaces, tabs or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one space, and any number of spaces count as one space. HTML Attributes HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation Newer versions of (X)HTML will demand lowercase attributes. Core Attributes Not valid in base, head, html, meta, param, script, style, and title elements. Attribute class id style title Value class_rule orstyle_rule id_name style_definition tooltip_text Description The class of the element. Used to specify a class in the style sheet. A unique id for the element. Used with CSS or JavaScript An inline style definition A text to display in a tool tip These tags and attributes should be avoided: Tags <center> <font> and <basefont> <s> and <strikeout> <u> Description Defines centered content Defines HTML fonts Defines strikeout text Defines underlined text Attributes align bgcolor color Defines the alignment of text Defines the background color Defines the text color For all the above: Use styles instead. Alt attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers. Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation Why XHTML? We have reached a point where many pages on the WWW contain "bad" HTML. The following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules: <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body> XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents. XML was designed to describe data and HTML was designed to display data. Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones or other small devices. The last-mentioned do not have the resources or power to interpret a "bad" markup language. Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML. The Most Important Differences: XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element Some More XHTML Syntax Rules Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD defines mandatory elements Attribute Minimization Is Forbidden This is wrong: <input checked> <input readonly> <input disabled> <option selected> <frame noresize> This is correct: <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" /> Here is a list of the minimized attributes in HTML and how they should be written in XHTML: HTML compact checked declare readonly disabled selected defer ismap nohref noshade nowrap multiple noresize XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize" The id Attribute Replaces The name Attribute HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead. This is wrong: <img src="picture.gif" name="picture1" /> This is correct: <img src="picture.gif" id="picture1" /> Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this: <img src="picture.gif" id="picture1" name="picture1" /> IMPORTANT Compatibility Note: To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol. The Lang Attribute The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, you must add the xml:lang attribute, like this: <div lang="no" xml:lang="no">Heia Norge!</div> Mandatory XHTML Elements All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element. This is a minimum XHTML document template: <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> </body> </html> Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag. You will learn more about the XHTML document type definition in the next chapter. <!DOCTYPE> Is Mandatory An XHTML document consists of three main parts: the DOCTYPE declaration the <head> section the <body> section The basic document structure is: <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html> Note: The DOCTYPE declaration is always the first line in an XHTML document! An XHTML Example This is a simple (minimal) XHTML document: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html> The DOCTYPE declaration above defines the document type. The rest of the document looks like HTML. Document Type Definitions (DTD) A DTD specifies the syntax of a web page in SGML DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup There are three XHTML DTDs: STRICT TRANSITIONAL FRAMESET Empty Tags: <hr> , <br> and <img> Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />. A general "find-and-replace" function was executed to swap the tags. We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually. Now You Know XHTML, What's Next? The next step is to learn CSS and JavaScript. CSS CSS is used to control the style and layout of multiple Web pages all at once. With CSS, all formatting can be removed from the HTML document and stored in a separate file. CSS gives you total control of the layout, without messing up the document content. To learn how to create style sheets, please visit our CSS tutorial. JavaScript JavaScript can make your web site more dynamic. A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction. JavaScript is the most popular scripting language on the internet and it works with all major browsers. If you want to learn more about JavaScript, please visit our JavaScript tutorial.
