Full Stack Class in Marathahalli| AchieversIT

1. What is HTML?  HTML stands for Hyper Text Markup Language  HTML is the standard markup language for creating Web pages  HTML describes the structure of a Web page  HTML consists of a series of elements  HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. Difference between Html vs Html5 HTML  It didnt support audio and video without the use of flash player support.  It does not allow drag and drop effects.  Elements like nav, header were not present.

2.  Older version of HTML are less mobile-friendly. HTML5  It supports audio and video controls with the use of <audio> and <video> tags.  It allows drag and drop effects.  New element for web structure like nav, header, footer etc.  HTML5 language is more mobile-friendly. Basic Structure of HTML page: HTML Element: An HTML element is defined by a start tag, some content, and an end tag: <tagname> Content goes here... </tagname> The HTML element is everything from the start tag to the end tag: <h1>My First Heading</h1>

3. <p>My first paragraph.</p> HTML Attributes:  Attributes provide additional information about elements  Attributes are always specified in the start tag  Attributes usually come in name/value pairs like: name="value" Example: The href Attribute: <a href="https://www.w3schools.com">Visit W3Schools</a> The src and alt Attribute: <img src="img_girl.jpg" alt="Girl with a jacket">

4. HTML headings: HTML headings are titles or subtitles that you want to display on a webpage. ex: <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> HTML paragraphs: The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph. ex: <p>This is a paragraph.</p> <p>This is another paragraph.</p> The Poem Problem This poem will display on a single line: Example <p> My Bonnie lies over the ocean.

5. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> Solution - The HTML <pre> Element The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: Example: <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> <hr> tag: It provides a horizontal line Styles: -> Inline <h1 style="font-size:300%;color:red">This is a heading</h1> -> Internal <style></style> we use it inside the head tag -> External styles.css Classes and id: <h1>My <span class="note">Important</span> Heading</h1> <h1>My <span id="note">Important</span> Heading</h1> Formatting tags:

6. HTML Block and Inline Elements: Block-level Elements:  A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.  A block-level element always takes up the full width available (stretches out to the left and right as far as it can). ex: <h1>-<h6>,<header>,<hr>, <nav>, <p> Inline Elements: An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph. Example <span>Hello World</span>, <br>, <button>, <a> HTML Iframes:

7. An HTML iframe is used to display a web page within a web page. Syntax: <iframe src="url" title="description"></iframe> // we can set height and width as well <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> Iframe - Remove the Border By default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property: Example <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> HTML Semantic Elements: A semantic element clearly describes its meaning to both the browser and the developer. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content. HTML non-semantic Elements: A non-semantic element which does not describes any meaningfull information to the users. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. HTML Lists: Unordered HTML List:

8. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default: Example <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> // we can change the bullets of unordered list <ul style="list-style-type:disc;"> // circle, square, none <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Nested HTML Lists Lists can be nested (list inside list): Example <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li>

9. <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Ordered HTML List An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default: ex: <ol type='1'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Ordered HTML List - The Type Attribute type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" numbers The list items will be numbered with uppercase roman type="i" numbers The list items will be numbered with lowercase roman Nested HTML Lists: Lists can be nested (list inside list):

10. Example <ol> <li>Coffee</li> <li>Tea <ol> <li>Black tea</li> <li>Green tea</li> </ol> </li> <li>Milk</li> </ol> HTML Other Lists HTML Description Lists A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> HTML Tables: HTML tables allow web developers to arrange data into rows and columns.

11. ex: <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </table> => border-collapse: collapse; // add this to remove the outer border // Example to create a time table <table style="border: 1px solid black;border-collapse: collapse;"> <tr> <th colspan="6">Time table</th> </tr> <tr> <td rowspan="6">Hours</td> <th>2</th> <th>2</th> <th>2</th>

12. <th>2</th> <th>2</th> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <th colspan="5">Lunch</th> </tr> <tr> <td>2</td> <td>2</td> <td>2</td>

13. <td>2</td> <td rowspan="2">4</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> </table> What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. Note: Only MP4, WebM, and Ogg video are supported by the HTML standard. Video tag: we have some properties for video tag such as : controls, muted, autoplay ex: <video width="320" height="240" autoplay muted></video> HTML forms An HTML form is used to collect user input. The user input is most

14. often sent to a server for processing. The Action Attribute The action attribute defines the action to be performed when the form is submitted. Action: 1) get 2) post method="get" : Here in the below example we not specified any action type such as get or post, so initially the form submission is in get method. Whenever the method is get then you can see the formdata in the url once the form is submitted. Example: <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br>

15. <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <form action="/action_page.php" method="get"> <form action="/action_page.php" autocomplete="on"> <form action="/action_page.php" novalidate>