HTML PDF

HTML Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. Table of Content What is HTML Features HTML Editor HTML Skeleton Comments HTML Elements Basic Tags Attributes Proprietary content. © Great...

HTML Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. Table of Content What is HTML Features HTML Editor HTML Skeleton Comments HTML Elements Basic Tags Attributes Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 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 Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. Features Of HTML Learning curve is very easy (easy to modify) Creating effective presentations Adding Links wherein we can add references Can display documents on platforms like Mac , Windows, Linux etc Adding videos, graphics and audios making it more attractive. Case insensitive language Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. HTML Editors Simple editor: Notepad Notepad++ Atom Best editor: Sublime Text. Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. HTML Skeleton Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  Instruction to the browser about the HTML version. 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 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 Proprietary content. © Great Learning. Allabout theUnauthorized Rights Reserved. document) use or distribution prohibited.  Everything written here will be displayed in the browser Contains text, images, links which can be achieved through tags. Examples: ○ This is our first paragraph. ○ Go To Google ○ Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  HTML Comments Comments don’t render on the browser Helps to understand our code better and makes it readable. Helps to debugging our code Three ways to comment: ○ Single line ○ Multiple line ○ Comment tag //Supported by IE Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. HTML Element Elements are created using tags Elements are used define semantics Can be nested and empty Basic Structure This is our first Paragraph Contains following things: ○ Start tag: ○ Attributes : color =”red” ○ End tag : // optional ○ Content: This is our first Paragraph Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. 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 :... Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. Element Types Inline Level : ○ Takes up what is requires and adds meaning to the web page ○ Always starts from where the previous element ended ○ Example : Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. Basic Tags: Enclosed within Different tags render different meaning. tag ○ Whatever is written this tag comes up in the web page’s tab ○ Defines the title of the page ○ Syntax: Home tag ○ Defines the paragraph ○ Syntax: This is our first Paragraph Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. List of Self closing tags tag ○ Stands for horizontal rule ○ Dividing the web page tag ○ Stands for break line ○ Moving to next line tag ○ To add images in the web page Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  tag …… 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 tag ○ Defines the text to be bold ○ Replaced tag //HTML5 tag ○ Defines the text to be bold ○ Replaced tag //HTML5 Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  tag ○ Stands for ordered list ○ To define series of events that take place in some order ○ Example making a tea (like a flow chart) ○......... tag ○ Stands for unordered list ○ To define series of events that take place where order is not important. ○ Example your hobbies ○......... Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  tag ○ Defines the list item ○ Used inside the ol and ul tag to define the events ○ and tags ○ Both of these are used to group different tags. ○ Acts like a container. ○ Effective while styling. ○......... ○.... ○ Difference is block level and is inline level. Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  tag ○ Used to add images in a web page ○ Syntax: ○ Self closing tag. tags ○ Used to add links in a web page ○ Name of the link Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  tag Used to create a table on a web page Need other tags for completing the creation of a table : for marking the table row : for table header : for table column data Everything is always enclosed within : to keep all header data : to keep all body data Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  tag action attribute: It specifies the URL to send form data to method attribute: specifies the type of HTTP request(GET or POST) Example: : used to accept data from the user Some types of inputs are: Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  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. Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  Radio Button: allows one to choose a single option. Syntax: type="radio". Keep the name attribute of all the options the same. : For every possible option to select, use an tag Text Areas: multi-line plain-text editing control. Syntax:. 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:. A label can be used by placing the control element inside the element, or by using the "for" and "id" attributes. Validations ensure that users fill out forms in the correct format, e.g.: required: The Boolean attribute which makes a field mandatory: email: the browser will ensure that the field contains an @ symbol. Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited. Attributes Properties associated with each tag. is the structure. Global Attribute: ○ Title : Add extra information (hover) ○ Style: Add style information(font,background,color,size) ○ 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 Name of the link href used to define path of the link. Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.  Thank You Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.