Download to read offline
Uploaded byRajat Pratap Singh
Web development basics (Part-1)
This document serves as a comprehensive tutorial on HTML and CSS basics, covering key elements such as HTML tags, CSS types, and styles applied to enhance user experience. It includes detailed discussions on HTML form elements, semantic tags for SEO, and the CSS box model. Additionally, it makes distinctions between inline and block elements, alongside practical exercises to reinforce learning.
More Related Content
Similar to Web development basics (Part-1)
Web development basics (Part-1)
- 1. Tutorial - 2 HTML& CSS Basics
- 2. Revision of tutorial- 1 • Web-development • Client Server Communications • Basic HTML tags ⚬ Emmet Abbreviations ⚬ <html> ⚬ <head> ⚬ <body> ⚬ <meta> ⚬ <link> ⚬ <h1> to <h6> ⚬ <p> ⚬ <nav> • Basic HTML tags (cont...) ⚬ <ul> & <ol> ⚬ <li> ⚬ <div> ⚬ <span> ⚬ <a> ⚬ <img>
- 3. Today's Agenda • HTMLtags (cont...) ⚬ <form> ⚬ <input> ⚬ inline vs block ⚬ HTML entities ⚬ semantic tags in HTML • CSS ⚬ Introduction ⚬ Types of CSS ￭ Inline CSS ￭ Internal CSS ￭ External CSS ⚬ Selectors in CSS ⚬ Chrome dev tool ⚬ Fonts ⚬ Colors ⚬ Borders
- 4. • CSS ⚬ BoxModel ⚬ Margin ⚬ Padding ⚬ Float & clear ⚬ styling ok link & button ⚬ Create Navigation menu ⚬ Display Property • CSS (cont...) ⚬ Position ￭ absolute ￭ relative ￭ fixed ￭ sticky • Exercise ⚬ News Website ⚬ Build your own resume
- 5. <form> • It helpsto create forms in html format • Form can be consists of many elements like: ⚬ input box ⚬ select ⚬ text area ⚬ radio button ⚬ checkbox ⚬ labels ⚬ date, etc...
- 6. How does anormal Box looks..?
- 7. <input> • <input type="text"> ⚬Its an input box • <input type="email"> ⚬ It create input box for email with automatic validations • <input type="date"> ⚬ it create a date tab • <input type="number"> ⚬ it create input box for numbers only • <input type="checkbox"> ⚬ it create the checkbox • <input type="radio"> ⚬ it creates radio button
- 8. • <textarea> ⚬ itcreates textarea element for larger texts • <label> ⚬ creates label for any specific form element • <select> ⚬ it creates drop-downs with various options under it by usage of <option>
- 9. • buttons ⚬ itcan be created directly by <button> ⚬ or ⚬ it can be created by usage of <input> ￭ <input type="submit" value="Submit"> ￭ <input type="reset" value="Reset">
- 10. Inline vs block elemnst •It takes only the width according to its content • eg. <span>Hello World</span> • some of the inline elements includes: ⚬ <a>, <strong>, <big>, <i>, <label>, <select>, <small>, <span>, <strong>, ⚬ <textarea> Inline elements:
- 11. Block elements • Ittakes complete width of available for it • Hence it always starts from new line • Unlike inline element it has top margin & bottom margin • e.g. <div>Hello World</div> • Some of the block elements are : ⚬ <div>, <li>, <nav>, <ol> ⚬ <p>, <section> ⚬ <tfoot>, <label> ⚬ <ul>, <header>
- 12. Ids and classes Wecreate an element but when you want to apply usage of CSS or JS, then to refer to a particular element we can make use of ids and elements. Only difference are: • id helps to uniquely identify an element while classes can be for several elements • id cant be used in combinations while classes can be used in combination for CSS
- 13. Terminology - HTMLentities • they are some reserved words started by < and ended by > • hence when we want actually to write "<" symbol we can use following characters ⚬ < ⚬ <
- 14. Semantic Tags Semantic tagsare the tags that help you to tell your search engine in order to improve the SEO optimization. It's not compulsory but should be done just to acquire better SEO capability
- 15. Semantic tags examples Itsbasic purpose is to signify the usage of one type of tag for doing that specific task only. e.g. <h1> is semantic coz. it tells browser by itself that it has to render a text in bold. Some of the semantic tags are mentioned below: • <article> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) • <aside> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) • <details> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) • <figcaption> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) • <figure> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) • <header>, <footer>, <main>, <mark> • <nav>, <section>, <summary> • <section>, <time>
- 16. CSS (Cascading stylesheet) Meaning: • Cascade - apply or pour • Style - some styles or articulary property • Sheet - list of anything Means- It'll help to apply the styles to our basic HTML (UI), It'll beautify the elements and improve UX
- 17. Basic properties ofCSS • Color: ⚬ It'll apply color to elemnts content, it can be any text or may be sometimes to some kind of images too ￭ color: "#FFFFFF" ￭ color: 'white' ￭ color: rgba(255,0,0)
- 18. • background-color: ⚬ Itis similar to color but it applies color to the background of an element • border ⚬ It is helpful to apply styling to border of an element ￭ border: 2px solid red • border-radius ⚬ It is helpful to apply styling to corners of border of an element e.g. border-radius: 2px
- 19. Box model • Meaning- ⚬ Its a model or representation of any element • Why its called box model ⚬ Because it signifies that all elements in HTML are represented in the form of boxes only • It consists of following major parts: ⚬ element content ⚬ padding ⚬ border ⚬ margin
- 21. • margin ⚬ itgives space outside of an element ⚬ e.g. ￭ margin: 2px ￭ margin: 0, 2px ===>>((T,B), (R,L)) • top & bottom - 0px • right & left - 2px ￭ margin: (1px, 2px, 3px, 4px) • margin(T, R, B, L)