HTML Basics and Document Structure
Uploaded by
mallidinavya635HTML Basics and Document Structure
Uploaded by
mallidinavya635UNIT-1
HTML
HTML is the standard markup language for creating Web pages.
• 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 elements tell the browser how to display the content
A Simple HTML Document Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
What is an HTML Element?
• An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
• The HTML element is everything from the start tag to the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
Web Browsers
• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
• A browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Page Structure
HTML Documents
• All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
• It must only appear once, at the top of the page (before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important
heading:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
• HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://rguktsklm.ac.in/">This is a link</a>
</body>
</html>
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML elements.
HTML Attributes
• 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"
The src Attribute
• The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is
specified in the src attribute:</p>
<img src="image.jpg" width="500" height="600">
</body>
</html>
The title Attribute
• The title attribute defines some extra information about an element.
• The value of the title attribute will be displayed as a tooltip when you mouse
over the element:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a
tooltip.</p>
</body>
</html>
Bigger Headings
• 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:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size
property.</p>
</body>
</html>
• 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:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
HTML Styles
• The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Normal</p>
<p style="color:red;">Red</p>
<p style="color:blue;">Blue</p>
<p style="font-size:50px;">Big</p>
</body>
</html>
The HTML Style Attribute
• 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;">
Background Color
• The CSS background-color property defines the background color for an HTML
element.
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
• Example
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
• The CSS font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
• The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
• The CSS text-align property defines the horizontal text alignment for an HTML
element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Example: <p><i>This text is italic.</i></p>
HTML <mark> Element
• The HTML <mark> element defines text that should be marked or highlighted:
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element
• The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
• The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
• The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
• The HTML <sup> element defines superscript text. Superscript text appears half
a character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]:
Example
<p>This is <sup>superscripted</sup> text.</p>
Color Names
• In HTML, a color can be specified by using a color name:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Text Color
• You can set the color of text:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
• You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
HTML Styles - CSS
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
• With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!
Using CSS
• CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
• The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each HTML
page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
• Here is what the "styles.css" file looks like:
"styles.css":
• body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Colors, Fonts and Sizes
• Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.
• Example
• Use of CSS color, font-family and font-size properties:
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML FORMS
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button
Radio Box Controls
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
Checkboxes Controls
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>
Text Input Controls
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
PASSWORD
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "pwd" />
</form>
</body>
</html>
Multiple-Line Text Input Controls
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
Select Box Controls
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
File Select boxes
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
Hidden Controls
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Clickable Buttons
<!DOCTYPE html>
<html>
<body>
<h2>The Button Element</h2>
<button type="button" onclick="alert('Hello world!')">Click
Me!</button>
</body>
</html>
HTML FRAMES
• HTML <frame> tag define the particular area within an HTML file where another
HTML web page can be displayed.
• A <frame> tag is used with <frameset>, and it divides a webpage into multiple
sections or frames, and each frame can contain different web pages.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
How to create frame1,frame2 and frame 3
Frame1.html:
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color:blue;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>
HTML FRAMESET:
HTML <frameset> tag is used to contain the group of frames which can be
controlled and styled as a unit. The <frameset> element also specifies the number
of rows and columns in the frameset, and how much space they will occupy in a
frame.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="http://rguktsklm.ac.in/departments.php?department=cse">
<frame src="http://rguktsklm.ac.in/universitydata.php?data=overview">
</frameset>
</html>
1. Design the following static web pages required for an online book store web site.
HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, Login page,
Registration page, Catalogue page and Cart page (the description of these pages will
be given below).
Left frame: At least four links for navigation, which will display the catalogue of
respective links.
For e.g.: When you click the link “MCA” the catalogue for MCA Books should be
displayed in the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially
this page contains description of the web site.
Expected Output:
HTML-HYPERLINKS
HTML Links - Syntax
• 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.
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://rguktsklm.ac.in/">RGUKT SRIKAKULAM</a></p>
</body>
</html>
• 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
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href=" https://rguktsklm.ac.in/" target="_blank"> RGUKT SRIKAKULAM </a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="https://www.google.com/"><img src="smiley.gif" alt=“google"
style="width:42px;height:42px;"></a>
</body>
</html>
Link to an Email Address
• Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new
email), use mailto: inside the href attribute:</p>
<p><a href="mailto:[email protected]">Send email</a></p>
</body>
</html>
LISTS and TABLES
LISTS:
• Unordered lists
• Ordered lists
• Definition/description lists
Example
An unordered HTML list:
• Item
• Item
• Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered lists
Syntax:
<UL [TYPE=”square | disc |circle “] >
<LI>item name1 </LI>
<LI>item name2 </LI>
-----------------------
-----------------------
<LI>item name n </LI>
</UL>
EXAMPLE:
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h3>B.Tech Courses </h3>
<ul type="disc">
<li>CSE </li>
<li>IT </li>
<li>ECE</li>
<li>EEE</li>
<li>MECH</li>
</ul>
<h3>PG Courses </h3>
<ul type="square">
<li>M.Tech</li>
<li>MCA</li>
<li>MBA</li>
</ul>
</body>
</html>
Ordered Lists
Syntax:
<OL [TYPE=“1 |A |a | I|i] start=”n”>
<LI>item name1
<LI>item name2
---------------------
---------------------
<LI>item name n
</OL>
Different Ordered list types Type=”1” (default)
e.g.1,2,3,4….. Type=”A” Capital letters e.g.A,B,C…
Type=”a” Small letters e.g. a,b,c……
Type=”I” Large roman letters e.g. I, II, III,…
Example:
<html>
<head> <title>Ordered Lists</title> </head>
<body text="maroon">
<h3>Colors in VIBGYOR</h3>
<OL>
<LI>Violet</LI>
<LI>Indigo</LI>
<LI>Blue</LI>
<LI>Green</LI>
<LI>Yellow</LI>
<LI>Orange</LI>
<LI>Red</LI>
</OL>
<h3>Types of Fruits</h3>
<OL type="A" start="5">
<LI>Apple</LI>
<LI>Banana</LI>
<LI>Grapes</LI>
</OL>
</body>
</html>
Definition/Description List
<DL>………</DL>
A Definition list is a list of definition terms <DT>
and corresponding Definition Description
<DD> on a new line. To create a definition it
must start with <DL> and immediately
followed by the first definition term <DT>
EXAMPLE:
<html>
<head><title>Definition List</title> </head>
<body>
<DL>
<DT>HTML</DT>
<DD>
HTML is a scripting language which is used to create web pages.<br/>if you are
thinking of creating your own web pages, you need to known at least basic HTML.
</DD>
<DT>JAVA </DT>
<DD>
Java is an Object-Oriented Programming Language<br/> used to create robust
Client/Server applications.
</DD>
</DL>
</body>
</html>
Tables
Example:
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Table heading
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing Attributes
Attributes called cellpadding and cellspacing which
you will use to adjust the white space in your table
cells. The cellspacing attribute defines space between
table cells, while cellpadding represents the distance
between cell borders and the content within a cell.
Example
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspanif you want to merge two or more
rows.
Example
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Tables Backgrounds
• You can set table background using one of the following two
ways −
• bgcolor attribute − You can set background color for whole
table or just for one cell.
• background attribute − You can set background image for
whole table or just for one cell.
• You can also set border color also using bordercolor attribute.
• Note − The bgcolor, background, and bordercolorattributes
deprecated in HTML5. Do not use these attributes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table background image
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "C:\Users\viswa\
Desktop\Priya\WEB TECHNOLOGIES\WEB TECHNOLOGIES\WT UNITWISE
MATERIAL\UNIT-1 HTML CSS/pic.jpg">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table Height and Width
You can set a table width and height using width and height attributes. You can
specify table width or height in terms of pixels or in terms of percentage of
available screen area.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
TABLE CAPTION
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
HTML Images
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic.jpg" alt=“img" width="500" height="333">
</body>
</html>
HTML Images Syntax
• 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
Syntax:
• <img src="url" alt="alternatetext">
The alt Attribute
• The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
• The value of the alt attribute should describe the image:
If a browser cannot find an image, it will display the value of the alt attribute:
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an
image:</p>
<img src=“pic.jpg" alt="Girl " style="width:500px;height:600px;">
</body>
</html>
Background Image on a HTML element
• To add a background image on an HTML element, use the HTML style attribute and the CSS background-
image property:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image: url('pic.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>
You might also like
- Bachelore of Computer Applications ST - Xavier'S College - Krupa ShahNo ratings yetBachelore of Computer Applications ST - Xavier'S College - Krupa Shah75 pages
- Topic 7: Understanding The Functionality of HTML What Is HTML?No ratings yetTopic 7: Understanding The Functionality of HTML What Is HTML?9 pages
- 1 HTML List Images Links Table (Unit 2)No ratings yet1 HTML List Images Links Table (Unit 2)39 pages
- 1QM1 - HTML Fundamentals - PPTX - 20240304 - 133016 - 0000No ratings yet1QM1 - HTML Fundamentals - PPTX - 20240304 - 133016 - 000075 pages
- Class 8 Computer Worksheet of Introduction To HTMLNo ratings yetClass 8 Computer Worksheet of Introduction To HTML8 pages
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML3 pages
- Joslyn Study Manual de Funcionamiento yNo ratings yetJoslyn Study Manual de Funcionamiento y29 pages
- Collective Model: Introduction To Nuclear ScienceNo ratings yetCollective Model: Introduction To Nuclear Science42 pages
- Video Creation and Editing (Unit 1 & 2)No ratings yetVideo Creation and Editing (Unit 1 & 2)33 pages
- Spirit Medium: A Life of Training and PrayerNo ratings yetSpirit Medium: A Life of Training and Prayer7 pages
- (Business Environment) : DR Sakuntala Misra National Rehabilitation University, Lucknow Faculty of LawNo ratings yet(Business Environment) : DR Sakuntala Misra National Rehabilitation University, Lucknow Faculty of Law11 pages
- Standard Costing and Variance Analysis GuideNo ratings yetStandard Costing and Variance Analysis Guide5 pages
- English 4 - Quarter 4 - Module 3 Fact OpinionNo ratings yetEnglish 4 - Quarter 4 - Module 3 Fact Opinion14 pages
- Local - CHAPTER 13 COST ACCOUNTING (Answer)No ratings yetLocal - CHAPTER 13 COST ACCOUNTING (Answer)3 pages
- OSG - Product Flyer - Industry - EV Solutions - Vol 1 - IANo ratings yetOSG - Product Flyer - Industry - EV Solutions - Vol 1 - IA48 pages
