Scribd
Upload
11 views

Front End Development - HTML

Uploaded by

roshanking2244
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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