Scribd
Upload
3 views20 pages

More On HTML - PPSX - 20241110 - 104332 - 0000

Uploaded by

arshikasakariya3107
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
3 views20 pages

More On HTML - PPSX - 20241110 - 104332 - 0000

Uploaded by

arshikasakariya3107
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/ 20

Introduction to

HTML
HTML
• HTML stands for Hyper Text Markup Language.

• HTML is used for creating Web pages.

• HTML describes the structure of a Web page.

• HTML consists elements/tags.

• HTML is used to create static websites.


HTML Editors
• Web pages can be created and modified by
using professional HTML editors.

• However, for learning HTML use a simple text


editor like Notepad, Notepad++ (PC) or
TextEdit (Mac).
Basic structure of HTML
Steps to open HTML
Editor
• Click on Windows v button.
• Type notepad/notepad++.
• Save the file on your computer. Select File >
Save as in the Notepad menu.
• Name the file "index.html"
• Write the HTML code in notepad/notepad++.

• Again save the file by pressing ctrl+s.


• View the HTML Page in Your Browser.

• Open the saved HTML file in your favorite


browser (double click on the file).

• The result will look much like this:


HTML Elements
• The HTML element is everything from the
start tag to the end tag.

• Examples of some HTML elements:


⚬<h1>My First Heading</h1>
⚬<p>My first paragraph.</p>

• <h1> is start tag and </h1> is end tag.


HTML attributes
• HTML attributes provide additional information
about HTML elements.

• All HTML elements can have attributes.

• Attributes provide additional


information about elements.

• Attributes are always specified in the start


tag.

• Attributes usually come in name/value pairs


like: name="value"
Image tag
• The HTML <img> tag is used to embed an image in a
web page.

• Web pages provide information in many different


formats, including images.

• Some of the image file formats supported by HTML


are .JPEG, .PNG, and .GIF
⚬GIF- It is a low-resolution image file format, which can be
static or animated. It is used for simple logos, icons,
buttons and symbols. Limited to 256 colours.

⚬JPEG- It is compressed without much loss in the quality of


the images. Good for complex images, such as
photographs.

⚬PNG- It is portable file format that is also low-resolution


• The <img> tag only contains attributes
only, and does not have a closing tag.

• The <img> tag has one required attribute-


⚬src - Specifies the path to the image
Attributes of <img> tag
• src- The required src attribute specifies the path
(URL) to the image.

• width and height-


The width and height attributes always define the
width and height of the image in pixels.

• border- It is used to add a border around the


image and it specifies the thickness of the border
in pixels.

• alt- This attribute specifies the text that will be


displayed in place of the image if it cannot be
• Example of <img> tag with attributes-
<html>
<head>
<title> Add Image</title>
</head>
<body>
<img src=“nature.jpg” width=“200” heigth=“200”
border=“2” alt=“This is an image of a nature’>
Nature does not hurry, yet everything is
accomplished.
Fresh air is as good for the mind as for the body.
Colors are smile of nature.
Nature is not a place to visit, it is a home.
</body>
</html>
Using Tables
• Tables are used to organize data into rows and
columns.

• This tag defines the beginning and end of the


table and contains all other table tags.
Attributes of the <td> tag
• rowspan- This attribute merges the cells across
rows. It specifies the number of rows that the cell
should span.

• colspan- This attribute merges the cells across


columns. It specifies the number of columns that
the cell should span.
Creating Hyperlinks
• HTML links are hyperlinks.
• You can click on a link and jump to another
document.
• When you move the mouse over a link, the
mouse arrow will turn into a little hand.
• Hyperlinks are displayed in the following colors by
default. Unvisited links(that have not
Click been clicked even once)
Here Visited links(that have been
Click clicked at least once)
Here Active links(a link is active once
Click you click on it)
Here
• We use the <a> (anchor) tag along with its href
attribute to create a hyperlink.
• The anchor tag is a container tag that comes in
pairs with an opening and closing tag.
• General form of the <a> tag is as given-
⚬<a href="url">link text</a>
￭ url- indicates the address of a web page on the
www.
￭ link text- it is the part that will be visible to the
user as underlined text. Clicking of the link will
open the web page with the specified URL.
• Example-
⚬<a href=“https://www.google.com”>Google</a>
⚬<a href=“services.html”>Our Services</a>
Types of hyperlinks
• Hyperlinks can be external or internal.

⚬External links- To create link to another HTML file


saved on your computer, include filename along with
its path in the URL.

⚬Internal links- An internal links are links to different


sections in the same web page. It is useful in cases
where the content of a web page is quite large.
Before creating an internal link we need to name
the section to be linked.
• Image link-
⚬To use an image as a link, just put
the <img> tag inside the <a> tag.

⚬Example-
<a href=“services.html”>
<img src=“services.jpg”>
</a>

⚬By combing the anchor and image tags, you


can create an image a clickable link, allows user
to navigate to the specified URL.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy