Scribd
Upload
11 views

Front End Development - HTML

Uploaded by

roshanking2244
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Front End Development - HTML

Uploaded by

roshanking2244
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

FRONT END DEVELOPMENT

- HTML
SESSION 1
TABLE OF CONTENTS

● What is HTML?
● Features
● Html editor
● Html skeleton
● Comments
● Html elements
● Basic tags
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
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
HTML EDITORS

● SIMPLE EDITOR: Notepad


● Notepad++
● Atom
● BEST EDITOR: Vs code.
HTML SKELETON

<!DOCTYPE html>
<html lang="en">
<head>
<title>document</title>
</head>
<body></body>
</html>
<!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 .

<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)

<BODY>

● Everything written here will be displayed in the browser


● Contains text, images, links which can be achieved through tags.
HTML COMMENTS

● Comments don’t render on the browser


● Helps to understand our code better and makes it readable.
EXAMPLE:
• <!-- This is how we create comment in html -->
SHORTCUT KEY:
• CNTRL + /
HTML ELEMENT

An HTML element consists of:


• TAGS: The opening and (in most cases) the closing tags.
• CONTENT: The text or other HTML elements nested within the tags
So, an HTML element is a combination of the tags and the content they
enclose.
EXAMPLE: PARAGRAPH ELEMENT
•Opening Tag: <p>
•Content: This is a paragraph.
•Closing Tag: </p>
•HTML Element:<p>This is a paragraph.</p>
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>
■ <em>
■ <strong>
■ <img>
■ <a>
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>
● <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>//HTML5
● <em> tag

○ Defines the text to be italic


○ Replaced <i>//HTML5
● <sub> tag

○ Stands for subscript tag


○ Defines subscript text
○ The text is displayed lower and smaller than the surrounding text
○ Commonly used in chemical formulas, mathematical expressions, etc.
○ Example:
H<sub>2</sub>O

● <sup> tag

○ Stands for superscript tag


○ Defines superscript text
○ The text is displayed higher and smaller than the surrounding text
○ Commonly used for footnotes, exponents, etc.
○ Example:
x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
LIST OF SELF CLOSING TAGS
● <br> tag
○ Stands for break tag
○ Inserts a line break
○ Useful for creating single-line breaks in text
○ Example:
Line 1<br>Line 2

● <hr> tag
○ Stands for horizontal rule tag
○ Inserts a horizontal line
○ Commonly used to separate content sections
○ Example:
<hr>

● <img> tag
○ Stands for image tag
○ Embeds an image into the page
○ Uses the src attribute to specify the image source URL
○ Uses the alt attribute to provide alternative text for the image
○ Example: <img src="image.jpg" alt="Description of the image">
Thank you!

You might also like