WRITE A CONPREHENSIVE SUMMARY ABOUT THE VIDEO TUTORIAL Hypertext Markup Language (HTML) is the standard markup language[a] for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript, a programming language. To create a new folder in HTML, you don't directly use HTML code; instead, you need to create a new folder within your file system (using your operating system's file explorer) where you are storing your HTML files, and then reference that folder within your HTML code when linking to files inside it using relative file paths; HTML itself cannot create folders on a server. How to plan a website in 7 steps. Identify your website goals. Start thinking about the broad purpose of your website. ... Identify your target audience. ... Define your unique selling proposition. ... Secure a domain name and hosting. ... Pick a website builder. ... Create and collect design elements. ... Create content for your core website pages HTML tags are used to structure and format content on a webpage, with each tag serving a specific function like defining headings, paragraphs, links, images, lists, and more; here are a few key HTML tags and their functions: Basic Structure: <html>...</html>: Defines the root element of an HTML document. <head>...</head>: Contains metadata about the page, like the title <title>...</title>: Sets the title displayed on the browser tab <body>...</body>: Contains the visible content of the webpage Heading Tags: <h1>...</h1> to <h6>...</h6>: Defines different levels of headings, with "h1" being the largest and "h6" the smallest Text Formatting: <p>...</p>: Represents a paragraph <b>...</b>: Makes text bold <i>...</i>: Makes text italic <u>...</u>: Underlines text <em>...</em>: Emphasizes text (often styled as italic) Head Tag. The head tag <head> contains all the elements describing the document. Title Tag. The title tag <title> specifies the HTML page title, which is shown in the browser's title bar. Body Tag. The body tag <body> is where you insert your web page's content. Paragraph Tag. ... Heading Tag. We analyzed the most popular websites on the web to find out what are the most used tags. It wasn’t surprising to find that the link tag is the most used tag. In fact it represents almost 25% of all tags on the web. The most used tags on the web This is our list of basic HTML tags: <a> for link <b> to make bold text <strong> for bold text with emphasys <body> main HTML part <br> for break <div> it is a division or part of an HTML document <h1>… for titles <i> to make an italic text <img> for images in document <ol> is an ordered list, <ul> for an unordered list <li> is a list item in bulleted (ordered list) <p> for paragraph <span> to style part of text 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). Two commonly used block elements are: <p> and <div>. The <p> element defines a paragraph in an HTML document. The <div> element defines a division or a section in an HTML document. The <p> element is a block-level element. The <div> element is a block-level element. Example <p>Hello World</p> <div>Hello World</div> forms and tabelExample A simple HTML table: <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> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table> Table Cells Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything between <td> and </td> are the content of the table cell. Example <table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> </table> The Action Attribute The action attribute defines the action to be performed when the form is submitted. Usually, the form data is sent to a file on the server when the user clicks on the submit button. In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data: Example On submit, send form data to "action_page.php": <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> The Target Attribute The target attribute specifies where to display the response that is received after submitting the form. The target attribute can have one of the following values: Value Description _blank The response is displayed in a new window or tab _self The response is displayed in the current window _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe list html: Attributes provide features or functionality to an element. Attributes are placed inside the element's opening tag. Definition and Usage The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. Example Set the different list style types (with CSS): <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Two different ordered lists (the first list starts at 1, and the second starts at 50): <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. The <li> tag is used to define each list item. Tip: Use CSS to style lists. Tip: For unordered list, use the <ul> tag. An element can have any number of attributes. Example# This example has 2 <input> elements with type attributes. The different attribute values create 2 totally different input controls: a text field, and a button. <input type="text"> <input type="button" value="Submit"> <element name1='value1' name2='value2'> ... </element> <element> is the HTML element. name1 and name2 are the attribute names. value1 and value2 are the attribute values. Attribute values are set between single quotes (') or double quotes ("). Examples include id, style, class, name, href, etc. A paragraph element with 3 attributes: id, class, and style. <p id='p1' class='color-teal' style='font-size:16px;'> Paragraph with three attributes. </p> links: Definition and Usage The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets or to add a favicon to your website. The <link> element is an empty element, it contains attributes only. <head> <link rel="stylesheet" href="styles.css"> </head> textarea : The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]. Tip: Use the <sub> tag to define subscript text section <section> <h2>WWF History</h2> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 196</p> semantics: What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content. Semantic Elements in HTML Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer. In HTML there are some semantic elements that can be used to define different parts of a web page: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section>: <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section> HTML <footer> Element The <footer> element defines a footer for a document or section. A <footer> element typically contains: authorship information copyright information contact information sitemap back to top links related documents You can have several <footer> elements in one document. <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer> <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer> Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content. <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href=" HTML <aside> Element The <aside> element defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content. Example Display some content aside from the content it is placed in: <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside> checkbox: example Let the user select one or more options of a limited number of choices: <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br> The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices! The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices! option Definition and Usage. The <option> tag defines an option in a select list. <option> elements go inside a <select>, <optgroup>, or <datalist> element. form : <label for="cars">Choose a car:</label> <select id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> Definition and Usage The <option> tag defines an option in a select list. <option> elements go inside a <select>, <optgroup>, or <datalist> element. Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission. Tip: If you have a long list of options, you can group related options within the <optgroup> tag. Definition and Usage The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> <output> Example An HTML form with checkboxes: <form action="/action_page.php" method="get"> <input type="checkbox" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" name="vehicle3" value="Boat" checked> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form> An HTML form with radiobuttons: <form action="/action_page.php" method="get"> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS" checked="checked"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label><br><br> <input type="submit" value="Submit"> </form> <footer>: <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer> More "Try it Yourself" examples below. Definition and Usage The <footer> tag defines a footer for a document or section. A <footer> element typically contains: authorship information copyright information contact information sitemap back to top links related documents You can have several <footer> elements in one document.