Scribd
Upload
2 views

Introduction to HTML

The document provides an overview of HTML, including its definition, structure, and key components such as elements, headings, paragraphs, links, images, and tables. It explains how to use various HTML tags and attributes to create and style web pages, as well as the role of CSS and JavaScript in enhancing HTML functionality. Additionally, it covers the use of comments, lists, block and inline elements, and the importance of the class and ID attributes.

Uploaded by

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

Introduction to HTML

The document provides an overview of HTML, including its definition, structure, and key components such as elements, headings, paragraphs, links, images, and tables. It explains how to use various HTML tags and attributes to create and style web pages, as well as the role of CSS and JavaScript in enhancing HTML functionality. Additionally, it covers the use of comments, lists, block and inline elements, and the importance of the class and ID attributes.

Uploaded by

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

23AID215 – User Interface Design

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for
creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to
display content
Purpose of HTML Elements

• Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Key HTML Components
• <!DOCTYPE html>: Defines the document as
HTML5
• <html>: Root element of the HTML page
• <head>: Contains meta information about the
page
• <title>: Specifies the page title (shown in the
browser's tab)
• <body>: Container for visible content (headings,
paragraphs, etc.)
Common HTML Elements
• <h1>: Defines a large heading
• <p>: Defines a paragraph

• Example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
What is an HTML Element?
• Defined by:
- Start tag
- Content
- End tag

• Structure:
<tagname> Content goes here... </tagname>

• Example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Code Output
Code Output
Code Output
Code Output
Code Output
Code Output
HTML Headings
• HTML headings are titles or subtitles that you want to
display on a webpage.
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines
the least important heading.
• Each HTML heading has a default size. However, you
can specify the size for any heading with the style
attribute, using the CSS font-size property:
• <h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs

• The HTML <p> element defines a paragraph.


• A paragraph always starts on a new line, and
browsers automatically add some white space
(a margin) before and after a paragraph.
• The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal rule.
• The <hr> tag is an empty tag, which means that it has
no end tag.
• ------------------------------------------------------------------
• The HTML <br> element defines a line break.
• ------------------------------------------------------------------
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves
both spaces and line breaks:
• <pre> </pre>
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:


<tagname style="property:value;">
• The property is a CSS property. The value is a CSS value.
•
EXAMPLE:
• The CSS background-color property defines the background color for an HTML element.
<h1 style="background-color:powderblue;">This is a heading</h1>
• The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
• The CSS font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
• The CSS font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
• The CSS text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
HTML Text Formatting

• HTML contains several elements for defining


text with a special meaning.
HTML Quotation and Citation Elements
<blockquote>
– The HTML <blockquote> element defines a section that is quoted from another source.
– Browsers usually indent <blockquote> elements.
<q>
– The HTML <q> tag defines a short quotation.

– Browsers normally insert quotation marks around the quotation.


<abbr>
– The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.",
"ASAP", "ATM".

– Marking abbreviations can give useful information to browsers, translation systems and search-
engines.
<address>
– The HTML <address> tag defines the contact information for the author/owner of a document or
an article.

– The contact information can be an email address, URL, physical address, phone number, social
media handle, etc.

– The text in the <address> element usually renders in italic, and browsers will always add a line
break before and after the <address> element.
HTML Comments

• HTML comments are not displayed in the browser, but they can
help document your HTML source code.
• <!-- Write your comments here -->
• Comments can be used to hide content.
• You can also hide more than one line. Everything between the
<!-- and the --> will be hidden from the display.
• Comments are also great for debugging HTML, because you can
comment out HTML lines of code, one at a time, to search for
errors.
HTML Links
• The HTML <a> tag defines a hyperlink. It has the following syntax:
• <a href="url">link text</a>
• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

• The link text is the part that will be visible to the reader.

• Clicking on the link text, will send the reader to the specified URL address.
• By default, links will appear as follows in all browsers:

– An unvisited link is underlined and blue


– A visited link is underlined and purple
– An active link is underlined and red
HTML Links - The target Attribute

• By default, the linked page will be displayed in the current browser


window. To change this, you must specify another target for the link.

• The target attribute specifies where to open the linked document.

• The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it


was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
Absolute URLs vs. Relative URLs
• A local link (a link to a page within the same
website) is specified with a relative
URL (without the "https://www" part)
HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the <a> tag:

• Link to an Email Address


• <a href="mailto:[email protected]">Send email</a>
• Button as a Link
• To use an HTML button as a link, you have to add some JavaScript
code.
• JavaScript allows you to specify what happens at certain events, such
as a click of a button:
• <button onclick="document.location='default.asp'">HTML Tutorial</button>
HTML Book Marks
• HTML links can be used to create bookmarks, so that readers can jump to
specific parts of a web page.
• Bookmarks can be useful if a web page is very long.
• To create a bookmark - first create the bookmark, then add a link to it.
• When the link is clicked, the page will scroll down or up to the location with
the bookmark.
• First, use the id attribute to create a bookmark:
• <h2 id="C4">Chapter 4</h2>
• <a href="#C4">Jump to Chapter 4</a>
• You can also add a link to a bookmark on another page:
• <a href="html_demo.html#C4">Jump to Chapter 4</a>
•
HTML Images
Images can improve the design and the appearance of a web page.
• The HTML <img> tag is used to embed an image in a web page.

• Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding
space for the referenced image.

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

• The <img> tag has two required attributes:

• src - Specifies the path to the image


• alt - Specifies an alternate text for the image
• <img src="url" alt="alternatetext">
• You can use the style attribute to specify the width and height of an image.
• <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
• Some web sites point to an image on another server.

• To point to an image on another server, you must specify an absolute (full) URL in the src attribute
HTML Images
• The float property in CSS is used to position
an element to the left or right of its
container, allowing text or inline elements to
wrap around it. It's commonly used for
layouts, images, or floating elements
alongside text.
• float: none | left | right;
HTML ImageMap
• By defining various shapes (rectangles, circles, and polygons) within an image,
each with its own associated link, developers can create dynamic and
interactive visual HTML image maps are defined by the <map> tag.
• An image map enables specific areas of an image to be clickable, acting as
links to different destinations.
• This technique is useful for creating complex navigation systems or interactive
graphics on a webpage.
<map name="world map">
<!-- Define your clickable areas here --> </map>
• When used in conjunction with the <img> tag, the <map> tag
establishes a connection between the image and its associated map.
• The <area> tag is used within the <map> tag to define clickable
regions on an image. It specifies the shape, coordinates, and
associated actions for each clickable area.
• Following is the syntax of the <area> tag −
• <area shape="shape_values" coords="coordinates" href="url"
alt="Description">
Creating Image Map in HTML

• <img src="/images/logo.png" usemap="#image_map">


– <map name="image_map">
– <area shape="circle" coords="45,32,49" href="index.htm"
alt="tutorialspoint">
– <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm"
alt="tutorials_library">
– </map>
HTML Colors
• The following three methods are used to set colors in a web
page −
– Color names − We can specify color names directly, like green, blue, or red.

– Hex codes − A six-digit code representing the amount of red, green, and blue
that makes up the color.

– Color decimal or percentage values − This value is specified using the rgb()
property.
HTML Colors
• Colors can also be specified using the web-safe colors, which are formed
by the combination of red, green, and blue (RGB) hex values.
• Here is a list of 216 colors that are considered the safest and most
consistent across different computers. These colors range from the
hexadecimal code #000000 (black) to #FFFFFF (white) and are supported
by all computers using a 256-color palette.
•
Set Text Color
• Set Background Color style="background-color: Fuchsia;"
• Set Border Color style="border: 2.5px solid Fuchsia;
HTML Tables

• HTML tables allow web developers to arrange data into rows and columns.
• <table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
HTML Tables
• HTML tables can have borders of different
styles and shapes.
• To add a border, use the CSS border property
on table, th, and td elements:
HTML Lists
• HTML lists allow web developers to group a
set of related items in lists.

• Unordered List : <ul> <li></li> </ul>


• Ordered List : <ol><li></li><ol>
HTML List
• Description List:
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

• The <dl> tag defines the description list, the


<dt> tag defines the term (name), and the
<dd> tag describes each term
HTML Block Elements
• A block-level element starts on a new line and takes up
the full width of its container (by default).[Creates a
"block" or rectangular space on the page. Other elements
will appear above or below it, not beside it. Can Contain:
Both block-level and inline elements]
• Two commonly used block elements are: <p> and <div>.
– The <p> element defines a paragraph in an HTML document.
– The <div> element defines a division or a section in an HTML
document.
HTML INLINE Elements
• An inline element does not start on a new line.
It takes up only as much width as necessary
(the content's width).
• Flows alongside other inline elements, without
breaking to a new line.
• Cannot contain block-level elements.
• <span> <a>, <img>, <strong>, <em>, <label>,
<b>, <i>
<div>
• The <div> element is by default a block
element, meaning that it takes all available
width, and comes with line breaks before and
after.
• The <div> element is often used to group
sections of a web page together.
• You can have many <div> containers on the
same page.
HTML Class Attribute
• The HTML class attribute is used to specify a class for an HTML
element.

• Multiple HTML elements can share the same class.


• Used to define a group or category of elements that share the
same styles or behaviors.
• A class can be used on multiple elements. One element can
also have multiple classes.
HTML ID Attribute
• Used to uniquely identify a single HTML
element.
• Each id must be unique within an HTML
document. It cannot be reused for other
elements.

• <p id="unique" class="highlight


important">This paragraph has both id and
class.</p>
HTML Iframe
• HTML iframe is an inline frame that allows you to embed another
document within the current HTML document. Whenever you want to
display another webpage within the webpage, you can use an iframe.
• In HTML, the inline frame is defined with the <iframe> tag. This tag
creates a rectangular region at a specified place within the HTML
document in which the browser can display an external document such as
a map or another web page.
• <iframe src="url" title="description"></iframe>
• Tip: It is a good practice to always include a title attribute for the
<iframe>. This is used by screen readers to read out what the content of
the iframe is.
• Use the height and width attributes to specify the size of the iframe.
• Or you can add the style attribute and use the CSS height and width
properties:
HTML JavaScript
• JavaScript makes HTML pages more dynamic and interactive.
• The HTML <script> Tag
• The HTML <script> tag is used to define a client-side script (JavaScript).

• The <script> element either contains script statements, or it points to an external script file
through the src attribute.

• Common uses for JavaScript are image manipulation, form validation, and dynamic changes
of content.

• To select an HTML element, JavaScript most often uses the document.getElementById()


method.

• This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

• <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
HTML HEAD Element
• The HTML <head> element is a container for the following elements: <title>, <style>,
<meta>, <link>, <script>, and <base>.
• The <title> element defines the title of the document. The title must be text-only, and
it is shown in the browser's title bar or in the page's tab.
• The <style> element is used to define style information for a single HTML page:

• The <link> element defines the relationship between the current document and an
external resource.

• The <link> tag is most often used to link to external style sheets
• The <meta> element is typically used to specify the character set, page description,
keywords, author of the document, and viewport settings.

• The metadata will not be displayed on the page, but is used by browsers (how to
display content or reload page), by search engines (keywords), and other web
services.
Setting the Viewport
• The viewport is the user's visible area of a web page. It varies with the
device - it will be smaller on a mobile phone than on a computer screen.

• You should include the following <meta> element in all your web pages:
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• This gives the browser instructions on how to control the page's
dimensions and scaling.

• The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).

• The initial-scale=1.0 part sets the initial zoom level when the page is first
loaded by the browser.
HTML Forms
• An HTML form is used to collect user input. The
user input is most often sent to a server for
processing.
• The HTML <form> element is used to create an
HTML form for user input:

• The <form> element is a container for different


types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
<input>
• The HTML <input> element is the most used
form element.

• An <input> element can be displayed in many


ways, depending on the type attribute.
HTML Form Attributes
• The action attribute defines the action to be
performed when the form is submitted.

• Usually, the form data is sent to a file on the


server when the user clicks on the submit
button.
HTML Form Attributes

• The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit
button.

• In the example below, the form data is sent to a file called "action_page.php". This file
contains a server-side script that handles the form data
The Method Attribute
• The method attribute specifies the HTTP method to be used when submitting the form
data.

• The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

• The default HTTP method when submitting form data is GET.


• The autocomplete attribute specifies whether a form should have autocomplete on or
off.
• The <select> Element
• The <select> element
The
HTML <form> element defines a drop-down list:
can contain
one or more of the
following form
elements:
•<input>
•<label>
•<select>
•<textarea>
•<button>
•<fieldset>
•<legend>
•<datalist>
•<output>
•<option>
•<optgroup>
HTML Input Types

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
HTML Styles
<element style="property: value; property: value;">

Text and Font Styling


• color: Changes text color.
• Example: style="color: blue;"
• font-size: Specifies text size.
• Example: style="font-size: 18px;"
• font-family: Sets the font.
• Example: style="font-family: Arial, sans-serif;"
• text-align: Aligns text (e.g., left, right, center, justify).
• Example: style="text-align: center;"

Background Styling
• background-color: Sets background color.
• Example: style="background-color: yellow;"
• background-image: Adds a background image.
• Example: style="background-image: url('image.jpg');
HTML Styles
Summary
• HTML is the backbone of web pages
• Elements define the structure and
presentation of content
• Basic syntax includes tags, attributes, and
content
• Practice with simple examples to build
understanding

You might also like