HTML Web Programming
HTML “Hypertext Markup Language” Method of describing the format of documents Documents are displayed on web browser HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
Purpose of Web browser is to read HTML document and to display them as web pages Browser does not display the HTML tags, but uses the tags to interpret the content of the page
HTML Tags “<tagname>content</tagname>” HTML tags are keywords (tag names) 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 The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags “<tagname>content</tagname>”
HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing An HTML element is everything between the start tag and the end tag, including the tags
Web page consists of two parts head body Head contains information about the page Body contain material that is seen when page is viewed head and body tags, are located inside what can be called the "ultimate container tags“ <html> </html>
Examples <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
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"
HTML Links HTML links are defined with the <a> tag. Example <a href="http://www.w3schools.com">This is a link</a> Note: The link address is specified in the href attribute.
HTML Images HTML images are defined with the <img> tag. Example <img src=“1.jpg" width="104" height="142"> Note: The filename and the size of the image are provided as attributes.
HTML Line Breaks Use the <br> tag if you want a line break (a new line) without starting a new paragraph: Example <p>This is<br>a para<br>graph with line breaks</p>
HTML Text Formatting Tags <b>Defines bold text <em>Defines emphasized text <i>Defines a part of text in an alternate voice or mood <small>Defines smaller text <strong>Defines important text <sub>Defines subscripted text <sup>Defines superscripted text <ins>Defines inserted text <del>Defines deleted text
Example <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
Examples <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> </body> </html>
<abbr>Defines an abbreviation or acronym <html> <body> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p> <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p> </body> </html>
Formatting tags Text direction How to change the text direction. <bdo> Quotations How to handle long and short quotations. <blockquote>,<q> Deleted and inserted text How to mark deleted and inserted text. <ins>,<del>
HTML Links An image as a link How to use an image as a link. Link to a location on the same page How to link to a bookmark. Create a mailto link How to link to a mail message (will only work if you have mail installed). Create a mailto link 2 Another mailto link.
HTML <a> target Attribute The target attribute specifies where to open the linked document. <a target="_blank|_self|_parent|_top|framename"> Attribute Values _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window framename Opens the linked document in a named frame
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 following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
The HTML <title> Element The <title> tag defines the title of the document. The <title> element is required in all HTML documents. defines a title in the browser toolbar provides a title for the page when it is added to favourites displays a title for the page in search-engine results
The HTML <base> Element The <base> tag specifies the base URL/target for all relative URLs in a page Eg: <head> <base href="http://www.w3schools.com/images/" target="_blank"> </head>
The HTML <link> Element The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets: Eg: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
The HTML <style> Element The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser: Eg: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
The HTML <meta> Element Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The HTML <meta> Element The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always goes inside the <head> element. The HTML <script> Element The <script> tag is used to define a client-side script, such as a JavaScript.
Styling HTML with CSS CSS was introduced to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section External - using an external CSS file
HTML Style Example - Background Color The background-color property defines the background color for an element: Example <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
Font, Color and Size <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font- size:20px;">A paragraph.</p> </body> </html>
HTML Style Example - Text Alignment he text-align property specifies the horizontal alignment of text in an element. Example <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>
<noscript> tag The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript> element can be used in both <head> and <body>. The content inside the <noscript> element will be displayed if scripts are not supported, or are disabled in the user’s browser.
Float an image to left or right Let an image float to the left and to the right <html> <body> <p> <img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text. </p> <img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text. <p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p> </body> </html>
Aligning images <html> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p> <h4>Image with align="middle":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p> <h4>Image with align="top":</h4> <p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p> <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p> </body> </html>
Create an image map How to create an image map, with clickable regions. Each region is a hyperlink. <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"> </map> </body> </html>
HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
HTML Table Headers Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
HTML Table Table with a caption How to add a caption to a table. Use <caption> Table cells that span more than one row/column How to define table cells that span more than one row or one column. Tags inside a table How to display elements inside other elements. Cell padding How to use cell padding to create more white space between the cell content and its borders. Cell spacing How to use cell spacing to increase the distance between the cells.
HTML Table The <colgroup> tag specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <thead> tag is used to group header content in an HTML table. The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).
HTML Lists The most common HTML lists are ordered and unordered lists HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles).
HTML Lists HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.
HTML Lists HTML Description Lists A description list is a list of terms/names, with a description of each term/name. The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> Nested List
The HTML <div> Element The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.
The HTML <span> Element The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document.
HTML Layouts - Using <div> Elements The div element is a block level element used for grouping HTML elements.
HTML Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. <form> . input elements . </form>
HTML Forms Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
HTML Forms Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form>
HTML Forms Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
HTML Forms Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
HTML Forms Submit Button <input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action=“C:/Users/user/Desktop/HTML code Egs/1.html" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
HTML Forms Fieldset & Legend tags The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements. The <legend> tag defines a caption for the <fieldset> element.
HTML Iframes An iframe is used to display a web page within a web page. Syntax for adding an iframe: <iframe src="URL"></iframe> <iframe src="C:/Users/user/Desktop/HTML code Egs/sun.html" name="iframe_a"></iframe> <p><a href=" C:/Users/user/Desktop/HTML code Egs/1.html"target="iframe_a">Sample</a></p>
The HTML <script> Tag The <script> tag is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements or it points to an external script file through the src attribute. <script> document.write("Hello World!") </script>