Front End Development - HTML AND BASICS.pptx
- 1. FRONT END DEVELOPMENT - HTML -By Sanchita Devkar
- 2. TABLE OF CONTENT ● What is HTML? ● Features ●HTML Editor ● HTML Skeleton ● Comments ● HTML Elements ● Basic Tags ● Attributes
- 3. WHAT IS HTML? ● Stands for HyperText Markup Language ● HyperText: Link between web pages. ● Markup Language: Text between tags which defines structure. ● It is a language to create web pages ● HTML defines how the web page looks and how to display content with the help of elements ● It forms or defines the structure of our Web Page ● Need to save your file with .html extension
- 4. FEATURES OF HTML ● The learning curve is very easy (easy to modify) ● Create effective presentations ● Add links wherein we can add references ● Can display documents on platforms like Mac , Windows, Linux etc ● Add videos, graphics and audios making it more attractive. ● Case insensitive language
- 5. HTML EDITORS ● Simple editor: Notepad ● Notepad++ ● Atom ● Best editor: Sublime Text
- 7. • <!DOCTYPE html> Instruction to the browser about the HTML version. • <html> Root element which acts as a container to hold all the code Browser should know that this a HTML document Permitted content: One head tag followed by one body tag <head> Everything written here will never be displayed in the browser It contains general information about the document Title, definitions of CSS and script sheets Metadata(information about the document)
- 8. • <body> Everything written here will be displayed in the browser Contains text, images, links which can be achieved through tags. Examples: ○ <p> This is our first paragraph. </p> ○ <a href="http://www.google.com">Go To Google</a> ○ <img src="photo.jpg">
- 9. HTML COMMENTS ● Comments don’t render on the browser ● Helps to understand our code better and makes it readable. ● Helps to debug our code ● Three ways to comment: ○ Single line ○ Multiple line ○ Comment tag //Supported by IE
- 10. HTML ELEMENT ● Elements are created using tags ● Elements are used to define semantics ● Can be nested and empty Basic Structure <p color=“red” >This is our first Paragraph </p> ● Contains following things: ○ Start tag: <p> ○ Attributes: color =”red” ○ End tag: <p> // optional ○ Content: This is our first Paragraph
- 11. ELEMENT TYPES ● Block Level : ○ Takes up full block or width and adds structure in the web page ○ Always starts from new line ○ Always end before the new line ○ Example : ■ <p> ■ <div> ■ <h1>….<h6> ■ <ol> ■ <ul> ● Inline Level: ○ Takes up what is requires and adds meaning to the web page ○ Always starts from where the previous element ended ○ Example : ■ <span> ■ <strong> ■<em> ■<img> ■<a>
- 12. BASIC TAGS: ● Enclosed within <> ● Different tags render different meaning. ●<title>tag:- ○ Whatever is written this tag comes up in the web page’s tab. ○ Defines the title of the page ○Syntax:-<title>Home<title> ● <p>tag:- ○ Defines the paragraph. ○ Syntax: <p>This is our first Paragraph </p>
- 13. LIST OF SELF CLOSING TAGS:- ●<hr>tag: ○ Stands for horizontal rule ○ Dividing the web page ●<br>tag:- ○ Stands for break line ○ Moving to next line ●<img>tag:- ○ To add images in the web page
- 14. ● <h1>tag….<h6>tag ○ Stands for heading tag ○ Defines heading of a page ○ h1 represents most important page in the page ○ h6 represents least important page in the page ● <strong>tag:- ○ Defines the text to be bold ○ Replaced <b>tag //HTML5 ● <em>tag:- ○ Defines the text to be bold ○ Replaced <i> tag //HTML5
- 15. ● <ol>tag:- ○ Stands for ordered list ○ To define series of events that take place in some order ○ Example making a tea (like a flow chart) ○ <ol>.........</ol> ●<ul> tag :- ○ Stands for unordered list ○ To define series of events that take place where order is not important. ○ Example your hobbies ○ <ul>.........<ul>
- 16. ● <li> tag :- ○ Defines the list item ○ Used inside the ‘ol’ and ‘ul’ tag to define the events ○ <li>…..</li> ● <div> and <span> tags:- ○ Both of these are used to group different tags . ○ Acts like a container. ○ Effective while styling. ○ <div>.........</div> ○ <span>....</span> ○ Difference <div> is block level and <span> is inline level.
- 17. ● <img> tag:- ○ Used to add images in a web page ○ Syntax: <img src=”url”> ○ Self closing tag. ● <a> tags:- ○ Used to add links in a web page ○ <a href=”url”> Name of the link </a>
- 18. <TABLE> TAG:- ○ Used to create a table on a web page ○ Need other tags for completing the creation of a table ■ <tr> : for marking the table row ■ <th> : for table header ■ <td> : for table column data ○ Everything is always enclosed within <tr> ■ <thead> : to keep all header data ■ <tbody> : to keep all body data.
- 19. <FORM> TAG ○ Action attribute: It specifies the URL to send form data to ○ Method attribute: specifies the type of HTTP request(GET or POST) ○ Example: <form action="/my-form-submitting-page" method="POST"> ○ <input>: used to accept data from the user ○ Some types of inputs are:
- 20. Text: used to store text data. Syntax: type="text" ● Password: used to enter a secure password. Syntax: type="password" ● Placeholder: temporary text in input fields. It is generally accompanied by "text" and "password" attributes. Syntax: placeholder="insert- text-here" ● Button: used to include buttons in the form. Syntax: type="button" value="insert-text-here" ● Submit button: For creating a submit button. All the data will get submitted when it is clicked. Syntax: type="submit" ● Checkbox: to provide the ability to check multiple options. Syntax: type="checkbox". To check options by default, set it with the checked attribute.
- 21. ● Radio Button: allows one to choose a single option. Syntax: type="radio". Keep the name attribute of all the options the same. ● <select>: For every possible option to select, use an <option> tag<option> ● Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can specify how large the text area is by using the "rows" and "cols" attributes ● Labels: add captions for individual items in a form. Syntax: <label>. A label can be used by placing the control element inside the <label> element, or by using the "for" and "id" attributes. ● Validations ensure that users fill out forms in the correct format, e.g: a. required: The Boolean attribute which makes a field mandatory: b. email: the browser will ensure that the field contains an @ symbol.
- 22. ATTRIBUTES ● Properties associated with each tag. ● <tag name=”value”></tag> is the structure. ● Global Attribute: ○ Title : Add extra information (hover) ○ Style: Add style information(font, background, color, size) ● <img src=”url” width=”100”> ○ src is the attribute used in image tag to define path ○ Width is attribute used to define width in pixels ○ Alt i.e alternate text if image is not loaded ● <a href=”url”> Name of the link </a> ● href used to define path of the link.