Scribd
Upload
14 views

Introduction To HTML

The document introduces HTML and its basic concepts including tags, elements, and attributes. It explains what HTML is, its features, common editors, document structure, comments, basic tags like headings, paragraphs, lists, links and images.

Uploaded by

seema 1981
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Introduction To HTML

The document introduces HTML and its basic concepts including tags, elements, and attributes. It explains what HTML is, its features, common editors, document structure, comments, basic tags like headings, paragraphs, lists, links and images.

Uploaded by

seema 1981
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Introduction to 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

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
<!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
<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">

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

<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
○ Always end before the new line
○ 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:
● 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 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
● <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

Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited
● <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
● <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
● <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
● 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

You might also like