GETTING STARTED WITH HTML
Agenda
1 What is HTML? 6 HTML Elements
2 Features of HTML 7 Basic Tags
3 HTML Editor 8 Attributes
4 HTML Skeleton
5 HTML Comments
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What is HTML?
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
What is HTML?
Adds Design/Structure to the
webpage
HTML
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
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
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
Notepad
Notepad++
Atom
Sublime Text
HTML Skeleton
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Skeleton
<!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).
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Skeleton
<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=“https://www.google.com”>Go To Google</a>
○ <img src="photo.jpg">
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Comments
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.
● Two ways to comment:
○ Single line
○ Multiple line
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Elements
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
HTML Elements
● 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
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, dividing a page into coherent blocks.
○ These elements can contain block-level as well as inline elements.
○ Example :
■ <p>
■ <div>
■ <h1>...<h6>
■ <ol>
■ <ul>
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 :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Basic Tags
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
List of Self closing/Empty 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.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Basic Tags
● <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 italic.
○ Replaced <i>tag//HTML5
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Basic Tags
● <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>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Basic Tags
● <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.
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Basic Tags
● <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>
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
Attributes
Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
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.
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
