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 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 browser (like Internet Explorer or Firefox) 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 Tags A tag is coded HTML command that indicates how part of web page will be displayed. 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 Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ Example <a href = "http://www.w3schools.com">This is a link</a>
HTML Document Structure <head> <title> Document Title </Title> </head> <body> Statements for body of web page </body> </html>
HTML writing Tools we use a plain text editor (like Notepad) to edit HTML. To View HTML Document we can use any web browser. However, professional web developers often prefer HTML editors like FrontPage or Dream weaver, instead of writing plain text. HTM or .HTML File Extension? When you save an HTML file, you can use either the .htm or the .html file extension. We use .htm in our examples. It is a habit from the past, when the software only allowed three letters in file extensions.
HTML Elements An HTML element is everything from the start tag to the end tag: Example Container Element <p>This is my first paragraph.</p> Empty Element <br>
HTML Tag Structure HTML tags are keywords surrounded by angle brackets like <html> Example <a href = "http://www.w3schools.com">This is a link</a>
The HTML head Element 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 HTML title Element The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. <html> <head> <title>Title of the document</title> </head> </html>
HTML <body> Tag Definition and Usage 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.
Body Tag’s Attributes Attribute Value Description alink #xxxxxx colorname Specifies the color of an active link in a document background URL Specifies a background image for a document bgcolor Specifies the background color of a document link Specifies the default color of unvisited links in a document text Specifies the color of the text in a document vlink Specifies the color of the visited links in a document
Body Tag Example <html> <head> <title>My first HTML page</title> </head> <body bgcolor=“red”> <p>The content of the body element is displayed in the browser.</p> <p>The content of the title element is displayed in the browser's title.</p> </body> </html>
HTML Headings HTML headings are defined with the <h1> to <h6> tags. <html> <body> <h1 align =“Center:>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body> </html> Attribute Value Description align Left Center Right justify Specifies the alignment of a heading
HTML Paragraphs HTML paragraphs are defined with the <p> tag. Attribute Align : Left,Center,Right <html> <body> <p>This is a paragraph.</p> </body> </html>
HTML <br> Tag The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag. <html> <body> <p> To break<br />lines<br />in a<br />paragraph,<br />use the br element. </p> </body> </html>
HTML <font> Tag Definition and Usage The <font> tag specifies the font face, font size, and font color of text. Attribute Value Description color #xxxxxx colorname Specifies the default color for text in a document face font_family Specifies the default font for text in a document size number Specifies the default size of text in a document
HTML Font Tag <html> <body> <p><font size="3" color="red">This is some text!</font></p> <p><font size="2" color="blue">This is some text!</font></p> <p><font face="verdana" color="green">This is some text!</font></p> </body> </html>
HTML <hr> Tag The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an HTML page. <html> <body> <p>This is some text.</p> <hr /> </body> </html>
HTML <hr> Tag Attribute Value Description align Left Center Right Specifies the alignment of a hr element noshade Specifies that a hr element should render in one solid color (noshaded), instead of a shaded color size pixels Specifies the height of a hr element width Pixels Specifies the width of a hr element
HTML <!--...--> Tag 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.
HTML <table> Tag The <table> tag defines an HTML 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.
Attributes of Table Tag Value Description align left center right Deprecated. Use styles instead. Specifies the alignment of a table according to surrounding text bgcolor #xxxxxx colorname Deprecated. Use styles instead. Specifies the background color for a table border pixels Specifies the width of the borders around a table cellpadding Specifies the space between the cell wall and the cell content cellspacing Specifies the space between cells width pixels % Specifies the width of a table
Example of Table Tag <html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <td>January</td> <td>$100</td> </table> </body> </html>
HTML <ol> Tag Definition and Usage The <ol> tag is used to create an ordered list. Example <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Attributes of OL Tag Attribute Value Description compact Specifies that the list should render smaller than normal start number Specifies the start point in a list type 1 A a I i Specifies which kind of bullet points will be used
HTML <ul> Tag Definition and Usage The <ul> tag defines an unordered list (a bulleted list). Exapmle <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Attributes of UL Tag Attribute Value Description compact Specifies that the list should render smaller than normal type disc square circle Specifies the style of the bullet points of the list items
HTML <form> Tag Definition and Usage The <form> tag is used to create an HTML form for user input. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select menus, textarea, fieldset, legend, and label elements. Forms are used to pass data to a server.
Attributes of FORM Tag Attribute Value Description action URL Specifies where to send the form-data when a form is submitted method get post Specifies how to send form-data name Specifies the name for a form target _blank _self _parent Deprecated. Specifies where to open the action URL
HTML <input> Tag The <input> tag is used to select user information. An input field can vary in many ways, depending on the type attribute. An input field can be a text field, a checkbox, a password field, a radio button, a button, and more.
Attributes of Input Tag Value Description align left right top middle bottom Deprecated. Use styles instead. Specifies the alignment of an image input (only for type="image") name Specifies a name for an input element size number Specifies the width of an input field src URL Specifies the URL to an image to display as a submit button type button checkbox image password radio submit text Specifies the type of an input element value Specifies the value of an input element
Example of FORM Tag <html> <body> <form action="form_action.asp"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> <p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p> </body> </html>
Introduction to XML XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C Recommendation
The Difference Between XML and HTML XML is not a replacement for HTML. XML is a complement to HTML. It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looks HTML is about displaying information, while XML is about carrying information.
Example OF XML <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
Example OF XML <food> <name>Belgian Waffles</name> <price>$5.95</price> <calories>650</calories> </food>