Download to read offline
Web Design Basics: HTML Essentials for begginer
- 1.
- 2.
- 3. HTML Hyper Text MarkupLanguage HTML is the code that is used to structure a web page and its content. The component used to design the structure of websites are called HTML tags.
- 4. First HTML File index.html Itis the default name for a website's homepage
- 5. HTML Tag A containerfor some content or other HTML tags <p> </p> This is a paragraph Element Content
- 6. Basic HTML Page <!DOCTYPEhtml> <html> <head> <title>My First Page</title> </head> <body> <p>hello world</p> </body> </html> tells browser you are using HTML5 root of an html document container for metadata contains all data rendered by the browser page title paragraph tag
- 7. Quick Points Html tagis parent of head & body tag Most of html elements have opening & closing tags with content in between Some tags have no content in between, eg - <br> We can use inspect element/view page source to edit html
- 8. Comments in HTML <!--This is an HTML Comment --> This is part of code that should not be parsed.
- 9. HTML is NOTcase sensitive <p> = <P> <html> = <HTML> <head> = <HEAD> <body> = <BODY>
- 10.
- 11. Basic HTML Tags Attributesare used to add more information to the tag HTML Attributes <html lang="en">
- 12. Heading Tag Used todisplay headings in HTML h1 (most important) h3 h2 h4 h5 h6 (least important)
- 13. Paragraph Tag Used toadd paragraphs in HTML <p> This is a sample paragraph </p>
- 14. Anchor Tag Used toadd links to your page <a href="https://google.com"> Google </a>
- 15. Image Tag Used toadd images to your page <img src="/image.png" alt="Random Image"> relative url
- 16. Br Tag Used toadd next line(line breaks) to your page <br>
- 17. Bold, Italic &Underline Tags Used to highlight text in your page <b> Bold </b> <i> Italic </i> <u> Underline </u>
- 18. Big & SmallTags Used to display big & small text on your page <big> Big </big> <small> Small </small>
- 19. Hr Tag Used todisplay a horizontal ruler, used to separate content <hr>
- 20. Subscript & SuperscriptTag Used to display a horizontal ruler, used to separate content <sub> subscript </sub> <sup> superscript </sup> H O 2 A + B n
- 21. Pre Tag Used todisplay text as it is (without ignoring spaces & next line) <pre> This is a sample text. </pre>
- 22.
- 23. Page Layout Techniques usingSemantic tags for layout <header> <main> <footer> using the Right Tags
- 24. Inside Main Tag SectionTag <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)
- 25. Revisiting Anchor Tag <ahref="https://google.com" target="_main"> Google </a> for new tab <a href="https://google.com"> <img src="link"> </a> clickable pic
- 26. Revisiting Image Tag setheight set width <img src="link" height=50px > <img src="link" width=50px >
- 27. Div Tag Div isa container used for other HTML elements Block Element (takes full width)
- 28. <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> List : DivTags <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
- 29. Span Tag Span isalso a container used for other HTML elements Inline Element (takes width as per size)
- 30. List : SpanTags <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <tt> <var> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time>
- 31.
- 32. List in HTML Listsare used to represent real life list data. unordered ordered <ul> </ul> <li> Apple </li> <li> Mango </li> <ol> </ol> <li> Apple </li> <li> Mango </li>
- 33. Tables in HTML Tablesare used to represent real life table data. <tr> used to display table row <td> <th> used to display table data used to display table header
- 34. Tables in HTML </table> <th>Name </th> <table> <tr> <th> Roll No </th> </tr> <td> Shradha </th> <tr> <th> 1664 </th> </tr> Name Roll No Shradha 1664
- 35. Caption in Tables <caption>Student Data </caption> Name Roll No Shradha 1664 Student Data
- 36. thead & tbodyin Tables <thead> to wrap table head <tbody> to wrap table body
- 37. colspan attribute colspan="n" used tocreate cells which spans over multiple columns Shradha 1664 Aman 1890 Data
- 38. Form in HTML Formsare used to collect data from the user Eg- sign up/login/help requests/contact me <form> </form> form content
- 39. Action in Form <formaction="/action.php" > Action attribute is used to define what action needs to be performed when a form is submitted
- 40. Form Element :Input <input type="text" placeholder="Enter Name">
- 41. Label <input type="radio" value="classX" name="class" id="id1"> <label for="id1"> </label> <input type="radio" value="class X" name="class" id="id2"> <label for="id2"> </label>
- 42. Class & Id <divid="id1" class="group1"> </div> <div id="id2"> class="group1"> </div>
- 43. Checkbox <input type="checkbox" value="classX" name="class" id="id1"> <label for="id1"> </label> <input type="checkbox" value="class X" name="class" id="id2"> <label for="id2"> </label>
- 44. Textarea <textarea name="feedback" id="feedback"placeholder="Please add Feedback"> </textarea>
- 45. Select <option value="Delhi"> Delhi</option> <select name="city" id="city"> </select> <option value="Mumbai"> Delhi </option> <option value="Banglore"> Delhi </option>
- 46. iframe Tag website insidewebsite <iframe src="link"> Link </option>
- 47. Video Tag <video src="myVid.mp4">My Video </video> Attributes - controls - height - width - loop - autoplay
- 48. All the verybest in your future journey :) - Aman bhaiya & Shradha didi