HTMl AT A GLANCE

HTMl AT A GLANCE What then is html? HTML stands for HyperText Markup Language, it's the basic scripting language used by web browsers to render pages on the World Wide Web( It allows the creation of webpages or documents as well as linking several pages together using the <a>. in html code each individual markup code (which would fall between “<” and “>” characters) is referred to as an element, though many people also refer to it as a tag. Some elements come in pairs that indicate when some display effect is to begin and when it is to end.HTML element have three main parts they're are: 1.Opening tag – used to state where an element starts to take effect. The tag is wrapped with opening and closing angle brackets. For example, use the start tag <p> to create a paragraph. Content – this is the output that other users see. 3.Content:This carries all information about the entire webpage, it also called the body, it carries in formations like text,images and links. 2.Closing tag – the same as the opening tag, but with a forward slash before the element name. For example, </p> to end a paragraph. The combination of these three parts will create an HTML element: <p>This is how you add a paragraph in HTML.</p> Another critical part of an HTML element is its attribute, which has two sections – a name and attribute value. The name identifies the additional information that a user wants to add, while the attribute value gives further specifications. <p style="color:purple;font-family:verdana">This is how you add a paragraph in HTML.</p> Another attribute, the HTML class, is most important for development and programming. The class attribute adds style information that can work on different elements with the same class value. For example, we will use the same style for a heading <h1> and a paragraph <p>. The style includes background color, text color, border, margin, and padding, under the class .important. To achieve the same style between <h1> and <p>, add class="important" after each start tag. Most importantly, every HTML document must start with a <!DOCTYPE> declaration to inform the web browser about the document type. With HTML5, the doctype HTML public declaration will be: <!DOCTYPE html> Most Used HTML Tags and HTML Elements Currently, there are 142 HTML tags available that allow for the creation of various elements. Even though modern browsers no longer support some of these tags, learning all the different elements available is still beneficial. HTML MOST IMPORTANT,USED TAGS AND ELEMENTS – block-level elements and inline elements. 1.Block-Level Elements A block-level element takes up the entire width of a page. It always starts a new line in the document. For example, a heading element will be in a separate line from a paragraph element. Every HTML page uses these three tags: <html> tag is the root element that defines the whole HTML document. <head> tag holds meta information such as the page’s title and charset. <body> tag encloses all the content that appears on the page. <html> <head>  </head> <body>  </body> </html> Other popular block-level tags include: a.Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size, getting smaller as they move up to h6. Paragraph tags – are all enclosed by using the <p> tag. b.List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul> for an unordered list. Then, enclose individual list items using the <li> tag. 2.Inline Elements An inline element formats the inner content of block-level elements, such as adding links and emphasized strings. Inline elements are most commonly used to format text without breaking the flow of the content. For example, a <strong> tag would render an element in bold, whereas the <em> tag would show it in italics. Hyperlinks are also inline elements that use an <a> tag and an href attribute to indicate the link’s destination: <a href="https://example.com/">Click me!</a> Below is a typical implement of HTML semantics <!DOCTYPE html> <html> <head> <title> MY WEBPAGE </title> </head> <body> <nav> <div> <img src="/home/g/Desktop/vesty/img/IMG_1734305227021.png" alt=""/> </div> <ul> <li><a href="#home"> home </li> <li><ahref="https://blockfuselabs.com/">ABOUT</a></li> <li><ahref="https://blockfuselabs.com/">CONTACT</a></li> <li><ahref="https://blockfuselabs.com/">SERVICE</a></li> </ul> <div id="back to top"> <p>teachies</p> </div> </nav> <div> <button>Signup</button> <button>Login</button> </div> <h1>MY PROJECT</h1> <hr> <ul> To test my coding skills <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the<br> 1500s, when an unknown printer took a galley of type and scrambled <br>it to make a type specimen book. It has survived not only five centuries<br>, but also the leap into electronic typesetting, <br>remaining essentially unchanged. It was popularised in the 1960s with the release of<br> Letraset sheets containing Lorem Ipsum passages,<br> and more recently with desktop publishing<br> software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable<br> content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of <br>letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and<br> web page editors now use Lorem Ipsum as their default model text, and a search for <br>'lorem ipsum' will uncover many web sites<br> still in their infancy. Various versions have evolved over the years, sometimes <br>by accident, sometimes on purpose (injected humour and the like). </p> </div> <div> <img src="/home/g/Desktop/vesty/img/9c97f56db6d48b30fae63d25a3e01e65.jpg"alt""/> </div> <label> Favorite programming language </label> <select> <option>REACT</option> <option>Javascript</option> <option>Html</option> </select> </div> <div> <label> first name</label> <input type="name" placeholder="first name"> <br> <label> first name</label> <input type="name" placeholder="last name"> <br> <label>Email</label><input type="email" placeholder="email"> <br> <label>Phonenumber</label><input type="number" placeholder="Phonenumber"> </div> <div> <form> <h3>BASIC INFORMATION</h3>  <label>Full name</label> <input type="text"> <br> <label>Date of birth</label> <input type="date"> <br> <tr> <td> <label for="gender">Gender:</label></td> <input type="radio" id="male" name="gender" value="male" required> <label for="male">male</label> <input type="radio" id="female" name="gender" value="female" required> <label for="female">female</label> <input type="radio" id="other" name="gender" value="other" required> <label for="other">other</label> </td> </tr> <br>  <button> submit</submit> </div> </form> <div> <table> <h3> A SIMPLE DATA TABLE </h3> <thead><tr> <th>S/N</th> <th>NAME</th> <th>GENDER</th> <th>AGE</th> <th>HEIGHT</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>NANBOL PONZING </td> <td>MALE </td> <td>25</td> <td>5ft</td> </tr> <tr> <td>2.</td> <td>JOSEPH NANBUR </td> <td>MALE </td> <td>20</td> <td>5.5ft</td> </tr> <tr> <td>2.</td> <td>NIMEL NANGAR </td> <td>FEMALE </td> <td>19</td> <td>5ft</td> </tr> <tr> <td>2.</td> <td>SELYA NIMKUR </td> <td>FEMALE </td> <td>18</td> <td>4.5ft</td> </tr> </table> </div> <a href="https://www.facebook.com/christian.gotom/">MORE</a> <hr> <footer> <p>©Rare tech com.All rights reserved.</p> <div id="home"> <a href="#Home">home</li> </div> <a href="#back to top">back to top</a> <footer> <div> <img src="/home/g/Desktop/vesty/img/BeautyPlus_20250112090629454_save.jpg" alt=""/> </div> </footer> </html> CONCLUSION The Bottom Line... HyperText Markup Language, is a standard Mark up language that allows: 1.Internet navigation. 2.Browser storage function. 3.Web document crestion. 4.Website enrichment.