Html (1)
- 2. HTML • HTML is a markup language for describing web documents (web pages). • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content
- 3. • Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on a webpage are called Hypertext. • As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display.
- 4. SMALL HTML DOCUMENT • <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 5. • The text between <html> and </html> describes an HTML document • The text between <head> and </head> provides information about the document • The text between <title> and </title> provides a title for the document • The text between <body> and </body> describes the visible page content • The text between <h1> and </h1> describes a heading • The text between <p> and </p> describes a paragraph
- 6. • HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets: • <tagname>content</tagname> • HTML tags normally come in pairs like <p> and </p> • 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, but with a slash before the tag name • The start tag is often called the opening tag. The end tag is often called the closing tag.
- 7. HTML Page Structure Below is a visualization of an HTML page structure:
- 8. HTML BASICS • HTML Headings • HTML headings are defined with the <h1> to <h6> tags. <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> OutPut This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6
- 9. • HTML Paragraphs • HTML paragraphs are defined with the <p> tag. <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
- 10. HTML Special characters Character Entity reference < < > > & & “ " ‘ &apos © © ñ ñ α &alpha &forall
- 11. • 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"
- 12. HTML-Relative URLs • HTML Links • HTML links are defined with the <a> tag. <html> <body> <a href="http://www.yahoo.com"> This is a link</a> </body> </html> • The link address is specified in the href attribute. • Attributes are used to provide additional information about HTML elements. • HTML Links - The target Attribute • The target attribute specifies where to open the linked document.
- 14. HTML-Relative URLs • HTML Images • HTML images are defined with the <img> tag. <html> <body> <img src=“x.jpg" width="104" height="142"></body> </html> The alt attribute specifies an alternate text for an image, if the image cannot be displayed. <img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
- 15. HTML <html> <body> <p>This is<br>a para<br>graph with line breaks</p> </body> </html> Output This is a para graph with line breaks
- 16. • HTML Styling • Every HTML element has a default style (background color is white and text color is black). • Changing the default style of an HTML element, can be done with the style attribute. • This example changes the default background color from white to lightgrey: • Example • <body style="background-color:lightgrey"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> • style="property:value"
- 17. • HTML Text Color • The color property defines the text color to be used for an HTML element: • Example • <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph.</p>
- 18. • HTML Text Size • The font-size property defines the text size to be used for an HTML element: • Example • <h1 style="font-size:300%">This is a heading</h1> <p style="font-size:160%">This is a paragraph.</p>
- 19. • HTML Text Alignment • The text-align property defines the horizontal text alignment for an HTML element: • Example • <h1 style="text-align:center">Centered Heading</h1> <p>This is a paragraph.</p>
- 20. • HTML Fonts • The font-family property defines the font to be used for an HTML element: • Example • <h1 style="font-family:verdana">This is a heading</h1> <p style="font-family:courier">This is a paragraph.</p>
- 21. HTML formatting tag • The <pre> tag defines preformatted text. • Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. <html> <body> <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> </body> </html> Tip: Use the <pre> element when displaying text with unusual formatting, or some sort of computer code.
- 22. HTML • <b> Defines bold text • <em> Defines emphasized text • <i> Defines a part of text in an alternate voice • <small> Defines smaller text • <strong> Defines important text • <sub> Defines subscripted text • <sup> Defines superscripted text • <ins> Defines inserted text • <del> Defines deleted text Often <strong> renders as <b>, and <em> renders as <i>. Coding <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> Output My favorite color is blue red!
- 23. HTML formatting tag • HTML also defines special elements, for defining text with a special meaning. • HTML uses elements like <b> and <i> for formatting output, like bold or italic text. • Formatting elements were designed to display special types of text: • Bold text • Important text • Italic text • Emphasized text • Marked text • Small text • Deleted text • Inserted text • Subscripts • Superscripts
- 24. HTML Font Style Elements Element Font Used for Content B Boldface I Italic Tt Monospace(“teletype:fixed-width font) Big Increased font size small Decreased font size
- 25. <html> <body> <h2>HTML <mark>Marked</mark> Formatting</h2> <p><b>This text is bold</b></p> <p>My favorite color is <del>blue</del> red.</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>
- 26. Output
- 27. HTML formatting tags • 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> <body> <p>My mother has <span style="color:blue;font- weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p> </body> </html> Output My mother has blue eyes and my father has dark green eyes.
- 28. HTML formatting Tags The <tt> tag defines teletype text. <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><tt>This text is teletype text.</tt></p> </body> </html>
- 29. HTML5 is the fifth version of HTML. Many elements are removed or modified from HTML5.
- 31. There are many HTML elements which have been modified or removed from HTML5. Some of them are listed below: Element In HTML5 <applet> Changed to <object> <acronym> Changed to <abbr> <dir> Changed to <ul> <frameset> Removed <frame> Removed <noframes> Removed <strike> No new tag. CSS is used for this <big> No new tag. CSS is used for this <basefont> No new tag. CSS is used for this <font> No new tag. CSS is used for this <center> No new tag. CSS is used for this <tt> No new tag. CSS is used for this
- 32. • Many new elements are added in HTML5 like nav, audio, figcaption, progress, command, time, datalist, video, figure, meter, data, section, time, aside, canvas, summary, rp, rt, details, wbr, header, footer, keygen, embed, article, hgroup, bdi, mark, output, source, track, section, ruby and many more.
- 34. 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 • How the HTML code above looks in a browser: Row1,cell1 Row1,cell2 Row2,cell1 Row2,cell2
- 35. HTML-TABLES HTML Tables and the Border Attribute <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, 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> Output: Header 1 Header2 Row1,cell1 Row1,cell2 Row2,cell1 Row2,cell2
- 36. • Cell padding specifies the space between the cell content and its borders. • The <caption> tag must be inserted immediately after the <table> tag. • The cellspacing attribute specifies the space, in pixels, between cells. • Border spacing specifies the space between the cells.
- 38. HTML Styles - CSS • CSS stands for Cascading Style Sheets. • CSS saves a lot of work. • It can control the layout of multiple web pages all at once. • Cascading Style Sheets (CSS) is used to format the layout of a webpage. • With CSS, control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more
- 39. • CSS can be added to HTML documents in 3 ways: • Inline - by using the style attribute inside HTML elements • Internal - by using a <style> element in the <head> section • External - by using a <link> element to link to an external CSS file • The most common way to add CSS, is to keep the styles in external CSS files.
- 40. Inline CSS • An inline CSS is used to apply a unique style to a single HTML element. • An inline CSS uses the style attribute of an HTML element. • The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red: • <h1 style="color:blue;">A Blue Heading</h1> <p style="color:red;">A red paragraph.</p>
- 41. Internal CSS • An internal CSS is used to define a style for a single HTML page. • An internal CSS is defined in the <head> section of an HTML page, within a <style> element. • The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. • In addition, the page will be displayed with a "powderblue" background color:
- 42. • <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- 43. External CSS • An external style sheet is used to define the style for many HTML pages. • To use an external style sheet, add a link to it in the <head> section of each HTML page: • <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
- 44. • The external style sheet can be written in any text editor. • The file must not contain any HTML code, and must be saved with a .css extension. • Here is what the "styles.css" file looks like: • "styles.css": • body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
- 45. • To add borders, use the CSS border property: • table, th, td { border: 1px solid black; } • table, th, td { border: 1px solid black; border-collapse: collapse; } • the borders to collapse into one border, add CSS border-collapse:
- 46. • table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } • table { border-spacing: 5px; } • th { text-align: left; }
- 47. HTML Tables-cell spacing • The cellspacing attribute specifies the space, in pixels, between cells. • cellpadding attribute, which specifies the space between the cell wall and the cell content. <html> <body> <p>Table without cellspacing:</p> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with cellspacing:</p> <table border="1" cellspacing="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
- 48. HTML Tables-CellPadding <html> <body> <p>Table without cellpadding:</p> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with cellpadding:</p> <table border="1" cellpadding="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html> Pixels= The space between the cell wall and the cell content
- 49. Table with rowspan and colspan <<html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
- 53. Table with Caption <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html>
- 55. HTML-LIST • 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). <ul> <li>Coffee</li> <li>Milk</li> </ul> How the HTML code above looks in a browser: • Coffee • Milk • 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. <ol> <li>Coffee</li> <li>Milk</li> </ol> • How the HTML code above looks in a browser: 1.Coffee 2.Milk
- 58. HTML-Nested List A List can be nested. <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
- 59. HTML LIST-Definition • The <dl> tag defines a definition list. • The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list). <html> <body> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html> Output:
- 60. HTML-FORMS • 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. • The <form> tag is used to create an HTML form: • <form> . input elements . </form>
- 61. HTML Form Tags Element Type Attribute Control Input Text Text input Input Password Password input Input Checkbox Checkbox Input Radio Radio button Input Submit Submit button Input Image Graphical submit button Input Reset Reset button Input Button Push button(for use with scripts) Input Hidden Nondisplayed control(stores server- supplied information) Input File File select Button Submit Submit button with content(not an empty element) Button Reset Cancel button with content(not an empty element) Button Button Button with content but no predefined action
- 62. HTML form Tags <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop- down list <option> Defines an option in a drop-down list <button> Defines a clickable button
- 63. HTML Forms - The Input Element • The most important form element is the <input> element. • The <input> element is used to select user information. • An <input> element can vary in many ways, depending on the type attribute. • An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. • The most common input types are described below. Text Fields <input type="text"> defines a one-line input field that a user can enter text into:
- 64. • <html> • <body> • <form> • First name:<br> • <input type="text" name="firstname"> • <br> • Last name:<br> • <input type="text" name="lastname"> • </form> • <p>Note that the form itself is not visible.</p> • <p>Also note that the default width of a text field is 20 characters.</p> • </body> • </html>
- 66. Password Field • <input type="password"> defines a password field: • <form> Password: <input type="password" name="pwd"> </form> 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“ checked >Male<br> <input type="radio" name="sex" value="female">Female </form> 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>
- 67. 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="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
- 68. • <input type="submit"> defines a button for submitting a form to a form-handler. • The form-handler is typically a server page with a script for processing input data. • The form-handler is specified in the form's action attribute:
- 69. • The Action Attribute • The action attribute defines the action to be performed when the form is submitted. • The common way to submit a form to a server, is by using a submit button. • Normally, the form is submitted to a web page on a web server. • In the example above, a server-side script is specified to handle the submitted form: • <form action="action_page.php"> • If the action attribute is omitted, the action is set to the current page.
- 70. • <!DOCTYPE html> • <html> • <body> • <form action="action_page.php"> • First name:<br> • <input type="text" name="firstname" value="Mickey"> • <br> • Last name:<br> • <input type="text" name="lastname" value="Mouse"> • <br><br> • <input type="submit" value="Submit"> • </form> • <p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p> • </body> • </html>
- 73. • The Method Attribute • The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms: • <form action="action_page.php" method="GET"> • or: • <form action="action_page.php" method="POST">
- 74. • If the form submission is passive (like a search engine query), and without sensitive information. • GET is best suited to short amounts of data. Size limitations are set in your browser. • action_page.php?firstname=Mickey&lastnam e=Mouse
- 75. • If the form is updating data, or includes sensitive information (password). • POST offers better security because the submitted data is not visible in the page address.
- 76. • The Name Attribute • To be submitted correctly, each input field must have a name attribute. • This example will only submit the "Last name" input field: • <form action="action_page.php"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
- 77. HTML forms-Lables <form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br> <input type="submit" value="Submit"> </form>
- 78. HTML <html> <body> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body> </html>
- 79. HTML <html> <body> <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea> </body> </html> Output At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
- 80. HTML <html> <body> <button type="button" onclick="alert('Hello world!')">Click Me!</button> </body> </html> Output Click Me!
- 81. <html> <body> <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form> </body> </html> OutPut Name: Email: Date of birth: Personalia
- 82. HTML-optgroup <html> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> </body> </html>
- 83. HTML Forms <html> <body> <form > Username: <input type="text" name="usrname"><br> <input type="submit" value="Submit"> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car"> I have a car Select a file: <input type="file" name="img"> <input type="hidden" name="country" value="Norway"> <input type="image" src=“rose.jpg " alt="Submit"> </form> </body> </html>
- 84. HTML FRAMES • HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. • A collection of frames in the browser window is known as a frameset. • The window is divided into frames in a similar way the tables are organized: into rows and columns.
- 85. HTML-Frames • The <frameset> tag defines a frameset. • The <frameset> element holds one or more <frame> elements. • Each <frame> element can hold a separate document. • The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. cols (pixels,%,*) Specifies the number and size of columns in a frameset rows (pixels,%,* ) Specifies the number and size of rows in a frameset
- 86. HTML Frames <html> <frameset cols="25%,*,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
- 87. HTML Frames <html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html>
- 90. FRAME ATTRIBUTES •<frame scrolling="auto|yes|no"> •<frame src="URL"> •<frame noresize="noresize"> The frame cannot be resized by the user •<frame name="text"> text - Specifies the name of the frame •<frame marginwidth="pixels"> pixels -pecifies the left and right margins of a frame •<frame marginheight="pixels"> - The marginheight attribute specifies the height between the content and the top and bottom of the frame, in pixels. •<frame frameborder="1|0">