This action might not be possible to undo. Are you sure you want to continue?
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 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
DTD (Document Type Declaration): indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Start tag DT D
Basic Tags <!DOCTYPE> Defines the document type The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. <html> Defines an html document The <html> tag tells the browser that this is an HTML document. The html element is the outermost element in HTML and XHTML documents. The html element is also known as the root element. <body> Defines the body element The body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. <h1> to <h6> Defines header 1 to header 6 The <h1> to <h6> tags are used to define HTML headings. <h1> defines the largest heading and <h6> defines the smallest heading. <p> Defines a paragraph The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet. STF STF STF STF
To change the paragraph alignment, use the tag, <P ALIGN=”Left, Right, Center, or Justify”>. Justify aligns the text on both the left and the right.
Inserts a single line break The <br> tag is an empty tag which means that it has no end tag. Defines a horizontal rule The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an HTML page.
Defines a comment The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside scripts and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text.
Character Format <b> <font> <i> <em> <big> <strong> <small> <sup> Defines bold text Deprecated. Defines text font, size, and color Defines italic text Defines emphasized text Defines big text Defines strong text Defines small text Defines superscripted text The <sup> tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like WWW. Defines subscripted text The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O. Defines the direction of text display bdo stand for bidirectional override. The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm. Deprecated. Defines underlined text STF TF STF STF STF STF STF STF
<u> Output <pre>
Defines preformatted text
<code> <tt> <kbd> <var> <dfn> <samp> <xmp> Blocks <acronym>
Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
STF STF STF STF STF STF STF TF
Defines computer code text Defines teletype text Defines keyboard text Defines a variable Defines a definition term Defines sample computer code Deprecated. Defines preformatted text
Defines an acronym An acronym can be spoken as if it were a word, example NATO, NASA, ASAP, GUI. By marking up acronyms you can give useful information to browsers, spellcheckers, screen readers, translation systems and search-engines.
Defines an abbreviation By marking up abbreviations you can give useful information to browsers, spellcheckers, screen readers, translation systems and search-engines. Defines an address element The <address> tag is used to mark up contact information for the author or owner of the document. This way, the reader is able to contact the document's owner. Defines a long quotation
<center> <q> <cite> <ins> <del> <s> <strike> Links <a>
A browser inserts white space before and after a blockquote element. It also insert margins for the blockquote element.
Deprecated. Defines centered text Use the Align attribute. Defines a short quotation The browser will insert quotation marks around the quotation. Defines a citation Defines inserted text Defines deleted text Text is crossed out. Deprecated. Defines strikethrough text Deprecated. Defines strikethrough text
TF STF STF STF STF TF TF
Defines an anchor The <a> tag defines an anchor. An anchor can be used in two ways: 1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the name attribute The a element is usually referred to as a link or a hyperlink. The most important attribute of the a element is the href attribute, which indicates the link’s destination. By default, links will appear as follows in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red Defines a resource reference
<link> Frames <frame> <frameset> <noframes> <iframe> Input <form> <input> <textarea> <button> <select> <optgroup>
Defines a sub window (a frame) Defines a set of frames Defines a noframe section Defines an inline sub window (frame)
F F STF STF
Defines a form Defines an input field Defines a text area Defines a push button Defines a selectable list The <select> tag is used to create a select list (drop-down list). Defines an option group
STF STF STF STF STF STF
The <optgroup> tag is used to group together related options in a select list. If you have a long list of options, groups of related options are easier to handle for the user. <option> <label> <fieldset> <legend> <isindex> Lists <ul> Defines an unordered list Defines an item in a list box The <option> tags inside the select element define the available options in the list. Defines a label for a form control Defines a fieldset Defines a title in a fieldset Deprecated. Defines a single-line input field STF STF STF STF TF
The <ul> tag defines an unordered list (a bulleted list). The list can be changed to a different bullet style. Enter TYPE=”?” within the <UL> tag, replacing ? with a bullet style code: ➢ Circle ➢ Disc ➢ Square The list can be changed to a different number style. Enter TYPE=”?” within the <ol> tag, replacing ? with a number style code: ➢ A: A, B, C ➢ a: a, b ,c ➢ I: I, II, III ➢ i: i, ii, iii ➢ 1: 1, 2, 3 The <li> tag is used in both ordered (<ol>) and unordered (<ul>) lists. STF
Defines an ordered list
<li> <dir> <dl>
Defines a list item
STF TF STF STF STF TF
Deprecated. Defines a directory list Defines a definition list
<dt> <dd> <menu> Images <img> <map> <area> Tables <table>
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list).
Defines a definition term Defines a definition description Deprecated. Defines a menu list
Defines an image The <img> tag has two required attributes: src and alt. Defines an image map Defines an area inside an image map
STF STF STF
Defines a table A simple HTML table consists of the table element and one or more tr, th, and td elements. The tr element defines a table row, the th element defines a table header, and the td element defines a table cell.
A more complex HTML table may also include caption, col, colgroup, thead, tfoot, and tbody elements. <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup> Styles <style> <div> <span> Meta Info <head> Defines information about the document The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The <title> tag defines the title of the document, and is the only required element in the head section! <title> Defines the contents of the page and appears in the title bar of the Web browser The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The title element: STF Defines a style definition Defines a section in a document Defines a section in a document STF STF STF Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns Defines groups of table columns STF STF STF STF STF STF STF STF STF
• • •
defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
Defines the page description, author name, copyright information, and keywords. • Helps search engines categorize your page. • Always goes inside the <head> tag.
• • • •
The <meta name= “author” content=”My name”> tag details the author’s name. The <meta name= “description” content=”page description”> tag provides a description of the page. The <meta name=”keywords” content=”keywords”> tag gives search engines information to sort your website. The <meta name=”copyright” content=”information”> tag gives information regarding copyright.
<base> <basefont> Programming <script> <noscript> <applet> <object> <param>
Defines a base URL for all the links in a page
The <base> tag goes inside the head element.
Deprecated. Defines a base font
Defines a script Defines a noscript section Deprecated. Defines an applet Defines an embedded object Defines a parameter for an object
STF STF TF STF STF
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.