Downloaded 64 times
Uploaded byNisa Soomro
Html
This document provides an overview of HTML topics that will be covered in lectures 4, 5, and 6 of a web programming course. It discusses HTML, HTML forms, common HTML tags and their purposes, text formatting tags, images, links, tables, lists, and forms. It also covers iframes, framesets, block and inline elements, the <div> and <span> tags, layouts, and buttons. The document serves as an outline of key HTML concepts and elements that will be explored in more depth during the lectures.
More Related Content
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...](https://cdn.slidesharecdn.com/ss_thumbnails/md-craftingimmersiveuiwithe2eandagslshaderveronicaputrianggraini-251124030840-0c677f44-thumbnail.jpg?width=640&height=640&fit=bounds)
Html
- 1. Web Programming LEC #4, 5, 6
- 2.
- 3. 3 HTML What is HTML? HTMLis a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages
- 4. 4 HTML Tags HTML markuptags are usually called HTML tags 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>
- 5. 5 HTML Headings <h1>This isheading 1 - 24 points</h1> <h2>This is heading 2- 18 points </h2> <h3>This is heading 3- 14 points </h3> <h4>This is heading 4- 12 points </h4> <h5>This is heading 5- 10 points </h5> <h6>This is heading 6- 08 points</h6>
- 6. 6 HTML <p> and<pre> tag Tag Purpose <pre> Defines preformatted text <p> Define paragraph <p>This is some text in a paragraph.</p> Align= left, right, center, justify
- 7. 7 HTML Text Formatting Tag Purpose <b>and <strong> To Bold Text <i> and <em> To italic Text <sup> Defines subscripted text <sup> Defines superscripted text <small> Defines smaller text <big> Defines bigger text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text
- 8. 8 HTML Comments The commenttag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. <!-- Comments here -->
- 9. 9 HTML Images In HTML,images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only , and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text">
- 10. 10 HTML Images Cont.… <imgborder="2" src="WTH.jpg" alt=" Road map " width="304" height="228" title="Hello"> Attribute Purpose 1 Border Define the border around the image 2 Src Defines the path of image 3 Width Defines the width of image 4 Height Defines the height of image 5 Title Defines the tool tip 6 Alt Specifies extra information about an element 7 hspace Specifies the whitespace on left and right side of an image 8 Vspace specifies the whitespace on top and bottom of an image
- 11. 11 HTML Font The <font>tag specifies the font face, font size, and font color of text. Attribute Purpose Color Defines the color of text. Values can be defined in the form of RGB code, name of color Size Size of the font Face Family of the font <p> <font size="3" color="red" face="Times New Roman" > This is some text!</font></p>
- 12. 12 HTML Tables Tables aredefined 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.
- 13. 13 HTML Tables Cont.… Tag Purpose <table> Definesa Table <th> Define Table Heading <tr> Defines table Row <td> Defines Table data <caption> Defines Caption of the Table
- 14. 14 HTML Tables Cont.… Attribute Purpose Align Toalign the contents ( left, center, right) Border Create border Cellpadding create more white space between the cell content and its borders. Cellspacing increase the distance between the cells.
- 15. 15 HTML Lists Type ofLists are Ordered List ( <ol> ) Un- Ordered List ( <ul> ) Description List ( <dl> ) Ordered list uses the numbers Unordered list uses the Built A description list is a list of terms/names, with a description of each term/name.
- 16. 16 HTML Ordered List Anordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. <ol> <li> CPU</li> <li> RAM </li> <li> USB </li> <li> Laptop </li> </ol>
- 17. 17 HTML Ordered ListCont.… By Default its numbered list. If we want to changes its default type of list we can do it via Type attribute: <ol type= "A"> <li> CPU</li> <li> RAM </li> <li> USB </li> <li> Laptop </li> </ol>
- 18. 18 HTML Un OrderedList An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. It have three types Disc Circle Square By default un-ordered list is Disc type
- 19. 19 HTML Description Lists Adescription 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) <dd> (describes each term/name):
- 20. 20 Description Lists Example <dl> <dt>Coffee</dt> <dd>-black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
- 21. 21 HTML Hyperlinks (Links) TheHTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. 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
- 22. HTML Links -The id / name Attribute The id attribute can be used to create a bookmark inside an HTML document. Tip: Bookmarks are not displayed in any special way. They are invisible to the reader. An anchor with an id inside an HTML document: <a id="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a> 22
- 23. HTML Links -The id / name Attribute 23 Or, create a link to the "Useful Tips Section" from another page: <a href="html_links.htm#tips"> Visit the Useful Tips Section</a>
- 24. 24 HTML Link Opens specifiedlink on another window. <a href="http://www.w3schools.com" target="_blank"> Visit W3Schools.com! </a>
- 25. 25 Image as Link <ahref="default.asp"> <img src=“image.gif" alt="HTML tutorial" width="42" height="42"> </a>
- 26. 26 HTML Iframes (inline Frames) An iframe is used to display a web page within a web page. Syntax for adding an iframe: <iframe src="URL"></iframe> Iframe - Set Height and Width The height and width attributes are used to specify the height and width of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
- 27. 27 HTML Iframes <iframe src="demo_iframe.htm"width="200" height="200“></iframe> Iframe - Remove the Border <iframe src="demo_iframe.htm" frameborder="0"></iframe>
- 28. 28 Use iframe asa Target for a Link <iframe src="demo_iframe.htm“ name="iframe_a"> </iframe> <p> <a href=http://www.w3schools.com target="iframe_a">W3Schools.com</a> </p>
- 29. 29 HTML <frameset> Tag 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.
- 30. 30 HTML <frameset> Tag 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. Attribute Purpose Rows Specifies the number and size of columns in a frameset (%, pixels, *) Cols Specifies the number and size of rows in a frameset (%, pixels, *)
- 31. 31 Example of Frameset <framesetrows="25%,*,25%"> <frameset cols="25%,*,25%"> <frame src="headings.html"> <frame src="headings.html"> <frame src="Tables.html"> <frame src="Tables.html"> <frame src="textFormating.html"> <frame src="textFormating.html"> </frameset> </frameset>
- 32. 32 Block and inlineElements Most HTML elements are defined as block level elements inline elements. Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table>, <div>
- 33. 33 HTML Inline Elements Inlineelements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img>, <span>
- 34. 34 The HTML <div>Element The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. 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. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.
- 35. 35 The HTML <div>Element Cont.… 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. Tip: The <div> element is very often used together with CSS, to layout a web page. Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.
- 36. 36 The HTML <span>Element The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
- 37. 37 HTML Layouts Web pagelayout is very important to make your website look good. Design your webpage layout very carefully.
- 38. 38 HTML Forms HTML Formsare used to select different kinds of user input. 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>
- 39. 39 HTML Forms -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.
- 40. 40 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>
- 41. 41 Password Field <input type="password">defines a password field: <form> Password: <input type="password" name="pwd"> </form> Note: The characters in a password field are masked (shown as asterisks or circles).
- 42. 42 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=“choice" value=“yes“ checked=“checked”>Yes <br> <input type="radio" name=“choice" value=“no">No </form> Checked attributed defines that control is preselected when page load.
- 43. 43 Checkboxes <input type="checkbox"> definesa 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>
- 44. 44 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.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
- 45. 45 Reset Button Button usedto clear all the field of form in which reset button defined. <input type=“reset" value=“Clear">
- 46. 46 HTML <button> Tag The<button> tag defines a clickable button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element. Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
- 47. 47 HTML <textarea> Tag The<textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
- 48. 48 HTML <textarea> Tag Attribute Purpose Name Specifiesa name for a text area Cols Specifies the visible width of a text area Rows Specifies the visible number of lines in a text area Disabled Specifies that a text area should be disabled
- 49. 49 HTML <select> Tag The<select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. Tips and Notes Tip: The <select> element is a form control and can be used in a form to collect user input.
- 50. 50 HTML <select> Tag <selectmultiple size=“2”> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> Note: Multiple shows that you can select more than one item from the drop down menu. Size shows number of visible items in a list.
- 51.