HTML HTML → Hypertext Markup Language HTML is the code that is used to structure a web page and its content The components used to design the structure of websites are called HTML tags 💡 ! → Used HTML abbreviation HTML Tag A container for some content or other HTML tag 💡 HTML <p></p> → It shows element 1 💡 Inside in <p></p> → Called as Content Basic HTML Page <!DOCTYPE html> Tells the browser you are using HTML5 <html></html> The root of an HTML document <head></head> Container for metadata <title></title> Page title <body></body> Contains all data rendered by the browser <p></p> Paragraph tag Quick Points An HTML tag is a parent of the head & body tag Most HTML elements have opening & closing tags with content in between Some tags have no content in between, eg - <br> [Break tag with no opening and ending tag like <br></br>] [You can use this tag for next line] We can use inspect element/view page source to edit HTML Comments in HTML This is part of the code that should not be parsed HTML IS NOT CASE SENSITIVE HTML <html> = <HTML> <p> = <P> 2 <head> = <HEAD> <body> = <BODY> BASIC HTML TAGS HTML Attributes Attributes are used to add more information to the tag 👉🏻 <html lang=”en”> → Lanuage attribute Heading Tag Used to display headings in HTML h1 [Most Important] [Large in Size] h2 h3 h4 h5 h6 [Least Important] [Small in Size] HTML 3 Paragraph Tag Used to add paragraphs in HTML 💡 Toggle Word Wrap in Command plate → This feature automatically moves words that don’t fit on one line to the next line Anchor Tag Used to add links to your page Go to another page, Create another file, and Link like this… Image Tag HTML 4 Used to add Images to your page alt ⇒ Used for an alternative name Adjust the size of an image using height and width Bold, Italic & Underline Tags Used to highlight text on your page Big & Small Tags Used to display big & small text on your page Hr Tag Used to display a horizontal ruler, used to separate content HTML 5 Subscript & Superscript Tag Used to display a horizontal ruler, used to separate content 💡 Pre Tag <pre></pre> ⇒ Used to count the space Page Layout Techniques Using Semantic tags for layout Using the Right Tags HTML 6 Inside Main Tag Section Tag <section> For a section on your page Article Tag <article> For an article on your page Aside Tag <aside> For content aside main content (ads) Revisting Anchor Tag 👉🏻 👉🏻 <a href=”https://google.com” target=”_main”>Google</a> → To open in new tab <a href=”https://google.com”><img src=”Link”></a> → Clickable Pic Revisting Image Tag 👉🏻 <img src=”Link” height=”100px” width=”40px” > Div Tag HTML 7 Div is a container used for other HTML elements Block Element (takes full width) Span Tag Span is also a container used for other HTML elements Inline elements (takes width as per size) List in HTML Lists are used to represent real life list data There are two types Unordered <ul></ul> Ordered <ol></ol> List <li></li> HTML 8 Tables in HTML Tables are used to represent real life table data HTML <tr> Used to display table row <td> Used to display table data <th> Used to display table header 9 Caption in Tables 👉🏻 <caption>Student Data</caption> thead & tbody in Tables HTML 10 👉🏻 👉🏻 👉🏻 <thead> ⇒ To wrap table head <tbody> ⇒ To wrap table body colspan ⇒ Used to Place the headline between the center of columns Form in HTML HTML 11 Forms are used to collect data from the user Eg - sign up/login/help requests/contact me <form></form> Action in Form Action attribute is used to define what action needs to be performed when a form is submitted <form action’”/action.php”> Form Element : Input 👉🏻 <input type=”text” placeholder=”Enter Name”> Label HTML 12 Checkbox Checkbox basically used for multiple type answers like that…. HTML 13 👉🏻 <textarea> ⇒ Used for feedback by the user Select HTML 14 <input type=”submit” value=”submit”> ⇒ Used for submit iframe Tag Website inside Website Video Tag <video src=”Video.mp4”>My video</video> Attributes controls height width loop autoplay HTML 15
